@webiny/ui 0.0.0-unstable.d7f521b032 → 0.0.0-unstable.ecd8734205
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.
|
@@ -79,6 +79,9 @@ var DelayedOnChange = function DelayedOnChange(_ref) {
|
|
|
79
79
|
|
|
80
80
|
// Need to apply value if input lost focus
|
|
81
81
|
var onBlur = function onBlur(ev) {
|
|
82
|
+
if (!ev["persist"]) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
82
85
|
ev.persist();
|
|
83
86
|
applyValue(ev.target.value, function () {
|
|
84
87
|
return realOnBlur(ev);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["emptyFunction","undefined","DelayedOnChange","children","other","onChange","delay","initialValue","value","useState","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n return undefined;\n};\n\ninterface ApplyValueCb {\n (value: string, cb: (value: string) => void): void;\n}\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCallable {\n (value: string, cb?: ApplyValueCb): void;\n}\ninterface OnBlurCallable {\n (ev: React.SyntheticEvent): void;\n}\ninterface OnKeyDownCallable {\n (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\ninterface ChildrenCallableParams {\n value: string;\n onChange: OnChangeCallable;\n}\ninterface ChildrenCallable {\n (params: ChildrenCallableParams): React.ReactElement;\n}\nexport interface DelayedOnChangeProps {\n value?: string;\n delay?: number;\n onChange?: OnChangeCallable;\n onBlur?: OnBlurCallable;\n onKeyDown?: OnKeyDownCallable;\n children: React.ReactNode | ChildrenCallable;\n}\nexport const DelayedOnChange: React.FC<DelayedOnChangeProps> = ({ children, ...other }) => {\n const { onChange, delay = 400, value: initialValue } = other;\n const [value, setValue] = useState<string | undefined>(initialValue);\n // Sync state and props\n useEffect(() => {\n if (initialValue !== value) {\n setValue(initialValue);\n }\n }, [initialValue]);\n\n const localTimeout = React.useRef<number | null>(null);\n\n const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n if (!onChange) {\n return;\n }\n onChange(value, callback);\n };\n\n const onChangeLocal = React.useCallback((value: string) => {\n setValue(value);\n }, []);\n\n // this is fired upon change value state\n const onValueStateChanged = (nextValue: string) => {\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n };\n\n // need to clear the timeout when unmounting the component\n useEffect(() => {\n return () => {\n if (!localTimeout.current) {\n return;\n }\n clearTimeout(localTimeout.current);\n localTimeout.current = null;\n };\n }, []);\n\n useEffect(() => {\n onValueStateChanged(value || \"\");\n }, [value]);\n\n const newProps = {\n ...other,\n value: value || \"\",\n onChange: onChangeLocal\n };\n\n const renderProp = typeof children === \"function\" ? (children as ChildrenCallable) : null;\n const child = renderProp\n ? renderProp(newProps)\n : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n const props = { ...child.props };\n const realOnKeyDown = props.onKeyDown || emptyFunction;\n const realOnBlur = props.onBlur || emptyFunction;\n\n // Need to apply value if input lost focus\n const onBlur: OnBlurCallable = ev => {\n ev.persist();\n applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n };\n\n // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n const onKeyDown: OnKeyDownCallable = ev => {\n ev.persist();\n if (ev.key === \"Tab\") {\n applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n } else {\n realOnKeyDown(ev);\n }\n };\n\n return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":";;;;;;;;;;;AAAA;AAAmD;AAEnD,IAAMA,aAAa,GAAG,SAAhBA,aAAa,GAAoB;EACnC,OAAOC,SAAS;AACpB,CAAC;AAsCM,IAAMC,eAA+C,GAAG,SAAlDA,eAA+C,OAA+B;EAAA,IAAzBC,QAAQ,QAARA,QAAQ;IAAKC,KAAK;EAChF,IAAQC,QAAQ,GAAuCD,KAAK,CAApDC,QAAQ;IAAA,eAAuCD,KAAK,CAA1CE,KAAK;IAALA,KAAK,6BAAG,GAAG;IAASC,YAAY,GAAKH,KAAK,CAA7BI,KAAK;EACpC,gBAA0B,IAAAC,eAAQ,EAAqBF,YAAY,CAAC;IAAA;IAA7DC,KAAK;IAAEE,QAAQ;EACtB;EACA,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAIJ,YAAY,KAAKC,KAAK,EAAE;MACxBE,QAAQ,CAACH,YAAY,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,IAAMK,YAAY,GAAGC,cAAK,CAACC,MAAM,CAAgB,IAAI,CAAC;EAEtD,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIP,KAAa,EAA6C;IAAA,IAA3CQ,QAAsB,uEAAGhB,aAAa;IACrEY,YAAY,CAACK,OAAO,IAAIC,YAAY,CAACN,YAAY,CAACK,OAAO,CAAC;IAC1DL,YAAY,CAACK,OAAO,GAAG,IAAI;IAC3B,IAAI,CAACZ,QAAQ,EAAE;MACX;IACJ;IACAA,QAAQ,CAACG,KAAK,EAAEQ,QAAQ,CAAC;EAC7B,CAAC;EAED,IAAMG,aAAa,GAAGN,cAAK,CAACO,WAAW,CAAC,UAACZ,KAAa,EAAK;IACvDE,QAAQ,CAACF,KAAK,CAAC;EACnB,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,IAAMa,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,SAAiB,EAAK;IAC/CV,YAAY,CAACK,OAAO,IAAIC,YAAY,CAACN,YAAY,CAACK,OAAO,CAAC;IAC1DL,YAAY,CAACK,OAAO,GAAG,IAAI;IAC3BL,YAAY,CAACK,OAAO,GAAGM,UAAU,CAAC;MAAA,OAAMR,UAAU,CAACO,SAAS,CAAC;IAAA,GAAEhB,KAAK,CAAsB;EAC9F,CAAC;;EAED;EACA,IAAAK,gBAAS,EAAC,YAAM;IACZ,OAAO,YAAM;MACT,IAAI,CAACC,YAAY,CAACK,OAAO,EAAE;QACvB;MACJ;MACAC,YAAY,CAACN,YAAY,CAACK,OAAO,CAAC;MAClCL,YAAY,CAACK,OAAO,GAAG,IAAI;IAC/B,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAN,gBAAS,EAAC,YAAM;IACZU,mBAAmB,CAACb,KAAK,IAAI,EAAE,CAAC;EACpC,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAMgB,QAAQ,+DACPpB,KAAK;IACRI,KAAK,EAAEA,KAAK,IAAI,EAAE;IAClBH,QAAQ,EAAEc;EAAa,EAC1B;EAED,IAAMM,UAAU,GAAG,OAAOtB,QAAQ,KAAK,UAAU,GAAIA,QAAQ,GAAwB,IAAI;EACzF,IAAMuB,KAAK,GAAGD,UAAU,GAClBA,UAAU,CAACD,QAAQ,CAAC,gBACpBX,cAAK,CAACc,YAAY,CAACxB,QAAQ,EAAmCqB,QAAQ,CAAC;EAE7E,IAAMI,KAAK,mCAAQF,KAAK,CAACE,KAAK,CAAE;EAChC,IAAMC,aAAa,GAAGD,KAAK,CAACE,SAAS,IAAI9B,aAAa;EACtD,IAAM+B,UAAU,GAAGH,KAAK,CAACI,MAAM,IAAIhC,aAAa;;EAEhD;EACA,IAAMgC,MAAsB,GAAG,SAAzBA,MAAsB,CAAGC,EAAE,EAAI;
|
|
1
|
+
{"version":3,"names":["emptyFunction","undefined","DelayedOnChange","children","other","onChange","delay","initialValue","value","useState","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n return undefined;\n};\n\ninterface ApplyValueCb {\n (value: string, cb: (value: string) => void): void;\n}\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCallable {\n (value: string, cb?: ApplyValueCb): void;\n}\ninterface OnBlurCallable {\n (ev: React.SyntheticEvent): void;\n}\ninterface OnKeyDownCallable {\n (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\ninterface ChildrenCallableParams {\n value: string;\n onChange: OnChangeCallable;\n}\ninterface ChildrenCallable {\n (params: ChildrenCallableParams): React.ReactElement;\n}\nexport interface DelayedOnChangeProps {\n value?: string;\n delay?: number;\n onChange?: OnChangeCallable;\n onBlur?: OnBlurCallable;\n onKeyDown?: OnKeyDownCallable;\n children: React.ReactNode | ChildrenCallable;\n}\nexport const DelayedOnChange: React.FC<DelayedOnChangeProps> = ({ children, ...other }) => {\n const { onChange, delay = 400, value: initialValue } = other;\n const [value, setValue] = useState<string | undefined>(initialValue);\n // Sync state and props\n useEffect(() => {\n if (initialValue !== value) {\n setValue(initialValue);\n }\n }, [initialValue]);\n\n const localTimeout = React.useRef<number | null>(null);\n\n const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n if (!onChange) {\n return;\n }\n onChange(value, callback);\n };\n\n const onChangeLocal = React.useCallback((value: string) => {\n setValue(value);\n }, []);\n\n // this is fired upon change value state\n const onValueStateChanged = (nextValue: string) => {\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n };\n\n // need to clear the timeout when unmounting the component\n useEffect(() => {\n return () => {\n if (!localTimeout.current) {\n return;\n }\n clearTimeout(localTimeout.current);\n localTimeout.current = null;\n };\n }, []);\n\n useEffect(() => {\n onValueStateChanged(value || \"\");\n }, [value]);\n\n const newProps = {\n ...other,\n value: value || \"\",\n onChange: onChangeLocal\n };\n\n const renderProp = typeof children === \"function\" ? (children as ChildrenCallable) : null;\n const child = renderProp\n ? renderProp(newProps)\n : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n const props = { ...child.props };\n const realOnKeyDown = props.onKeyDown || emptyFunction;\n const realOnBlur = props.onBlur || emptyFunction;\n\n // Need to apply value if input lost focus\n const onBlur: OnBlurCallable = ev => {\n if (!ev[\"persist\"]) {\n return;\n }\n ev.persist();\n applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n };\n\n // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n const onKeyDown: OnKeyDownCallable = ev => {\n ev.persist();\n if (ev.key === \"Tab\") {\n applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n } else {\n realOnKeyDown(ev);\n }\n };\n\n return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/ui",
|
|
3
|
-
"version": "0.0.0-unstable.
|
|
3
|
+
"version": "0.0.0-unstable.ecd8734205",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -81,11 +81,11 @@
|
|
|
81
81
|
"@types/react-custom-scrollbars": "^4.0.10",
|
|
82
82
|
"@types/react-transition-group": "^4.4.4",
|
|
83
83
|
"@types/shortid": "^0.0.29",
|
|
84
|
-
"@webiny/cli": "^0.0.0-unstable.
|
|
85
|
-
"@webiny/form": "^0.0.0-unstable.
|
|
86
|
-
"@webiny/project-utils": "^0.0.0-unstable.
|
|
87
|
-
"@webiny/storybook-utils": "^0.0.0-unstable.
|
|
88
|
-
"@webiny/validation": "^0.0.0-unstable.
|
|
84
|
+
"@webiny/cli": "^0.0.0-unstable.ecd8734205",
|
|
85
|
+
"@webiny/form": "^0.0.0-unstable.ecd8734205",
|
|
86
|
+
"@webiny/project-utils": "^0.0.0-unstable.ecd8734205",
|
|
87
|
+
"@webiny/storybook-utils": "^0.0.0-unstable.ecd8734205",
|
|
88
|
+
"@webiny/validation": "^0.0.0-unstable.ecd8734205",
|
|
89
89
|
"babel-loader": "^8.0.0-beta.6",
|
|
90
90
|
"babel-plugin-emotion": "^9.2.8",
|
|
91
91
|
"execa": "^5.0.0",
|
|
@@ -132,5 +132,5 @@
|
|
|
132
132
|
]
|
|
133
133
|
}
|
|
134
134
|
},
|
|
135
|
-
"gitHead": "
|
|
135
|
+
"gitHead": "ecd8734205e0e21ae04076c28ff9806dad07a730"
|
|
136
136
|
}
|