feat: improve icon field

This commit is contained in:
chenos 2020-12-21 09:22:05 +08:00
parent 85aee08260
commit d408cd4c1f
5 changed files with 52 additions and 7 deletions

View File

@ -0,0 +1,35 @@
import React, { useState } from 'react';
import { connect } from '@formily/react-schema-renderer'
import { Popover, Button } from 'antd'
import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared'
import { icons, hasIcon, Icon as IconComponent } from '@/components/icons';
function IconField(props: any) {
const { value, onChange } = props;
const [visible, setVisible] = useState(false);
return (
<div>
<Popover placement={'bottom'} visible={visible} onVisibleChange={(val) => {
setVisible(val)
}} content={(
<div>
{[...icons.keys()].map(key => (
<span style={{fontSize: 18, marginRight: 10, cursor: 'pointer'}} onClick={() => {
onChange(key);
setVisible(false)
}}><IconComponent type={key}/></span>
))}
</div>
)} title="图标" trigger="click">
<Button>{ hasIcon(value) ? <IconComponent type={value}/> : '选择图标'}</Button>
</Popover>
</div>
);
}
export const Icon = connect({
getProps: mapStyledProps,
getComponent: mapTextComponent
})(IconField)
export default Icon

View File

@ -16,6 +16,7 @@ import { Upload } from './upload'
import { Filter } from './filter'
import { RemoteSelect } from './remote-select'
import { SubTable } from './sub-table'
import { Icon } from './icons'
export const setup = () => {
registerFormFields({
@ -35,7 +36,7 @@ export const setup = () => {
month: DatePicker.MonthPicker,
week: DatePicker.WeekPicker,
string: Input,
icon: Input,
icon: Icon,
textarea: Input.TextArea,
number: NumberPicker,
percent: Percent,

View File

@ -10,18 +10,25 @@ import {
MenuOutlined,
} from '@ant-design/icons';
const IconFont = createFromIconfontCN({
export const IconFont = createFromIconfontCN({
scriptUrl: [
'//at.alicdn.com/t/font_2261954_u9jzwc44ug.js',
],
});
const icons = new Map<string, any>();
export const icons = new Map<string, any>();
export function registerIcon(type: string, icon) {
export function registerIcon(type: string, icon: any = IconFont) {
icons.set(type.toLowerCase(), icon);
}
export function hasIcon(type: string) {
if (!type) {
return false;
}
return icons.has(type.toLowerCase());
}
export function registerIcons(components) {
Object.keys(components).forEach(type => {
registerIcon(type, components[type]);
@ -47,6 +54,9 @@ export function Icon(props: IconProps) {
const { type = '', ...restProps } = props;
if (type && icons.has(type.toLowerCase())) {
const IconComponent = icons.get(type.toLowerCase());
if (IconComponent === IconFont) {
return <IconFont type={type} />;
}
return <IconComponent {...restProps}/>;
}
return <IconFont type={type} />;

View File

@ -58,7 +58,6 @@ export default {
type: 'virtual',
name: 'icon',
title: '图标',
defaultValue: 'TableOutlined',
component: {
type: 'icon',
showInTable: true,

View File

@ -58,12 +58,12 @@ export default {
},
},
{
interface: 'string',
interface: 'icon',
type: 'string',
name: 'icon',
title: '图标',
component: {
type: 'string',
type: 'icon',
showInTable: true,
showInForm: true,
showInDetail: true,