From d456e8e4dd49c1f03da73c220368d24a68f369e8 Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Sun, 8 Nov 2020 22:56:55 +0800 Subject: [PATCH 1/7] feat(useForm): add ignoreFields config --- .changeset/honest-roses-float.md | 5 +++++ examples/src/BasicForm/index.tsx | 1 + src/index.ts | 10 ++++++---- src/types/index.ts | 1 + src/types/react-cool-form.d.ts | 1 + 5 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 .changeset/honest-roses-float.md diff --git a/.changeset/honest-roses-float.md b/.changeset/honest-roses-float.md new file mode 100644 index 00000000..648cbe01 --- /dev/null +++ b/.changeset/honest-roses-float.md @@ -0,0 +1,5 @@ +--- +"react-cool-form": patch +--- + +feat(useForm): ignore fields diff --git a/examples/src/BasicForm/index.tsx b/examples/src/BasicForm/index.tsx index 3b7d4acd..17158aa7 100644 --- a/examples/src/BasicForm/index.tsx +++ b/examples/src/BasicForm/index.tsx @@ -73,6 +73,7 @@ export default (): JSX.Element => { initialValues, // validateOnChange: false, // validateOnBlur: false, + // ignoreFields: ["text.nest", "number"], // validate: async (values, set) => { // let errors: any = { text: { nest: "" } }; diff --git a/src/index.ts b/src/index.ts index f114cfd3..9bd86ff8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -56,7 +56,7 @@ const isFieldElement = ({ tagName }: HTMLElement) => const hasChangeEvent = ({ type }: FieldElement) => !/hidden|image|submit|reset/.test(type); -const getFields = (form: HTMLFormElement | null) => +const getFields = (form: HTMLFormElement | null, ignoreFields: string[]) => form ? Array.from(form.querySelectorAll("input,textarea,select")) .filter((element) => { @@ -68,7 +68,7 @@ const getFields = (form: HTMLFormElement | null) => warn('💡 react-cool-form: Field is missing "name" attribute.'); return false; } - if (dataset.rcfIgnore) return false; + if (dataset.rcfIgnore || ignoreFields.includes(name)) return false; return true; }) @@ -92,6 +92,7 @@ export function useForm({ validate, validateOnChange = true, validateOnBlur = true, + ignoreFields = [], onReset, onSubmit, onError, @@ -101,6 +102,7 @@ export function useForm({ const fieldsRef = useRef({}); const formValidatorRef = useLatest(validate); const fieldValidatorsRef = useRef>>({}); + const ignoreFieldsRef = useRef(ignoreFields); const onResetRef = useLatest(onReset); const onSubmitRef = useLatest(onSubmit); const onErrorRef = useLatest(onError); @@ -591,7 +593,7 @@ export function useForm({ return; } - fieldsRef.current = getFields(formRef.current); + fieldsRef.current = getFields(formRef.current, ignoreFieldsRef.current); setAllDomsValue(); }, [setAllDomsValue]); @@ -633,7 +635,7 @@ export function useForm({ // eslint-disable-next-line no-restricted-syntax for (const { type, addedNodes } of mutations) { if (type === "childList" && addedNodes.length) { - fieldsRef.current = getFields(form); + fieldsRef.current = getFields(form, ignoreFieldsRef.current); setAllDomsValue(); break; diff --git a/src/types/index.ts b/src/types/index.ts index 8df68093..59381d72 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -183,6 +183,7 @@ export interface Config { validate?: FormValidator; validateOnChange?: boolean; validateOnBlur?: boolean; + ignoreFields?: string[]; onReset?: OnReset; onSubmit?: OnSubmit; onError?: OnError; diff --git a/src/types/react-cool-form.d.ts b/src/types/react-cool-form.d.ts index f6966098..f55d25cf 100644 --- a/src/types/react-cool-form.d.ts +++ b/src/types/react-cool-form.d.ts @@ -154,6 +154,7 @@ declare module "react-cool-form" { validate?: FormValidator; validateOnChange?: boolean; validateOnBlur?: boolean; + ignoreFields?: string[]; onReset?: OnReset; onSubmit?: OnSubmit; onError?: OnError; From 157f246f250d92dd1e0f3f12504f53e816ed5536 Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Sun, 8 Nov 2020 22:57:55 +0800 Subject: [PATCH 2/7] chore(changeset): update description --- .changeset/honest-roses-float.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/honest-roses-float.md b/.changeset/honest-roses-float.md index 648cbe01..b53e1384 100644 --- a/.changeset/honest-roses-float.md +++ b/.changeset/honest-roses-float.md @@ -2,4 +2,4 @@ "react-cool-form": patch --- -feat(useForm): ignore fields +feat(useForm): add ignoreFields config From 41911d07970d44efbab9d15eea7ec0abb0b9654e Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 9 Nov 2020 08:01:42 +0800 Subject: [PATCH 3/7] refactor(useForm): move ignoreFields to ignoreFieldsRef --- examples/src/BasicForm/index.tsx | 2 +- src/index.ts | 22 +++++++++++----------- src/utils.ts | 6 ++++++ 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/examples/src/BasicForm/index.tsx b/examples/src/BasicForm/index.tsx index 17158aa7..552626b2 100644 --- a/examples/src/BasicForm/index.tsx +++ b/examples/src/BasicForm/index.tsx @@ -73,7 +73,7 @@ export default (): JSX.Element => { initialValues, // validateOnChange: false, // validateOnBlur: false, - // ignoreFields: ["text.nest", "number"], + ignoreFields: ["text.nest", "number"], // validate: async (values, set) => { // let errors: any = { text: { nest: "" } }; diff --git a/src/index.ts b/src/index.ts index 9bd86ff8..ae1d4d56 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,6 +29,7 @@ import { import useLatest from "./useLatest"; import useFormState from "./useFormState"; import { + arrayToObject, deepMerge, get, isArray, @@ -56,7 +57,7 @@ const isFieldElement = ({ tagName }: HTMLElement) => const hasChangeEvent = ({ type }: FieldElement) => !/hidden|image|submit|reset/.test(type); -const getFields = (form: HTMLFormElement | null, ignoreFields: string[]) => +const getFields = (form: HTMLFormElement | null) => form ? Array.from(form.querySelectorAll("input,textarea,select")) .filter((element) => { @@ -68,7 +69,7 @@ const getFields = (form: HTMLFormElement | null, ignoreFields: string[]) => warn('💡 react-cool-form: Field is missing "name" attribute.'); return false; } - if (dataset.rcfIgnore || ignoreFields.includes(name)) return false; + if (dataset.rcfIgnore) return false; return true; }) @@ -102,11 +103,10 @@ export function useForm({ const fieldsRef = useRef({}); const formValidatorRef = useLatest(validate); const fieldValidatorsRef = useRef>>({}); - const ignoreFieldsRef = useRef(ignoreFields); const onResetRef = useLatest(onReset); const onSubmitRef = useLatest(onSubmit); const onErrorRef = useLatest(onError); - const controllersRef = useRef({}); + const ignoreFieldsRef = useRef(arrayToObject(ignoreFields)); const changedFieldRef = useRef(); const { stateRef, @@ -116,7 +116,7 @@ export function useForm({ } = useFormState(initialValues, debug); const setDomValue = useCallback((name: string, value: any) => { - if (controllersRef.current[name] || !fieldsRef.current[name]) return; + if (ignoreFieldsRef.current[name] || !fieldsRef.current[name]) return; const { field, options } = fieldsRef.current[name]; @@ -159,7 +159,7 @@ export function useForm({ const validateRef = useCallback>( (validate) => (field) => { - if (field?.name && !controllersRef.current[field.name]) + if (field?.name && !ignoreFieldsRef.current[field.name]) fieldValidatorsRef.current[field.name] = validate; }, [] @@ -542,7 +542,7 @@ export function useForm({ return {}; } - controllersRef.current[name] = true; + ignoreFieldsRef.current[name] = true; if (validate) fieldValidatorsRef.current[name] = validate; return { @@ -593,7 +593,7 @@ export function useForm({ return; } - fieldsRef.current = getFields(formRef.current, ignoreFieldsRef.current); + fieldsRef.current = getFields(formRef.current); setAllDomsValue(); }, [setAllDomsValue]); @@ -609,7 +609,7 @@ export function useForm({ return; } - if (fieldsRef.current[name] && !controllersRef.current[name]) + if (fieldsRef.current[name] && !ignoreFieldsRef.current[name]) handleFieldChange(field); }; @@ -622,7 +622,7 @@ export function useForm({ const { name } = target as FieldElement; - if (fieldsRef.current[name] && !controllersRef.current[name]) + if (fieldsRef.current[name] && !ignoreFieldsRef.current[name]) setFieldTouchedIfNeeded(name); }; @@ -635,7 +635,7 @@ export function useForm({ // eslint-disable-next-line no-restricted-syntax for (const { type, addedNodes } of mutations) { if (type === "childList" && addedNodes.length) { - fieldsRef.current = getFields(form, ignoreFieldsRef.current); + fieldsRef.current = getFields(form); setAllDomsValue(); break; diff --git a/src/utils.ts b/src/utils.ts index 7f39a305..4b9f95b4 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -6,6 +6,12 @@ export const warn = (...args: any[]): void => { if (__DEV__) console.warn(...args); }; +export const arrayToObject = (arr: any[]): Record => + arr.reduce((obj, key) => { + obj[key] = true; + return obj; + }, {}); + export const isNumberField = (field: FieldElement): field is HTMLInputElement => field.type === "number"; From 437b88a2aee927ec2e2f51dcf5153cd1811cde5d Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 9 Nov 2020 08:12:39 +0800 Subject: [PATCH 4/7] ci(codeql): adjust checking time --- .github/workflows/codeql-analysis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 6f537304..8c9c0945 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -15,7 +15,7 @@ on: # │ │ │ │ │ # │ │ │ │ │ # * * * * * - - cron: "0 12 * * 0" + - cron: "0 6 * * 0" jobs: analyze: From deb2481408ee91040866664e2fd4f9a3f706fa0c Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 9 Nov 2020 08:13:12 +0800 Subject: [PATCH 5/7] refactor(useFormState): re-order variables --- src/useFormState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/useFormState.ts b/src/useFormState.ts index eec1ab4a..2790cdad 100644 --- a/src/useFormState.ts +++ b/src/useFormState.ts @@ -10,7 +10,7 @@ import { UsedRef, } from "./types"; import useLatest from "./useLatest"; -import { get, set, isEmptyObject } from "./utils"; +import { get, isEmptyObject, set } from "./utils"; export default ( initialValues: V, From b784db1b8b95c708e0d02547bc68e54ec9023aff Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 9 Nov 2020 08:14:21 +0800 Subject: [PATCH 6/7] ci(codeql): adjust comment --- .github/workflows/codeql-analysis.yml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 8c9c0945..32b18269 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -7,14 +7,14 @@ on: branches: [master] schedule: # ┌───────────── minute (0 - 59) - # │ ┌───────────── hour (0 - 23) - # │ │ ┌───────────── day of the month (1 - 31) - # │ │ │ ┌───────────── month (1 - 12 or JAN-DEC) - # │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT) - # │ │ │ │ │ - # │ │ │ │ │ - # │ │ │ │ │ - # * * * * * + # │ ┌───────────── hour (0 - 23) + # │ │ ┌───────────── day of the month (1 - 31) + # │ │ │ ┌───────────── month (1 - 12 or JAN-DEC) + # │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT) + # │ │ │ │ │ + # │ │ │ │ │ + # │ │ │ │ │ + # * * * * * - cron: "0 6 * * 0" jobs: From c642dfa040a831ddc23ffbc94ca8681b0a006eb2 Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 9 Nov 2020 08:20:34 +0800 Subject: [PATCH 7/7] refactor(useForm): move arrayToObject to useForm --- src/index.ts | 7 ++++++- src/utils.ts | 6 ------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/index.ts b/src/index.ts index ae1d4d56..170f226e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,7 +29,6 @@ import { import useLatest from "./useLatest"; import useFormState from "./useFormState"; import { - arrayToObject, deepMerge, get, isArray, @@ -51,6 +50,12 @@ import { const useUniversalLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; +const arrayToObject = (arr: any[]): Record => + arr.reduce((obj, key) => { + obj[key] = true; + return obj; + }, {}); + const isFieldElement = ({ tagName }: HTMLElement) => /INPUT|TEXTAREA|SELECT/.test(tagName); diff --git a/src/utils.ts b/src/utils.ts index 4b9f95b4..7f39a305 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -6,12 +6,6 @@ export const warn = (...args: any[]): void => { if (__DEV__) console.warn(...args); }; -export const arrayToObject = (arr: any[]): Record => - arr.reduce((obj, key) => { - obj[key] = true; - return obj; - }, {}); - export const isNumberField = (field: FieldElement): field is HTMLInputElement => field.type === "number";