amis 1.4.1 → 1.4.2-beta.13

package/src/hooks/use-touch.ts

@@ -0,0 +1,100 @@
+import {useCallback, useRef} from 'react';
+
+const MIN_DISTANCE = 10;
+
+type Direction = '' | 'vertical' | 'horizontal';
+
+function getDirection(x: number, y: number) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+}
+
+const INITIAL_STATE = {
+  startX: 0,
+  startY: 0,
+  deltaX: 0,
+  deltaY: 0,
+  offsetX: 0,
+  offsetY: 0,
+  direction: '' as Direction
+};
+
+type StateType = Partial<typeof INITIAL_STATE>;
+type StateFunctionType = (value: StateType) => typeof INITIAL_STATE;
+
+const useTouch = () => {
+  const refState = useRef(INITIAL_STATE);
+  const innerState = refState.current;
+
+  const update = (value: StateType | StateFunctionType) => {
+    if (typeof value === 'function') {
+      value = value(refState.current);
+    }
+    Object.entries(value).forEach(([k, v]) => {
+      //@ts-ignore
+      refState.current[k] = v;
+    });
+  };
+
+  const isVertical = useCallback(
+    () => innerState.direction === 'vertical',
+    [innerState.direction]
+  );
+  const isHorizontal = useCallback(
+    () => innerState.direction === 'horizontal',
+    [innerState.direction]
+  );
+
+  const reset = () => {
+    update({
+      deltaX: 0,
+      deltaY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      direction: ''
+    });
+  };
+
+  const start = ((event: TouchEvent) => {
+    reset();
+    update({
+      startX: event.touches[0].clientX,
+      startY: event.touches[0].clientY
+    });
+  }) as EventListener;
+
+  const move = ((event: TouchEvent) => {
+    const touch = event.touches[0];
+
+    update(value => {
+      // Fix: Safari back will set clientX to negative number
+      const newState = {...value} as typeof innerState;
+
+      newState.deltaX = touch.clientX < 0 ? 0 : touch.clientX - newState.startX;
+      newState.deltaY = touch.clientY - newState.startY;
+      newState.offsetX = Math.abs(newState.deltaX);
+      newState.offsetY = Math.abs(newState.deltaY);
+
+      if (!newState.direction) {
+        newState.direction = getDirection(newState.offsetX, newState.offsetY);
+      }
+      return newState;
+    });
+  }) as EventListener;
+
+  return {
+    ...innerState,
+    move,
+    start,
+    reset,
+    isVertical,
+    isHorizontal
+  };
+};
+
+export default useTouch;

package/src/hooks/use-update-effect.ts

@@ -0,0 +1,16 @@
+import {useEffect, useRef} from 'react';
+
+const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+    } else {
+      return effect();
+    }
+    return undefined;
+  }, deps);
+};
+
+export default useUpdateEffect;

package/src/icons/clock.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_时间</title><g id="ic_时间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="1-FL" stroke="#000" cx="8" cy="8" r="6.5" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/><polyline id="2-FLW" stroke="#000" points="7.87443646 5.5 7.87443646 8.53778873 5.5 9.28133409" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>

package/src/icons/download.svg

@@ -0,0 +1,4 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" class="svg-inline--fa fa-download fa-w-16" role="img"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
+</svg>

