111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
import manifest from '@ant-design/icons/lib/manifest';
|
|
import Category from './Category';
|
|
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
|
|
import categories from './fields';
|
|
import { Radio } from 'ant-design-vue';
|
|
import 'ant-design-vue/es/radio/style';
|
|
|
|
const IconDisplay = {
|
|
cagetories: categories,
|
|
newIconNames: [],
|
|
|
|
themeTypeMapper: {
|
|
filled: 'fill',
|
|
outlined: 'outline',
|
|
twoTone: 'twotone',
|
|
},
|
|
components: {
|
|
ARadio: Radio,
|
|
ARadioGroup: Radio.Group,
|
|
ARadioButton: Radio.Button,
|
|
},
|
|
data() {
|
|
return {
|
|
theme: 'outlined',
|
|
searchKey: '',
|
|
};
|
|
},
|
|
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) {
|
|
const { searchKey, theme } = this;
|
|
const otherIcons = categories.all.filter(icon => {
|
|
return list
|
|
.filter(({ category }) => category !== 'all')
|
|
.every(item => !item.icons.includes(icon));
|
|
});
|
|
return list
|
|
.filter(({ category }) => category !== 'all')
|
|
.concat({ category: 'other', icons: otherIcons })
|
|
.map(({ category, icons }) => ({
|
|
category,
|
|
icons: icons
|
|
.filter(name => name.includes(searchKey))
|
|
.filter(name => manifest[IconDisplay.themeTypeMapper[theme]].includes(name)),
|
|
}))
|
|
.filter(({ icons }) => !!icons.length)
|
|
.map(({ category, icons }) => {
|
|
return (
|
|
<Category
|
|
key={category}
|
|
title={category}
|
|
icons={icons}
|
|
theme={this.theme}
|
|
newIcons={IconDisplay.newIconNames}
|
|
/>
|
|
);
|
|
});
|
|
},
|
|
handleSearchIcon(val) {
|
|
this.searchKey = val;
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const list = this.getComputedDisplayList();
|
|
return (
|
|
<div>
|
|
<h3>{this.$t('app.docs.components.icon.pick-theme')}</h3>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<a-radio-group value={this.theme} onChange={this.handleChangeTheme} size="large">
|
|
<a-radio-button value="outlined">
|
|
<a-icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
|
|
</a-radio-button>
|
|
<a-radio-button value="filled">
|
|
<a-icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
|
|
</a-radio-button>
|
|
<a-radio-button value="twoTone">
|
|
<a-icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
<a-input-search
|
|
placeholder={this.$t('app.docs.components.icon.search.placeholder')}
|
|
style={{ marginLeft: '10px', flex: 1 }}
|
|
allowClear
|
|
onChange={e => this.handleSearchIcon(e.currentTarget.value)}
|
|
size="large"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
{this.renderCategories(list)}
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default IconDisplay;
|