Merge pull request #6 from react-declarative/tree-view

tree-field

Author: tripolskypetr

demo/package-lock.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.56",
-    "rn-declarative-eva": "^0.0.44"
+    "rn-declarative": "^0.0.57",
+    "rn-declarative-eva": "^0.0.45"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-declarative-eva",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "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.56"
+    "rn-declarative": "0.0.57"
   },
   "dependencies": {
     "rimraf": "3.0.2"

packages/rn-declarative-eva/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-declarative",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "description": "A responsive layout for the react-native",
   "private": false,
   "author": {

packages/rn-declarative-eva/package.json

@@ -17,6 +17,7 @@ import { ISliderSlot } from '../../slots/SliderSlot';
 import { ITimeSlot } from '../../slots/TimeSlot';
 import { IChooseSlot } from '../../slots/ChooseSlot';
 import { ITypographySlot } from '../../slots/TypographySlot';
+import { ITreeSlot } from '../../slots/TreeSlot';
 
 /**
  * A context object that provides access to various component types used by the slot factory.
@@ -47,6 +48,7 @@ export interface ISlotFactoryContext {
     Time: ComponentType<ITimeSlot>;
     Choose: ComponentType<IChooseSlot>;
     Typography: ComponentType<ITypographySlot>;
+    Tree: ComponentType<ITreeSlot>;
 }
 
 export default ISlotFactoryContext;

packages/rn-declarative/package-lock.json

@@ -17,6 +17,7 @@ import Slider from './components/Slider';
 import Time from './components/Time';
 import Choose from './components/Choose';
 import Typography from './components/Typography';
+import Tree from './components/Tree';
 
 import ISlotFactoryContext from './ISlotFactoryContext';
 
@@ -48,6 +49,7 @@ export const defaultSlots: ISlotFactoryContext = {
     Time,
     Choose,
     Typography,
+    Tree,
 };
 
 export const SlotContext = createContext<ISlotFactoryContext>(defaultSlots);

packages/rn-declarative/package.json

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { Text } from 'react-native';
+
+import { ITreeSlot } from '../../../slots/TreeSlot';
+
+export const Tree = ({}: ITreeSlot) => (
+    <Text>
+        FieldType.Tree is not provided (see OneSlotFactory)
+    </Text>
+)
+
+export default Tree;

packages/rn-declarative/src/components/One/components/SlotFactory/ISlotFactoryContext.ts

@@ -23,6 +23,7 @@ import SliderField from "../fields/SliderField";
 import TimeField from "../fields/TimeField";
 import ChooseField from "../fields/ChooseField";
 import TypographyField from "../fields/TypographyField";
+import TreeField from "../fields/TreeField";
 
 const fieldMap: { [key in FieldType]?: React.ComponentType<IEntity> } = Object.create(null);
 
@@ -60,6 +61,7 @@ Object.assign(fieldMap, {
   [FieldType.Time]: TimeField,
   [FieldType.Choose]: ChooseField,
   [FieldType.Typography]: TypographyField,
+  [FieldType.Tree]: TreeField,
 });
 
 /**

packages/rn-declarative/src/components/One/components/SlotFactory/SlotContext.ts

@@ -32,6 +32,7 @@ const initialValueMap = {
   [FieldType.Time]: null,
   [FieldType.Choose]: null,
   [FieldType.Typography]: "",
+  [FieldType.Tree]: null,
 };
 
 type InitialValue = typeof initialValueMap;

packages/rn-declarative/src/components/One/components/SlotFactory/components/Tree.tsx

@@ -24,6 +24,7 @@ export const baselineFields = new Set<FieldType>([
     FieldType.Time,
     FieldType.Choose,
     FieldType.Typography,
+    FieldType.Tree,
 ]);
 
 /**

packages/rn-declarative/src/components/One/config/createField.tsx

@@ -0,0 +1,170 @@
+import * as React from "react";
+
+import Tree from '../../../components/One/slots/TreeSlot';
+
+import makeField from "../components/makeField";
+
+import IManaged, { PickProp } from "../../../model/IManaged";
+import IAnything from "../../../model/IAnything";
+import IField from "../../../model/IField";
+
+/**
+ * Interface for the props of the ITreeField component.
+ *
+ * @template Data The type of data in the field.
+ * @template Payload The type of payload in the field.
+ */
+export interface ITreeFieldProps<Data = IAnything, Payload = IAnything> {
+  /**
+   * Validation factory config
+   *
+   * @template IField - Type representing the field object.
+   * @template Data - Type representing the data object.
+   * @template Payload - Type representing the payload object.
+   * 
+   * @returns The value of the "validation" property.
+   */
+  validation?: PickProp<IField<Data, Payload>, 'validation'>;
+  /**
+   * Returns the "description" property of a given object.
+   *
+   * @template T - The type of the object.
+   * @template K - The literal key type.
+   *
+   * @param obj - The object from which to extract the property.
+   * @param key - The literal key representing the property to extract.
+   *
+   * @returns - The value of the specified property.
+   */
+  description?: PickProp<IField<Data, Payload>, "description">;
+  /**
+   * Type definition for the "title" property picked from the given object type.
+   *
+   * @template IField - The object type that contains the "title" property.
+   * @template Data - The data type of the "title" property.
+   * @template Payload - The payload type of the "title" property.
+   *
+   * @param - The object from which the "title" property will be picked.
+   *
+   * @returns - The resulting object that only contains the "title" property.
+   */
+  title?: PickProp<IField<Data, Payload>, "title">;
+  /**
+   * Type definition for the variable placeholder.
+   *
+   * @template Data - The type of data for the field.
+   * @template Payload - The type of payload for the field.
+   * @typedef placeholder
+   */
+  placeholder?: PickProp<IField<Data, Payload>, "placeholder">;
+  /**
+   * Specifies if a field is readOnly.
+   *
+   * @typedef Readonly
+   *
+   * @typedef IField
+   * @typedef Payload
+   * @typedef PickProp
+   * @typedef Data
+   *
+   * @param readonly - The field being checked for readOnly status.
+   *
+   * @returns - A boolean value indicating if the field is readOnly.
+   */
+  readonly?: PickProp<IField<Data, Payload>, "readonly">;
+  /**
+   * Represents the `disabled` property of a field in a form.
+   *
+   * @typedef Disabled
+   *
+   * @property disabled - Indicates whether the field is disabled or not.
+   * @template Data - The type of data stored in the form.
+   * @template Payload - The type of payload used for form submission.
+   */
+  disabled?: PickProp<IField<Data, Payload>, "disabled">;
+  /**
+   * Represents the item tree of a specific field in the data payload.
+   *
+   * @typedef ItemTree
+   */
+  itemTree?: PickProp<IField<Data, Payload>, 'itemTree'>;
+}
+
+/**
+ * Represents the private interface for the TreeField component.
+ *
+ * @template Data The type of data for the TreeField component.
+ */
+export interface ITreeFieldPrivate<Data = IAnything> {
+  onChange: PickProp<IManaged<Data>, "onChange">;
+  invalid: PickProp<IManaged<Data>, "invalid">;
+  incorrect: PickProp<IManaged<Data>, "incorrect">;
+  value: PickProp<IManaged<Data>, "value">;
+  loading: PickProp<IManaged<Data>, "loading">;
+  disabled: PickProp<IManaged<Data>, "disabled">;
+  dirty: PickProp<IManaged<Data>, "dirty">;
+  name: PickProp<IManaged<Data>, "name">;
+}
+
+/**
+ * Renders a TreeField component.
+ *
+ * @param props - The props object containing the necessary data for rendering the TreeField.
+ * @param props.invalid - Determines if the TreeField is invalid.
+ * @param props.value - The value of the TreeField.
+ * @param props.disabled - Determines if the TreeField is disabled.
+ * @param props.readonly - Determines if the TreeField is readonly.
+ * @param props.incorrect - Determines if the TreeField is incorrect.
+ * @param props.description - The description text for the TreeField.
+ * @param props.outlined - Determines if the TreeField should have an outlined style.
+ * @param props.title - The title text for the TreeField.
+ * @param props.placeholder - The placeholder text for the TreeField.
+ * @param props.itemTree - The itemTree object for rendering the Tree.
+ * @param props.dirty - Determines if the TreeField has been modified.
+ * @param props.loading - Determines if the TreeField is currently loading.
+ * @param props.onChange - The callback function to be called when the value of the TreeField changes.
+ * @param props.name - The name attribute of the TreeField.
+ * @param props.withContextMenu - Determines if the TreeField should have a context menu.
+ *
+ * @returns The rendered TreeField component.
+ */
+export const TreeField = ({
+  invalid,
+  value,
+  disabled,
+  readonly,
+  incorrect,
+  description = "",
+  title = "",
+  placeholder = "",
+  itemTree,
+  dirty,
+  loading,
+  onChange,
+  name,
+}: ITreeFieldProps & ITreeFieldPrivate) => (
+  <Tree
+    invalid={invalid}
+    incorrect={incorrect}
+    value={value}
+    readonly={readonly}
+    disabled={disabled}
+    description={description}
+    title={title}
+    placeholder={placeholder}
+    itemTree={itemTree}
+    dirty={dirty}
+    loading={loading}
+    onChange={onChange}
+    name={name}
+  />
+);
+
+TreeField.displayName = 'TreeField';
+
+export default makeField(TreeField, {
+  withApplyQueue: true,
+  skipDirtyPressListener: true,
+  skipFocusReadonly: true,
+  skipDebounce: true,
+});

packages/rn-declarative/src/components/One/config/initialValue.ts

@@ -0,0 +1,14 @@
+import { ITreeFieldProps, ITreeFieldPrivate } from "../../fields/TreeField";
+
+type ITreeBase = ITreeFieldProps & ITreeFieldPrivate;
+
+/**
+ * Represents a slot in a tree structure.
+ * Extends the interface ITreeBase.
+ *
+ * @interface
+ * @extends ITreeBase
+ */
+export interface ITreeSlot extends ITreeBase { }
+
+export default ITreeSlot;

packages/rn-declarative/src/components/One/config/isBaseline.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useContext } from 'react';
+
+import { SlotContext } from '../../components/SlotFactory';
+
+import ITreeSlot from './ITreeSlot';
+
+/**
+ * Represents a slot for a tree component.
+ *
+ * @param props - The props for the TreeSlot component.
+ * @returns - The rendered Tree component.
+ */
+export const TreeSlot = (props: ITreeSlot) => {
+    const { Tree } = useContext(SlotContext);
+    return <Tree {...props} />;
+};
+
+export default TreeSlot;

packages/rn-declarative/src/components/One/fields/TreeField.tsx

@@ -0,0 +1,3 @@
+export * from './ITreeSlot';
+export * from './TreeSlot';
+export { default } from './TreeSlot';

packages/rn-declarative/src/components/One/slots/TreeSlot/ITreeSlot.ts

@@ -14,3 +14,4 @@ export * from './SliderSlot';
 export * from './TimeSlot';
 export * from './ChooseSlot';
 export * from './TypographySlot';
+export * from './TreeSlot';

packages/rn-declarative/src/components/One/slots/TreeSlot/TreeSlot.tsx

@@ -2,6 +2,7 @@ export type { ISize } from './model/ISize';
 
 import { TypedField as TypedFieldInternal } from './model/TypedField';
 import { IValidation as IValidationInternal } from './model/IValidation';
+import { ITreeNode as ITreeNodeInternal } from './model/ITreeNode';
 import { IInvalidField as IInvalidFieldInternal } from './model/IInvalidField';
 import { StyleProperties as StylePropertiesInternal } from './model/StyleProperties';
 import { CompiledStyles as CompiledStylesInternal } from './model/CompiledStyles';
@@ -49,6 +50,7 @@ export type IFieldEntity<Data = IAnything, Payload = IAnything> = IEntityInterna
 export type IFieldManaged<Data = IAnything, Value = IAnything> = IManagedInternal<Data, Value>;
 export type IInvalidField<Data = IAnything, Payload = IAnything> = IInvalidFieldInternal<Data, Payload>;
 export type IValidation = IValidationInternal;
+export type ITreeNode = ITreeNodeInternal;
 export type StyleProperties = StylePropertiesInternal;
 export type CompiledStyles = CompiledStylesInternal;
 
@@ -112,6 +114,8 @@ import { ISliderSlot as ISliderSlotInternal } from './components';
 import { ITimeSlot as ITimeSlotInternal } from './components';
 import { IChooseSlot as IChooseSlotInternal } from './components';
 import { ITypographySlot as ITypographySlotInternal } from './components';
+import { ITreeSlot as ITreeSlotInternal } from './components';
+
 
 export type ICheckBoxSlot = ICheckBoxSlotInternal;
 export type IComboSlot = IComboSlotInternal;
@@ -130,6 +134,7 @@ export type ISliderSlot = ISliderSlotInternal;
 export type ITimeSlot = ITimeSlotInternal;
 export type IChooseSlot = IChooseSlotInternal;
 export type ITypographySlot = ITypographySlotInternal;
+export type ITreeSlot = ITreeSlotInternal;
 
 export { randomString } from './utils/randomString';
 export { compareFulltext } from './utils/compareFulltext';

packages/rn-declarative/src/components/One/slots/TreeSlot/index.ts

@@ -26,6 +26,7 @@ export enum FieldType {
     Time = 'time-field',
     Choose = 'choose-field',
     Typography = 'typography-field',
+    Tree = 'Tree-field',
 };
 
 Object.entries(FieldType).forEach(([key, value]) => {

packages/rn-declarative/src/components/One/slots/index.ts

@@ -6,6 +6,8 @@ import type { IDebug }  from './ComponentFieldInstance';
 import FieldType from './FieldType';
 import IAnything from './IAnything';
 import IValidation from './IValidation';
+import ITreeNode from './ITreeNode';
+
 import StyleProperties from './StyleProperties';
 
 /**
@@ -176,6 +178,11 @@ export interface IField<Data = IAnything, Payload = IAnything> {
      */
     itemList?: string[] | ((data: Data, payload: Payload) => string[]) | ((data: Data, payload: Payload) => Promise<string[]>),
 
+    /**
+     * Вариант выбора для TreeField
+     */
+    itemTree?: ITreeNode[] | ((data: Data, payload: Payload) => ITreeNode[]) | ((data: Data, payload: Payload) => Promise<ITreeNode[]>);
+
     /**
      * Отключает возможность сброса выбора значения для Items и Combo
      */

packages/rn-declarative/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Represents a Node in a tree structure.
+ */
+export interface ITreeNode {
+    label: string;
+    value: string;
+    /**
+     * Represents an array of child nodes excluding the "child" property (recursion).
+     *
+     * @typedef ChildArray
+     */
+    child?: Omit<ITreeNode, "child">[];
+}
+
+export default ITreeNode;

packages/rn-declarative/src/model/FieldType.ts

@@ -35,6 +35,7 @@ import { ISliderFieldProps } from '../components/One/fields/SliderField';
 import { ITimeFieldProps } from '../components/One/fields/TimeField';
 import { IChooseFieldProps } from '../components/One/fields/ChooseField';
 import { ITypographyFieldProps } from '../components/One/fields/TypographyField';
+import { ITreeFieldProps } from '../components/One/fields/TreeField';
 
 /**
  * Исключения из правила
@@ -111,7 +112,7 @@ type Slider<Data = IAnything, Payload = IAnything> = TypedFieldFactoryShallow<Fi
 type Time<Data = IAnything, Payload = IAnything> = TypedFieldFactoryShallow<FieldType.Time, ITimeFieldProps<Data, Payload>, Data, Payload>;
 type Choose<Data = IAnything, Payload = IAnything> = TypedFieldFactoryShallow<FieldType.Choose, IChooseFieldProps<Data, Payload>, Data, Payload>;
 type Typography<Data = IAnything, Payload = IAnything> = TypedFieldFactoryShallow<FieldType.Typography, ITypographyFieldProps<Data, Payload>, Data, Payload>;
-
+type Tree<Data = IAnything, Payload = IAnything> = TypedFieldFactoryShallow<FieldType.Tree, ITreeFieldProps<Data, Payload>, Data, Payload>;
 
 /**
  * Логическое ветвление компонентов
@@ -130,6 +131,7 @@ export type TypedFieldRegistry<Data = IAnything, Payload = IAnything, Target = a
   : Target extends Time<Data, Payload> ? Time<Data, Payload>
   : Target extends Choose<Data, Payload> ? Choose<Data, Payload>
   : Target extends Typography<Data, Payload> ? Typography<Data, Payload>
+  : Target extends Tree<Data, Payload> ? Tree<Data, Payload>
   : Target extends Component<Data, Payload> ? Component<Data, Payload>
   : Target extends Items<Data, Payload> ? Items<Data, Payload>
   : Target extends Radio<Data, Payload> ? Radio<Data, Payload>