package/src/icons/status-close.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>关闭</title>
+    <g id="关闭" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标-关闭">
+            <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+            <path d="M12.549,2.65 L13.256,3.357 L8.659,7.952 L13.2563,12.549 L12.5493,13.257 L7.953,8.659 L3.357,13.257 L2.65,12.549 L7.246,7.952 L2.6503,3.357 L3.3573,2.65 L7.953,7.245 L12.549,2.65 Z" id="图标-填色" fill="#080E1A" opacity="0.5"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/status-fail.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>状态-失败</title>
+    <g id="状态-失败" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图示-图标">
+            <rect id="矩形" stroke="#979797" stroke-width="1.33333333" fill="#D8D8D8" opacity="0" x="0.666666667" y="0.666666667" width="14.6666667" height="14.6666667"></rect>
+            <path d="M10.4361,11.0054 L7.9531,8.5394 L5.4861,11.0224 L4.7771,10.3184 L7.2431,7.8344 L4.7601,5.3674 L5.4651,4.6584 L7.9481,7.1244 L10.4151,4.6424 L11.1241,5.3464 L8.6571,7.8294 L11.1411,10.2964 L10.4361,11.0054 Z M1.00001937,8.0244 C1.0131,11.8894 4.1581,15.0134 8.0231,14.9994934 C11.8901,14.9864 15.0131,11.8424 15.0001806,7.9764 C14.9871,4.1104 11.8421,0.9864 7.9771,1.00030657 C4.1101,1.0134 0.9871,4.1574 1.00001937,8.0244 Z" id="图标-填色" fill="#E8684A"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/status-info.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>6.图标/6.提示/通知/面</title>
+    <g id="6.图标/6.提示/通知/面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Clip-2" points="1.0001 1 15 1 15 14.9999 1.0001 14.9999"></polygon>
+        <path d="M8.0001,0.9999 C11.8661,0.9999 15.0001,4.1349 15.0001,7.9999 C15.0001,11.8659 11.8661,14.9999 8.0001,14.9999 C4.1341,14.9999 1.0001,11.8659 1.0001,7.9999 C1.0001,4.1349 4.1341,0.9999 8.0001,0.9999 Z M8.5001,6.5459 L7.5001,6.5459 L7.5001,11.9999 L8.5001,11.9999 L8.5001,6.5459 Z M8.0001,3.9999 C7.6681,3.9999 7.4001,4.2679 7.4001,4.5999 C7.4001,4.9309 7.6681,5.1999 8.0001,5.1999 C8.3321,5.1999 8.6001,4.9309 8.6001,4.5999 C8.6001,4.2679 8.3321,3.9999 8.0001,3.9999 Z" id="图标-填色" fill="#2468F2"></path>
+    </g>
+</svg>

package/src/icons/status-success.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>状态-成功</title>
+    <g id="状态-成功" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标-提示">
+            <rect id="矩形" stroke="#979797" stroke-width="1.33333333" fill="#D8D8D8" opacity="0" x="0.666666667" y="0.666666667" width="14.6666667" height="14.6666667"></rect>
+            <path d="M7.0286,11.0408 L6.3196,10.3358 L6.3206,10.3348 L4.1896,8.2188 L4.8946,7.5088 L7.0256,9.6258 L11.2526,5.3698 L11.9616,6.0738 L7.0286,11.0408 Z M7.9766,0.999759561 C4.1106,1.0138 0.9866,4.1578 0.999559574,8.0228 C1.0126,11.8898 4.1576,15.0138 8.0236,14.9998469 C11.8896,14.9868 15.0126,11.8428 14.9996404,7.9768 C14.9866,4.1098 11.8426,0.9868 7.9766,0.999759561 L7.9766,0.999759561 Z" id="图标-填色" fill="#0BC280"></path>
+        </g>
+    </g>
+</svg>

package/src/icons/status-warning.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>6.图标/6.提示/异常/面</title>
+    <g id="6.图标/6.提示/异常/面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Clip-2" points="1.0001 1 15 1 15 14.9997 1.0001 14.9997"></polygon>
+        <path d="M8.0001,0.9997 C11.8661,0.9997 15.0001,4.1347 15.0001,7.9997 C15.0001,11.8657 11.8661,14.9997 8.0001,14.9997 C4.1341,14.9997 1.0001,11.8657 1.0001,7.9997 C1.0001,4.1347 4.1341,0.9997 8.0001,0.9997 Z M8.0001,10.7997 C7.6681,10.7997 7.4001,11.0687 7.4001,11.3997 C7.4001,11.7307 7.6681,11.9997 8.0001,11.9997 C8.3321,11.9997 8.6001,11.7307 8.6001,11.3997 C8.6001,11.0687 8.3321,10.7997 8.0001,10.7997 Z M8.5001,3.9997 L7.5001,3.9997 L7.5001,9.4547 L8.5001,9.4547 L8.5001,3.9997 Z" id="形状结合" fill="#FFB200"></path>
+    </g>
+</svg>

