amis 1.5.7 → 1.5.8-beta.2

package/src/components/virtual-list/SizeAndPositionManager.ts

@@ -72,7 +72,8 @@ export default class SizeAndPositionManager {
     }
 
     if (index > this.lastMeasuredIndex) {
-      const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+      const lastMeasuredSizeAndPosition =
+        this.getSizeAndPositionOfLastMeasuredItem();
       let offset =
         lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size;
 
@@ -109,7 +110,8 @@ export default class SizeAndPositionManager {
    * As items as measured the estimate will be updated.
    */
   getTotalSize(): number {
-    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+    const lastMeasuredSizeAndPosition =
+      this.getSizeAndPositionOfLastMeasuredItem();
 
     return (
       lastMeasuredSizeAndPosition.offset +
@@ -232,7 +234,8 @@ export default class SizeAndPositionManager {
     // So make sure the offset is at least 0 or no match will be found.
     offset = Math.max(0, offset);
 
-    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+    const lastMeasuredSizeAndPosition =
+      this.getSizeAndPositionOfLastMeasuredItem();
     const lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);
 
     if (lastMeasuredSizeAndPosition.offset >= offset) {

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

@@ -181,8 +181,8 @@ export default class VirtualList extends React.PureComponent<Props, State> {
     const itemsDom = this.rootNode.children[0].children;
     const scrollbarWidth =
       window.innerWidth - document.documentElement.clientWidth || 15;
-    const containerWidth = this.rootNode.parentElement!.getBoundingClientRect()
-      .width;
+    const containerWidth =
+      this.rootNode.parentElement!.getBoundingClientRect().width;
     let maxItemWidth = 0;
     for (let i = 0; i < itemsDom.length; i++) {
       let itemWidth = itemsDom[i].getBoundingClientRect().width;
@@ -427,10 +427,8 @@ export default class VirtualList extends React.PureComponent<Props, State> {
     }
 
     const {scrollDirection = DIRECTION.VERTICAL} = this.props;
-    const {
-      size,
-      offset
-    } = this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
+    const {size, offset} =
+      this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
 
     return (this.styleCache[index] = sticky
       ? {

package/src/factory.tsx

@@ -257,6 +257,7 @@ const defaultOptions: RenderOptions = {
   affixOffsetTop: 0,
   affixOffsetBottom: 0,
   richTextToken: '',
+  useMobileUI: true, // 是否启用移动端原生 UI
   loadRenderer,
   fetcher() {
     return Promise.reject('fetcher is required');
@@ -410,6 +411,11 @@ export function render(
     env.locale = locale;
   }
 
+  // 默认将开启移动端原生 UI
+  if (typeof options.useMobileUI) {
+    props.useMobileUI = true;
+  }
+
   // 进行文本替换
   if (env.replaceText && isObject(env.replaceText)) {
     const replaceKeys = Object.keys(env.replaceText);

package/src/icons/tree-down.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024" width="30"
+    fill="currentColor">
+    <path d="M512 704L256 384h512z"></path>
+</svg>

package/src/index.tsx

@@ -165,6 +165,7 @@ import './renderers/Icon';
 import './renderers/Carousel';
 import './renderers/AnchorNav';
 import './renderers/Steps';
+import './renderers/Timeline';
 import './renderers/Markdown';
 import './renderers/TableView';
 import './renderers/Code';

package/src/locale/de-DE.ts

@@ -6,6 +6,15 @@ register('de-DE', {
   'asc': 'Aufsteigend',
   'App.home': 'Startseite',
   'App.navigation': 'Navigation',
+  'Calendar.datepicker': 'Auswahl des Datums',
+  'Calendar.yearmonth': 'YYYY MM',
+  'Calendar.year': 'YYYY',
+  'Calendar.begin': 'beginnt',
+  'Calendar.end': 'ende',
+  'Calendar.beginAndEnd': 'b/e',
+  'Calendar.toast': 'Außerhalb des Datumsbereichs',
+  'Calendar.startPick': 'Wählen Sie Startzeit',
+  'Calendar.endPick': 'Wählen Sie Endzeit',
   'cancel': 'Abbrechen',
   'Card.dragTip': 'Obere Schaltfläche zum Sortieren ziehen',
   'Card.toggleDrag': 'Zum Sortieren umschalten',
@@ -215,7 +224,7 @@ register('de-DE', {
   'validate.minimum': 'Der Eingabewert ist kleiner als der Mindestwert von $1.',
   'validate.minLength': 'Geben Sie weitere Zeichen ein, mindestens $1.',
   'validate.notEmptyString': 'Geben Sie nicht nur Leerzeichen ein.',
-  'validateFailed': 'Fehler bei der Überprüfung,',
+  'validateFailed': 'Fehler bei der Überprüfung',
   'Wizard.configError': 'Konfigurationsfehler',
   'Wizard.finish': 'Ende',
   'Wizard.next': 'Weiter',
@@ -254,5 +263,7 @@ register('de-DE', {
   'Condition.cond_placeholder': 'Bedingung auswählen',
   'Condition.field_placeholder': 'Feld auswählen',
   'Condition.blank': 'leer',
-  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed'
+  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed',
+  'Timeline.collapseText': 'Entfalten',
+  'Timeline.expandText': 'Falten'
 });

package/src/locale/en-US.ts

@@ -6,6 +6,15 @@ register('en-US', {
   'App.home': 'Home',
   'App.navigation': 'Navigation',
   'asc': 'Asc',
+  'Calendar.datepicker': 'Date Picker',
+  'Calendar.yearmonth': 'YYYY MM',
+  'Calendar.year': 'YYYY',
+  'Calendar.begin': 'begin',
+  'Calendar.end': 'end',
+  'Calendar.beginAndEnd': 'b/e',
+  'Calendar.toast': 'Out of date range',
+  'Calendar.startPick': 'Select start time',
+  'Calendar.endPick': 'Select end time',
   'cancel': 'Cancel',
   'Card.dragTip': 'Drag top button to sort',
   'Card.toggleDrag': 'Toggle drag to sort',
@@ -217,7 +226,7 @@ register('en-US', {
   'validate.minimum': 'The input value is lower than the minimum value of $1',
   'validate.minLength': 'Please enter more, at least $1 characters.',
   'validate.notEmptyString': 'Please do not enter all blank characters',
-  'validateFailed': 'Validate failed,',
+  'validateFailed': 'Validate failed',
   'Wizard.configError': 'Config error',
   'Wizard.finish': 'Finish',
   'Wizard.next': 'Next',
@@ -256,5 +265,7 @@ register('en-US', {
   'Condition.cond_placeholder': 'select condition',
   'Condition.field_placeholder': 'select field',
   'Condition.blank': 'blank',
-  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed'
+  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed',
+  'Timeline.collapseText': 'Unfold',
+  'Timeline.expandText': 'Fold'
 });

package/src/locale/zh-CN.ts

@@ -6,6 +6,15 @@ register('zh-CN', {
   'App.home': '首页',
   'App.navigation': '导航',
   'asc': '正序',
+  'Calendar.datepicker': '日期选择',
+  'Calendar.yearmonth': 'YYYY年MM月',
+  'Calendar.year': 'YYYY年',
+  'Calendar.begin': '开始',
+  'Calendar.end': '结束',
+  'Calendar.beginAndEnd': '始/终',
+  'Calendar.toast': '超出日期范围',
+  'Calendar.startPick': '选择开始时间',
+  'Calendar.endPick': '选择结束时间',
   'cancel': '取消',
   'Card.dragTip': '请拖动顶部的按钮进行排序',
   'Card.toggleDrag': '对卡片进行排序操作',
@@ -260,5 +269,7 @@ register('zh-CN', {
   'Condition.cond_placeholder': '请选择操作',
   'Condition.field_placeholder': '请选择字段',
   'Condition.blank': '空',
-  'InputTable.uniqueError': '列`{{label}}`没有通过唯一验证'
+  'InputTable.uniqueError': '列`{{label}}`没有通过唯一验证',
+  'Timeline.collapseText': '展开',
+  'Timeline.expandText': '折叠'
 });

package/src/renderers/Avatar.tsx

@@ -3,38 +3,36 @@
  */
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {
-  BaseSchema,
-  SchemaClassName,
-  SchemaIcon,
-  SchemaUrlPath
-} from '../Schema';
+import Avatar from '../components/Avatar';
 import {BadgeSchema, withBadge} from '../components/Badge';
-import {
-  isPureVariable,
-  resolveVariable,
-  resolveVariableAndFilter
-} from '../utils/tpl-builtin';
+import {BaseSchema, SchemaClassName} from '../Schema';
+import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 
-/**
- * Avatar 用户头像显示
- * 文档：https://baidu.gitee.io/amis/docs/components/avatar
- */
 export interface AvatarSchema extends BaseSchema {
+  // 指定类型
+  type: 'avatar';
+
   /**
-   *  指定为用户头像控件
+   * 类名
    */
-  type: 'avatar';
+  className?: SchemaClassName;
 
   /**
-   * 大小
+   * 自定义样式
    */
-  size?: number;
+  style?: {
+    [propName: string]: any;
+  };
 
   /**
-   * 形状
+   * 角标
+   */
+  badge?: BadgeSchema;
+
+  /**
+   * 图片地址
    */
-  shape?: 'circle' | 'square';
+  src?: string;
 
   /**
    * 图标
@@ -42,19 +40,29 @@ export interface AvatarSchema extends BaseSchema {
   icon?: string;
 
   /**
-   * 文本
+   * 图片相对于容器的缩放方式
    */
-  text?: string;
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 
   /**
-   * 图片地址
+   * 形状
    */
-  src?: string;
+  shape?: 'circle' | 'square' | 'rounded';
 
   /**
-   * 图片相对于容器的缩放方式
+   * 大小
    */
-  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+  size?: number | 'small' | 'default' | 'large';
+
+  /**
+   * 文本
+   */
+  text?: string;
+
+  /**
+   * 字符类型距离左右两侧边界单位像素
+   */
+  gap?: number;
 
   /**
    * 图片无法显示时的替换文字地址
@@ -62,82 +70,83 @@ export interface AvatarSchema extends BaseSchema {
   alt?: string;
 
   /**
-   * 类名
+   * 图片是否允许拖动
    */
-  className?: SchemaClassName;
+  draggable?: boolean;
 
   /**
-   * 自定义样式
+   * 图片CORS属性
    */
-  style?: {
-    [propName: string]: any;
-  };
+  crossOrigin: 'anonymous' | 'use-credentials' | '';
 
   /**
-   * 角标
+   * 图片加载失败的是否默认处理，字符串函数
    */
-  badge?: BadgeSchema;
+  onError?: string
 }
 
-export interface AvatarProps
-  extends RendererProps,
-    Omit<AvatarSchema, 'type' | 'className'> {}
+export interface AvatarProps extends RendererProps, Omit<AvatarSchema, 'type' | 'className'> {}
+
+export class AvatarField extends React.Component<AvatarProps> {
 
-export class AvatarField extends React.Component<AvatarProps, object> {
   render() {
     let {
+      style = {},
       className,
+      classnames: cx,
+      src,
       icon = 'fa fa-user',
+      fit,
+      shape,
+      size,
       text,
-      src,
-      fit = 'cover',
-      data,
-      shape = 'circle',
-      size = 40,
-      style,
-      classnames: cx,
-      props
+      gap,
+      alt,
+      draggable,
+      crossOrigin,
+      onError,
+      data
     } = this.props;
 
-    let sizeStyle = {
-      height: size,
-      width: size,
-      lineHeight: size + 'px'
-    };
+    let errHandler = () => false;
 
-    if (isPureVariable(text)) {
-      text = resolveVariableAndFilter(text, data);
+    if (typeof onError === 'string') {
+      try {
+        errHandler = new Function('event', onError) as () => boolean;
+      } catch (e) {
+        console.warn(onError, e);
+      }
     }
 
     if (isPureVariable(src)) {
       src = resolveVariableAndFilter(src, data, '| raw');
     }
 
-    if (isPureVariable(icon)) {
-      icon = resolveVariableAndFilter(icon, data);
-    }
-
-    let avatar = <i className={icon} />;
-
-    if (text) {
-      if (text.length > 2) {
-        text = text.substring(0, 2).toUpperCase();
-      }
-      avatar = <span>{text}</span>;
+    if (isPureVariable(text)) {
+      text = resolveVariableAndFilter(text, data);
     }
 
-    if (src) {
-      avatar = <img src={src} style={{objectFit: fit}} />;
+    if (isPureVariable(icon)) {
+      icon = resolveVariableAndFilter(icon, data);
     }
 
     return (
-      <div
-        className={cx('Avatar', className, `Avatar--${shape}`)}
-        style={{...sizeStyle, ...style}}
-        {...props}
-      >
-        {avatar}
-      </div>
+      <Avatar
+        style={style}
+        className={className}
+        classnames={cx}
+        src={src}
+        icon={icon}
+        fit={fit}
+        shape={shape}
+        size={size}
+        text={text}
+        gap={gap}
+        alt={alt}
+        draggable={draggable}
+        crossOrigin={crossOrigin}
+        onError={errHandler}
+      />
     );
   }
 }

package/src/renderers/Card.tsx

@@ -4,7 +4,7 @@ import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
 import Checkbox from '../components/Checkbox';
 import {padArr, isVisible, isDisabled, noop, hashCode} from '../utils/helper';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
 import PopOver, {SchemaPopOver} from './PopOver';
 import {TableCell} from './Table';
@@ -644,15 +644,19 @@ export class CardRenderer extends React.Component<CardProps> {
   }
 
   renderMedia() {
-    const {media, classnames: cx, render, region} = this.props;
+    const {media, classnames: cx, render, region, data} = this.props;
     if (media) {
       const {type, url, className, autoPlay, isLive, poster} = media;
+      const mediaUrl = resolveVariableAndFilter(url, data, '| raw');
 
-      if (type === 'image' && url) {
+      if (type === 'image' && mediaUrl) {
         return (
-          <img className={cx('Card-multiMedia-img', className)} src={url} />
+          <img
+            className={cx('Card-multiMedia-img', className)}
+            src={mediaUrl}
+          />
         );
-      } else if (type === 'video' && url) {
+      } else if (type === 'video' && mediaUrl) {
         return (
           <div className={cx('Card-multiMedia-video', className)}>
             {
@@ -660,7 +664,7 @@ export class CardRenderer extends React.Component<CardProps> {
                 type: type,
                 autoPlay: autoPlay,
                 poster: poster,
-                src: url,
+                src: mediaUrl,
                 isLive: isLive
               }) as JSX.Element
             }

package/src/renderers/Custom.tsx

@@ -33,9 +33,12 @@ export interface CustomProps extends FormControlProps, CustomSchema {
 
 // 添加resolver，指定所有参数的联合字符串为key。因为最后一个参数为函数体
 // 缓存一下，避免在 crud 中的自定义组件被大量执行
-const getFunction = memoize((...args) => {
-  return new Function(...args);
-}, (...args) => JSON.stringify(args));
+const getFunction = memoize(
+  (...args) => {
+    return new Function(...args);
+  },
+  (...args) => JSON.stringify(args)
+);
 
 export class Custom extends React.Component<CustomProps, object> {
   static defaultProps: Partial<CustomProps> = {

package/src/renderers/Each.tsx

@@ -54,10 +54,10 @@ export default class Each extends React.Component<EachProps> {
       translate: __
     } = this.props;
 
-    const value = getPropValue(
-      this.props,
-      props => props.source && !props.name
-        ? resolveVariableAndFilter(props.source, props.data, '| raw') : undefined
+    const value = getPropValue(this.props, props =>
+      props.source && !props.name
+        ? resolveVariableAndFilter(props.source, props.data, '| raw')
+        : undefined
     );
 
     const arr = isObject(value)

package/src/renderers/Flex.tsx

@@ -112,13 +112,9 @@ export default class Flex extends React.Component<FlexProps, object> {
 
     return (
       <div style={flexStyle} className={className}>
-        {(Array.isArray(items)
-          ? items
-          : items
-          ? [items]
-          : []
-        ).map((item, key) =>
-          render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
+        {(Array.isArray(items) ? items : items ? [items] : []).map(
+          (item, key) =>
+            render(`flexItem/${key}`, item, {key: `flexItem/${key}`})
         )}
       </div>
     );

package/src/renderers/Form/ChartRadios.tsx

@@ -98,13 +98,8 @@ export default class ChartRadiosControl extends React.Component<
   }
 
   render() {
-    const {
-      options,
-      labelField,
-      chartValueField,
-      valueField,
-      render
-    } = this.props;
+    const {options, labelField, chartValueField, valueField, render} =
+      this.props;
     const config = {
       legend: {
         top: 10

package/src/renderers/Form/Checkboxes.tsx

@@ -216,7 +216,7 @@ export default class CheckboxesControl extends React.Component<
           inline={inline}
           labelClassName={labelClassName}
         >
-        {__('Checkboxes.selectAll')}
+          {__('Checkboxes.selectAll')}
         </Checkbox>
       );
     }

package/src/renderers/Form/DiffEditor.tsx

@@ -98,9 +98,8 @@ export class DiffEditor extends React.Component<DiffEditorProps, any> {
     this.handleBlur = this.handleBlur.bind(this);
     this.editorFactory = this.editorFactory.bind(this);
     this.handleEditorMounted = this.handleEditorMounted.bind(this);
-    this.handleModifiedEditorChange = this.handleModifiedEditorChange.bind(
-      this
-    );
+    this.handleModifiedEditorChange =
+      this.handleModifiedEditorChange.bind(this);
   }
 
   componentWillUnmount() {

package/src/renderers/Form/InputColor.tsx

@@ -72,7 +72,7 @@ export default class ColorControl extends React.PureComponent<
     return (
       <div className={cx(`${ns}ColorControl`, className)}>
         <Suspense fallback={<div>...</div>}>
-          <ColorPicker classPrefix={ns} {...rest} value={value || ''} useMobileUI={env.useMobileUI}/>
+          <ColorPicker classPrefix={ns} {...rest} value={value || ''} />
         </Suspense>
       </div>
     );

package/src/renderers/Form/InputDate.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
-import {filterDate, isPureVariable, resolveVariableAndFilter} from '../../utils/tpl-builtin';
+import {
+  filterDate,
+  isPureVariable,
+  resolveVariableAndFilter
+} from '../../utils/tpl-builtin';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import DatePicker from '../../components/DatePicker';
@@ -91,12 +95,14 @@ export interface DateControlSchema extends InputDateBaseControlSchema {
   /**
    * 日程
    */
-  schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
-  }> | string;
+  schedules?:
+    | Array<{
+        startTime: Date;
+        endTime: Date;
+        content: any;
+        className?: string;
+      }>
+    | string;
   /**
    * 日程显示颜色自定义
    */
@@ -288,10 +294,10 @@ interface DateControlState {
   minDate?: moment.Moment;
   maxDate?: moment.Moment;
   schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
   }>;
 }
 
@@ -370,15 +376,25 @@ export default class DateControl extends React.PureComponent<
       });
     }
 
-    if (anyChanged(['schedules', 'data'], prevProps, props)
-      && (typeof props.schedules === 'string' && isPureVariable(props.schedules))
+    if (
+      anyChanged(['schedules', 'data'], prevProps, props) &&
+      typeof props.schedules === 'string' &&
+      isPureVariable(props.schedules)
     ) {
-      const schedulesData = resolveVariableAndFilter(props.schedules, props.data, '| raw');
-      const preSchedulesData = resolveVariableAndFilter(prevProps.schedules, prevProps.data, '| raw');
+      const schedulesData = resolveVariableAndFilter(
+        props.schedules,
+        props.data,
+        '| raw'
+      );
+      const preSchedulesData = resolveVariableAndFilter(
+        prevProps.schedules,
+        prevProps.data,
+        '| raw'
+      );
       if (Array.isArray(schedulesData) && preSchedulesData !== schedulesData) {
         this.setState({
           schedules: schedulesData
-        })
+        });
       }
     }
   }
@@ -408,8 +424,12 @@ export default class DateControl extends React.PureComponent<
       }
     };
 
-    onAction && onAction(null, scheduleAction || defaultscheduleAction, createObject(data, scheduleData));
-
+    onAction &&
+      onAction(
+        null,
+        scheduleAction || defaultscheduleAction,
+        createObject(data, scheduleData)
+      );
   }
 
   render() {
@@ -442,7 +462,6 @@ export default class DateControl extends React.PureComponent<
           format={valueFormat || format}
           {...this.state}
           classnames={cx}
-          useMobileUI={env.useMobileUI}
           schedules={this.state.schedules}
           largeMode={largeMode}
           onScheduleClick={this.onScheduleClick.bind(this)}

package/src/renderers/Form/InputDateRange.tsx

@@ -187,7 +187,6 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
         />
       </div>
     );