You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.4 KiB
111 lines
3.4 KiB
import manifest from '@ant-design/icons/lib/manifest'
|
|
import Category from './Category'
|
|
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons'
|
|
import { categories } from './fields'
|
|
|
|
const IconDisplay = {
|
|
cagetories: categories,
|
|
newIconNames: [
|
|
// direction
|
|
'border-bottom', 'border-horizontal', 'border-inner',
|
|
'border-outter', 'border-left', 'border-right', 'border-top',
|
|
'border-verticle', 'pic-center', 'pic-left', 'pic-right',
|
|
'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'radius-upleft',
|
|
'fullscreen', 'fullscreen-exit',
|
|
// suggestion
|
|
'issues-close', 'stop',
|
|
|
|
// edit
|
|
'scissor', 'snippets', 'diff', 'highlight',
|
|
'align-center', 'align-left', 'align-right', 'bg-colors',
|
|
'bold', 'italic', 'underline', 'redo', 'undo', 'zoom-in', 'zoom-out',
|
|
'font-colors', 'font-size', 'line-height', 'colum-height', 'colum-width',
|
|
'dash', 'small-dash', 'sort-ascending', 'sort-descending',
|
|
'drag', 'ordered-list', 'radius-setting',
|
|
|
|
// data
|
|
'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund',
|
|
'sliders',
|
|
|
|
// other
|
|
'alert', 'audit', 'batch-folding', 'branches',
|
|
'build', 'border', 'crown',
|
|
'experiment', 'fire',
|
|
'money-collect', 'property-safety', 'read', 'reconciliation',
|
|
'rest', 'security-scan', 'insurance', 'interation', 'safety-certificate',
|
|
'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit',
|
|
'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect',
|
|
'file-search', 'file-sync', 'gateway', 'gold', 'robot',
|
|
'strikethrough', 'shopping',
|
|
|
|
// logo
|
|
'alibaba', 'yahoo',
|
|
],
|
|
|
|
themeTypeMapper: {
|
|
filled: 'fill',
|
|
outlined: 'outline',
|
|
twoTone: 'twotone',
|
|
},
|
|
data () {
|
|
return {
|
|
theme: 'outlined',
|
|
}
|
|
},
|
|
methods: {
|
|
getComputedDisplayList () {
|
|
return Object.keys(IconDisplay.cagetories)
|
|
.map(
|
|
(category) => ({
|
|
category,
|
|
icons: IconDisplay.cagetories[category]
|
|
.filter((name) => manifest[IconDisplay.themeTypeMapper[this.theme]].indexOf(name) !== -1),
|
|
}),
|
|
)
|
|
.filter(({ icons }) => Boolean(icons.length))
|
|
},
|
|
|
|
handleChangeTheme (e) {
|
|
this.theme = e.target.value
|
|
},
|
|
|
|
renderCategories (list) {
|
|
return list.map(({ category, icons }) => {
|
|
return (
|
|
<Category
|
|
key={category}
|
|
title={category}
|
|
icons={icons}
|
|
theme={this.theme}
|
|
newIcons={IconDisplay.newIconNames}
|
|
/>
|
|
)
|
|
})
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const list = this.getComputedDisplayList()
|
|
const message = this.$t('message')
|
|
return (
|
|
<div>
|
|
<h3>{message['app.docs.components.icon.pick-theme']}</h3>
|
|
<a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
|
|
<a-radio-button value='outlined'>
|
|
<a-icon component={OutlinedIcon} /> {message['app.docs.components.icon.outlined']}
|
|
</a-radio-button>
|
|
<a-radio-button value='filled'>
|
|
<a-icon component={FilledIcon} /> {message['app.docs.components.icon.filled']}
|
|
</a-radio-button>
|
|
<a-radio-button value='twoTone'>
|
|
<a-icon component={TwoToneIcon} /> {message['app.docs.components.icon.two-tone']}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
{this.renderCategories(list)}
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export default IconDisplay
|