178 lines
3.7 KiB
Vue
178 lines
3.7 KiB
Vue
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;
|