ant-design/site/theme/template/IconDisplay/Category.tsx
dependabot[bot] 775d1800bb
chore(deps-dev): bump eslint-config-prettier from 6.15.0 to 7.0.0 ()
* chore(deps-dev): bump eslint-config-prettier from 6.15.0 to 7.0.0

Bumps [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) from 6.15.0 to 7.0.0.
- [Release notes](https://github.com/prettier/eslint-config-prettier/releases)
- [Changelog](https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/eslint-config-prettier/compare/v6.15.0...v7.0.0)

Signed-off-by: dependabot[bot] <support@github.com>

* chore: fix eslint style

* chore: prettier code style

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: afc163 <afc163@gmail.com>
2020-12-09 17:12:32 +08:00

73 lines
1.5 KiB
TypeScript

import * as React from 'react';
import { message } from 'antd';
import { injectIntl } from 'react-intl';
import CopyableIcon from './CopyableIcon';
import { ThemeType } from './index';
import { CategoriesKeys } from './fields';
interface CategoryProps {
title: CategoriesKeys;
icons: string[];
theme: ThemeType;
newIcons: string[];
intl: any;
}
interface CategoryState {
justCopied: string | null;
}
class Category extends React.Component<CategoryProps, CategoryState> {
copyId?: number;
state = {
justCopied: null,
};
componentWillUnmount() {
window.clearTimeout(this.copyId);
}
onCopied = (type: string, text: string) => {
message.success(
<span>
<code className="copied-code">{text}</code> copied 🎉
</span>,
);
this.setState({ justCopied: type }, () => {
this.copyId = window.setTimeout(() => {
this.setState({ justCopied: null });
}, 2000);
});
};
render() {
const {
icons,
title,
newIcons,
theme,
intl: { messages },
} = this.props;
const items = icons.map(name => (
<CopyableIcon
key={name}
name={name}
theme={theme}
isNew={newIcons.indexOf(name) >= 0}
justCopied={this.state.justCopied}
onCopied={this.onCopied}
/>
));
return (
<div>
<h3>{messages[`app.docs.components.icon.category.${title}`]}</h3>
<ul className="anticons-list">{items}</ul>
</div>
);
}
}
export default injectIntl(Category);