181699939

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/Rocketseat/unform/commit/<a class=hub.com/Rocketseat/unform/commit/281d083f4b5ffa34b383902b9dfa64576727b25f">281d083f4<a href="https://github.com/Rocketseat/unform/commit/281d083f4b5ffa34b383902b9dfa64576727b25f">">Merge </a><a class="double-link" href="https://github.com/Rocketseat/unform/commit/<a class="double-link" href="https://github.com/Rocketseat/unform/commit/cd6ee88d9dead3167c057e14269a8146bc2f8481">cd6ee88d9</a>">cd6ee88d9</a><a href="https://github.com/Rocketseat/unform/commit/281d083f4b5ffa34b383902b9dfa64576727b25f"> into 366ff524b">366ff524b</a>

Pull Request Pull Request #281: Feat/native support to radio checkbox fields

Run Details

63 of 67 branches covered (94.03%)

Branch coverage included in aggregate %.

142 of 142 new or added lines in 7 files covered. (100.0%)

229 of 231 relevant lines covered (99.13%)

20.55 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

96.25

/packages/core/lib/FormProvider.tsx

import React, {
  forwardRef,
  FormEvent,
  useState,
  useCallback,
  useImperativeHandle,
  RefForwardingComponent,
} from 'react';

import dot from 'dot-object';

import FormContext from './Context';
import { UnformErrors, FormHandles, FormProps } from './types';
import useFormFields from './useFormFields';

const Form: RefForwardingComponent<FormHandles, FormProps> = (
  { initialData = {}, children, onSubmit },
  formRef,
) => {
  const [errors, setErrors] = useState<UnformErrors>({});
  const {
    fields,
    getFieldByName,
    registerField,
    unregisterField,
  } = useFormFields();

  const reset = useCallback(
    (data = {}) => {
      Object.keys(fields).forEach(fieldName => {
        return fields[fieldName].clearValue(
          data[fieldName] ? data[fieldName] : '',
        );
      });
    },
    [fields],
  );

  const setData = useCallback(
    (data: object) => {
      const fieldValue = {};

      Object.keys(fields).forEach(fieldName => {
        fieldValue[fieldName] = dot.pick(fieldName, data);
      });

      Object.entries(fieldValue).forEach(([fieldName, value]) => {
        fields[fieldName].setValue(value);
      });
    },
    [fields],
  );

  const setFormErrors = useCallback((formErrors: object) => {
    const parsedErrors = dot.dot(formErrors);

    setErrors(parsedErrors);
  }, []);

  const parseFormData = useCallback(() => {
    const data = {};

    Object.entries(fields).forEach(([fieldName, field]) => {
      data[fieldName] = field.getValue();
    });

    dot.object(data);

    return data;
  }, [fields]);

  const handleSubmit = useCallback(
    async (event?: FormEvent) => {
      if (event) {
        event.preventDefault();
      }

      const data = parseFormData();

      onSubmit(data, { reset }, event);
    },
    [onSubmit, parseFormData, reset],
  );

  useImperativeHandle<{}, FormHandles>(formRef, () => ({
    getFieldValue(fieldName) {
      const field = getFieldByName(fieldName);

      if (!field) {
        return false;
      }

      return field.getValue();
    },
    setFieldValue(fieldName, value) {
      const field = getFieldByName(fieldName);

      if (!field) {
        return false;
      }

      return field.setValue(value);
    },
    getFieldError(fieldName) {
      return errors[fieldName];
    },
    setFieldError(fieldName, error) {
      setErrors(state => ({ ...state, [fieldName]: error }));
    },
    clearField(fieldName) {
      const field = getFieldByName(fieldName);

      if (!field) {
        return false;
      }

      return field.clearValue();
    },
    getErrors() {
      return errors;
    },
    setErrors(formErrors) {
      return setFormErrors(formErrors);
    },
    getData() {
      return parseFormData();
    },
    getFieldRef(fieldName) {
      const field = getFieldByName(fieldName);

      if (!field) {
        return false;
      }

      return field.getRef();
    },
    setData(data) {
      return setData(data);
    },
    reset(data) {
      return reset(data);
    },
    submitForm() {
      handleSubmit();
    },
  }));

  return (
    <FormContext.Provider
      value={{
        initialData,
        errors,
        scopePath: '',
        registerField,
        unregisterField,
        setErrors,
        handleSubmit,
      }}
    >
      {children}
    </FormContext.Provider>
  );
};

export default forwardRef(Form);

