2019-02-19 11:42:05 +08:00
|
|
|
---
|
|
|
|
order: 3
|
|
|
|
title:
|
|
|
|
zh-CN: 可交互
|
|
|
|
en-US: Interactive
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
2019-12-06 11:08:28 +08:00
|
|
|
提供可编辑和可复制等额外的交互能力。
|
2019-02-19 11:42:05 +08:00
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
2019-12-06 11:08:28 +08:00
|
|
|
Provide additional interactive capacity of editable and copyable.
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
```tsx
|
2020-08-09 12:56:35 +08:00
|
|
|
import React, { useState } from 'react';
|
2022-05-19 09:46:26 +08:00
|
|
|
import { Radio, Typography, Divider } from 'antd';
|
2021-09-22 21:54:27 +08:00
|
|
|
import { CheckOutlined, HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons';
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2020-07-30 16:54:49 +08:00
|
|
|
const { Paragraph } = Typography;
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const App: React.FC = () => {
|
2020-08-09 12:56:35 +08:00
|
|
|
const [editableStr, setEditableStr] = useState('This is an editable text.');
|
|
|
|
const [customIconStr, setCustomIconStr] = useState('Custom Edit icon and replace tooltip text.');
|
2021-09-23 22:14:43 +08:00
|
|
|
const [clickTriggerStr, setClickTriggerStr] = useState(
|
|
|
|
'Text or icon as trigger - click to start editing.',
|
|
|
|
);
|
2022-05-19 09:46:26 +08:00
|
|
|
const [chooseTrigger, setChooseTrigger] = useState<('icon' | 'text')[]>(['icon']);
|
2021-09-22 21:54:27 +08:00
|
|
|
const [customEnterIconStr, setCustomEnterIconStr] = useState(
|
|
|
|
'Editable text with a custom enter icon in edit field.',
|
|
|
|
);
|
|
|
|
const [noEnterIconStr, setNoEnterIconStr] = useState(
|
|
|
|
'Editable text with no enter icon in edit field.',
|
|
|
|
);
|
2020-08-09 12:56:35 +08:00
|
|
|
const [hideTooltipStr, setHideTooltipStr] = useState('Hide Edit tooltip.');
|
|
|
|
const [lengthLimitedStr, setLengthLimitedStr] = useState(
|
|
|
|
'This is an editable text with limited length.',
|
|
|
|
);
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const radioToState = (input: string): ('icon' | 'text')[] => {
|
2021-09-23 22:14:43 +08:00
|
|
|
switch (input) {
|
|
|
|
case 'text':
|
|
|
|
return ['text'];
|
|
|
|
case 'both':
|
|
|
|
return ['icon', 'text'];
|
|
|
|
case 'icon':
|
|
|
|
default:
|
|
|
|
return ['icon'];
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const stateToRadio = () => {
|
|
|
|
if (chooseTrigger.indexOf('text') !== -1) {
|
|
|
|
return chooseTrigger.indexOf('icon') !== -1 ? 'both' : 'text';
|
|
|
|
}
|
|
|
|
return 'icon';
|
|
|
|
};
|
|
|
|
|
2020-08-09 12:56:35 +08:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
|
|
|
|
<Paragraph
|
|
|
|
editable={{
|
|
|
|
icon: <HighlightOutlined />,
|
|
|
|
tooltip: 'click to edit text',
|
|
|
|
onChange: setCustomIconStr,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{customIconStr}
|
|
|
|
</Paragraph>
|
2021-09-23 22:14:43 +08:00
|
|
|
Trigger edit with:{' '}
|
|
|
|
<Radio.Group
|
|
|
|
onChange={e => setChooseTrigger(radioToState(e.target.value))}
|
|
|
|
value={stateToRadio()}
|
|
|
|
>
|
|
|
|
<Radio value="icon">icon</Radio>
|
|
|
|
<Radio value="text">text</Radio>
|
|
|
|
<Radio value="both">both</Radio>
|
|
|
|
</Radio.Group>
|
|
|
|
<Paragraph
|
|
|
|
editable={{
|
|
|
|
tooltip: 'click to edit text',
|
|
|
|
onChange: setClickTriggerStr,
|
|
|
|
triggerType: chooseTrigger,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{clickTriggerStr}
|
|
|
|
</Paragraph>
|
2021-09-22 21:54:27 +08:00
|
|
|
<Paragraph
|
|
|
|
editable={{
|
|
|
|
icon: <HighlightOutlined />,
|
|
|
|
tooltip: 'click to edit text',
|
|
|
|
onChange: setCustomEnterIconStr,
|
|
|
|
enterIcon: <CheckOutlined />,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{customEnterIconStr}
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph
|
|
|
|
editable={{
|
|
|
|
icon: <HighlightOutlined />,
|
|
|
|
tooltip: 'click to edit text',
|
|
|
|
onChange: setNoEnterIconStr,
|
|
|
|
enterIcon: null,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{noEnterIconStr}
|
|
|
|
</Paragraph>
|
2020-08-09 12:56:35 +08:00
|
|
|
<Paragraph editable={{ tooltip: false, onChange: setHideTooltipStr }}>
|
|
|
|
{hideTooltipStr}
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph
|
|
|
|
editable={{
|
|
|
|
onChange: setLengthLimitedStr,
|
|
|
|
maxLength: 50,
|
|
|
|
autoSize: { maxRows: 5, minRows: 3 },
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{lengthLimitedStr}
|
|
|
|
</Paragraph>
|
2022-03-04 22:10:16 +08:00
|
|
|
<Typography.Title editable level={1} style={{ margin: 0 }}>
|
|
|
|
h1. Ant Design
|
|
|
|
</Typography.Title>
|
|
|
|
<Typography.Title editable level={2} style={{ margin: 0 }}>
|
|
|
|
h2. Ant Design
|
|
|
|
</Typography.Title>
|
|
|
|
<Typography.Title editable level={3} style={{ margin: 0 }}>
|
|
|
|
h3. Ant Design
|
|
|
|
</Typography.Title>
|
|
|
|
<Typography.Title editable level={4} style={{ margin: 0 }}>
|
|
|
|
h4. Ant Design
|
|
|
|
</Typography.Title>
|
|
|
|
<Typography.Title editable level={5} style={{ margin: 0 }}>
|
|
|
|
h5. Ant Design
|
|
|
|
</Typography.Title>
|
|
|
|
<Divider />
|
2020-08-09 12:56:35 +08:00
|
|
|
<Paragraph copyable>This is a copyable text.</Paragraph>
|
|
|
|
<Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
|
|
|
|
<Paragraph
|
|
|
|
copyable={{
|
|
|
|
icon: [<SmileOutlined key="copy-icon" />, <SmileFilled key="copied-icon" />],
|
|
|
|
tooltips: ['click here', 'you clicked!!'],
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Custom Copy icon and replace tooltips text.
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
2019-02-19 11:42:05 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
export default App;
|
2019-02-19 11:42:05 +08:00
|
|
|
```
|