feat: mentions support allowClear

docs/demo.md

@@ -36,3 +36,7 @@ Option has `key` and filter only hit by `key`
 ## Debug
 
 <code src="./examples/debug.tsx"></code>
+
+## Allow Clear
+
+<code src="./examples/allowClear.tsx"></code>

docs/examples/allowClear.tsx

@@ -0,0 +1,15 @@
+import Mentions from 'rc-mentions';
+import React, { useState } from 'react';
+
+export default function App() {
+  const [value, setValue] = useState('hello world');
+
+  return (
+    <div>
+      <p>Uncontrolled</p>
+      <Mentions allowClear />
+      <p>controlled</p>
+      <Mentions value={value} onChange={setValue} allowClear />
+    </div>
+  );
+}

src/Mentions.tsx

@@ -23,7 +23,7 @@ import {
 
 type BaseTextareaAttrs = Omit<
   TextAreaProps,
-  'prefix' | 'onChange' | 'onSelect' | 'allowClear' | 'showCount'
+  'prefix' | 'onChange' | 'onSelect' | 'showCount'
 >;
 
 export type Placement = 'top' | 'bottom';
@@ -73,7 +73,7 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
   (props, ref) => {
     const {
       // Style
-      prefixCls = 'rc-mentions',
+      prefixCls,
       className,
       style,
 
@@ -86,6 +86,7 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       children,
       options,
       open,
+      allowClear,
 
       // Events
       validateSearch = defaultValidateSearch,
@@ -475,16 +476,52 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
 );
 
 const Mentions = forwardRef<MentionsRef, MentionsProps>(
-  ({ suffix, prefixCls, classes, value, ...rest }, ref) => {
+  (
+    {
+      suffix,
+      prefixCls = 'rc-mentions',
+      classes,
+      defaultValue,
+      value: customValue,
+      allowClear,
+      onChange,
+      ...rest
+    },
+    ref,
+  ) => {
+    // ============================== Value ===============================
+    const [mergedValue, setMergedValue] = useMergedState('', {
+      defaultValue,
+      value: customValue,
+    });
+
+    // ============================== Change ==============================
+    const triggerChange = (currentValue: string) => {
+      setMergedValue(currentValue);
+      onChange?.(currentValue);
+    };
+
+    // ============================== Reset ===============================
+    const handleReset = () => {
+      triggerChange('');
+    };
+
     return (
       <BaseInput
         inputElement={
-          <InternalMentions prefixCls={prefixCls} ref={ref} {...rest} />
+          <InternalMentions
+            prefixCls={prefixCls}
+            ref={ref}
+            onChange={triggerChange}
+            {...rest}
+          />
         }
         suffix={suffix}
         prefixCls={prefixCls}
         classes={classes}
-        value={value}
+        value={mergedValue}
+        allowClear={allowClear}
+        handleReset={handleReset}
       />
     );
   },

tests/AllowClear.spec.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render } from '@testing-library/react';
+import type { TextareaHTMLAttributes } from 'react';
+import Mentions from '../src';
+
+describe('should support allowClear', () => {
+  it('should change type when click', () => {
+    const { container } = render(<Mentions allowClear />);
+    fireEvent.change(container.querySelector('textarea')!, {
+      target: { value: '111' },
+    });
+    expect(container.querySelector('textarea')?.value).toEqual('111');
+    expect(
+      container.querySelector('.rc-mentions-clear-icon-hidden'),
+    ).toBeFalsy();
+    fireEvent.click(container.querySelector('.rc-mentions-clear-icon')!);
+    expect(
+      container.querySelector('.rc-mentions-clear-icon-hidden'),
+    ).toBeTruthy();
+    expect(container.querySelector('textarea')?.value).toEqual('');
+  });
+
+  it('should not show icon if value is undefined, null or empty string', () => {
+    const wrappers = [null, undefined, ''].map(val =>
+      render(
+        <Mentions
+          allowClear
+          value={val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']}
+        />,
+      ),
+    );
+    wrappers.forEach(({ asFragment, container }) => {
+      expect(container.querySelector('textarea')?.value).toEqual('');
+      expect(
+        container.querySelector('.rc-mentions-clear-icon-hidden'),
+      ).toBeTruthy();
+      expect(asFragment().firstChild).toMatchSnapshot();
+    });
+  });
+
+  it('should not show icon if defaultValue is undefined, null or empty string', () => {
+    const wrappers = [null, undefined, ''].map(val =>
+      render(
+        <Mentions
+          allowClear
+          defaultValue={
+            val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']
+          }
+        />,
+      ),
+    );
+    wrappers.forEach(({ asFragment, container }) => {
+      expect(container.querySelector('textarea')?.value).toEqual('');
+      expect(
+        container.querySelector('.rc-mentions-clear-icon-hidden'),
+      ).toBeTruthy();
+      expect(asFragment().firstChild).toMatchSnapshot();
+    });
+  });
+
+  it('should trigger event correctly', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Mentions allowClear defaultValue="111" onChange={onChange} />,
+    );
+    fireEvent.click(container.querySelector('.rc-mentions-clear-icon')!);
+    expect(onChange).toHaveBeenCalledWith('');
+    expect(container.querySelector('textarea')?.value).toBe('');
+  });
+});

tests/__snapshots__/AllowClear.spec.tsx.snap

@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 1`] = `
+<span
+  class="rc-mentions-affix-wrapper"
+>
+  <div
+    class="rc-mentions"
+  >
+    <textarea
+      class="rc-textarea"
+      rows="1"
+    />
+  </div>
+  <span
+    class="rc-mentions-suffix"
+  >
+    <span
+      class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      role="button"
+      tabindex="-1"
+    >
+      ✖
+    </span>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 2`] = `
+<span
+  class="rc-mentions-affix-wrapper"
+>
+  <div
+    class="rc-mentions"
+  >
+    <textarea
+      class="rc-textarea"
+      rows="1"
+    />
+  </div>
+  <span
+    class="rc-mentions-suffix"
+  >
+    <span
+      class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      role="button"
+      tabindex="-1"
+    >
+      ✖
+    </span>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 3`] = `
+<span
+  class="rc-mentions-affix-wrapper"
+>
+  <div
+    class="rc-mentions"
+  >
+    <textarea
+      class="rc-textarea"
+      rows="1"
+    />
+  </div>
+  <span
+    class="rc-mentions-suffix"
+  >
+    <span
+      class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      role="button"
+      tabindex="-1"
+    >
+      ✖
+    </span>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if value is undefined, null or empty string 1`] = `
+<span
+  class="rc-mentions-affix-wrapper"
+>
+  <div
+    class="rc-mentions"
+  >
+    <textarea
+      class="rc-textarea"
+      rows="1"
+    />
+  </div>
+  <span
+    class="rc-mentions-suffix"
+  >
+    <span
+      class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      role="button"
+      tabindex="-1"
+    >
+      ✖
+    </span>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if value is undefined, null or empty string 2`] = `
+<span
+  class="rc-mentions-affix-wrapper"
+>
+  <div
+    class="rc-mentions"
+  >
+    <textarea
+      class="rc-textarea"
+      rows="1"
+    />
+  </div>
+  <span
+    class="rc-mentions-suffix"
+  >
+    <span
+      class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      role="button"
+      tabindex="-1"
+    >
+      ✖
+    </span>
+  </span>
+</span>
+`;
+
+exports[`should support allowClear should not show icon if value is undefined, null or empty string 3`] = `
+<span
+  class="rc-mentions-affix-wrapper"
+>
+  <div
+    class="rc-mentions"
+  >
+    <textarea
+      class="rc-textarea"
+      rows="1"
+    />
+  </div>
+  <span
+    class="rc-mentions-suffix"
+  >
+    <span
+      class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      role="button"
+      tabindex="-1"
+    >
+      ✖
+    </span>
+  </span>
+</span>
+`;

tsconfig.json

@@ -12,5 +12,6 @@
       "@@/*": [".dumi/tmp/*"],
       "rc-mentions": ["src/index.ts"]
     }
-  }
+  },
+  "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
 }