Merge pull request #5 from react-declarative/typography-field

tripolskypetr · web-flow · commit 2d74f9e2e33c · 2024-08-02T18:54:36.000+05:00
typography
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -10,8 +10,8 @@
     "react-native": "0.74.1",
     "react-native-svg": "15.2.0",
     "react-native-web": "~0.19.6",
-    "rn-declarative": "^0.0.55",
-    "rn-declarative-eva": "^0.0.43"
+    "rn-declarative": "^0.0.56",
+    "rn-declarative-eva": "^0.0.44"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
diff --git a/packages/rn-declarative-eva/package-lock.json b/packages/rn-declarative-eva/package-lock.json
diff --git a/packages/rn-declarative-eva/package.json b/packages/rn-declarative-eva/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rn-declarative-eva",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "A responsive layout for the react-native",
   "private": false,
   "author": {
@@ -77,7 +77,7 @@
     "react-native": "0.71.6",
     "react-native-svg": "9.4.0",
     "typescript": "4.6.2",
-    "rn-declarative": "0.0.55"
+    "rn-declarative": "0.0.56"
   },
   "dependencies": {
     "rimraf": "3.0.2"
diff --git a/packages/rn-declarative/package-lock.json b/packages/rn-declarative/package-lock.json
diff --git a/packages/rn-declarative/package.json b/packages/rn-declarative/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rn-declarative",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "A responsive layout for the react-native",
   "private": false,
   "author": {
diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/ISlotFactoryContext.ts b/packages/rn-declarative/src/components/One/components/SlotFactory/ISlotFactoryContext.ts
@@ -16,6 +16,7 @@ import { IRatingSlot } from '../../slots/RatingSlot';
 import { ISliderSlot } from '../../slots/SliderSlot';
 import { ITimeSlot } from '../../slots/TimeSlot';
 import { IChooseSlot } from '../../slots/ChooseSlot';
+import { ITypographySlot } from '../../slots/TypographySlot';
 
 /**
  * A context object that provides access to various component types used by the slot factory.
@@ -45,6 +46,7 @@ export interface ISlotFactoryContext {
     Slider: ComponentType<ISliderSlot>;
     Time: ComponentType<ITimeSlot>;
     Choose: ComponentType<IChooseSlot>;
+    Typography: ComponentType<ITypographySlot>;
 }
 
 export default ISlotFactoryContext;
diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/SlotContext.ts b/packages/rn-declarative/src/components/One/components/SlotFactory/SlotContext.ts
@@ -16,6 +16,7 @@ import Rating from './components/Rating';
 import Slider from './components/Slider';
 import Time from './components/Time';
 import Choose from './components/Choose';
+import Typography from './components/Typography';
 
 import ISlotFactoryContext from './ISlotFactoryContext';
 
@@ -46,6 +47,7 @@ export const defaultSlots: ISlotFactoryContext = {
     Slider,
     Time,
     Choose,
+    Typography,
 };
 
 export const SlotContext = createContext<ISlotFactoryContext>(defaultSlots);
diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/components/Typography.tsx b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Typography.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { Text } from 'react-native';
+
+import { ITypographySlot } from '../../../slots/TypographySlot';
+
+/**
+ * Typography component.
+ *
+ * @typedef  ITypographySlot
+ * @property value - The text value to be displayed.
+ * @property placeholder - The placeholder text to be displayed if `value` is empty.
+ * @property typoVariant - The variant of the typography component (default: 'body1').
+ *
+ * @param props - The props for the Typography component.
+ * @returns The rendered Typography component.
+ */
+export const Typography = ({
+    value = '',
+    placeholder = '',
+}: ITypographySlot) => (
+    <Text>
+        {value || placeholder}
+    </Text>
+);
+
+export default Typography;
diff --git a/packages/rn-declarative/src/components/One/config/createField.tsx b/packages/rn-declarative/src/components/One/config/createField.tsx
@@ -22,6 +22,7 @@ import RatingField from "../fields/RatingField";
 import SliderField from "../fields/SliderField";
 import TimeField from "../fields/TimeField";
 import ChooseField from "../fields/ChooseField";
+import TypographyField from "../fields/TypographyField";
 
 const fieldMap: { [key in FieldType]?: React.ComponentType<IEntity> } = Object.create(null);
 
@@ -58,6 +59,7 @@ Object.assign(fieldMap, {
   [FieldType.Slider]: SliderField,
   [FieldType.Time]: TimeField,
   [FieldType.Choose]: ChooseField,
+  [FieldType.Typography]: TypographyField,
 });
 
 /**
diff --git a/packages/rn-declarative/src/components/One/config/initialValue.ts b/packages/rn-declarative/src/components/One/config/initialValue.ts
@@ -31,6 +31,7 @@ const initialValueMap = {
   [FieldType.Slider]: 0,
   [FieldType.Time]: null,
   [FieldType.Choose]: null,
+  [FieldType.Typography]: "",
 };
 
 type InitialValue = typeof initialValueMap;
diff --git a/packages/rn-declarative/src/components/One/config/isBaseline.ts b/packages/rn-declarative/src/components/One/config/isBaseline.ts
@@ -23,6 +23,7 @@ export const baselineFields = new Set<FieldType>([
     FieldType.Slider,
     FieldType.Time,
     FieldType.Choose,
+    FieldType.Typography,
 ]);
 
 /**
diff --git a/packages/rn-declarative/src/components/One/fields/TypographyField.tsx b/packages/rn-declarative/src/components/One/fields/TypographyField.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import Typography from '../../../components/One/slots/TypographySlot';
+
+import makeField from '../components/makeField';
+
+import IManaged, { PickProp } from '../../../model/IManaged';
+import IAnything from '../../../model/IAnything';
+import IField from '../../../model/IField';
+
+/**
+ * Interface for props of the TypographyField component.
+ *
+ * @template Data - The data type of the field.
+ * @template Payload - The payload type of the field.
+ */
+export interface ITypographyFieldProps<Data = IAnything, Payload = IAnything> {
+  /**
+   * Retrieves the `placeholder` property from the given `IField` object.
+   * The `placeholder` property is a key of type `PickProp`.
+   *
+   * @param field - The input field object.
+   * @returns - The `placeholder` property of the field object.
+   */
+  placeholder?: PickProp<IField<Data, Payload>, 'placeholder'>;
+  /**
+   * Represents the `typoVariant` property of an object.
+   * @typedef TypoVariant
+   * @property - The object from which the `typoVariant` property is picked.
+   * @property - The name of the property being picked.
+   * @property - The value of the `typoVariant` property.
+   */
+  typoVariant?: PickProp<IField<Data, Payload>, 'typoVariant'>;
+}
+
+/**
+ * Represents a private interface for a typography field.
+ *
+ * @template Data - The type of data the field holds.
+ */
+export interface ITypographyFieldPrivate<Data = IAnything> {
+  value: PickProp<IManaged<Data>, 'value'>;
+}
+
+/**
+ * Renders a typography field component.
+ *
+ * @param props - The props for the typography field.
+ * @param [props.value=''] - The value of the typography field.
+ * @param [props.placeholder=''] - The placeholder text for the typography field.
+ * @param [props.typoVariant='body1'] - The typography variant for the field.
+ * @param [props.style] - Additional styles to be applied to the field.
+ * @returns - The rendered typography field component.
+ */
+export const TypographyField = ({
+  value = '',
+  placeholder = '',
+  typoVariant = 'body1',
+}: ITypographyFieldProps & ITypographyFieldPrivate) => (
+  <Typography
+    value={value}
+    placeholder={placeholder}
+    typoVariant={typoVariant}
+  />
+);
+
+TypographyField.displayName = 'TypographyField';
+
+export default makeField(TypographyField, {
+  skipFocusBlurCall: true,
+});
diff --git a/packages/rn-declarative/src/components/One/slots/TypographySlot/ITypographySlot.ts b/packages/rn-declarative/src/components/One/slots/TypographySlot/ITypographySlot.ts
@@ -0,0 +1,12 @@
+import { ITypographyFieldPrivate, ITypographyFieldProps } from "../../fields/TypographyField";
+
+/**
+ * The ITypographySlot interface represents a typography slot.
+ *
+ * @interface
+ * @extends ITypographyFieldProps
+ * @extends ITypographyFieldPrivate
+ */
+export interface ITypographySlot extends ITypographyFieldProps, ITypographyFieldPrivate { }
+
+export default ITypographySlot;
diff --git a/packages/rn-declarative/src/components/One/slots/TypographySlot/TypographySlot.tsx b/packages/rn-declarative/src/components/One/slots/TypographySlot/TypographySlot.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useContext } from 'react';
+
+import { SlotContext } from '../../components/SlotFactory';
+
+import ITypographySlot from './ITypographySlot';
+
+/**
+ * Represents a slot for typography components.
+ * @param props - The properties for the typography slot.
+ * @returns A typography component.
+ */
+export const TypographySlot = (props: ITypographySlot) => {
+    const { Typography } = useContext(SlotContext);
+    return <Typography {...props} />;
+};
+
+export default TypographySlot;
diff --git a/packages/rn-declarative/src/components/One/slots/TypographySlot/index.ts b/packages/rn-declarative/src/components/One/slots/TypographySlot/index.ts
@@ -0,0 +1,3 @@
+export * from './ITypographySlot';
+export * from './TypographySlot';
+export { default } from './TypographySlot';
diff --git a/packages/rn-declarative/src/components/One/slots/index.ts b/packages/rn-declarative/src/components/One/slots/index.ts
@@ -13,3 +13,4 @@ export * from './RatingSlot';
 export * from './SliderSlot';
 export * from './TimeSlot';
 export * from './ChooseSlot';
+export * from './TypographySlot';
diff --git a/packages/rn-declarative/src/index.ts b/packages/rn-declarative/src/index.ts
@@ -111,6 +111,7 @@ import { IRatingSlot as IRatingSlotInternal } from './components';
 import { ISliderSlot as ISliderSlotInternal } from './components';
 import { ITimeSlot as ITimeSlotInternal } from './components';
 import { IChooseSlot as IChooseSlotInternal } from './components';
+import { ITypographySlot as ITypographySlotInternal } from './components';
 
 export type ICheckBoxSlot = ICheckBoxSlotInternal;
 export type IComboSlot = IComboSlotInternal;
@@ -128,6 +129,7 @@ export type IRatingSlot = IRatingSlotInternal;
 export type ISliderSlot = ISliderSlotInternal;
 export type ITimeSlot = ITimeSlotInternal;
 export type IChooseSlot = IChooseSlotInternal;
+export type ITypographySlot = ITypographySlotInternal;
 
 export { randomString } from './utils/randomString';
 export { compareFulltext } from './utils/compareFulltext';
diff --git a/packages/rn-declarative/src/model/FieldType.ts b/packages/rn-declarative/src/model/FieldType.ts
@@ -25,6 +25,7 @@ export enum FieldType {
     Slider = 'slider-field',
     Time = 'time-field',
     Choose = 'choose-field',
+    Typography = 'typography-field',
 };
 
 Object.entries(FieldType).forEach(([key, value]) => {
diff --git a/packages/rn-declarative/src/model/IField.ts b/packages/rn-declarative/src/model/IField.ts
@@ -310,6 +310,23 @@ export interface IField<Data = IAnything, Payload = IAnything> {
      */
     defaultValue?: Value | ((payload: Payload) => Value);
 
+    /**
+     * Шрифт для поля Typography
+     */
+    typoVariant?: keyof {
+      h1: 'h1',
+      h2: 'h2',
+      h3: 'h3',
+      h4: 'h4',
+      h5: 'h5',
+      h6: 'h6',
+      subtitle1: 'subtitle1',
+      subtitle2: 'subtitle2',
+      body1: 'body1',
+      body2: 'body2',
+      caption: 'caption',
+    };
+
     /**
      * Коллбек, позволяющий применить собственную компоновку
      */
diff --git a/packages/rn-declarative/src/model/TypedField.ts b/packages/rn-declarative/src/model/TypedField.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "rn-declarative",`
`3`		`- "version": "0.0.55",`
	`3`	`+ "version": "0.0.56",`
`4`	`4`	`"description": "A responsive layout for the react-native",`
`5`	`5`	`"private": false,`
`6`	`6`	`"author": {`