refactor: autocomplete

3 years ago · ae01387d90
3 changed files with 87 additions and 98 deletions
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -24,7 +24,7 @@ When there is a need for autocomplete functionality.
 | autofocus | get focus when component mounted | boolean | false |  |
 | backfill | backfill selected item the input when using keyboard | boolean | false |  |
 | #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
-| options | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
+| options | Data source for autocomplete | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
 | option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
 | dropdownMenuStyle | additional style applied to dropdown menu | object |  | 1.5.0 |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@ -1,13 +1,13 @@
 import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
-import { defineComponent, inject, provide } from 'vue';
+import { defineComponent, ref } from 'vue';
 import Select, { selectProps } from '../select';
 import PropTypes from '../_util/vue-types';
-import { defaultConfigProvider } from '../config-provider';
-import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
+import { isValidElement, flattenChildren } from '../_util/props-util';
 import warning from '../_util/warning';
 import Option from './Option';
 import OptGroup from './OptGroup';
 import omit from '../_util/omit';
+import useConfigInject from '../_util/hooks/useConfigInject';

 function isSelectOptionOrSelectOptGroup(child: any): boolean {
  return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
@ -46,109 +46,98 @@ const AutoComplete = defineComponent({
  slots: ['option'],
  Option,
  OptGroup,
-  setup(props, { slots }) {
+  setup(props, { slots, attrs, expose }) {
    warning(
-      !(props.dataSource !== undefined || 'dataSource' in slots),
+      !('dataSource' in slots),
      'AutoComplete',
-      '`dataSource` is deprecated, please use `options` instead.',
+      '`dataSource` slot is deprecated, please use props `options` instead.',
    );
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-      popupRef: null,
-      select: null,
-    };
-  },
-  created() {
-    provide('savePopupRef', this.savePopupRef);
-  },
-  methods: {
-    savePopupRef(ref: VNode) {
-      this.popupRef = ref;
-    },
-    saveSelect(node: VNode) {
-      this.select = node;
-    },
-    getInputElement() {
-      const children = getSlot(this);
+    warning(
+      !('options' in slots),
+      'AutoComplete',
+      '`options` slot is deprecated, please use props `options` instead.',
+    );
+    const selectRef = ref();
+    const getInputElement = () => {
+      const children = flattenChildren(slots.default?.());
      const element = children.length ? children[0] : undefined;
      return element;
-    },
+    };

-    focus() {
-      if (this.select) {
-        this.select.focus();
-      }
-    },
+    const focus = () => {
+      selectRef.value?.focus();
+    };
+
+    const blur = () => {
+      selectRef.value?.blur();
+    };

-    blur() {
-      if (this.select) {
-        this.select.blur();
+    expose({
+      focus,
+      blur,
+    });
+    const { prefixCls } = useConfigInject('select', props);
+    return () => {
+      const { size, dataSource, notFoundContent = slots.notFoundContent?.() } = props;
+      let optionChildren: VNode[];
+      const { class: className } = attrs;
+      const cls = {
+        [className as string]: !!className,
+        [`${prefixCls.value}-lg`]: size === 'large',
+        [`${prefixCls.value}-sm`]: size === 'small',
+        [`${prefixCls.value}-show-search`]: true,
+        [`${prefixCls.value}-auto-complete`]: true,
+      };
+      if (props.options === undefined) {
+        const childArray = slots.dataSource?.() || slots.options?.() || [];
+        if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
+          optionChildren = childArray;
+        } else {
+          optionChildren = dataSource
+            ? dataSource.map((item: any) => {
+                if (isValidElement(item)) {
+                  return item;
+                }
+                switch (typeof item) {
+                  case 'string':
+                    return (
+                      <Option key={item} value={item}>
+                        {item}
+                      </Option>
+                    );
+                  case 'object':
+                    return (
+                      <Option key={item.value} value={item.value}>
+                        {item.text}
+                      </Option>
+                    );
+                  default:
+                    throw new Error(
+                      'AutoComplete[dataSource] only supports type `string[] | Object[]`.',
+                    );
+                }
+              })
+            : [];
+        }
      }
-    },
-  },

-  render() {
-    const { size, prefixCls: customizePrefixCls, dataSource } = this;
-    let optionChildren: VNode[];
-    const { getPrefixCls } = this.configProvider;
-    const prefixCls = getPrefixCls('select', customizePrefixCls);
-    const { class: className } = this.$attrs;
-    const cls = {
-      [className as string]: !!className,
-      [`${prefixCls}-lg`]: size === 'large',
-      [`${prefixCls}-sm`]: size === 'small',
-      [`${prefixCls}-show-search`]: true,
-      [`${prefixCls}-auto-complete`]: true,
-    };
-    let childArray = getSlot(this, 'dataSource');
-    if ('options' in this.$slots) {
-      childArray = getSlot(this, 'options');
-    }
-    if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
-      optionChildren = childArray;
-    } else {
-      optionChildren = dataSource
-        ? dataSource.map((item: any) => {
-            if (isValidElement(item)) {
-              return item;
-            }
-            switch (typeof item) {
-              case 'string':
-                return (
-                  <Option key={item} value={item}>
-                    {item}
-                  </Option>
-                );
-              case 'object':
-                return (
-                  <Option key={item.value} value={item.value}>
-                    {item.text}
-                  </Option>
-                );
-              default:
-                throw new Error(
-                  'AutoComplete[dataSource] only supports type `string[] | Object[]`.',
-                );
-            }
-          })
-        : [];
-    }
-    const selectProps = {
-      ...omit(getOptionProps(this) as any, ['dataSource', 'optionLabelProp']),
-      ...this.$attrs,
-      mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
-      // optionLabelProp,
-      getInputElement: this.getInputElement,
-      notFoundContent: getComponent(this, 'notFoundContent'),
-      // placeholder: '',
-      class: cls,
-      ref: this.saveSelect,
+      const selectProps = {
+        ...omit(props, ['dataSource', 'optionLabelProp']),
+        ...attrs,
+        mode: Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
+        // optionLabelProp,
+        getInputElement,
+        notFoundContent,
+        // placeholder: '',
+        class: cls,
+        ref: selectRef,
+      };
+      return (
+        <Select {...selectProps} v-slots={{ option: slots.option }}>
+          {optionChildren}
+        </Select>
+      );
    };
-    return (
-      <Select {...selectProps} v-slots={{ option: this.$slots.option }}>
-        {optionChildren}
-      </Select>
-    );
  },
 });

--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -31,7 +31,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | autofocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
 | #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
-| options | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
+| options | 自动完成的数据源 | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |  |
 | option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
 | dropdownMenuStyle | dropdown 菜单自定义样式 | object |  | 1.5.0 |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |