amis 1.8.0-beta.2 → 1.8.0-beta.3

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/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;
@@ -221,21 +222,7 @@ 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)}>

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

@@ -2310,9 +2310,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;
                   }

package/src/store/table.ts

@@ -899,7 +899,7 @@ export const TableStore = iRendererStore
           : {
               item
             };
-        const id = item.id ?? guid();
+        const id = item.__id ?? guid();
 
         return {
           // id: String(item && (item as any)[self.primaryField] || `${pindex}-${depth}-${key}`),
@@ -941,7 +941,7 @@ export const TableStore = iRendererStore
 
       let arr: Array<SRow> = rows.map((item, index) => {
         let id = String(
-          getEntryId ? getEntryId(item, index) : item.id ?? guid()
+          getEntryId ? getEntryId(item, index) : item.__id ?? guid()
         );
         return {
           // id: getEntryId ? getEntryId(item, key) : String(item && (item as any)[self.primaryField] || `${key}-1-${key}`),

package/src/utils/columnsSplit.tsx

@@ -0,0 +1,57 @@
+/**
+ * columnsCount 支持数字和数组两种格式
+ */
+import React from 'react';
+import chunk from 'lodash/chunk';
+
+export function columnsSplit(
+  body: any[],
+  cx: any,
+  columnsCount?: number | number[]
+) {
+  if (Array.isArray(columnsCount) && columnsCount.length) {
+    let bodyIndex = 0;
+    const bodyList: JSX.Element[] = [];
+    const maxSize = Math.max(Math.round(12 / Math.max(...columnsCount)), 1);
+    let cellClassName = `Grid-col--sm${maxSize}`;
+    columnsCount.forEach((columnSize, groupIndex) => {
+      if (columnSize) {
+        bodyList.push(
+          <div className={cx('Grid')} key={groupIndex}>
+            {Array.from({length: columnSize}).map((_, index) => {
+              if (bodyIndex + index < body.length) {
+                // 避免溢出
+                return (
+                  <div key={index} className={cx(cellClassName)}>
+                    {body[bodyIndex + index]}
+                  </div>
+                );
+              } else {
+                return null;
+              }
+            })}
+          </div>
+        );
+        bodyIndex = bodyIndex + columnSize;
+      }
+    });
+
+    body = bodyList;
+  } else if (typeof columnsCount === 'number' && columnsCount > 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>
+    ));
+  }
+
+  return body;
+}

package/src/utils/debug.tsx

@@ -182,6 +182,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
     >
       <div
         className="AMISDebug-toggle"
+        title="open debug"
         onClick={() => {
           store.isExpanded = true;
         }}
@@ -284,24 +285,6 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
   );
 });
 
-export let enableAMISDebug = false;
-
-// 开启 debug 有两种方法，一个是设置 enableAMISDebug 全局变量，另一个是通过 amisDebug=1 query
-if (
-  (window as any).enableAMISDebug ||
-  location.search.indexOf('amisDebug=1') !== -1
-) {
-  enableAMISDebug = true;
-  // 页面只有一个
-  if (!(window as any).amisDebugElement) {
-    const amisDebugElement = document.createElement('div');
-    document.body.appendChild(amisDebugElement);
-    const element = <AMISDebug store={store} />;
-    render(element, amisDebugElement);
-    (window as any).amisDebugElement = true;
-  }
-}
-
 /**
  * 鼠标移动到某个组件的效果
  */
@@ -365,7 +348,20 @@ autorun(() => {
   }
 });
 
-if (enableAMISDebug) {
+// 页面中只能有一个实例
+let isEnabled = false;
+
+export function enableDebug() {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
+
+  const amisDebugElement = document.createElement('div');
+  document.body.appendChild(amisDebugElement);
+  const element = <AMISDebug store={store} />;
+  render(element, amisDebugElement);
+
   document.body.appendChild(amisHoverBox);
   document.body.appendChild(amisActiveBox);
   document.addEventListener('mousemove', handleMouseMove);
@@ -378,9 +374,6 @@ interface DebugWrapperProps {
 
 export class DebugWrapper extends Component<DebugWrapperProps> {
   componentDidMount() {
-    if (!enableAMISDebug) {
-      return;
-    }
     const root = findDOMNode(this) as HTMLElement;
     if (!root) {
       return;
@@ -407,7 +400,7 @@ type Category = 'api' | 'event';
  * @param ext 扩展信息
  */
 export function debug(cat: Category, msg: string, ext?: object) {
-  if (!enableAMISDebug) {
+  if (!isEnabled) {
     return;
   }
   const log = {
@@ -426,7 +419,7 @@ export function debug(cat: Category, msg: string, ext?: object) {
  * @param ext 扩展信息
  */
 export function warning(cat: Category, msg: string, ext?: object) {
-  if (!enableAMISDebug) {
+  if (!isEnabled) {
     return;
   }
   store.logs.push({