You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
411 lines
31 KiB
411 lines
31 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[5981],{678973:function(p,l,t){t.r(l);var v=t(502143),Z=t(968521),g=t(720719),h=t(28840),a=t(759907),o=t(828089),b=t(825673),i=t(902068),f=t(574399),E=t(863942),x=t(316073),M=t(24628),k=t(719260),y=t(956140),s=t(127179),u=t(905388),D=t(40428),P=t(606965),C=t(268696),w=t(587302),r=t(424128),F=t(249706),O=t(795127),A=t(116846),I=t(212039),T=t(73024),B=t(553913),c=t(606641),d=t(667294),n=t(370917);function m(){var _=(0,c.eL)(),e=_.texts;return(0,n.tZ)(c.dY,null,(0,n.tZ)(d.Fragment,null,(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("p",null,e[0].value),(0,n.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,n.tZ)("p",null,e[1].value),(0,n.tZ)("h3",{id:"510-\u7528\u6CD5\u5347\u7EA7"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#510-\u7528\u6CD5\u5347\u7EA7",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"5.1.0 \u7528\u6CD5\u5347\u7EA7")),(0,n.tZ)(i.Z,{message:"\u5728 5.1.0 \u7248\u672C\u540E\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86 <Mentions options={[...]} /> \u7684\u7B80\u5199\u65B9\u5F0F\uFF0C\u6709\u66F4\u597D\u7684\u6027\u80FD\u548C\u66F4\u65B9\u4FBF\u7684\u6570\u636E\u7EC4\u7EC7\u65B9\u5F0F\uFF0C\u5F00\u53D1\u8005\u4E0D\u518D\u9700\u8981\u81EA\u884C\u62FC\u63A5 JSX\u3002\u540C\u65F6\u6211\u4EEC\u5E9F\u5F03\u4E86\u539F\u5148\u7684\u5199\u6CD5\uFF0C\u4F60\u8FD8\u662F\u53EF\u4EE5\u5728 5.x \u7EE7\u7EED\u4F7F\u7528\uFF0C\u4F46\u4F1A\u5728\u63A7\u5236\u53F0\u770B\u5230\u8B66\u544A\uFF0C\u5E76\u4F1A\u5728 6.0 \u540E\u79FB\u9664\u3002"}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)(a.Z,{lang:"jsx"},e[2].value),(0,n.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,n.tZ)(u.Z,{items:[{demo:{id:"components-mentions-demo-basic"},previewerProps:{title:"\u57FA\u672C\u4F7F\u7528",filename:"components/mentions/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Mentions } from 'antd';
|
|
const onChange = (value) => {
|
|
console.log('Change:', value);
|
|
};
|
|
const onSelect = (option) => {
|
|
console.log('select', option);
|
|
};
|
|
const App = () => (
|
|
<Mentions
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
onChange={onChange}
|
|
onSelect={onSelect}
|
|
defaultValue="@afc163"
|
|
options={[
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
{
|
|
value: 'yesmeck',
|
|
label: 'yesmeck',
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u57FA\u672C\u4F7F\u7528\u3002</p>"}},{demo:{id:"components-mentions-demo-async"},previewerProps:{title:"\u5F02\u6B65\u52A0\u8F7D",filename:"components/mentions/demo/async.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useCallback, useRef, useState } from 'react';
|
|
import { Mentions } from 'antd';
|
|
import debounce from 'lodash/debounce';
|
|
const App = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [users, setUsers] = useState([]);
|
|
const ref = useRef();
|
|
const loadGithubUsers = (key) => {
|
|
if (!key) {
|
|
setUsers([]);
|
|
return;
|
|
}
|
|
fetch(\`https://api.github.com/search/users?q=\${key}\`)
|
|
.then((res) => res.json())
|
|
.then(({ items = [] }) => {
|
|
if (ref.current !== key) return;
|
|
setLoading(false);
|
|
setUsers(items.slice(0, 10));
|
|
});
|
|
};
|
|
const debounceLoadGithubUsers = useCallback(debounce(loadGithubUsers, 800), []);
|
|
const onSearch = (search) => {
|
|
console.log('Search:', search);
|
|
ref.current = search;
|
|
setLoading(!!search);
|
|
setUsers([]);
|
|
debounceLoadGithubUsers(search);
|
|
};
|
|
return (
|
|
<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>
|
|
</>
|
|
),
|
|
}))}
|
|
/>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u5339\u914D\u5185\u5BB9\u5217\u8868\u4E3A\u5F02\u6B65\u8FD4\u56DE\u65F6\u3002</p>",style:`.antd-demo-dynamic-option img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 8px;
|
|
}`}},{demo:{id:"components-mentions-demo-form"},previewerProps:{title:"\u914D\u5408 Form \u4F7F\u7528",filename:"components/mentions/demo/form.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, Form, Mentions, Space } from 'antd';
|
|
import React from 'react';
|
|
const { getMentions } = Mentions;
|
|
const App = () => {
|
|
const [form] = Form.useForm();
|
|
const onReset = () => {
|
|
form.resetFields();
|
|
};
|
|
const onFinish = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
console.log('Submit:', values);
|
|
} catch (errInfo) {
|
|
console.log('Error:', errInfo);
|
|
}
|
|
};
|
|
const checkMention = async (_, value) => {
|
|
const mentions = getMentions(value);
|
|
if (mentions.length < 2) {
|
|
throw new Error('More than one must be selected!');
|
|
}
|
|
};
|
|
return (
|
|
<Form form={form} layout="horizontal" onFinish={onFinish}>
|
|
<Form.Item
|
|
name="coders"
|
|
label="Top coders"
|
|
labelCol={{
|
|
span: 6,
|
|
}}
|
|
wrapperCol={{
|
|
span: 16,
|
|
}}
|
|
rules={[
|
|
{
|
|
validator: checkMention,
|
|
},
|
|
]}
|
|
>
|
|
<Mentions
|
|
rows={1}
|
|
options={[
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
{
|
|
value: 'yesmeck',
|
|
label: 'yesmeck',
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="bio"
|
|
label="Bio"
|
|
labelCol={{
|
|
span: 6,
|
|
}}
|
|
wrapperCol={{
|
|
span: 16,
|
|
}}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
},
|
|
]}
|
|
>
|
|
<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,
|
|
}}
|
|
>
|
|
<Space wrap>
|
|
<Button htmlType="submit" type="primary">
|
|
Submit
|
|
</Button>
|
|
<Button htmlType="button" onClick={onReset}>
|
|
Reset
|
|
</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u53D7\u63A7\u6A21\u5F0F\uFF0C\u4F8B\u5982\u914D\u5408 Form \u4F7F\u7528\u3002</p>"}},{demo:{id:"components-mentions-demo-prefix"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u89E6\u53D1\u5B57\u7B26",filename:"components/mentions/demo/prefix.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Mentions } from 'antd';
|
|
const MOCK_DATA = {
|
|
'@': ['afc163', 'zombiej', 'yesmeck'],
|
|
'#': ['1.0', '2.0', '3.0'],
|
|
};
|
|
const App = () => {
|
|
const [prefix, setPrefix] = useState('@');
|
|
const onSearch = (_, newPrefix) => {
|
|
setPrefix(newPrefix);
|
|
};
|
|
return (
|
|
<Mentions
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
placeholder="input @ to mention people, # to mention tag"
|
|
prefix={['@', '#']}
|
|
onSearch={onSearch}
|
|
options={(MOCK_DATA[prefix] || []).map((value) => ({
|
|
key: value,
|
|
value,
|
|
label: value,
|
|
}))}
|
|
/>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u901A\u8FC7 <code>prefix</code> \u5C5E\u6027\u81EA\u5B9A\u4E49\u89E6\u53D1\u5B57\u7B26\u3002\u9ED8\u8BA4\u4E3A <code>@</code>, \u53EF\u4EE5\u5B9A\u4E49\u4E3A\u6570\u7EC4\u3002</p>"}},{demo:{id:"components-mentions-demo-readonly"},previewerProps:{title:"\u65E0\u6548\u6216\u53EA\u8BFB",filename:"components/mentions/demo/readonly.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Mentions } from 'antd';
|
|
const options = ['afc163', 'zombiej', 'yesmeck'].map((value) => ({
|
|
value,
|
|
key: value,
|
|
label: value,
|
|
}));
|
|
const App = () => (
|
|
<>
|
|
<div
|
|
style={{
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Mentions
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
placeholder="this is disabled Mentions"
|
|
disabled
|
|
options={options}
|
|
/>
|
|
</div>
|
|
<Mentions
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
placeholder="this is readOnly Mentions"
|
|
readOnly
|
|
options={options}
|
|
/>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u901A\u8FC7 <code>disabled</code> \u5C5E\u6027\u8BBE\u7F6E\u662F\u5426\u751F\u6548\u3002\u901A\u8FC7 <code>readOnly</code> \u5C5E\u6027\u8BBE\u7F6E\u662F\u5426\u53EA\u8BFB\u3002</p>"}},{demo:{id:"components-mentions-demo-placement"},previewerProps:{title:"\u5411\u4E0A\u5C55\u5F00",filename:"components/mentions/demo/placement.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Mentions } from 'antd';
|
|
const App = () => (
|
|
<Mentions
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
placement="top"
|
|
options={[
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
{
|
|
value: 'yesmeck',
|
|
label: 'yesmeck',
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u5411\u4E0A\u5C55\u5F00\u5EFA\u8BAE\u3002</p>"}},{demo:{id:"components-mentions-demo-autosize"},previewerProps:{title:"\u81EA\u52A8\u5927\u5C0F",filename:"components/mentions/demo/autoSize.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Mentions } from 'antd';
|
|
const App = () => (
|
|
<Mentions
|
|
autoSize
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
options={[
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
{
|
|
value: 'yesmeck',
|
|
label: 'yesmeck',
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\u3002</p>"}},{demo:{id:"components-mentions-demo-status"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u72B6\u6001",filename:"components/mentions/demo/status.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Mentions, Space } from 'antd';
|
|
const onChange = (value) => {
|
|
console.log('Change:', value);
|
|
};
|
|
const onSelect = (option) => {
|
|
console.log('select', option);
|
|
};
|
|
const App = () => {
|
|
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={options}
|
|
/>
|
|
<Mentions
|
|
onChange={onChange}
|
|
onSelect={onSelect}
|
|
defaultValue="@afc163"
|
|
status="warning"
|
|
options={options}
|
|
/>
|
|
</Space>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u4F7F\u7528 <code>status</code> \u4E3A Mentions \u6DFB\u52A0\u72B6\u6001\u3002\u53EF\u9009 <code>error</code> \u6216\u8005 <code>warning</code>\u3002</p>"}},{demo:{id:"components-mentions-demo-render-panel"},previewerProps:{debug:!0,title:"_InternalPanelDoNotUseOrYouWillBeFired",filename:"components/mentions/demo/render-panel.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Mentions } from 'antd';
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalMentions } = Mentions;
|
|
const options = [
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
];
|
|
const App = () => (
|
|
<InternalMentions
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
value="@"
|
|
options={options}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u8C03\u8BD5\u7528\u7EC4\u4EF6\uFF0C\u8BF7\u52FF\u76F4\u63A5\u4F7F\u7528\u3002</p>"}},{demo:{id:"components-mentions-demo-component-token"},previewerProps:{debug:!0,title:"\u7EC4\u4EF6 Token",filename:"components/mentions/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { ConfigProvider, Mentions } from 'antd';
|
|
import React from 'react';
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalMentions } = Mentions;
|
|
const options = [
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
];
|
|
const App = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Mentions: {
|
|
dropdownHeight: 500,
|
|
controlItemWidth: 300,
|
|
zIndexPopup: 1000,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<InternalMentions
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
value="@"
|
|
options={options}
|
|
/>
|
|
</ConfigProvider>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"api"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"API"),(0,n.tZ)("h3",{id:"mentions"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#mentions",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Mentions"),(0,n.tZ)(o.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[3].value),(0,n.tZ)("th",null,e[4].value),(0,n.tZ)("th",null,e[5].value),(0,n.tZ)("th",null,e[6].value),(0,n.tZ)("th",null,e[7].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[8].value),(0,n.tZ)("td",null,e[9].value),(0,n.tZ)("td",null,e[10].value),(0,n.tZ)("td",null,e[11].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[12].value),(0,n.tZ)("td",null,e[13].value),(0,n.tZ)("td",null,e[14].value),(0,n.tZ)("td",null,e[15].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[16].value),(0,n.tZ)("td",null,e[17].value),(0,n.tZ)("td",null,e[18].value),(0,n.tZ)("td",null,e[19].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[20].value),(0,n.tZ)("td",null,e[21].value),(0,n.tZ)("td",null,e[22].value),(0,n.tZ)("td",null,e[23].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[24].value),(0,n.tZ)("td",null,e[25].value),(0,n.tZ)("td",null,e[26].value),(0,n.tZ)("td",null,e[27].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[28].value),(0,n.tZ)("td",null,e[29].value),(0,n.tZ)("td",null,e[30].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[31].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[32].value),(0,n.tZ)("td",null,e[33].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[34].value),e[35].value,(0,n.tZ)("code",null,e[36].value)),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[37].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[38].value),(0,n.tZ)("td",null,e[39].value),(0,n.tZ)("td",null,e[40].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[41].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[42].value),(0,n.tZ)("td",null,e[43].value),(0,n.tZ)("td",null,e[44].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[45].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[46].value),(0,n.tZ)("td",null,e[47].value),(0,n.tZ)("td",null,e[48].value),(0,n.tZ)("td",null,e[49].value),(0,n.tZ)("td",null,e[50].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[51].value),(0,n.tZ)("td",null,e[52].value),(0,n.tZ)("td",null,e[53].value),(0,n.tZ)("td",null,e[54].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[55].value),(0,n.tZ)("td",null,e[56].value),(0,n.tZ)("td",null,e[57].value),(0,n.tZ)("td",null,e[58].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[59].value),(0,n.tZ)("td",null,e[60].value),(0,n.tZ)("td",null,e[61].value),(0,n.tZ)("td",null,e[62].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[63].value),(0,n.tZ)("td",null,e[64].value),(0,n.tZ)("td",null,e[65].value),(0,n.tZ)("td",null,e[66].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[67].value),(0,n.tZ)("td",null,e[68].value),(0,n.tZ)("td",null,e[69].value),(0,n.tZ)("td",null,e[70].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[71].value),(0,n.tZ)("td",null,e[72].value),(0,n.tZ)("td",null,e[73].value),(0,n.tZ)("td",null,e[74].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[75].value),(0,n.tZ)("td",null,e[76].value),(0,n.tZ)("td",null,e[77].value),(0,n.tZ)("td",null,e[78].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[79].value),(0,n.tZ)("td",null,e[80].value),(0,n.tZ)("td",null,e[81].value),(0,n.tZ)("td",null,e[82].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[83].value),(0,n.tZ)("td",null,e[84].value),(0,n.tZ)("td",null,(0,n.tZ)(r.Z,{to:"#option",sourceType:"Link"},e[85].value)),(0,n.tZ)("td",null,e[86].value),(0,n.tZ)("td",null,e[87].value)))),(0,n.tZ)("h3",{id:"mentions-\u65B9\u6CD5"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#mentions-\u65B9\u6CD5",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Mentions \u65B9\u6CD5"),(0,n.tZ)(o.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[88].value),(0,n.tZ)("th",null,e[89].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[90].value),(0,n.tZ)("td",null,e[91].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[92].value),(0,n.tZ)("td",null,e[93].value)))),(0,n.tZ)("h3",{id:"option"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#option",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Option"),(0,n.tZ)(o.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[94].value),(0,n.tZ)("th",null,e[95].value),(0,n.tZ)("th",null,e[96].value),(0,n.tZ)("th",null,e[97].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[98].value),(0,n.tZ)("td",null,e[99].value),(0,n.tZ)("td",null,e[100].value),(0,n.tZ)("td",null,e[101].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[102].value),(0,n.tZ)("td",null,e[103].value),(0,n.tZ)("td",null,e[104].value),(0,n.tZ)("td",null,e[105].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[106].value),(0,n.tZ)("td",null,e[107].value),(0,n.tZ)("td",null,e[108].value),(0,n.tZ)("td",null,e[109].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[110].value),(0,n.tZ)("td",null,e[111].value),(0,n.tZ)("td",null,e[112].value),(0,n.tZ)("td",null,e[113].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[114].value),(0,n.tZ)("td",null,e[115].value),(0,n.tZ)("td",null,e[116].value),(0,n.tZ)("td",null,e[117].value)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[118].value),(0,n.tZ)("td",null,e[119].value),(0,n.tZ)("td",null,e[120].value),(0,n.tZ)("td",null,e[121].value)))),(0,n.tZ)("h2",{id:"design-token"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,n.tZ)(s.Z,{component:"Mentions"})))}l.default=m}}]);
|
|
|