amis 1.7.0 → 1.8.0-beta.13

package/src/renderers/Dialog.tsx

@@ -90,6 +90,11 @@ export interface DialogSchema extends BaseSchema {
    * 是否显示错误信息
    */
   showErrorMsg?: boolean;
+
+  /**
+   * 是否显示 spinner
+   */
+  showLoading?: boolean;
 }
 
 export type DialogSchemaBase = Omit<DialogSchema, 'type'>;
@@ -424,13 +429,22 @@ export default class Dialog extends React.Component<DialogProps> {
       return null;
     }
 
-    const {store, render, classnames: cx, showErrorMsg} = this.props;
+    const {
+      store,
+      render,
+      classnames: cx,
+      showErrorMsg,
+      showLoading
+    } = this.props;
 
     return (
       <div className={cx('Modal-footer')}>
-        {store.loading || store.error ? (
+        {(showLoading !== false && store.loading) ||
+        (showErrorMsg !== false && store.error) ? (
           <div className={cx('Dialog-info')} key="info">
-            <Spinner size="sm" key="info" show={store.loading} />
+            {showLoading !== false ? (
+              <Spinner size="sm" key="info" show={store.loading} />
+            ) : null}
             {store.error && showErrorMsg !== false ? (
               <span className={cx('Dialog-error')}>{store.msg}</span>
             ) : null}
@@ -888,4 +902,8 @@ export class DialogRenderer extends Dialog {
     const scoped = this.context as IScopedContext;
     scoped.close(target);
   }
+
+  setData(values: object) {
+    return this.props.store.updateData(values);
+  }
 }

package/src/renderers/Drawer.tsx

@@ -458,7 +458,13 @@ export default class Drawer extends React.Component<DrawerProps> {
       return null;
     }
 
-    const {store, render, classnames: cx, showErrorMsg, footerClassName} = this.props;
+    const {
+      store,
+      render,
+      classnames: cx,
+      showErrorMsg,
+      footerClassName
+    } = this.props;
 
     return (
       <div className={cx('Drawer-footer', footerClassName)}>
@@ -623,7 +629,9 @@ export default class Drawer extends React.Component<DrawerProps> {
         onExited={this.handleExited}
         closeOnEsc={closeOnEsc}
         closeOnOutside={
-          !store.drawerOpen && !store.dialogOpen && (closeOnOutside || !showCloseButton)
+          !store.drawerOpen &&
+          !store.dialogOpen &&
+          (closeOnOutside || !showCloseButton)
         }
         container={
           drawerContainer
@@ -955,4 +963,8 @@ export class DrawerRenderer extends Drawer {
     const scoped = this.context as IScopedContext;
     scoped.close(target);
   }
+
+  setData(values: object) {
+    return this.props.store.updateData(values);
+  }
 }

package/src/renderers/DropDownButton.tsx

@@ -147,12 +147,14 @@ export default class DropDownButton extends React.Component<
   };
 
   target: any;
+  timer: ReturnType<typeof setTimeout>;
   constructor(props: DropDownButtonProps) {
     super(props);
 
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
     this.toogle = this.toogle.bind(this);
+    this.keepOpen = this.keepOpen.bind(this);
     this.domRef = this.domRef.bind(this);
   }
 
@@ -183,9 +185,17 @@ export default class DropDownButton extends React.Component<
   }
 
   close() {
-    this.setState({
-      isOpened: false
-    });
+    this.timer = setTimeout(() => {
+      this.setState({
+        isOpened: false
+      });
+    }, 200);
+  }
+
+  keepOpen() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
   }
 
   renderButton(
@@ -260,6 +270,7 @@ export default class DropDownButton extends React.Component<
                 menuClassName
               )}
               onClick={closeOnClick ? this.close : noop}
+              onMouseEnter={this.keepOpen}
               ref={ref}
             >
               {children

package/src/renderers/Form/Checkbox.tsx

@@ -19,12 +19,12 @@ export interface CheckboxControlSchema extends FormBaseControl {
   /**
    * 勾选值
    */
-  trueValue?: any;
+  trueValue?: boolean | string | number;
 
   /**
    * 未勾选值
    */
-  falseValue?: any;
+  falseValue?: boolean | string | number;
 
   /**
    * 选项说明
@@ -35,6 +35,9 @@ export interface CheckboxControlSchema extends FormBaseControl {
    * 角标
    */
   badge?: BadgeSchema;
+  partial?: boolean;
+  optionType?: 'default' | 'button';
+  checked?: boolean;
 }
 
 export interface CheckboxProps
@@ -89,6 +92,9 @@ export default class CheckboxControl extends React.Component<
       onChange,
       disabled,
       render,
+      partial,
+      optionType,
+      checked,
       classPrefix: ns
     } = this.props;
 
@@ -101,6 +107,9 @@ export default class CheckboxControl extends React.Component<
           falseValue={falseValue}
           disabled={disabled}
           onChange={(value: any) => this.dispatchChangeEvent(value)}
+          partial={partial}
+          optionType={optionType}
+          checked={checked}
         >
           {option ? render('option', option) : null}
         </Checkbox>

package/src/renderers/Form/Checkboxes.tsx

@@ -7,10 +7,11 @@ import {
 } 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, hasAbility} from '../../utils/helper';
+import {columnsSplit} from '../../utils/columnsSplit';
 
 /**
  * 复选框
@@ -32,7 +33,7 @@ export interface CheckboxesControlSchema extends FormOptionsControl {
   /**
    * 每行显示多少个
    */
-  columnsCount?: number;
+  columnsCount?: number | number[];
 }
 
 export interface CheckboxesProps
