@toptal/picasso-forms 20.0.0 → 20.1.0
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.
- package/Form/Form.d.ts +1 -0
- package/Form/Form.js +4 -2
- package/Form/Form.js.map +1 -1
- package/package.json +1 -1
- package/utils/scroll-to-error-decorator.d.ts +4 -1
- package/utils/scroll-to-error-decorator.js +5 -8
- package/utils/scroll-to-error-decorator.js.map +1 -1
- package/utils/scroll-to.d.ts +1 -0
- package/utils/scroll-to.js +10 -0
- package/utils/scroll-to.js.map +1 -0
package/Form/Form.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
|
|
|
2
2
|
import { FormProps as FinalFormProps } from 'react-final-form';
|
|
3
3
|
import { AnyObject } from 'final-form';
|
|
4
4
|
export declare type Props<T = AnyObject> = FinalFormProps<T> & {
|
|
5
|
+
disableScrollOnError?: boolean;
|
|
5
6
|
autoComplete?: HTMLFormElement['autocomplete'];
|
|
6
7
|
successSubmitMessage?: ReactNode;
|
|
7
8
|
failedSubmitMessage?: ReactNode;
|
package/Form/Form.js
CHANGED
|
@@ -60,9 +60,11 @@ const getValidationErrors = (validators, formValues, form) => {
|
|
|
60
60
|
return errors;
|
|
61
61
|
};
|
|
62
62
|
export const Form = (props) => {
|
|
63
|
-
const { children, autoComplete, onSubmit, successSubmitMessage, failedSubmitMessage, decorators = [], 'data-testid': dataTestId } = props, rest = __rest(props, ["children", "autoComplete", "onSubmit", "successSubmitMessage", "failedSubmitMessage", "decorators", 'data-testid']);
|
|
63
|
+
const { children, autoComplete, disableScrollOnError, onSubmit, successSubmitMessage, failedSubmitMessage, decorators = [], 'data-testid': dataTestId } = props, rest = __rest(props, ["children", "autoComplete", "disableScrollOnError", "onSubmit", "successSubmitMessage", "failedSubmitMessage", "decorators", 'data-testid']);
|
|
64
64
|
const { showSuccess, showError } = useNotifications();
|
|
65
|
-
const scrollToErrorDecorator = useMemo(() => createScrollToErrorDecorator(
|
|
65
|
+
const scrollToErrorDecorator = useMemo(() => createScrollToErrorDecorator({
|
|
66
|
+
disableScrollOnError
|
|
67
|
+
}), [disableScrollOnError]);
|
|
66
68
|
const validationObject = useRef(createFormContext());
|
|
67
69
|
const showSuccessNotification = () => {
|
|
68
70
|
if (!successSubmitMessage) {
|
package/Form/Form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/Form/Form.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAa,MAAM,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EACL,IAAI,IAAI,SAAS,EAElB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAA6B,KAAK,EAAE,KAAK,EAAa,MAAM,YAAY,CAAA;AAC/E,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,MAAM,UAAU,CAAA;AAC5B,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,KAAK,MAAM,UAAU,CAAA;AAC5B,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,EACL,WAAW,EAGX,iBAAiB,EAClB,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/Form/Form.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
import { FormApi } from 'final-form';
|
|
2
|
-
declare
|
|
2
|
+
declare type ScrollToErrorProps = {
|
|
3
|
+
disableScrollOnError?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare const _default: ({ disableScrollOnError }?: ScrollToErrorProps) => <T>(form: FormApi<T, Partial<T>>) => () => void;
|
|
3
6
|
export default _default;
|
|
@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
-
|
|
10
|
+
import { scrollTo } from './scroll-to';
|
|
11
11
|
const getErrorField = () => document.querySelector('[data-field-has-error="true"]');
|
|
12
12
|
const getErrorFieldAfterNextPaint = () => new Promise(resolve => {
|
|
13
13
|
const resolveField = () => resolve(getErrorField());
|
|
@@ -26,14 +26,8 @@ const getErrorFieldWithRetries = () => __awaiter(void 0, void 0, void 0, functio
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
|
-
const scrollTo = (field) => {
|
|
30
|
-
var _a;
|
|
31
|
-
field.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
|
32
|
-
(_a = field
|
|
33
|
-
.querySelector(UNHIDDEN_INPUT_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
|
|
34
|
-
};
|
|
35
29
|
let state = {};
|
|
36
|
-
export default () => (form) => {
|
|
30
|
+
export default ({ disableScrollOnError } = {}) => (form) => {
|
|
37
31
|
const originalSubmit = form.submit;
|
|
38
32
|
const unsubscribe = form.subscribe(nextState => {
|
|
39
33
|
state = nextState;
|
|
@@ -50,6 +44,9 @@ export default () => (form) => {
|
|
|
50
44
|
// Rewrite submit function
|
|
51
45
|
form.submit = () => {
|
|
52
46
|
const result = originalSubmit.call(form);
|
|
47
|
+
if (disableScrollOnError) {
|
|
48
|
+
return result;
|
|
49
|
+
}
|
|
53
50
|
if (result && typeof result.then === 'function') {
|
|
54
51
|
result.then(scrollOnErrors).catch(() => { });
|
|
55
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-to-error-decorator.js","sourceRoot":"","sources":["../../src/utils/scroll-to-error-decorator.ts"],"names":[],"mappings":";;;;;;;;;AAEA,
|
|
1
|
+
{"version":3,"file":"scroll-to-error-decorator.js","sourceRoot":"","sources":["../../src/utils/scroll-to-error-decorator.ts"],"names":[],"mappings":";;;;;;;;;AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAMtC,MAAM,aAAa,GAAG,GAAG,EAAE,CACzB,QAAQ,CAAC,aAAa,CAAc,+BAA+B,CAAC,CAAA;AAEtE,MAAM,2BAA2B,GAAG,GAAG,EAAE,CACvC,IAAI,OAAO,CAAqB,OAAO,CAAC,EAAE;IACxC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,CAAA;IAEnD,IAAI,OAAO,qBAAqB,KAAK,WAAW,EAAE;QAChD,UAAU,CAAC,YAAY,EAAE,EAAE,CAAC,CAAA;KAC7B;SAAM;QACL,qBAAqB,CAAC,YAAY,CAAC,CAAA;KACpC;AACH,CAAC,CAAC,CAAA;AAEJ,MAAM,wBAAwB,GAAG,GAAS,EAAE;IAC1C,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,MAAM,2BAA2B,EAAE,CAAA;QAEjD,IAAI,KAAK,EAAE;YACT,OAAO,KAAK,CAAA;SACb;KACF;AACH,CAAC,CAAA,CAAA;AAED,IAAI,KAAK,GAA+C,EAAE,CAAA;AAE1D,eAAe,CAAC,EAAE,oBAAoB,KAAyB,EAAE,EAAE,EAAE,CAAC,CACpE,IAAgB,EAChB,EAAE;IACF,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAA;IAElC,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAChC,SAAS,CAAC,EAAE;QACV,KAAK,GAAG,SAAS,CAAA;IACnB,CAAC,EACD,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,CACrC,CAAA;IAED,MAAM,cAAc,GAAG,GAAS,EAAE;QAChC,MAAM,EAAE,MAAM,GAAG,EAAE,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,KAAK,CAAA;QAEhD,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,EAAE;YAClE,MAAM,KAAK,GAAG,MAAM,wBAAwB,EAAE,CAAA;YAE9C,IAAI,KAAK,EAAE;gBACT,QAAQ,CAAC,KAAK,CAAC,CAAA;aAChB;SACF;IACH,CAAC,CAAA,CAAA;IAED,0BAA0B;IAC1B,IAAI,CAAC,MAAM,GAAG,GAAG,EAAE;QACjB,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,IAAI,oBAAoB,EAAE;YACxB,OAAO,MAAM,CAAA;SACd;QAED,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;YAC/C,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;SAC5C;aAAM;YACL,cAAc,EAAE,CAAA;SACjB;QAED,OAAO,MAAM,CAAA;IACf,CAAC,CAAA;IAED,OAAO,GAAG,EAAE;QACV,KAAK,GAAG,EAAE,CAAA;QACV,WAAW,EAAE,CAAA;QACb,IAAI,CAAC,MAAM,GAAG,cAAc,CAAA;IAC9B,CAAC,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const scrollTo: (field: HTMLElement) => void;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
const UNHIDDEN_INPUT_SELECTOR = 'input:not([type=hidden])';
|
|
2
|
+
export const scrollTo = (field) => {
|
|
3
|
+
var _a;
|
|
4
|
+
if (typeof field.scrollIntoView === 'function') {
|
|
5
|
+
field.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
|
6
|
+
}
|
|
7
|
+
(_a = field
|
|
8
|
+
.querySelector(UNHIDDEN_INPUT_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=scroll-to.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll-to.js","sourceRoot":"","sources":["../../src/utils/scroll-to.ts"],"names":[],"mappings":"AAAA,MAAM,uBAAuB,GAAG,0BAA0B,CAAA;AAE1D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE;;IAC7C,IAAI,OAAO,KAAK,CAAC,cAAc,KAAK,UAAU,EAAE;QAC9C,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;KAC9D;IACD,MAAA,KAAK;SACF,aAAa,CAAmB,uBAAuB,CAAC,0CACvD,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAA;AACpC,CAAC,CAAA"}
|