amis 1.9.1-beta.11 → 1.9.1-beta.12

package/src/RootRenderer.tsx

@@ -12,6 +12,9 @@ import {filter} from './utils/tpl';
 import qs from 'qs';
 import pick from 'lodash/pick';
 import mapValues from 'lodash/mapValues';
+import {saveAs} from 'file-saver';
+import {normalizeApi} from './utils/api';
+import {AjaxActionSchema} from './renderers/Action';
 
 export interface RootRendererProps extends RootProps {
   location?: any;
@@ -218,6 +221,17 @@ export class RootRenderer extends React.Component<RootRendererProps> {
         env.copy(filter(action.content || action.copy, ctx, '| raw'), {
           format: action.copyFormat
         });
+    } else if (action.actionType === 'saveAs') {
+      // 使用 saveAs 实现下载
+      // 不支持 env，除非以后将 saveAs 代码拷过来改
+      const api = normalizeApi((action as AjaxActionSchema).api);
+      if (typeof api.url === 'string') {
+        let fileName = action.fileName || 'data.txt';
+        if (api.url.indexOf('.') !== -1) {
+          fileName = api.url.split('/').pop();
+        }
+        saveAs(api.url, fileName);
+      }
     }
   }
 

package/src/SchemaRenderer.tsx

@@ -17,7 +17,7 @@ import {ScopedContext} from './Scoped';
 import {Schema, SchemaNode} from './types';
 import {DebugWrapper} from './utils/debug';
 import getExprProperties from './utils/filter-schema';
-import {anyChanged, chainEvents, autobind} from './utils/helper';
+import {anyChanged, chainEvents, autobind, createObject} from './utils/helper';
 import {SimpleMap} from './utils/SimpleMap';
 
 import {bindEvent, dispatchEvent, RendererEvent} from './utils/renderer-event';
@@ -302,7 +302,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       const isSFC = !(schema.component.prototype instanceof React.Component);
       const {
         data: defaultData,
-        value: defaultValue,
+        value: defaultValue, // render时的value改放defaultValue中
         activeKey: defaultActiveKey,
         key: propKey,
         ...restSchema
@@ -313,6 +313,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
             ...rest,
             ...restSchema,
             ...exprProps,
+            // value: defaultValue, // 备注: 此处并没有将value传递给渲染器
             defaultData,
             defaultValue,
             defaultActiveKey,
@@ -388,6 +389,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       ...restSchema,
       ...chainEvents(rest, restSchema),
       ...exprProps,
+      // value: defaultValue, // 备注: 此处并没有将value传递给渲染器
       defaultData: restSchema.defaultData ?? defaultData,
       defaultValue: restSchema.defaultValue ?? defaultValue,
       defaultActiveKey: defaultActiveKey,

package/src/components/DateRangePicker.tsx

@@ -1147,7 +1147,11 @@ export class DateRangePicker extends React.Component<
       props.className += ' rdtBetween';
     }
 
