ant-design-vue/site/theme/template/IconDisplay/Category.jsx
2019-01-12 12:46:29 +08:00

49 lines
1.1 KiB
Vue

import { message } from 'ant-design-vue';
import CopyableIcon from './CopyableIcon';
const Category = {
props: ['icons', 'title', 'newIcons', 'theme'],
data() {
return {
justCopied: null,
};
},
methods: {
onCopied(type, text) {
message.success(
<span>
<code class="copied-code">{text}</code> copied 🎉
</span>,
);
this.justCopied = type;
setTimeout(() => {
this.justCopied = null;
}, 2000);
},
},
render() {
const { icons, title, theme, newIcons } = this.$props;
const items = icons.map(name => {
return (
<CopyableIcon
key={name}
type={name}
theme={theme}
isNew={newIcons.indexOf(name) >= 0}
justCopied={this.justCopied}
onCopied={this.onCopied}
/>
);
});
const message = this.$t('message');
return (
<div>
<h3>{message[`app.docs.components.icon.category.${title}`]}</h3>
<ul class={'anticons-list'}>{items}</ul>
</div>
);
},
};
export default Category;