Skip to content

Commit

Permalink
Remove lodash, fix useIsDirty, fix parcel
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikhilag
nikhilag committed Apr 13, 2021
1 parent ab8ce35 commit 86fa9ef
Show file tree
Hide file tree
Showing 8 changed files with 2,488 additions and 3,195 deletions.
3 changes: 2 additions & 1 deletion example/.npmignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
.cache
dist
dist
.parcel-cache
4 changes: 2 additions & 2 deletions example/forms/Fields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function InputField(props: InputFieldProps) {
field.setFieldValue(evt.target.value);
}
}}
value={field.fieldValue ?? ''}
value={field.fieldValue}
onBlur={field.onBlur}
/>
</div>
Expand Down Expand Up @@ -97,7 +97,7 @@ export function WatchField(props: WatchFieldProps) {
return (
<div>
<label htmlFor={props.name}>{props.name}</label>
<input id={props.name} type="text" disabled value={value} />;
<input id={props.name} type="text" disabled value={value} />
</div>
);
}
2 changes: 1 addition & 1 deletion example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"devDependencies": {
"@types/react": "^16.9.11",
"@types/react-dom": "^16.8.4",
"parcel": "^2.0.0-beta.2",
"parcel-bundler": "1.12.5",
"typescript": "^3.4.5"
}
}
2,323 changes: 850 additions & 1,473 deletions example/yarn.lock
View file

Large diffs are not rendered by default.

