gform-react 1.10.0 → 1.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/gform-react.development.js +34 -18
- package/dist/cjs/gform-react.development.js.map +1 -1
- package/dist/cjs/gform-react.production.js +1 -1
- package/dist/cjs/gform-react.production.js.map +1 -1
- package/dist/esm/GForm.production.js +1 -1
- package/dist/esm/GForm.production.js.map +1 -1
- package/dist/esm/GInput.production.js +1 -1
- package/dist/esm/GInput.production.js.map +1 -1
- package/dist/esm/GValidator.production.js.map +1 -1
- package/dist/esm/index.development.js +34 -18
- package/dist/esm/index.development.js.map +1 -1
- package/dist/esm/shared.production.js +1 -1
- package/dist/esm/shared.production.js.map +1 -1
- package/native/dist/cjs/gform-react-native.development.js +30 -14
- package/native/dist/cjs/gform-react-native.development.js.map +1 -1
- package/native/dist/cjs/gform-react-native.production.js +1 -1
- package/native/dist/cjs/gform-react-native.production.js.map +1 -1
- package/native/dist/esm/RNGForm.production.js +1 -1
- package/native/dist/esm/RNGForm.production.js.map +1 -1
- package/native/dist/esm/RNGInput.production.js +1 -1
- package/native/dist/esm/RNGInput.production.js.map +1 -1
- package/native/dist/esm/index.development.js +30 -14
- package/native/dist/esm/index.development.js.map +1 -1
- package/native/dist/esm/shared.production.js +1 -1
- package/native/dist/esm/shared.production.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gform-react-native.production.js","sources":["../../../src/helpers.ts","../../../src/useForm.ts","../../../src/context.ts","../../../src/RNGForm.tsx","../../../src/fields/RNGInput.tsx"],"sourcesContent":["import type { GInputInitialState, GInputProps, GInputState, GInputStateMutable } from './fields';\r\nimport type { GChangeEvent, GDOMElement, IForm } from './form';\r\nimport type { GFormState, InitialState, RawData, ToFormDataOptions, ToRawDataOptions, ToURLSearchParamsOptions } from './state';\r\n\r\nexport const isObject = (o: any): o is object => (o && typeof o === 'object' && !Array.isArray(o));\r\n\r\nconst defaultFieldProps: { [key: string]: { value: string | number | boolean } } = {\r\n text: { value: '' },\r\n checkbox: { value: false },\r\n number: { value: 0 }\r\n};\r\n\r\nconst typeValueDict: { [key: string]: keyof HTMLFormElement | GDOMElement } = {\r\n checkbox: 'checked',\r\n number: 'valueAsNumber',\r\n};\r\n\r\nconst generateId = () => (+new Date()).toString(36) + (1 - Math.random()).toString(36).substring(2, 16);\r\n\r\nexport const _buildFormInitialValues = <T>(rows: JSX.Element | JSX.Element[] = [], _dispatchChanges: (changes: Partial<GInputState>) => void) => {\r\n const fields: { [key: string]: GInputInitialState } = {};\r\n\r\n if (!Array.isArray(rows)) rows = [rows];\r\n\r\n if (__DEBUG__) {\r\n console.log('[buildFormInitialValues] -', 'building initial values for ', rows);\r\n }\r\n\r\n rows.forEach(row => {\r\n const inputConfigs = _findInputs(row);\r\n\r\n inputConfigs.forEach(config => {\r\n if (__DEBUG__) {\r\n console.log('[buildFormInitialValues] -', 'building input', `(${config.formKey})`, config);\r\n }\r\n\r\n if (__DEV__ && fields[config.formKey]) {\r\n console.warn(`[Duplicate Keys] - field with key '${config.formKey}' has already been defined.`);\r\n }\r\n\r\n const { required = false, max, maxLength, min, minLength, step, pattern, type = 'text', defaultValue, value, checked, defaultChecked, formKey, debounce, validatorKey } = config;\r\n const defaultProps = defaultFieldProps[type] || defaultFieldProps.text;\r\n const inputValue = value || defaultValue || checked || defaultChecked || defaultProps.value;\r\n\r\n fields[config.formKey] = {\r\n formKey,\r\n type,\r\n required,\r\n max,\r\n maxLength,\r\n min,\r\n minLength,\r\n step,\r\n pattern,\r\n value: inputValue,\r\n validatorKey,\r\n debounce,\r\n dirty: false,\r\n touched: false,\r\n dispatchChanges: (changes: Partial<GInputState>) => _dispatchChanges(changes),\r\n gid: generateId()\r\n };\r\n\r\n Object.keys(fields[config.formKey]).forEach(key => {\r\n if (typeof fields[config.formKey][key] === 'undefined') delete fields[config.formKey][key];\r\n });\r\n });\r\n });\r\n return { state: { fields, loading: false } as InitialState<T>, key: generateId() };\r\n};\r\n\r\nconst _findInputs = (root?: JSX.Element | JSX.Element[] | undefined[], total: (GInputProps & GInputStateMutable)[] = []): (GInputProps & GInputStateMutable)[] => {\r\n if (!root) return total;\r\n\r\n if (Array.isArray(root)) {\r\n root.forEach(element => _findInputs(element, total));\r\n return total;\r\n }\r\n\r\n if (root.props?.formKey) {\r\n if (__DEBUG__) {\r\n console.log('[findInputs] -', 'input config found', `(${root.props.formKey})`);\r\n }\r\n total.push(root.props);\r\n return total;\r\n }\r\n\r\n return _findInputs(root.props?.children, total);\r\n};\r\n\r\nexport const _findValidityKey = (validity: Partial<ValidityState>): keyof ValidityState | undefined => {\r\n for (const key in validity) {\r\n if (key !== 'valid' && validity[key as keyof ValidityState]) {\r\n if (__DEBUG__) {\r\n console.log('[findValidityKey] -', 'found validity key:', key);\r\n }\r\n return key as keyof ValidityState;\r\n }\r\n }\r\n};\r\n\r\nexport const hasSubmitter = (form?: HTMLFormElement | null): boolean => {\r\n if (!form) return false;\r\n\r\n for (const element of form) {\r\n if ((element as HTMLInputElement).type === 'submit') return true;\r\n }\r\n\r\n return false;\r\n};\r\n\r\nexport const _checkIfFormIsValid = <T>(fields: IForm<T>): boolean => {\r\n for (const f in fields) {\r\n if (fields[f].error) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n};\r\n\r\nexport const _toRawData = <T>(fields: IForm<T> & { [key: string]: GInputState<any> }, options: ToRawDataOptions<T> = {}): RawData<T> => {\r\n const data: { [key: string]: unknown } = {};\r\n\r\n const { include, exclude, transform } = options;\r\n\r\n if (include) {\r\n include.forEach(key => data[key as string] = fields[key]?.value);\r\n } else for (const f in fields) {\r\n data[f] = fields[f].value;\r\n }\r\n\r\n exclude?.forEach(key => delete data[key as string]);\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n data[key] = set(fields[key]?.value);\r\n }\r\n }\r\n\r\n return data as RawData<T>;\r\n};\r\n\r\nexport const _toFormData = <T>(form: HTMLFormElement | null, options?: ToFormDataOptions<T>): FormData => {\r\n if (!form) return new FormData();\r\n\r\n if (options) {\r\n const { exclude, include, transform } = options;\r\n let formData: FormData;\r\n\r\n if (include) {\r\n formData = new FormData();\r\n include.forEach(key => formData.set(key as string, form[key as string]?.value));\r\n } else {\r\n formData = new FormData(form);\r\n exclude?.forEach(key => formData.delete(key as string));\r\n }\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n formData.set(key, set(form[key]?.value));\r\n }\r\n }\r\n return formData;\r\n\r\n }\r\n\r\n return new FormData(form);\r\n};\r\n\r\nexport function _toURLSearchParams<T>(this: GFormState<T>, options?: ToURLSearchParamsOptions<T>): URLSearchParams {\r\n let data: Record<keyof T, any>;\r\n if (options) {\r\n const { exclude, include, transform } = options;\r\n if (include) {\r\n data = {} as Record<keyof T, any>;\r\n include.forEach(key => (data[key] = this[key]?.value));\r\n } else {\r\n data = this.toRawData();\r\n exclude?.forEach(key => delete data[key]);\r\n }\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n (data[key] = set(this[key]?.value));\r\n }\r\n }\r\n }\r\n else data = this.toRawData();\r\n\r\n return new URLSearchParams(data); // this is ok because URLSearchParams will stringify the values (boolean/number)\r\n}\r\n\r\nfunction __debounce(this: { [key: string]: { timerId: NodeJS.Timeout } }, timeout: number, id: string): Promise<void> {\r\n return new Promise(resolve => {\r\n if (this[id]?.timerId)\r\n clearTimeout(this[id].timerId);\r\n\r\n const timerId = setTimeout(() => resolve(), timeout);\r\n\r\n if (this[id]) {\r\n this[id].timerId = timerId;\r\n } else this[id] = { timerId };\r\n });\r\n}\r\n\r\nexport const _debounce = __debounce.bind({});\r\n\r\nexport const _extractValue = <T>(e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: { value: T } | string | number): undefined | string | number | boolean | T => {\r\n if (e?.target) {\r\n if (Object.hasOwn(typeValueDict, e.target.type)) return e.target[typeValueDict[e.target.type] as 'value'];\r\n return e.target.value;\r\n }\r\n return (e?.value as T) || (isObject(unknown) ? unknown.value : unknown);\r\n};\r\n\r\nexport const _checkResult = (handlerResult: boolean | RegExp | string, value: string | number | boolean): boolean => typeof handlerResult === 'boolean' ? handlerResult : typeof value === 'string' ? typeof handlerResult === 'string' ? !new RegExp(handlerResult).test(value) : !handlerResult.test(value) : false;\r\n\r\nexport const _merge = <T extends object>(target: { [key: string]: any } = {}, ...nodes: ({ [key: string]: any } | undefined | void)[]): T => {\r\n if (!nodes.length) return target as T;\r\n\r\n const next = nodes.shift();\r\n if (isObject(next)) {\r\n for (const key in next) {\r\n target[key] = target[key] ? { ...target[key], ...next[key] } : next[key];\r\n }\r\n }\r\n\r\n return _merge(target, ...nodes);\r\n};","import { useMemo, useState } from \"react\";\r\n\r\nimport { _buildFormInitialValues, _findValidityKey, _checkResult, _extractValue, _debounce } from \"./helpers\";\r\nimport { GValidator, type GInputValidator, type GValidators } from \"./validations\";\r\nimport type { GInputState } from \"./fields\";\r\nimport type { GFocusEvent, GInvalidEvent, GChangeEvent, GFormEvent, GDOMElement } from \"./form\";\r\nimport type { GFormState, InitialState } from \"./state\";\r\nimport { handlersMap, validityMap } from \"./validations/GValidator\";\r\n\r\nexport const useForm = <T>(children?: JSX.Element | JSX.Element[] | ((state: GFormState<T>) => JSX.Element | JSX.Element[]), validators: GValidators<T> = {}, optimized = false) => {\r\n // eslint-disable-next-line prefer-const\r\n let _dispatchChanges: (changes: Partial<InitialState<T>> | Partial<GInputState>, key?: string) => void;\r\n\r\n const initialValues = useMemo(() => {\r\n const values = _buildFormInitialValues<T>(typeof children === 'function' ? children({} as GFormState<T>) : children, _dispatchChanges);\r\n if (__DEV__) {\r\n Object.keys(values.state.fields).forEach(key => {\r\n const input = values.state.fields[key];\r\n const validator = validators[key];\r\n if (validator instanceof GValidator) {\r\n const validityKeys = validator.track?.filter(key => validityMap[key]);\r\n\r\n validityKeys?.forEach(vKey => {\r\n if (typeof input[validityMap[vKey]] === 'undefined') {\r\n console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${vKey}' but the input hasn't described the constraint '${validityMap[vKey]}'.\\nadd '${validityMap[vKey]}' to the input props.\\nexample:\\n<GInput formKey='${input.formKey}' ${validityMap[vKey]}={...} />`);\r\n }\r\n });\r\n\r\n Object.entries(validityMap).forEach(([validityKey, constraint]) => {\r\n if (typeof input[constraint] !== 'undefined' && !validator.track?.some(trackKey => validityKey === trackKey)) {\r\n console.warn(`[Missing Validator] - the input '${input.formKey}' has described the constraint '${constraint}' but the input hasn't registered a validator to handle it.\\nregister a handler '${handlersMap[constraint]}' for the input validator to handle the '${validityKey}' violation.\\nexample:\\ncosnt validators = {\\n\\t${input.formKey}: new GValidator().${handlersMap[constraint]}(...)\\n}`);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n return values;\r\n }, []);\r\n const [state, setState] = useState(initialValues.state);\r\n\r\n /**\r\n * handler for validating a form input\r\n * @param input the input to be validated\r\n * @param e the event object\r\n */\r\n const _viHandler = (input: GInputState, e?: GFocusEvent<GDOMElement | HTMLFormElement> | GInvalidEvent<GDOMElement | HTMLFormElement> | GFormEvent<GDOMElement | HTMLFormElement> | GFormEvent): void => {\r\n if (!input) return;\r\n const element = e?.target;\r\n\r\n if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {\r\n if (!input.checkValidity) input.checkValidity = () => element.checkValidity();\r\n element.setCustomValidity(''); //reset any previous error (custom)\r\n\r\n const validityKey = _findValidityKey(element.validity);\r\n _validateInput(input, validityKey, (v: string) => element.setCustomValidity(v));\r\n\r\n if (!validityKey && input.error) {\r\n element.setCustomValidity(input.errorText || 'error');\r\n }\r\n\r\n _dispatchChanges(input, input.formKey);\r\n } else {\r\n if (__DEBUG__) {\r\n console.log('[validateInputHandler] -', `the input '${input.formKey}' is not a native web element\\nevent:`, e);\r\n }\r\n\r\n //fallback - validate the input for constraint validation manually\r\n input.checkValidity = () => _createInputChecker(input);\r\n input.checkValidity();\r\n\r\n _dispatchChanges(input, input.formKey);\r\n }\r\n };\r\n\r\n const _createInputChecker = (input: GInputState) => {\r\n let validityKey = _findValidityKey({\r\n valueMissing: input.required && !input.value || false,\r\n tooShort: input.minLength && input.value.toString().length < input.minLength || false,\r\n tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,\r\n patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,\r\n rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,\r\n rangeOverflow: input.max && Number(input.value) > Number(input.max) || false\r\n });\r\n\r\n if (!validityKey && input.error) {\r\n validityKey = 'customError';\r\n }\r\n _validateInput(input, validityKey);\r\n return !input.error;\r\n };\r\n\r\n /**\r\n * handler for updating and validating a form input\r\n * @param key the key used to identify the input (`formKey`)\r\n * @param e the event object\r\n */\r\n const _updateInputHandler = (key: string, e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: { value: unknown } | string | number): void => {\r\n const value = _extractValue(e, unknown);\r\n const input = _updateInput(key, value);\r\n\r\n _viHandler(input, e);\r\n };\r\n\r\n /**\r\n * Validates the input and updates the state with the result\r\n * @param input the input to be validated\r\n * @param validityKey the `Constraint Validation` key\r\n */\r\n const _validateInput = (input: GInputState, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];\r\n if (__DEBUG__) {\r\n console.log('[validateInput] -', 'validating input:', input.formKey, `(${validityKey ? validityKey : 'custom'})`);\r\n }\r\n\r\n inputValidator && __validateInput(input, inputValidator, validityKey, setValidity);\r\n input.touched = true;\r\n };\r\n\r\n /**\r\n * update the input state.\r\n * @param key the key used to identify the input (`formKey`)\r\n * @param value the new value\r\n */\r\n const _updateInput = <V>(key: string, value: GInputState<V>['value']) => {\r\n const input = state.fields[key];\r\n input.value = value;\r\n input.dirty = true;\r\n return input;\r\n };\r\n\r\n _dispatchChanges = (changes: Partial<InitialState<T>> | Partial<GInputState>, key?: string) => setState(prev => {\r\n if (key) {\r\n return { ...prev, fields: { ...prev.fields, [key]: { ...prev.fields[key], ...changes } } };\r\n }\r\n return { ...prev, ...changes };\r\n });\r\n\r\n /**\r\n * @internal\r\n */\r\n const __validateInput = (input: GInputState, inputValidator: GInputValidator<T>, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with handlers:`, inputValidator.handlers);\r\n }\r\n\r\n for (const index in inputValidator.constraintHandlers) {\r\n const result = inputValidator.constraintHandlers[index](input, validityKey);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for constraint handler (${index}):\\n`, inputValidator.constraintHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n for (const index in inputValidator.handlers) {\r\n const result = inputValidator.handlers[index](input, state.fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom handler (${index}):\\n`, inputValidator.handlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n input.errorText = '';\r\n\r\n if (inputValidator.asyncHandlers.length) {\r\n input.error = true;\r\n _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {\r\n const validateAsync = async () => {\r\n for (const index in inputValidator.asyncHandlers) {\r\n const result = await inputValidator.asyncHandlers[index](input, state.fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom async handler (${index}):\\n`, inputValidator.asyncHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) break;\r\n }\r\n if (!input.error) input.errorText = '';\r\n\r\n _dispatchChanges({ error: input.error, errorText: input.errorText }, input.formKey);\r\n setValidity?.(input.errorText);\r\n };\r\n\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with async handlers:`, inputValidator.asyncHandlers);\r\n }\r\n validateAsync();\r\n });\r\n }\r\n\r\n };\r\n\r\n return { state, _updateInputHandler, _viHandler, _dispatchChanges, optimized, key: initialValues.key, _createInputChecker };\r\n};","import { createContext, useContext } from \"react\";\r\nimport { useForm } from \"./useForm\";\r\n\r\nexport type GContext<T = any> = ReturnType<typeof useForm<T>>;\r\n\r\nconst gFormContext = createContext<GContext>({\r\n state: {\r\n fields: {},\r\n loading: false\r\n },\r\n _updateInputHandler: () => null,\r\n _viHandler: () => null,\r\n _dispatchChanges: () => null,\r\n _createInputChecker: () => false,\r\n optimized: false,\r\n key: ''\r\n});\r\n\r\nexport const useGenericFormContext = () => useContext<GContext>(gFormContext);\r\n\r\nexport const GFormContextProvider = gFormContext.Provider;","import React, { useMemo, useEffect, forwardRef } from \"react\";\r\nimport type { ReactNode, MutableRefObject, FC } from \"react\";\r\n\r\nimport { useForm } from \"./useForm\";\r\nimport { _checkIfFormIsValid, _toRawData, _toURLSearchParams, _merge } from \"./helpers\";\r\nimport { GFormContextProvider } from \"./context\";\r\nimport type { RNGFormState, ToRawDataOptions } from \"./state\";\r\nimport type { GValidators } from \"./validations\";\r\nimport type { IForm, PartialForm } from \"./form\";\r\nimport type { GInputState } from \"./fields\";\r\n\r\nexport type RNGFormProps<T> = Omit<any, 'children'> & {\r\n children?: ReactNode | ReactNode[] | ((state: RNGFormState<T>) => ReactNode | ReactNode[]);\r\n /** @param loader - a component to display while loading (optional). */\r\n loader?: ReactNode;\r\n /** @param stateRef - pass a ref which will points to the current state of the form (optional). */\r\n stateRef?: MutableRefObject<RNGFormState<T> | undefined>;\r\n /** @param validators - an object for handling validations (optional). */\r\n validators?: GValidators<T>;\r\n /** @param onInit - execute a handler once the form has initialized (optional). */\r\n onInit?: (state: RNGFormState<T>) => void | PartialForm<T> | Promise<void | PartialForm<T>>;\r\n el: FC<any>;\r\n};\r\n\r\n/**\r\n * build dynamic forms with validations.\r\n * @link Docs - https://gform-react.onrender.com\r\n * @link Npm - https://www.npmjs.com/package/gform-react\r\n */\r\nexport const RNGForm: <T extends any>(props: RNGFormProps<T>) => ReturnType<FC<RNGFormProps<T>>> = (<T extends any>() => {\r\n return forwardRef<any, RNGFormProps<T>>(({\r\n loader = <div>loading</div>,\r\n stateRef,\r\n children,\r\n validators,\r\n onInit,\r\n el: El,\r\n ...rest\r\n }, ref) => {\r\n const values = useForm<T>(children as JSX.Element | JSX.Element[], validators);\r\n const { state, _dispatchChanges, key } = values;\r\n\r\n const formState = useMemo(() => {\r\n const _isFormValid = _checkIfFormIsValid(state.fields);\r\n const formState: RNGFormState<T> = {\r\n ...state.fields,\r\n isValid: _isFormValid,\r\n isInvalid: !_isFormValid,\r\n loading: state.loading,\r\n toRawData: (options?: ToRawDataOptions<T>) => _toRawData(state.fields, options),\r\n toURLSearchParams: _toURLSearchParams,\r\n checkValidity: () => {\r\n for (const i in state.fields) {\r\n const valid = state.fields[i].checkValidity();\r\n if (!valid) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n },\r\n setLoading: (p) => _dispatchChanges({ loading: typeof p === 'function' ? p(state.loading) : p }),\r\n dispatchChanges: (changes: PartialForm<T> & { [key: string]: Partial<GInputState<any>> }) => _dispatchChanges({ fields: _merge<IForm<T> & { [key: string]: GInputState; }>({}, state.fields, changes) })\r\n };\r\n\r\n if (stateRef) stateRef.current = formState;\r\n\r\n return formState;\r\n }, [state.fields]);\r\n\r\n useEffect(() => {\r\n if (onInit) {\r\n const _handler = (_c: void | PartialForm<T>) => _dispatchChanges({ fields: _merge<IForm<T> & { [key: string]: GInputState; }>({}, state.fields, _c) });\r\n const changes = onInit(formState);\r\n changes instanceof Promise ? changes.then(_handler) : _handler(changes);\r\n }\r\n }, []);\r\n\r\n const formComponent = useMemo(() => {\r\n const formChildren = typeof children === 'function' ? children(formState) : children;\r\n\r\n return <El {...rest} ref={ref}>\r\n {formChildren}\r\n </El>;\r\n }, [formState, children]);\r\n\r\n return (\r\n <GFormContextProvider value={values} key={key}>\r\n {\r\n state.loading\r\n ?\r\n loader\r\n :\r\n formComponent\r\n }\r\n </GFormContextProvider>\r\n );\r\n });\r\n})();","import React, { forwardRef, useEffect, useMemo } from 'react';\r\nimport { TextInput } from 'react-native';\r\n\r\nimport { useGenericFormContext } from \"../context\";\r\nimport { _debounce } from '../helpers';\r\nimport type { GInputState, RNGInputProps } from '.';\r\n\r\nexport const RNGInput = forwardRef<any, RNGInputProps>(({ formKey, element, type, validatorKey, fetch, fetchDeps = [], defaultValue, value, debounce = 300, ...rest }, ref) => {\r\n const { state: { fields }, _updateInputHandler, _dispatchChanges, _viHandler, _createInputChecker } = useGenericFormContext();\r\n const inputState = fields[formKey];\r\n\r\n const _element = useMemo(() => {\r\n const value = inputState.value || '';\r\n\r\n const _props = {\r\n ...rest,\r\n value,\r\n inputMode: type,\r\n ref\r\n };\r\n\r\n _props.onEndEditing = (e) => {\r\n _viHandler(inputState);\r\n rest.onEndEditing && rest.onEndEditing(e);\r\n };\r\n _props.onChangeText = (e) => {\r\n _updateInputHandler(formKey, undefined, {value: e});\r\n rest.onChangeText && rest.onChangeText(e);\r\n };\r\n\r\n if (element) {\r\n return (element as (input: GInputState, props: any) => JSX.Element)(inputState, _props);\r\n }\r\n\r\n return <TextInput {..._props}/>;\r\n }, [inputState, element]);\r\n\r\n const _fetchDeps = useMemo(() => fetchDeps.map(key => fields[key].value), [fields]);\r\n\r\n useEffect(() => {\r\n inputState.checkValidity = () => {\r\n const result = _createInputChecker(inputState);\r\n _dispatchChanges(inputState, formKey);\r\n return result;\r\n };\r\n _dispatchChanges(inputState, formKey);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (fetch) {\r\n _debounce(debounce, `${inputState.gid}-fetch`).then(() => {\r\n const res = fetch(inputState, fields);\r\n res instanceof Promise ? res.then((state) => state && _dispatchChanges(state, formKey)) : res && _dispatchChanges(res, formKey);\r\n });\r\n }\r\n }, _fetchDeps);\r\n\r\n return _element;\r\n});"],"names":["isObject","o","Array","isArray","defaultFieldProps","text","value","checkbox","number","typeValueDict","generateId","Date","toString","Math","random","substring","_findInputs","root","total","_root$props","_root$props2","forEach","element","props","formKey","push","children","_findValidityKey","validity","key","_toURLSearchParams","options","data","exclude","include","transform","_this$key","this","toRawData","_this$key2","set","URLSearchParams","_debounce","timeout","id","Promise","resolve","_this$id","timerId","clearTimeout","setTimeout","bind","_checkResult","handlerResult","RegExp","test","_merge","target","nodes","length","next","shift","useForm","validators","optimized","_dispatchChanges","initialValues","useMemo","values","_buildFormInitialValues","rows","fields","row","config","required","max","maxLength","min","minLength","step","pattern","type","defaultValue","checked","defaultChecked","debounce","validatorKey","inputValue","dirty","touched","dispatchChanges","changes","gid","Object","keys","state","loading","setState","useState","_viHandler","input","e","document","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","checkValidity","setCustomValidity","validityKey","_validateInput","v","error","errorText","_createInputChecker","valueMissing","tooShort","tooLong","patternMismatch","rangeUnderflow","Number","rangeOverflow","setValidity","inputValidator","__validateInput","_updateInput","prev","index","constraintHandlers","result","handlers","asyncHandlers","then","async","validateAsync","_updateInputHandler","unknown","_extractValue","hasOwn","gFormContext","createContext","GFormContextProvider","Provider","RNGForm","forwardRef","loader","React","createElement","stateRef","onInit","el","El","rest","ref","i","formState","_isFormValid","f","_checkIfFormIsValid","isValid","isInvalid","_toRawData","_fields$key","_fields$key2","toURLSearchParams","setLoading","p","current","useEffect","_handler","_c","formComponent","formChildren","_extends","RNGInput","fetch","fetchDeps","t","u","useContext","inputState","_element","_props","inputMode","onEndEditing","onChangeText","undefined","TextInput","_fetchDeps","map","res"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"gform-react-native.production.js","sources":["../../../src/helpers.ts","../../../src/useForm.ts","../../../src/context.ts","../../../src/RNGForm.tsx","../../../src/fields/RNGInput.tsx"],"sourcesContent":["import type { GInputInitialState, GInputProps, GInputState, GInputStateMutable } from './fields';\r\nimport type { GChangeEvent, GDOMElement, IForm } from './form';\r\nimport type { GFormState, InitialState, RawData, ToFormDataOptions, ToRawDataOptions, ToURLSearchParamsOptions } from './state';\r\n\r\nexport const isObject = (o: any): o is object => (o && typeof o === 'object' && !Array.isArray(o));\r\n\r\nconst defaultFieldProps: { [key: string]: { value: string | number | boolean } } = {\r\n text: { value: '' },\r\n checkbox: { value: false },\r\n number: { value: 0 }\r\n};\r\n\r\nconst typeValueDict: { [key: string]: keyof HTMLFormElement | GDOMElement } = {\r\n checkbox: 'checked',\r\n number: 'valueAsNumber',\r\n};\r\n\r\nconst generateId = () => (+new Date()).toString(36) + (1 - Math.random()).toString(36).substring(2, 16);\r\n\r\nexport const _buildFormInitialValues = <T>(rows: JSX.Element | JSX.Element[] = []) => {\r\n const fields: { [key: string]: GInputInitialState } = {};\r\n\r\n if (!Array.isArray(rows)) rows = [rows];\r\n\r\n if (__DEBUG__) {\r\n console.log('[buildFormInitialValues] -', 'building initial values for ', rows);\r\n }\r\n\r\n rows.forEach(row => {\r\n const inputConfigs = _findInputs(row);\r\n\r\n inputConfigs.forEach(config => {\r\n if (__DEBUG__) {\r\n console.log('[buildFormInitialValues] -', 'building input', `(${config.formKey})`, config);\r\n }\r\n\r\n if (__DEV__ && fields[config.formKey]) {\r\n console.warn(`[Duplicate Keys] - field with key '${config.formKey}' has already been defined.`);\r\n }\r\n\r\n const { required = false, max, maxLength, min, minLength, step, pattern, type = 'text', defaultValue, value, checked, defaultChecked, formKey, debounce, validatorKey } = config;\r\n const defaultProps = defaultFieldProps[type] || defaultFieldProps.text;\r\n const inputValue = value || defaultValue || checked || defaultChecked || defaultProps.value;\r\n\r\n fields[config.formKey] = {\r\n formKey,\r\n type,\r\n required,\r\n max,\r\n maxLength,\r\n min,\r\n minLength,\r\n step,\r\n pattern,\r\n value: inputValue,\r\n validatorKey,\r\n debounce,\r\n dirty: false,\r\n touched: false,\r\n gid: generateId()\r\n };\r\n\r\n Object.keys(fields[config.formKey]).forEach(key => {\r\n if (typeof fields[config.formKey][key] === 'undefined') delete fields[config.formKey][key];\r\n });\r\n });\r\n });\r\n return { state: { fields, loading: false } as InitialState<T>, key: generateId() };\r\n};\r\n\r\nconst _findInputs = (root?: JSX.Element | JSX.Element[] | undefined[], total: (GInputProps & GInputStateMutable)[] = []): (GInputProps & GInputStateMutable)[] => {\r\n if (!root) return total;\r\n\r\n if (Array.isArray(root)) {\r\n root.forEach(element => _findInputs(element, total));\r\n return total;\r\n }\r\n\r\n if (root.props?.formKey) {\r\n if (__DEBUG__) {\r\n console.log('[findInputs] -', 'input config found', `(${root.props.formKey})`);\r\n }\r\n total.push(root.props);\r\n return total;\r\n }\r\n\r\n return _findInputs(root.props?.children, total);\r\n};\r\n\r\nexport const _findValidityKey = (validity: Partial<ValidityState>): keyof ValidityState | undefined => {\r\n for (const key in validity) {\r\n if (key !== 'valid' && validity[key as keyof ValidityState]) {\r\n if (__DEBUG__) {\r\n console.log('[findValidityKey] -', 'found validity key:', key);\r\n }\r\n return key as keyof ValidityState;\r\n }\r\n }\r\n};\r\n\r\nexport const hasSubmitter = (form?: HTMLFormElement | null): boolean => {\r\n if (!form) return false;\r\n\r\n for (const element of form) {\r\n if ((element as HTMLInputElement).type === 'submit') return true;\r\n }\r\n\r\n return false;\r\n};\r\n\r\nexport const _checkIfFormIsValid = <T>(fields: IForm<T>): boolean => {\r\n for (const f in fields) {\r\n if (fields[f].error) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n};\r\n\r\nexport const _toRawData = <T>(fields: IForm<T> & { [key: string]: GInputState<any> }, options: ToRawDataOptions<T> = {}): RawData<T> => {\r\n const data: { [key: string]: unknown } = {};\r\n\r\n const { include, exclude, transform } = options;\r\n\r\n if (include) {\r\n include.forEach(key => data[key as string] = fields[key]?.value);\r\n } else for (const f in fields) {\r\n data[f] = fields[f].value;\r\n }\r\n\r\n exclude?.forEach(key => delete data[key as string]);\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n data[key] = set(fields[key]?.value);\r\n }\r\n }\r\n\r\n return data as RawData<T>;\r\n};\r\n\r\nexport const _toFormData = <T>(form: HTMLFormElement | null, options?: ToFormDataOptions<T>): FormData => {\r\n if (!form) return new FormData();\r\n\r\n if (options) {\r\n const { exclude, include, transform } = options;\r\n let formData: FormData;\r\n\r\n if (include) {\r\n formData = new FormData();\r\n include.forEach(key => formData.set(key as string, form[key as string]?.value));\r\n } else {\r\n formData = new FormData(form);\r\n exclude?.forEach(key => formData.delete(key as string));\r\n }\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n formData.set(key, set(form[key]?.value));\r\n }\r\n }\r\n return formData;\r\n\r\n }\r\n\r\n return new FormData(form);\r\n};\r\n\r\nexport function _toURLSearchParams<T>(this: GFormState<T>, options?: ToURLSearchParamsOptions<T>): URLSearchParams {\r\n let data: Record<keyof T, any>;\r\n if (options) {\r\n const { exclude, include, transform } = options;\r\n if (include) {\r\n data = {} as Record<keyof T, any>;\r\n include.forEach(key => (data[key] = this[key]?.value));\r\n } else {\r\n data = this.toRawData();\r\n exclude?.forEach(key => delete data[key]);\r\n }\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n (data[key] = set(this[key]?.value));\r\n }\r\n }\r\n }\r\n else data = this.toRawData();\r\n\r\n return new URLSearchParams(data); // this is ok because URLSearchParams will stringify the values (boolean/number)\r\n}\r\n\r\nfunction __debounce(this: { [key: string]: { timerId: NodeJS.Timeout } }, timeout: number, id: string): Promise<void> {\r\n return new Promise(resolve => {\r\n if (this[id]?.timerId)\r\n clearTimeout(this[id].timerId);\r\n\r\n const timerId = setTimeout(() => resolve(), timeout);\r\n\r\n if (this[id]) {\r\n this[id].timerId = timerId;\r\n } else this[id] = { timerId };\r\n });\r\n}\r\n\r\nexport const _debounce = __debounce.bind({});\r\n\r\nexport const _extractValue = <T>(e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: { value: T } | string | number): undefined | string | number | boolean | T => {\r\n if (e?.target) {\r\n if (Object.hasOwn(typeValueDict, e.target.type)) return e.target[typeValueDict[e.target.type] as 'value'];\r\n return e.target.value;\r\n }\r\n return (e?.value as T) || (isObject(unknown) ? unknown.value : unknown);\r\n};\r\n\r\nexport const _checkResult = (handlerResult: boolean | RegExp | string, value: string | number | boolean): boolean => typeof handlerResult === 'boolean' ? handlerResult : typeof value === 'string' ? typeof handlerResult === 'string' ? !new RegExp(handlerResult).test(value) : !handlerResult.test(value) : false;\r\n\r\nexport const _merge = <T extends object>(target: { [key: string]: any } = {}, ...nodes: ({ [key: string]: any } | undefined | void)[]): T => {\r\n if (!nodes.length) return target as T;\r\n\r\n const next = nodes.shift();\r\n if (isObject(next)) {\r\n for (const key in next) {\r\n target[key] = target[key] ? { ...target[key], ...next[key] } : next[key];\r\n }\r\n }\r\n\r\n return _merge(target, ...nodes);\r\n};","import { useMemo, useState } from \"react\";\r\n\r\nimport { _buildFormInitialValues, _findValidityKey, _checkResult, _extractValue, _debounce } from \"./helpers\";\r\nimport { GValidator, type GInputValidator, type GValidators } from \"./validations\";\r\nimport type { GInputState } from \"./fields\";\r\nimport type { GFocusEvent, GInvalidEvent, GChangeEvent, GFormEvent, GDOMElement } from \"./form\";\r\nimport type { GFormState, InitialState } from \"./state\";\r\nimport { handlersMap, validityMap } from \"./validations/GValidator\";\r\n\r\nexport const useForm = <T>(children?: JSX.Element | JSX.Element[] | ((state: GFormState<T>) => JSX.Element | JSX.Element[]), validators: GValidators<T> = {}, optimized = false) => {\r\n const initialValues = useMemo(() => {\r\n const values = _buildFormInitialValues<T>(typeof children === 'function' ? children({} as GFormState<T>) : children);\r\n if (__DEV__) {\r\n Object.keys(values.state.fields).forEach(key => {\r\n const input = values.state.fields[key];\r\n const validator = validators[key];\r\n if (validator instanceof GValidator) {\r\n const validityKeys = validator.track?.filter(key => validityMap[key]);\r\n\r\n validityKeys?.forEach(vKey => {\r\n if (typeof input[validityMap[vKey]] === 'undefined') {\r\n console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${vKey}' but the input hasn't described the constraint '${validityMap[vKey]}'.\\nadd '${validityMap[vKey]}' to the input props.\\nexample:\\n<GInput formKey='${input.formKey}' ${validityMap[vKey]}={...} />\\n\\nor either remove '.${handlersMap[validityMap[vKey]]}(...)' validation`);\r\n }\r\n });\r\n\r\n Object.entries(validityMap).forEach(([validityKey, constraint]) => {\r\n if (typeof input[constraint] !== 'undefined' && !validator.track?.some(trackKey => validityKey === trackKey)) {\r\n console.warn(`[Missing Validator] - the input '${input.formKey}' has described the constraint '${constraint}' but the input hasn't registered a validator to handle it.\\nregister a handler '${handlersMap[constraint]}' for the input validator to handle the '${validityKey}' violation.\\nexample:\\ncosnt validators = {\\n\\t${input.formKey}: new GValidator().${handlersMap[constraint]}(...)\\n}`);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n return values;\r\n }, []);\r\n\r\n const [state, setState] = useState(initialValues.state);\r\n\r\n /**\r\n * handler for validating a form input\r\n * @param input the input to be validated\r\n * @param e the event object\r\n */\r\n const _viHandler = (input: GInputState, e?: GFocusEvent<GDOMElement | HTMLFormElement> | GInvalidEvent<GDOMElement | HTMLFormElement> | GFormEvent<GDOMElement | HTMLFormElement> | GFormEvent): void => {\r\n if (!input) return;\r\n const element = e && e.target;\r\n\r\n if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {\r\n if (!input.checkValidity) input.checkValidity = () => element.checkValidity();\r\n \r\n //if the field has initial value\r\n if (!input.dirty && input.value) {\r\n /**\r\n * for inputs with initial value we have to manually check for validations.\r\n * validity.tooShort is false even though initial value is smaller than minLength, because its required to be filled in by user (native dirty flag is true).\r\n * it only works for validity.valueMissing.\r\n * If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.\r\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute\r\n */\r\n _checkInputManually(input);\r\n _dispatchChanges(input, input.formKey);\r\n return;\r\n }\r\n element.setCustomValidity(''); //reset any previous error (custom)\r\n\r\n const validityKey = _findValidityKey(element.validity);\r\n _validateInput(input, validityKey, (v: string) => element.setCustomValidity(v));\r\n\r\n if (!validityKey && input.error) {\r\n element.setCustomValidity(input.errorText || 'error');\r\n }\r\n\r\n _dispatchChanges(input, input.formKey);\r\n } else {\r\n if (__DEBUG__) {\r\n console.log('[validateInputHandler] -', `the input '${input.formKey}' is not a native web element\\nevent:`, e);\r\n }\r\n\r\n //fallback - validate the input for validations manually\r\n input.checkValidity = () => _checkInputManually(input);\r\n input.checkValidity();\r\n\r\n _dispatchChanges(input, input.formKey);\r\n }\r\n };\r\n\r\n const _checkInputManually = (input: GInputState) => {\r\n let validityKey = _findValidityKey({\r\n valueMissing: input.required && !input.value || false,\r\n tooShort: input.minLength && input.value.toString().length < input.minLength || false,\r\n tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,\r\n patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,\r\n rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,\r\n rangeOverflow: input.max && Number(input.value) > Number(input.max) || false\r\n });\r\n\r\n if (!validityKey && input.error) {\r\n validityKey = 'customError';\r\n }\r\n _validateInput(input, validityKey);\r\n return !input.error;\r\n };\r\n\r\n /**\r\n * handler for updating and validating a form input\r\n * @param key the key used to identify the input (`formKey`)\r\n * @param e the event object\r\n */\r\n const _updateInputHandler = (key: string, e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: { value: unknown } | string | number): void => {\r\n const value = _extractValue(e, unknown);\r\n const input = _updateInput(key, value);\r\n\r\n _viHandler(input, e);\r\n };\r\n\r\n /**\r\n * Validates the input and updates the state with the result\r\n * @param input the input to be validated\r\n * @param validityKey the `Constraint Validation` key\r\n */\r\n const _validateInput = (input: GInputState, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];\r\n if (__DEBUG__) {\r\n console.log('[validateInput] -', 'validating input:', input.formKey, `(${validityKey ? validityKey : 'custom'})`);\r\n }\r\n\r\n inputValidator && __validateInput(input, inputValidator, validityKey, setValidity);\r\n input.touched = true;\r\n };\r\n\r\n /**\r\n * update the input state.\r\n * @param key the key used to identify the input (`formKey`)\r\n * @param value the new value\r\n */\r\n const _updateInput = <V>(key: string, value: GInputState<V>['value']) => {\r\n const input = state.fields[key];\r\n input.value = value;\r\n input.dirty = true;\r\n return input;\r\n };\r\n\r\n const _dispatchChanges = (changes: Partial<InitialState<T>> | Partial<GInputState>, key?: string) => setState(prev => {\r\n if (key) {\r\n return { ...prev, fields: { ...prev.fields, [key]: { ...prev.fields[key], ...changes } } };\r\n }\r\n return { ...prev, ...changes };\r\n });\r\n\r\n /**\r\n * @internal\r\n */\r\n const __validateInput = (input: GInputState, inputValidator: GInputValidator<T>, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with handlers:`, inputValidator.handlers);\r\n }\r\n\r\n for (const index in inputValidator.constraintHandlers) {\r\n const result = inputValidator.constraintHandlers[index](input, validityKey);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for constraint handler (${index}):\\n`, inputValidator.constraintHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n for (const index in inputValidator.handlers) {\r\n const result = inputValidator.handlers[index](input, state.fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom handler (${index}):\\n`, inputValidator.handlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n input.errorText = '';\r\n\r\n if (inputValidator.asyncHandlers.length) {\r\n input.error = true;\r\n _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {\r\n const validateAsync = async () => {\r\n for (const index in inputValidator.asyncHandlers) {\r\n const result = await inputValidator.asyncHandlers[index](input, state.fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom async handler (${index}):\\n`, inputValidator.asyncHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) break;\r\n }\r\n if (!input.error) input.errorText = '';\r\n\r\n _dispatchChanges({ error: input.error, errorText: input.errorText }, input.formKey);\r\n setValidity && setValidity(input.errorText);\r\n };\r\n\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with async handlers:`, inputValidator.asyncHandlers);\r\n }\r\n validateAsync();\r\n });\r\n }\r\n\r\n };\r\n\r\n return { state, _updateInputHandler, _viHandler, _dispatchChanges, optimized, key: initialValues.key, _createInputChecker: _checkInputManually };\r\n};","import { createContext, useContext } from \"react\";\r\nimport { useForm } from \"./useForm\";\r\n\r\nexport type GContext<T = any> = ReturnType<typeof useForm<T>>;\r\n\r\nconst gFormContext = createContext<GContext>({\r\n state: {\r\n fields: {},\r\n loading: false\r\n },\r\n _updateInputHandler: () => null,\r\n _viHandler: () => null,\r\n _dispatchChanges: () => null,\r\n _createInputChecker: () => false,\r\n optimized: false,\r\n key: ''\r\n});\r\n\r\nexport const useGenericFormContext = () => useContext<GContext>(gFormContext);\r\n\r\nexport const GFormContextProvider = gFormContext.Provider;","import React, { useMemo, useEffect, forwardRef } from \"react\";\r\nimport type { ReactNode, MutableRefObject, FC } from \"react\";\r\n\r\nimport { useForm } from \"./useForm\";\r\nimport { _checkIfFormIsValid, _toRawData, _toURLSearchParams, _merge } from \"./helpers\";\r\nimport { GFormContextProvider } from \"./context\";\r\nimport type { RNGFormState, ToRawDataOptions } from \"./state\";\r\nimport type { GValidators } from \"./validations\";\r\nimport type { IForm, PartialForm } from \"./form\";\r\nimport type { GInputState } from \"./fields\";\r\n\r\nexport type RNGFormProps<T> = Omit<any, 'children'> & {\r\n children?: ReactNode | ReactNode[] | ((state: RNGFormState<T>) => ReactNode | ReactNode[]);\r\n /** @param loader - a component to display while loading (optional). */\r\n loader?: ReactNode;\r\n /** @param stateRef - pass a ref which will points to the current state of the form (optional). */\r\n stateRef?: MutableRefObject<RNGFormState<T> | undefined>;\r\n /** @param validators - an object for handling validations (optional). */\r\n validators?: GValidators<T>;\r\n /** @param onInit - execute a handler once the form has initialized (optional). */\r\n onInit?: (state: RNGFormState<T>) => void | PartialForm<T> | Promise<void | PartialForm<T>>;\r\n el: FC<any>;\r\n};\r\n\r\n/**\r\n * build dynamic forms with validations.\r\n * @link Docs - https://gform-react.onrender.com\r\n * @link Npm - https://www.npmjs.com/package/gform-react\r\n */\r\nexport const RNGForm: <T extends any>(props: RNGFormProps<T>) => ReturnType<FC<RNGFormProps<T>>> = (<T extends any>() => {\r\n return forwardRef<any, RNGFormProps<T>>(({\r\n loader = <div>loading</div>,\r\n stateRef,\r\n children,\r\n validators,\r\n onInit,\r\n el: El,\r\n ...rest\r\n }, ref) => {\r\n const values = useForm<T>(children as JSX.Element | JSX.Element[], validators);\r\n const { state, _dispatchChanges, key, _viHandler } = values;\r\n\r\n const formState = useMemo(() => {\r\n const _isFormValid = _checkIfFormIsValid(state.fields);\r\n const formState: RNGFormState<T> = {\r\n ...state.fields,\r\n isValid: _isFormValid,\r\n isInvalid: !_isFormValid,\r\n loading: state.loading,\r\n toRawData: (options?: ToRawDataOptions<T>) => _toRawData(state.fields, options),\r\n toURLSearchParams: _toURLSearchParams,\r\n checkValidity: () => {\r\n for (const i in state.fields) {\r\n const valid = state.fields[i].checkValidity();\r\n if (!valid) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n },\r\n setLoading: (p) => _dispatchChanges({ loading: typeof p === 'function' ? p(state.loading) : p }),\r\n dispatchChanges: (changes: PartialForm<T> & { [key: string]: Partial<GInputState<any>> }) => _dispatchChanges({ fields: _merge<IForm<T> & { [key: string]: GInputState; }>({}, state.fields, changes) })\r\n };\r\n\r\n if (stateRef) stateRef.current = formState;\r\n\r\n return formState;\r\n }, [state.fields]);\r\n\r\n useEffect(() => {\r\n if (onInit) {\r\n const _handler = (_c: void | PartialForm<T>) => _dispatchChanges({ fields: _merge<IForm<T> & { [key: string]: GInputState; }>({}, state.fields, _c) });\r\n const changes = onInit(formState);\r\n changes instanceof Promise ? changes.then(_handler) : _handler(changes);\r\n }\r\n\r\n const dipatchers: Record<string, Record<string, (changes: Partial<GInputState>) => void>> = {};\r\n \r\n if (__DEBUG__) {\r\n console.log('checking for initial values');\r\n }\r\n\r\n Object.values(state.fields).forEach(field => {\r\n dipatchers[field.formKey] = {\r\n dispatchChanges: (changes: Partial<GInputState>) => _dispatchChanges(changes, field.formKey)\r\n };\r\n\r\n //we dont want to apply validation on empty fields so skip it.\r\n if (!field.value) return;\r\n\r\n if (__DEBUG__) {\r\n console.log(`found input '${field.formKey}', applying validation(s)`);\r\n }\r\n /**\r\n * We have to manually check for validations (checkValidty() will not result with validty.tooShort = true).\r\n * If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.\r\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute\r\n */\r\n _viHandler(field);\r\n });\r\n _dispatchChanges({fields: _merge(dipatchers, state.fields)});\r\n }, []);\r\n\r\n const formComponent = useMemo(() => {\r\n const formChildren = typeof children === 'function' ? children(formState) : children;\r\n\r\n return <El {...rest} ref={ref}>\r\n {formChildren}\r\n </El>;\r\n }, [formState, children]);\r\n\r\n return (\r\n <GFormContextProvider value={values} key={key}>\r\n {\r\n state.loading\r\n ?\r\n loader\r\n :\r\n formComponent\r\n }\r\n </GFormContextProvider>\r\n );\r\n });\r\n})();","import React, { forwardRef, useEffect, useMemo } from 'react';\r\nimport { TextInput } from 'react-native';\r\n\r\nimport { useGenericFormContext } from \"../context\";\r\nimport { _debounce } from '../helpers';\r\nimport type { GInputState, RNGInputProps } from '.';\r\n\r\nexport const RNGInput = forwardRef<any, RNGInputProps>(({ formKey, element, type, validatorKey, fetch, fetchDeps = [], defaultValue, value, debounce = 300, ...rest }, ref) => {\r\n const { state: { fields }, _updateInputHandler, _dispatchChanges, _viHandler, _createInputChecker } = useGenericFormContext();\r\n const inputState = fields[formKey];\r\n\r\n const _element = useMemo(() => {\r\n const value = inputState.value || '';\r\n\r\n const _props = {\r\n ...rest,\r\n value,\r\n inputMode: type,\r\n ref\r\n };\r\n\r\n _props.onEndEditing = (e) => {\r\n _viHandler(inputState);\r\n rest.onEndEditing && rest.onEndEditing(e);\r\n };\r\n _props.onChangeText = (e) => {\r\n _updateInputHandler(formKey, undefined, {value: e});\r\n rest.onChangeText && rest.onChangeText(e);\r\n };\r\n\r\n if (element) {\r\n return (element as (input: GInputState, props: any) => JSX.Element)(inputState, _props);\r\n }\r\n\r\n return <TextInput {..._props}/>;\r\n }, [inputState, element]);\r\n\r\n const _fetchDeps = useMemo(() => fetchDeps.map(key => fields[key].value), [fields]);\r\n\r\n useEffect(() => {\r\n inputState.checkValidity = () => {\r\n const result = _createInputChecker(inputState);\r\n _dispatchChanges(inputState, formKey);\r\n return result;\r\n };\r\n inputState.dispatchChanges = (changes: Partial<GInputState>) => _dispatchChanges(changes, formKey);\r\n _dispatchChanges(inputState, formKey);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (fetch) {\r\n _debounce(debounce, `${inputState.gid}-fetch`).then(() => {\r\n const res = fetch(inputState, fields);\r\n res instanceof Promise ? res.then((state) => state && _dispatchChanges(state, formKey)) : res && _dispatchChanges(res, formKey);\r\n });\r\n }\r\n }, _fetchDeps);\r\n\r\n return _element;\r\n});"],"names":["isObject","o","Array","isArray","defaultFieldProps","text","value","checkbox","number","typeValueDict","generateId","Date","toString","Math","random","substring","_findInputs","root","total","_root$props","_root$props2","forEach","element","props","formKey","push","children","_findValidityKey","validity","key","_toURLSearchParams","options","data","exclude","include","transform","_this$key","this","toRawData","_this$key2","set","URLSearchParams","_debounce","timeout","id","Promise","resolve","_this$id","timerId","clearTimeout","setTimeout","bind","_checkResult","handlerResult","RegExp","test","_merge","target","nodes","length","next","shift","useForm","validators","optimized","initialValues","useMemo","_buildFormInitialValues","rows","fields","row","config","required","max","maxLength","min","minLength","step","pattern","type","defaultValue","checked","defaultChecked","debounce","validatorKey","inputValue","dirty","touched","gid","Object","keys","state","loading","setState","useState","_viHandler","input","e","document","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","checkValidity","_checkInputManually","_dispatchChanges","setCustomValidity","validityKey","_validateInput","v","error","errorText","valueMissing","tooShort","tooLong","patternMismatch","rangeUnderflow","Number","rangeOverflow","setValidity","inputValidator","__validateInput","_updateInput","changes","prev","index","constraintHandlers","result","handlers","asyncHandlers","then","async","validateAsync","_updateInputHandler","unknown","_extractValue","hasOwn","_createInputChecker","gFormContext","createContext","GFormContextProvider","Provider","RNGForm","forwardRef","loader","React","createElement","stateRef","onInit","el","El","rest","ref","values","i","formState","_isFormValid","f","_checkIfFormIsValid","isValid","isInvalid","_toRawData","_fields$key","_fields$key2","toURLSearchParams","setLoading","p","dispatchChanges","current","useEffect","_handler","_c","dipatchers","field","formComponent","formChildren","_extends","RNGInput","fetch","fetchDeps","t","u","useContext","inputState","_element","_props","inputMode","onEndEditing","onChangeText","undefined","TextInput","_fetchDeps","map","res"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/esm/extends";import t from"@babel/runtime/helpers/esm/objectSpread2";import n from"@babel/runtime/helpers/esm/objectWithoutProperties";import r,{useMemo as o,useState as s,forwardRef as a,useEffect as i}from"react";import{_ as c,a as l,b as f,c as
|
|
1
|
+
import e from"@babel/runtime/helpers/esm/extends";import t from"@babel/runtime/helpers/esm/objectSpread2";import n from"@babel/runtime/helpers/esm/objectWithoutProperties";import r,{useMemo as o,useState as s,forwardRef as a,useEffect as i}from"react";import{_ as c,a as l,b as f,c as d,d as u,e as m,f as p,g as h,h as b,G as g}from"./shared.production.js";const v=["loader","stateRef","children","validators","onInit","el"],y=a(((a,y)=>{let{loader:_=r.createElement("div",null,"loading"),stateRef:k,children:H,validators:I,onInit:L,el:C}=a,M=n(a,v);const T=((e,n={},r=!1)=>{const a=o((()=>c("function"==typeof e?e({}):e)),[]),[i,m]=s(a.state),p=(e,t)=>{if(!e)return;const n=t&&t.target;if("undefined"!=typeof document&&(n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement||n instanceof HTMLSelectElement)){if(e.checkValidity||(e.checkValidity=()=>n.checkValidity()),!e.dirty&&e.value)return h(e),void v(e,e.formKey);n.setCustomValidity("");const t=l(n.validity);b(e,t,(e=>n.setCustomValidity(e))),!t&&e.error&&n.setCustomValidity(e.errorText||"error"),v(e,e.formKey)}else e.checkValidity=()=>h(e),e.checkValidity(),v(e,e.formKey)},h=e=>{let t=l({valueMissing:e.required&&!e.value||!1,tooShort:e.minLength&&e.value.toString().length<e.minLength||!1,tooLong:e.maxLength&&e.value.toString().length>e.maxLength||!1,patternMismatch:e.pattern&&f(e.pattern,e.value)||!1,rangeUnderflow:e.min&&Number(e.value)<Number(e.min)||!1,rangeOverflow:e.max&&Number(e.value)>Number(e.max)||!1});return!t&&e.error&&(t="customError"),b(e,t),!e.error},b=(e,t,r)=>{const o=n[e.validatorKey||e.formKey]||n["*"];o&&y(e,o,t,r),e.touched=!0},g=(e,t)=>{const n=i.fields[e];return n.value=t,n.dirty=!0,n},v=(e,n)=>m((r=>n?t(t({},r),{},{fields:t(t({},r.fields),{},{[n]:t(t({},r.fields[n]),e)})}):t(t({},r),e))),y=(e,t,n,r)=>{for(const r in t.constraintHandlers){const o=t.constraintHandlers[r](e,n);if(e.error=f(o,e.value),e.error)return}for(const n in t.handlers){const r=t.handlers[n](e,i.fields);if(e.error=f(r,e.value),e.error)return}e.errorText="",t.asyncHandlers.length&&(e.error=!0,u(e.debounce||300,`${e.gid}-async`).then((()=>{(async()=>{for(const n in t.asyncHandlers){const r=await t.asyncHandlers[n](e,i.fields);if(e.error=f(r,e.value),e.error)break}e.error||(e.errorText=""),v({error:e.error,errorText:e.errorText},e.formKey),r&&r(e.errorText)})()})))};return{state:i,t:(e,t,n)=>{const r=d(t,n),o=g(e,r);p(o,t)},o:p,i:v,optimized:r,key:a.key,l:h}})(H,I),{state:j,i:w,key:x,o:E}=T,N=o((()=>{const e=m(j.fields),n=t(t({},j.fields),{},{isValid:e,isInvalid:!e,loading:j.loading,toRawData:e=>p(j.fields,e),toURLSearchParams:h,checkValidity:()=>{for(const e in j.fields)if(!j.fields[e].checkValidity())return!1;return!0},setLoading:e=>w({loading:"function"==typeof e?e(j.loading):e}),dispatchChanges:e=>w({fields:b({},j.fields,e)})});return k&&(k.current=n),n}),[j.fields]);i((()=>{if(L){const e=e=>w({fields:b({},j.fields,e)}),t=L(N);t instanceof Promise?t.then(e):e(t)}const e={};Object.values(j.fields).forEach((t=>{e[t.formKey]={dispatchChanges:e=>w(e,t.formKey)},t.value&&E(t)})),w({fields:b(e,j.fields)})}),[]);const R=o((()=>{const t="function"==typeof H?H(N):H;return r.createElement(C,e({},M,{ref:y}),t)}),[N,H]);return r.createElement(g,{value:T,key:x},j.loading?_:R)}));export{y as RNGForm};
|
|
2
2
|
//# sourceMappingURL=RNGForm.production.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RNGForm.production.js","sources":["../../../src/useForm.ts","../../../src/RNGForm.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\r\n\r\nimport { _buildFormInitialValues, _findValidityKey, _checkResult, _extractValue, _debounce } from \"./helpers\";\r\nimport { GValidator, type GInputValidator, type GValidators } from \"./validations\";\r\nimport type { GInputState } from \"./fields\";\r\nimport type { GFocusEvent, GInvalidEvent, GChangeEvent, GFormEvent, GDOMElement } from \"./form\";\r\nimport type { GFormState, InitialState } from \"./state\";\r\nimport { handlersMap, validityMap } from \"./validations/GValidator\";\r\n\r\nexport const useForm = <T>(children?: JSX.Element | JSX.Element[] | ((state: GFormState<T>) => JSX.Element | JSX.Element[]), validators: GValidators<T> = {}, optimized = false) => {\r\n // eslint-disable-next-line prefer-const\r\n let _dispatchChanges: (changes: Partial<InitialState<T>> | Partial<GInputState>, key?: string) => void;\r\n\r\n const initialValues = useMemo(() => {\r\n const values = _buildFormInitialValues<T>(typeof children === 'function' ? children({} as GFormState<T>) : children, _dispatchChanges);\r\n if (__DEV__) {\r\n Object.keys(values.state.fields).forEach(key => {\r\n const input = values.state.fields[key];\r\n const validator = validators[key];\r\n if (validator instanceof GValidator) {\r\n const validityKeys = validator.track?.filter(key => validityMap[key]);\r\n\r\n validityKeys?.forEach(vKey => {\r\n if (typeof input[validityMap[vKey]] === 'undefined') {\r\n console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${vKey}' but the input hasn't described the constraint '${validityMap[vKey]}'.\\nadd '${validityMap[vKey]}' to the input props.\\nexample:\\n<GInput formKey='${input.formKey}' ${validityMap[vKey]}={...} />`);\r\n }\r\n });\r\n\r\n Object.entries(validityMap).forEach(([validityKey, constraint]) => {\r\n if (typeof input[constraint] !== 'undefined' && !validator.track?.some(trackKey => validityKey === trackKey)) {\r\n console.warn(`[Missing Validator] - the input '${input.formKey}' has described the constraint '${constraint}' but the input hasn't registered a validator to handle it.\\nregister a handler '${handlersMap[constraint]}' for the input validator to handle the '${validityKey}' violation.\\nexample:\\ncosnt validators = {\\n\\t${input.formKey}: new GValidator().${handlersMap[constraint]}(...)\\n}`);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n return values;\r\n }, []);\r\n const [state, setState] = useState(initialValues.state);\r\n\r\n /**\r\n * handler for validating a form input\r\n * @param input the input to be validated\r\n * @param e the event object\r\n */\r\n const _viHandler = (input: GInputState, e?: GFocusEvent<GDOMElement | HTMLFormElement> | GInvalidEvent<GDOMElement | HTMLFormElement> | GFormEvent<GDOMElement | HTMLFormElement> | GFormEvent): void => {\r\n if (!input) return;\r\n const element = e?.target;\r\n\r\n if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {\r\n if (!input.checkValidity) input.checkValidity = () => element.checkValidity();\r\n element.setCustomValidity(''); //reset any previous error (custom)\r\n\r\n const validityKey = _findValidityKey(element.validity);\r\n _validateInput(input, validityKey, (v: string) => element.setCustomValidity(v));\r\n\r\n if (!validityKey && input.error) {\r\n element.setCustomValidity(input.errorText || 'error');\r\n }\r\n\r\n _dispatchChanges(input, input.formKey);\r\n } else {\r\n if (__DEBUG__) {\r\n console.log('[validateInputHandler] -', `the input '${input.formKey}' is not a native web element\\nevent:`, e);\r\n }\r\n\r\n //fallback - validate the input for constraint validation manually\r\n input.checkValidity = () => _createInputChecker(input);\r\n input.checkValidity();\r\n\r\n _dispatchChanges(input, input.formKey);\r\n }\r\n };\r\n\r\n const _createInputChecker = (input: GInputState) => {\r\n let validityKey = _findValidityKey({\r\n valueMissing: input.required && !input.value || false,\r\n tooShort: input.minLength && input.value.toString().length < input.minLength || false,\r\n tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,\r\n patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,\r\n rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,\r\n rangeOverflow: input.max && Number(input.value) > Number(input.max) || false\r\n });\r\n\r\n if (!validityKey && input.error) {\r\n validityKey = 'customError';\r\n }\r\n _validateInput(input, validityKey);\r\n return !input.error;\r\n };\r\n\r\n /**\r\n * handler for updating and validating a form input\r\n * @param key the key used to identify the input (`formKey`)\r\n * @param e the event object\r\n */\r\n const _updateInputHandler = (key: string, e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: { value: unknown } | string | number): void => {\r\n const value = _extractValue(e, unknown);\r\n const input = _updateInput(key, value);\r\n\r\n _viHandler(input, e);\r\n };\r\n\r\n /**\r\n * Validates the input and updates the state with the result\r\n * @param input the input to be validated\r\n * @param validityKey the `Constraint Validation` key\r\n */\r\n const _validateInput = (input: GInputState, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];\r\n if (__DEBUG__) {\r\n console.log('[validateInput] -', 'validating input:', input.formKey, `(${validityKey ? validityKey : 'custom'})`);\r\n }\r\n\r\n inputValidator && __validateInput(input, inputValidator, validityKey, setValidity);\r\n input.touched = true;\r\n };\r\n\r\n /**\r\n * update the input state.\r\n * @param key the key used to identify the input (`formKey`)\r\n * @param value the new value\r\n */\r\n const _updateInput = <V>(key: string, value: GInputState<V>['value']) => {\r\n const input = state.fields[key];\r\n input.value = value;\r\n input.dirty = true;\r\n return input;\r\n };\r\n\r\n _dispatchChanges = (changes: Partial<InitialState<T>> | Partial<GInputState>, key?: string) => setState(prev => {\r\n if (key) {\r\n return { ...prev, fields: { ...prev.fields, [key]: { ...prev.fields[key], ...changes } } };\r\n }\r\n return { ...prev, ...changes };\r\n });\r\n\r\n /**\r\n * @internal\r\n */\r\n const __validateInput = (input: GInputState, inputValidator: GInputValidator<T>, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with handlers:`, inputValidator.handlers);\r\n }\r\n\r\n for (const index in inputValidator.constraintHandlers) {\r\n const result = inputValidator.constraintHandlers[index](input, validityKey);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for constraint handler (${index}):\\n`, inputValidator.constraintHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n for (const index in inputValidator.handlers) {\r\n const result = inputValidator.handlers[index](input, state.fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom handler (${index}):\\n`, inputValidator.handlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n input.errorText = '';\r\n\r\n if (inputValidator.asyncHandlers.length) {\r\n input.error = true;\r\n _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {\r\n const validateAsync = async () => {\r\n for (const index in inputValidator.asyncHandlers) {\r\n const result = await inputValidator.asyncHandlers[index](input, state.fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom async handler (${index}):\\n`, inputValidator.asyncHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) break;\r\n }\r\n if (!input.error) input.errorText = '';\r\n\r\n _dispatchChanges({ error: input.error, errorText: input.errorText }, input.formKey);\r\n setValidity?.(input.errorText);\r\n };\r\n\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with async handlers:`, inputValidator.asyncHandlers);\r\n }\r\n validateAsync();\r\n });\r\n }\r\n\r\n };\r\n\r\n return { state, _updateInputHandler, _viHandler, _dispatchChanges, optimized, key: initialValues.key, _createInputChecker };\r\n};","import React, { useMemo, useEffect, forwardRef } from \"react\";\r\nimport type { ReactNode, MutableRefObject, FC } from \"react\";\r\n\r\nimport { useForm } from \"./useForm\";\r\nimport { _checkIfFormIsValid, _toRawData, _toURLSearchParams, _merge } from \"./helpers\";\r\nimport { GFormContextProvider } from \"./context\";\r\nimport type { RNGFormState, ToRawDataOptions } from \"./state\";\r\nimport type { GValidators } from \"./validations\";\r\nimport type { IForm, PartialForm } from \"./form\";\r\nimport type { GInputState } from \"./fields\";\r\n\r\nexport type RNGFormProps<T> = Omit<any, 'children'> & {\r\n children?: ReactNode | ReactNode[] | ((state: RNGFormState<T>) => ReactNode | ReactNode[]);\r\n /** @param loader - a component to display while loading (optional). */\r\n loader?: ReactNode;\r\n /** @param stateRef - pass a ref which will points to the current state of the form (optional). */\r\n stateRef?: MutableRefObject<RNGFormState<T> | undefined>;\r\n /** @param validators - an object for handling validations (optional). */\r\n validators?: GValidators<T>;\r\n /** @param onInit - execute a handler once the form has initialized (optional). */\r\n onInit?: (state: RNGFormState<T>) => void | PartialForm<T> | Promise<void | PartialForm<T>>;\r\n el: FC<any>;\r\n};\r\n\r\n/**\r\n * build dynamic forms with validations.\r\n * @link Docs - https://gform-react.onrender.com\r\n * @link Npm - https://www.npmjs.com/package/gform-react\r\n */\r\nexport const RNGForm: <T extends any>(props: RNGFormProps<T>) => ReturnType<FC<RNGFormProps<T>>> = (<T extends any>() => {\r\n return forwardRef<any, RNGFormProps<T>>(({\r\n loader = <div>loading</div>,\r\n stateRef,\r\n children,\r\n validators,\r\n onInit,\r\n el: El,\r\n ...rest\r\n }, ref) => {\r\n const values = useForm<T>(children as JSX.Element | JSX.Element[], validators);\r\n const { state, _dispatchChanges, key } = values;\r\n\r\n const formState = useMemo(() => {\r\n const _isFormValid = _checkIfFormIsValid(state.fields);\r\n const formState: RNGFormState<T> = {\r\n ...state.fields,\r\n isValid: _isFormValid,\r\n isInvalid: !_isFormValid,\r\n loading: state.loading,\r\n toRawData: (options?: ToRawDataOptions<T>) => _toRawData(state.fields, options),\r\n toURLSearchParams: _toURLSearchParams,\r\n checkValidity: () => {\r\n for (const i in state.fields) {\r\n const valid = state.fields[i].checkValidity();\r\n if (!valid) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n },\r\n setLoading: (p) => _dispatchChanges({ loading: typeof p === 'function' ? p(state.loading) : p }),\r\n dispatchChanges: (changes: PartialForm<T> & { [key: string]: Partial<GInputState<any>> }) => _dispatchChanges({ fields: _merge<IForm<T> & { [key: string]: GInputState; }>({}, state.fields, changes) })\r\n };\r\n\r\n if (stateRef) stateRef.current = formState;\r\n\r\n return formState;\r\n }, [state.fields]);\r\n\r\n useEffect(() => {\r\n if (onInit) {\r\n const _handler = (_c: void | PartialForm<T>) => _dispatchChanges({ fields: _merge<IForm<T> & { [key: string]: GInputState; }>({}, state.fields, _c) });\r\n const changes = onInit(formState);\r\n changes instanceof Promise ? changes.then(_handler) : _handler(changes);\r\n }\r\n }, []);\r\n\r\n const formComponent = useMemo(() => {\r\n const formChildren = typeof children === 'function' ? children(formState) : children;\r\n\r\n return <El {...rest} ref={ref}>\r\n {formChildren}\r\n </El>;\r\n }, [formState, children]);\r\n\r\n return (\r\n <GFormContextProvider value={values} key={key}>\r\n {\r\n state.loading\r\n ?\r\n loader\r\n :\r\n formComponent\r\n }\r\n </GFormContextProvider>\r\n );\r\n });\r\n})();"],"names":["RNGForm","forwardRef","_ref","ref","loader","React","createElement","stateRef","children","validators","onInit","el","El","rest","_objectWithoutProperties","_excluded","values","useForm","optimized","_dispatchChanges","initialValues","useMemo","_buildFormInitialValues","state","setState","useState","_viHandler","input","e","element","target","document","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","checkValidity","setCustomValidity","validityKey","_findValidityKey","validity","_validateInput","v","error","errorText","formKey","_createInputChecker","valueMissing","required","value","tooShort","minLength","toString","length","tooLong","maxLength","patternMismatch","pattern","_checkResult","rangeUnderflow","min","Number","rangeOverflow","max","setValidity","inputValidator","validatorKey","__validateInput","touched","_updateInput","key","fields","dirty","changes","prev","_objectSpread","index","constraintHandlers","result","handlers","asyncHandlers","_debounce","debounce","gid","then","async","validateAsync","_updateInputHandler","unknown","_extractValue","i","formState","_isFormValid","_checkIfFormIsValid","isValid","isInvalid","loading","toRawData","options","_toRawData","toURLSearchParams","_toURLSearchParams","setLoading","p","dispatchChanges","_merge","current","useEffect","_handler","_c","Promise","formComponent","formChildren","_extends","GFormContextProvider"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RNGForm.production.js","sources":["../../../src/useForm.ts","../../../src/RNGForm.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\r\n\r\nimport { _buildFormInitialValues, _findValidityKey, _checkResult, _extractValue, _debounce } from \"./helpers\";\r\nimport { GValidator, type GInputValidator, type GValidators } from \"./validations\";\r\nimport type { GInputState } from \"./fields\";\r\nimport type { GFocusEvent, GInvalidEvent, GChangeEvent, GFormEvent, GDOMElement } from \"./form\";\r\nimport type { GFormState, InitialState } from \"./state\";\r\nimport { handlersMap, validityMap } from \"./validations/GValidator\";\r\n\r\nexport const useForm = <T>(children?: JSX.Element | JSX.Element[] | ((state: GFormState<T>) => JSX.Element | JSX.Element[]), validators: GValidators<T> = {}, optimized = false) => {\r\n const initialValues = useMemo(() => {\r\n const values = _buildFormInitialValues<T>(typeof children === 'function' ? children({} as GFormState<T>) : children);\r\n if (__DEV__) {\r\n Object.keys(values.state.fields).forEach(key => {\r\n const input = values.state.fields[key];\r\n const validator = validators[key];\r\n if (validator instanceof GValidator) {\r\n const validityKeys = validator.track?.filter(key => validityMap[key]);\r\n\r\n validityKeys?.forEach(vKey => {\r\n if (typeof input[validityMap[vKey]] === 'undefined') {\r\n console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${vKey}' but the input hasn't described the constraint '${validityMap[vKey]}'.\\nadd '${validityMap[vKey]}' to the input props.\\nexample:\\n<GInput formKey='${input.formKey}' ${validityMap[vKey]}={...} />\\n\\nor either remove '.${handlersMap[validityMap[vKey]]}(...)' validation`);\r\n }\r\n });\r\n\r\n Object.entries(validityMap).forEach(([validityKey, constraint]) => {\r\n if (typeof input[constraint] !== 'undefined' && !validator.track?.some(trackKey => validityKey === trackKey)) {\r\n console.warn(`[Missing Validator] - the input '${input.formKey}' has described the constraint '${constraint}' but the input hasn't registered a validator to handle it.\\nregister a handler '${handlersMap[constraint]}' for the input validator to handle the '${validityKey}' violation.\\nexample:\\ncosnt validators = {\\n\\t${input.formKey}: new GValidator().${handlersMap[constraint]}(...)\\n}`);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n return values;\r\n }, []);\r\n\r\n const [state, setState] = useState(initialValues.state);\r\n\r\n /**\r\n * handler for validating a form input\r\n * @param input the input to be validated\r\n * @param e the event object\r\n */\r\n const _viHandler = (input: GInputState, e?: GFocusEvent<GDOMElement | HTMLFormElement> | GInvalidEvent<GDOMElement | HTMLFormElement> | GFormEvent<GDOMElement | HTMLFormElement> | GFormEvent): void => {\r\n if (!input) return;\r\n const element = e && e.target;\r\n\r\n if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {\r\n if (!input.checkValidity) input.checkValidity = () => element.checkValidity();\r\n \r\n //if the field has initial value\r\n if (!input.dirty && input.value) {\r\n /**\r\n * for inputs with initial value we have to manually check for validations.\r\n * validity.tooShort is false even though initial value is smaller than minLength, because its required to be filled in by user (native dirty flag is true).\r\n * it only works for validity.valueMissing.\r\n * If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.\r\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute\r\n */\r\n _checkInputManually(input);\r\n _dispatchChanges(input, input.formKey);\r\n return;\r\n }\r\n element.setCustomValidity(''); //reset any previous error (custom)\r\n\r\n const validityKey = _findValidityKey(element.validity);\r\n _validateInput(input, validityKey, (v: string) => element.setCustomValidity(v));\r\n\r\n if (!validityKey && input.error) {\r\n element.setCustomValidity(input.errorText || 'error');\r\n }\r\n\r\n _dispatchChanges(input, input.formKey);\r\n } else {\r\n if (__DEBUG__) {\r\n console.log('[validateInputHandler] -', `the input '${input.formKey}' is not a native web element\\nevent:`, e);\r\n }\r\n\r\n //fallback - validate the input for validations manually\r\n input.checkValidity = () => _checkInputManually(input);\r\n input.checkValidity();\r\n\r\n _dispatchChanges(input, input.formKey);\r\n }\r\n };\r\n\r\n const _checkInputManually = (input: GInputState) => {\r\n let validityKey = _findValidityKey({\r\n valueMissing: input.required && !input.value || false,\r\n tooShort: input.minLength && input.value.toString().length < input.minLength || false,\r\n tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,\r\n patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,\r\n rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,\r\n rangeOverflow: input.max && Number(input.value) > Number(input.max) || false\r\n });\r\n\r\n if (!validityKey && input.error) {\r\n validityKey = 'customError';\r\n }\r\n _validateInput(input, validityKey);\r\n return !input.error;\r\n };\r\n\r\n /**\r\n * handler for updating and validating a form input\r\n * @param key the key used to identify the input (`formKey`)\r\n * @param e the event object\r\n */\r\n const _updateInputHandler = (key: string, e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: { value: unknown } | string | number): void => {\r\n const value = _extractValue(e, unknown);\r\n const input = _updateInput(key, value);\r\n\r\n _viHandler(input, e);\r\n };\r\n\r\n /**\r\n * Validates the input and updates the state with the result\r\n * @param input the input to be validated\r\n * @param validityKey the `Constraint Validation` key\r\n */\r\n const _validateInput = (input: GInputState, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];\r\n if (__DEBUG__) {\r\n console.log('[validateInput] -', 'validating input:', input.formKey, `(${validityKey ? validityKey : 'custom'})`);\r\n }\r\n\r\n inputValidator && __validateInput(input, inputValidator, validityKey, setValidity);\r\n input.touched = true;\r\n };\r\n\r\n /**\r\n * update the input state.\r\n * @param key the key used to identify the input (`formKey`)\r\n * @param value the new value\r\n */\r\n const _updateInput = <V>(key: string, value: GInputState<V>['value']) => {\r\n const input = state.fields[key];\r\n input.value = value;\r\n input.dirty = true;\r\n return input;\r\n };\r\n\r\n const _dispatchChanges = (changes: Partial<InitialState<T>> | Partial<GInputState>, key?: string) => setState(prev => {\r\n if (key) {\r\n return { ...prev, fields: { ...prev.fields, [key]: { ...prev.fields[key], ...changes } } };\r\n }\r\n return { ...prev, ...changes };\r\n });\r\n\r\n /**\r\n * @internal\r\n */\r\n const __validateInput = (input: GInputState, inputValidator: GInputValidator<T>, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with handlers:`, inputValidator.handlers);\r\n }\r\n\r\n for (const index in inputValidator.constraintHandlers) {\r\n const result = inputValidator.constraintHandlers[index](input, validityKey);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for constraint handler (${index}):\\n`, inputValidator.constraintHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n for (const index in inputValidator.handlers) {\r\n const result = inputValidator.handlers[index](input, state.fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom handler (${index}):\\n`, inputValidator.handlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n input.errorText = '';\r\n\r\n if (inputValidator.asyncHandlers.length) {\r\n input.error = true;\r\n _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {\r\n const validateAsync = async () => {\r\n for (const index in inputValidator.asyncHandlers) {\r\n const result = await inputValidator.asyncHandlers[index](input, state.fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom async handler (${index}):\\n`, inputValidator.asyncHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) break;\r\n }\r\n if (!input.error) input.errorText = '';\r\n\r\n _dispatchChanges({ error: input.error, errorText: input.errorText }, input.formKey);\r\n setValidity && setValidity(input.errorText);\r\n };\r\n\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with async handlers:`, inputValidator.asyncHandlers);\r\n }\r\n validateAsync();\r\n });\r\n }\r\n\r\n };\r\n\r\n return { state, _updateInputHandler, _viHandler, _dispatchChanges, optimized, key: initialValues.key, _createInputChecker: _checkInputManually };\r\n};","import React, { useMemo, useEffect, forwardRef } from \"react\";\r\nimport type { ReactNode, MutableRefObject, FC } from \"react\";\r\n\r\nimport { useForm } from \"./useForm\";\r\nimport { _checkIfFormIsValid, _toRawData, _toURLSearchParams, _merge } from \"./helpers\";\r\nimport { GFormContextProvider } from \"./context\";\r\nimport type { RNGFormState, ToRawDataOptions } from \"./state\";\r\nimport type { GValidators } from \"./validations\";\r\nimport type { IForm, PartialForm } from \"./form\";\r\nimport type { GInputState } from \"./fields\";\r\n\r\nexport type RNGFormProps<T> = Omit<any, 'children'> & {\r\n children?: ReactNode | ReactNode[] | ((state: RNGFormState<T>) => ReactNode | ReactNode[]);\r\n /** @param loader - a component to display while loading (optional). */\r\n loader?: ReactNode;\r\n /** @param stateRef - pass a ref which will points to the current state of the form (optional). */\r\n stateRef?: MutableRefObject<RNGFormState<T> | undefined>;\r\n /** @param validators - an object for handling validations (optional). */\r\n validators?: GValidators<T>;\r\n /** @param onInit - execute a handler once the form has initialized (optional). */\r\n onInit?: (state: RNGFormState<T>) => void | PartialForm<T> | Promise<void | PartialForm<T>>;\r\n el: FC<any>;\r\n};\r\n\r\n/**\r\n * build dynamic forms with validations.\r\n * @link Docs - https://gform-react.onrender.com\r\n * @link Npm - https://www.npmjs.com/package/gform-react\r\n */\r\nexport const RNGForm: <T extends any>(props: RNGFormProps<T>) => ReturnType<FC<RNGFormProps<T>>> = (<T extends any>() => {\r\n return forwardRef<any, RNGFormProps<T>>(({\r\n loader = <div>loading</div>,\r\n stateRef,\r\n children,\r\n validators,\r\n onInit,\r\n el: El,\r\n ...rest\r\n }, ref) => {\r\n const values = useForm<T>(children as JSX.Element | JSX.Element[], validators);\r\n const { state, _dispatchChanges, key, _viHandler } = values;\r\n\r\n const formState = useMemo(() => {\r\n const _isFormValid = _checkIfFormIsValid(state.fields);\r\n const formState: RNGFormState<T> = {\r\n ...state.fields,\r\n isValid: _isFormValid,\r\n isInvalid: !_isFormValid,\r\n loading: state.loading,\r\n toRawData: (options?: ToRawDataOptions<T>) => _toRawData(state.fields, options),\r\n toURLSearchParams: _toURLSearchParams,\r\n checkValidity: () => {\r\n for (const i in state.fields) {\r\n const valid = state.fields[i].checkValidity();\r\n if (!valid) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n },\r\n setLoading: (p) => _dispatchChanges({ loading: typeof p === 'function' ? p(state.loading) : p }),\r\n dispatchChanges: (changes: PartialForm<T> & { [key: string]: Partial<GInputState<any>> }) => _dispatchChanges({ fields: _merge<IForm<T> & { [key: string]: GInputState; }>({}, state.fields, changes) })\r\n };\r\n\r\n if (stateRef) stateRef.current = formState;\r\n\r\n return formState;\r\n }, [state.fields]);\r\n\r\n useEffect(() => {\r\n if (onInit) {\r\n const _handler = (_c: void | PartialForm<T>) => _dispatchChanges({ fields: _merge<IForm<T> & { [key: string]: GInputState; }>({}, state.fields, _c) });\r\n const changes = onInit(formState);\r\n changes instanceof Promise ? changes.then(_handler) : _handler(changes);\r\n }\r\n\r\n const dipatchers: Record<string, Record<string, (changes: Partial<GInputState>) => void>> = {};\r\n \r\n if (__DEBUG__) {\r\n console.log('checking for initial values');\r\n }\r\n\r\n Object.values(state.fields).forEach(field => {\r\n dipatchers[field.formKey] = {\r\n dispatchChanges: (changes: Partial<GInputState>) => _dispatchChanges(changes, field.formKey)\r\n };\r\n\r\n //we dont want to apply validation on empty fields so skip it.\r\n if (!field.value) return;\r\n\r\n if (__DEBUG__) {\r\n console.log(`found input '${field.formKey}', applying validation(s)`);\r\n }\r\n /**\r\n * We have to manually check for validations (checkValidty() will not result with validty.tooShort = true).\r\n * If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.\r\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute\r\n */\r\n _viHandler(field);\r\n });\r\n _dispatchChanges({fields: _merge(dipatchers, state.fields)});\r\n }, []);\r\n\r\n const formComponent = useMemo(() => {\r\n const formChildren = typeof children === 'function' ? children(formState) : children;\r\n\r\n return <El {...rest} ref={ref}>\r\n {formChildren}\r\n </El>;\r\n }, [formState, children]);\r\n\r\n return (\r\n <GFormContextProvider value={values} key={key}>\r\n {\r\n state.loading\r\n ?\r\n loader\r\n :\r\n formComponent\r\n }\r\n </GFormContextProvider>\r\n );\r\n });\r\n})();"],"names":["RNGForm","forwardRef","_ref","ref","loader","React","createElement","stateRef","children","validators","onInit","el","El","rest","_objectWithoutProperties","_excluded","values","useForm","optimized","initialValues","useMemo","_buildFormInitialValues","state","setState","useState","_viHandler","input","e","element","target","document","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","checkValidity","dirty","value","_checkInputManually","_dispatchChanges","formKey","setCustomValidity","validityKey","_findValidityKey","validity","_validateInput","v","error","errorText","valueMissing","required","tooShort","minLength","toString","length","tooLong","maxLength","patternMismatch","pattern","_checkResult","rangeUnderflow","min","Number","rangeOverflow","max","setValidity","inputValidator","validatorKey","__validateInput","touched","_updateInput","key","fields","changes","prev","_objectSpread","index","constraintHandlers","result","handlers","asyncHandlers","_debounce","debounce","gid","then","async","validateAsync","_updateInputHandler","unknown","_extractValue","_createInputChecker","i","o","formState","_isFormValid","_checkIfFormIsValid","isValid","isInvalid","loading","toRawData","options","_toRawData","toURLSearchParams","_toURLSearchParams","setLoading","p","dispatchChanges","_merge","current","useEffect","_handler","_c","Promise","dipatchers","Object","forEach","field","formComponent","formChildren","_extends","GFormContextProvider"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/esm/objectSpread2";import t from"@babel/runtime/helpers/esm/objectWithoutProperties";import r,{forwardRef as o,useMemo as a,useEffect as n}from"react";import{TextInput as s}from"react-native";import{u,d as c}from"./shared.production.js";const i=["formKey","element","type","validatorKey","fetch","fetchDeps","defaultValue","value","debounce"],l=o(((o,l)=>{let{formKey:p,element:m,type:d,validatorKey:f,fetch:h,fetchDeps:v=[],defaultValue:b,value:y,debounce:K=300}=o,_=t(o,i);const{state:{fields:j},t:C,o:D,u:H,i:I}=u(),P=j[p],V=a((()=>{const t=P.value||"",o=e(e({},_),{},{value:t,inputMode:d,ref:l});return o.onEndEditing=e=>{H(P),_.onEndEditing&&_.onEndEditing(e)},o.onChangeText=e=>{C(p,void 0,{value:e}),_.onChangeText&&_.onChangeText(e)},m?m(P,o):r.createElement(s,o)}),[P,m]),g=a((()=>v.map((e=>j[e].value))),[j]);return n((()=>{P.checkValidity=()=>{const e=I(P);return D(P,p),e},D(P,p)}),[]),n((()=>{h&&c(K,`${P.gid}-fetch`).then((()=>{const e=h(P,j);e instanceof Promise?e.then((e=>e&&D(e,p))):e&&D(e,p)}))}),g),V}));export{l as RNGInput};
|
|
1
|
+
import e from"@babel/runtime/helpers/esm/objectSpread2";import t from"@babel/runtime/helpers/esm/objectWithoutProperties";import r,{forwardRef as o,useMemo as a,useEffect as n}from"react";import{TextInput as s}from"react-native";import{u,d as c}from"./shared.production.js";const i=["formKey","element","type","validatorKey","fetch","fetchDeps","defaultValue","value","debounce"],l=o(((o,l)=>{let{formKey:p,element:m,type:d,validatorKey:f,fetch:h,fetchDeps:v=[],defaultValue:b,value:y,debounce:K=300}=o,_=t(o,i);const{state:{fields:j},t:C,o:D,u:H,i:I}=u(),P=j[p],V=a((()=>{const t=P.value||"",o=e(e({},_),{},{value:t,inputMode:d,ref:l});return o.onEndEditing=e=>{H(P),_.onEndEditing&&_.onEndEditing(e)},o.onChangeText=e=>{C(p,void 0,{value:e}),_.onChangeText&&_.onChangeText(e)},m?m(P,o):r.createElement(s,o)}),[P,m]),g=a((()=>v.map((e=>j[e].value))),[j]);return n((()=>{P.checkValidity=()=>{const e=I(P);return D(P,p),e},P.dispatchChanges=e=>D(e,p),D(P,p)}),[]),n((()=>{h&&c(K,`${P.gid}-fetch`).then((()=>{const e=h(P,j);e instanceof Promise?e.then((e=>e&&D(e,p))):e&&D(e,p)}))}),g),V}));export{l as RNGInput};
|
|
2
2
|
//# sourceMappingURL=RNGInput.production.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RNGInput.production.js","sources":["../../../src/fields/RNGInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo } from 'react';\r\nimport { TextInput } from 'react-native';\r\n\r\nimport { useGenericFormContext } from \"../context\";\r\nimport { _debounce } from '../helpers';\r\nimport type { GInputState, RNGInputProps } from '.';\r\n\r\nexport const RNGInput = forwardRef<any, RNGInputProps>(({ formKey, element, type, validatorKey, fetch, fetchDeps = [], defaultValue, value, debounce = 300, ...rest }, ref) => {\r\n const { state: { fields }, _updateInputHandler, _dispatchChanges, _viHandler, _createInputChecker } = useGenericFormContext();\r\n const inputState = fields[formKey];\r\n\r\n const _element = useMemo(() => {\r\n const value = inputState.value || '';\r\n\r\n const _props = {\r\n ...rest,\r\n value,\r\n inputMode: type,\r\n ref\r\n };\r\n\r\n _props.onEndEditing = (e) => {\r\n _viHandler(inputState);\r\n rest.onEndEditing && rest.onEndEditing(e);\r\n };\r\n _props.onChangeText = (e) => {\r\n _updateInputHandler(formKey, undefined, {value: e});\r\n rest.onChangeText && rest.onChangeText(e);\r\n };\r\n\r\n if (element) {\r\n return (element as (input: GInputState, props: any) => JSX.Element)(inputState, _props);\r\n }\r\n\r\n return <TextInput {..._props}/>;\r\n }, [inputState, element]);\r\n\r\n const _fetchDeps = useMemo(() => fetchDeps.map(key => fields[key].value), [fields]);\r\n\r\n useEffect(() => {\r\n inputState.checkValidity = () => {\r\n const result = _createInputChecker(inputState);\r\n _dispatchChanges(inputState, formKey);\r\n return result;\r\n };\r\n _dispatchChanges(inputState, formKey);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (fetch) {\r\n _debounce(debounce, `${inputState.gid}-fetch`).then(() => {\r\n const res = fetch(inputState, fields);\r\n res instanceof Promise ? res.then((state) => state && _dispatchChanges(state, formKey)) : res && _dispatchChanges(res, formKey);\r\n });\r\n }\r\n }, _fetchDeps);\r\n\r\n return _element;\r\n});"],"names":["RNGInput","forwardRef","_ref","ref","formKey","element","type","validatorKey","fetch","fetchDeps","defaultValue","value","debounce","rest","_objectWithoutProperties","_excluded","state","fields","t","_updateInputHandler","o","_dispatchChanges","u","_viHandler","i","_createInputChecker","useGenericFormContext","inputState","_element","useMemo","_props","_objectSpread","inputMode","onEndEditing","e","onChangeText","undefined","React","createElement","TextInput","_fetchDeps","map","key","useEffect","checkValidity","result","_debounce","gid","then","res","Promise"],"mappings":"4XAOaA,EAAWC,GAA+B,CAAAC,EAAgHC,KAAQ,IAAvHC,QAAEA,EAAOC,QAAEA,EAAOC,KAAEA,EAAIC,aAAEA,EAAYC,MAAEA,EAAKC,UAAEA,EAAY,GAAEC,aAAEA,EAAYC,MAAEA,EAAKC,SAAEA,EAAW,KAAcV,EAANW,EAAIC,EAAAZ,EAAAa,GAC/J,MAAQC,OAAOC,OAAEA,GAAQC,EAAEC,EAAmBC,EAAEC,EAAgBC,EAAEC,EAAUC,EAAEC,GAAwBC,IAChGC,EAAaV,EAAOb,GAEpBwB,EAAWC,GAAQ,KACrB,MAAMlB,EAAQgB,EAAWhB,OAAS,GAE5BmB,EAAMC,EAAAA,KACLlB,GAAI,GAAA,CACPF,QACAqB,UAAW1B,EACXH,QAYJ,OATA2B,EAAOG,aAAgBC,IACnBX,EAAWI,GACXd,EAAKoB,cAAgBpB,EAAKoB,aAAaC,EAAE,EAE7CJ,EAAOK,aAAgBD,IACnBf,EAAoBf,OAASgC,EAAW,CAACzB,MAAOuB,IAChDrB,EAAKsB,cAAgBtB,EAAKsB,aAAaD,EAAE,EAGzC7B,EACQA,EAA4DsB,EAAYG,GAG7EO,EAAAC,cAACC,EAAcT,EAAS,GAChC,CAACH,EAAYtB,IAEVmC,EAAaX,GAAQ,IAAMpB,EAAUgC,KAAIC,GAAOzB,EAAOyB,GAAK/B,SAAQ,CAACM,
|
|
1
|
+
{"version":3,"file":"RNGInput.production.js","sources":["../../../src/fields/RNGInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo } from 'react';\r\nimport { TextInput } from 'react-native';\r\n\r\nimport { useGenericFormContext } from \"../context\";\r\nimport { _debounce } from '../helpers';\r\nimport type { GInputState, RNGInputProps } from '.';\r\n\r\nexport const RNGInput = forwardRef<any, RNGInputProps>(({ formKey, element, type, validatorKey, fetch, fetchDeps = [], defaultValue, value, debounce = 300, ...rest }, ref) => {\r\n const { state: { fields }, _updateInputHandler, _dispatchChanges, _viHandler, _createInputChecker } = useGenericFormContext();\r\n const inputState = fields[formKey];\r\n\r\n const _element = useMemo(() => {\r\n const value = inputState.value || '';\r\n\r\n const _props = {\r\n ...rest,\r\n value,\r\n inputMode: type,\r\n ref\r\n };\r\n\r\n _props.onEndEditing = (e) => {\r\n _viHandler(inputState);\r\n rest.onEndEditing && rest.onEndEditing(e);\r\n };\r\n _props.onChangeText = (e) => {\r\n _updateInputHandler(formKey, undefined, {value: e});\r\n rest.onChangeText && rest.onChangeText(e);\r\n };\r\n\r\n if (element) {\r\n return (element as (input: GInputState, props: any) => JSX.Element)(inputState, _props);\r\n }\r\n\r\n return <TextInput {..._props}/>;\r\n }, [inputState, element]);\r\n\r\n const _fetchDeps = useMemo(() => fetchDeps.map(key => fields[key].value), [fields]);\r\n\r\n useEffect(() => {\r\n inputState.checkValidity = () => {\r\n const result = _createInputChecker(inputState);\r\n _dispatchChanges(inputState, formKey);\r\n return result;\r\n };\r\n inputState.dispatchChanges = (changes: Partial<GInputState>) => _dispatchChanges(changes, formKey);\r\n _dispatchChanges(inputState, formKey);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (fetch) {\r\n _debounce(debounce, `${inputState.gid}-fetch`).then(() => {\r\n const res = fetch(inputState, fields);\r\n res instanceof Promise ? res.then((state) => state && _dispatchChanges(state, formKey)) : res && _dispatchChanges(res, formKey);\r\n });\r\n }\r\n }, _fetchDeps);\r\n\r\n return _element;\r\n});"],"names":["RNGInput","forwardRef","_ref","ref","formKey","element","type","validatorKey","fetch","fetchDeps","defaultValue","value","debounce","rest","_objectWithoutProperties","_excluded","state","fields","t","_updateInputHandler","o","_dispatchChanges","u","_viHandler","i","_createInputChecker","useGenericFormContext","inputState","_element","useMemo","_props","_objectSpread","inputMode","onEndEditing","e","onChangeText","undefined","React","createElement","TextInput","_fetchDeps","map","key","useEffect","checkValidity","result","dispatchChanges","changes","_debounce","gid","then","res","Promise"],"mappings":"4XAOaA,EAAWC,GAA+B,CAAAC,EAAgHC,KAAQ,IAAvHC,QAAEA,EAAOC,QAAEA,EAAOC,KAAEA,EAAIC,aAAEA,EAAYC,MAAEA,EAAKC,UAAEA,EAAY,GAAEC,aAAEA,EAAYC,MAAEA,EAAKC,SAAEA,EAAW,KAAcV,EAANW,EAAIC,EAAAZ,EAAAa,GAC/J,MAAQC,OAAOC,OAAEA,GAAQC,EAAEC,EAAmBC,EAAEC,EAAgBC,EAAEC,EAAUC,EAAEC,GAAwBC,IAChGC,EAAaV,EAAOb,GAEpBwB,EAAWC,GAAQ,KACrB,MAAMlB,EAAQgB,EAAWhB,OAAS,GAE5BmB,EAAMC,EAAAA,KACLlB,GAAI,GAAA,CACPF,QACAqB,UAAW1B,EACXH,QAYJ,OATA2B,EAAOG,aAAgBC,IACnBX,EAAWI,GACXd,EAAKoB,cAAgBpB,EAAKoB,aAAaC,EAAE,EAE7CJ,EAAOK,aAAgBD,IACnBf,EAAoBf,OAASgC,EAAW,CAACzB,MAAOuB,IAChDrB,EAAKsB,cAAgBtB,EAAKsB,aAAaD,EAAE,EAGzC7B,EACQA,EAA4DsB,EAAYG,GAG7EO,EAAAC,cAACC,EAAcT,EAAS,GAChC,CAACH,EAAYtB,IAEVmC,EAAaX,GAAQ,IAAMpB,EAAUgC,KAAIC,GAAOzB,EAAOyB,GAAK/B,SAAQ,CAACM,IAqB3E,OAnBA0B,GAAU,KACNhB,EAAWiB,cAAgB,KACvB,MAAMC,EAASpB,EAAoBE,GAEnC,OADAN,EAAiBM,EAAYvB,GACtByC,CAAM,EAEjBlB,EAAWmB,gBAAmBC,GAAkC1B,EAAiB0B,EAAS3C,GAC1FiB,EAAiBM,EAAYvB,EAAQ,GACtC,IAEHuC,GAAU,KACFnC,GACAwC,EAAUpC,EAAW,GAAEe,EAAWsB,aAAaC,MAAK,KAChD,MAAMC,EAAM3C,EAAMmB,EAAYV,GAC9BkC,aAAeC,QAAUD,EAAID,MAAMlC,GAAUA,GAASK,EAAiBL,EAAOZ,KAAY+C,GAAO9B,EAAiB8B,EAAK/C,EAAQ,GAEvI,GACDoC,GAEIZ,CAAQ"}
|
|
@@ -22,7 +22,7 @@ const typeValueDict = {
|
|
|
22
22
|
number: 'valueAsNumber'
|
|
23
23
|
};
|
|
24
24
|
const generateId = () => (+new Date()).toString(36) + (1 - Math.random()).toString(36).substring(2, 16);
|
|
25
|
-
const _buildFormInitialValues = (rows = []
|
|
25
|
+
const _buildFormInitialValues = (rows = []) => {
|
|
26
26
|
const fields = {};
|
|
27
27
|
if (!Array.isArray(rows)) rows = [rows];
|
|
28
28
|
rows.forEach(row => {
|
|
@@ -65,7 +65,6 @@ const _buildFormInitialValues = (rows = [], _dispatchChanges) => {
|
|
|
65
65
|
debounce,
|
|
66
66
|
dirty: false,
|
|
67
67
|
touched: false,
|
|
68
|
-
dispatchChanges: changes => _dispatchChanges(changes),
|
|
69
68
|
gid: generateId()
|
|
70
69
|
};
|
|
71
70
|
Object.keys(fields[config.formKey]).forEach(key => {
|
|
@@ -288,8 +287,8 @@ class GValidator {
|
|
|
288
287
|
}
|
|
289
288
|
this._constraintHandlers.push((input, key) => {
|
|
290
289
|
{
|
|
291
|
-
if (validityKey && typeof input[validityMap[validityKey]] === 'undefined') {
|
|
292
|
-
console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${validityKey}' but the input hasn't described the constraint '${validityMap[validityKey]}'.\nadd '${validityMap[validityKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[validityKey]}={...}
|
|
290
|
+
if (validityKey && validityMap[validityKey] && typeof input[validityMap[validityKey]] === 'undefined') {
|
|
291
|
+
console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${validityKey}' but the input hasn't described the constraint '${validityMap[validityKey]}'.\nadd '${validityMap[validityKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[validityKey]}={...} />\n\nor either remove '.${handlersMap[validityMap[validityKey]]}(...)' validation`);
|
|
293
292
|
}
|
|
294
293
|
}
|
|
295
294
|
if (key === validityKey) {
|
|
@@ -303,9 +302,8 @@ class GValidator {
|
|
|
303
302
|
}
|
|
304
303
|
|
|
305
304
|
const useForm = (children, validators = {}, optimized = false) => {
|
|
306
|
-
let _dispatchChanges;
|
|
307
305
|
const initialValues = useMemo(() => {
|
|
308
|
-
const values = _buildFormInitialValues(typeof children === 'function' ? children({}) : children
|
|
306
|
+
const values = _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
|
|
309
307
|
{
|
|
310
308
|
Object.keys(values.state.fields).forEach(key => {
|
|
311
309
|
const input = values.state.fields[key];
|
|
@@ -315,7 +313,7 @@ const useForm = (children, validators = {}, optimized = false) => {
|
|
|
315
313
|
const validityKeys = (_validator$track = validator.track) === null || _validator$track === void 0 ? void 0 : _validator$track.filter(key => validityMap[key]);
|
|
316
314
|
validityKeys === null || validityKeys === void 0 || validityKeys.forEach(vKey => {
|
|
317
315
|
if (typeof input[validityMap[vKey]] === 'undefined') {
|
|
318
|
-
console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${vKey}' but the input hasn't described the constraint '${validityMap[vKey]}'.\nadd '${validityMap[vKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[vKey]}={...}
|
|
316
|
+
console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${vKey}' but the input hasn't described the constraint '${validityMap[vKey]}'.\nadd '${validityMap[vKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[vKey]}={...} />\n\nor either remove '.${handlersMap[validityMap[vKey]]}(...)' validation`);
|
|
319
317
|
}
|
|
320
318
|
});
|
|
321
319
|
Object.entries(validityMap).forEach(([validityKey, constraint]) => {
|
|
@@ -332,9 +330,14 @@ const useForm = (children, validators = {}, optimized = false) => {
|
|
|
332
330
|
const [state, setState] = useState(initialValues.state);
|
|
333
331
|
const _viHandler = (input, e) => {
|
|
334
332
|
if (!input) return;
|
|
335
|
-
const element = e
|
|
333
|
+
const element = e && e.target;
|
|
336
334
|
if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {
|
|
337
335
|
if (!input.checkValidity) input.checkValidity = () => element.checkValidity();
|
|
336
|
+
if (!input.dirty && input.value) {
|
|
337
|
+
_checkInputManually(input);
|
|
338
|
+
_dispatchChanges(input, input.formKey);
|
|
339
|
+
return;
|
|
340
|
+
}
|
|
338
341
|
element.setCustomValidity('');
|
|
339
342
|
const validityKey = _findValidityKey(element.validity);
|
|
340
343
|
_validateInput(input, validityKey, v => element.setCustomValidity(v));
|
|
@@ -343,12 +346,12 @@ const useForm = (children, validators = {}, optimized = false) => {
|
|
|
343
346
|
}
|
|
344
347
|
_dispatchChanges(input, input.formKey);
|
|
345
348
|
} else {
|
|
346
|
-
input.checkValidity = () =>
|
|
349
|
+
input.checkValidity = () => _checkInputManually(input);
|
|
347
350
|
input.checkValidity();
|
|
348
351
|
_dispatchChanges(input, input.formKey);
|
|
349
352
|
}
|
|
350
353
|
};
|
|
351
|
-
const
|
|
354
|
+
const _checkInputManually = input => {
|
|
352
355
|
let validityKey = _findValidityKey({
|
|
353
356
|
valueMissing: input.required && !input.value || false,
|
|
354
357
|
tooShort: input.minLength && input.value.toString().length < input.minLength || false,
|
|
@@ -379,7 +382,7 @@ const useForm = (children, validators = {}, optimized = false) => {
|
|
|
379
382
|
input.dirty = true;
|
|
380
383
|
return input;
|
|
381
384
|
};
|
|
382
|
-
_dispatchChanges = (changes, key) => setState(prev => {
|
|
385
|
+
const _dispatchChanges = (changes, key) => setState(prev => {
|
|
383
386
|
if (key) {
|
|
384
387
|
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
385
388
|
fields: _objectSpread(_objectSpread({}, prev.fields), {}, {
|
|
@@ -415,7 +418,7 @@ const useForm = (children, validators = {}, optimized = false) => {
|
|
|
415
418
|
error: input.error,
|
|
416
419
|
errorText: input.errorText
|
|
417
420
|
}, input.formKey);
|
|
418
|
-
setValidity
|
|
421
|
+
setValidity && setValidity(input.errorText);
|
|
419
422
|
};
|
|
420
423
|
validateAsync();
|
|
421
424
|
});
|
|
@@ -428,7 +431,7 @@ const useForm = (children, validators = {}, optimized = false) => {
|
|
|
428
431
|
_dispatchChanges,
|
|
429
432
|
optimized,
|
|
430
433
|
key: initialValues.key,
|
|
431
|
-
_createInputChecker
|
|
434
|
+
_createInputChecker: _checkInputManually
|
|
432
435
|
};
|
|
433
436
|
};
|
|
434
437
|
|
|
@@ -463,7 +466,8 @@ const RNGForm = (() => {
|
|
|
463
466
|
const {
|
|
464
467
|
state,
|
|
465
468
|
_dispatchChanges,
|
|
466
|
-
key
|
|
469
|
+
key,
|
|
470
|
+
_viHandler
|
|
467
471
|
} = values;
|
|
468
472
|
const formState = useMemo(() => {
|
|
469
473
|
const _isFormValid = _checkIfFormIsValid(state.fields);
|
|
@@ -500,6 +504,17 @@ const RNGForm = (() => {
|
|
|
500
504
|
const changes = onInit(formState);
|
|
501
505
|
changes instanceof Promise ? changes.then(_handler) : _handler(changes);
|
|
502
506
|
}
|
|
507
|
+
const dipatchers = {};
|
|
508
|
+
Object.values(state.fields).forEach(field => {
|
|
509
|
+
dipatchers[field.formKey] = {
|
|
510
|
+
dispatchChanges: changes => _dispatchChanges(changes, field.formKey)
|
|
511
|
+
};
|
|
512
|
+
if (!field.value) return;
|
|
513
|
+
_viHandler(field);
|
|
514
|
+
});
|
|
515
|
+
_dispatchChanges({
|
|
516
|
+
fields: _merge(dipatchers, state.fields)
|
|
517
|
+
});
|
|
503
518
|
}, []);
|
|
504
519
|
const formComponent = useMemo(() => {
|
|
505
520
|
const formChildren = typeof children === 'function' ? children(formState) : children;
|
|
@@ -567,6 +582,7 @@ const RNGInput = forwardRef((_ref, ref) => {
|
|
|
567
582
|
_dispatchChanges(inputState, formKey);
|
|
568
583
|
return result;
|
|
569
584
|
};
|
|
585
|
+
inputState.dispatchChanges = changes => _dispatchChanges(changes, formKey);
|
|
570
586
|
_dispatchChanges(inputState, formKey);
|
|
571
587
|
}, []);
|
|
572
588
|
useEffect(() => {
|