ant-design/components/mentions/demo/allowClear.tsx
Eden Wang 28aaeafbbc
feat(mentions): supports 'allowClear' option (#46396)
* feat(mentions): supports 'allowClear' option

* feat(mentions): add allowClear testcase

* feat(mentions): update package and styles

* feat(mentions): update lint and styles

* fix: fixed lint error

* test: add case for custom clearIcon

* feat: add useAllowClear hook

* feat: rename useAllowClear to getAllowClear

* feat: rename useAllowClear to getAllowClear

* feat(mentions): add demo for allowClear

* feat(mentions): update demo desc

* feat(mentions): update demo desc

* feat(mentions): style align middle

* feat: add multi line mentions demo and update icon position

* feat: fixing visual regression report

---------

Co-authored-by: afc163 <afc163@gmail.com>
2023-12-25 10:37:26 +08:00

25 lines
590 B
TypeScript

import React, { useState } from 'react';
import { CloseSquareFilled } from '@ant-design/icons';
import { Mentions } from 'antd';
const App: React.FC = () => {
const [value, setValue] = useState('hello world');
return (
<>
<Mentions value={value} onChange={setValue} allowClear />
<br />
<br />
<Mentions
value={value}
onChange={setValue}
allowClear={{ clearIcon: <CloseSquareFilled /> }}
/>
<br />
<br />
<Mentions value={value} onChange={setValue} allowClear rows={3} />
</>
);
};
export default App;