fix: show clear button

This commit is contained in:
chenos 2021-05-10 15:47:03 +08:00
parent 6b7e26fb90
commit 797da5bdb0

View File

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