mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

site: fix icon copy text

Browse Source
This commit is contained in:
afc163 2018-11-08 17:29:56 +08:00
parent 23c4e222c9
commit cbf9a6a694
3 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
site/theme/static/icons.less
View File

@ -70,3 +70,10 @@ ul.anticons-list {
}
}
}
.copied-code {
font-size: 12px;
background: #f5f5f5;
border-radius: 2px;
padding: 2px 4px 2px;
}

4
site/theme/template/IconDisplay/Category.tsx
View File

@ -1,4 +1,5 @@
import * as React from 'react';
import { message } from 'antd';
import { ThemeType } from '../../../../components/icon';
import CopyableIcon from './CopyableIcon';
import { injectIntl, InjectedIntlProps } from 'react-intl';
@ -20,7 +21,8 @@ class Category extends React.Component<CategoryProps, CategoryState> {
justCopied: null,
};
onCopied = (type: string) => {
onCopied = (type: string, text: string) => {
message.success(<span><code className="copied-code">{text}</code> copied 🎉</span>);
this.setState({ justCopied: type }, () => {
setTimeout(() => {
this.setState({ justCopied: null });

6
site/theme/template/IconDisplay/CopyableIcon.tsx
View File

@ -10,7 +10,7 @@ export interface CopyableIconProps {
theme: ThemeType;
isNew: boolean;
justCopied: string | null;
onCopied: (type: string) => any;
onCopied: (type: string, text: string) => any;
}
const CopyableIcon: React.SFC<CopyableIconProps> = ({
@ -18,8 +18,8 @@ const CopyableIcon: React.SFC<CopyableIconProps> = ({
}) => {
return (
<CopyToClipboard
text={theme === 'outlined' ? <Icon type="${type}" /> : `<Icon type="${type}" theme="${theme}" />`}
onCopy={() => onCopied(type)}
text={theme === 'outlined' ? `<Icon type="${type}" />` : `<Icon type="${type}" theme="${theme}" />`}
onCopy={(text: string) => onCopied(type, text)}
>
<li className={justCopied === type ? 'copied' : ''}>
<Icon type={type} theme={theme}/>