From a5333bd573edc5f28cd528e3d198d25ea27047ca Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 5 Dec 2023 08:52:26 +0800 Subject: [PATCH] =?UTF-8?q?fix(=F0=9F=90=9B=20replace=20defaultprops=20wit?= =?UTF-8?q?h=20usedefaultprops):=20=F0=9F=90=9B=20replace=20defaultProps?= =?UTF-8?q?=20with=20useDefaultProps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/select-input/SelectInput.tsx | 18 +++++++++++------- src/select-input/useMultiple.tsx | 7 ++++--- src/select-input/useOverlayInnerStyle.ts | 8 ++++++-- src/select-input/useSingle.tsx | 4 ++-- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/select-input/SelectInput.tsx b/src/select-input/SelectInput.tsx index 930c38fb56..76323b52fd 100644 --- a/src/select-input/SelectInput.tsx +++ b/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, SelectInputProps>((originalProps, ref) => { + const props = useDefaultProps(originalProps, selectInputDefaultProps); + const selectInputRef = useRef(); + const selectInputWrapRef = useRef(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) => { ); - if (!props.tips) return mainContent; + if (!props.tips) { + return mainContent; + } return (
@@ -94,6 +99,5 @@ const SelectInput = forwardRef((props: SelectInputProps, ref) => { }); SelectInput.displayName = 'SelectInput'; -SelectInput.defaultProps = selectInputDefaultProps; export default SelectInput; diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx index d4de293592..92877222b7 100644 --- a/src/select-input/useMultiple.tsx +++ b/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,7 +24,7 @@ const DEFAULT_KEYS = { export default function useMultiple(props: TdSelectInputProps) { const { value } = props; const { classPrefix } = useConfig(); - const tagInputRef = useRef(); + const tagInputRef = useRef(); const [tInputValue, setTInputValue] = useControlled(props, 'inputValue', props.onInputChange); const iKeys: SelectInputKeys = { ...DEFAULT_KEYS, ...props.keys }; @@ -31,7 +32,7 @@ export default function useMultiple(props: TdSelectInputProps) { 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(); diff --git a/src/select-input/useOverlayInnerStyle.ts b/src/select-input/useOverlayInnerStyle.ts index 494b1196f0..0a4599c73e 100644 --- a/src/select-input/useOverlayInnerStyle.ts +++ b/src/select-input/useOverlayInnerStyle.ts @@ -22,7 +22,9 @@ export default function useOverlayInnerStyle( const [innerPopupVisible, setInnerPopupVisible] = useState(false); const matchWidthFunc = (triggerElement: HTMLElement, popupElement: HTMLElement) => { - if (!triggerElement || !popupElement) return; + if (!triggerElement || !popupElement) { + return; + } // 避免因滚动条出现文本省略，预留宽度 8 const SCROLLBAR_WIDTH = popupElement.scrollHeight > popupElement.offsetHeight ? 8 : 0; const width = @@ -40,7 +42,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) { diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx index fa89baec86..d371853d9b 100644 --- a/src/select-input/useSingle.tsx +++ b/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(); const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange); const commonInputProps: SelectInputCommonProperties = {