@webiny/ui 5.40.3 → 5.40.4-beta.1
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.
|
@@ -10,6 +10,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
|
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
|
|
13
14
|
var _excluded = ["children"];
|
|
14
15
|
var emptyFunction = function emptyFunction() {
|
|
15
16
|
return undefined;
|
|
@@ -39,9 +40,12 @@ var DelayedOnChange = exports.DelayedOnChange = function DelayedOnChange(_ref) {
|
|
|
39
40
|
setValue = _useState2[1];
|
|
40
41
|
// Sync state and props
|
|
41
42
|
(0, _react.useEffect)(function () {
|
|
42
|
-
if
|
|
43
|
-
|
|
43
|
+
// Do not update local state, if the incoming value is the same as the local state.
|
|
44
|
+
// This is primarily an optimization for non-scalar values (objects).
|
|
45
|
+
if ((0, _isEqual.default)(initialValue, value)) {
|
|
46
|
+
return;
|
|
44
47
|
}
|
|
48
|
+
setValue(initialValue);
|
|
45
49
|
}, [initialValue]);
|
|
46
50
|
var localTimeout = _react.default.useRef(null);
|
|
47
51
|
var applyValue = function applyValue(value) {
|
|
@@ -58,6 +62,10 @@ var DelayedOnChange = exports.DelayedOnChange = function DelayedOnChange(_ref) {
|
|
|
58
62
|
|
|
59
63
|
// this is fired upon change value state
|
|
60
64
|
var onValueStateChanged = function onValueStateChanged(nextValue) {
|
|
65
|
+
// We don't want to execute callbacks, if the value hasn't changed.
|
|
66
|
+
if ((0, _isEqual.default)(nextValue, initialValue)) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
61
69
|
localTimeout.current && clearTimeout(localTimeout.current);
|
|
62
70
|
localTimeout.current = null;
|
|
63
71
|
localTimeout.current = setTimeout(function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_excluded","emptyFunction","undefined","DelayedOnChange","exports","_ref","children","other","_objectWithoutProperties2","default","firstMount","useRef","onChange","_other$delay","delay","initialValue","value","_useState","useState","_useState2","_slicedToArray2","setValue","useEffect","localTimeout","React","applyValue","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","_objectSpread2","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n return undefined;\n};\n\nexport interface ApplyValueCb {\n (value: string): 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 */\nexport interface OnChangeCallable {\n (value: string, cb?: ApplyValueCb): void;\n}\n\ninterface OnBlurCallable {\n (ev: React.SyntheticEvent): void;\n}\n\ninterface OnKeyDownCallable {\n (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\n\ninterface ChildrenCallableParams {\n value: string;\n onChange: OnChangeCallable;\n}\n\ninterface ChildrenCallable {\n (params: ChildrenCallableParams): React.ReactElement;\n}\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}\n\nexport const DelayedOnChange = ({ children, ...other }: DelayedOnChangeProps) => {\n const firstMount = useRef(true);\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
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_isEqual","_interopRequireDefault","_excluded","emptyFunction","undefined","DelayedOnChange","exports","_ref","children","other","_objectWithoutProperties2","default","firstMount","useRef","onChange","_other$delay","delay","initialValue","value","_useState","useState","_useState2","_slicedToArray2","setValue","useEffect","isEqual","localTimeout","React","applyValue","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","_objectSpread2","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport isEqual from \"lodash/isEqual\";\n\nconst emptyFunction = (): undefined => {\n return undefined;\n};\n\nexport interface ApplyValueCb {\n (value: string): 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 */\nexport interface OnChangeCallable {\n (value: string, cb?: ApplyValueCb): void;\n}\n\ninterface OnBlurCallable {\n (ev: React.SyntheticEvent): void;\n}\n\ninterface OnKeyDownCallable {\n (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\n\ninterface ChildrenCallableParams {\n value: string;\n onChange: OnChangeCallable;\n}\n\ninterface ChildrenCallable {\n (params: ChildrenCallableParams): React.ReactElement;\n}\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}\n\nexport const DelayedOnChange = ({ children, ...other }: DelayedOnChangeProps) => {\n const firstMount = useRef(true);\n const { onChange, delay = 400, value: initialValue } = other;\n const [value, setValue] = useState<string | undefined>(initialValue);\n // Sync state and props\n useEffect(() => {\n // Do not update local state, if the incoming value is the same as the local state.\n // This is primarily an optimization for non-scalar values (objects).\n if (isEqual(initialValue, value)) {\n return;\n }\n\n setValue(initialValue);\n }, [initialValue]);\n\n const localTimeout = React.useRef<number | null>(null);\n\n const applyValue = (value: string) => {\n localTimeout.current && clearTimeout(localTimeout.current);\n localTimeout.current = null;\n if (!onChange) {\n return;\n }\n onChange(value);\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 // We don't want to execute callbacks, if the value hasn't changed.\n if (isEqual(nextValue, initialValue)) {\n return;\n }\n\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 if (firstMount.current) {\n firstMount.current = false;\n return;\n }\n\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);\n 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);\n realOnKeyDown(ev);\n } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n applyValue((ev.target as HTMLInputElement).value);\n realOnKeyDown(ev);\n } else {\n realOnKeyDown(ev);\n }\n };\n\n return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n"],"mappings":"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","ignoreList":[]}
|
package/Select/Select.js
CHANGED
|
@@ -89,7 +89,10 @@ var Select = exports.Select = function Select(props) {
|
|
|
89
89
|
var _useMemo = (0, _react.useMemo)(function () {
|
|
90
90
|
var size = props.size,
|
|
91
91
|
label = props.label,
|
|
92
|
-
|
|
92
|
+
placeholderText = props.placeholder;
|
|
93
|
+
|
|
94
|
+
// If `placeholderText` is null, undefined, or an empty string after trimming, `placeholder` will be set to `undefined`.
|
|
95
|
+
var placeholder = placeholderText?.trim() || undefined;
|
|
93
96
|
|
|
94
97
|
// For small or medium size, we set only the placeholder, using label as fallback.
|
|
95
98
|
if (size === "small" || size === "medium") {
|
package/Select/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_select","_FormElementMessage","_classnames","_interopRequireDefault","_styled","_excluded","getOptions","initialOptions","Array","isArray","options","_iterator","_createForOfIteratorHelper2","default","_step","s","n","done","option","value","push","label","err","e","f","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","Select","exports","initialValue","description","validation","other","_objectWithoutProperties2","undefined","_ref","validationIsValid","isValid","validationMessage","message","_useMemo","useMemo","size","placeholder","createElement","Fragment","assign","ref","className","classNames","webinySelect","concat","onChange","target","FormElementMessage","error","_default"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n FormattedOption,\n Select as RmwcSelect,\n SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport classNames from \"classnames\";\nimport { webinySelect } from \"./styled\";\n\nexport type SelectProps = FormComponentProps &\n RmwcSelectProps & {\n // Component label.\n label?: string;\n\n // Is checkbox disabled?\n disabled?: boolean;\n\n // Description beneath the select.\n description?: string;\n\n // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n placeholder?: string;\n\n // Makes the Select have a visual box.\n box?: string;\n\n // One or more <option> or <optgroup> elements.\n children?: (React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">)[];\n\n // IconProps for the root element. By default, additional props spread to the native select element.\n rootProps?: {\n [key: string]: any;\n };\n\n // A className for the root element.\n className?: string;\n\n // Size - small, medium or large\n size?: \"small\" | \"medium\" | \"large\";\n };\n\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n if (!initialOptions) {\n return [];\n } else if (Array.isArray(initialOptions)) {\n const options: FormattedOption[] = [];\n for (const option of initialOptions) {\n if (typeof option === \"string\") {\n options.push({\n label: option,\n value: option\n });\n continue;\n }\n options.push({\n label: option.label,\n value: option.value,\n options: option.options\n });\n }\n return options;\n }\n return Object.keys(initialOptions).map(key => {\n return {\n label: initialOptions[key],\n value: key\n };\n });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n const newProps: FormComponentProps & RmwcSelectProps = {};\n Object.keys(props)\n .filter(name => !skipProps.includes(name))\n // @ts-expect-error\n .forEach((name: any) => (newProps[name] = props[name]));\n\n return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select = (props: SelectProps) => {\n const { value: initialValue, description, validation, ...other } = props;\n\n const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n const options = getOptions(other.options);\n\n // Memoize the label and placeholder values based on the component size.\n const { label, placeholder } = useMemo(() => {\n const { size, label, placeholder } = props;\n\n // For small or medium size, we set only the placeholder, using label as fallback.\n if (size === \"small\" || size === \"medium\") {\n return {\n label: undefined,\n placeholder: placeholder || label\n };\n }\n\n // For other sizes, use the provided label and placeholder.\n return {\n label,\n placeholder\n };\n }, [props.label, props.placeholder, props.size]);\n\n return (\n <>\n <RmwcSelect\n {...getRmwcProps(other)}\n ref={undefined}\n options={options}\n value={value}\n label={label}\n placeholder={placeholder}\n className={classNames(\n \"webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded\",\n webinySelect,\n props.size ? `webiny-ui-select--size-${props.size}` : null,\n props.className\n )}\n onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {\n props.onChange && props.onChange(e.target.value);\n }}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </>\n );\n};\n\nexport default Select;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_select","_FormElementMessage","_classnames","_interopRequireDefault","_styled","_excluded","getOptions","initialOptions","Array","isArray","options","_iterator","_createForOfIteratorHelper2","default","_step","s","n","done","option","value","push","label","err","e","f","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","Select","exports","initialValue","description","validation","other","_objectWithoutProperties2","undefined","_ref","validationIsValid","isValid","validationMessage","message","_useMemo","useMemo","size","placeholderText","placeholder","trim","createElement","Fragment","assign","ref","className","classNames","webinySelect","concat","onChange","target","FormElementMessage","error","_default"],"sources":["Select.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n FormattedOption,\n Select as RmwcSelect,\n SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport classNames from \"classnames\";\nimport { webinySelect } from \"./styled\";\n\nexport type SelectProps = FormComponentProps &\n RmwcSelectProps & {\n // Component label.\n label?: string;\n\n // Is checkbox disabled?\n disabled?: boolean;\n\n // Description beneath the select.\n description?: string;\n\n // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n placeholder?: string;\n\n // Makes the Select have a visual box.\n box?: string;\n\n // One or more <option> or <optgroup> elements.\n children?: (React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">)[];\n\n // IconProps for the root element. By default, additional props spread to the native select element.\n rootProps?: {\n [key: string]: any;\n };\n\n // A className for the root element.\n className?: string;\n\n // Size - small, medium or large\n size?: \"small\" | \"medium\" | \"large\";\n };\n\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n if (!initialOptions) {\n return [];\n } else if (Array.isArray(initialOptions)) {\n const options: FormattedOption[] = [];\n for (const option of initialOptions) {\n if (typeof option === \"string\") {\n options.push({\n label: option,\n value: option\n });\n continue;\n }\n options.push({\n label: option.label,\n value: option.value,\n options: option.options\n });\n }\n return options;\n }\n return Object.keys(initialOptions).map(key => {\n return {\n label: initialOptions[key],\n value: key\n };\n });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n const newProps: FormComponentProps & RmwcSelectProps = {};\n Object.keys(props)\n .filter(name => !skipProps.includes(name))\n // @ts-expect-error\n .forEach((name: any) => (newProps[name] = props[name]));\n\n return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select = (props: SelectProps) => {\n const { value: initialValue, description, validation, ...other } = props;\n\n const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n const options = getOptions(other.options);\n\n // Memoize the label and placeholder values based on the component size.\n const { label, placeholder } = useMemo(() => {\n const { size, label, placeholder: placeholderText } = props;\n\n // If `placeholderText` is null, undefined, or an empty string after trimming, `placeholder` will be set to `undefined`.\n const placeholder = placeholderText?.trim() || undefined;\n\n // For small or medium size, we set only the placeholder, using label as fallback.\n if (size === \"small\" || size === \"medium\") {\n return {\n label: undefined,\n placeholder: placeholder || label\n };\n }\n\n // For other sizes, use the provided label and placeholder.\n return {\n label,\n placeholder\n };\n }, [props.label, props.placeholder, props.size]);\n\n return (\n <>\n <RmwcSelect\n {...getRmwcProps(other)}\n ref={undefined}\n options={options}\n value={value}\n label={label}\n placeholder={placeholder}\n className={classNames(\n \"webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded\",\n webinySelect,\n props.size ? `webiny-ui-select--size-${props.size}` : null,\n props.className\n )}\n onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {\n props.onChange && props.onChange(e.target.value);\n }}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </>\n );\n};\n\nexport default Select;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/ui",
|
|
3
|
-
"version": "5.40.
|
|
3
|
+
"version": "5.40.4-beta.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -81,10 +81,10 @@
|
|
|
81
81
|
"@types/react-custom-scrollbars": "4.0.10",
|
|
82
82
|
"@types/react-transition-group": "4.4.5",
|
|
83
83
|
"@types/shortid": "0.0.29",
|
|
84
|
-
"@webiny/cli": "5.40.
|
|
85
|
-
"@webiny/form": "5.40.
|
|
86
|
-
"@webiny/project-utils": "5.40.
|
|
87
|
-
"@webiny/validation": "5.40.
|
|
84
|
+
"@webiny/cli": "5.40.4-beta.1",
|
|
85
|
+
"@webiny/form": "5.40.4-beta.1",
|
|
86
|
+
"@webiny/project-utils": "5.40.4-beta.1",
|
|
87
|
+
"@webiny/validation": "5.40.4-beta.1",
|
|
88
88
|
"babel-loader": "9.1.2",
|
|
89
89
|
"execa": "5.1.1",
|
|
90
90
|
"jest-dom": "3.5.0",
|
|
@@ -123,5 +123,5 @@
|
|
|
123
123
|
]
|
|
124
124
|
}
|
|
125
125
|
},
|
|
126
|
-
"gitHead": "
|
|
126
|
+
"gitHead": "5795b78c0b0e8be7b96a1f459025af523c6b2ab4"
|
|
127
127
|
}
|