diff --git a/components/mentions/__tests__/index.test.tsx b/components/mentions/__tests__/index.test.tsx
index 320336eafd09..725a4e5baee1 100644
--- a/components/mentions/__tests__/index.test.tsx
+++ b/components/mentions/__tests__/index.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import Mentions from '..';
+import Mentions,{Option} from '..';
import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
@@ -84,4 +84,21 @@ describe('Mentions', () => {
expect(wrapper.container.querySelectorAll('li.ant-mentions-dropdown-menu-item').length).toBe(1);
expect(wrapper.container.querySelectorAll('.bamboo-light').length).toBeTruthy();
});
+
+ it('warning if use Mentions.Option', () => {
+ const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ render(
+
+
+
+
+ ,
+ );
+ expect(errorSpy).toHaveBeenCalledWith(
+ 'Warning: [antd: Mentions] `Mentions.Option` is deprecated. Please use `options` instead.',
+ );
+ });
});
diff --git a/components/mentions/demo/async.tsx b/components/mentions/demo/async.tsx
index 440342414830..447c9189970e 100644
--- a/components/mentions/demo/async.tsx
+++ b/components/mentions/demo/async.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useRef, useState } from 'react';
import { Mentions } from 'antd';
import debounce from 'lodash/debounce';
-const { Option } = Mentions;
const App: React.FC = () => {
const [loading, setLoading] = useState(false);
const [users, setUsers] = useState<{ login: string; avatar_url: string }[]>([]);
@@ -15,12 +14,12 @@ const App: React.FC = () => {
}
fetch(`https://api.github.com/search/users?q=${key}`)
- .then(res => res.json())
- .then(({ items = [] }) => {
+ .then((res) => res.json())
+ .then(({ options = [] }) => {
if (ref.current !== key) return;
setLoading(false);
- setUsers(items.slice(0, 10));
+ setUsers(options.slice(0, 10));
});
};
@@ -36,14 +35,22 @@ const App: React.FC = () => {
};
return (
-
- {users.map(({ login, avatar_url: avatar }) => (
-
- ))}
-
+ ({
+ key: login,
+ value: login,
+ className: 'antd-demo-dynamic-option',
+ label: (
+ <>
+
+ {login}
+ >
+ ),
+ }))}
+ />
);
};
diff --git a/components/mentions/demo/autoSize.tsx b/components/mentions/demo/autoSize.tsx
index 9454cd4864e7..3f6bc7847624 100644
--- a/components/mentions/demo/autoSize.tsx
+++ b/components/mentions/demo/autoSize.tsx
@@ -1,14 +1,25 @@
import React from 'react';
import { Mentions } from 'antd';
-const { Option } = Mentions;
-
const App: React.FC = () => (
-
-
-
-
-
+
);
export default App;
diff --git a/components/mentions/demo/basic.tsx b/components/mentions/demo/basic.tsx
index e307d99ae95c..10f6f9150594 100644
--- a/components/mentions/demo/basic.tsx
+++ b/components/mentions/demo/basic.tsx
@@ -1,14 +1,12 @@
import React from 'react';
import { Mentions } from 'antd';
-import type { OptionProps } from 'antd/es/mentions';
-
-const { Option } = Mentions;
+import type { MentionsOptionProps } from 'antd/es/mentions';
const onChange = (value: string) => {
console.log('Change:', value);
};
-const onSelect = (option: OptionProps) => {
+const onSelect = (option: MentionsOptionProps) => {
console.log('select', option);
};
@@ -18,11 +16,21 @@ const App: React.FC = () => (
onChange={onChange}
onSelect={onSelect}
defaultValue="@afc163"
- >
-
-
-
-
+ options={[
+ {
+ value: 'afc163',
+ label: 'afc163',
+ },
+ {
+ value: 'zombieJ',
+ label: 'zombieJ',
+ },
+ {
+ value: 'yesmeck',
+ label: 'yesmeck',
+ },
+ ]}
+ />
);
export default App;
diff --git a/components/mentions/demo/form.tsx b/components/mentions/demo/form.tsx
index 98d5703d35ad..53879bbd0fea 100644
--- a/components/mentions/demo/form.tsx
+++ b/components/mentions/demo/form.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Button, Form, Mentions } from 'antd';
-const { Option, getMentions } = Mentions;
+const { getMentions } = Mentions;
const App: React.FC = () => {
const [form] = Form.useForm();
@@ -36,11 +36,23 @@ const App: React.FC = () => {
wrapperCol={{ span: 16 }}
rules={[{ validator: checkMention }]}
>
-
-
-
-
-
+
{
wrapperCol={{ span: 16 }}
rules={[{ required: true }]}
>
-
-
-
-
-
+