amis 1.5.6-beta.4 → 1.5.8-beta.2

package/src/components/formula/plugin.ts

@@ -0,0 +1,177 @@
+/**
+ * @file 扩展 codemirror
+ */
+
+import type CodeMirror from 'codemirror';
+import {eachTree} from '../../utils/helper';
+import type {FormulaEditorProps, VariableItem} from './Editor';
+
+export function editorFactory(
+  dom: HTMLElement,
+  cm: typeof CodeMirror,
+  props: any
+) {
+  registerLaunguageMode(cm);
+
+  console.log('here', props.evalMode);
+
+  return cm(dom, {
+    value: props.value || '',
+    autofocus: true,
+    mode: props.evalMode ? 'text/formula' : 'text/formula-template'
+  });
+}
+
+export class FormulaPlugin {
+  constructor(
+    readonly editor: CodeMirror.Editor,
+    readonly cm: typeof CodeMirror,
+    readonly getProps: () => FormulaEditorProps
+  ) {
+    // editor.on('change', this.autoMarkText);
+    this.autoMarkText();
+  }
+
+  autoMarkText() {
+    const {functions, variables, value} = this.getProps();
+    if (value) {
+      // todo functions 也需要自动替换
+      this.autoMark(variables);
+    }
+  }
+
+  insertContent(value: any, type: 'variable' | 'func') {
+    const from = this.editor.getCursor();
+    if (type === 'variable') {
+      this.editor.replaceSelection(value.key);
+      var to = this.editor.getCursor();
+
+      this.markText(from, to, value.name, 'cm-field');
+    } else if (type === 'func') {
+      // todo 支持 snippet，目前是不支持的
+
+      this.editor.replaceSelection(`${value}()`);
+      var to = this.editor.getCursor();
+      this.markText(
+        from,
+        {
+          line: to.line,
+          ch: to.ch - 2
+        },
+        value,
+        'cm-func'
+      );
+
+      this.editor.setCursor({
+        line: to.line,
+        ch: to.ch - 1
+      });
+    } else if (typeof value === 'string') {
+      this.editor.replaceSelection(value);
+    }
+
+    this.editor.focus();
+  }
+
+  markText(
+    from: CodeMirror.Position,
+    to: CodeMirror.Position,
+    label: string,
+    className = 'cm-func'
+  ) {
+    const text = document.createElement('span');
+    text.className = className;
+    text.innerText = label;
+    this.editor.markText(from, to, {
+      atomic: true,
+      replacedWith: text
+    });
+  }
+
+  autoMark(variables: Array<VariableItem>) {
+    if (!Array.isArray(variables) || !variables.length) {
+      return;
+    }
+
+    const varMap: {
+      [propname: string]: string;
+    } = {};
+
+    eachTree(
+      variables,
+      item => item.value && (varMap[item.value] = item.label)
+    );
+    const vars = Object.keys(varMap).sort((a, b) => b.length - a.length);
+
+    const editor = this.editor;
+    const lines = editor.lineCount();
+    for (let line = 0; line < lines; line++) {
+      const content = editor.getLine(line);
+
+      // 标记方法调用
+      content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
+        this.markText(
+          {
+            line: line,
+            ch: pos
+          },
+          {
+            line: line,
+            ch: pos + func.length
+          },
+          func,
+          'cm-func'
+        );
+        return _;
+      });
+
+      // 标记变量
+      vars.forEach(v => {
+        let from = 0;
+        let idx = -1;
+        while (~(idx = content.indexOf(v, from))) {
+          this.markText(
+            {
+              line: line,
+              ch: idx
+            },
+            {
+              line: line,
+              ch: idx + v.length
+            },
+            varMap[v],
+            'cm-field'
+          );
+          from = idx + v.length;
+        }
+      });
+    }
+  }
+
+  dispose() {}
+
+  validate() {}
+}
+
+let modeRegisted = false;
+function registerLaunguageMode(cm: typeof CodeMirror) {
+  if (modeRegisted) {
+    return;
+  }
+  modeRegisted = true;
+
+  // 对应 evalMode
+  cm.defineMode('formula', (config: any, parserConfig: any) => {
+    var formula = cm.getMode(config, 'javascript');
+    if (!parserConfig || !parserConfig.base) return formula;
+
+    return cm.multiplexingMode(cm.getMode(config, parserConfig.base), {
+      open: '${',
+      close: '}',
+      mode: formula
+    });
+  });
+
+  cm.defineMIME('text/formula', {name: 'formula'});
+  cm.defineMIME('text/formula-template', {name: 'formula', base: 'htmlmixed'});
+}

