From 6a6ecadf9b112d450bea0f62b441fc865d3677ec Mon Sep 17 00:00:00 2001 From: Petr Tripolsky Date: Thu, 1 Aug 2024 16:59:26 +0500 Subject: [PATCH] slots --- demo/package-lock.json | 8 +- demo/package.json | 2 +- packages/rn-declarative/package-lock.json | 4 +- packages/rn-declarative/package.json | 2 +- .../SlotFactory/ISlotFactoryContext.ts | 13 ++ .../One/components/SlotFactory/SlotContext.ts | 13 ++ .../SlotFactory/components/Complete.tsx | 14 ++ .../SlotFactory/components/Date.tsx | 14 ++ .../SlotFactory/components/Progress.tsx | 14 ++ .../SlotFactory/components/Rating.tsx | 14 ++ .../SlotFactory/components/Slider.tsx | 14 ++ .../SlotFactory/components/Time.tsx | 14 ++ .../src/components/One/config/createField.tsx | 13 ++ .../src/components/One/config/initialValue.ts | 6 + .../src/components/One/config/isBaseline.ts | 6 + .../components/One/fields/CompleteField.tsx | 203 ++++++++++++++++++ .../src/components/One/fields/DateField.tsx | 141 ++++++++++++ .../components/One/fields/ProgressField.tsx | 75 +++++++ .../src/components/One/fields/RatingField.tsx | 81 +++++++ .../src/components/One/fields/SliderField.tsx | 148 +++++++++++++ .../src/components/One/fields/TimeField.tsx | 146 +++++++++++++ .../One/slots/CompleteSlot/CompleteSlot.tsx | 19 ++ .../One/slots/CompleteSlot/ICompleteSlot.ts | 13 ++ .../One/slots/CompleteSlot/index.ts | 3 + .../One/slots/DateSlot/DateSlot.tsx | 19 ++ .../One/slots/DateSlot/IDateSlot.ts | 13 ++ .../components/One/slots/DateSlot/index.ts | 3 + .../One/slots/ProgressSlot/IProgressSlot.ts | 10 + .../One/slots/ProgressSlot/ProgressSlot.tsx | 19 ++ .../One/slots/ProgressSlot/index.ts | 3 + .../One/slots/RatingSlot/IRatingSlot.ts | 12 ++ .../One/slots/RatingSlot/RatingSlot.tsx | 19 ++ .../components/One/slots/RatingSlot/index.ts | 3 + .../One/slots/SliderSlot/ISliderSlot.ts | 12 ++ .../One/slots/SliderSlot/SliderSlot.tsx | 19 ++ .../components/One/slots/SliderSlot/index.ts | 3 + .../One/slots/TimeSlot/ITimeSlot.ts | 12 ++ .../One/slots/TimeSlot/TimeSlot.tsx | 18 ++ .../components/One/slots/TimeSlot/index.ts | 3 + .../src/components/One/slots/index.ts | 6 + packages/rn-declarative/src/index.ts | 14 ++ .../rn-declarative/src/model/FieldType.ts | 8 + packages/rn-declarative/src/model/IField.ts | 34 +++ .../rn-declarative/src/model/TypedField.ts | 22 ++ 44 files changed, 1224 insertions(+), 8 deletions(-) create mode 100644 packages/rn-declarative/src/components/One/components/SlotFactory/components/Complete.tsx create mode 100644 packages/rn-declarative/src/components/One/components/SlotFactory/components/Date.tsx create mode 100644 packages/rn-declarative/src/components/One/components/SlotFactory/components/Progress.tsx create mode 100644 packages/rn-declarative/src/components/One/components/SlotFactory/components/Rating.tsx create mode 100644 packages/rn-declarative/src/components/One/components/SlotFactory/components/Slider.tsx create mode 100644 packages/rn-declarative/src/components/One/components/SlotFactory/components/Time.tsx create mode 100644 packages/rn-declarative/src/components/One/fields/CompleteField.tsx create mode 100644 packages/rn-declarative/src/components/One/fields/DateField.tsx create mode 100644 packages/rn-declarative/src/components/One/fields/ProgressField.tsx create mode 100644 packages/rn-declarative/src/components/One/fields/RatingField.tsx create mode 100644 packages/rn-declarative/src/components/One/fields/SliderField.tsx create mode 100644 packages/rn-declarative/src/components/One/fields/TimeField.tsx create mode 100644 packages/rn-declarative/src/components/One/slots/CompleteSlot/CompleteSlot.tsx create mode 100644 packages/rn-declarative/src/components/One/slots/CompleteSlot/ICompleteSlot.ts create mode 100644 packages/rn-declarative/src/components/One/slots/CompleteSlot/index.ts create mode 100644 packages/rn-declarative/src/components/One/slots/DateSlot/DateSlot.tsx create mode 100644 packages/rn-declarative/src/components/One/slots/DateSlot/IDateSlot.ts create mode 100644 packages/rn-declarative/src/components/One/slots/DateSlot/index.ts create mode 100644 packages/rn-declarative/src/components/One/slots/ProgressSlot/IProgressSlot.ts create mode 100644 packages/rn-declarative/src/components/One/slots/ProgressSlot/ProgressSlot.tsx create mode 100644 packages/rn-declarative/src/components/One/slots/ProgressSlot/index.ts create mode 100644 packages/rn-declarative/src/components/One/slots/RatingSlot/IRatingSlot.ts create mode 100644 packages/rn-declarative/src/components/One/slots/RatingSlot/RatingSlot.tsx create mode 100644 packages/rn-declarative/src/components/One/slots/RatingSlot/index.ts create mode 100644 packages/rn-declarative/src/components/One/slots/SliderSlot/ISliderSlot.ts create mode 100644 packages/rn-declarative/src/components/One/slots/SliderSlot/SliderSlot.tsx create mode 100644 packages/rn-declarative/src/components/One/slots/SliderSlot/index.ts create mode 100644 packages/rn-declarative/src/components/One/slots/TimeSlot/ITimeSlot.ts create mode 100644 packages/rn-declarative/src/components/One/slots/TimeSlot/TimeSlot.tsx create mode 100644 packages/rn-declarative/src/components/One/slots/TimeSlot/index.ts diff --git a/demo/package-lock.json b/demo/package-lock.json index bd68388..7a35849 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -18,7 +18,7 @@ "react-native": "0.74.1", "react-native-svg": "15.2.0", "react-native-web": "~0.19.6", - "rn-declarative": "^0.0.52", + "rn-declarative": "^0.0.53", "rn-declarative-eva": "^0.0.41" }, "devDependencies": { @@ -10975,9 +10975,9 @@ } }, "node_modules/rn-declarative": { - "version": "0.0.52", - "resolved": "https://registry.npmjs.org/rn-declarative/-/rn-declarative-0.0.52.tgz", - "integrity": "sha512-VpqSXD7bf2rtOrzWDus2J+4C3nJs7Tm+rlOlysFofKUvbYjbsOmfANNkNniV78qNipuA3uk6RBIKZVFykeKozA==", + "version": "0.0.53", + "resolved": "https://registry.npmjs.org/rn-declarative/-/rn-declarative-0.0.53.tgz", + "integrity": "sha512-/x0yCFOhzdsPRMrSPFCuQmqoHL5OwOS5FBvrTJ0QYaUbj14Rz0iHaGPvnlRFfWVc/J2YoKm7/IpGAGIP/2BIsA==", "hasInstallScript": true, "dependencies": { "rimraf": "3.0.2" diff --git a/demo/package.json b/demo/package.json index c77c527..7dea363 100644 --- a/demo/package.json +++ b/demo/package.json @@ -10,7 +10,7 @@ "react-native": "0.74.1", "react-native-svg": "15.2.0", "react-native-web": "~0.19.6", - "rn-declarative": "^0.0.52", + "rn-declarative": "^0.0.53", "rn-declarative-eva": "^0.0.41" }, "devDependencies": { diff --git a/packages/rn-declarative/package-lock.json b/packages/rn-declarative/package-lock.json index 37ef05b..fa0c045 100644 --- a/packages/rn-declarative/package-lock.json +++ b/packages/rn-declarative/package-lock.json @@ -1,12 +1,12 @@ { "name": "rn-declarative", - "version": "0.0.52", + "version": "0.0.53", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "rn-declarative", - "version": "0.0.52", + "version": "0.0.53", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/packages/rn-declarative/package.json b/packages/rn-declarative/package.json index 87a8dde..d0b7b25 100644 --- a/packages/rn-declarative/package.json +++ b/packages/rn-declarative/package.json @@ -1,6 +1,6 @@ { "name": "rn-declarative", - "version": "0.0.52", + "version": "0.0.53", "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 index 308da69..2329b08 100644 --- a/packages/rn-declarative/src/components/One/components/SlotFactory/ISlotFactoryContext.ts +++ b/packages/rn-declarative/src/components/One/components/SlotFactory/ISlotFactoryContext.ts @@ -9,6 +9,13 @@ import { ISwitchSlot } from '../../slots/SwitchSlot'; import { IYesNoSlot } from '../../slots/YesNoSlot'; import { IButtonSlot } from '../../slots/ButtonSlot'; +import { ICompleteSlot } from '../../slots/CompleteSlot'; +import { IDateSlot } from '../../slots/DateSlot'; +import { IProgressSlot } from '../../slots/ProgressSlot'; +import { IRatingSlot } from '../../slots/RatingSlot'; +import { ISliderSlot } from '../../slots/SliderSlot'; +import { ITimeSlot } from '../../slots/TimeSlot'; + /** * A context object that provides access to various component types used by the slot factory. * @typedef ISlotFactoryContext @@ -30,6 +37,12 @@ export interface ISlotFactoryContext { Radio: ComponentType; Text: ComponentType; Switch: ComponentType; + Complete: ComponentType; + Date: ComponentType; + Progress: ComponentType; + Rating: ComponentType; + Slider: ComponentType; + Time: ComponentType; } 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 index a0fd243..df33d2c 100644 --- a/packages/rn-declarative/src/components/One/components/SlotFactory/SlotContext.ts +++ b/packages/rn-declarative/src/components/One/components/SlotFactory/SlotContext.ts @@ -9,6 +9,13 @@ import Text from './components/Text'; import Switch from './components/Switch'; import YesNo from './components/YesNo'; +import Complete from './components/Complete'; +import Date from './components/Date'; +import Progress from './components/Progress'; +import Rating from './components/Rating'; +import Slider from './components/Slider'; +import Time from './components/Time'; + import ISlotFactoryContext from './ISlotFactoryContext'; /** @@ -31,6 +38,12 @@ export const defaultSlots: ISlotFactoryContext = { Text, Switch, YesNo, + Complete, + Date, + Progress, + Rating, + Slider, + Time, }; export const SlotContext = createContext(defaultSlots); diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/components/Complete.tsx b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Complete.tsx new file mode 100644 index 0000000..177c7d2 --- /dev/null +++ b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Complete.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; + +import { Text } from 'react-native'; + +import { ICompleteSlot } from "../../../slots/CompleteSlot"; + +export const CompleteField = ({}: ICompleteSlot) => ( + + FieldType.Complete is not provided (see OneSlotFactory) + +); + + +export default CompleteField; diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/components/Date.tsx b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Date.tsx new file mode 100644 index 0000000..ad66cbe --- /dev/null +++ b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Date.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; + +import { Text } from 'react-native'; + +import { IDateSlot } from "../../../slots/DateSlot"; + +export const DateField = ({}: IDateSlot) => ( + + FieldType.Date is not provided (see OneSlotFactory) + +); + + +export default DateField; diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/components/Progress.tsx b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Progress.tsx new file mode 100644 index 0000000..6da2ffb --- /dev/null +++ b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Progress.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; + +import { Text } from 'react-native'; + +import { IProgressSlot } from "../../../slots/ProgressSlot"; + +export const ProgressField = ({}: IProgressSlot) => ( + + FieldType.Progress is not provided (see OneSlotFactory) + +); + + +export default ProgressField; diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/components/Rating.tsx b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Rating.tsx new file mode 100644 index 0000000..2d99a32 --- /dev/null +++ b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Rating.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; + +import { Text } from 'react-native'; + +import { IRatingSlot } from "../../../slots/RatingSlot"; + +export const RatingField = ({}: IRatingSlot) => ( + + FieldType.Rating is not provided (see OneSlotFactory) + +); + + +export default RatingField; diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/components/Slider.tsx b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Slider.tsx new file mode 100644 index 0000000..81662f2 --- /dev/null +++ b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Slider.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; + +import { Text } from 'react-native'; + +import { ISliderSlot } from "../../../slots/SliderSlot"; + +export const SliderField = ({}: ISliderSlot) => ( + + FieldType.Slider is not provided (see OneSlotFactory) + +); + + +export default SliderField; diff --git a/packages/rn-declarative/src/components/One/components/SlotFactory/components/Time.tsx b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Time.tsx new file mode 100644 index 0000000..b302e99 --- /dev/null +++ b/packages/rn-declarative/src/components/One/components/SlotFactory/components/Time.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; + +import { Text } from 'react-native'; + +import { ITimeSlot } from "../../../slots/TimeSlot"; + +export const TimeField = ({}: ITimeSlot) => ( + + FieldType.Time is not provided (see OneSlotFactory) + +); + + +export default TimeField; diff --git a/packages/rn-declarative/src/components/One/config/createField.tsx b/packages/rn-declarative/src/components/One/config/createField.tsx index f077236..87e20d3 100644 --- a/packages/rn-declarative/src/components/One/config/createField.tsx +++ b/packages/rn-declarative/src/components/One/config/createField.tsx @@ -15,6 +15,13 @@ import InitField from "../fields/InitField"; import YesNoField from "../fields/YesNoField"; import ButtonField from "../fields/ButtonField"; +import CompleteField from "../fields/CompleteField"; +import DateField from "../fields/DateField"; +import ProgressField from "../fields/ProgressField"; +import RatingField from "../fields/RatingField"; +import SliderField from "../fields/SliderField"; +import TimeField from "../fields/TimeField"; + const fieldMap: { [key in FieldType]?: React.ComponentType } = Object.create(null); /** @@ -43,6 +50,12 @@ Object.assign(fieldMap, { [FieldType.YesNo]: YesNoField, [FieldType.Init]: InitField, [FieldType.Button]: ButtonField, + [FieldType.Complete]: CompleteField, + [FieldType.Date]: DateField, + [FieldType.Progress]: ProgressField, + [FieldType.Rating]: RatingField, + [FieldType.Slider]: SliderField, + [FieldType.Time]: TimeField, }); /** diff --git a/packages/rn-declarative/src/components/One/config/initialValue.ts b/packages/rn-declarative/src/components/One/config/initialValue.ts index 993de64..c5323a7 100644 --- a/packages/rn-declarative/src/components/One/config/initialValue.ts +++ b/packages/rn-declarative/src/components/One/config/initialValue.ts @@ -24,6 +24,12 @@ const initialValueMap = { [FieldType.Component]: null, [FieldType.Init]: null, [FieldType.YesNo]: null, + [FieldType.Complete]: '', + [FieldType.Date]: null, + [FieldType.Progress]: '', + [FieldType.Rating]: null, + [FieldType.Slider]: 0, + [FieldType.Time]: null, }; 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 index c25351b..c2a25d0 100644 --- a/packages/rn-declarative/src/components/One/config/isBaseline.ts +++ b/packages/rn-declarative/src/components/One/config/isBaseline.ts @@ -16,6 +16,12 @@ export const baselineFields = new Set([ FieldType.Checkbox, FieldType.Component, FieldType.Button, + FieldType.Complete, + FieldType.Date, + FieldType.Progress, + FieldType.Rating, + FieldType.Slider, + FieldType.Time, ]); /** diff --git a/packages/rn-declarative/src/components/One/fields/CompleteField.tsx b/packages/rn-declarative/src/components/One/fields/CompleteField.tsx new file mode 100644 index 0000000..8a9f66f --- /dev/null +++ b/packages/rn-declarative/src/components/One/fields/CompleteField.tsx @@ -0,0 +1,203 @@ +import * as React from "react"; + +import Complete from "../../../components/One/slots/CompleteSlot"; + +import makeField from "../components/makeField"; + +import IManaged, { PickProp } from "../../../model/IManaged"; +import IAnything from "../../../model/IAnything"; +import IField from "../../../model/IField"; + +/** + * Interface for specifying the props of a complete field. + * @template Data, Payload - The types of data and payload. + */ +export interface ICompleteFieldProps { + /** + * 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, 'validation'>; + /** + * Retrieves the "description" property from a given object and its nested properties if available. + * + * @template T - The type of the object to pick the "description" property from. + * @template K - The keys of the properties in T. + * @param obj - The object to pick the "description" property from. + * @returns - The picked object with "description" property. + */ + description?: PickProp, "description">; + /** + * Represents the value of the `keepRaw` property, which indicates whether to keep the raw data in a field. + * + * @template Data - The data type of the field. + * @template Payload - The payload type of the field. + * + * @typedef KeepRaw + * @property keepRaw - Indicates whether to keep the raw data. + */ + keepRaw?: PickProp, "keepRaw">; + /** + * Type definition for the "title" property picked from the "IField" object type, + * where "IField" is a generic object with properties "Data" and "Payload". + * The resulting type is determined by the "PickProp" utility, which selects the specific property + * from the provided object type. + * + * @template IField - The generic object type with properties "Data" and "Payload". + * @template Data - The data type of the "IField" object. + * @template Payload - The payload type of the "IField" object. + * @template Key - The specific property key to pick from the "IField" object. + * @typedef PickProp + * @property object - The object from which the property is picked. + * @property prop - The specific property key to pick. + * @returns The type of the picked property. + */ + title?: PickProp, "title">; + /** + * Represents the "tip" property of an object. + * + * @template T - The type of the object. + * @template K - The key of the property to pick. + * @typedef PickProp + */ + tip?: PickProp, "tip">; + /** + * Represents a variable that holds the value of the "tipSelect" property. + * + * @typedef TipSelect + * @property IField - Represents a generic field object. + * @property Data - Represents the generic data type. + * @property Payload - Represents the generic payload type. + * @property tipSelect - The value of the "tipSelect" property. + */ + tipSelect?: PickProp, "tipSelect">; + /** + * Retrieves the `placeholder` property of a given field. + * + * @template Data - The type of data associated with the field. + * @template Payload - The type of payload associated with the field. + * @template Field - The type of field. + * + * @typedef PickProp - A utility type for picking properties from a type. + * @param field - The field to pick the `placeholder` property from. + * + * @returns - The `placeholder` property of the given field, if present. Otherwise, `undefined`. + */ + placeholder?: PickProp, "placeholder">; + /** + * Retrieves the "readonly" property from the provided field object. + * + * @param field - The field object. + * @returns - The value of the "readonly" property. + */ + readonly?: PickProp, "readonly">; + /** + * Represents the "disabled" property of a field. + * + * @template Data - The type of data associated with the field. + * @template Payload - The type of payload for the field's actions. + * + * @typedef DisabledProp + * + * @property disabled - Specifies whether the field is disabled. + */ + disabled?: PickProp, "disabled">; +} + +/** + * Represents a private interface for a complete field. + * + * @template Data - The type of the field's data. + */ +export interface ICompleteFieldPrivate { + onChange: PickProp, "onChange">; + invalid: PickProp, "invalid">; + incorrect: PickProp, "incorrect">; + value: PickProp, "value">; + loading: PickProp, "loading">; + disabled: PickProp, "disabled">; + readonly: PickProp, "readonly">; + fieldReadonly: PickProp, "fieldReadonly">; + dirty: PickProp, "dirty">; + name: PickProp, "name">; +} + +/** + * A wrapper component for the Complete component. + * + * @param props - The props for the CompleteField component. + * @param props.invalid - Determines whether the field is in an invalid state. + * @param props.incorrect - Determines whether the field has incorrect data. + * @param props.value - The current value of the field. + * @param props.disabled - Determines whether the field is disabled. + * @param props.readonly - Determines whether the field is read-only. + * @param props.inputType - The type of the input field. + * @param props.description - The description of the field. + * @param props.outlined - Determines whether the field is outlined. + * @param props.keepRaw - Determines whether the raw value should be kept. + * @param props.title - The title of the field. + * @param props.labelShrink - The label shrink value. + * @param props.tip - The tip for the field. + * @param props.tipSelect - The tip for the select field. + * @param props.placeholder - The placeholder text for the input field. + * @param props.inputAutocomplete - The autocomplete attribute for the input field. + * @param props.dirty - The dirty value of the field. + * @param props.loading - Determines whether the field is in a loading state. + * @param props.onChange - The callback function for the field value change event. + * @param props.autoFocus - Determines whether the field should be auto-focused. + * @param props.inputRef - The reference to the input field. + * @param props.name - The name of the field. + * @param props.inputFormatter - The input formatter for the field. + * @param props.inputFormatterAllowed - The allowed values for the input formatter. + * @param props.inputFormatterReplace - The values to replace in the input formatter. + * @param props.inputFormatterSymbol - The symbol for the input formatter. + * @param props.inputFormatterTemplate - The template for the input formatter. + * @param props.withContextMenu - Determines whether the field should have a context menu. + * @returns The rendered CompleteField component. + */ +export const CompleteField = ({ + invalid, + incorrect, + value, + disabled, + readonly, + description = "", + keepRaw = false, + title = "", + tip, + tipSelect, + placeholder = "", + dirty, + loading, + onChange, + name, + fieldReadonly, +}: ICompleteFieldProps & ICompleteFieldPrivate) => ( + +); + +CompleteField.displayName = "CompleteField"; + +export default makeField(CompleteField); diff --git a/packages/rn-declarative/src/components/One/fields/DateField.tsx b/packages/rn-declarative/src/components/One/fields/DateField.tsx new file mode 100644 index 0000000..44bf757 --- /dev/null +++ b/packages/rn-declarative/src/components/One/fields/DateField.tsx @@ -0,0 +1,141 @@ +import * as React from "react"; + +import Date from '../../../components/One/slots/DateSlot'; + +import makeField from "../components/makeField"; + +import IField from "../../../model/IField"; +import IAnything from "../../../model/IAnything"; +import IManaged, { PickProp } from "../../../model/IManaged"; + +/** + * Represents the properties of a date field component. + * + * @template Data - The type of data associated with the field. + * @template Payload - The type of payload associated with the field. + */ +export interface IDateFieldProps { + /** + * 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, 'validation'>; + /** + * Retrieves the value of the "title" property from the given object. + * + * @template T - The type of the object. + * @template K - The keys of the object. + * @param obj - The object from which to retrieve the property value. + * @param key - The key of the property to retrieve. + * @returns - The value of the "title" property. + */ + title?: PickProp, "title">; + /** + * Retrieves the "description" property from a given object of type IField. + * @param field - The input field object. + * @returns - The value of the "description" property. + */ + description?: PickProp, "description">; + /** + * Represents the `placeholder` property of a field. + * + * @template Data - The type of the field's data. + * @template Payload - The type of the field's payload. + * @template Prop - The specific property of the field. + * + */ + placeholder?: PickProp, "placeholder">; + /** + * Retrieves the value of the readonly property from a given field object. + * + * @template Data - The data type of the field. + * @template Payload - The payload that may be associated with the field. + * @param field - The field object from which to retrieve the readonly property. + * @returns - The value of the readonly property, or undefined if the property is not present. + */ + readonly?: PickProp, "readonly">; + /** + * Represents the `disabled` property of a field. + * + * @typedef DisabledField + */ + disabled?: PickProp, "disabled">; +} + +/** + * Represents a private interface for a date field. + * @template Data - The type of data managed by the field. + */ +export interface IDateFieldPrivate { + onChange: PickProp, "onChange">; + invalid: PickProp, "invalid">; + incorrect: PickProp, "incorrect">; + value: PickProp, "value">; + disabled: PickProp, "disabled">; + dirty: PickProp, "dirty">; + name: PickProp, "name">; +} + +/** + * Represents a DateField component. + * + * @typedef DateField + * @param invalid - Specifies whether the date field is invalid. + * @param incorrect - Specifies whether the date field has an incorrect value. + * @param value - The value of the date field. + * @param disabled - Specifies whether the date field is disabled. + * @param readonly - Specifies whether the date field is readonly. + * @param description - The description of the date field. + * @param outlined - Specifies whether the date field is outlined. + * @param title - The title of the date field. + * @param placeholder - The placeholder of the date field. + * @param labelShrink - Specifies whether the label should shrink when the date field value is not empty. + * @param dirty - Specifies whether the date field has been modified. + * @param autoFocus - Specifies whether the date field should automatically receive focus. + * @param inputRef - A ref for the date field input element. + * @param onChange - The event handler for when the value of the date field changes. + * @param withContextMenu - Specifies whether the date field should have a context menu. + * @param name - The name of the date field. + * @return - The Date component with the specified props. + */ +export const DateField = ({ + invalid, + incorrect, + value, + disabled, + readonly, + description = "", + title = "", + placeholder = title, + dirty, + onChange, + name, +}: IDateFieldPrivate & IDateFieldProps) => ( + +); + +DateField.displayName = 'DateField'; + +export default makeField(DateField, { + withApplyQueue: true, + skipDebounce: true, + skipDirtyPressListener: true, + skipFocusBlurCall: true, +}); diff --git a/packages/rn-declarative/src/components/One/fields/ProgressField.tsx b/packages/rn-declarative/src/components/One/fields/ProgressField.tsx new file mode 100644 index 0000000..372ada0 --- /dev/null +++ b/packages/rn-declarative/src/components/One/fields/ProgressField.tsx @@ -0,0 +1,75 @@ +import * as React from "react"; + +import Progress from '../../../components/One/slots/ProgressSlot'; + +import makeField from "../components/makeField"; + +import IManaged, { PickProp } from "../../../model/IManaged"; +import IField from "../../../model/IField"; +import IAnything from "../../../model/IAnything"; + +/** + * Represents the props for the ProgressField component. + * @template Data - The type of data associated with the field. + * @template Payload - The type of payload associated with the field. + */ +export interface IProgressFieldProps { + /** + * Maximum percentage value for a field. + * + * @typedef maxPercent + */ + maxPercent?: PickProp, "maxPercent">; + /** + * Determines whether to show the percent label. + * + * @typedef IField + * @typedef Payload + * @typedef PickProp + * + * @param showPercentLabel - The field containing the showPercentLabel property. + * @returns - Whether to show the percent label. + */ + showPercentLabel?: PickProp, "showPercentLabel">; +} + +/** + * Represents a private progress field. + * @template Data - The type of data associated with the field. + */ +export interface IProgressFieldPrivate { + value: PickProp, "value">; +} + +/** + * Represents a progress field component. + * + * @typedef ProgressField + * @property maxPercent - The maximum percentage value for the progress field. + * @property showPercentLabel - Determines if the percentage label should be displayed. + * @property value - The current value of the progress field. + * + * @param props - The props object containing the properties required for the progress field. + * @param props.maxPercent - The maximum percentage value for the progress field. + * @param props.showPercentLabel - Determines if the percentage label should be displayed. + * @param props.value - The current value of the progress field. + * + * @returns The rendered progress field component. + */ +export const ProgressField = ({ + maxPercent = 1.0, + showPercentLabel, + value, +}: IProgressFieldProps & IProgressFieldPrivate) => ( + +); + +ProgressField.displayName = 'ProgressField'; + +export default makeField(ProgressField, { + skipFocusBlurCall: true, +}); diff --git a/packages/rn-declarative/src/components/One/fields/RatingField.tsx b/packages/rn-declarative/src/components/One/fields/RatingField.tsx new file mode 100644 index 0000000..f2d6d32 --- /dev/null +++ b/packages/rn-declarative/src/components/One/fields/RatingField.tsx @@ -0,0 +1,81 @@ +import * as React from "react"; + +import Rating from '../../../components/One/slots/RatingSlot'; + +import makeField from "../components/makeField"; + +import IManaged, { PickProp } from "../../../model/IManaged"; +import IAnything from "../../../model/IAnything"; +import IField from "../../../model/IField"; + +/** + * Represents the properties for a rating field component. + * + * @template Data - The type of data for the field. + * @template Payload - The type of payload for the field. + */ +export interface IRatingFieldProps { + /** + * Retrieves the 'readonly' property value of a given field. + * + * @param field - The field object to retrieve the property from. + * + * @return {PickProp, "readonly">} - The value of the 'readonly' property. + */ + readonly?: PickProp, "readonly">; + /** + * Represents the disabled property of an input field. + * + * @typedef disabled + */ + disabled?: PickProp, "disabled">; +} + +/** + * Interface representing a private rating field. + * + * @template Data - The type of data associated with the field. + */ +export interface IRatingFieldPrivate { + name?: string; + value: PickProp, "value">; + readonly: PickProp, "readonly">; + onChange: PickProp, "onChange">; +} + +/** + * Renders a Rating field component. + * + * @param props - The properties for the Rating field. + * @param props.value - The current value of the Rating field. + * @param props.disabled - Indicates if the Rating field is disabled. + * @param props.readonly - Indicates if the Rating field is read-only. + * @param props.name - The name of the Rating field. + * @param props.onChange - The function to be called when the value of the Rating field changes. + * + * @returns The rendered Rating field component. + */ +export const RatingField = ({ + value, + disabled, + readonly, + name, + onChange, +}: IRatingFieldProps & IRatingFieldPrivate) => ( + +); + +RatingField.displayName = 'RatingField'; + +export default makeField(RatingField, { + withApplyQueue: true, + skipDebounce: true, + skipDirtyPressListener: true, + skipFocusReadonly: true, +}); diff --git a/packages/rn-declarative/src/components/One/fields/SliderField.tsx b/packages/rn-declarative/src/components/One/fields/SliderField.tsx new file mode 100644 index 0000000..0b15de0 --- /dev/null +++ b/packages/rn-declarative/src/components/One/fields/SliderField.tsx @@ -0,0 +1,148 @@ +import * as React from 'react'; + +import Slider from '../../../components/One/slots/SliderSlot'; + +import makeField from '../components/makeField'; + +import IField from '../../../model/IField'; +import IAnything from '../../../model/IAnything'; +import IManaged, { PickProp } from '../../../model/IManaged'; + +/** + * Interface representing the properties of a Slider Field component. + * @template Data - The data type used in the Field component. + * @template Payload - The payload type used in the Field component. + */ +export interface ISliderFieldProps { + /** + * Represents the configuration for a step slider field. + * + * @typedef stepSlider + * @property [propertyName] - The name of the property for this step slider field. + * @property [label] - The label to display for this step slider field. + * @property [minValue] - The minimum value for the step slider. + * @property [maxValue] - The maximum value for the step slider. + * @property [step] - The step interval for the step slider. + * @property [unit] - The unit of measurement for the step slider. + */ + stepSlider?: PickProp, 'stepSlider'>; + /** + * The maximum value for a slider in a field of a data object payload. + * + * @typedef maxSlider + * @property [maxSlider] - The maximum value for the slider. If not provided, there is no maximum limit. + */ + maxSlider?: PickProp, 'maxSlider'>; + /** + * The minimum value for a slider in a field. + * + * @property [minSlider] - The minimum value for a slider. If undefined, there is no minimum value. + */ + minSlider?: PickProp, 'minSlider'>; + /** + * Specifies the format for the labels of a slider component. + * + * @typedef labelFormatSlider + * @property [labelFormatSlider.format] - The format string for the labels. + */ + labelFormatSlider?: PickProp, 'labelFormatSlider'>; + /** + * Represents the leading icon of a field. + * + * @typedef leadingIcon + */ + leadingIcon?: PickProp, 'leadingIcon'>; + /** + * Sets the trailing icon of the field. + * + * @param trailingIcon - The trailing icon to be set for the field. + */ + trailingIcon?: PickProp, 'trailingIcon'>; + /** + * This variable represents an optional function called leadingIconPress, which is a property of the IField interface. It is picked from the PickProp type, using the 'leadingIconPress + *' key. + * + * @typedef leadingIconPress + */ + leadingIconPress?: PickProp, 'leadingIconPress'>; + /** + * Represents the event handler for when the trailing icon of a field is clicked. + * @typedef trailingIconPress + */ + trailingIconPress?: PickProp, 'trailingIconPress'>; + /** + * Retrieves the `readonly` property value from the provided object. + * + * @param obj - The object from which to retrieve the `readonly` property. + * @returns - The value of the `readonly` property. + */ + readonly?: PickProp, "readonly">; + /** + * Represents the `disabled` property extracted from a field. + * + * @typedef DisabledValue + */ + disabled?: PickProp, "disabled">; +} + +/** + * Represents a private interface for a slider field component. + * + * @template Data - The type of data associated with the slider field. + * @interface ISliderFieldPrivate + */ +export interface ISliderFieldPrivate { + value: PickProp, 'value'>; + onChange: PickProp, 'onChange'>; +} + +/** + * Represents a slider field component. + * @typedef SliderField + * @param value - The current value of the slider. + * @param onChange - A callback function to handle slider value changes. + * @param leadingIconRipple - Determines if the leading icon should have a ripple effect when clicked. + * @param trailingIconRipple - Determines if the trailing icon should have a ripple effect when clicked. + * @param leadingIcon - The icon component to be displayed at the start of the slider. + * @param trailingIcon - The icon component to be displayed at the end of the slider. + * @param leadingIconPress - A callback function to handle click events on the leading icon. + * @param trailingIconPress - A callback function to handle click events on the trailing icon. + * @param stepSlider - The step value for the slider. + * @param maxSlider - The maximum value for the slider. + * @param minSlider - The minimum value for the slider. + * @param labelFormatSlider - The format string for the label text of the slider. + * @returns A Slider component with the specified properties. + */ +export const SliderField = ({ + value, + onChange, + leadingIcon, + trailingIcon, + leadingIconPress, + trailingIconPress, + stepSlider, + maxSlider, + minSlider, + labelFormatSlider, +}: ISliderFieldProps & ISliderFieldPrivate) => ( + +); + +SliderField.displayName = 'SliderField'; + +export default makeField(SliderField, { + skipDebounce: true, + withApplyQueue: true, + skipDirtyPressListener: true, +}); diff --git a/packages/rn-declarative/src/components/One/fields/TimeField.tsx b/packages/rn-declarative/src/components/One/fields/TimeField.tsx new file mode 100644 index 0000000..d4d1dfe --- /dev/null +++ b/packages/rn-declarative/src/components/One/fields/TimeField.tsx @@ -0,0 +1,146 @@ +import * as React from "react"; + +import Time from '../../../components/One/slots/TimeSlot'; + +import makeField from "../components/makeField"; + +import IField from "../../../model/IField"; +import IAnything from "../../../model/IAnything"; +import IManaged, { PickProp } from "../../../model/IManaged"; + +/** + * A set of properties for the `TimeField` component. + * + * @template Data - The type of data expected to be stored in the field. + * @template Payload - The type of payload expected to be returned on field change. + */ +export interface ITimeFieldProps { + /** + * 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, 'validation'>; + /** + * Retrieves the value of the "title" property from the given object. + * + * @template T - The type of the object. + * @template K - The key of the property to be picked. + * @param obj - The object from which to pick the property. + * @param key - The key of the property to pick. + * @returns - The value of the picked property. + */ + title?: PickProp, "title">; + /** + * Returns the "description" property value of the given object. + * The object must be of type IField. + * + * @param object - The object to pick the "description" property from. + * @returns - The value of the "description" property. + */ + description?: PickProp, "description">; + /** + * Retrieves the `placeholder` property from an object `IField`. + * + * @template Data - The type of data for the field. + * @template Payload - The type of payload. + * + * @param field - The field object from which to retrieve the `placeholder` property. + * + * @returns - The `placeholder` property of the field object. + */ + placeholder?: PickProp, "placeholder">; + /** + * Retrieves the value of the "readonly" property from a given object that has a specific structure. + * + * @param field - The input object with a specific structure. + * @returns The value of the "readonly" property from the input object. + */ + readonly?: PickProp, "readonly">; + /** + * Retrieves the "disabled" property from an object of type `IField`. + * + * @template Data - The type of data associated with the field. + * @template Payload - The type of payload associated with the field. + * @param disabled - The object from which to retrieve the "disabled" property. + * @returns - The value of the "disabled" property. + */ + disabled?: PickProp, "disabled">; +} + +/** + * Represents a private interface for the TimeField component. + * + * @template Data The type of data associated with the TimeField component. + */ +export interface ITimeFieldPrivate { + onChange: PickProp, "onChange">; + invalid: PickProp, "invalid">; + incorrect: PickProp, "incorrect">; + value: PickProp, "value">; + disabled: PickProp, "disabled">; + dirty: PickProp, "dirty">; + name: PickProp, "name">; +} + +/** + * Represents a TimeField component. + * @param TimeField - The TimeField component. + * @param invalid - Determines if the field is invalid. + * @param incorrect - Determines if the field has an incorrect value. + * @param value - The current value of the field. + * @param disabled - Determines if the field is disabled. + * @param readonly - Determines if the field is readonly. + * @param labelShrink - Determines if the label should shrink when the field has a value. + * @param description - The description of the field. + * @param outlined - Determines if the field should be outlined. + * @param title - The title attribute of the field. + * @param placeholder - The placeholder attribute of the field. + * @param dirty - Determines if the field's value has changed. + * @param autoFocus - Determines if the field should be focused automatically. + * @param inputRef - The ref of the input element. + * @param onChange - The event handler for the change event. + * @param name - The name attribute of the field. + * @param withContextMenu - Determines if the field should have a context menu. + * @returns - The rendered TimeField component. + */ +export const TimeField = ({ + invalid, + incorrect, + value, + disabled, + readonly, + description = "", + title = "", + placeholder = title, + dirty, + onChange, + name, +}: ITimeFieldPrivate & ITimeFieldProps) => ( +