checkboxes 添加增删改功能

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;
+    }
+  }
+}

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<CheckboxesProps> = {
+  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 ? (
+          <a data-tooltip="移除" data-position="left">
+            <Icon
+              icon="minus"
+              className="icon"
+              onClick={(e: any) => this.handleDeleteClick(e, option)}
+            />
+          </a>
+        ) : null}
+        {editable ? (
+          <a data-tooltip="编辑" data-position="left">
+            <Icon
+              icon="pencil"
+              className="icon"
+              onClick={(e: any) => this.handleEditClick(e, option)}
+            />
+          </a>
+        ) : null}
+        {option[labelField || 'label']}
       </Checkbox>
     );
   }
@@ -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<React.ReactNode> = [];
@@ -161,6 +218,13 @@ export default class CheckboxesControl extends React.Component<
         ) : (
           <span className={`Form-placeholder`}>{placeholder}</span>
         )}
+
+        {(creatable || addApi) && !disabled ? (
+          <a className={cx('Checkboxes-addBtn')} onClick={this.handleAddClick}>
+            <Icon icon="plus" className="icon" />
+            {createBtnLabel}
+          </a>
+        ) : null}
       </div>
     );
   }