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

51 lines
1.1 KiB
Vue
Raw Normal View History

2018-11-27 18:25:38 +08:00
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