5 changes: 1 addition & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
},
"peerDependencies": {
"immer": ">=7.0.0",
"lodash": ">=4.17.0",
"react": ">=16",
"recoil": ">=0.2.0"
},
Expand Down Expand Up @@ -54,13 +53,11 @@
}
],
"devDependencies": {
"@size-limit/preset-small-lib": "^4.6.2",
"@types/lodash": "^4.14.168",
"@size-limit/preset-small-lib": "^4.10.2",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"husky": "^4.3.0",
"immer": "^9.0.1",
"lodash": "^4.17.21",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"recoil": "^0.2.0",
Expand Down
97 changes: 45 additions & 52 deletions src/FormProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,8 @@ import {
useRecoilValue,
useSetRecoilState,
} from 'recoil';
import lodashGet from 'lodash/get';
import lodashSetWith from 'lodash/setWith';
import clone from 'lodash/clone';
import produce from 'immer';
import lodashIsEqual from 'lodash/isEqual';

// TODO: Introduce a setting to choose if numbers should be treated as index or not
const lodashSet = (obj: any, path: any, value: any) =>
lodashSetWith(obj, path, value, Object);
import { getPathInObj, setPathInObj, isDeepEqual, cloneDeep } from './utils';

function gan(atomName: string) {
return `WitForm_${atomName}`;
Expand Down Expand Up @@ -101,7 +94,12 @@ function getFieldArrayParts(fieldName: string) {

export const fieldsAtomFamily = atomFamily<IFieldAtomValue, string>({
key: gan('FormFields'),
default: { data: null, error: undefined, initVer: 0, touched: undefined },
default: {
data: undefined,
error: undefined,
initVer: 0,
touched: undefined,
},
});

export const formValuesAtom = atom<FinalValues>({
Expand All @@ -111,7 +109,7 @@ export const formValuesAtom = atom<FinalValues>({

export const formInitialValuesAtom = atom<InitialValues>({
key: gan('FormInitialValues'),
default: { values: null, version: 0 },
default: { values: {}, version: 0 },
});

export const fieldArraysAtomFamily = atomFamily<IFieldArrayAtomValue, string>({
Expand All @@ -135,15 +133,15 @@ export const fieldsAtomSelectorFamily = selectorFamily<
const fieldArrayParts = fieldName.split('/');
if (fieldArrayParts.length === 1) {
const fieldAtomVal = get(fieldsAtomFamily(fieldName));
lodashSet(values, fieldName, fieldAtomVal?.data);
lodashSet(extraInfos, fieldName, fieldAtomVal?.extraInfo);
setPathInObj(values, fieldName, fieldAtomVal?.data);
setPathInObj(extraInfos, fieldName, fieldAtomVal?.extraInfo);
} else {
const fieldArrayFields = fieldArrayParts.slice(1);
const fieldArrayName = fieldArrayParts[0];
const fieldArrayAtom = fieldArraysAtomFamily(fieldArrayName);
const fieldArrayInfo = get(fieldArrayAtom);
lodashSet(values, fieldArrayName, []);
lodashSet(extraInfos, fieldArrayName, []);
setPathInObj(values, fieldArrayName, []);
setPathInObj(extraInfos, fieldArrayName, []);
for (let i = 0; i < fieldArrayInfo.rowIds.length; i++) {
const rowId = fieldArrayInfo.rowIds[i];
let fieldValues: any = {};
Expand All @@ -153,12 +151,12 @@ export const fieldsAtomSelectorFamily = selectorFamily<
if (fieldId) {
const fieldAtom = fieldsAtomFamily(fieldId);
const fieldData = get(fieldAtom);
lodashSet(fieldValues, field, fieldData.data);
lodashSet(extraInfoValues, field, fieldData.extraInfo);
setPathInObj(fieldValues, field, fieldData.data);
setPathInObj(extraInfoValues, field, fieldData.extraInfo);
}
}
lodashGet(values, fieldArrayName).push(fieldValues);
lodashGet(extraInfos, fieldArrayName).push(extraInfoValues);
getPathInObj(values, fieldArrayName).push(fieldValues);
getPathInObj(extraInfos, fieldArrayName).push(extraInfoValues);
}
}
}
Expand Down Expand Up @@ -226,11 +224,11 @@ function FormValuesObserver() {
const newFormValues = produce(values, draftValues => {
for (const fieldArrPathRemove of fieldArrayPathsToRemove) {
if (fieldArrPathRemove.fieldArrayPath) {
lodashGet(
getPathInObj(
draftValues.values,
fieldArrPathRemove.fieldArrayPath
)?.splice?.(fieldArrPathRemove.index, 1);
lodashGet(
getPathInObj(
draftValues.extraInfos,
fieldArrPathRemove.fieldArrayPath
)?.splice?.(fieldArrPathRemove.index, 1);
Expand All @@ -242,11 +240,7 @@ function FormValuesObserver() {
);
if (atomLoadable.state === 'hasValue') {
const atomValue = atomLoadable.contents;
if (
atomValue?.data !== undefined &&
atomValue?.data !== null &&
atomValue?.data !== ''
) {
// if (atomValue?.data !== undefined) {
const fieldName = getNameFromAtomFamilyKey(modifiedAtom.key);
if (fieldName) {
const fieldArrayParts = getFieldArrayParts(fieldName);
Expand All @@ -259,30 +253,30 @@ function FormValuesObserver() {
fieldArrayParts.rowId
);
const fieldPathInValues = `${fieldArrayParts.fieldArrayName}[${rowIndex}].${fieldArrayParts.fieldName}`;
lodashSet(
setPathInObj(
draftValues.values,
fieldPathInValues,
clone(atomLoadable.contents.data)
cloneDeep(atomLoadable.contents.data)
);
lodashSet(
setPathInObj(
draftValues.extraInfos,
fieldPathInValues,
clone(atomLoadable.contents.extraInfo)
cloneDeep(atomLoadable.contents.extraInfo)
);
}
} else {
lodashSet(
setPathInObj(
draftValues.values,
fieldName,
clone(atomLoadable.contents.data)
cloneDeep(atomLoadable.contents.data)
);
lodashSet(
setPathInObj(
draftValues.extraInfos,
fieldName,
clone(atomLoadable.contents.extraInfo)
cloneDeep(atomLoadable.contents.extraInfo)
);
}
}
// }
} else {
// TODO: Delete from final data
}
Expand Down Expand Up @@ -346,10 +340,9 @@ export function useField(props: IFieldProps) {
const fieldArrayParts = getFieldArrayParts(name);
//TODO: Add field array atoms depending on initial values
if (!fieldArrayParts) {
const initialValue = lodashGet(initialValues.values, name);
// DEVNOTE: It is being set as null in the end to avoid this function running again in case initialValue and defaultValue both are missing.
const initialValue = getPathInObj(initialValues.values, name);
set(fieldsAtomFamily(name), {
data: initialValue ?? defaultValue ?? null,
data: initialValue ?? defaultValue ?? undefined,
error: undefined,
validate,
initVer: initialValues.version,
Expand Down Expand Up @@ -438,8 +431,8 @@ export function useWatch(props: IWatchParams) {
const selector = fieldsAtomSelectorFamily([name]);
const { values, extraInfos } = useRecoilValue(selector);
return {
value: values ? lodashGet(values, name) : defaultValue,
extraInfo: lodashGet(extraInfos, name),
value: values ? getPathInObj(values, name) : defaultValue,
extraInfo: getPathInObj(extraInfos, name),
};
}

Expand All @@ -453,7 +446,7 @@ export function useMultipleWatch(props: IMultipleWatchParams) {
export function useIsDirty() {
const { values: formValues } = useRecoilValue(formValuesAtom);
const { values: initialValues } = useRecoilValue(formInitialValuesAtom);
return !lodashIsEqual(initialValues, formValues);
return !isDeepEqual(initialValues, formValues);
}

export function useFormValues() {
Expand Down Expand Up @@ -572,7 +565,7 @@ export function useFieldArray(props: IFieldArrayProps) {
if (fieldId) {
set(fieldsAtomFamily(fieldId), currValue =>
produce(currValue, draft => {
draft.data = lodashGet(fieldRow, fieldName);
draft.data = getPathInObj(fieldRow, fieldName);
})
);
}
Expand Down Expand Up @@ -621,7 +614,7 @@ export function useFieldArray(props: IFieldArrayProps) {
fieldsAtomFamily(fieldId)
);
if (fieldLoadable.state === 'hasValue') {
lodashSet(
setPathInObj(
result[index],
fieldArrayFieldName,
fieldLoadable.contents?.data
Expand Down Expand Up @@ -661,7 +654,7 @@ export function useFieldArray(props: IFieldArrayProps) {
fieldsAtomFamily(fieldId)
);
if (fieldLoadable.state === 'hasValue') {
lodashSet(result[index], fieldName, fieldLoadable.contents?.data);
setPathInObj(result[index], fieldName, fieldLoadable.contents?.data);
}
}
}
Expand All @@ -688,7 +681,7 @@ export function useFieldArray(props: IFieldArrayProps) {
});
if (row) {
for (const fieldName of fieldNames) {
const rowVal = lodashGet(row, fieldName);
const rowVal = getPathInObj(row, fieldName);
if (rowVal !== undefined && rowVal !== null) {
const fieldNameInArr = getIdForArrayField(
name,
Expand Down Expand Up @@ -786,7 +779,7 @@ export function useFieldArray(props: IFieldArrayProps) {
const initialValues = snapshot.getLoadable(formInitialValuesAtom)
.contents as InitialValues;
if (initialValues.values) {
const initialValue = lodashGet(initialValues.values, name);
const initialValue = getPathInObj(initialValues.values, name);
if (initialValue?.length) {
let rowIds: number[] = [];
for (let i = 0; i < initialValue.length; i++) {
Expand All @@ -807,7 +800,7 @@ export function useFieldArray(props: IFieldArrayProps) {
if (fieldAtomName) {
set(fieldsAtomFamily(fieldAtomName), value =>
Object.assign({}, value, {
data: lodashGet(obj, fieldName),
data: getPathInObj(obj, fieldName),
initVer: initialValues.version,
} as Partial<IFieldAtomValue>)
);
Expand Down Expand Up @@ -929,17 +922,17 @@ function getFormValues(snapshot: Snapshot) {
);
if (rowIndex >= 0) {
const fieldPathInValues = `${fieldArrayParts.fieldArrayName}[${rowIndex}].${fieldArrayParts.fieldName}`;
lodashSet(values, fieldPathInValues, clone(formFieldData.data));
lodashSet(
setPathInObj(values, fieldPathInValues, cloneDeep(formFieldData.data));
setPathInObj(
extraInfos,
fieldPathInValues,
clone(formFieldData.extraInfo)
cloneDeep(formFieldData.extraInfo)
);
}
}
} else {
lodashSet(values, fieldName, clone(formFieldData.data));
lodashSet(extraInfos, fieldName, clone(formFieldData.extraInfo));
setPathInObj(values, fieldName, cloneDeep(formFieldData.data));
setPathInObj(extraInfos, fieldName, cloneDeep(formFieldData.extraInfo));
}
}
formFieldAtomsIt = atoms.next();
Expand Down Expand Up @@ -1082,7 +1075,7 @@ export function useForm(props: IFormProps) {
fieldsAtomFamily(fieldId)
);
if (fieldLoadable.state === 'hasValue') {
lodashSet(
setPathInObj(
result[index],
fieldArrayFieldName,
fieldLoadable.contents?.data
Expand Down
Loading

0 comments on commit 86fa9ef

Please sign in to comment.