package/src/index.tsx

@@ -111,12 +111,14 @@ import './renderers/Form/InputColor';
 import './renderers/Form/ChainedSelect';
 import './renderers/Form/NestedSelect';
 import './renderers/Form/Transfer';
+import './renderers/Form/TransferPicker';
 import './renderers/Form/InputTable';
 import './renderers/Form/Picker';
 import './renderers/Form/IconPicker';
 import './renderers/Form/Formula';
 import './renderers/Form/FieldSet';
 import './renderers/Form/TabsTransfer';
+import './renderers/Form/TabsTransferPicker';
 import './renderers/Form/Group';
 import './renderers/Form/InputGroup';
 import './renderers/Grid';
@@ -133,6 +135,7 @@ import './renderers/PaginationWrapper';
 import './renderers/Panel';
 import './renderers/Plain';
 import './renderers/Property';
+import './renderers/Portlet';
 import './renderers/Spinner';
 import './renderers/Table/index';
 import './renderers/Tabs';

package/src/locale/de-DE.ts

@@ -172,6 +172,8 @@ register('de-DE', {
   'Table.startSort': 'Klicken, um Sortierung zu starten',
   'Table.valueField': 'valueField muss vorhanden sein',
   'Table.index': 'Index',
+  'Table.toggleColumn': 'Spalten anzeigen',
+  'Table.searchFields': 'Abfragefelder setzen',
   'Tag.placeholder': 'Noch kein Tag',
   'Tag.tip': 'Kürzlich verwendetes Tag',
   'Text.add': 'Neu {{label}}',
@@ -179,6 +181,7 @@ register('de-DE', {
   'Transfer.configError': 'Konfigurationsfehler',
   'Transfer.refreshIcon': 'Zum Aktualisieren klicken',
   'Transfer.searchKeyword': 'Stichwörter eingeben',
+  'Transfer.available': 'Verfügbar',
   'Transfer.selectd': 'Ausgewählt',
   'Transfer.selectFromLeft': 'Von links auswählen',
   'Tree.addChild': 'Untergeordnetes Element hinzufügen',
@@ -220,6 +223,7 @@ register('de-DE', {
   'Wizard.saveAndNext': 'Speichern & Weiter',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Wählen Sie ein Jahr',
+  'reload': 'Neu laden',
   'rotate': 'Drehen',
   'Editor.fullscreen': 'Schirmfüllend Modus',
   'Editor.exitFullscreen': 'Zurücktreten Schirmfüllend Modus',

package/src/locale/en-US.ts

@@ -85,6 +85,7 @@ register('en-US', {
   'Excel.placeholder': `Drag 'n' drop excel here, or click to select`,
   'fetchFailed': 'Fetch api failed',
   'File.continueAdd': 'Continue add',
+  'File.downloadTpl': 'Download template',
   'File.dragDrop': `Drag 'n' drop some files here`,
   'File.errorRetry': 'File upload failed, please try again',
   'File.failed': 'Failed files.',
@@ -173,6 +174,8 @@ register('en-US', {
   'Table.startSort': 'Click to start sorting',
   'Table.valueField': 'Must have valueField',
   'Table.index': 'Index',
+  'Table.toggleColumn': 'Display columns',
+  'Table.searchFields': 'Set query fields',
   'Tag.placeholder': 'No tag yet',
   'Tag.tip': 'Recently used tag',
   'Text.add': 'New {{label}}',
@@ -180,6 +183,7 @@ register('en-US', {
   'Transfer.configError': 'Config error',
   'Transfer.refreshIcon': 'Click to refresh',
   'Transfer.searchKeyword': 'Enter keywords',
+  'Transfer.available': 'Available',
   'Transfer.selectd': 'Selected',
   'Transfer.selectFromLeft': 'Select from the left',
   'Tree.addChild': 'Add child',
@@ -221,6 +225,7 @@ register('en-US', {
   'Wizard.saveAndNext': 'Save & Next',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Select a Year',
+  'reload': 'Reload',
   'rotate': 'Rotate',
   'Editor.fullscreen': 'full screen',
   'Editor.exitFullscreen': 'exit fullscreen mode',

package/src/locale/zh-CN.ts

@@ -87,6 +87,7 @@ register('zh-CN', {
   'Excel.placeholder': '拖拽 Excel 到这，或点击上传',
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
+  'File.downloadTpl': '下载模板',
   'File.dragDrop': '将文件拖拽到此处',
   'File.errorRetry': '文件上传失败请重试',
   'File.failed': '失败文件',
@@ -99,7 +100,7 @@ register('zh-CN', {
   'File.start': '开始上传',
   'File.upload': '上传文件',
   'File.uploadFailed': '接口返回错误，请仔细检查',
-  'File.uploading': '文件上传中',
+  'File.uploading': '上传中...',
   'Form.loadOptionsFailed': '加载选项失败，原因：{{reason}}',
   'Form.submit': '提交',
   'Form.title': '表单',
@@ -177,6 +178,8 @@ register('zh-CN', {
   'Table.startSort': '点击开始排序',
   'Table.valueField': '请配置 valueField',
   'Table.index': '序号',
+  'Table.toggleColumn': '显示列',
+  'Table.searchFields': '设置查询字段',
   'Tag.placeholder': '暂无标签',
   'Tag.tip': '最近使用的标签',
   'Text.add': '新增：{{label}}',
@@ -184,8 +187,9 @@ register('zh-CN', {
   'Transfer.configError': '配置错误，选项无法与左侧选项对应',
   'Transfer.refreshIcon': '点击刷新重新加载',
   'Transfer.searchKeyword': '请输入关键字',
-  'Transfer.selectd': '当前选择',
-  'Transfer.selectFromLeft': '请从左侧选择数据',
+  'Transfer.available': '可选项',
+  'Transfer.selectd': '已选项',
+  'Transfer.selectFromLeft': '请选择左侧数据',
   'Tree.addChild': '添加子节点',
   'Tree.addRoot': '添加一级节点',
   'Tree.editNode': '编辑该节点',
@@ -225,6 +229,7 @@ register('zh-CN', {
   'Wizard.saveAndNext': '保存并下一步',
   'year-to-year': '{{from}} 年 - {{to}} 年',
   'Year.placeholder': '请选择年',
+  'reload': '刷新',
   'rotate': '旋转',
   'Editor.fullscreen': '全屏',
   'Editor.exitFullscreen': '退出全屏',

package/src/renderers/Action.tsx

@@ -4,8 +4,14 @@ import {Renderer, RendererProps} from '../factory';
 import {filter} from '../utils/tpl';
 import Button from '../components/Button';
 import pick from 'lodash/pick';
+import omit from 'lodash/omit';
 
 export interface ButtonSchema extends BaseSchema {
+  /**
+   * 主要用于用户行为跟踪里区分是哪个按钮
+   */
+  id?: string;
+
   /**
    * 是否为块状展示，默认为内联。
    */
@@ -139,6 +145,11 @@ export interface ButtonSchema extends BaseSchema {
    * 是否显示loading效果
    */
   loadingOn?: string;
+
+  /**
+   * 自定义事件处理函数
+   */
+  onClick?: string | any;
 }
 
 export interface AjaxActionSchema extends ButtonSchema {
@@ -327,6 +338,7 @@ export type ActionSchema =
   | VanillaAction;
 
 const ActionProps = [
+  'id',
   'dialog',
   'drawer',
   'url',
@@ -565,7 +577,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
   @autobind
   async handleAction(e: React.MouseEvent<any>) {
-    const {onAction, disabled, countDown} = this.props;
+    const {onAction, disabled, countDown, env} = this.props;
+
     // https://reactjs.org/docs/legacy-event-pooling.html
     e.persist();
     let onClick = this.props.onClick;
@@ -587,9 +600,26 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
     e.preventDefault();
     const action = pick(this.props, ActionProps) as ActionSchema;
+    const actionType = action.actionType;
+
+    // ajax 会在 wrapFetcher 里记录，这里再处理就重复了，因此去掉
+    // add 一般是 input-table 之类的，会触发 formItemChange，为了避免重复也去掉
+    if (
+      actionType !== 'ajax' &&
+      actionType !== 'download' &&
+      actionType !== 'add'
+    ) {
+      env?.tracker(
+        {
+          eventType: actionType || this.props.type || 'click',
+          eventData: omit(action, ['type', 'actionType', 'tooltipPlacement'])
+        },
+        this.props
+      );
+    }
 
     // download 是一种 ajax 的简写
-    if (action.actionType === 'download') {
+    if (actionType === 'download') {
       action.actionType = 'ajax';
       const api = normalizeApi((action as AjaxActionSchema).api);
       api.responseType = 'blob';
@@ -793,6 +823,7 @@ export class ActionRenderer extends React.Component<
     return (
       <Action
         {...(rest as any)}
+        env={env}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
         loading={loading}

package/src/renderers/AnchorNav.tsx

@@ -65,6 +65,8 @@ export interface AnchorNavSchema extends BaseSchema {
    * 楼层样式名
    */
   sectionClassName?: SchemaClassName;
+
+  direction?: 'vertical' | 'horizontal';
 }
 
 export interface AnchorNavProps
@@ -148,6 +150,7 @@ export default class AnchorNav extends React.Component<
       className,
       linkClassName,
       sectionClassName,
+      direction,
       sectionRender,
       render,
       data
@@ -187,6 +190,7 @@ export default class AnchorNav extends React.Component<
         sectionClassName={sectionClassName}
         onSelect={this.handleSelect}
         active={this.state.active}
+        direction={direction}
       >
         {children}
       </CAnchorNav>

package/src/renderers/Avatar.tsx

@@ -10,7 +10,11 @@ import {
   SchemaUrlPath
 } from '../Schema';
 import {BadgeSchema, withBadge} from '../components/Badge';
-import {isPureVariable, resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {
+  isPureVariable,
+  resolveVariable,
+  resolveVariableAndFilter
+} from '../utils/tpl-builtin';
 
 /**
  * Avatar 用户头像显示
@@ -102,15 +106,15 @@ export class AvatarField extends React.Component<AvatarProps, object> {
     };
 
     if (isPureVariable(text)) {
-      text = resolveVariable(text, data);
+      text = resolveVariableAndFilter(text, data);
     }
 
     if (isPureVariable(src)) {
-      src = resolveVariable(src, data);
+      src = resolveVariableAndFilter(src, data, '| raw');
     }
 
     if (isPureVariable(icon)) {
-      icon = resolveVariable(icon, data);
+      icon = resolveVariableAndFilter(icon, data);
     }
 
     let avatar = <i className={icon} />;

package/src/renderers/Breadcrumb.tsx

@@ -77,7 +77,11 @@ export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
 
     const crumbItems = items
       ? items
-      : (resolveVariable(source, data) as Array<BreadcrumbItemSchema>);
+      : (resolveVariableAndFilter(
+          source,
+          data,
+          '| raw'
+        ) as Array<BreadcrumbItemSchema>);
 
     const crumbs = crumbItems
       .map<React.ReactNode>((item, index) => (