choose-slot

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.54",
-    "rn-declarative-eva": "^0.0.42"
+    "rn-declarative": "^0.0.55",
+    "rn-declarative-eva": "^0.0.43"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

packages/rn-declarative-eva/README.md

@@ -1,6 +1,6 @@
 # ⚛️ rn-declarative
 
-> Responsive layout for the `react-native`
+> Responsive layout for `react-native`
 
 ![screencast](./assets/screencast.gif)
 

packages/rn-declarative-eva/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-declarative-eva",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "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.37"
+    "rn-declarative": "0.0.55"
   },
   "dependencies": {
     "rimraf": "3.0.2"

packages/rn-declarative/README.md

@@ -1,6 +1,6 @@
 # ⚛️ rn-declarative
 
-> Responsive layout for the `react-native`
+> Responsive layout for `react-native`
 
 ![screencast](./assets/screencast.gif)
 

packages/rn-declarative/package.json

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

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

@@ -15,6 +15,7 @@ import { IProgressSlot } from '../../slots/ProgressSlot';
 import { IRatingSlot } from '../../slots/RatingSlot';
 import { ISliderSlot } from '../../slots/SliderSlot';
 import { ITimeSlot } from '../../slots/TimeSlot';
+import { IChooseSlot } from '../../slots/ChooseSlot';
 
 /**
  * A context object that provides access to various component types used by the slot factory.
@@ -43,6 +44,7 @@ export interface ISlotFactoryContext {
     Rating: ComponentType<IRatingSlot>;
     Slider: ComponentType<ISliderSlot>;
     Time: ComponentType<ITimeSlot>;
+    Choose: ComponentType<IChooseSlot>;
 }
 
 export default ISlotFactoryContext;

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

@@ -15,6 +15,7 @@ import Progress from './components/Progress';
 import Rating from './components/Rating';
 import Slider from './components/Slider';
 import Time from './components/Time';
+import Choose from './components/Choose';
 
 import ISlotFactoryContext from './ISlotFactoryContext';
 
@@ -44,6 +45,7 @@ export const defaultSlots: ISlotFactoryContext = {
     Rating,
     Slider,
     Time,
+    Choose,
 };
 
 export const SlotContext = createContext<ISlotFactoryContext>(defaultSlots);

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

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

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

@@ -21,6 +21,7 @@ import ProgressField from "../fields/ProgressField";
 import RatingField from "../fields/RatingField";
 import SliderField from "../fields/SliderField";
 import TimeField from "../fields/TimeField";
+import ChooseField from "../fields/ChooseField";
 
 const fieldMap: { [key in FieldType]?: React.ComponentType<IEntity> } = Object.create(null);
 
@@ -56,6 +57,7 @@ Object.assign(fieldMap, {
   [FieldType.Rating]: RatingField,
   [FieldType.Slider]: SliderField,
   [FieldType.Time]: TimeField,
+  [FieldType.Choose]: ChooseField,
 });
 
 /**

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

@@ -30,6 +30,7 @@ const initialValueMap = {
   [FieldType.Rating]: null,
   [FieldType.Slider]: 0,
   [FieldType.Time]: null,
+  [FieldType.Choose]: null,
 };
 
 type InitialValue = typeof initialValueMap;

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

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

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

@@ -0,0 +1,153 @@
+import * as React from "react";
+
+import Choose from '../../../components/One/slots/ChooseSlot';
+
+import makeField from "../components/makeField";
+
+import IManaged, { PickProp } from "../../../model/IManaged";
+import IAnything from "../../../model/IAnything";
+import IField from "../../../model/IField";
+
+/**
+ * Props for the IChooseField component.
+ *
+ * @template Data - The data type of the field.
+ * @template Payload - The payload type of the field.
+ */
+export interface IChooseFieldProps<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'>;
+  /**
+   * Retrieves the "description" property from the given object.
+   *
+   * @template IField - Type representing the field object.
+   * @template Data - Type representing the data object.
+   * @template Payload - Type representing the payload object.
+   *
+   * @param obj - The object from which to pick the "description" property.
+   *
+   * @returns The value of the "description" property.
+   */
+  description?: PickProp<IField<Data, Payload>, "description">;
+  /**
+   * Type definition for the `title` property when using `PickProp` utility.
+   * @template T - The type of the object from which to pick the property.
+   * @template Prop - The name of the property to pick.
+   * @param obj - The object from which to pick the property.
+   * @param prop - The name of the property to pick.
+   * @returns - The picked property value.
+   */
+  title?: PickProp<IField<Data, Payload>, "title">;
+  /**
+   * Type definition for a generic placeholder value.
+   * @typedef Placeholder
+   */
+  placeholder?: PickProp<IField<Data, Payload>, "placeholder">;
+  /**
+   * A variable that represents the `readonly` property of a field.
+   *
+   * @typedef readonly? - The `readonly` property of a field.
+   */
+  readonly?: PickProp<IField<Data, Payload>, "readonly">;
+  /**
+   * Type definition for the "disabled" property of a field.
+   *
+   * This type is used to define the "disabled" property of a field from an object type "Data"
+   * and a type "Payload" using the PickProp utility type.
+   *
+   * @template Data - The type representing the object structure.
+   * @template Payload - The type representing the additional properties of the field.
+   * @typedef disabled
+   */
+  disabled?: PickProp<IField<Data, Payload>, "disabled">;
+  /**
+   * Type definition for the 'choose' property of IField.
+   *
+   * @template Data - The data type of the field.
+   * @template Payload - The data payload for the field.
+   */
+  choose?: PickProp<IField<Data, Payload>, 'choose'>;
+  /**
+   * Represents a possible translation for a field in a form.
+   *
+   * @typedef tr
+   * @property type - The type of translation.
+   * @property required - Indicates if the translation is required.
+   * @property options - The list of available translation options.
+   * @property defaultValue - The default translation value.
+   */
+  tr?: PickProp<IField<Data, Payload>, 'tr'>;
+}
+
+/**
+ * Represents an interface for choosing private fields.
+ *
+ * @template Data - The type of data for the private fields.
+ */
+export interface IChooseFieldPrivate<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">;
+}
+
+/**
+ * Represents the ChooseField component.
+ * @param options - The options for the ChooseField component.
+ * @returns The rendered ChooseField component.
+ */
+export const ChooseField = ({
+  invalid,
+  value,
+  disabled,
+  readonly,
+  incorrect,
+  description = "",
+  title = "",
+  placeholder = "",
+  choose,
+  tr,
+  dirty,
+  loading,
+  onChange,
+  name,
+}: IChooseFieldProps & IChooseFieldPrivate) => (
+  <Choose
+    invalid={invalid}
+    incorrect={incorrect}
+    value={value}
+    readonly={readonly}
+    disabled={disabled}
+    description={description}
+    title={title}
+    placeholder={placeholder}
+    choose={choose}
+    tr={tr}
+    dirty={dirty}
+    loading={loading}
+    onChange={onChange}
+    name={name}
+  />
+);
+
+ChooseField.displayName = 'ChooseField';
+
+export default makeField(ChooseField, {
+  withApplyQueue: true,
+  skipDirtyPressListener: true,
+  skipFocusReadonly: true,
+  skipFocusBlurCall: true,
+  skipDebounce: true,
+});

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useContext } from 'react';
+
+import { SlotContext } from '../../components/SlotFactory';
+
+import IChooseSlot from './IChooseSlot';
+
+/**
+ * Renders the component by passing the properties to the Choose component obtained from the SlotContext.
+ *
+ * @param props - The properties for the ChooseSlot component.
+ * @returns - The rendered Choose component.
+ */
+export const ChooseSlot = (props: IChooseSlot) => {
+    const { Choose } = useContext(SlotContext);
+    return <Choose {...props} />;
+};
+
+export default ChooseSlot;