package/src/components/icons.tsx

@@ -43,6 +43,7 @@ import ExchangeIcon from '../icons/exchange.svg';
 import ColmunsIcon from '../icons/columns.svg';
 import CalendarIcon from '../icons/calendar.svg';
 import ClockIcon from '../icons/clock.svg';
+import TreeDownIcon from '../icons/tree-down.svg';
 
 import CopyIcon from '../icons/copy.svg';
 import FilterIcon from '../icons/filter.svg';
@@ -70,6 +71,7 @@ import ExpandAltIcon from '../icons/expand-alt.svg';
 import CompressAltIcon from '../icons/compress-alt.svg';
 import TransparentIcon from '../icons/transparent.svg';
 import LoadingOutline from '../icons/loading-outline.svg';
+import Star from '../icons/star.svg';
 import AlertSuccess from '../icons/alert-success.svg';
 import AlertInfo from '../icons/alert-info.svg';
 import AlertWarning from '../icons/alert-warning.svg';
@@ -170,10 +172,12 @@ registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
 registerIcon('loading-outline', LoadingOutline);
+registerIcon('star', Star);
 registerIcon('alert-success', AlertSuccess);
 registerIcon('alert-info', AlertInfo);
 registerIcon('alert-warning', AlertWarning);
 registerIcon('alert-danger', AlertDanger);
+registerIcon('tree-down', TreeDownIcon);
 
 export function Icon({
   icon,

package/src/components/index.tsx

@@ -8,6 +8,7 @@ import NotFound from './404';
 import {default as Alert, alert, confirm, prompt} from './Alert';
 import {default as ContextMenu, openContextMenus} from './ContextMenu';
 import AsideNav from './AsideNav';
+import Avatar from './Avatar';
 import Button from './Button';
 import Checkbox from './Checkbox';
 import Checkboxes from './Selection';
@@ -60,6 +61,7 @@ export {
   NotFound,
   Alert as AlertComponent,
   alert,
+  Avatar,
   confirm,
   prompt,
   ContextMenu,

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/star.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>星星</title>
+    <g id="页面-1" stroke-width="1" fill-rule="evenodd">
+        <g id="画板备份-8" transform="translate(-453.000000, -354.000000)">
+            <g id="编组" transform="translate(451.000000, 352.000000)">
+                <rect id="矩形" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+                <path d="M5.991,5.57 L3.50612104,5.93019955 C2.95954884,6.00942879 2.58069251,6.51674109 2.65992175,7.0633133 C2.69148792,7.28107625 2.79399678,7.48234825 2.95156285,7.63593881 L4.75,9.389 L4.75,9.389 L4.32487658,11.8655653 C4.23143888,12.4098886 4.59695386,12.9268961 5.14127715,13.0203338 C5.35808617,13.0575509 5.58111746,13.0222392 5.77582605,12.9198682 L7.999,11.751 L7.999,11.751 L10.223309,12.9201739 C10.712173,13.1771377 11.3167859,12.9891455 11.5737498,12.5002815 C11.6760846,12.3055935 11.7113789,12.0825978 11.6741677,11.8658233 L11.249,9.389 L11.249,9.389 L13.0473242,7.63660227 C13.4428666,7.25116142 13.4510555,6.6180494 13.0656146,6.22250699 C12.9120633,6.06493147 12.7108304,5.96239489 12.4930948,5.93078419 L10.008,5.57 L10.008,5.57 L8.89657099,3.31725295 C8.65221378,2.82196717 8.05261467,2.61854938 7.5573289,2.86290659 C7.36008347,2.96022079 7.20042315,3.11984957 7.10306997,3.31707577 L5.991,5.57 L5.991,5.57 Z" id="图标-填色"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -89,6 +89,7 @@ import './renderers/Form/Select';
 import './renderers/Form/Static';
 import './renderers/Form/InputDate';
 import './renderers/Form/InputDateRange';
+import './renderers/Form/InputFormula';
 import './renderers/Form/InputRepeat';
 import './renderers/Form/InputTree';
 import './renderers/Form/TreeSelect';
@@ -164,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/CRUD.tsx

@@ -1532,9 +1532,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   renderBulkActions(childProps: any) {
     let {bulkActions, itemActions, store, render, classnames: cx} = this.props;
 
-    const items = childProps.items;
-
-    if (!items.length || !bulkActions || !bulkActions.length) {
+    if (!bulkActions || !bulkActions.length) {
       return null;
     }