fix(🐛 replace defaultprops with usedefaultprops): 🐛 replace defaultPr…

…ops with useDefaultProps (#2643)

Co-authored-by: wū yāng <[email protected]>

src/select-input/SelectInput.tsx

@@ -1,21 +1,24 @@
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import useConfig from '../hooks/useConfig';
-import Popup, { PopupVisibleChangeContext } from '../popup';
+import Popup, { PopupRef, PopupVisibleChangeContext } from '../popup';
 import useSingle from './useSingle';
 import useMultiple from './useMultiple';
 import useOverlayInnerStyle from './useOverlayInnerStyle';
 import { TdSelectInputProps } from './type';
 import { StyledProps } from '../common';
 import { selectInputDefaultProps } from './defaultProps';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { InputRef } from '../input';
 
 export interface SelectInputProps extends TdSelectInputProps, StyledProps {
   updateScrollTop?: (content: HTMLDivElement) => void;
 }
 
-const SelectInput = forwardRef((props: SelectInputProps, ref) => {
-  const selectInputRef = useRef();
-  const selectInputWrapRef = useRef();
+const SelectInput = React.forwardRef<Partial<PopupRef & InputRef>, SelectInputProps>((originalProps, ref) => {
+  const props = useDefaultProps<SelectInputProps>(originalProps, selectInputDefaultProps);
+  const selectInputRef = useRef<PopupRef>();
+  const selectInputWrapRef = useRef<HTMLDivElement>(null);
   const { classPrefix: prefix } = useConfig();
   const { multiple, value, popupVisible, popupProps, borderless, disabled } = props;
   const { commonInputProps, inputRef, singleInputValue, onInnerClear, renderSelectSingle } = useSingle(props);
@@ -81,7 +84,9 @@ const SelectInput = forwardRef((props: SelectInputProps, ref) => {
     </div>
   );
 
-  if (!props.tips) return mainContent;
+  if (!props.tips) {
+    return mainContent;
+  }
 
   return (
     <div ref={selectInputWrapRef} className={`${prefix}-select-input__wrap`}>
@@ -94,6 +99,5 @@ const SelectInput = forwardRef((props: SelectInputProps, ref) => {
 });
 
 SelectInput.displayName = 'SelectInput';
-SelectInput.defaultProps = selectInputDefaultProps;
 
 export default SelectInput;

src/select-input/useMultiple.tsx

@@ -1,11 +1,12 @@
 import React, { useRef, MouseEvent } from 'react';
 import isObject from 'lodash/isObject';
 import classNames from 'classnames';
-import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys } from './type';
+import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys, SelectInputValue } from './type';
 import TagInput, { TagInputValue } from '../tag-input';
 import { SelectInputCommonProperties } from './interface';
 import useControlled from '../hooks/useControlled';
 import useConfig from '../hooks/useConfig';
+import { InputRef } from '../input';
 
 export interface RenderSelectMultipleParams {
   commonInputProps: SelectInputCommonProperties;
@@ -23,15 +24,15 @@ const DEFAULT_KEYS = {
 export default function useMultiple(props: TdSelectInputProps) {
   const { value } = props;
   const { classPrefix } = useConfig();
-  const tagInputRef = useRef();
+  const tagInputRef = useRef<InputRef>();
   const [tInputValue, setTInputValue] = useControlled(props, 'inputValue', props.onInputChange);
   const iKeys: SelectInputKeys = { ...DEFAULT_KEYS, ...props.keys };
 
   const getTags = () => {
     if (!(value instanceof Array)) {
       return isObject(value) ? [value[iKeys.label]] : [value];
     }
-    return value.map((item) => (isObject(item) ? item[iKeys.label] : item));
+    return value.map((item: SelectInputValue) => (isObject(item) ? item[iKeys.label] : item));
   };
   const tags = getTags();
 

src/select-input/useOverlayInnerStyle.ts

@@ -55,7 +55,9 @@ export default function useOverlayInnerStyle(
   };
 
   const onInnerPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
-    if (disabled || readonly) return;
+    if (disabled || readonly) {
+      return;
+    }
     // 如果点击触发元素（输入框）且为可输入状态，则继续显示下拉框
     const newVisible = context.trigger === 'trigger-element-click' && allowInput ? true : visible;
     if (props.popupVisible !== newVisible) {

src/select-input/useSingle.tsx

@@ -3,7 +3,7 @@ import isObject from 'lodash/isObject';
 import pick from 'lodash/pick';
 import classNames from 'classnames';
 import { SelectInputCommonProperties } from './interface';
-import Input, { TdInputProps } from '../input';
+import Input, { InputRef, TdInputProps } from '../input';
 import { TdSelectInputProps } from './type';
 import { Loading } from '../loading';
 import useConfig from '../hooks/useConfig';
@@ -42,7 +42,7 @@ function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputPr
 export default function useSingle(props: TdSelectInputProps) {
   const { value, keys, loading } = props;
   const { classPrefix } = useConfig();
-  const inputRef = useRef();
+  const inputRef = useRef<InputRef>();
   const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
 
   const commonInputProps: SelectInputCommonProperties = {