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 { Filter } from './filter'
|
||||||
import { RemoteSelect } from './remote-select'
|
import { RemoteSelect } from './remote-select'
|
||||||
import { SubTable } from './sub-table'
|
import { SubTable } from './sub-table'
|
||||||
|
import { Icon } from './icons'
|
||||||
|
|
||||||
export const setup = () => {
|
export const setup = () => {
|
||||||
registerFormFields({
|
registerFormFields({
|
||||||
@ -35,7 +36,7 @@ export const setup = () => {
|
|||||||
month: DatePicker.MonthPicker,
|
month: DatePicker.MonthPicker,
|
||||||
week: DatePicker.WeekPicker,
|
week: DatePicker.WeekPicker,
|
||||||
string: Input,
|
string: Input,
|
||||||
icon: Input,
|
icon: Icon,
|
||||||
textarea: Input.TextArea,
|
textarea: Input.TextArea,
|
||||||
number: NumberPicker,
|
number: NumberPicker,
|
||||||
percent: Percent,
|
percent: Percent,
|
||||||
|
@ -10,18 +10,25 @@ import {
|
|||||||
MenuOutlined,
|
MenuOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
|
|
||||||
const IconFont = createFromIconfontCN({
|
export const IconFont = createFromIconfontCN({
|
||||||
scriptUrl: [
|
scriptUrl: [
|
||||||
'//at.alicdn.com/t/font_2261954_u9jzwc44ug.js',
|
'//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);
|
icons.set(type.toLowerCase(), icon);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function hasIcon(type: string) {
|
||||||
|
if (!type) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return icons.has(type.toLowerCase());
|
||||||
|
}
|
||||||
|
|
||||||
export function registerIcons(components) {
|
export function registerIcons(components) {
|
||||||
Object.keys(components).forEach(type => {
|
Object.keys(components).forEach(type => {
|
||||||
registerIcon(type, components[type]);
|
registerIcon(type, components[type]);
|
||||||
@ -47,6 +54,9 @@ export function Icon(props: IconProps) {
|
|||||||
const { type = '', ...restProps } = props;
|
const { type = '', ...restProps } = props;
|
||||||
if (type && icons.has(type.toLowerCase())) {
|
if (type && icons.has(type.toLowerCase())) {
|
||||||
const IconComponent = icons.get(type.toLowerCase());
|
const IconComponent = icons.get(type.toLowerCase());
|
||||||
|
if (IconComponent === IconFont) {
|
||||||
|
return <IconFont type={type} />;
|
||||||
|
}
|
||||||
return <IconComponent {...restProps}/>;
|
return <IconComponent {...restProps}/>;
|
||||||
}
|
}
|
||||||
return <IconFont type={type} />;
|
return <IconFont type={type} />;
|
||||||
|
@ -58,7 +58,6 @@ export default {
|
|||||||
type: 'virtual',
|
type: 'virtual',
|
||||||
name: 'icon',
|
name: 'icon',
|
||||||
title: '图标',
|
title: '图标',
|
||||||
defaultValue: 'TableOutlined',
|
|
||||||
component: {
|
component: {
|
||||||
type: 'icon',
|
type: 'icon',
|
||||||
showInTable: true,
|
showInTable: true,
|
||||||
|
@ -58,12 +58,12 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
interface: 'string',
|
interface: 'icon',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
name: 'icon',
|
name: 'icon',
|
||||||
title: '图标',
|
title: '图标',
|
||||||
component: {
|
component: {
|
||||||
type: 'string',
|
type: 'icon',
|
||||||
showInTable: true,
|
showInTable: true,
|
||||||
showInForm: true,
|
showInForm: true,
|
||||||
showInDetail: true,
|
showInDetail: true,
|
||||||
|
Loading…
Reference in New Issue
Block a user