diff --git a/packages/app/src/components/form.fields/icons/index.tsx b/packages/app/src/components/form.fields/icons/index.tsx new file mode 100644 index 000000000..750f4dd3c --- /dev/null +++ b/packages/app/src/components/form.fields/icons/index.tsx @@ -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 ( +
+ { + setVisible(val) + }} content={( +
+ {[...icons.keys()].map(key => ( + { + onChange(key); + setVisible(false) + }}> + ))} +
+ )} title="图标" trigger="click"> + +
+
+ ); +} + +export const Icon = connect({ + getProps: mapStyledProps, + getComponent: mapTextComponent +})(IconField) + +export default Icon diff --git a/packages/app/src/components/form.fields/registry.ts b/packages/app/src/components/form.fields/registry.ts index a48d44dc2..5cb3a86a5 100644 --- a/packages/app/src/components/form.fields/registry.ts +++ b/packages/app/src/components/form.fields/registry.ts @@ -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, diff --git a/packages/app/src/components/icons/index.tsx b/packages/app/src/components/icons/index.tsx index 300ab2120..a0a819374 100644 --- a/packages/app/src/components/icons/index.tsx +++ b/packages/app/src/components/icons/index.tsx @@ -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(); +export const icons = new Map(); -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 ; + } return ; } return ; diff --git a/packages/plugin-collections/src/collections/collections.ts b/packages/plugin-collections/src/collections/collections.ts index fe7934734..5736ff89d 100644 --- a/packages/plugin-collections/src/collections/collections.ts +++ b/packages/plugin-collections/src/collections/collections.ts @@ -58,7 +58,6 @@ export default { type: 'virtual', name: 'icon', title: '图标', - defaultValue: 'TableOutlined', component: { type: 'icon', showInTable: true, diff --git a/packages/plugin-pages/src/collections/pages.ts b/packages/plugin-pages/src/collections/pages.ts index 1b383167b..8719aafff 100644 --- a/packages/plugin-pages/src/collections/pages.ts +++ b/packages/plugin-pages/src/collections/pages.ts @@ -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,