style: remove some non-null assertions

rsuite · Jan 22, 2022 · 4c0a328 · 4c0a328
1 parent 8978a49
commit 4c0a328
Show file tree

Hide file tree

Showing 20 changed files with 125 additions and 87 deletions.
diff --git a/src/Affix/Affix.tsx b/src/Affix/Affix.tsx
@@ -22,6 +22,7 @@ function useOffset(mountRef: React.RefObject<HTMLDivElement>) {
   const [offset, setOffset] = useState<Offset | null>(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
@@ -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
@@ -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
@@ -122,14 +122,14 @@ const CheckTreePicker: PickerComponent<CheckTreePickerProps> = 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<CheckTreePickerProps> = 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
@@ -104,15 +104,18 @@ export function isEveryFirstLevelNodeUncheckable(
  * get node uncheckable state
  * @param {*} node
  */
-export function isNodeUncheckable(node: any, props: Partial<CheckTreePickerProps>) {
+export function isNodeUncheckable(
+  node: any,
+  props: Required<Pick<CheckTreePickerProps, 'uncheckableItemValues' | 'valueKey'>>
+) {
   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<CheckTreePickerProps>
+  props: Required<Pick<CheckTreePickerProps, 'childrenKey' | 'cascade'>>
 ) {
   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<CheckTreePickerProps>
+  props: Required<Pick<CheckTreePickerProps, 'disabledItemValues' | 'valueKey'>>
 ) {
   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
@@ -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
@@ -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
@@ -205,7 +205,7 @@ const InputPicker: PickerComponent<InputPickerProps> = React.forwardRef(
       {
         data: getAllDataAndCache(),
         valueKey,
-        target: () => overlayRef.current!
+        target: () => overlayRef.current
       }
     );
 
@@ -432,13 +432,16 @@ const InputPicker: PickerComponent<InputPickerProps> = 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
@@ -34,12 +34,14 @@ const ListItem = React.forwardRef((props: ListItemProps, ref: React.Ref<HTMLDivE
   const listItemRef = useRef<HTMLElement>(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
@@ -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<HTMLLIElement> & MenuitemRenderProps = {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -41,20 +41,24 @@ const Ripple = React.forwardRef((props: RippleProps, ref: React.Ref<HTMLSpanElem
 
   const handleMouseDown = useCallback(
     (event: React.MouseEvent) => {
-      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
@@ -134,10 +134,10 @@ const TreePicker: PickerComponent<TreePickerProps> = 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<TreePickerProps> = 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
@@ -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
@@ -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();
   }, []);
 
   /**