amis 1.8.0-beta.3 → 1.8.0-beta.5

package/src/components/AssociatedSelection.tsx

@@ -88,9 +88,15 @@ export class AssociatedSelection extends BaseSelection<
 
   @autobind
   handleLeftDeferLoad(option: Option) {
-    const {leftOptions, onLeftDeferLoad} = this.props;
-
-    onLeftDeferLoad?.(option, leftOptions);
+    const {leftOptions, onLeftDeferLoad, onDeferLoad} = this.props;
+
+    if (typeof onLeftDeferLoad === 'function') {
+      // TabsTransfer
+      return onLeftDeferLoad?.(option, leftOptions);
+    } else if (typeof onDeferLoad === 'function') {
+      // Select
+      return onDeferLoad?.(option);
+    }
   }
 
   handleRetry(option: Option) {

package/src/components/Checkbox.tsx

@@ -16,10 +16,10 @@ interface CheckboxProps {
   labelClassName?: string;
   className?: string;
   onChange?: (value: any, shift?: boolean) => void;
-  value?: any;
+  value?: boolean | string | number;
   inline?: boolean;
-  trueValue?: any;
-  falseValue?: any;
+  trueValue?: boolean | string | number;
+  falseValue?: boolean | string | number;
   disabled?: boolean;
   readOnly?: boolean;
   checked?: boolean;
@@ -28,6 +28,7 @@ interface CheckboxProps {
   classPrefix: string;
   classnames: ClassNamesFn;
   partial?: boolean;
+  optionType?: 'default' | 'button';
 }
 
 export class Checkbox extends React.Component<CheckboxProps, any> {
@@ -70,14 +71,19 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
       checked,
       type,
       name,
-      labelClassName
+      labelClassName,
+      optionType
     } = this.props;
 
     return (
       <label
         className={cx(`Checkbox Checkbox--${type}`, className, {
           'Checkbox--full': !partial,
-          [`Checkbox--${size}`]: size
+          'Checkbox--partial': partial,
+          [`Checkbox--${size}`]: size,
+          'Checkbox--button': optionType === 'button',
+          'Checkbox--button--checked': optionType === 'button' && checked,
+          'Checkbox--button--disabled--unchecked': disabled && !checked
         })}
       >
         <input

package/src/components/DateRangePicker.tsx

@@ -462,6 +462,8 @@ export class DateRangePicker extends React.Component<
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
     this.handleSelectChange = this.handleSelectChange.bind(this);
+    this.handleTimeStartChange = this.handleTimeStartChange.bind(this);
+    this.handleTimeEndChange = this.handleTimeEndChange.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.checkStartIsValidDate = this.checkStartIsValidDate.bind(this);
@@ -661,6 +663,88 @@ export class DateRangePicker extends React.Component<
     this.isFirstClick = !this.isFirstClick;
   }
 
+  // 主要用于处理时间的情况
+  handleTimeStartChange(newValue: moment.Moment) {
+    const {embed, timeFormat, minDuration, maxDuration, minDate} = this.props;
+    const {startDate, endDate} = this.state;
+
+    if (
+      startDate &&
+      (!endDate || (endDate && newValue.isSame(startDate))) && // 没有结束时间，或者新的时间也是开始时间，这时都会将新值当成结束时间
+      newValue.isSameOrAfter(startDate) &&
+      (!minDuration || newValue.isAfter(startDate.clone().add(minDuration))) &&
+      (!maxDuration || newValue.isBefore(startDate.clone().add(maxDuration)))
+    ) {
+      return this.setState(
+        {
+          endDate: this.filterDate(newValue, endDate, timeFormat, 'end')
+        },
+        () => {
+          embed && this.confirm();
+        }
+      );
+    }
+
+    if (minDate && newValue && newValue.isBefore(minDate, 'second')) {
+      newValue = minDate;
+    }
+
+    this.setState(
+      {
+        startDate: this.filterDate(
+          newValue,
+          startDate || minDate,
+          timeFormat,
+          'start'
+        )
+      },
+      () => {
+        embed && this.confirm();
+      }
+    );
+  }
+
+  handleTimeEndChange(newValue: moment.Moment) {
+    const {embed, timeFormat, minDuration, maxDuration, maxDate} = this.props;
+    const {startDate, endDate} = this.state;
+
+    if (
+      endDate &&
+      !startDate &&
+      newValue.isSameOrBefore(endDate) &&
+      (!minDuration ||
+        newValue.isBefore(endDate.clone().subtract(minDuration))) &&
+      (!maxDuration || newValue.isAfter(endDate.clone().subtract(maxDuration)))
+    ) {
+      return this.setState(
+        {
+          startDate: this.filterDate(newValue, startDate, timeFormat, 'start')
+        },
+        () => {
+          embed && this.confirm();
+        }
+      );
+    }
+
+    if (maxDate && newValue && newValue.isAfter(maxDate, 'second')) {
+      newValue = maxDate;
+    }
+
+    this.setState(
+      {
+        endDate: this.filterDate(
+          newValue,
+          endDate || maxDate,
+          timeFormat,
+          'end'
+        )
+      },
+      () => {
+        embed && this.confirm();
+      }
+    );
+  }
+
   handleMobileChange(data: any, callback?: () => void) {
     this.setState(
       {
@@ -871,6 +955,7 @@ export class DateRangePicker extends React.Component<
     const __ = this.props.translate;
 
     const {startDate, endDate} = this.state;
+
     return (
       <div className={`${ns}DateRangePicker-wrap`}>
         {this.renderRanges(ranges)}
@@ -878,7 +963,13 @@ export class DateRangePicker extends React.Component<
         <Calendar
           className={`${ns}DateRangePicker-start`}
           value={startDate}
-          onChange={this.handleSelectChange}
+          // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
+          // TODO: 后续得把 time-range 代码拆分出来
+          onChange={
+            viewMode === 'time'
+              ? this.handleTimeStartChange
+              : this.handleSelectChange
+          }
           requiredConfirm={false}
           dateFormat={dateFormat}
           inputFormat={inputFormat}
@@ -895,7 +986,11 @@ export class DateRangePicker extends React.Component<
         <Calendar
           className={`${ns}DateRangePicker-end`}
           value={endDate}
-          onChange={this.handleSelectChange}
+          onChange={
+            viewMode === 'time'
+              ? this.handleTimeEndChange
+              : this.handleSelectChange
+          }
           requiredConfirm={false}
           dateFormat={dateFormat}
           inputFormat={inputFormat}

package/src/components/calendar/Calendar.tsx

@@ -161,20 +161,6 @@ class BaseDatePicker extends React.Component<
       updatedState = this.getStateFromProps(props);
     }
 
-    // open 是外部控制了
-    // if (updatedState.open === undefined) {
-    //   if (typeof props.open !== 'undefined') {
-    //     updatedState.open = props.open;
-    //   } else if (
-    //     prevProps.closeOnSelect &&
-    //     this.state.currentView !== viewModes.TIME
-    //   ) {
-    //     updatedState.open = false;
-    //   } else {
-    //     updatedState.open = this.state.open;
-    //   }
-    // }
-
     if (props.viewMode !== prevProps.viewMode) {
       updatedState.currentView = props.viewMode;
     }
@@ -237,7 +223,8 @@ class BaseDatePicker extends React.Component<
       updatedState.viewDate = moment(props.viewDate);
     }
 
-    if (Object.keys(updatedState).length) {
+    // time-range 下会有问题，先不支持
+    if (Object.keys(updatedState).length && props.viewMode !== 'time') {
       this.setState(updatedState);
     }
 

package/src/factory.tsx

@@ -502,7 +502,10 @@ export function render(
     } as any;
 
     if (options.enableAMISDebug) {
-      enableDebug();
+      // 因为里面还有 render
+      setTimeout(() => {
+        enableDebug();
+      }, 10);
     }
 
     store = RendererStore.create({}, options);

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 &&

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

@@ -56,6 +56,7 @@ export interface CheckboxesProps
   createBtnLabel: string;
   editable?: boolean;
   removable?: boolean;
+  optionType?: 'default' | 'button'
 }
 
 export default class CheckboxesControl extends React.Component<
@@ -68,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() {
@@ -98,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;
 
@@ -136,7 +229,8 @@ export default class CheckboxesControl extends React.Component<
       labelField,
       removable,
       editable,
-      translate: __
+      translate: __,
+      optionType
     } = this.props;
 
     return (
@@ -149,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') ? (
@@ -191,7 +286,8 @@ export default class CheckboxesControl extends React.Component<
       creatable,
       addApi,
       createBtnLabel,
-      translate: __
+      translate: __,
+      optionType
     } = this.props;
 
     let body: Array<React.ReactNode> = [];
@@ -200,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"
@@ -225,7 +321,7 @@ export default class CheckboxesControl extends React.Component<
     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/Item.tsx

@@ -552,6 +552,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
             `Form-item Form-item--horizontal`,
             className,
             {
+              'Form-item--horizontal-justify': horizontal.justify,
               [`is-error`]: model && !model.valid,
               [`is-required`]: required
             },

package/src/renderers/Form/index.tsx

@@ -61,6 +61,7 @@ export interface FormSchemaHorizontal {
   left?: number;
   right?: number;
   leftFixed?: boolean | number | 'xs' | 'sm' | 'md' | 'lg';
+  justify?: boolean; // 两端对齐
 }
 
 /**

package/src/renderers/Table/index.tsx

@@ -472,6 +472,7 @@ export default class Table extends React.Component<TableProps, object> {
   } = {};
   renderedToolbars: Array<string> = [];
   subForms: any = {};
+  timer: ReturnType<typeof setTimeout>;
 
   constructor(props: TableProps) {
     super(props);
@@ -659,7 +660,7 @@ export default class Table extends React.Component<TableProps, object> {
     const footToolbarHeight = footToolbar ? offset(footToolbar).height : 0;
     // 有时候会拿不到 footToolbar，等一下在执行
     if (!footToolbarHeight && footerToolbar && footerToolbar.length) {
-      setTimeout(() => {
+      this.timer = setTimeout(() => {
         this.updateAutoFillHeight();
       }, 100);
       return;
@@ -777,6 +778,7 @@ export default class Table extends React.Component<TableProps, object> {
     this.unSensor && this.unSensor();
 
     formItem && isAlive(formItem) && formItem.setSubStore(null);
+    clearTimeout(this.timer);
   }
 
   subFormRef(form: any, x: number, y: number) {
@@ -1662,7 +1664,7 @@ export default class Table extends React.Component<TableProps, object> {
           {store.rows.length && multiple ? (
             <Checkbox
               classPrefix={ns}
-              partial={!store.allChecked}
+              partial={store.someChecked && !store.allChecked}
               checked={store.someChecked}
               disabled={store.disabledHeadCheckbox}
               onChange={this.handleCheckAll}

package/src/store/crud.ts

@@ -16,12 +16,14 @@ import {
   isObjectShallowModified,
   sortArray,
   isEmpty,
-  qsstringify
+  qsstringify,
+  getVariable
 } from '../utils/helper';
 import {Api, Payload, fetchOptions, Action, ApiObject} from '../types';
 import pick from 'lodash/pick';
 import {resolveVariableAndFilter} from '../utils/tpl-builtin';
 import {normalizeApiResponseData} from '../utils/api';
+import {matchSorter} from 'match-sorter';
 
 class ServerError extends Error {
   type = 'ServerError';
@@ -139,6 +141,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
         source?: string; // 支持自定义属于映射，默认不配置，读取 rows 或者 items
         loadDataMode?: boolean;
         syncResponse2Query?: boolean;
+        columns?: Array<any>;
       }
     ) => Promise<any> = flow(function* getInitData(
       api: Api,
@@ -150,6 +153,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
         source?: string; // 支持自定义属于映射，默认不配置，读取 rows 或者 items
         loadDataMode?: boolean;
         syncResponse2Query?: boolean;
+        columns?: Array<any>;
       } = {}
     ) {
       try {
@@ -165,6 +169,21 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
               )
             : self.items.concat();
 
+          if (Array.isArray(options.columns)) {
+            options.columns.forEach((column: any) => {
+              let value: any;
+              if (
+                column.searchable &&
+                column.name &&
+                (value = getVariable(self.query, column.name))
+              ) {
+                items = matchSorter(items, value, {
+                  keys: [column.name]
+                });
+              }
+            });
+          }
+
           if (self.query.orderBy) {
             const dir = /desc/i.test(self.query.orderDir) ? -1 : 1;
             items = sortArray(items, self.query.orderBy, dir);
@@ -263,7 +282,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
           }
 
           // 点击加载更多数据
-          let rowsData = [];
+          let rowsData: Array<any> = [];
           if (options.loadDataMode && Array.isArray(self.data.items)) {
             rowsData = self.data.items.concat(items);
           } else {
@@ -282,16 +301,32 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
           if (options.loadDataOnce) {
             // 记录原始集合，后续可能基于原始数据做排序查找。
             data.itemsRaw = oItems || oRows;
+            let filteredItems = rowsData.concat();
+
+            if (Array.isArray(options.columns)) {
+              options.columns.forEach((column: any) => {
+                let value: any;
+                if (
+                  column.searchable &&
+                  column.name &&
+                  (value = getVariable(self.query, column.name))
+                ) {
+                  filteredItems = matchSorter(filteredItems, value, {
+                    keys: [column.name]
+                  });
+                }
+              });
+            }
 
             if (self.query.orderBy) {
               const dir = /desc/i.test(self.query.orderDir) ? -1 : 1;
-              rowsData = sortArray(rowsData, self.query.orderBy, dir);
+              filteredItems = sortArray(filteredItems, self.query.orderBy, dir);
             }
-            data.items = rowsData.slice(
+            data.items = filteredItems.slice(
               (self.page - 1) * self.perPage,
               self.page * self.perPage
             );
-            data.count = data.total = rowsData.length;
+            data.count = data.total = filteredItems.length;
           }
 
           if (Array.isArray(columns)) {

package/src/store/formItem.ts

@@ -723,8 +723,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       // 插入新的子节点，用于之后BaseSelection.resolveSelected查找
       if (Array.isArray(topOption.children)) {
         const children = topOption.children.concat();
-
-        flattenTree(topOption.leftOptions).forEach(item => {
+        flattenTree(newLeftOptions).forEach(item => {
           if (!findTree(topOption.children, node => node.ref === item.value)) {
             children.push({ref: item.value, defer: true});
           }