amis 1.8.0-beta.1 → 1.8.0-beta.5

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

@@ -642,7 +642,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;
     }
@@ -1372,9 +1373,7 @@ export default class ComboControl extends React.Component<ComboProps> {
                 )
               ) : (
                 <Button
-                  level="default"
                   className={cx(`Combo-addBtn`, addButtonClassName)}
-                  block
                   tooltip={__('Combo.add')}
                   onClick={this.addItem}
                 >

package/src/renderers/Form/InputCity.tsx

@@ -4,7 +4,8 @@ import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
 import Spinner from '../../components/Spinner';
 import Select from '../../components/Select';
 import CityArea from '../../components/CityArea';
-import {autobind, isMobile} from '../../utils/helper';
+import {autobind, isMobile, createObject} from '../../utils/helper';
+import {Action} from '../../types';
 import {Option} from './Options';
 import {localeable, LocaleProps} from '../../locale';
 
@@ -432,10 +433,38 @@ export interface LocationControlProps extends FormControlProps {
   allowStreet?: boolean;
 }
 export class LocationControl extends React.Component<LocationControlProps> {
+
+  @autobind
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
+      onChange(resetValue ?? '');
+    }
+  }
+
+  @autobind
+  async handleChange(value: number | string) {
+    const {dispatchEvent, data, onChange} = this.props;
+
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+    
+    onChange(value);
+  }
+
   render() {
     const {
       value,
-      onChange,
       allowCity,
       allowDistrict,
       extractValue,
@@ -453,7 +482,7 @@ export class LocationControl extends React.Component<LocationControlProps> {
         popOverContainer={
           env && env.getModalContainer ? env.getModalContainer : undefined
         }
-        onChange={onChange}
+        onChange={this.handleChange}
         allowCity={allowCity}
         allowDistrict={allowDistrict}
         extractValue={extractValue}
@@ -466,7 +495,7 @@ export class LocationControl extends React.Component<LocationControlProps> {
       <ThemedCity
         searchable={searchable}
         value={value}
-        onChange={onChange}
+        onChange={this.handleChange}
         allowCity={allowCity}
         allowDistrict={allowDistrict}
         extractValue={extractValue}

package/src/renderers/Form/InputDateRange.tsx

@@ -7,9 +7,11 @@ import includes from 'lodash/includes';
 import DateRangePicker, {
   DateRangePicker as BaseDateRangePicker
 } from '../../components/DateRangePicker';
-import { isMobile, createObject, autobind } from '../../utils/helper';
+import {isMobile, createObject, autobind} from '../../utils/helper';
 import {Action} from '../../types';
 
+import type {ShortCuts} from '../../components/DatePicker';
+
 /**
  * DateRange 日期范围控件
  * 文档：https://baidu.gitee.io/amis/docs/components/form/date-range
@@ -75,6 +77,11 @@ export interface DateRangeControlSchema extends FormBaseControl {
    * 开启后变成非弹出模式，即内联模式。
    */
   embed?: boolean;
+
+  /**
+   * 日期范围快捷键
+   */
+  ranges?: string | Array<ShortCuts>;
 }
 
 export interface DateRangeProps

package/src/renderers/Form/InputFile.tsx

@@ -28,6 +28,7 @@ import {
   SchemaUrlPath
 } from '../../Schema';
 import merge from 'lodash/merge';
+import omit from 'lodash/omit';
 
 /**
  * File 文件上传控件
@@ -913,13 +914,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange, data} = this.props;
-    if (!isEmpty(autoFill) && onBulkChange) {
+    const {autoFill, multiple, onBulkChange, data, name} = this.props;
+    // 排除自身的字段，否则会无限更新state
+    const excludeSelfAutoFill = omit(autoFill, name || '');
+
+    if (!isEmpty(excludeSelfAutoFill) && onBulkChange) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
       const toSync = dataMapping(
-        autoFill,
+        excludeSelfAutoFill,
         multiple
           ? {
               items: files

package/src/renderers/Form/InputImage.tsx

@@ -31,6 +31,7 @@ import {
 import {filter} from '../../utils/tpl';
 import isPlainObject from 'lodash/isPlainObject';
 import merge from 'lodash/merge';
+import omit from 'lodash/omit';
 
 /**
  * Image 图片上传控件
@@ -817,13 +818,16 @@ export default class ImageControl extends React.Component<
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange, data} = this.props;
-    if (!isEmpty(autoFill) && onBulkChange && this.initAutoFill) {
+    const {autoFill, multiple, onBulkChange, data, name} = this.props;
+    // 排除自身的字段，否则会无限更新state
+    const excludeSelfAutoFill = omit(autoFill, name || '');
+
+    if (!isEmpty(excludeSelfAutoFill) && onBulkChange && this.initAutoFill) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
       const toSync = dataMapping(
-        autoFill,
+        excludeSelfAutoFill,
         multiple
           ? {
               items: files

package/src/renderers/Form/InputRange.tsx

@@ -271,7 +271,7 @@ export function formatValue(
       max: max === undefined || max > props.max ? props.max : max
     };
   }
-  return +value ?? props.min;
+  return +value < props.min ? props.min : Math.min(+value, props.max);
 }
 
 /**
@@ -284,11 +284,13 @@ export class Input extends React.Component<RangeItemProps, any> {
    */
   @autobind
   onChange(value: number) {
-    const {multiple, value: originValue, type} = this.props;
+    const {multiple, value: originValue, type, min} = this.props;
     const _value = this.getValue(value, type);
 
     this.props.updateValue(
-      multiple ? {...(originValue as MultipleValue), [type]: _value} : value
+      multiple
+        ? {...(originValue as MultipleValue), [type]: _value}
+        : value ?? min
     );
   }
 
@@ -334,7 +336,8 @@ export class Input extends React.Component<RangeItemProps, any> {
    */
   getValue(value: string | number, type?: string) {
     const {max, min, step, value: stateValue} = this.props as RangeItemProps;
-
+    // value为null、undefined时，取对应的min/max
+    value = value ?? (type === 'min' ? min : max);
     // 校正value为step的倍数
     let _value = Math.round(parseFloat(value + '') / step) * step;
     // 同步value与步长小数位数
@@ -457,21 +460,26 @@ export default class RangeControl extends React.PureComponent<
   }
 
   componentDidUpdate(prevProps: RangeProps) {
-    const {value} = prevProps;
+    const {value, min, max} = prevProps;
     const {
       value: nextPropsValue,
       multiple,
       delimiter,
-      min,
-      max,
+      min: nextPropsMin,
+      max: nextPropsMax,
       onChange
     } = this.props;
-    if (value !== nextPropsValue) {
+
+    if (
+      value !== nextPropsValue ||
+      min !== nextPropsMin ||
+      max !== nextPropsMax
+    ) {
       const value = formatValue(nextPropsValue, {
         multiple,
         delimiter,
-        min,
-        max
+        min: nextPropsMin,
+        max: nextPropsMax
       });
       this.setState({
         value: this.getValue(value)
@@ -584,12 +592,6 @@ export default class RangeControl extends React.PureComponent<
       region
     } = props;
 
-    // 指定parts -> 重新计算步长
-    if (parts > 1) {
-      props.step = (props.max - props.min) / props.parts;
-      props.showSteps = true;
-    }
-
     // 处理自定义json配置
     let renderMarks:
       | MarksType

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; // 两端对齐
 }
 
 /**
@@ -1410,7 +1411,7 @@ export default class Form extends React.Component<FormProps, object> {
       formHorizontal: horizontal,
       controlWidth,
       disabled: disabled || (control as Schema).disabled || form.loading,
-      btnDisabled: form.loading || form.validating,
+      btnDisabled: disabled || form.loading || form.validating,
       onAction: this.handleAction,
       onQuery: this.handleQuery,
       onChange: this.handleChange,

package/src/renderers/Form/wrapControl.tsx

@@ -353,7 +353,7 @@ export function wrapControl<
               this.model.clearValueOnHidden &&
                 this.model.form?.deleteValueByName(this.model.name);
 
-              rootStore.removeStore(this.model);
+              isAlive(rootStore) && rootStore.removeStore(this.model);
             }
             delete this.model;
           }

package/src/renderers/Nav.tsx

@@ -523,7 +523,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
                     env &&
                     env.isCurrentUrl(filter(link.to as string, data))
                   )),
-            __id: link.id ?? link.__id ?? guid()
+            __id: link.__id ?? guid()
           };
 
           item.unfolded =

package/src/renderers/Steps.tsx

@@ -70,6 +70,16 @@ export interface StepsSchema extends BaseSchema {
    * 展示模式
    */
   mode?: 'horizontal' | 'vertical';
+
+  /**
+   * 标签放置位置
+   */
+   labelPlacement?: 'horizontal' | 'vertical';
+
+   /**
+   * 点状步骤条
+   */
+    progressDot?: boolean;
 }
 
 export interface StepsProps
@@ -82,6 +92,8 @@ export function StepsCmpt(props: StepsProps) {
     steps,
     status,
     mode,
+    labelPlacement,
+    progressDot,
     data,
     source,
     config,
@@ -139,6 +151,8 @@ export function StepsCmpt(props: StepsProps) {
       className={className}
       status={status}
       mode={mode}
+      progressDot={progressDot}
+      labelPlacement={labelPlacement}
       useMobileUI={useMobileUI}
     ></Steps>
   );

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}
@@ -2310,9 +2312,18 @@ export default class Table extends React.Component<TableProps, object> {
             });
             worksheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1}];
 
-            const filteredColumns = toolbar.columns
+            let exportColumns = toolbar.columns;
+            if (isPureVariable(exportColumns)) {
+              exportColumns = resolveVariableAndFilter(
+                exportColumns,
+                data,
+                '| raw'
+              );
+            }
+
+            const filteredColumns = exportColumns
               ? columns.filter(column => {
-                  const filterColumnsNames = toolbar.columns!;
+                  const filterColumnsNames = exportColumns!;
                   if (filterColumnsNames.indexOf(column.name) !== -1) {
                     return true;
                   }