ant-design-vue/site/theme/template/IconDisplay/Category.jsx

49 lines
1.1 KiB
Vue
Raw Normal View History

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