npm - @os-design/form - Versions diffs - 1.0.18 → 1.0.20 - Mend

@os-design/form 1.0.18 → 1.0.20

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.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -24,13 +24,8 @@ Let's assume that we want to build a form for creating blog posts. To create a f
 ```tsx
 import { useForm } from '@os-design/form';
-interface FormData {
-  title: string;
-  content: string;
-}
 const Form: React.FC = () => {
-  const { Field, form } = useForm<FormData>({
+  const { Field, form } = useForm({
     title: '',
     content: '',
   });
@@ -106,7 +101,7 @@ If the user entered incorrect values, the form should display errors. To support
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm<FormData>({
+  const { Field, form } = useForm({
     title: '',
     content: '',
   });
@@ -142,28 +137,22 @@ const Form: React.FC = () => {
 If you want to display an error message not next the input component (e.g. if an error is not related to the field), you can create a separate component and place it wherever you want.
 ```tsx
-interface FormData {
-  title: string;
-  content: string;
-  _error?: never; // Use any name that is not used by any field
-}
 // Component to display errors unrelated to any fields
 const Error: React.FC = () => {
-  const { useError } = useExistingForm<FormData>();
-  const error = useError('_error'); // You can use a path (e.g. `options.min`)
+  const { useError } = useExistingForm();
+  const error = useError('_error'); // Use any name that is not used by any field
   return error ? <Alert type='error'>{error}</Alert> : null;
 };
 const Form: React.FC = () => {
-  const { Field, form } = useForm<FormData>({
+  const { Field, form } = useForm({
     title: '',
     content: '',
   });
   const onSubmit = useCallback(() => {
     // Set the error
-    form.errors.set('_error', 'The server went on vacation 🌴');
+    form.errors.set<any>('_error', 'The server went on vacation 🌴');
     // Return only data (without the `_error` prop)
     console.log(form.values.getAll()); // { title: '', content: '' }
@@ -208,9 +197,15 @@ To pass the form to the child components, you have to:
 2. Use the `useExistingForm` hook in the child components.
 ```tsx
+interface FormData {
+  title: string;
+  content: string;
+}
 interface BaseFormProps {
   children: React.ReactNode;
 }
 const BaseForm: React.FC<BaseFormProps> = ({ children }) => {
   const { Field } = useExistingForm<FormData>();
@@ -268,7 +263,7 @@ Let's upgrade our form and allow the user to click on the `Save` button only if
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form, modified } = useForm<FormData>({
+  const { Field, form, modified } = useForm({
     title: 'Title',
     content: 'Content',
   });
@@ -297,7 +292,7 @@ If the form has many fields, it is better to send only the changed values to the
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form, modifiedFields } = useForm<FormData>({
+  const { Field, form, modifiedFields } = useForm({
     title: '',
     content: '',
   });
@@ -335,13 +330,8 @@ const ResetButton: React.FC<ButtonProps> = (props) => (
   </Button>
 );
-interface ProfileData {
-  name: string;
-  password: string;
-}
 const Form: React.FC = () => {
-  const { Field, form } = useForm<ProfileData>({
+  const { Field, form } = useForm({
     name: 'Kate',
     password: 'secret',
   });
@@ -380,7 +370,7 @@ To reset the entire form (e.g. when the modal with the form is closed), call `fo
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm<FormData>({
+  const { Field, form } = useForm({
     title: 'Title',
     content: 'Content',
   });
@@ -397,18 +387,69 @@ const Form: React.FC = () => {
 };
 ```
+## 📢 Rerendering fields if some data has been changed
+The fields are rerendered ONLY when the value or error has been changed. If your field depends on additional data, then it will not be rerendered when this data has been updated.
+```tsx
+// ❌ Incorrect because the input will not be rerendered when the `number` is updated.
+// The text in the input will always be `Number is 0`.
+const Form: React.FC = () => {
+  const { Field } = useForm({ name: '' });
+  const [number, setNumber] = useState(0);
+  return (
+    <Form>
+      <Field
+        name='name'
+        render={(props) => (
+          <>
+            <Input {...props} />
+            <div>Number is {number}</div>
+          </>
+        )}
+      />
+      <Button onClick={() => setNumber((v) => v + 1)}>Increment</Button>
+    </Form>
+  );
+};
+```
+To solve this issue, you need to pass additional data on which the field depends (in our case, the variable `number`) to the `data` property and get them from the third argument of the `render` function.
+```tsx
+// ✅ Correct
+const Form: React.FC = () => {
+  const { Field } = useForm({ name: '' });
+  const [number, setNumber] = useState(0);
+  return (
+    <Form>
+      <Field
+        name='name'
+        data={number}
+        render={(props, _, n) => (
+          <>
+            <Input {...props} />
+            <div>Number is {n}</div>
+          </>
+        )}
+      />
+      <Button onClick={() => setNumber((v) => v + 1)}>Increment</Button>
+    </Form>
+  );
+};
+```
 ## 🎚️ Transforming field values
 The entered value in the field can be transformed. For example, the email address should always be entered in lowercase. To implement it, you should set a transformer to the field. This transformer is called before the `onChange` handler is called. The type of the received and returned value must be the same.
 ```tsx
-interface SignInData {
-  email: string;
-  password: string;
-}
 const Form: React.FC = () => {
-  const { Field, form } = useForm<SignInData>({
+  const { Field, form } = useForm({
     email: '',
     password: '',
   });
@@ -441,13 +482,8 @@ In my practice, this came in handy in 2 cases:
 Let's consider the first case. To implement it, use the `useTransformer` hook.
 ```tsx
-interface FormData {
-  title: string;
-  metaTitle: string;
-}
 const Form: React.FC = () => {
-  const { Field, form, useTransformer } = useForm<FormData>({
+  const { Field, form, useTransformer } = useForm({
     title: '',
     metaTitle: '',
   });
@@ -479,13 +515,8 @@ You can track changes for a specific field using the `useValue` hook.
 For example, if the url slug is generated by the title on the server side, you need to send a request every time the title field changes and update the url slug field after receiving a response.
 ```tsx
-interface FormData {
-  title: string;
-  urlSlug: string;
-}
 const Form: React.FC = () => {
-  const { Field, form, useValue } = useForm<FormData>({
+  const { Field, form, useValue } = useForm({
     title: '',
     urlSlug: '',
   });
@@ -519,7 +550,7 @@ You can also track changes to all fields, for example, for logging.
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm<FormData>({
+  const { Field, form } = useForm({
     title: '',
     content: '',
   });

package/dist/cjs/index.js CHANGED Viewed

@@ -141,6 +141,7 @@ var createFieldComponent = function createFieldComponent(form) {
   var useError = createUseErrorHook(form);
   return function (props) {
     var name = props.name,
+      data = props.data,
       _props$transformer = props.transformer,
       transformer = _props$transformer === void 0 ? function (v) {
         return v;
@@ -186,9 +187,12 @@ var createFieldComponent = function createFieldComponent(form) {
         reset: reset
       };
     }, [error, modified, reset]);
+    var memoizedData = (0, _useDeepEqualMemo["default"])(function () {
+      return data;
+    }, [data]);
     return (0, _react.useMemo)(function () {
-      return renderRef.current(inputProps, fieldState);
-    }, [fieldState, inputProps]);
+      return renderRef.current(inputProps, fieldState, memoizedData);
+    }, [fieldState, inputProps, memoizedData]);
   };
 };
 var useModifiedFields = function useModifiedFields(form) {

package/dist/cjs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["createUseValueHook","form","name","useState","values","get","value","setValue","useEffect","subscription","subscribe","v","unsubscribe","createUseErrorHook","errors","createUseTransformerHook","useValue","transformer","transformerRef","useRef","current","partialValues","Object","entries","forEach","n","set","createFieldComponent","useError","props","render","error","initValue","useMemo","initValues","modified","isEqual","reset","useCallback","onChange","undefined","renderRef","inputProps","fieldState","useModifiedFields","modifiedFields","setModifiedFields","modifiedFieldsRef","initValuesRef","subscribeToAll","isInitValue","fields","includes","filter","field","useFormResponse","Field","useTransformer","length","useForm","memoizedInitValues","useDeepEqualMemo","formRef","Form","useExistingForm","useFormContext","Error"],"sources":["../../src/index.tsx"],"sourcesContent":["import {\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Form from './Form';\nimport { PathReturn, Path, Values } from './types';\nimport useFormContext from './useFormContext';\nimport isEqual from './utils/isEqual';\nimport { get } from './utils/path';\nimport useDeepEqualMemo from './utils/useDeepEqualMemo';\n\nexport * from './BroadcastObserverManager';\nexport * from './ErrorObserverManager';\nexport { default as Form } from './Form';\nexport * from './types';\nexport * from './useFormContext';\n\nconst createUseValueHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<PathReturn<TValues, TName>>(\n form.values.get(name)\n );\n\n useEffect(() => {\n const subscription = form.values.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nconst createUseErrorHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<string \| undefined>(\n form.errors.get(name)\n );\n\n useEffect(() => {\n const subscription = form.errors.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nexport type Transformer<TValues extends Values, TName extends Path<TValues>> = (\n value: PathReturn<TValues, TName>\n) => {\n [K in Path<TValues>]?: PathReturn<TValues, K>;\n};\n\nconst createUseTransformerHook = <TValues extends Values>(\n form: Form<TValues>\n) => {\n const useValue = createUseValueHook(form);\n return <TName extends Path<TValues>>(\n name: TName,\n transformer: Transformer<TValues, TName>\n ) => {\n const value = useValue(name);\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n useEffect(() => {\n const partialValues = transformerRef.current(value);\n Object.entries(partialValues).forEach(([n, v]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n form.values.set(n as Path<TValues>, v as any);\n });\n }, [value]);\n };\n};\n\ninterface InputProps<TValue> {\n value: TValue;\n onChange: (value: TValue) => void;\n}\ninterface FieldState {\n error?: string;\n modified: boolean;\n reset: () => void;\n}\ninterface FieldProps<TName, TValue> {\n name: TName;\n transformer?: (value: TValue) => TValue;\n render: (\n inputProps: InputProps<TValue>,\n fieldState: FieldState\n ) => ReactElement \| null;\n}\n\nconst createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {\n const useValue = createUseValueHook(form);\n const useError = createUseErrorHook(form);\n return <TName extends Path<TValues>>(\n props: FieldProps<TName, PathReturn<TValues, TName>>\n ) => {\n const { name, transformer = (v) => v, render } = props;\n\n const value = useValue(name);\n const error = useError(name);\n\n const initValue = useMemo(() => get(form.initValues, name), [name]);\n const modified = useMemo(\n () => !isEqual(value, initValue),\n [initValue, value]\n );\n const reset = useCallback(\n () => form.values.set(name, initValue),\n [initValue, name]\n );\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n const onChange = useCallback(\n (v: PathReturn<TValues, TName>) => {\n form.values.set(name, transformerRef.current(v));\n },\n [name]\n );\n\n // Reset the error when the value was changed\n useEffect(() => {\n form.errors.set(name, undefined);\n }, [name, value]);\n\n const renderRef = useRef(render);\n useEffect(() => {\n renderRef.current = render;\n }, [render]);\n\n const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);\n const fieldState = useMemo(\n () => ({ error, modified, reset }),\n [error, modified, reset]\n );\n\n return useMemo(\n () => renderRef.current(inputProps, fieldState),\n [fieldState, inputProps]\n );\n };\n};\n\nconst useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {\n const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(\n []\n );\n\n const modifiedFieldsRef = useRef(modifiedFields);\n useEffect(() => {\n modifiedFieldsRef.current = modifiedFields;\n }, [modifiedFields]);\n\n const initValuesRef = useRef(form.initValues);\n useEffect(() => {\n initValuesRef.current = form.initValues;\n }, [form.initValues]);\n\n useEffect(() => {\n const subscription = form.values.subscribeToAll((name, value) => {\n const isInitValue = isEqual(value, get(initValuesRef.current, name));\n const fields = modifiedFieldsRef.current;\n\n if (fields.includes(name)) {\n if (isInitValue) {\n setModifiedFields(fields.filter((field) => field !== name));\n }\n } else if (!isInitValue) {\n setModifiedFields([...fields, name]);\n }\n });\n return () => subscription.unsubscribe();\n }, [form.values]);\n\n return modifiedFields;\n};\n\nconst useFormResponse = <TValues extends Values>(form: Form<TValues>) => {\n const Field = useMemo(() => createFieldComponent(form), [form]);\n const useValue = useMemo(() => createUseValueHook(form), [form]);\n const useError = useMemo(() => createUseErrorHook(form), [form]);\n const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);\n\n const modifiedFields = useModifiedFields(form);\n const modified = useMemo(\n () => modifiedFields.length > 0,\n [modifiedFields.length]\n );\n\n return useMemo(\n () => ({\n form,\n Field,\n useValue,\n useError,\n useTransformer,\n modifiedFields,\n modified,\n }),\n [Field, form, modified, modifiedFields, useError, useTransformer, useValue]\n );\n};\n\nexport const useForm = <TValues extends Values = Values>(\n initValues: TValues\n) => {\n const memoizedInitValues = useDeepEqualMemo<TValues>(\n () => initValues,\n [initValues]\n );\n\n const formRef = useRef(new Form<TValues>(memoizedInitValues));\n useEffect(() => {\n formRef.current.initValues = memoizedInitValues;\n formRef.current.reset();\n }, [memoizedInitValues]);\n\n return useFormResponse(formRef.current);\n};\n\nexport const useExistingForm = <TValues extends Values = Values>() => {\n const form = useFormContext<Form<TValues> \| null>();\n if (!form) throw new Error('Wrap your form in a FormProvider');\n return useFormResponse(form);\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["createUseValueHook","form","name","useState","values","get","value","setValue","useEffect","subscription","subscribe","v","unsubscribe","createUseErrorHook","errors","createUseTransformerHook","useValue","transformer","transformerRef","useRef","current","partialValues","Object","entries","forEach","n","set","createFieldComponent","useError","props","data","render","error","initValue","useMemo","initValues","modified","isEqual","reset","useCallback","onChange","undefined","renderRef","inputProps","fieldState","memoizedData","useDeepEqualMemo","useModifiedFields","modifiedFields","setModifiedFields","modifiedFieldsRef","initValuesRef","subscribeToAll","isInitValue","fields","includes","filter","field","useFormResponse","Field","useTransformer","length","useForm","memoizedInitValues","formRef","Form","useExistingForm","useFormContext","Error"],"sources":["../../src/index.tsx"],"sourcesContent":["import {\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Form from './Form';\nimport { Path, PathReturn, Values } from './types';\nimport useFormContext from './useFormContext';\nimport isEqual from './utils/isEqual';\nimport { get } from './utils/path';\nimport useDeepEqualMemo from './utils/useDeepEqualMemo';\n\nexport * from './BroadcastObserverManager';\nexport * from './ErrorObserverManager';\nexport { default as Form } from './Form';\nexport * from './types';\nexport * from './useFormContext';\n\nconst createUseValueHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<PathReturn<TValues, TName>>(\n form.values.get(name)\n );\n\n useEffect(() => {\n const subscription = form.values.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nconst createUseErrorHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<string \| undefined>(\n form.errors.get(name)\n );\n\n useEffect(() => {\n const subscription = form.errors.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nexport type Transformer<TValues extends Values, TName extends Path<TValues>> = (\n value: PathReturn<TValues, TName>\n) => {\n [K in Path<TValues>]?: PathReturn<TValues, K>;\n};\n\nconst createUseTransformerHook = <TValues extends Values>(\n form: Form<TValues>\n) => {\n const useValue = createUseValueHook(form);\n return <TName extends Path<TValues>>(\n name: TName,\n transformer: Transformer<TValues, TName>\n ) => {\n const value = useValue(name);\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n useEffect(() => {\n const partialValues = transformerRef.current(value);\n Object.entries(partialValues).forEach(([n, v]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n form.values.set(n as Path<TValues>, v as any);\n });\n }, [value]);\n };\n};\n\ninterface InputProps<TValue> {\n value: TValue;\n onChange: (value: TValue) => void;\n}\ninterface FieldState {\n error?: string;\n modified: boolean;\n reset: () => void;\n}\ninterface FieldProps<TName, TValue, TData> {\n name: TName;\n data?: TData;\n transformer?: (value: TValue) => TValue;\n render: (\n inputProps: InputProps<TValue>,\n fieldState: FieldState,\n data: TData\n ) => ReactElement \| null;\n}\n\nconst createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {\n const useValue = createUseValueHook(form);\n const useError = createUseErrorHook(form);\n return <TName extends Path<TValues>, TData>(\n props: FieldProps<TName, PathReturn<TValues, TName>, TData>\n ) => {\n const { name, data, transformer = (v) => v, render } = props;\n\n const value = useValue(name);\n const error = useError(name);\n\n const initValue = useMemo(() => get(form.initValues, name), [name]);\n const modified = useMemo(\n () => !isEqual(value, initValue),\n [initValue, value]\n );\n const reset = useCallback(\n () => form.values.set(name, initValue),\n [initValue, name]\n );\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n const onChange = useCallback(\n (v: PathReturn<TValues, TName>) => {\n form.values.set(name, transformerRef.current(v));\n },\n [name]\n );\n\n // Reset the error when the value was changed\n useEffect(() => {\n form.errors.set(name, undefined);\n }, [name, value]);\n\n const renderRef = useRef(render);\n useEffect(() => {\n renderRef.current = render;\n }, [render]);\n\n const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);\n const fieldState = useMemo(\n () => ({ error, modified, reset }),\n [error, modified, reset]\n );\n\n const memoizedData = useDeepEqualMemo(() => data as TData, [data]);\n\n return useMemo(\n () => renderRef.current(inputProps, fieldState, memoizedData),\n [fieldState, inputProps, memoizedData]\n );\n };\n};\n\nconst useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {\n const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(\n []\n );\n\n const modifiedFieldsRef = useRef(modifiedFields);\n useEffect(() => {\n modifiedFieldsRef.current = modifiedFields;\n }, [modifiedFields]);\n\n const initValuesRef = useRef(form.initValues);\n useEffect(() => {\n initValuesRef.current = form.initValues;\n }, [form.initValues]);\n\n useEffect(() => {\n const subscription = form.values.subscribeToAll((name, value) => {\n const isInitValue = isEqual(value, get(initValuesRef.current, name));\n const fields = modifiedFieldsRef.current;\n\n if (fields.includes(name)) {\n if (isInitValue) {\n setModifiedFields(fields.filter((field) => field !== name));\n }\n } else if (!isInitValue) {\n setModifiedFields([...fields, name]);\n }\n });\n return () => subscription.unsubscribe();\n }, [form.values]);\n\n return modifiedFields;\n};\n\nconst useFormResponse = <TValues extends Values>(form: Form<TValues>) => {\n const Field = useMemo(() => createFieldComponent(form), [form]);\n const useValue = useMemo(() => createUseValueHook(form), [form]);\n const useError = useMemo(() => createUseErrorHook(form), [form]);\n const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);\n\n const modifiedFields = useModifiedFields(form);\n const modified = useMemo(\n () => modifiedFields.length > 0,\n [modifiedFields.length]\n );\n\n return useMemo(\n () => ({\n form,\n Field,\n useValue,\n useError,\n useTransformer,\n modifiedFields,\n modified,\n }),\n [Field, form, modified, modifiedFields, useError, useTransformer, useValue]\n );\n};\n\nexport const useForm = <TValues extends Values = Values>(\n initValues: TValues\n) => {\n const memoizedInitValues = useDeepEqualMemo<TValues>(\n () => initValues,\n [initValues]\n );\n\n const formRef = useRef(new Form<TValues>(memoizedInitValues));\n useEffect(() => {\n formRef.current.initValues = memoizedInitValues;\n formRef.current.reset();\n }, [memoizedInitValues]);\n\n return useFormResponse(formRef.current);\n};\n\nexport const useExistingForm = <TValues extends Values = Values>() => {\n const form = useFormContext<Form<TValues> \| null>();\n if (!form) throw new Error('Wrap your form in a FormProvider');\n return useFormResponse(form);\n};\n"],"mappings":"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"}

package/dist/esm/index.js CHANGED Viewed

@@ -52,6 +52,7 @@ const createFieldComponent = form => {
   return props => {
     const {
       name,
+      data,
       transformer = v => v,
       render
     } = props;
@@ -85,7 +86,8 @@ const createFieldComponent = form => {
       modified,
       reset
     }), [error, modified, reset]);
-    return useMemo(() => renderRef.current(inputProps, fieldState), [fieldState, inputProps]);
+    const memoizedData = useDeepEqualMemo(() => data, [data]);
+    return useMemo(() => renderRef.current(inputProps, fieldState, memoizedData), [fieldState, inputProps, memoizedData]);
   };
 };
 const useModifiedFields = form => {

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["useCallback","useEffect","useMemo","useRef","useState","Form","useFormContext","isEqual","get","useDeepEqualMemo","default","createUseValueHook","form","name","value","setValue","values","subscription","subscribe","v","unsubscribe","createUseErrorHook","errors","createUseTransformerHook","useValue","transformer","transformerRef","current","partialValues","Object","entries","forEach","n","set","createFieldComponent","useError","props","render","error","initValue","initValues","modified","reset","onChange","undefined","renderRef","inputProps","fieldState","useModifiedFields","modifiedFields","setModifiedFields","modifiedFieldsRef","initValuesRef","subscribeToAll","isInitValue","fields","includes","filter","field","useFormResponse","Field","useTransformer","length","useForm","memoizedInitValues","formRef","useExistingForm","Error"],"sources":["../../src/index.tsx"],"sourcesContent":["import {\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Form from './Form';\nimport { PathReturn, Path, Values } from './types';\nimport useFormContext from './useFormContext';\nimport isEqual from './utils/isEqual';\nimport { get } from './utils/path';\nimport useDeepEqualMemo from './utils/useDeepEqualMemo';\n\nexport * from './BroadcastObserverManager';\nexport * from './ErrorObserverManager';\nexport { default as Form } from './Form';\nexport * from './types';\nexport * from './useFormContext';\n\nconst createUseValueHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<PathReturn<TValues, TName>>(\n form.values.get(name)\n );\n\n useEffect(() => {\n const subscription = form.values.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nconst createUseErrorHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<string \| undefined>(\n form.errors.get(name)\n );\n\n useEffect(() => {\n const subscription = form.errors.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nexport type Transformer<TValues extends Values, TName extends Path<TValues>> = (\n value: PathReturn<TValues, TName>\n) => {\n [K in Path<TValues>]?: PathReturn<TValues, K>;\n};\n\nconst createUseTransformerHook = <TValues extends Values>(\n form: Form<TValues>\n) => {\n const useValue = createUseValueHook(form);\n return <TName extends Path<TValues>>(\n name: TName,\n transformer: Transformer<TValues, TName>\n ) => {\n const value = useValue(name);\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n useEffect(() => {\n const partialValues = transformerRef.current(value);\n Object.entries(partialValues).forEach(([n, v]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n form.values.set(n as Path<TValues>, v as any);\n });\n }, [value]);\n };\n};\n\ninterface InputProps<TValue> {\n value: TValue;\n onChange: (value: TValue) => void;\n}\ninterface FieldState {\n error?: string;\n modified: boolean;\n reset: () => void;\n}\ninterface FieldProps<TName, TValue> {\n name: TName;\n transformer?: (value: TValue) => TValue;\n render: (\n inputProps: InputProps<TValue>,\n fieldState: FieldState\n ) => ReactElement \| null;\n}\n\nconst createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {\n const useValue = createUseValueHook(form);\n const useError = createUseErrorHook(form);\n return <TName extends Path<TValues>>(\n props: FieldProps<TName, PathReturn<TValues, TName>>\n ) => {\n const { name, transformer = (v) => v, render } = props;\n\n const value = useValue(name);\n const error = useError(name);\n\n const initValue = useMemo(() => get(form.initValues, name), [name]);\n const modified = useMemo(\n () => !isEqual(value, initValue),\n [initValue, value]\n );\n const reset = useCallback(\n () => form.values.set(name, initValue),\n [initValue, name]\n );\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n const onChange = useCallback(\n (v: PathReturn<TValues, TName>) => {\n form.values.set(name, transformerRef.current(v));\n },\n [name]\n );\n\n // Reset the error when the value was changed\n useEffect(() => {\n form.errors.set(name, undefined);\n }, [name, value]);\n\n const renderRef = useRef(render);\n useEffect(() => {\n renderRef.current = render;\n }, [render]);\n\n const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);\n const fieldState = useMemo(\n () => ({ error, modified, reset }),\n [error, modified, reset]\n );\n\n return useMemo(\n () => renderRef.current(inputProps, fieldState),\n [fieldState, inputProps]\n );\n };\n};\n\nconst useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {\n const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(\n []\n );\n\n const modifiedFieldsRef = useRef(modifiedFields);\n useEffect(() => {\n modifiedFieldsRef.current = modifiedFields;\n }, [modifiedFields]);\n\n const initValuesRef = useRef(form.initValues);\n useEffect(() => {\n initValuesRef.current = form.initValues;\n }, [form.initValues]);\n\n useEffect(() => {\n const subscription = form.values.subscribeToAll((name, value) => {\n const isInitValue = isEqual(value, get(initValuesRef.current, name));\n const fields = modifiedFieldsRef.current;\n\n if (fields.includes(name)) {\n if (isInitValue) {\n setModifiedFields(fields.filter((field) => field !== name));\n }\n } else if (!isInitValue) {\n setModifiedFields([...fields, name]);\n }\n });\n return () => subscription.unsubscribe();\n }, [form.values]);\n\n return modifiedFields;\n};\n\nconst useFormResponse = <TValues extends Values>(form: Form<TValues>) => {\n const Field = useMemo(() => createFieldComponent(form), [form]);\n const useValue = useMemo(() => createUseValueHook(form), [form]);\n const useError = useMemo(() => createUseErrorHook(form), [form]);\n const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);\n\n const modifiedFields = useModifiedFields(form);\n const modified = useMemo(\n () => modifiedFields.length > 0,\n [modifiedFields.length]\n );\n\n return useMemo(\n () => ({\n form,\n Field,\n useValue,\n useError,\n useTransformer,\n modifiedFields,\n modified,\n }),\n [Field, form, modified, modifiedFields, useError, useTransformer, useValue]\n );\n};\n\nexport const useForm = <TValues extends Values = Values>(\n initValues: TValues\n) => {\n const memoizedInitValues = useDeepEqualMemo<TValues>(\n () => initValues,\n [initValues]\n );\n\n const formRef = useRef(new Form<TValues>(memoizedInitValues));\n useEffect(() => {\n formRef.current.initValues = memoizedInitValues;\n formRef.current.reset();\n }, [memoizedInitValues]);\n\n return useFormResponse(formRef.current);\n};\n\nexport const useExistingForm = <TValues extends Values = Values>() => {\n const form = useFormContext<Form<TValues> \| null>();\n if (!form) throw new Error('Wrap your form in a FormProvider');\n return useFormResponse(form);\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["useCallback","useEffect","useMemo","useRef","useState","Form","useFormContext","isEqual","get","useDeepEqualMemo","default","createUseValueHook","form","name","value","setValue","values","subscription","subscribe","v","unsubscribe","createUseErrorHook","errors","createUseTransformerHook","useValue","transformer","transformerRef","current","partialValues","Object","entries","forEach","n","set","createFieldComponent","useError","props","data","render","error","initValue","initValues","modified","reset","onChange","undefined","renderRef","inputProps","fieldState","memoizedData","useModifiedFields","modifiedFields","setModifiedFields","modifiedFieldsRef","initValuesRef","subscribeToAll","isInitValue","fields","includes","filter","field","useFormResponse","Field","useTransformer","length","useForm","memoizedInitValues","formRef","useExistingForm","Error"],"sources":["../../src/index.tsx"],"sourcesContent":["import {\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Form from './Form';\nimport { Path, PathReturn, Values } from './types';\nimport useFormContext from './useFormContext';\nimport isEqual from './utils/isEqual';\nimport { get } from './utils/path';\nimport useDeepEqualMemo from './utils/useDeepEqualMemo';\n\nexport * from './BroadcastObserverManager';\nexport * from './ErrorObserverManager';\nexport { default as Form } from './Form';\nexport * from './types';\nexport * from './useFormContext';\n\nconst createUseValueHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<PathReturn<TValues, TName>>(\n form.values.get(name)\n );\n\n useEffect(() => {\n const subscription = form.values.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nconst createUseErrorHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<string \| undefined>(\n form.errors.get(name)\n );\n\n useEffect(() => {\n const subscription = form.errors.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nexport type Transformer<TValues extends Values, TName extends Path<TValues>> = (\n value: PathReturn<TValues, TName>\n) => {\n [K in Path<TValues>]?: PathReturn<TValues, K>;\n};\n\nconst createUseTransformerHook = <TValues extends Values>(\n form: Form<TValues>\n) => {\n const useValue = createUseValueHook(form);\n return <TName extends Path<TValues>>(\n name: TName,\n transformer: Transformer<TValues, TName>\n ) => {\n const value = useValue(name);\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n useEffect(() => {\n const partialValues = transformerRef.current(value);\n Object.entries(partialValues).forEach(([n, v]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n form.values.set(n as Path<TValues>, v as any);\n });\n }, [value]);\n };\n};\n\ninterface InputProps<TValue> {\n value: TValue;\n onChange: (value: TValue) => void;\n}\ninterface FieldState {\n error?: string;\n modified: boolean;\n reset: () => void;\n}\ninterface FieldProps<TName, TValue, TData> {\n name: TName;\n data?: TData;\n transformer?: (value: TValue) => TValue;\n render: (\n inputProps: InputProps<TValue>,\n fieldState: FieldState,\n data: TData\n ) => ReactElement \| null;\n}\n\nconst createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {\n const useValue = createUseValueHook(form);\n const useError = createUseErrorHook(form);\n return <TName extends Path<TValues>, TData>(\n props: FieldProps<TName, PathReturn<TValues, TName>, TData>\n ) => {\n const { name, data, transformer = (v) => v, render } = props;\n\n const value = useValue(name);\n const error = useError(name);\n\n const initValue = useMemo(() => get(form.initValues, name), [name]);\n const modified = useMemo(\n () => !isEqual(value, initValue),\n [initValue, value]\n );\n const reset = useCallback(\n () => form.values.set(name, initValue),\n [initValue, name]\n );\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n const onChange = useCallback(\n (v: PathReturn<TValues, TName>) => {\n form.values.set(name, transformerRef.current(v));\n },\n [name]\n );\n\n // Reset the error when the value was changed\n useEffect(() => {\n form.errors.set(name, undefined);\n }, [name, value]);\n\n const renderRef = useRef(render);\n useEffect(() => {\n renderRef.current = render;\n }, [render]);\n\n const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);\n const fieldState = useMemo(\n () => ({ error, modified, reset }),\n [error, modified, reset]\n );\n\n const memoizedData = useDeepEqualMemo(() => data as TData, [data]);\n\n return useMemo(\n () => renderRef.current(inputProps, fieldState, memoizedData),\n [fieldState, inputProps, memoizedData]\n );\n };\n};\n\nconst useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {\n const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(\n []\n );\n\n const modifiedFieldsRef = useRef(modifiedFields);\n useEffect(() => {\n modifiedFieldsRef.current = modifiedFields;\n }, [modifiedFields]);\n\n const initValuesRef = useRef(form.initValues);\n useEffect(() => {\n initValuesRef.current = form.initValues;\n }, [form.initValues]);\n\n useEffect(() => {\n const subscription = form.values.subscribeToAll((name, value) => {\n const isInitValue = isEqual(value, get(initValuesRef.current, name));\n const fields = modifiedFieldsRef.current;\n\n if (fields.includes(name)) {\n if (isInitValue) {\n setModifiedFields(fields.filter((field) => field !== name));\n }\n } else if (!isInitValue) {\n setModifiedFields([...fields, name]);\n }\n });\n return () => subscription.unsubscribe();\n }, [form.values]);\n\n return modifiedFields;\n};\n\nconst useFormResponse = <TValues extends Values>(form: Form<TValues>) => {\n const Field = useMemo(() => createFieldComponent(form), [form]);\n const useValue = useMemo(() => createUseValueHook(form), [form]);\n const useError = useMemo(() => createUseErrorHook(form), [form]);\n const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);\n\n const modifiedFields = useModifiedFields(form);\n const modified = useMemo(\n () => modifiedFields.length > 0,\n [modifiedFields.length]\n );\n\n return useMemo(\n () => ({\n form,\n Field,\n useValue,\n useError,\n useTransformer,\n modifiedFields,\n modified,\n }),\n [Field, form, modified, modifiedFields, useError, useTransformer, useValue]\n );\n};\n\nexport const useForm = <TValues extends Values = Values>(\n initValues: TValues\n) => {\n const memoizedInitValues = useDeepEqualMemo<TValues>(\n () => initValues,\n [initValues]\n );\n\n const formRef = useRef(new Form<TValues>(memoizedInitValues));\n useEffect(() => {\n formRef.current.initValues = memoizedInitValues;\n formRef.current.reset();\n }, [memoizedInitValues]);\n\n return useFormResponse(formRef.current);\n};\n\nexport const useExistingForm = <TValues extends Values = Values>() => {\n const form = useFormContext<Form<TValues> \| null>();\n if (!form) throw new Error('Wrap your form in a FormProvider');\n return useFormResponse(form);\n};\n"],"mappings":"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"}

package/dist/types/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import Form from './Form';
-import { PathReturn, Path, Values } from './types';
+import { Path, PathReturn, Values } from './types';
 export * from './BroadcastObserverManager';
 export * from './ErrorObserverManager';
 export { default as Form } from './Form';
@@ -18,14 +18,15 @@ interface FieldState {
     modified: boolean;
     reset: () => void;
 }
-interface FieldProps<TName, TValue> {
+interface FieldProps<TName, TValue, TData> {
     name: TName;
+    data?: TData;
     transformer?: (value: TValue) => TValue;
-    render: (inputProps: InputProps<TValue>, fieldState: FieldState) => ReactElement | null;
+    render: (inputProps: InputProps<TValue>, fieldState: FieldState, data: TData) => ReactElement | null;
 }
 export declare const useForm: <TValues extends Values<any> = Values<any>>(initValues: TValues) => {
     form: Form<TValues, import("./types").Errors<TValues>>;
-    Field: <TName extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>>(props: FieldProps<TName, PathReturn<TValues, TName>>) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+    Field: <TName extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>, TData>(props: FieldProps<TName, PathReturn<TValues, TName>, TData>) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     useValue: <TName_1 extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>>(name: TName_1) => PathReturn<TValues, TName_1>;
     useError: <TName_2 extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>>(name: TName_2) => string | undefined;
     useTransformer: <TName_3 extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>>(name: TName_3, transformer: Transformer<TValues, TName_3>) => void;
@@ -34,7 +35,7 @@ export declare const useForm: <TValues extends Values<any> = Values<any>>(initVa
 };
 export declare const useExistingForm: <TValues extends Values<any> = Values<any>>() => {
     form: Form<TValues, import("./types").Errors<TValues>>;
-    Field: <TName extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>>(props: FieldProps<TName, PathReturn<TValues, TName>>) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+    Field: <TName extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>, TData>(props: FieldProps<TName, PathReturn<TValues, TName>, TData>) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     useValue: <TName_1 extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>>(name: TName_1) => PathReturn<TValues, TName_1>;
     useError: <TName_2 extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>>(name: TName_2) => string | undefined;
     useTransformer: <TName_3 extends Path<TValues, Exclude<keyof TValues, keyof any[]> & string>>(name: TName_3, transformer: Transformer<TValues, TName_3>) => void;

package/dist/types/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAMb,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,~~UAAU~~,EAAE,~~IAAI~~,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAMnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AAoCjC,MAAM,MAAM,WAAW,CAAC,OAAO,SAAS,MAAM,EAAE,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,IAAI,CAC7E,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,KAC9B;KACF,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;CAC9C,CAAC;AA2BF,UAAU,UAAU,CAAC,MAAM;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AACD,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AACD,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM;~~IAChC~~,IAAI,EAAE,KAAK,CAAC;IACZ,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,EAAE,CACN,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,EAC9B,UAAU,EAAE,UAAU,~~KACnB~~,YAAY,GAAG,IAAI,CAAC;CAC1B;~~AAsHD~~,eAAO,MAAM,OAAO;;;;;;;;CAenB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;CAI3B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAMb,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAMnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AAoCjC,MAAM,MAAM,WAAW,CAAC,OAAO,SAAS,MAAM,EAAE,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,IAAI,CAC7E,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,KAC9B;KACF,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;CAC9C,CAAC;AA2BF,UAAU,UAAU,CAAC,MAAM;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AACD,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AACD,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK;IACvC,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,EAAE,CACN,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,EAC9B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,KAAK,KACR,YAAY,GAAG,IAAI,CAAC;CAC1B;AAwHD,eAAO,MAAM,OAAO;;;;;;;;CAenB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;CAI3B,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/form",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -34,5 +34,5 @@
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "a4ef916e8a799c052eb0bf4e82ed89dec0178117"
+  "gitHead": "82f2e23aaa51824bbba07584905d41dcff290951"
 }