1	import React, {	5✔
2	forwardRef,
3	FormEvent,
4	useState,
5	useCallback,
6	useImperativeHandle,
7	RefForwardingComponent,
8	} from 'react';
9
10	import dot from 'dot-object';	5✔
11
12	import FormContext from './Context';	5✔
13	import { UnformErrors, FormHandles, FormProps } from './types';
14	import useFormFields from './useFormFields';	5✔
15
16	const Form: RefForwardingComponent<FormHandles, FormProps> = (	5✔
17	{ initialData = {}, children, onSubmit },	94!
18	formRef,
19	) => {
20	const [errors, setErrors] = useState<UnformErrors>({});	47✔
21	const {	47✔
22	fields,	47✔
23	getFieldByName,	47✔
24	registerField,	47✔
25	unregisterField,	47✔
26	} = useFormFields();
27
28	const reset = useCallback(	47✔
29	(data = {}) => {	17✔
30	Object.keys(fields).forEach(fieldName => {	10✔
31	return fields[fieldName].clearValue(	10✔
32	data[fieldName] ? data[fieldName] : '',	10✔
33	);
34	});
35	},
36	[fields],
37	);
38
39	const setData = useCallback(	47✔
40	(data: object) => {
41	const fieldValue = {};	3✔
42
43	Object.keys(fields).forEach(fieldName => {	3✔
44	fieldValue[fieldName] = dot.pick(fieldName, data);	5✔
45	});
46
47	Object.entries(fieldValue).forEach(([fieldName, value]) => {	5✔
48	fields[fieldName].setValue(value);	5✔
49	});
50	},
51	[fields],
52	);
53
54	const setFormErrors = useCallback((formErrors: object) => {	47✔
55	const parsedErrors = dot.dot(formErrors);	1✔
56
57	setErrors(parsedErrors);	1✔
58	}, []);
59
60	const parseFormData = useCallback(() => {	47✔
61	const data = {};	19✔
62
63	Object.entries(fields).forEach(([fieldName, field]) => {	21✔
64	data[fieldName] = field.getValue();	21✔
65	});
66
67	dot.object(data);	19✔
68
69	return data;	19✔
70	}, [fields]);
71
72	const handleSubmit = useCallback(	47✔
73	async (event?: FormEvent) => {	18✔
74	if (event) {	18✔
75	event.preventDefault();	16✔
76	}
77
78	const data = parseFormData();	18✔
79
80	onSubmit(data, { reset }, event);	18✔
81	},
82	[onSubmit, parseFormData, reset],
83	);
84
85	useImperativeHandle<{}, FormHandles>(formRef, () => ({	47✔
86	getFieldValue(fieldName) {
87	const field = getFieldByName(fieldName);	5✔
88
89	if (!field) {	5✔
90	return false;	1✔
91	}
92
93	return field.getValue();	4✔
94	},
95	setFieldValue(fieldName, value) {
96	const field = getFieldByName(fieldName);	4✔
97
98	if (!field) {	4✔
99	return false;	1✔
100	}
101
102	return field.setValue(value);	3✔
103	},
104	getFieldError(fieldName) {
105	return errors[fieldName];	4✔
106	},
107	setFieldError(fieldName, error) {
108	setErrors(state => ({ ...state, [fieldName]: error }));	3✔
109	},
110	clearField(fieldName) {
111	const field = getFieldByName(fieldName);	2✔
112
113	if (!field) {	2!
114	return false;	×
115	}
116
117	return field.clearValue();	2✔
118	},
119	getErrors() {
120	return errors;	1✔
121	},
122	setErrors(formErrors) {
123	return setFormErrors(formErrors);	1✔
124	},
125	getData() {
126	return parseFormData();	1✔
127	},
128	getFieldRef(fieldName) {
129	const field = getFieldByName(fieldName);	6✔
130
131	if (!field) {	6✔
132	return false;	3✔
133	}
134
135	return field.getRef();	3✔
136	},
137	setData(data) {
138	return setData(data);	3✔
139	},
140	reset(data) {
141	return reset(data);	1✔
142	},
143	submitForm() {
144	handleSubmit();	2✔
145	},
146	}));
147
148	return (	47✔
149	<FormContext.Provider
150	value={{
151	initialData,
152	errors,
153	scopePath: '',
154	registerField,
155	unregisterField,
156	setErrors,
157	handleSubmit,
158	}}
159	>
160	{children}
161	</FormContext.Provider>
162	);
163	};
164
165	export default forwardRef(Form);	5✔

Rocketseat / unform / 181699939

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous