Mentions data driven

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 (
-    <Mentions style={{ width: '100%' }} loading={loading} onSearch={onSearch}>
-      {users.map(({ login, avatar_url: avatar }) => (
-        <Option key={login} value={login} className="antd-demo-dynamic-option">
-          <img src={avatar} alt={login} />
-          <span>{login}</span>
-        </Option>
-      ))}
-    </Mentions>
+    <Mentions
+      style={{ width: '100%' }}
+      loading={loading}
+      onSearch={onSearch}
+      options={users.map(({ login, avatar_url: avatar }) => ({
+        key: login,
+        value: login,
+        className: 'antd-demo-dynamic-option',
+        label: (
+          <>
+            <img src={avatar} alt={login} />
+            <span>{login}</span>
+          </>
+        ),
+      }))}
+    />
   );
 };
 

components/mentions/demo/autoSize.tsx

@@ -1,14 +1,25 @@
 import React from 'react';
 import { Mentions } from 'antd';
 
-const { Option } = Mentions;
-
 const App: React.FC = () => (
-  <Mentions autoSize style={{ width: '100%' }}>
-    <Option value="afc163">afc163</Option>
-    <Option value="zombieJ">zombieJ</Option>
-    <Option value="yesmeck">yesmeck</Option>
-  </Mentions>
+  <Mentions
+    autoSize
+    style={{ width: '100%' }}
+    options={[
+      {
+        value: 'afc163',
+        label: 'afc163',
+      },
+      {
+        value: 'zombieJ',
+        label: 'zombieJ',
+      },
+      {
+        value: 'yesmeck',
+        label: 'yesmeck',
+      },
+    ]}
+  />
 );
 
 export default App;

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"
-  >
-    <Option value="afc163">afc163</Option>
-    <Option value="zombieJ">zombieJ</Option>
-    <Option value="yesmeck">yesmeck</Option>
-  </Mentions>
+    options={[
+      {
+        value: 'afc163',
+        label: 'afc163',
+      },
+      {
+        value: 'zombieJ',
+        label: 'zombieJ',
+      },
+      {
+        value: 'yesmeck',
+        label: 'yesmeck',
+      },
+    ]}
+  />
 );
 
 export default App;

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 }]}
       >
-        <Mentions rows={1}>
-          <Option value="afc163">afc163</Option>
-          <Option value="zombieJ">zombieJ</Option>
-          <Option value="yesmeck">yesmeck</Option>
-        </Mentions>
+        <Mentions
+          rows={1}
+          options={[
+            {
+              value: 'afc163',
+              label: 'afc163',
+            },
+            {
+              value: 'zombieJ',
+              label: 'zombieJ',
+            },
+            {
+              value: 'yesmeck',
+              label: 'yesmeck',
+            },
+          ]}
+        />
       </Form.Item>
       <Form.Item
         name="bio"
@@ -49,11 +61,24 @@ const App: React.FC = () => {
         wrapperCol={{ span: 16 }}
         rules={[{ required: true }]}
       >
-        <Mentions rows={3} placeholder="You can use @ to ref user here">
-          <Option value="afc163">afc163</Option>
-          <Option value="zombieJ">zombieJ</Option>
-          <Option value="yesmeck">yesmeck</Option>
-        </Mentions>
+        <Mentions
+          rows={3}
+          placeholder="You can use @ to ref user here"
+          options={[
+            {
+              value: 'afc163',
+              label: 'afc163',
+            },
+            {
+              value: 'zombieJ',
+              label: 'zombieJ',
+            },
+            {
+              value: 'yesmeck',
+              label: 'yesmeck',
+            },
+          ]}
+        />
       </Form.Item>
       <Form.Item wrapperCol={{ span: 14, offset: 6 }}>
         <Button htmlType="submit" type="primary">

components/mentions/demo/placement.tsx

@@ -1,14 +1,25 @@
 import React from 'react';
 import { Mentions } from 'antd';
 
-const { Option } = Mentions;
-
 const App: React.FC = () => (
-  <Mentions style={{ width: '100%' }} placement="top">
-    <Option value="afc163">afc163</Option>
-    <Option value="zombieJ">zombieJ</Option>
-    <Option value="yesmeck">yesmeck</Option>
-  </Mentions>
+  <Mentions
+    style={{ width: '100%' }}
+    placement="top"
+    options={[
+      {
+        value: 'afc163',
+        label: 'afc163',
+      },
+      {
+        value: 'zombieJ',
+        label: 'zombieJ',
+      },
+      {
+        value: 'yesmeck',
+        label: 'yesmeck',
+      },
+    ]}
+  />
 );
 
 export default App;

components/mentions/demo/prefix.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { Mentions } from 'antd';
 
-const { Option } = Mentions;
-
 const MOCK_DATA = {
   '@': ['afc163', 'zombiej', 'yesmeck'],
   '#': ['1.0', '2.0', '3.0'],
@@ -23,13 +21,12 @@ const App: React.FC = () => {
       placeholder="input @ to mention people, # to mention tag"
       prefix={['@', '#']}
       onSearch={onSearch}
-    >
-      {(MOCK_DATA[prefix] || []).map(value => (
-        <Option key={value} value={value}>
-          {value}
-        </Option>
-      ))}
-    </Mentions>
+      options={(MOCK_DATA[prefix] || []).map((value) => ({
+        key: value,
+        value,
+        label: value,
+      }))}
+    />
   );
 };
 

components/mentions/demo/readonly.tsx

@@ -1,25 +1,28 @@
 import React from 'react';
 import { Mentions } from 'antd';
 
-const { Option } = Mentions;
-
-const getOptions = () =>
-  ['afc163', 'zombiej', 'yesmeck'].map(value => (
-    <Option key={value} value={value}>
-      {value}
-    </Option>
-  ));
+const options = ['afc163', 'zombiej', 'yesmeck'].map((value) => ({
+  value,
+  key: value,
+  label: value,
+}));
 
 const App: React.FC = () => (
   <>
     <div style={{ marginBottom: 10 }}>
-      <Mentions style={{ width: '100%' }} placeholder="this is disabled Mentions" disabled>
-        {getOptions()}
-      </Mentions>
+      <Mentions
+        style={{ width: '100%' }}
+        placeholder="this is disabled Mentions"
+        disabled
+        options={options}
+      />
     </div>
-    <Mentions style={{ width: '100%' }} placeholder="this is readOnly Mentions" readOnly>
-      {getOptions()}
-    </Mentions>
+    <Mentions
+      style={{ width: '100%' }}
+      placeholder="this is readOnly Mentions"
+      readOnly
+      options={options}
+    />
   </>
 );
 

components/mentions/demo/render-panel.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import { Mentions } from 'antd';
 
-const { Option } = Mentions;
-
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalMentions } = Mentions;
 
+const options = [
+  {
+    value: 'afc163',
+    label: 'afc163',
+  },
+  {
+    value: 'zombieJ',
+    label: 'zombieJ',
+  },
+]
+
 const App: React.FC = () => (
-  <InternalMentions style={{ width: '100%' }} value="@">
-    <Option value="afc163">afc163</Option>
-    <Option value="zombieJ">zombieJ</Option>
-  </InternalMentions>
+  <InternalMentions style={{ width: '100%' }} value="@" options={options}/>
 );
 
 export default App;

components/mentions/demo/status.tsx

@@ -1,34 +1,47 @@
 import React from 'react';
 import { Mentions, Space } 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);
 };
 
 const App: React.FC = () => {
-  const options = (
-    <>
-      <Option value="afc163">afc163</Option>
-      <Option value="zombieJ">zombieJ</Option>
-      <Option value="yesmeck">yesmeck</Option>
-    </>
-  );
+  const options = [
+    {
+      value: 'afc163',
+      label: 'afc163',
+    },
+    {
+      value: 'zombieJ',
+      label: 'zombieJ',
+    },
+    {
+      value: 'yesmeck',
+      label: 'yesmeck',
+    },
+  ];
 
   return (
     <Space direction="vertical">
-      <Mentions onChange={onChange} onSelect={onSelect} defaultValue="@afc163" status="error">
-        {options}
-      </Mentions>
-      <Mentions onChange={onChange} onSelect={onSelect} defaultValue="@afc163" status="warning">
-        {options}
-      </Mentions>
+      <Mentions
+        onChange={onChange}
+        onSelect={onSelect}
+        defaultValue="@afc163"
+        status="error"
+        options={options}
+      />
+      <Mentions
+        onChange={onChange}
+        onSelect={onSelect}
+        defaultValue="@afc163"
+        status="warning"
+        options={options}
+      />
     </Space>
   );
 };