>;
47 |
48 | export type CustomComponents<
49 | P extends IFieldComponentProps = IFieldComponentProps
50 | > = {
51 | [type: string]: {
52 | component: CustomComponent;
53 | defaultValue?: any;
54 | validation?: any[][];
55 | };
56 | };
57 |
58 | export interface IFieldConfig<
59 | P extends IFieldComponentProps = IFieldComponentProps
60 | > {
61 | type: string;
62 | name: string;
63 | group: 'input' | 'content';
64 | icon: React.ReactNode;
65 | dataType: string;
66 | defaultValue: any;
67 | component: CustomComponent
;
68 | settings: Fields;
69 | validation: (config: Record) => any[][];
70 | }
71 |
--------------------------------------------------------------------------------
/src/useFormSettings.ts:
--------------------------------------------------------------------------------
1 | import { useReducer, useMemo } from 'react';
2 | import { FieldValues } from 'react-hook-form';
3 | import { yupResolver } from '@hookform/resolvers/yup';
4 |
5 | import { Fields, CustomComponents } from './types';
6 | import { getDefaultValues, getValidationSchema } from './utils';
7 |
8 | const reducer = (
9 | state: string[],
10 | action: { name: string; type: 'omit' | 'unOmit' }
11 | ) => {
12 | switch (action.type) {
13 | case 'omit':
14 | if (state.indexOf(action.name) === -1) {
15 | const newState = [...state];
16 | newState.push(action.name);
17 | return newState;
18 | }
19 | break;
20 |
21 | case 'unOmit':
22 | if (state.indexOf(action.name) > -1) {
23 | const newState = new Set(state);
24 | newState.delete(action.name);
25 | return Array.from(newState);
26 | }
27 | break;
28 |
29 | default:
30 | break;
31 | }
32 |
33 | return state;
34 | };
35 |
36 | export interface IUseFormSettingsProps {
37 | fields: Fields;
38 | values?: FieldValues;
39 |
40 | customComponents?: CustomComponents;
41 | }
42 |
43 | export function useFormSettings({
44 | fields,
45 | values,
46 | customComponents,
47 | }: IUseFormSettingsProps) {
48 | const defaultValues = getDefaultValues(fields, customComponents, values);
49 |
50 | const [omittedFields, setOmittedFields] = useReducer(reducer, []);
51 |
52 | const fieldsWithOmissions = useMemo(
53 | () => fields.filter(({ name }) => omittedFields.indexOf(name ?? '') === -1),
54 | [omittedFields, fields]
55 | );
56 |
57 | const resolver = yupResolver(
58 | getValidationSchema(fieldsWithOmissions, customComponents)
59 | );
60 |
61 | return { defaultValues, resolver, setOmittedFields };
62 | }
63 |
64 | export default useFormSettings;
65 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import * as yup from 'yup';
2 | import { ObjectShape } from 'yup/lib/object';
3 | import _pickBy from 'lodash-es/pickBy';
4 | import _isEqual from 'lodash-es/isEqual';
5 | import _set from 'lodash-es/set';
6 | import _values from 'lodash-es/values';
7 | import _mapValues from 'lodash-es/mapValues';
8 | import { getFieldProp } from './fields';
9 |
10 | import { FieldValues } from 'react-hook-form';
11 | import { Fields, CustomComponents } from './types';
12 |
13 | /**
14 | * Creates a single object with all default values of the fields
15 | * @param fields Fields used in the form
16 | * @param customComponents Custom components used in the form
17 | */
18 | export const getDefaultValues = (
19 | fields: Fields,
20 | customComponents?: CustomComponents,
21 | mergeValues?: FieldValues
22 | ): FieldValues => {
23 | const defaultValues: FieldValues = {};
24 |
25 | for (const field of fields) {
26 | if (!field || !field.name || !field.type) continue;
27 |
28 | let defaultValue: any;
29 |
30 | // Get default value if specified in field declaration
31 | if (field.defaultValue !== undefined) {
32 | defaultValue = field.defaultValue;
33 | }
34 | // Get default value from customComponents
35 | else if (!!customComponents && field.type in customComponents) {
36 | defaultValue = customComponents[field.type].defaultValue;
37 | }
38 | // Get default value from built-in components
39 | else {
40 | defaultValue = getFieldProp('defaultValue', field.type);
41 | }
42 |
43 | // If undefined, do not add to defaultValues
44 | // Prevents content fields returning a value
45 | if (defaultValue === undefined) continue;
46 |
47 | // Use lodash set to support nested fields, e.g. `cloudBuild.branch`
48 | _set(defaultValues, field.name, defaultValue);
49 | }
50 |
51 | return { ...defaultValues, ...mergeValues };
52 | };
53 |
54 | /**
55 | * Creates a Yup object schema to validate the entire form
56 | * @param fields Fields used in the form
57 | * @param customComponents Custom components used in the form
58 | */
59 | export const getValidationSchema = (
60 | fields: Fields,
61 | customComponents?: CustomComponents
62 | ) => {
63 | const objectShape: ObjectShape = {};
64 |
65 | for (const field of fields) {
66 | if (!field || !field.name) continue;
67 |
68 | let validation: any[][] = [];
69 |
70 | if (!!customComponents && field.type in customComponents) {
71 | // Get default validation from customComponents
72 | validation = customComponents[field.type].validation ?? [];
73 | } else {
74 | // Get default validation from built-in components
75 | const validationFunction = getFieldProp('validation', field.type);
76 | if (validationFunction) validation = validationFunction(field);
77 | }
78 |
79 | // If we intentionally don’t validate this field, e.g. content fields:
80 | if (validation.length === 0) continue;
81 |
82 | // Add the required validation message for all field types
83 | if (field.required === true)
84 | validation.splice(1, 0, [
85 | 'required',
86 | `${field.label || field.name} is required`,
87 | ]);
88 |
89 | // Append custom validation from the form’s field config to the default validation
90 | // Wrap in lodash values function to support { 0: [], 1: [] } object for Firestore
91 | // Also support nested { 0: { 0: [], 1: … }, […] } with miixed types
92 | const sanitizedValidation = _values(_mapValues(field.validation, _values));
93 | if (sanitizedValidation.length > 0)
94 | validation = [...validation, ...sanitizedValidation];
95 |
96 | // Reduce the array of arrays to the Yup schema for this field
97 | const schema = validation.reduce((a, c) => {
98 | const [type, ...args] = c;
99 | // Check the method exists in Yup & call with args
100 | if (type in a) return (a[type as keyof typeof a] as any)(...args);
101 | // Otherwise, return the current schema
102 | return a;
103 | }, yup);
104 |
105 | // Use lodash set to support nested fields, e.g. `cloudBuild.branch`
106 | _set(objectShape, field.name, schema);
107 | }
108 |
109 | // Recursively ensure all nested fields are Yup schemas
110 | // wrapped in Yup object schemas
111 | const recursiveObjectShape = (object: Record) => {
112 | for (const [key, value] of Object.entries(object)) {
113 | if (yup.BaseSchema.prototype.isPrototypeOf(value)) continue;
114 | object[key] = yup.object().shape(recursiveObjectShape(value) as any);
115 | }
116 | return object;
117 | };
118 |
119 | return yup.object().shape(recursiveObjectShape(objectShape));
120 | };
121 |
122 | /**
123 | * Gets the form values that have changed
124 | * @param current Current form values
125 | * @param changed Changed form values (a subset of form values)
126 | * @returns An object with only the form values that changed
127 | */
128 | export const diffChanges = (
129 | current: { [key: string]: any },
130 | changed: { [key: string]: any }
131 | ) => {
132 | return _pickBy(changed, (val, key) => !_isEqual(val, current[key]));
133 | };
134 |
135 | /**
136 | * Stubs Controller render props
137 | */
138 | export const controllerRenderPropsStub: any = {
139 | field: {
140 | onChange: () => {},
141 | onBlur: () => {},
142 | ref: undefined as any,
143 | },
144 | fieldState: {},
145 | formState: {},
146 | };
147 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["src", "types"],
3 | "compilerOptions": {
4 | "module": "esnext",
5 | "lib": ["dom", "esnext"],
6 | "importHelpers": true,
7 | "declaration": true,
8 | "sourceMap": true,
9 | "rootDir": "./src",
10 | "strict": true,
11 | "noUnusedLocals": true,
12 | "noUnusedParameters": false,
13 | "noImplicitReturns": true,
14 | "noFallthroughCasesInSwitch": true,
15 | "moduleResolution": "node",
16 | "baseUrl": "./",
17 | "paths": {
18 | "@": ["./"],
19 | "*": ["src/*", "node_modules/*"]
20 | },
21 | "jsx": "react",
22 | "esModuleInterop": true
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/tsdx.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | // Not transpiled with TypeScript or Babel, so use plain Es6/Node.js!
4 | module.exports = {
5 | // This function will run for each entry/format/env combination
6 | rollup(config, options) {
7 | const { output, ...restConfig } = config;
8 | const { file, ...restOutput } = output;
9 | // Remove file ref and insert dir to support React.lazy();
10 | return {
11 | ...restConfig,
12 | output: {
13 | ...restOutput,
14 | dir: path.join(__dirname, 'dist'),
15 | },
16 | }; // always return a config.
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/types/react-element-scroll-hook.ts:
--------------------------------------------------------------------------------
1 | declare module 'react-element-scroll-hook' {
2 | const hook: any;
3 | export default hook;
4 | }
5 |
--------------------------------------------------------------------------------