amis 1.8.0-beta.1 → 1.8.0-beta.13

package/src/renderers/CRUD.tsx

@@ -105,6 +105,16 @@ export interface CRUDCommonSchema extends BaseSchema {
    */
   perPage?: number;
 
+  /**
+   * 默认排序字段
+   */
+  orderBy?: string;
+
+  /**
+   * 默认排序方向
+   */
+  orderDir?: 'asc' | 'desc';
+
   /**
    * 可以默认给定初始参数如： {\"perPage\": 24}
    */
@@ -772,11 +782,17 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 
   handleFilterInit(values: object) {
-    const {defaultParams, data, store} = this.props;
+    const {defaultParams, data, store, orderBy, orderDir} = this.props;
+    const params = {...defaultParams};
+
+    if (orderBy) {
+      params['orderBy'] = orderBy;
+      params['orderDir'] = orderDir || 'asc';
+    }
 
     this.handleFilterSubmit(
       {
-        ...defaultParams,
+        ...params,
         ...values,
         ...store.query
       },
@@ -1025,7 +1041,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       env,
       loadDataOnce,
       loadDataOnceFetchOnFilter,
-      source
+      source,
+      columns
     } = this.props;
 
     // reload 需要清空用户选择。
@@ -1066,7 +1083,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             pageField,
             perPageField,
             loadDataMode,
-            syncResponse2Query
+            syncResponse2Query,
+            columns: store.columns ?? columns
           })
           .then(value => {
             interval &&
@@ -1592,7 +1610,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             `bulk-action/${index}`,
             {
               ...omit(btn, ['visibleOn', 'hiddenOn', 'disabledOn']),
-              type: 'button',
+              type: btn.type || 'button',
               ignoreConfirm: true
             },
             {

package/src/renderers/Carousel.tsx

@@ -278,6 +278,13 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
     clearTimeout(this.durationTimeout as number);
   }
 
+  @autobind
+  changeSlide(index: number) {
+    this.setState({
+      current: index
+    });
+  }
+
   renderDots() {
     const {classnames: cx} = this.props;
     const {current, options} = this.state;
@@ -290,6 +297,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
         {Array.from({length: options.length}).map((_, i) => (
           <span
             key={i}
+            onClick={() => this.changeSlide(i)}
             className={cx('Carousel-dot', current === i ? 'is-active' : '')}
           />
         ))}

package/src/renderers/Chart.tsx

@@ -489,4 +489,8 @@ export class ChartRenderer extends Chart {
     const scoped = this.context as IScopedContext;
     scoped.unRegisterComponent(this);
   }
+
+  setData(values: object) {
+    return this.props.store.updateData(values);
+  }
 }

package/src/renderers/Dialog.tsx

@@ -902,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/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
         ) : (

package/src/renderers/Form/Combo.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import cloneDeep from 'lodash/cloneDeep';
-import {
-  FormItem,
-  FormControlProps,
-  FormBaseControl,
-  FormControlSchemaAlias
-} from './Item';
-import {Schema, Action, Api} from '../../types';
+import {FormItem, FormControlProps, FormBaseControl} from './Item';
+import {Action, Api} from '../../types';
 import {ComboStore, IComboStore} from '../../store/combo';
 import {default as CTabs, Tab} from '../../components/Tabs';
 import Button from '../../components/Button';
@@ -26,7 +21,7 @@ import {evalExpression, filter} from '../../utils/tpl';
 import find from 'lodash/find';
 import Select from '../../components/Select';
 import {dataMapping, resolveVariable} from '../../utils/tpl-builtin';
-import {isEffectiveApi} from '../../utils/api';
+import {isEffectiveApi, str2AsyncFunction} from '../../utils/api';
 import {Alert2} from '../../components';
 import memoize from 'lodash/memoize';
 import {Icon} from '../../components/icons';
@@ -34,8 +29,6 @@ import {isAlive} from 'mobx-state-tree';
 import {
   SchemaApi,
   SchemaClassName,
-  SchemaCollection,
-  SchemaIcon,
   SchemaObject,
   SchemaTpl
 } from '../../Schema';
@@ -369,7 +362,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.handleFormInit = this.handleFormInit.bind(this);
     this.handleAction = this.handleAction.bind(this);
     this.addItem = this.addItem.bind(this);
-    this.removeItem = this.removeItem.bind(this);
+    this.deleteItem = this.deleteItem.bind(this);
     this.dragTipRef = this.dragTipRef.bind(this);
     this.flush = this.flush.bind(this);
     this.handleComboTypeChange = this.handleComboTypeChange.bind(this);
@@ -525,7 +518,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.props.onChange(value, submitOnChange, true);
   }
 
-  async removeItem(key: number) {
+  async deleteItem(key: number) {
     const {
       flat,
       joinValues,
@@ -642,7 +635,8 @@ export default class ComboControl extends React.Component<ComboProps> {
 
     if (
       syncDefaultValue === false ||
-      this.subFormDefaultValues.length !== this.subForms.length
+      this.subFormDefaultValues.length !==
+        this.subForms.filter(item => item !== undefined).length
     ) {
       return;
     }
@@ -698,7 +692,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     const {onAction} = this.props;
 
     if (action.actionType === 'delete') {
-      action.index !== void 0 && this.removeItem(action.index);
+      action.index !== void 0 && this.deleteItem(action.index);
       return;
     }
 
@@ -1053,8 +1047,8 @@ export default class ComboControl extends React.Component<ComboProps> {
           ) {
             toolbar = (
               <div
-                onClick={this.removeItem.bind(this, index)}
-                key="remove"
+                onClick={this.deleteItem.bind(this, index)}
+                key="delete"
                 className={cx(
                   `Combo-tab-delBtn ${!store.removable ? 'is-disabled' : ''}`
                 )}
@@ -1160,6 +1154,99 @@ export default class ComboControl extends React.Component<ComboProps> {
     );
   }
 
+  renderDelBtn(value: any, index: number) {
+    const {
+      classPrefix: ns,
+      classnames: cx,
+      render,
+      store,
+      deleteIcon,
+      translate: __,
+      itemRemovableOn,
+      disabled,
+      removable,
+      deleteBtn
+    } = this.props;
+
+    const finnalRemovable =
+      store.removable !== false && // minLength ?
+      !disabled && // 控件自身是否禁用
+      removable !== false; // 是否可以删除
+
+    if (
+      !(
+        finnalRemovable && // 表达式判断单条是否可删除
+        (!itemRemovableOn || evalExpression(itemRemovableOn, value) !== false)
+      )
+    ) {
+      // 不符合删除条件，则不渲染删除按钮
+      return null;
+    }
+
+    // deleteBtn是对象，则根据自定义配置渲染按钮
+    if (isObject(deleteBtn)) {
+      return render('delete-btn', {
+        ...deleteBtn,
+        type: 'button',
+        className: cx(
+          'Combo-delController',
+          deleteBtn ? deleteBtn.classname : ''
+        ),
+        onClick: (e: any) => {
+          if (!deleteBtn.onClick) {
+            this.deleteItem(index);
+            return;
+          }
+
+          let originClickHandler = deleteBtn.onClick;
+          if (typeof originClickHandler === 'string') {
+            originClickHandler = str2AsyncFunction(
+              deleteBtn.onClick,
+              'e',
+              'index',
+              'props'
+            );
+          }
+          const result = originClickHandler(e, index, this.props);
+          if (result && result.then) {
+            result.then(() => {
+              this.deleteItem(index);
+            });
+          } else {
+            this.deleteItem(index);
+          }
+        }
+      });
+    }
+
+    // deleteBtn是string，则渲染按钮文本
+    if (typeof deleteBtn === 'string') {
+      return render('delete-btn', {
+        type: 'button',
+        className: cx('Combo-delController'),
+        label: deleteBtn,
+        onClick: this.deleteItem.bind(this, index)
+      });
+    }
+
+    // 如果上述按钮不满足，则渲染默认按钮
+    return (
+      <a
+        onClick={this.deleteItem.bind(this, index)}
+        key="delete"
+        className={cx(`Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`)}
+        data-tooltip={__('delete')}
+        data-position="bottom"
+      >
+        {deleteIcon ? (
+          <i className={deleteIcon} />
+        ) : (
+          <Icon icon="status-close" className="icon" />
+        )}
+      </a>
+    );
+  }
+
   renderMultipe() {
     if (this.props.tabsMode) {
       return this.renderTabsMode();
@@ -1182,12 +1269,10 @@ export default class ComboControl extends React.Component<ComboProps> {
       addable,
       removable,
       typeSwitchable,
-      itemRemovableOn,
       delimiter,
       canAccessSuperData,
       addIcon,
       dragIcon,
-      deleteIcon,
       noBorder,
       conditions,
       lazyLoad,
@@ -1205,11 +1290,6 @@ export default class ComboControl extends React.Component<ComboProps> {
       value = value.split(delimiter || ',');
     }
 
-    const finnalRemovable =
-      store.removable !== false && // minLength ?
-      !disabled && // 控件自身是否禁用
-      removable !== false; // 是否可以删除
-
     return (
       <div
         className={cx(
@@ -1225,30 +1305,7 @@ export default class ComboControl extends React.Component<ComboProps> {
         <div className={cx(`Combo-items`, itemsWrapperClassName)}>
           {Array.isArray(value) && value.length ? (
             value.map((value, index, thelist) => {
-              let delBtn: any = null;
-
-              if (
-                finnalRemovable && // 表达式判断单条是否可删除
-                (!itemRemovableOn ||
-                  evalExpression(itemRemovableOn, value) !== false)
-              ) {
-                delBtn = (
-                  <Button
-                    key="remove"
-                    className={cx('Combo-delBtn')}
-                    disabled={!store.removable}
-                    tooltip={__('delete')}
-                    tooltipPlacement="bottom"
-                    onClick={this.removeItem.bind(this, index)}
-                  >
-                    {deleteIcon ? (
-                      <i className={deleteIcon} />
-                    ) : (
-                      <Icon icon="status-close" className="icon" />
-                    )}
-                  </Button>
-                );
-              }
+              let delBtn: any = this.renderDelBtn(value, index);
 
               const data = this.formatValue(value, index);
               let condition: ComboCondition | null = null;
@@ -1372,9 +1429,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                 )
               ) : (
                 <Button
-                  level="default"
                   className={cx(`Combo-addBtn`, addButtonClassName)}
-                  block
                   tooltip={__('Combo.add')}
                   onClick={this.addItem}
                 >