-    return <td {...props}><span>{currentDate.date()}</span></td>;
+    return (
+      <td {...props}>
+        <span>{currentDate.date()}</span>
+      </td>
+    );
   }
 
   renderMonth(props: any, month: number, year: number, date: any) {
@@ -1227,67 +1231,71 @@ export class DateRangePicker extends React.Component<
     const __ = this.props.translate;
 
     const {startDate, endDate, editState} = this.state;
-    
+
     // timeRange需要单独选择范围
     const isTimeRange = type === 'input-datetime-range' || viewMode === 'time';
 
     return (
       <div className={`${ns}DateRangePicker-wrap`} ref={this.calendarRef}>
         {this.renderRanges(ranges)}
-        {(!isTimeRange || editState === 'start' && !embed) && <Calendar
-          className={`${ns}DateRangePicker-start`}
-          value={startDate}
-          // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
-          // TODO: 后续得把 time-range 代码拆分出来
-          onChange={
-            type === 'input-datetime-range'
-              ? this.handleStartDateChange
-              : viewMode === 'time'
-              ? this.handleTimeStartChange
-              : this.handleDateChange
-          }
-          requiredConfirm={false}
-          dateFormat={dateFormat}
-          inputFormat={inputFormat}
-          timeFormat={timeFormat}
-          isValidDate={this.checkStartIsValidDate}
-          viewMode={viewMode}
-          input={false}
-          onClose={this.close}
-          renderDay={this.renderDay}
-          renderMonth={this.renderMonth}
-          renderQuarter={this.renderQuarter}
-          renderYear={this.renderYear}
-          locale={locale}
-          timeRangeHeader="开始时间"
-        />}
-        {(!isTimeRange || editState === 'end' && !embed) && <Calendar
-          className={`${ns}DateRangePicker-end`}
-          value={endDate}
-          onChange={
-            type === 'input-datetime-range'
-              ? this.handeleEndDateChange
-              : viewMode === 'time'
-              ? this.handleTimeEndChange
-              : this.handleDateChange
-          }
-          requiredConfirm={false}
-          dateFormat={dateFormat}
-          inputFormat={inputFormat}
-          timeFormat={timeFormat}
-          viewDate={this.nextMonth}
-          isEndDate
-          isValidDate={this.checkEndIsValidDate}
-          viewMode={viewMode}
-          input={false}
-          onClose={this.close}
-          renderDay={this.renderDay}
-          renderMonth={this.renderMonth}
-          renderQuarter={this.renderQuarter}
-          renderYear={this.renderYear}
-          locale={locale}
-          timeRangeHeader="结束时间"
-        />}
+        {(!isTimeRange || (editState === 'start' && !embed)) && (
+          <Calendar
+            className={`${ns}DateRangePicker-start`}
+            value={startDate}
+            // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
+            // TODO: 后续得把 time-range 代码拆分出来
+            onChange={
+              type === 'input-datetime-range'
+                ? this.handleStartDateChange
+                : viewMode === 'time'
+                ? this.handleTimeStartChange
+                : this.handleDateChange
+            }
+            requiredConfirm={false}
+            dateFormat={dateFormat}
+            inputFormat={inputFormat}
+            timeFormat={timeFormat}
+            isValidDate={this.checkStartIsValidDate}
+            viewMode={viewMode}
+            input={false}
+            onClose={this.close}
+            renderDay={this.renderDay}
+            renderMonth={this.renderMonth}
+            renderQuarter={this.renderQuarter}
+            renderYear={this.renderYear}
+            locale={locale}
+            timeRangeHeader="开始时间"
+          />
+        )}
+        {(!isTimeRange || (editState === 'end' && !embed)) && (
+          <Calendar
+            className={`${ns}DateRangePicker-end`}
+            value={endDate}
+            onChange={
+              type === 'input-datetime-range'
+                ? this.handeleEndDateChange
+                : viewMode === 'time'
+                ? this.handleTimeEndChange
+                : this.handleDateChange
+            }
+            requiredConfirm={false}
+            dateFormat={dateFormat}
+            inputFormat={inputFormat}
+            timeFormat={timeFormat}
+            viewDate={this.nextMonth}
+            isEndDate
+            isValidDate={this.checkEndIsValidDate}
+            viewMode={viewMode}
+            input={false}
+            onClose={this.close}
+            renderDay={this.renderDay}
+            renderMonth={this.renderMonth}
+            renderQuarter={this.renderQuarter}
+            renderYear={this.renderYear}
+            locale={locale}
+            timeRangeHeader="结束时间"
+          />
+        )}
 
         {embed ? null : (
           <div key="button" className={`${ns}DateRangePicker-actions`}>
@@ -1297,7 +1305,9 @@ export class DateRangePicker extends React.Component<
             <a
               className={cx('Button', 'Button--primary', 'm-l-sm', {
                 'is-disabled':
-                  (!this.state.startDate && isTimeRange && editState === 'start') ||
+                  (!this.state.startDate &&
+                    isTimeRange &&
+                    editState === 'start') ||
                   (!this.state.endDate && isTimeRange && editState === 'end') ||
                   this.state.endDate?.isBefore(this.state.startDate)
               })}
@@ -1414,7 +1424,7 @@ export class DateRangePicker extends React.Component<
       >
         <Input
           className={cx('DateRangePicker-input', {
-            isActive: this.state.editState === 'start'
+            isActive: this.state.editState === 'start' && isOpened
           })}
           onChange={this.startInputChange}
           onClick={this.openStart}
@@ -1427,7 +1437,7 @@ export class DateRangePicker extends React.Component<
         <span className={cx('DateRangePicker-input-separator')}>-</span>
         <Input
           className={cx('DateRangePicker-input', {
-            isActive: this.state.editState === 'end'
+            isActive: this.state.editState === 'end' && isOpened
           })}
           onChange={this.endInputChange}
           onClick={this.openEnd}
@@ -1445,7 +1455,10 @@ export class DateRangePicker extends React.Component<
         ) : null}
 
         <a className={`${ns}DateRangePicker-toggler`}>
-          <Icon icon={viewMode === 'time' ? 'clock' : 'date'} className="icon" />
+          <Icon
+            icon={viewMode === 'time' ? 'clock' : 'date'}
+            className="icon"
+          />
         </a>
 
         {isOpened ? (

package/src/components/Select.tsx

@@ -1124,10 +1124,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
         isOpen={this.state.isOpen}
         inputValue={inputValue}
         onChange={
-          /*展示 Checkbox 的时候，会出发多次 onChange 原因待查*/ multiple ||
-          checkAll
-            ? noop
-            : this.handleChange
+          /*展示 Checkbox 的时候，会出发多次 onChange 原因待查*/
+          multiple ? noop : this.handleChange
         }
         onStateChange={this.handleStateChange}
         itemToString={item => (item ? `${item[labelField]}` : '')}

package/src/components/virtual-list/index.tsx

@@ -94,7 +94,7 @@ const STYLE_ITEM: {
   position: 'absolute' as ItemPosition,
   top: 0,
   left: 0,
-  width: '100%'
+  width: 'auto'
 };
 
 const STYLE_STICKY_ITEM = {

package/src/locale/de-DE.ts

@@ -132,6 +132,7 @@ register('de-DE', {
   'File.retry': 'Wiederholen',
   'File.start': 'Hochladen beginnen',
   'File.upload': 'Hochladen',
+  'Image.upload':'Hochladen',
   'File.uploadFailed': 'Zurückgegebene Daten der Upload-API sind leer',
   'File.uploading': 'Wird hochgeladen...',
   'FormItem.autoUpdateloadFaild': 'Die Schnittstelle hat einen Fehler zurückgegeben, bitte sorgfältig prüfen',

package/src/locale/en-US.ts

@@ -134,6 +134,7 @@ register('en-US', {
   'File.sizeLimit': 'The maximum file size is {{maxSize}} B',
   'File.start': 'Start upload',
   'File.upload': 'Upload',
+  'Image.upload':'Upload image',
   'File.uploadFailed': 'return data of udpload api is empty',
   'File.uploading': 'Uploading',
   'FormItem.autoUpdateloadFaild': 'return data of autoUpdate api is error',

package/src/locale/zh-CN.ts

@@ -138,7 +138,8 @@ register('zh-CN', {
   'File.retry': '重试上传',
   'File.sizeLimit': '文件大小不超过 {{maxSize}} B',
   'File.start': '开始上传',
-  'File.upload': '上传文件',
+  'File.upload': '文件上传',
+  'Image.upload': '图片上传',
   'File.uploadFailed': '接口返回错误，请仔细检查',
   'File.uploading': '上传中...',
   'FormItem.autoUpdateloadFaild': '接口返回错误，请仔细检查',
@@ -312,6 +313,8 @@ register('zh-CN', {
   'Condition.formula_placeholder': '请输入公式',
   'Condition.fun_error': '方法未定义',
   'InputTable.uniqueError': '列`{{label}}`没有通过唯一验证',
+  'Timeline.collapseText': '展开',
+  'Timeline.expandText': '折叠',
   'collapse': '展开',
   'expand': '折叠',
   'FormulaEditor.btnLabel': '公式编辑',
@@ -344,5 +347,5 @@ register('zh-CN', {
   'JSONSchema.add_prop': '添加属性',
   'JSONSchema.array_items': '成员类型',
   'Required': '必填',
-  'TimeNow': '此刻',
+  'TimeNow': '此刻'
 });

package/src/renderers/Action.tsx

@@ -184,6 +184,14 @@ export interface DownloadActionSchema
   actionType: 'download';
 }
 
+export interface SaveAsActionSchema
+  extends Omit<AjaxActionSchema, 'actionType'> {
+  /**
+   * 指定为保存到本地
+   */
+  actionType: 'saveAs';
+}
+
 export interface UrlActionSchema extends ButtonSchema {
   /**
    * 指定为打开链接

package/src/renderers/CRUD.tsx

@@ -2154,7 +2154,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             onSearchableFromInit: this.handleFilterInit,
             headerToolbarRender: this.renderHeaderToolbar,
             footerToolbarRender: this.renderFooterToolbar,
-            data: store.mergedData
+            data: store.mergedData,
+            loading: store.loading
           }
         )}
 

package/src/renderers/Card.tsx

@@ -354,13 +354,18 @@ export class CardRenderer extends React.Component<CardProps> {
     } = this.props;
 
     const toolbars: Array<JSX.Element> = [];
-
     if (header) {
-      const {highlightClassName, highlight: highlightTpl} = header;
-      const highlight = !!evalExpression(highlightTpl!, data as object);
-      if (highlight) {
+      const {highlightClassName, highlight} = header;
+      if (
+        typeof highlight === 'string'
+          ? evalExpression(highlight, data)
+          : highlight
+      ) {
         toolbars.push(
-          <i className={cx('Card-highlight', highlightClassName)} />
+          <i
+            key="highlight"
+            className={cx('Card-highlight', highlightClassName)}
+          />
         );
       }
     }

package/src/renderers/Carousel.tsx

@@ -5,7 +5,7 @@ import Transition, {
   EXITING
 } from 'react-transition-group/Transition';
 import {Renderer, RendererProps} from '../factory';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariableAndFilter} from '../utils/tpl-builtin';
 import {
   autobind,
   createObject,
@@ -15,7 +15,7 @@ import {
 } from '../utils/helper';
 import {Action} from '../types';
 import {Icon} from '../components/icons';
-import {BaseSchema, SchemaCollection, SchemaName, SchemaTpl} from '../Schema';
+import {BaseSchema, SchemaCollection, SchemaName} from '../Schema';
 import Html from '../components/Html';
 import Image from '../renderers/Image';
 import {ScopedContext, IScopedContext} from '../Scoped';
@@ -38,7 +38,7 @@ export interface CarouselSchema extends BaseSchema {
   /**
    * 轮播间隔时间
    */
-  interval?: number;
+  interval?: number | string;
 
   /**
    * 动画时长
@@ -211,7 +211,13 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
 
     this.clearAutoTimeout();
     if (this.props.auto) {
-      this.intervalTimeout = setTimeout(this.autoSlide, this.props.interval);
+      const interval = this.props.interval;
+      this.intervalTimeout = setTimeout(
+        this.autoSlide,
+        typeof interval === 'string'
+          ? resolveVariableAndFilter(interval, this.props.data) || 5000
+          : interval
+      );
     }
   }
 

package/src/renderers/Form/InputImage.tsx

@@ -1636,7 +1636,7 @@ export default class ImageControl extends React.Component<
                         ) : (
                           <>
                             <Icon icon="plus-fine" className="icon" />
-                            <span className={cx('ImageControl-addBtn-text')}>{__('File.upload')}</span>
+                            <span className={cx('ImageControl-addBtn-text')}>{__('Image.upload')}</span>
                           </>
                         )}
 

package/src/renderers/Form/InputText.tsx

@@ -727,6 +727,7 @@ export default class TextControl extends React.PureComponent<
                 <Spinner
                   show
                   icon="reload"
+                  size="sm"
                   spinnerClassName={cx('TextControl-spinner')}
                 />
               ) : null}

package/src/renderers/Form/Options.tsx

@@ -935,6 +935,7 @@ export function registerOptionsControl(config: OptionsConfig) {
             type: 'text',
             name: labelField || 'label',
             label: false,
+            required: true,
             placeholder: __('Options.addPlaceholder')
           }
         ];

package/src/renderers/Form/Select.tsx

@@ -85,6 +85,18 @@ export interface SelectControlSchema extends FormOptionsControl {
    * 搜索 API
    */
   searchApi?: SchemaApi;
+  /**
+   * 可多选条件下，是否可全选
+   */
+  checkAll?: boolean;
+  /**
+   * 可多选条件下，是否默认全选中所有值
+   */
+  defaultCheckAll?: boolean;
+  /**
+   * 可多选条件下，全选项文案，默认 ”全选“
+   */
+  checkAllLabel?: string;
 }
 
 export interface SelectProps extends OptionsControlProps {
@@ -412,9 +424,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
             onFocus={(e: any) => this.dispatchEvent('focus', e)}
             onAdd={() => this.dispatchEvent('add')}
             onEdit={(item: any) => this.dispatchEvent('edit', item)}
-            onDelete={(item: any) =>
-              this.dispatchEvent('delete', item)
-            }
+            onDelete={(item: any) => this.dispatchEvent('delete', item)}
             loading={loading}
             noResultsText={noResultsText}
             renderMenu={menuTpl ? this.renderMenu : undefined}

package/src/renderers/Form/wrapControl.tsx

@@ -1,19 +1,25 @@
 import React from 'react';
 import {IFormStore, IFormItemStore} from '../../store/form';
 import debouce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
 
 import {RendererProps, Renderer} from '../../factory';
 import {ComboStore, IComboStore, IUniqueGroup} from '../../store/combo';
 import {
   anyChanged,
   promisify,
-  isObject,
   guid,
   isEmpty,
   autobind,
   getVariable,
   createObject
 } from '../../utils/helper';
+import {
+  isNeedFormula,
+  isExpression,
+  FormulaExec,
+  replaceExpression
+} from '../../utils/formula';
 import {IIRendererStore, IRendererStore} from '../../store';
 import {ScopedContext, IScopedContext} from '../../Scoped';
 import {reaction} from 'mobx';
@@ -193,12 +199,27 @@ export function wrapControl<
               combo.bindUniuqueItem(model);
             }
 
-            // 同步 value
-            model.changeTmpValue(
-              propValue ?? store?.getValueByName(model.name) ?? value
-            );
+            if (propValue !== undefined && propValue !== null) {
+              // 同步 value: 优先使用 props 中的 value
+              model.changeTmpValue(propValue);
+            } else {
+              // 备注: 此处的 value 是 schema 中的 value（和props.defaultValue相同）
+              const curTmpValue = isExpression(value)
+                ? FormulaExec['formula'](value, data) // 对组件默认值进行运算
+                : store?.getValueByName(model.name) ?? replaceExpression(value); // 优先使用公式表达式
+              // 同步 value
+              model.changeTmpValue(curTmpValue);
+
+              if (
+                onChange &&
+                value !== undefined &&
+                curTmpValue !== undefined
+              ) {
+                // 组件默认值支持表达式需要: 避免初始化时上下文中丢失组件默认值
+                onChange(model.tmpValue, model.name, false, true);
+              }
+            }
 
-            // 如果没有初始值，通过 onChange 设置过去
             if (
               onChange &&
               typeof propValue === 'undefined' &&
@@ -208,6 +229,7 @@ export function wrapControl<
               // 对应 issue 为 https://github.com/baidu/amis/issues/2674
               store?.storeType !== TableStore.name
             ) {
+              // 如果没有初始值，通过 onChange 设置过去
               onChange(model.tmpValue, model.name, false, true);
             }
           }
@@ -258,6 +280,7 @@ export function wrapControl<
                   'validations',
                   'validationErrors',
                   'value',
+                  'defaultValue',
                   'required',
                   'unique',
                   'multiple',
@@ -301,30 +324,75 @@ export function wrapControl<
               });
             }
 
+            // 此处需要同时考虑 defaultValue 和 value
             if (model && typeof props.value !== 'undefined') {
-              // 自己控制的 value 优先
-              if (
-                props.value !== prevProps.value &&
-                props.value !== model.tmpValue
-              ) {
+              // 渲染器中的 value 优先
+              if (props.value !== prevProps.value && props.value !== model.tmpValue) {
+                // 外部直接传入的 value 无需执行运算器
                 model.changeTmpValue(props.value);
               }
             } else if (
-              // 然后才是查看关联的 name 属性值是否变化
               model &&
-              props.data !== prevProps.data &&
-              (!model.emitedValue || model.emitedValue === model.tmpValue)
+              typeof props.defaultValue !== 'undefined' &&
+              isExpression(props.defaultValue)
             ) {
-              model.changeEmitedValue(undefined);
-              const value = getVariable(props.data, model.name);
-              const prevValue = getVariable(prevProps.data, model.name);
+              // 渲染器中的 defaultValue 优先（备注: SchemaRenderer中会将 value 改成 defaultValue）
+              if (
+                props.defaultValue !== prevProps.defaultValue ||
+                (!isEqual(props.data, prevProps.data) &&
+                  isNeedFormula(props.defaultValue, props.data, prevProps.data))
+              ) {
+                const curResult = FormulaExec['formula'](
+                  props.defaultValue,
+                  props.data
+                );
+                const prevResult = FormulaExec['formula'](
+                  prevProps.defaultValue,
+                  prevProps.data
+                );
+                if (curResult !== prevResult && curResult !== model.tmpValue) {
+                  // 识别上下文变动、自身数值变动、公式运算结果变动
+                  model.changeTmpValue(curResult);
+                  if (props.onChange) {
+                    props.onChange(curResult, model.name, false);
+                  }
+                }
+              }
+            } else if (model) {
+              const valueByName = getVariable(props.data, model.name);
+
               if (
-                (value !== prevValue ||
-                  getVariable(props.data, model.name, false) !==
-                    getVariable(prevProps.data, model.name, false)) &&
-                value !== model.tmpValue
+                valueByName !== undefined &&
+                props.defaultValue === prevProps.defaultValue
               ) {
-                model.changeTmpValue(value);
+                // value 非公式表达式时，name 值优先，若 defaultValue 主动变动时，则使用 defaultValue
+                if (
+                  // 然后才是查看关联的 name 属性值是否变化
+                  props.data !== prevProps.data &&
+                  (!model.emitedValue || model.emitedValue === model.tmpValue)
+                ) {
+                  model.changeEmitedValue(undefined);
+                  const prevValueByName = getVariable(props.data, model.name);
+                  if (
+                    (valueByName !== prevValueByName ||
+                      getVariable(props.data, model.name, false) !==
+                        getVariable(prevProps.data, model.name, false)) &&
+                    valueByName !== model.tmpValue
+                  ) {
+                    model.changeTmpValue(valueByName);
+                  }
+                }
+              } else if (
+                typeof props.defaultValue !== 'undefined' &&
+                props.defaultValue !== prevProps.defaultValue &&
+                props.defaultValue !== model.tmpValue
+              ) {
+                // 组件默认值非公式
+                const curValue = replaceExpression(props.defaultValue);
+                model.changeTmpValue(curValue);
+                if (props.onChange) {
+                  props.onChange(curValue, model.name, false);
+                }
               }
             }
           }

package/src/renderers/Service.tsx

@@ -559,6 +559,7 @@ export default class Service extends React.Component<ServiceProps> {
 
     return render('body', store.schema || schema, {
       key: store.schemaKey || 'body',
+      loading: store.loading,
       onQuery: this.handleQuery,
       onAction: this.handleAction,
       onChange: this.handleChange