refactor(select-input): component optimization (Tencent#5068)

zhangpaopao0609 · uyarn · web-flow · commit 820ce8f18a10 · 2025-03-02T23:39:52.000+08:00
* refactor(select-input): component optimization

* refactor(select-input): expose

* chore: fix build

---------

Co-authored-by: Uyarn &lt;uyarnchen@gmail.com&gt;
diff --git a/packages/components/range-input/range-input-popup.tsx b/packages/components/range-input/range-input-popup.tsx
@@ -3,7 +3,7 @@ import Popup from '../popup';
 import { usePrefixClass } from '../hooks/useConfig';
 import RangeInput from './range-input';
 import props from './range-input-popup-props';
-import useOverlayInnerStyle from '../select-input/useOverlayInnerStyle';
+import { useOverlayInnerStyle } from '../select-input/hooks/useOverlayInnerStyle';
 import { TdRangeInputPopupProps } from './type';
 
 export default defineComponent({
diff --git a/packages/components/select-input/hooks/index.ts b/packages/components/select-input/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useMultiple';
+export * from './useOverlayInnerStyle';
+export * from './useSingle';
diff --git a/packages/components/select-input/hooks/style/css.js b/packages/components/select-input/hooks/style/css.js
@@ -0,0 +1 @@
+import '../../style/index.css';
diff --git a/packages/components/select-input/hooks/style/index.js b/packages/components/select-input/hooks/style/index.js
@@ -0,0 +1 @@
+import '../../style/index.js';
diff --git a/packages/components/select-input/hooks/useMultiple.tsx b/packages/components/select-input/hooks/useMultiple.tsx
@@ -1,14 +1,14 @@
 import { SetupContext, computed, ref, toRefs, Ref } from 'vue';
 import { isObject } from 'lodash-es';
-import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys } from './type';
-import { SelectInputCommonProperties } from './interface';
-import TagInput, { TagInputValue, TagInputProps } from '../tag-input';
-import Loading from '../loading';
-import useDefault from '../hooks/useDefaultValue';
-import { usePrefixClass } from '../hooks/useConfig';
-import { useDisabled } from '../hooks/useDisabled';
-import { useReadonly } from '../hooks/useReadonly';
-import { PopupInstanceFunctions } from '../popup';
+import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys } from '../type';
+import { SelectInputCommonProperties } from '../types';
+import TagInput, { TagInputValue, TagInputProps } from '../../tag-input';
+import Loading from '../../loading';
+import useDefault from '../../hooks/useDefaultValue';
+import { usePrefixClass } from '../../hooks/useConfig';
+import { useDisabled } from '../../hooks/useDisabled';
+import { useReadonly } from '../../hooks/useReadonly';
+import { PopupInstanceFunctions } from '../../popup';
 
 export interface RenderSelectMultipleParams {
   commonInputProps: SelectInputCommonProperties;
@@ -23,11 +23,7 @@ const DEFAULT_KEYS = {
   children: 'children',
 };
 
-export default function useMultiple(
-  props: TdSelectInputProps,
-  context: SetupContext,
-  popupRef: Ref<PopupInstanceFunctions>,
-) {
+export function useMultiple(props: TdSelectInputProps, context: SetupContext, popupRef: Ref<PopupInstanceFunctions>) {
   const { inputValue } = toRefs(props);
   const classPrefix = usePrefixClass();
   const tagInputRef = ref();
diff --git a/packages/components/select-input/hooks/useOverlayInnerStyle.ts b/packages/components/select-input/hooks/useOverlayInnerStyle.ts
@@ -1,10 +1,10 @@
 import { ref, toRefs, computed, CSSProperties } from 'vue';
 import { isObject } from 'lodash-es';
 import { isFunction } from 'lodash-es';
-import { TdSelectInputProps } from './type';
-import { TdPopupProps, PopupVisibleChangeContext } from '../popup';
-import { useDisabled } from '../hooks/useDisabled';
-import { useReadonly } from '../hooks/useReadonly';
+import { TdSelectInputProps } from '../type';
+import { TdPopupProps, PopupVisibleChangeContext } from '../../popup';
+import { useDisabled } from '../../hooks/useDisabled';
+import { useReadonly } from '../../hooks/useReadonly';
 
 export type overlayInnerStyleProps = Pick<
   TdSelectInputProps,
@@ -16,7 +16,7 @@ const MAX_POPUP_WIDTH = 1000;
 // 避免因滚动条出现文本省略，预留宽度 8
 const RESERVE_WIDTH = 0;
 
-export default function useOverlayInnerStyle(props: overlayInnerStyleProps) {
+export function useOverlayInnerStyle(props: overlayInnerStyleProps) {
   const { popupProps, autoWidth } = toRefs(props);
   const innerPopupVisible = ref(false);
   const disable = useDisabled();
diff --git a/packages/components/select-input/hooks/useSingle.tsx b/packages/components/select-input/hooks/useSingle.tsx
@@ -1,16 +1,16 @@
 import { SetupContext, ref, computed, toRefs, Ref } from 'vue';
 import { isObject } from 'lodash-es';
 import { pick } from 'lodash-es';
-import Input, { StrInputProps } from '../input';
-import Loading from '../loading';
-import { useTNodeJSX } from '../hooks/tnode';
-import { usePrefixClass } from '../hooks/useConfig';
-import useDefaultValue from '../hooks/useDefaultValue';
-import { useDisabled } from '../hooks/useDisabled';
-import { useReadonly } from '../hooks/useReadonly';
-import { PopupInstanceFunctions } from '../popup';
-import { TdSelectInputProps } from './type';
-import { SelectInputCommonProperties } from './interface';
+import Input, { StrInputProps } from '../../input';
+import Loading from '../../loading';
+import { useTNodeJSX } from '../../hooks/tnode';
+import { usePrefixClass } from '../../hooks/useConfig';
+import useDefaultValue from '../../hooks/useDefaultValue';
+import { useDisabled } from '../../hooks/useDisabled';
+import { useReadonly } from '../../hooks/useReadonly';
+import { PopupInstanceFunctions } from '../../popup';
+import { TdSelectInputProps } from '../type';
+import { SelectInputCommonProperties } from '../types';
 
 // single 和 multiple 共有特性
 const COMMON_PROPERTIES = [
@@ -47,7 +47,7 @@ function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputPr
   return isObject(value) ? (value as Record<string, any>)[iKeys.label] : value;
 }
 
-export default function useSingle(
+export function useSingle(
   props: TdSelectInputProps & { valueDisplayOptions: SelectInputValueDisplayOptions },
   context: SetupContext,
   popupRef: Ref<PopupInstanceFunctions>,
diff --git a/packages/components/select-input/select-input.tsx b/packages/components/select-input/select-input.tsx
@@ -2,9 +2,8 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, ref, S
 import Popup, { PopupInstanceFunctions, PopupProps, PopupVisibleChangeContext } from '../popup';
 import props from './props';
 import { TdSelectInputProps } from './type';
-import useSingle, { SelectInputValueDisplayOptions } from './useSingle';
-import useMultiple from './useMultiple';
-import useOverlayInnerStyle from './useOverlayInnerStyle';
+import { useMultiple, useSingle, useOverlayInnerStyle } from './hooks';
+import type { SelectInputValueDisplayOptions } from './hooks';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useTNodeJSX } from '../hooks';
 
@@ -20,7 +19,6 @@ const useComponentClassName = () => {
 
 export default defineComponent({
   name: 'TSelectInput',
-
   props: {
     ...props,
     /**
@@ -42,7 +40,7 @@ export default defineComponent({
 
     const selectInputRef = ref();
     const popupRef = ref<PopupInstanceFunctions>();
-    const { multiple, value, popupVisible, borderless } = toRefs(props);
+    const { multiple, value, popupVisible, borderless, popupProps, panel, allowInput, status } = toRefs(props);
 
     const { tOverlayInnerStyle, innerPopupVisible, onInnerPopupVisibleChange } = useOverlayInnerStyle(props);
 
@@ -96,68 +94,56 @@ export default defineComponent({
       if (props.multiple) tagInputRef.value?.focus?.();
     };
 
-    return {
-      classPrefix,
-      NAME_CLASS,
-      innerPopupVisible,
-      commonInputProps,
-      tOverlayInnerStyle,
-      selectInputRef,
+    context.expose({
       popupRef,
-      classes,
-      onInnerClear,
-      renderTNodeJSX,
-      renderSelectSingle,
-      renderSelectMultiple,
-      onOverlayClick,
-      onInnerPopupVisibleChange,
-    };
-  },
+      allowInput,
+    });
 
-  render() {
-    // 浮层显示的受控与非受控
-    const visibleProps = { visible: this.popupVisible ?? this.innerPopupVisible };
-
-    const mainContent = (
-      <Popup
-        ref="popupRef"
-        trigger={(this.popupProps as TdSelectInputProps['popupProps'])?.trigger || 'click'}
-        placement="bottom-left"
-        {...visibleProps}
-        content={this.panel}
-        v-slots={{ ...this.$slots, content: this.$slots.panel }}
-        hideEmptyPopup={true}
-        {...{
-          onVisibleChange: this.onInnerPopupVisibleChange,
-          onOverlayClick: this.onOverlayClick,
-          ...(this.popupProps as TdSelectInputProps['popupProps']),
-          overlayInnerStyle: this.tOverlayInnerStyle,
-        }}
-      >
-        {this.multiple
-          ? this.renderSelectMultiple({
-              commonInputProps: this.commonInputProps,
-              onInnerClear: this.onInnerClear,
-              popupVisible: visibleProps.visible,
-              allowInput: this.allowInput,
-            })
-          : this.renderSelectSingle(visibleProps.visible)}
-      </Popup>
-    );
-
-    const tipsNode = this.renderTNodeJSX('tips');
-
-    const tipsClasses = [
-      `${this.classPrefix}-input__tips`,
-      `${this.classPrefix}-tips`,
-      `${this.classPrefix}-is-${this.status}`,
-    ];
-
-    return (
-      <div ref="selectInputRef" class={this.classes}>
-        {mainContent}
-        {tipsNode && <div class={tipsClasses}>{tipsNode}</div>}
-      </div>
-    );
+    return () => {
+      // 浮层显示的受控与非受控
+      const visibleProps = { visible: popupVisible.value ?? innerPopupVisible.value };
+
+      const mainContent = (
+        <Popup
+          ref={popupRef}
+          trigger={popupProps.value?.trigger || 'click'}
+          placement="bottom-left"
+          {...visibleProps}
+          content={panel.value}
+          v-slots={{ ...context.slots, content: context.slots.panel }}
+          hideEmptyPopup={true}
+          {...{
+            onVisibleChange: onInnerPopupVisibleChange,
+            onOverlayClick: onOverlayClick,
+            ...popupProps.value,
+            overlayInnerStyle: tOverlayInnerStyle.value,
+          }}
+        >
+          {multiple.value
+            ? renderSelectMultiple({
+                commonInputProps: commonInputProps.value,
+                onInnerClear: onInnerClear,
+                popupVisible: visibleProps.visible,
+                allowInput: allowInput.value,
+              })
+            : renderSelectSingle(visibleProps.visible)}
+        </Popup>
+      );
+
+      const tipsNode = renderTNodeJSX('tips');
+
+      const tipsClasses = [
+        `${classPrefix.value}-input__tips`,
+        `${classPrefix.value}-tips`,
+        `${classPrefix.value}-is-${status.value}`,
+      ];
+
+      return (
+        <div ref={selectInputRef} class={classes.value}>
+          {mainContent}
+          {tipsNode && <div class={tipsClasses}>{tipsNode}</div>}
+        </div>
+      );
+    };
   },
 });
diff --git a/packages/components/select-input/types.ts b/packages/components/select-input/types.ts
diff --git a/packages/components/select/select.tsx b/packages/components/select/select.tsx
@@ -23,7 +23,7 @@ import { useSelectOptions, useKeyboardControl } from './hooks';
 import type { PopupProps, PopupVisibleChangeContext } from '../popup';
 import type { SelectInputChangeContext, SelectInputValueChangeContext } from '../select-input';
 import type { TdSelectProps, SelectValue } from './type';
-import { SelectInputValueDisplayOptions } from '../select-input/useSingle';
+import { SelectInputValueDisplayOptions } from '../select-input/hooks/useSingle';
 import { TagInputTriggerSource } from '../tag-input';
 
 export default defineComponent({
diff --git a/packages/components/skeleton/skeleton.tsx b/packages/components/skeleton/skeleton.tsx
@@ -56,9 +56,7 @@ const getColItemStyle = (obj: SkeletonRowColObj) => {
 
 export default defineComponent({
   name: 'TSkeleton',
-
   props,
-
   setup(props, { slots }) {
     const isShow = ref(false);
     const COMPONENT_NAME = usePrefixClass('skeleton');
diff --git a/packages/components/table/type.ts b/packages/components/table/type.ts
@@ -641,7 +641,7 @@ export interface PrimaryTableInstanceFunctions<T extends TableRowData = TableRow
   /**
    * 校验表格可编辑单元格数据，校验完成后，会触发事件 `onValidate`
    */
-    validateTableCellData: () => Promise<{ result: TableErrorListMap }>;
+  validateTableCellData: () => Promise<{ result: TableErrorListMap }>;
   /**
    * 校验表格全部数据，校验完成后，会触发事件 `onValidate`
    */

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from './useMultiple';`
	`2`	`+export * from './useOverlayInnerStyle';`
	`3`	`+export * from './useSingle';`