From bbd2e89691b672c495e05d581ec740339c4145e7 Mon Sep 17 00:00:00 2001 From: Doma Date: Sat, 22 Jan 2022 10:42:23 +0800 Subject: [PATCH 1/4] chore(tooling): upgrade typescript-eslint --- package-lock.json | 178 ++++++++++++---------------------------------- package.json | 4 +- 2 files changed, 46 insertions(+), 136 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8b4bfa63c..3dc2ea10b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2964,50 +2964,25 @@ "dev": true }, "@typescript-eslint/eslint-plugin": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.2.tgz", - "integrity": "sha512-x4EMgn4BTfVd9+Z+r+6rmWxoAzBaapt4QFqE+d8L8sUtYZYLDTK6VG/y/SMMWA5t1/BVU5Kf+20rX4PtWzUYZg==", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz", + "integrity": "sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==", "dev": true, "requires": { - "@typescript-eslint/experimental-utils": "4.29.2", - "@typescript-eslint/scope-manager": "4.29.2", + "@typescript-eslint/experimental-utils": "4.33.0", + "@typescript-eslint/scope-manager": "4.33.0", "debug": "^4.3.1", "functional-red-black-tree": "^1.0.1", + "ignore": "^5.1.8", "regexpp": "^3.1.0", "semver": "^7.3.5", "tsutils": "^3.21.0" }, "dependencies": { - "@typescript-eslint/scope-manager": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.29.2.tgz", - "integrity": "sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==", - "dev": true, - "requires": { - "@typescript-eslint/types": "4.29.2", - "@typescript-eslint/visitor-keys": "4.29.2" - } - }, - "@typescript-eslint/types": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.29.2.tgz", - "integrity": "sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==", - "dev": true - }, - "@typescript-eslint/visitor-keys": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.2.tgz", - "integrity": "sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==", - "dev": true, - "requires": { - "@typescript-eslint/types": "4.29.2", - "eslint-visitor-keys": "^2.0.0" - } - }, "debug": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", - "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", + "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", "dev": true, "requires": { "ms": "2.1.2" @@ -3031,69 +3006,19 @@ } }, "@typescript-eslint/experimental-utils": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.29.2.tgz", - "integrity": "sha512-P6mn4pqObhftBBPAv4GQtEK7Yos1fz/MlpT7+YjH9fTxZcALbiiPKuSIfYP/j13CeOjfq8/fr9Thr2glM9ub7A==", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz", + "integrity": "sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==", "dev": true, "requires": { "@types/json-schema": "^7.0.7", - "@typescript-eslint/scope-manager": "4.29.2", - "@typescript-eslint/types": "4.29.2", - "@typescript-eslint/typescript-estree": "4.29.2", + "@typescript-eslint/scope-manager": "4.33.0", + "@typescript-eslint/types": "4.33.0", + "@typescript-eslint/typescript-estree": "4.33.0", "eslint-scope": "^5.1.1", "eslint-utils": "^3.0.0" }, "dependencies": { - "@typescript-eslint/scope-manager": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.29.2.tgz", - "integrity": "sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==", - "dev": true, - "requires": { - "@typescript-eslint/types": "4.29.2", - "@typescript-eslint/visitor-keys": "4.29.2" - } - }, - "@typescript-eslint/types": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.29.2.tgz", - "integrity": "sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==", - "dev": true - }, - "@typescript-eslint/typescript-estree": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.29.2.tgz", - "integrity": "sha512-TJ0/hEnYxapYn9SGn3dCnETO0r+MjaxtlWZ2xU+EvytF0g4CqTpZL48SqSNn2hXsPolnewF30pdzR9a5Lj3DNg==", - "dev": true, - "requires": { - "@typescript-eslint/types": "4.29.2", - "@typescript-eslint/visitor-keys": "4.29.2", - "debug": "^4.3.1", - "globby": "^11.0.3", - "is-glob": "^4.0.1", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - } - }, - "@typescript-eslint/visitor-keys": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.2.tgz", - "integrity": "sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==", - "dev": true, - "requires": { - "@typescript-eslint/types": "4.29.2", - "eslint-visitor-keys": "^2.0.0" - } - }, - "debug": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", - "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", - "dev": true, - "requires": { - "ms": "2.1.2" - } - }, "eslint-utils": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", @@ -3102,40 +3027,25 @@ "requires": { "eslint-visitor-keys": "^2.0.0" } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true - }, - "semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "dev": true, - "requires": { - "lru-cache": "^6.0.0" - } } } }, "@typescript-eslint/parser": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.29.2.tgz", - "integrity": "sha512-WQ6BPf+lNuwteUuyk1jD/aHKqMQ9jrdCn7Gxt9vvBnzbpj7aWEf+aZsJ1zvTjx5zFxGCt000lsbD9tQPEL8u6g==", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz", + "integrity": "sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "4.29.2", - "@typescript-eslint/types": "4.29.2", - "@typescript-eslint/typescript-estree": "4.29.2", + "@typescript-eslint/scope-manager": "4.33.0", + "@typescript-eslint/types": "4.33.0", + "@typescript-eslint/typescript-estree": "4.33.0", "debug": "^4.3.1" }, "dependencies": { "debug": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", - "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", + "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", "dev": true, "requires": { "ms": "2.1.2" @@ -3150,29 +3060,29 @@ } }, "@typescript-eslint/scope-manager": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.29.2.tgz", - "integrity": "sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz", + "integrity": "sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==", "dev": true, "requires": { - "@typescript-eslint/types": "4.29.2", - "@typescript-eslint/visitor-keys": "4.29.2" + "@typescript-eslint/types": "4.33.0", + "@typescript-eslint/visitor-keys": "4.33.0" } }, "@typescript-eslint/types": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.29.2.tgz", - "integrity": "sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.33.0.tgz", + "integrity": "sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.29.2.tgz", - "integrity": "sha512-TJ0/hEnYxapYn9SGn3dCnETO0r+MjaxtlWZ2xU+EvytF0g4CqTpZL48SqSNn2hXsPolnewF30pdzR9a5Lj3DNg==", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz", + "integrity": "sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==", "dev": true, "requires": { - "@typescript-eslint/types": "4.29.2", - "@typescript-eslint/visitor-keys": "4.29.2", + "@typescript-eslint/types": "4.33.0", + "@typescript-eslint/visitor-keys": "4.33.0", "debug": "^4.3.1", "globby": "^11.0.3", "is-glob": "^4.0.1", @@ -3181,9 +3091,9 @@ }, "dependencies": { "debug": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", - "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", + "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", "dev": true, "requires": { "ms": "2.1.2" @@ -3207,12 +3117,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "4.29.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.2.tgz", - "integrity": "sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz", + "integrity": "sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==", "dev": true, "requires": { - "@typescript-eslint/types": "4.29.2", + "@typescript-eslint/types": "4.33.0", "eslint-visitor-keys": "^2.0.0" } }, diff --git a/package.json b/package.json index 09169a622..b862a8e3b 100644 --- a/package.json +++ b/package.json @@ -103,8 +103,8 @@ "@types/react-dom": "^17.0.0", "@types/sinon": "^10.0.2", "@types/sinon-chai": "^2.7.38", - "@typescript-eslint/eslint-plugin": "^4.29.2", - "@typescript-eslint/parser": "^4.29.2", + "@typescript-eslint/eslint-plugin": "^4.33.0", + "@typescript-eslint/parser": "^4.33.0", "autoprefixer": "^8.3.0", "babel-loader": "^8.0.0", "babel-plugin-istanbul": "^4.1.4", From 8978a49b28b5d3557ffd42b7258e6f762809d639 Mon Sep 17 00:00:00 2001 From: Doma Date: Sat, 22 Jan 2022 10:52:38 +0800 Subject: [PATCH 2/4] style: remove non-null assertion for useElementResize --- src/Affix/Affix.tsx | 2 +- src/Picker/PickerOverlay.tsx | 2 +- src/utils/useElementResize.ts | 9 ++++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/Affix/Affix.tsx b/src/Affix/Affix.tsx index cad632c5b..2c580eb53 100644 --- a/src/Affix/Affix.tsx +++ b/src/Affix/Affix.tsx @@ -26,7 +26,7 @@ function useOffset(mountRef: React.RefObject) { }, [mountRef]); // Update after the element size changes - useElementResize(() => mountRef.current!, updateOffset); + useElementResize(() => mountRef.current, updateOffset); // Initialize after the first render useMount(updateOffset); diff --git a/src/Picker/PickerOverlay.tsx b/src/Picker/PickerOverlay.tsx index 66d2132bf..a9c02a5f9 100644 --- a/src/Picker/PickerOverlay.tsx +++ b/src/Picker/PickerOverlay.tsx @@ -58,7 +58,7 @@ const PickerOverlay: RsRefForwardingComponent<'div', PickerOverlayProps> = React }, [target, placement]); useElementResize( - useCallback(() => overlayRef.current!, []), + useCallback(() => overlayRef.current, []), handleResize ); useEffect(() => { diff --git a/src/utils/useElementResize.ts b/src/utils/useElementResize.ts index 2a6a01916..2692478c8 100644 --- a/src/utils/useElementResize.ts +++ b/src/utils/useElementResize.ts @@ -9,7 +9,7 @@ import { ResizeObserver } from '@juggle/resize-observer'; * @param listener An event handler */ export default function useElementResize( - eventTarget: Element | (() => Element), + eventTarget: Element | null | (() => Element | null), listener: ResizeObserverCallback ) { const resizeObserver = useRef(); @@ -17,8 +17,11 @@ export default function useElementResize( useEffect(() => { if (!resizeObserver.current) { const target = typeof eventTarget === 'function' ? eventTarget() : eventTarget; - resizeObserver.current = new ResizeObserver(listener); - resizeObserver.current.observe(target); + + if (target) { + resizeObserver.current = new ResizeObserver(listener); + resizeObserver.current.observe(target); + } } return () => { From 4c0a32830b1db61acaf1cd1a46ec28a489952a65 Mon Sep 17 00:00:00 2001 From: Doma Date: Sat, 22 Jan 2022 12:04:29 +0800 Subject: [PATCH 3/4] style: remove some non-null assertions --- src/Affix/Affix.tsx | 1 + src/Calendar/TimeDropdown.tsx | 11 +++++++--- src/Cascader/DropdownMenu.tsx | 4 ++-- src/CheckTreePicker/CheckTreePicker.tsx | 26 ++++++++++++----------- src/CheckTreePicker/utils.ts | 17 ++++++++------- src/DateRangePicker/DateRangePicker.tsx | 12 ++++++----- src/InputPicker/InputAutosize.tsx | 5 ++++- src/InputPicker/InputPicker.tsx | 7 +++++-- src/List/ListItem.tsx | 14 +++++++------ src/Menu/MenuItem.tsx | 20 ++++++++++-------- src/Pagination/PaginationGroup.tsx | 4 ++-- src/Picker/DropdownMenu.tsx | 2 +- src/Picker/PickerOverlay.tsx | 5 ++++- src/RangeSlider/RangeSlider.tsx | 2 +- src/Ripple/Ripple.tsx | 22 +++++++++++-------- src/TreePicker/TreePicker.tsx | 24 +++++++++++---------- src/Uploader/UploadTrigger.tsx | 4 +++- src/Uploader/Uploader.tsx | 2 +- src/utils/treeUtils.ts | 28 ++++++++++++++----------- src/utils/useControlled.ts | 2 +- 20 files changed, 125 insertions(+), 87 deletions(-) diff --git a/src/Affix/Affix.tsx b/src/Affix/Affix.tsx index 2c580eb53..603fd3277 100644 --- a/src/Affix/Affix.tsx +++ b/src/Affix/Affix.tsx @@ -22,6 +22,7 @@ function useOffset(mountRef: React.RefObject) { const [offset, setOffset] = useState(null); const updateOffset = useCallback(() => { + // FIXME upgrade dom-lib setOffset(getOffset(mountRef.current!)); }, [mountRef]); diff --git a/src/Calendar/TimeDropdown.tsx b/src/Calendar/TimeDropdown.tsx index 08dea3a42..16de0d7be 100644 --- a/src/Calendar/TimeDropdown.tsx +++ b/src/Calendar/TimeDropdown.tsx @@ -82,8 +82,11 @@ const scrollTo = (time: Time, row: HTMLDivElement) => { const node = container?.querySelector(`[data-key="${type}-${value}"]`); if (node && container) { - const { top } = getPosition(node, container)!; - scrollTopAnimation(container, top, scrollTop(container) !== 0); + const position = getPosition(node, container); + + if (position) { + scrollTopAnimation(container, position.top, scrollTop(container) !== 0); + } } }); }; @@ -104,7 +107,9 @@ const TimeDropdown: RsRefForwardingComponent<'div', TimeDropdownProps> = React.f useEffect(() => { const time = getTime({ format, date, showMeridian }); // The currently selected time scrolls to the visible range. - show && scrollTo(time, rowRef.current!); + if (show && rowRef.current) { + scrollTo(time, rowRef.current); + } }, [date, format, show, showMeridian]); const handleClick = (type: TimeType, d: number, event: React.MouseEvent) => { diff --git a/src/Cascader/DropdownMenu.tsx b/src/Cascader/DropdownMenu.tsx index 32c64cb4d..006aa1823 100644 --- a/src/Cascader/DropdownMenu.tsx +++ b/src/Cascader/DropdownMenu.tsx @@ -78,9 +78,9 @@ const DropdownMenu: RsRefForwardingComponent<'div', DropdownMenuProps> = React.f } if (activeItem) { - const position = getPosition(activeItem, column)!; + const position = getPosition(activeItem, column); // Let the active option scroll into view. - scrollTop(column, position.top); + scrollTop(column, position?.top); } }); }, [prefix]); diff --git a/src/CheckTreePicker/CheckTreePicker.tsx b/src/CheckTreePicker/CheckTreePicker.tsx index 5996e071e..e7f938fcc 100644 --- a/src/CheckTreePicker/CheckTreePicker.tsx +++ b/src/CheckTreePicker/CheckTreePicker.tsx @@ -122,14 +122,14 @@ const CheckTreePicker: PickerComponent = React.forwardRef( placeholder, value: controlledValue, defaultValue = emptyArray, - defaultExpandAll, + defaultExpandAll = false, disabledItemValues = emptyArray, expandItemValues: controlledExpandItemValues, - defaultExpandItemValues, + defaultExpandItemValues = emptyArray, height = 360, menuStyle, searchable = true, - virtualized, + virtualized = false, className, classPrefix = 'picker', menuClassName, @@ -286,15 +286,17 @@ const CheckTreePicker: PickerComponent = React.forwardRef( }; const focusActiveNode = useCallback(() => { - focusToActiveTreeNode({ - list: listRef.current!, - valueKey, - selector: `.${checkTreePrefix('node-active')}`, - activeNode, - virtualized: virtualized!, - container: treeViewRef.current!, - formattedNodes: getFormattedNodes() - }); + if (listRef.current) { + focusToActiveTreeNode({ + list: listRef.current, + valueKey, + selector: `.${checkTreePrefix('node-active')}`, + activeNode, + virtualized: virtualized, + container: treeViewRef.current, + formattedNodes: getFormattedNodes() + }); + } }, [checkTreePrefix, activeNode, getFormattedNodes, valueKey, virtualized]); useEffect(() => { diff --git a/src/CheckTreePicker/utils.ts b/src/CheckTreePicker/utils.ts index 44da47fc2..4befc4c24 100644 --- a/src/CheckTreePicker/utils.ts +++ b/src/CheckTreePicker/utils.ts @@ -104,15 +104,18 @@ export function isEveryFirstLevelNodeUncheckable( * get node uncheckable state * @param {*} node */ -export function isNodeUncheckable(node: any, props: Partial) { +export function isNodeUncheckable( + node: any, + props: Required> +) { const { uncheckableItemValues = [], valueKey } = props; - return uncheckableItemValues.some((value: any) => shallowEqual(node[valueKey!], value)); + return uncheckableItemValues.some((value: any) => shallowEqual(node[valueKey], value)); } export function getFormattedTree( data: any[], nodes: TreeNodesType, - props: Partial + props: Required> ) { const { childrenKey, cascade } = props; return data.map((node: any) => { @@ -127,8 +130,8 @@ export function getFormattedTree( formatted.uncheckable = curNode.uncheckable; formatted.parent = curNode.parent; formatted.checkState = checkState; - if (node[childrenKey!]?.length > 0) { - formatted[childrenKey!] = getFormattedTree(formatted[childrenKey!], nodes, props); + if (node[childrenKey]?.length > 0) { + formatted[childrenKey] = getFormattedTree(formatted[childrenKey], nodes, props); } } @@ -139,14 +142,14 @@ export function getFormattedTree( export function getDisabledState( nodes: TreeNodesType, node: TreeNodeType, - props: Partial + props: Required> ) { const { disabledItemValues = [], valueKey } = props; if (!isNil(node.refKey) && isNil(nodes[node.refKey])) { return false; } return disabledItemValues.some((value: any) => - shallowEqual(nodes[node.refKey!][valueKey!], value) + shallowEqual(nodes[node.refKey!][valueKey], value) ); } diff --git a/src/DateRangePicker/DateRangePicker.tsx b/src/DateRangePicker/DateRangePicker.tsx index 802524cd1..9e7ce5127 100644 --- a/src/DateRangePicker/DateRangePicker.tsx +++ b/src/DateRangePicker/DateRangePicker.tsx @@ -341,14 +341,14 @@ const DateRangePicker: DateRangePicker = React.forwardRef((props: DateRangePicke // and waiting for user to select the second date to complete the selection. if (!hasDoneSelect.current) { // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules - if (!isNil(nextHoverDateRange)) { + if (!isNil(nextHoverDateRange) && !isNil(selectRangeValueRef.current)) { let nextSelectedDates: DateRange = [ - selectRangeValueRef.current![0], + selectRangeValueRef.current[0], nextHoverDateRange[1] ]; - if (DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current![0])) { - nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current![1]]; + if (DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) { + nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]]; } setSelectedDates(nextSelectedDates); } else { @@ -414,7 +414,9 @@ const DateRangePicker: DateRangePicker = React.forwardRef((props: DateRangePicke } setHoverDateRange( - nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0]!, nextSelectDates[0]!] + nextSelectDates.length === 2 + ? nextSelectDates + : [nextSelectDates[0] as Date, nextSelectDates[0] as Date] ); setSelectedDates(nextSelectDates); updateCalendarDate(nextSelectDates); diff --git a/src/InputPicker/InputAutosize.tsx b/src/InputPicker/InputAutosize.tsx index 3e093c8fc..629932a34 100644 --- a/src/InputPicker/InputAutosize.tsx +++ b/src/InputPicker/InputAutosize.tsx @@ -132,7 +132,10 @@ const InputAutosize = React.forwardRef( return; } - copyStyles(inputStyles, sizerRef.current!); + if (sizerRef.current) { + copyStyles(inputStyles, sizerRef.current); + } + if (placeholderRef.current) { copyStyles(inputStyles, placeholderRef.current); } diff --git a/src/InputPicker/InputPicker.tsx b/src/InputPicker/InputPicker.tsx index a8a2c4968..96171d6dc 100644 --- a/src/InputPicker/InputPicker.tsx +++ b/src/InputPicker/InputPicker.tsx @@ -205,7 +205,7 @@ const InputPicker: PickerComponent = React.forwardRef( { data: getAllDataAndCache(), valueKey, - target: () => overlayRef.current! + target: () => overlayRef.current } ); @@ -432,13 +432,16 @@ const InputPicker: PickerComponent = React.forwardRef( const allData = getAllData(); let focusItem = allData.find(item => shallowEqual(item[valueKey], focusItemValue)); + // FIXME Bad state flow if (!focusItem && focusItemValue === searchKeyword) { focusItem = createOption(searchKeyword); } setValue(focusItemValue); setSearchKeyword(''); - handleSelect(focusItemValue, focusItem!, event); + if (focusItem) { + handleSelect(focusItemValue, focusItem, event); + } handleChange(focusItemValue, event); handleClose(); }, diff --git a/src/List/ListItem.tsx b/src/List/ListItem.tsx index 111478778..065cddf2c 100644 --- a/src/List/ListItem.tsx +++ b/src/List/ListItem.tsx @@ -34,12 +34,14 @@ const ListItem = React.forwardRef((props: ListItemProps, ref: React.Ref(null); useEffect(() => { - const { unregister } = register({ - node: listItemRef.current!, - edgeOffset: null, - info: { collection, disabled, index } - }); - return unregister; + if (listItemRef.current) { + const { unregister } = register({ + node: listItemRef.current, + edgeOffset: null, + info: { collection, disabled, index } + }); + return unregister; + } }, [collection, disabled, index, register]); const classes = merge(className, withClassPrefix(size, { disabled, bordered })); diff --git a/src/Menu/MenuItem.tsx b/src/Menu/MenuItem.tsx index 252baa625..a3ade2842 100644 --- a/src/Menu/MenuItem.tsx +++ b/src/Menu/MenuItem.tsx @@ -91,17 +91,19 @@ function MenuItem(props: MenuItemProps) { }, [dispatch]); useEffect(() => { - const menuitemElement = menuitemRef.current!; + const menuitemElement = menuitemRef.current; - dispatch({ - type: MenuActionTypes.RegisterItem, - element: menuitemElement, - props: { disabled } - }); + if (menuitemElement) { + dispatch({ + type: MenuActionTypes.RegisterItem, + element: menuitemElement, + props: { disabled } + }); - return () => { - dispatch({ type: MenuActionTypes.UnregisterItem, id: menuitemElement.id }); - }; + return () => { + dispatch({ type: MenuActionTypes.UnregisterItem, id: menuitemElement.id }); + }; + } }, [menuitemRef, disabled, dispatch]); const menuitemProps: React.LiHTMLAttributes & MenuitemRenderProps = { diff --git a/src/Pagination/PaginationGroup.tsx b/src/Pagination/PaginationGroup.tsx index 906f99b63..2f1a2a8df 100644 --- a/src/Pagination/PaginationGroup.tsx +++ b/src/Pagination/PaginationGroup.tsx @@ -44,10 +44,10 @@ interface LimitPicker { const LimitPicker = (props: LimitPicker) => { const { disabled, limitOptions, locale, limit, onChangeLimit, size, prefix } = props; const disabledPicker = typeof disabled === 'function' ? disabled('picker') : Boolean(disabled); - const formatlimitOptions = limitOptions!.map(item => { + const formatlimitOptions = limitOptions.map(item => { return { value: item, - label: tplTransform(locale!.limit!, item) + label: tplTransform(locale.limit!, item) }; }); diff --git a/src/Picker/DropdownMenu.tsx b/src/Picker/DropdownMenu.tsx index 827fad7a9..7348eaf50 100644 --- a/src/Picker/DropdownMenu.tsx +++ b/src/Picker/DropdownMenu.tsx @@ -135,7 +135,7 @@ const DropdownMenu: DropdownMenuComponent = React.forwardRef< return; } - const position = getPosition(activeItem as HTMLElement, container)!; + const position = getPosition(activeItem, container)!; const sTop = scrollTop(container); const sHeight = getHeight(container); if (sTop > position.top) { diff --git a/src/Picker/PickerOverlay.tsx b/src/Picker/PickerOverlay.tsx index a9c02a5f9..bc851bd94 100644 --- a/src/Picker/PickerOverlay.tsx +++ b/src/Picker/PickerOverlay.tsx @@ -68,7 +68,10 @@ const PickerOverlay: RsRefForwardingComponent<'div', PickerOverlayProps> = React // Get the width value of the button, // and then set it to the menu to make their width consistent. const width = getWidth(getDOMNode(toggle.root)); - addStyle(overlayRef.current!, 'min-width', `${width}px`); + + if (overlayRef.current) { + addStyle(overlayRef.current, 'min-width', `${width}px`); + } } }, [autoWidth, target, overlayRef]); diff --git a/src/RangeSlider/RangeSlider.tsx b/src/RangeSlider/RangeSlider.tsx index 7e82b8532..c6553dd27 100644 --- a/src/RangeSlider/RangeSlider.tsx +++ b/src/RangeSlider/RangeSlider.tsx @@ -125,7 +125,7 @@ const RangeSlider = React.forwardRef((props: RangeSliderProps, ref) => { const getValueByPosition = useCallback( (event: React.MouseEvent) => { - const barOffset = getOffset(barRef.current!)!; + const barOffset = getOffset(barRef.current as HTMLElement)!; const offset = vertical ? barOffset.top + barOffset.height - event.pageY : event.pageX - barOffset.left; diff --git a/src/Ripple/Ripple.tsx b/src/Ripple/Ripple.tsx index f17309bbb..45176a293 100644 --- a/src/Ripple/Ripple.tsx +++ b/src/Ripple/Ripple.tsx @@ -41,20 +41,24 @@ const Ripple = React.forwardRef((props: RippleProps, ref: React.Ref { - const position = getPosition(triggerRef.current!, event); - setRippling(true); - setPosition(position); - onMouseDown?.(position, event); + if (triggerRef.current) { + const position = getPosition(triggerRef.current, event); + setRippling(true); + setPosition(position); + onMouseDown?.(position, event); + } }, [onMouseDown] ); useEffect(() => { - const parentNode = triggerRef.current!.parentNode as HTMLElement; - const mousedownListener = on(parentNode, 'mousedown', handleMouseDown); - return () => { - mousedownListener?.off(); - }; + const parentNode = triggerRef.current?.parentNode; + if (parentNode) { + const mousedownListener = on(parentNode, 'mousedown', handleMouseDown); + return () => { + mousedownListener?.off(); + }; + } }, [handleMouseDown]); return ( diff --git a/src/TreePicker/TreePicker.tsx b/src/TreePicker/TreePicker.tsx index 7e8616ffa..3905352d3 100644 --- a/src/TreePicker/TreePicker.tsx +++ b/src/TreePicker/TreePicker.tsx @@ -134,10 +134,10 @@ const TreePicker: PickerComponent = React.forwardRef((props, re valueKey = 'value', childrenKey = 'children', draggable, - defaultExpandAll, + defaultExpandAll = false, disabledItemValues = emptyArray, expandItemValues: controlledExpandItemValues, - defaultExpandItemValues, + defaultExpandItemValues = emptyArray, id, listProps, getChildren, @@ -257,15 +257,17 @@ const TreePicker: PickerComponent = React.forwardRef((props, re ); const focusActiveNode = useCallback(() => { - focusToActiveTreeNode({ - list: listRef.current!, - valueKey, - selector: `.${treePrefix('node-active')}`, - activeNode, - virtualized, - container: treeViewRef.current!, - formattedNodes: getFormattedNodes() - }); + if (listRef.current) { + focusToActiveTreeNode({ + list: listRef.current, + valueKey, + selector: `.${treePrefix('node-active')}`, + activeNode, + virtualized, + container: treeViewRef.current, + formattedNodes: getFormattedNodes() + }); + } }, [treePrefix, activeNode, getFormattedNodes, valueKey, virtualized]); useEffect(() => { diff --git a/src/Uploader/UploadTrigger.tsx b/src/Uploader/UploadTrigger.tsx index 1b784c92b..d4428f9f8 100644 --- a/src/Uploader/UploadTrigger.tsx +++ b/src/Uploader/UploadTrigger.tsx @@ -63,7 +63,9 @@ const UploadTrigger = React.forwardRef((props: UploadTriggerProps, ref) => { }, []); const handleClearInput = useCallback(() => { - inputRef.current!.value = ''; + if (inputRef.current) { + inputRef.current.value = ''; + } }, []); const handleDragEnter = useCallback( diff --git a/src/Uploader/Uploader.tsx b/src/Uploader/Uploader.tsx index 27e4707cf..081052268 100644 --- a/src/Uploader/Uploader.tsx +++ b/src/Uploader/Uploader.tsx @@ -312,7 +312,7 @@ const Uploader = React.forwardRef((props: UploaderProps, ref) => { * Clear the value in input. */ const cleanInputValue = useCallback(() => { - trigger.current!.clearInput(); + trigger.current?.clearInput(); }, []); /** diff --git a/src/utils/treeUtils.ts b/src/utils/treeUtils.ts index aba39fc7e..841e9d95d 100644 --- a/src/utils/treeUtils.ts +++ b/src/utils/treeUtils.ts @@ -126,16 +126,18 @@ export function compareArray(a: any[], b: any[]) { export function getDefaultExpandItemValues( data: ItemDataType[], - props: Pick< - TreePickerProps, - 'defaultExpandAll' | 'valueKey' | 'childrenKey' | 'defaultExpandItemValues' + props: Required< + Pick< + TreePickerProps, + 'defaultExpandAll' | 'valueKey' | 'childrenKey' | 'defaultExpandItemValues' + > > ) { const { valueKey, defaultExpandAll, childrenKey, defaultExpandItemValues = [] } = props; if (defaultExpandAll) { return flattenTree(data, childrenKey) - .filter(item => Array.isArray(item[childrenKey!]) && item[childrenKey!].length > 0) - .map(item => item[valueKey!]); + .filter(item => Array.isArray(item[childrenKey]) && item[childrenKey].length > 0) + .map(item => item[valueKey]); } return defaultExpandItemValues; } @@ -318,23 +320,25 @@ export function filterNodesOfTree(data, check) { */ export const getFocusableItems = ( filteredData: ItemDataType[], - props: PartialTreeProps, + props: Required< + Pick + >, isSearching?: boolean ) => { const { disabledItemValues, valueKey, childrenKey, expandItemValues } = props; const items: TreeNodeType[] = []; const loop = (nodes: any[]) => { nodes.forEach((node: any) => { - const disabled = disabledItemValues!.some(disabledItem => - shallowEqual(disabledItem, node[valueKey!]) + const disabled = disabledItemValues.some(disabledItem => + shallowEqual(disabledItem, node[valueKey]) ); if (!disabled && node.visible) { items.push(node); } // always expand when searching - const expand = isSearching ? true : expandItemValues!.includes(node[valueKey!]); - if (node[childrenKey!] && expand) { - loop(node[childrenKey!]); + const expand = isSearching ? true : expandItemValues.includes(node[valueKey]); + if (node[childrenKey] && expand) { + loop(node[childrenKey]); } }); }; @@ -918,7 +922,7 @@ export interface FocusToTreeNodeProps { valueKey: string; activeNode: any; virtualized: boolean; - container: HTMLDivElement; + container: HTMLElement | null; list: ListInstance; formattedNodes: TreeNodeType[]; } diff --git a/src/utils/useControlled.ts b/src/utils/useControlled.ts index e64300a29..2b2af7091 100644 --- a/src/utils/useControlled.ts +++ b/src/utils/useControlled.ts @@ -25,7 +25,7 @@ function useControlled(controlledValue, defaultValue) { const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue); // If it is controlled, this directly returns the attribute value. - const value = controlledRef.current ? controlledValue! : uncontrolledValue; + const value = controlledRef.current ? controlledValue : uncontrolledValue; const setValue = useCallback( nextValue => { From 1c72ffab93d253329abf2199239067d6b7675ffa Mon Sep 17 00:00:00 2001 From: Doma Date: Wed, 26 Jan 2022 11:28:15 +0800 Subject: [PATCH 4/4] Update src/CheckTreePicker/CheckTreePicker.tsx Co-authored-by: Simon Guo --- src/CheckTreePicker/CheckTreePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CheckTreePicker/CheckTreePicker.tsx b/src/CheckTreePicker/CheckTreePicker.tsx index e7f938fcc..3cd1c02de 100644 --- a/src/CheckTreePicker/CheckTreePicker.tsx +++ b/src/CheckTreePicker/CheckTreePicker.tsx @@ -292,7 +292,7 @@ const CheckTreePicker: PickerComponent = React.forwardRef( valueKey, selector: `.${checkTreePrefix('node-active')}`, activeNode, - virtualized: virtualized, + virtualized, container: treeViewRef.current, formattedNodes: getFormattedNodes() });