tree-field

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

packages/rn-declarative-eva/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/package.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/src/components/One/components/SlotFactory/ISlotFactoryContext.ts

@@ -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/src/components/One/components/SlotFactory/SlotContext.ts

@@ -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/src/components/One/components/SlotFactory/components/Tree.tsx

@@ -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/config/createField.tsx

@@ -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/config/initialValue.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/config/isBaseline.ts

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

packages/rn-declarative/src/components/One/fields/TreeField.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/slots/TreeSlot/ITreeSlot.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;