Refactor mentions (#4341)

* refactor(mentions): use compositionAPI (#4313)

* refactor: mentions

* refactor: mentions

Co-authored-by: ajuner <[email protected]>

Author: tangjinzhou

components/mentions/__tests__/index.test.js

@@ -11,11 +11,12 @@ function $$(className) {
 }
 
 function triggerInput(wrapper, text = '') {
+  const lastChar = text[text.length - 1];
   wrapper.find('textarea').element.value = text;
   wrapper.find('textarea').element.selectionStart = text.length;
   wrapper.find('textarea').trigger('keydown');
   wrapper.find('textarea').trigger('change');
-  wrapper.find('textarea').trigger('keyup');
+  wrapper.find('textarea').trigger('keyup', { key: lastChar });
 }
 
 describe('Mentions', () => {
@@ -69,9 +70,9 @@ describe('Mentions', () => {
       },
       { sync: false, attachTo: 'body' },
     );
-    await sleep(500);
+    await sleep(100);
     triggerInput(wrapper, '@');
-    await sleep(500);
+    await sleep(100);
     expect($$('.ant-mentions-dropdown-menu-item').length).toBeTruthy();
     expect($$('.ant-spin')).toBeTruthy();
   });

components/mentions/index.tsx

@@ -1,15 +1,14 @@
-import type { App, PropType, VNodeTypes, Plugin, ExtractPropTypes } from 'vue';
-import { defineComponent, inject, nextTick } from 'vue';
+import type { App, PropType, Plugin, ExtractPropTypes } from 'vue';
+import { watch } from 'vue';
+import { ref, onMounted } from 'vue';
+import { defineComponent, nextTick } from 'vue';
 import classNames from '../_util/classNames';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
 import VcMentions from '../vc-mentions';
 import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps';
-import Spin from '../spin';
-import BaseMixin from '../_util/BaseMixin';
-import { defaultConfigProvider } from '../config-provider';
-import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
-import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import { flattenChildren, getOptionProps } from '../_util/props-util';
 
 const { Option } = VcMentions;
 
@@ -20,23 +19,26 @@ interface MentionsConfig {
 
 export interface MentionsOptionProps {
   value: string;
-  disabled: boolean;
-  children: VNodeTypes;
+  disabled?: boolean;
+  label?: string | number | ((o: MentionsOptionProps) => any);
   [key: string]: any;
 }
 
-function loadingFilterOption() {
-  return true;
+interface MentionsEntity {
+  prefix: string;
+  value: string;
 }
 
-function getMentions(value = '', config: MentionsConfig) {
+export type MentionPlacement = 'top' | 'bottom';
+
+const getMentions = (value = '', config: MentionsConfig): MentionsEntity[] => {
   const { prefix = '@', split = ' ' } = config || {};
-  const prefixList = Array.isArray(prefix) ? prefix : [prefix];
+  const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix];
 
   return value
     .split(split)
-    .map((str = '') => {
-      let hitPrefix = null;
+    .map((str = ''): MentionsEntity | null => {
+      let hitPrefix: string | null = null;
 
       prefixList.some(prefixStr => {
         const startStr = str.slice(0, prefixStr.length);
@@ -50,13 +52,13 @@ function getMentions(value = '', config: MentionsConfig) {
       if (hitPrefix !== null) {
         return {
           prefix: hitPrefix,
-          value: str.slice(hitPrefix.length),
+          value: str.slice((hitPrefix as string).length),
         };
       }
       return null;
     })
-    .filter(entity => !!entity && !!entity.value);
-}
+    .filter((entity): entity is MentionsEntity => !!entity && !!entity.value);
+};
 
 const mentionsProps = {
   ...baseMentionsProps,
@@ -73,145 +75,144 @@ const mentionsProps = {
   onChange: {
     type: Function as PropType<(text: string) => void>,
   },
+  notFoundContent: PropTypes.any,
+  defaultValue: String,
 };
 
 export type MentionsProps = Partial<ExtractPropTypes<typeof mentionsProps>>;
 
 const Mentions = defineComponent({
   name: 'AMentions',
-  mixins: [BaseMixin],
   inheritAttrs: false,
-  Option: { ...Option, name: 'AMentionsOption' },
-  getMentions,
   props: mentionsProps,
-  emits: ['update:value', 'change', 'focus', 'blur', 'select'],
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
+  getMentions,
+  Option,
+  emits: ['update:value', 'change', 'focus', 'blur', 'select', 'pressenter'],
+  slots: ['notFoundContent', 'option'],
+  setup(props, { slots, emit, attrs, expose }) {
+    const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props);
+    const focused = ref(false);
+    const vcMentions = ref(null);
+    const value = ref(props.value ?? props.defaultValue ?? '');
+    watch(
+      () => props.value,
+      val => {
+        value.value = val;
+      },
+    );
+    const handleFocus = (e: FocusEvent) => {
+      focused.value = true;
+      emit('focus', e);
     };
-  },
-  data() {
-    return {
-      focused: false,
+
+    const handleBlur = (e: FocusEvent) => {
+      focused.value = false;
+      emit('blur', e);
     };
-  },
-  mounted() {
-    nextTick(() => {
-      if (process.env.NODE_ENV === 'test') {
-        if (this.autofocus) {
-          this.focus();
-        }
+
+    const handleSelect = (...args: [MentionsOptionProps, string]) => {
+      emit('select', ...args);
+      focused.value = true;
+    };
+
+    const handleChange = (val: string) => {
+      if (props.value === undefined) {
+        value.value = val;
       }
-    });
-  },
-  methods: {
-    handleFocus(e: FocusEvent) {
-      this.$emit('focus', e);
-      this.setState({
-        focused: true,
-      });
-    },
-    handleBlur(e: FocusEvent) {
-      this.$emit('blur', e);
-      this.setState({
-        focused: false,
-      });
-    },
-    handleSelect(...args: [MentionsOptionProps, string]) {
-      this.$emit('select', ...args);
-      this.setState({
-        focused: true,
-      });
-    },
-    handleChange(val: string) {
-      this.$emit('update:value', val);
-      this.$emit('change', val);
-    },
-    getNotFoundContent(renderEmpty: RenderEmptyHandler) {
-      const notFoundContent = getComponent(this, 'notFoundContent');
+      emit('update:value', val);
+      emit('change', val);
+    };
+
+    const getNotFoundContent = () => {
+      const notFoundContent = props.notFoundContent;
       if (notFoundContent !== undefined) {
         return notFoundContent;
       }
-
-      return renderEmpty('Select');
-    },
-    getOptions() {
-      const { loading } = this.$props;
-      const children = getSlot(this);
-
-      if (loading) {
-        return (
-          <Option value="ANTD_SEARCHING" disabled>
-            <Spin size="small" />
-          </Option>
-        );
-      }
-      return children;
-    },
-    getFilterOption() {
-      const { filterOption, loading } = this.$props;
-      if (loading) {
-        return loadingFilterOption;
+      if (slots.notFoundContent) {
+        return slots.notFoundContent();
       }
-      return filterOption;
-    },
-    focus() {
-      (this.$refs.vcMentions as HTMLTextAreaElement).focus();
-    },
-    blur() {
-      (this.$refs.vcMentions as HTMLTextAreaElement).blur();
-    },
-  },
-  render() {
-    const { focused } = this.$data;
-    const { getPrefixCls, renderEmpty } = this.configProvider;
-    const {
-      prefixCls: customizePrefixCls,
-      disabled,
-      getPopupContainer,
-      ...restProps
-    } = getOptionProps(this) as any;
-    const { class: className, ...otherAttrs } = this.$attrs;
-    const prefixCls = getPrefixCls('mentions', customizePrefixCls);
-    const otherProps = omit(restProps, ['loading', 'onUpdate:value']);
-
-    const mergedClassName = classNames(className, {
-      [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-focused`]: focused,
-    });
+      return renderEmpty.value('Select');
+    };
 
-    const mentionsProps = {
-      prefixCls,
-      notFoundContent: this.getNotFoundContent(renderEmpty),
-      ...otherProps,
-      disabled,
-      filterOption: this.getFilterOption(),
-      getPopupContainer,
-      children: this.getOptions(),
-      class: mergedClassName,
-      rows: 1,
-      ...otherAttrs,
-      onChange: this.handleChange,
-      onSelect: this.handleSelect,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      ref: 'vcMentions',
+    const getOptions = () => {
+      return flattenChildren(slots.default?.() || []).map(item => {
+        return { ...getOptionProps(item), label: (item.children as any)?.default?.() };
+      });
     };
 
-    return <VcMentions {...mentionsProps} />;
+    const focus = () => {
+      (vcMentions.value as HTMLTextAreaElement).focus();
+    };
+
+    const blur = () => {
+      (vcMentions.value as HTMLTextAreaElement).blur();
+    };
+
+    expose({ focus, blur });
+
+    onMounted(() => {
+      nextTick(() => {
+        if (process.env.NODE_ENV === 'test') {
+          if (props.autofocus) {
+            focus();
+          }
+        }
+      });
+    });
+
+    return () => {
+      const { disabled, getPopupContainer, rows = 1, ...restProps } = props;
+      const { class: className, ...otherAttrs } = attrs;
+      const otherProps = omit(restProps, ['defaultValue', 'onUpdate:value', 'prefixCls']);
+
+      const mergedClassName = classNames(className, {
+        [`${prefixCls.value}-disabled`]: disabled,
+        [`${prefixCls.value}-focused`]: focused.value,
+        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+      });
+
+      const mentionsProps = {
+        prefixCls: prefixCls.value,
+        ...otherProps,
+        disabled,
+        direction: direction.value,
+        filterOption: props.filterOption,
+        getPopupContainer,
+        options: props.options || getOptions(),
+        class: mergedClassName,
+        ...otherAttrs,
+        rows,
+        onChange: handleChange,
+        onSelect: handleSelect,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ref: vcMentions,
+        value: value.value,
+      };
+      return (
+        <VcMentions
+          {...mentionsProps}
+          v-slots={{ notFoundContent: getNotFoundContent, option: slots.option }}
+        ></VcMentions>
+      );
+    };
   },
 });
 
+export const MentionsOption = {
+  ...Option,
+  name: 'AMentionsOption',
+};
+
 /* istanbul ignore next */
 Mentions.install = function (app: App) {
   app.component(Mentions.name, Mentions);
-  app.component(Mentions.Option.name, Mentions.Option);
+  app.component(MentionsOption.name, MentionsOption);
   return app;
 };
 
-export const MentionsOption = Mentions.Option;
-
 export default Mentions as typeof Mentions &
   Plugin & {
+    getMentions: typeof getMentions;
     readonly Option: typeof Option;
   };

components/mentions/style/index.less

@@ -64,10 +64,6 @@
       background-color: transparent;
     }
     .placeholder();
-
-    &:read-only {
-      cursor: default;
-    }
   }
 
   &-measure {
@@ -123,7 +119,7 @@
         overflow: hidden;
         color: @text-color;
         font-weight: normal;
-        line-height: 22px;
+        line-height: @line-height-base;
         white-space: nowrap;
         text-overflow: ellipsis;
         cursor: pointer;
@@ -159,9 +155,11 @@
         }
 
         &-active {
-          background-color: @item-active-bg;
+          background-color: @item-hover-bg;
         }
       }
     }
   }
 }
+
+@import './rtl';

components/mentions/style/rtl.less

@@ -0,0 +1,10 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@mention-prefix-cls: ~'@{ant-prefix}-mentions';
+
+.@{mention-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}