feat: improve icon field
This commit is contained in:
parent
85aee08260
commit
d408cd4c1f
35
packages/app/src/components/form.fields/icons/index.tsx
Normal file
35
packages/app/src/components/form.fields/icons/index.tsx
Normal 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
|
@ -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,
|
||||
|
@ -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} />;
|
||||
|
@ -58,7 +58,6 @@ export default {
|
||||
type: 'virtual',
|
||||
name: 'icon',
|
||||
title: '图标',
|
||||
defaultValue: 'TableOutlined',
|
||||
component: {
|
||||
type: 'icon',
|
||||
showInTable: true,
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user