@@ -47,7 +48,7 @@ export interface CheckboxesProps
     > {
   placeholder?: any;
   itemClassName?: string;
-  columnsCount?: number;
+  columnsCount?: number | number[];
   labelClassName?: string;
   onAdd?: () => void;
   addApi?: Api;
@@ -55,6 +56,7 @@ export interface CheckboxesProps
   createBtnLabel: string;
   editable?: boolean;
   removable?: boolean;
+  optionType?: 'default' | 'button'
 }
 
 export default class CheckboxesControl extends React.Component<
@@ -67,7 +69,8 @@ export default class CheckboxesControl extends React.Component<
     placeholder: 'placeholder.noOption',
     creatable: false,
     inline: true,
-    createBtnLabel: 'Select.createLabel'
+    createBtnLabel: 'Select.createLabel',
+    optionType: 'default'
   };
 
   reload() {
@@ -97,6 +100,97 @@ export default class CheckboxesControl extends React.Component<
     onDelete && onDelete(item);
   }
 
+  componentDidMount() {
+    this.updateBorderStyle();
+    window.addEventListener('resize', this.updateBorderStyle);
+  }
+
+  componentWillMount() {
+    window.removeEventListener('resize', this.updateBorderStyle);
+  }
+
+  @autobind
+  updateBorderStyle() {
+    if (this.props.optionType !== 'button') {
+      return;
+    }
+    const wrapDom = this.refs.checkboxRef as HTMLElement;
+    const wrapWidth = wrapDom.clientWidth;
+    const childs = Array.from(wrapDom.children) as HTMLElement[];
+    
+    childs.forEach(child => {
+      child.style.borderRadius = '0';
+      child.style.borderLeftWidth = '1px';
+      child.style.borderTopWidth = '1px';
+    });
+    const childTotalWidth = childs.reduce((pre, next) =>
+        pre + next.clientWidth, 0);
+    if (childTotalWidth <= wrapWidth) {
+      if (childs.length === 1) {
+        childs[0].style.borderRadius = "4px";
+      }
+      else {
+        childs[0].style.borderRadius = "4px 0 0 4px";
+        childs[childs.length - 1].style.borderRadius = "0 4px 4px 0";
+        childs.forEach((child, idx) => {
+          idx !== 0 && (child.style.borderLeftWidth = '0');
+        });
+      }
+    }
+    else {
+      let curRowWidth = 0;
+      let curRow = 0;
+      const rowNum = Math.floor(childTotalWidth / wrapWidth);
+      const rowColArr: any[] = [];
+      for (let i = 0; i <= rowNum; i++) {
+        const arr: HTMLElement[] = [];
+        rowColArr[i] = arr;
+      }
+      childs.forEach((child: HTMLElement, idx: number) => {
+        curRowWidth += child.clientWidth;
+        if (curRowWidth > wrapWidth) {
+          curRowWidth = child.clientWidth;
+          curRow++;
+        }
+        if (curRow > rowNum) {
+          return;
+        }
+        rowColArr[curRow].push(child);
+      });
+      
+      rowColArr.forEach((row: HTMLElement[], rowIdx: number) => {
+        if (rowIdx === 0) {
+          row.forEach((r: HTMLElement, colIdx: number) => {
+            r.style.borderRadius = '0';
+            colIdx !== 0 && (r.style.borderLeftWidth = '0');
+            row.length > rowColArr[rowIdx + 1].length
+              && (row[row.length - 1].style.borderBottomRightRadius = "4px");
+          });
+          row[0].style.borderTopLeftRadius = "4px";
+          row[row.length - 1].style.borderTopRightRadius = "4px";
+        }
+        else if (rowIdx === rowNum) {
+          row.forEach((r: HTMLElement, colIdx: number) => {
+            r.style.borderRadius = '0';
+            colIdx !== 0 && (r.style.borderLeftWidth = '0');
+            r.style.borderTopWidth = '0';
+            row[0].style.borderBottomLeftRadius = "4px";
+            row[row.length - 1].style.borderBottomRightRadius = "4px";
+          });
+        }
+        else {
+          row.forEach((r: HTMLElement, colIdx: number) => {
+            r.style.borderRadius = '0';
+            colIdx !== 0 && (r.style.borderLeftWidth = '0');
+            r.style.borderTopWidth = '0';
+            row.length > rowColArr[rowIdx + 1].length
+              && (row[row.length - 1].style.borderBottomRightRadius = "4px");
+          });
+        }
+      });
+    }
+  }
+
   renderGroup(option: Option, index: number) {
     const {classnames: cx, labelField} = this.props;
 
@@ -135,7 +229,8 @@ export default class CheckboxesControl extends React.Component<
       labelField,
       removable,
       editable,
-      translate: __
+      translate: __,
+      optionType
     } = this.props;
 
     return (
@@ -148,6 +243,7 @@ export default class CheckboxesControl extends React.Component<
         inline={inline}
         labelClassName={labelClassName}
         description={option.description}
+        optionType={optionType}
       >
         {String(option[labelField || 'label'])}
         {removable && hasAbility(option, 'removable') ? (
@@ -190,7 +286,8 @@ export default class CheckboxesControl extends React.Component<
       creatable,
       addApi,
       createBtnLabel,
-      translate: __
+      translate: __,
+      optionType
     } = this.props;
 
     let body: Array<React.ReactNode> = [];
@@ -199,7 +296,7 @@ export default class CheckboxesControl extends React.Component<
       body = options.map((option, key) => this.renderItem(option, key));
     }
 
-    if (checkAll && body.length) {
+    if (checkAll && body.length && optionType === 'default') {
       body.unshift(
         <Checkbox
           key="checkall"
@@ -221,24 +318,10 @@ export default class CheckboxesControl extends React.Component<
       );
     }
 
-    if ((columnsCount as number) > 1) {
-      let weight = 12 / (columnsCount as number);
-      let cellClassName = `Grid-col--sm${
-        weight === Math.round(weight) ? weight : ''
-      }`;
-      body = chunk(body, columnsCount).map((group, groupIndex) => (
-        <div className={cx('Grid')} key={groupIndex}>
-          {Array.from({length: columnsCount as number}).map((_, index) => (
-            <div key={index} className={cx(cellClassName)}>
-              {group[index]}
-            </div>
-          ))}
-        </div>
-      ));
-    }
+    body = columnsSplit(body, cx, columnsCount);
 
     return (
-      <div className={cx(`CheckboxesControl`, className)}>
+      <div className={cx(`CheckboxesControl`, className)} ref="checkboxRef">
         {body && body.length ? (
           body
         ) : (