diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index 5e8e517f..b9e88403 100644 --- a/scss/components/form/_checks.scss +++ b/scss/components/form/_checks.scss @@ -25,6 +25,12 @@ margin-left: $Checkbox-gap; cursor: pointer; + > a { + float: right; + margin-left: px2rem(5px); + display: none; + } + &:empty { display: none; } @@ -44,6 +50,10 @@ } } + &:hover > i + span > a { + display: inline-block; + } + &--checkbox { padding-left: $Checkbox-size; @@ -262,3 +272,20 @@ .#{$ns}CheckboxesControl-groupLabel { display: block; } + +.#{$ns}Checkboxes { + &-addBtn { + display: block; + cursor: pointer; + + &:hover { + text-decoration: none; + } + + > svg { + width: px2rem(14px); + height: px2rem(14px); + margin-right: $Checkbox-gap; + } + } +} diff --git a/src/renderers/Form/Checkboxes.tsx b/src/renderers/Form/Checkboxes.tsx index d5163d68..957e878c 100644 --- a/src/renderers/Form/Checkboxes.tsx +++ b/src/renderers/Form/Checkboxes.tsx @@ -3,22 +3,33 @@ import {OptionsControl, OptionsControlProps, Option} from './Options'; import cx from 'classnames'; import Checkbox from '../../components/Checkbox'; import chunk from 'lodash/chunk'; +import {Icon} from '../../components/icons'; +import {Api} from '../../types'; +import {autobind} from '../../utils/helper'; export interface CheckboxesProps extends OptionsControlProps { placeholder?: any; itemClassName?: string; columnsCount?: number; labelClassName?: string; + onAdd?: () => void; + addApi?: Api; + creatable: boolean; + createBtnLabel: string; + editable?: boolean; + removable?: boolean; } export default class CheckboxesControl extends React.Component< CheckboxesProps, any > { - static defaultProps: Partial = { + static defaultProps = { columnsCount: 1, multiple: true, - placeholder: '暂无选项' + placeholder: '暂无选项', + creatable: false, + createBtnLabel: '新增选项' }; componentDidMount() { @@ -41,6 +52,28 @@ export default class CheckboxesControl extends React.Component< reload && reload(); } + @autobind + handleAddClick() { + const {onAdd} = this.props; + onAdd && onAdd(); + } + + @autobind + handleEditClick(e: Event, item: any) { + const {onEdit} = this.props; + e.preventDefault(); + e.stopPropagation(); + onEdit && onEdit(item); + } + + @autobind + handleDeleteClick(e: Event, item: any) { + const {onDelete} = this.props; + e.preventDefault(); + e.stopPropagation(); + onDelete && onDelete(item); + } + renderGroup(option: Option, index: number) { const {classnames: cx, labelField} = this.props; @@ -75,7 +108,10 @@ export default class CheckboxesControl extends React.Component< selectedOptions, disabled, inline, - labelClassName + labelClassName, + labelField, + removable, + editable } = this.props; return ( @@ -88,7 +124,25 @@ export default class CheckboxesControl extends React.Component< inline={inline} labelClassName={labelClassName} > - {option.label} + {removable ? ( + + this.handleDeleteClick(e, option)} + /> + + ) : null} + {editable ? ( + + this.handleEditClick(e, option)} + /> + + ) : null} + {option[labelField || 'label']} ); } @@ -107,7 +161,10 @@ export default class CheckboxesControl extends React.Component< checkAll, classnames: cx, itemClassName, - labelClassName + labelClassName, + creatable, + addApi, + createBtnLabel } = this.props; let body: Array = []; @@ -161,6 +218,13 @@ export default class CheckboxesControl extends React.Component< ) : ( {placeholder} )} + + {(creatable || addApi) && !disabled ? ( + + + {createBtnLabel} + + ) : null} ); }