amis 1.3.5-beta.6 → 1.4.1-echarts-5.3.1

package/src/renderers/Form/Editor.tsx

@@ -118,7 +118,7 @@ export default class EditorControl extends React.Component<EditorProps, any> {
   static defaultProps: Partial<EditorProps> = {
     language: 'javascript',
     editorTheme: 'vs',
-    allowFullscreen: false,
+    allowFullscreen: true,
     options: {
       automaticLayout: true,
       selectOnLineNumbers: true,
@@ -294,26 +294,25 @@ export const availableLanguages = [
   'yaml'
 ];
 
-export const EditorControls: Array<
-  typeof EditorControl
-> = availableLanguages.map((lang: string) => {
-  @FormItem({
-    type: `${lang}-editor`,
-    sizeMutable: false
-  })
-  class EditorControlRenderer extends EditorControl {
-    static lang = lang;
-    static displayName = `${lang[0].toUpperCase()}${lang.substring(
-      1
-    )}EditorControlRenderer`;
-    static defaultProps = {
-      ...EditorControl.defaultProps,
-      language: lang
-    };
-  }
+export const EditorControls: Array<typeof EditorControl> =
+  availableLanguages.map((lang: string) => {
+    @FormItem({
+      type: `${lang}-editor`,
+      sizeMutable: false
+    })
+    class EditorControlRenderer extends EditorControl {
+      static lang = lang;
+      static displayName = `${lang[0].toUpperCase()}${lang.substring(
+        1
+      )}EditorControlRenderer`;
+      static defaultProps = {
+        ...EditorControl.defaultProps,
+        language: lang
+      };
+    }
 
-  return EditorControlRenderer;
-});
+    return EditorControlRenderer;
+  });
 
 @FormItem({
   type: 'js-editor',

package/src/renderers/Form/InputExcel.tsx

@@ -28,6 +28,11 @@ export interface InputExcelControlSchema extends FormBaseControl {
    * 是否包含空内容，主要用于二维数组模式
    */
   includeEmpty: boolean;
+
+  /**
+   * 纯文本模式
+   */
+  plainText: boolean;
 }
 
 export interface ExcelProps
@@ -48,12 +53,15 @@ export default class ExcelControl extends React.PureComponent<
   static defaultProps: Partial<ExcelProps> = {
     allSheets: false,
     parseMode: 'object',
-    includeEmpty: true
+    includeEmpty: true,
+    plainText: true
   };
   state: ExcelControlState = {
     open: false
   };
 
+  ExcelJS: any;
+
   @autobind
   handleDrop(files: File[]) {
     const {allSheets, onChange} = this.props;
@@ -63,6 +71,7 @@ export default class ExcelControl extends React.PureComponent<
     reader.onload = async () => {
       if (reader.result) {
         import('exceljs').then(async (ExcelJS: any) => {
+          this.ExcelJS = ExcelJS;
           const workbook = new ExcelJS.Workbook();
           await workbook.xlsx.load(reader.result);
           if (allSheets) {
@@ -88,7 +97,7 @@ export default class ExcelControl extends React.PureComponent<
    */
   readWorksheet(worksheet: any) {
     const result: any[] = [];
-    const {parseMode} = this.props;
+    const {parseMode, plainText} = this.props;
 
     if (parseMode === 'array') {
       worksheet.eachRow((row: any, rowNumber: number) => {
@@ -107,7 +116,23 @@ export default class ExcelControl extends React.PureComponent<
           const data: any = {};
           row.eachCell((cell: any, colNumber: any) => {
             if (firstRowValues[colNumber]) {
-              data[firstRowValues[colNumber]] = cell.value;
+              let value = cell.value;
+              if (plainText) {
+                const ExcelValueType = this.ExcelJS.ValueType;
+                if (cell.type === ExcelValueType.Hyperlink) {
+                  value = cell.value.hyperlink;
+                } else if (cell.type === ExcelValueType.Formula) {
+                  value = cell.value.result;
+                } else if (cell.type === ExcelValueType.RichText) {
+                  value = cell.value.richText
+                    .map((item: any) => item.text)
+                    .join('');
+                } else if (cell.type === ExcelValueType.Error) {
+                  value = '';
+                }
+              }
+
+              data[firstRowValues[colNumber]] = value;
             }
           });
           result.push(data);

package/src/renderers/Form/InputImage.tsx

@@ -110,6 +110,16 @@ export interface ImageControlSchema extends FormBaseControl {
         scalable?: boolean;
       };
 
+  /**
+   * 裁剪后的图片类型
+   */
+  cropFormat?: string;
+
+  /**
+   * 裁剪后的质量
+   */
+  cropQuality?: number;
+
   /**
    * 是否允许二次裁剪。
    */
@@ -862,14 +872,19 @@ export default class ImageControl extends React.Component<
   }
 
   handleCrop() {
-    this.cropper.getCroppedCanvas().toBlob((file: File) => {
-      this.addFiles([file]);
-      this.setState({
-        cropFile: undefined,
-        locked: false,
-        lockedReason: ''
-      });
-    });
+    const {cropFormat, cropQuality} = this.props;
+    this.cropper.getCroppedCanvas().toBlob(
+      (file: File) => {
+        this.addFiles([file]);
+        this.setState({
+          cropFile: undefined,
+          locked: false,
+          lockedReason: ''
+        });
+      },
+      cropFormat || 'image/png',
+      cropQuality || 1
+    );
   }
 
   cancelCrop() {

package/src/renderers/Form/InputTable.tsx

@@ -30,6 +30,26 @@ export interface TableControlSchema
    */
   addable?: boolean;
 
+  /**
+   * 可复制新增
+   */
+  copyable?: boolean;
+
+  /**
+   * 复制按钮文字
+   */
+  copyBtnLabel?: string;
+
+  /**
+   * 复制按钮图标
+   */
+  copyBtnIcon?: string;
+
+  /**
+   * 是否显示复制按钮
+   */
+  copyAddBtn?: boolean;
+
   /**
    * 是否可以拖拽排序
    */
@@ -41,12 +61,12 @@ export interface TableControlSchema
   addApi?: SchemaApi;
 
   /**
-   * 新增按钮
+   * 新增按钮文字
    */
   addBtnLabel?: string;
 
   /**
-   * 新增图标
+   * 新增按钮图标
    */
   addBtnIcon?: string;
 
@@ -73,12 +93,12 @@ export interface TableControlSchema
   /**
    * 更新按钮名称
    */
-  updateBtnLabel?: string;
+  editBtnLabel?: string;
 
   /**
    * 更新按钮图标
    */
-  updateBtnIcon?: string;
+  editBtnIcon?: string;
 
   /**
    * 确认按钮文字
@@ -172,7 +192,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     placeholder: '空',
     scaffold: {},
     addBtnIcon: 'plus',
-    updateBtnIcon: 'pencil',
+    copyBtnIcon: 'copy',
+    editBtnIcon: 'pencil',
     deleteBtnIcon: 'minus',
     confirmBtnIcon: 'check',
     cancelBtnIcon: 'close',
@@ -188,6 +209,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     'showAddBtn',
     'addable',
     'removable',
+    'copyable',
     'editable',
     'addApi',
     'updateApi',
@@ -423,6 +445,26 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     return onAction && onAction(action, ctx, ...rest);
   }
 
+  copyItem(index: number) {
+    const {needConfirm} = this.props;
+    const items = this.state.items.concat();
+
+    items.splice(index + 1, 0, items[index]);
+    index = Math.min(index + 1, items.length - 1);
+    this.setState(
+      {
+        items
+      },
+      () => {
+        if (needConfirm === false) {
+          this.emitValue();
+        } else {
+          this.startEdit(index, true);
+        }
+      }
+    );
+  }
+
   addItem(index: number) {
     const {needConfirm, scaffold, columns} = this.props;
     const items = this.state.items.concat();
@@ -653,6 +695,38 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       });
     }
 
+    if (props.copyable && props.showCopyBtn !== false) {
+      btns.push({
+        children: ({
+          key,
+          rowIndex,
+          offset
+        }: {
+          key: any;
+          rowIndex: number;
+          offset: number;
+        }) =>
+          ~this.state.editIndex && needConfirm !== false ? null : (
+            <Button
+              classPrefix={ns}
+              size="sm"
+              key={key}
+              level="link"
+              tooltip={__('Table.copyRow')}
+              tooltipContainer={
+                env && env.getModalContainer ? env.getModalContainer : undefined
+              }
+              onClick={this.copyItem.bind(this, rowIndex + offset, undefined)}
+            >
+              {props.copyBtnLabel ? <span>{props.copyBtnLabel}</span> : null}
+              {props.copyBtnIcon ? (
+                <Icon icon={props.copyBtnIcon} className="icon" />
+              ) : null}
+            </Button>
+          )
+      });
+    }
+
     if (props.needConfirm === false) {
       columns = columns.map(column => {
         const quickEdit = column.quickEdit;
@@ -716,11 +790,16 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 }
                 onClick={() => this.startEdit(rowIndex + offset)}
               >
-                {props.updateBtnLabel ? (
-                  <span>{props.updateBtnLabel}</span>
+                {props.updateBtnLabel || props.editBtnLabel ? (
+                  <span>{props.updateBtnLabel || props.editBtnLabel}</span>
                 ) : null}
-                {props.updateBtnIcon ? (
-                  <Icon icon={props.updateBtnIcon} className="icon" />
+                {/* 兼容之前的写法 */}
+                {typeof props.updateBtnIcon !== 'undefined' ? (
+                  props.updateBtnIcon ? (
+                    <Icon icon={props.updateBtnIcon} className="icon" />
+                  ) : null
+                ) : props.editBtnIcon ? (
+                  <Icon icon={props.editBtnIcon} className="icon" />
                 ) : null}
               </Button>
             )

package/src/renderers/Json.tsx

@@ -97,6 +97,15 @@ export class JSONField extends React.Component<JSONProps, object> {
       }
     }
 
+    let jsonThemeValue = jsonTheme;
+    if (isPureVariable(jsonTheme)) {
+      jsonThemeValue = resolveVariableAndFilter(
+        jsonTheme,
+        this.props.data,
+        '| raw'
+      );
+    }
+
     // JsonView 只支持对象，所以不是对象格式需要转成对象格式。
     if (data && ~['string', 'number'].indexOf(typeof data)) {
       data = {
@@ -112,7 +121,7 @@ export class JSONField extends React.Component<JSONProps, object> {
           <JsonView
             name={false}
             src={data}
-            theme={(jsonTheme as any) ?? 'rjv-default'}
+            theme={(jsonThemeValue as any) ?? 'rjv-default'}
             shouldCollapse={this.shouldExpandNode}
             enableClipboard={false}
             iconStyle="square"

package/src/renderers/Nav.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import Sortable from 'sortablejs';
 import {Renderer, RendererEnv, RendererProps} from '../factory';
 import getExprProperties from '../utils/filter-schema';
 import {filter, evalExpression} from '../utils/tpl';
 import {
+  guid,
   autobind,
   createObject,
   findTree,
@@ -22,6 +24,9 @@ import {
 } from '../components/WithRemoteConfig';
 import {Payload} from '../types';
 import Spinner from '../components/Spinner';
+import cloneDeep from 'lodash/cloneDeep';
+import {isEffectiveApi} from '../utils/api';
+import {Badge, BadgeSchema} from '../components/Badge';
 
 export type NavItemSchema = {
   /**
@@ -45,6 +50,11 @@ export type NavItemSchema = {
   deferApi?: SchemaApi;
 
   children?: Array<NavItemSchema>;
+
+  /**
+   * 角标
+   */
+  badge?: BadgeSchema
 } & Omit<BaseSchema, 'type'>;
 
 /**
@@ -81,6 +91,26 @@ export interface NavSchema extends BaseSchema {
    * true 为垂直排列，false 为水平排列类似如 tabs。
    */
   stacked?: boolean;
+
+  /**
+   * 更多操作菜单列表
+   */
+   itemActions?: SchemaCollection;
+
+  /**
+   * 可拖拽
+   */
+   draggable?: boolean;
+
+   /**
+    * 保存排序的 api
+    */
+  saveOrderApi?: SchemaApi;
+
+  /**
+   * 角标
+   */
+   badge?: BadgeSchema;
 }
 
 export interface Link {
@@ -97,6 +127,7 @@ export interface Link {
   loading?: boolean;
   loaded?: boolean;
   [propName: string]: any;
+  badge?: BadgeSchema
 }
 export interface Links extends Array<Link> {}
 
@@ -113,7 +144,9 @@ export interface NavigationProps
   togglerClassName?: string;
   links?: Array<Link>;
   loading?: boolean;
-  render: RendererProps['render']
+  render: RendererProps['render'];
+  env: RendererEnv;
+  reload?: any;
 }
 
 export class Navigation extends React.Component<
@@ -123,6 +156,9 @@ export class Navigation extends React.Component<
   static defaultProps = {
     indentSize: 24
   };
+  sortable: Sortable[] = [];
+  id: string;
+  dragRef?: HTMLElement;
 
   @autobind
   handleClick(link: Link) {
@@ -134,15 +170,85 @@ export class Navigation extends React.Component<
     this.props.onToggle?.(target);
   }
 
+  @autobind
+  dragRefFn(ref: any) {
+    const {draggable} = this.props;
+    if (ref && draggable) {
+      this.id = guid();
+      this.initDragging(ref);
+    }
+  }
+
+  initDragging(ref: HTMLElement) {
+    const ns = this.props.classPrefix;
+    this.sortable.push(new Sortable(
+      ref,
+      {
+        group: `nav-${this.id}`,
+        animation: 150,
+        handle: `.${ns}Nav-itemDrager`,
+        ghostClass: `${ns}Nav-item--dragging`,
+        onEnd: async (e: any) => {
+          // 没有移动
+          if (e.newIndex === e.oldIndex) {
+            return;
+          }
+          const id = e.item.getAttribute('data-id');
+          const parentNode = e.to
+          if (
+            e.newIndex < e.oldIndex &&
+            e.oldIndex < parentNode.childNodes.length - 1
+          ) {
+            parentNode.insertBefore(e.item, parentNode.childNodes[e.oldIndex + 1]);
+          } else if (e.oldIndex < parentNode.childNodes.length - 1) {
+            parentNode.insertBefore(e.item, parentNode.childNodes[e.oldIndex]);
+          } else {
+            parentNode.appendChild(e.item);
+          }
+          const links = cloneDeep(this.props.links) as Link[];
+          let parent = links;
+          someTree(links, (item: Link, key, level, paths: Link[]) => {
+            if (item.id === id) {
+              const len = paths.length - 1;
+              parent = (~len ? paths[len].children : links) as Link[];
+              return true;
+            }
+            return false;
+          });
+          parent.splice(e.newIndex, 0, parent.splice(e.oldIndex, 1)[0]);
+          const {saveOrderApi, env} = this.props;
+          if (saveOrderApi && isEffectiveApi(saveOrderApi)) {
+            await env.fetcher(saveOrderApi as SchemaApi, {data: links}, {method: 'post'});
+            this.props.reload();
+          } else {
+            console.warn('请配置saveOrderApi');
+          }
+        }
+      }
+    ));
+  }
+
   renderItem(link: Link, index: number, depth = 1) {
     if (link.hidden === true || link.visible === false) {
       return null;
     }
     const isActive: boolean = !!link.active;
-    const {disabled, togglerClassName, classnames: cx, indentSize} = this.props;
+    const {
+      disabled,
+      togglerClassName,
+      classnames: cx,
+      indentSize,
+      render,
+      itemActions,
+      draggable,
+      links,
+      badge: defaultBadge
+    } = this.props;
     const hasSub =
       (link.defer && !link.loaded) || (link.children && link.children.length);
-
+    const id = guid();
+    link.id = id;
+    const badge = defaultBadge ? Object.assign(defaultBadge, link.badge) : link.badge;
     return (
       <li
         key={index}
@@ -152,42 +258,62 @@ export class Navigation extends React.Component<
           'is-unfolded': link.unfolded,
           'has-sub': hasSub
         })}
+        data-id={id}
       >
-        <a
-          onClick={this.handleClick.bind(this, link)}
-          style={{paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)}}
-        >
-          {generateIcon(cx, link.icon, 'Nav-itemIcon')}
+        <Badge classnames={cx} badge={badge} data={link}>
+          <a
+            onClick={this.handleClick.bind(this, link)}
+            style={{paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)}}
+          >
+            {!disabled && draggable && links && links.length > 1 ? (
+            <div className={cx('Nav-itemDrager')} >
+              <a
+                key="drag"
+                data-position="bottom"
+              >
+                <Icon icon="drag-bar" className="icon" />
+              </a>
+            </div>
+          ) : null}
+            {link.loading ? (
+              <Spinner
+                size="sm"
+                show
+                icon="reload"
+                spinnerClassName={cx('Nav-spinner')}
+              />
+            ) : hasSub ? (
+              <span
+                onClick={() => this.toggleLink(link)}
+                className={cx('Nav-itemToggler', togglerClassName)}
+              >
+                <Icon icon="caret" className="icon" />
+              </span>
+            ) : null}
+            {generateIcon(cx, link.icon, 'Nav-itemIcon')}
+            {
+              link.label && (typeof link.label === 'string'
+              ? link.label
+              : render('inline', link.label as SchemaCollection))
+            }
+          </a>
           {
-            link.label && (typeof link.label === 'string'
-            ? link.label
-            : this.props.render('inline', link.label as SchemaCollection))
+            // 更多操作
+            itemActions
+            ? <div className={cx('Nav-item-atcions')}>
+              {
+                render('inline', itemActions, {data: link})
+              }
+            </div> : null
           }
-        </a>
-
-        {link.loading ? (
-          <Spinner
-            size="sm"
-            show
-            icon="reload"
-            spinnerClassName={cx('Nav-spinner')}
-          />
-        ) : hasSub ? (
-          <span
-            onClick={() => this.toggleLink(link)}
-            className={cx('Nav-itemToggler', togglerClassName)}
-          >
-            <Icon icon="caret" className="icon" />
-          </span>
-        ) : null}
-
-        {Array.isArray(link.children) && link.children.length ? (
-          <ul className={cx('Nav-subItems')}>
-            {link.children.map((link, index) =>
-              this.renderItem(link, index, depth + 1)
-            )}
-          </ul>
-        ) : null}
+          {Array.isArray(link.children) && link.children.length ? (
+            <ul className={cx('Nav-subItems')} ref={this.dragRefFn}>
+              {link.children.map((link, index) =>
+                this.renderItem(link, index, depth + 1)
+              )}
+            </ul>
+          ) : null}
+        </Badge>
       </li>
     );
   }
@@ -198,6 +324,7 @@ export class Navigation extends React.Component<
     return (
       <ul
         className={cx('Nav', className, stacked ? 'Nav--stacked' : 'Nav--tabs')}
+        ref={this.dragRefFn}
       >
         {Array.isArray(links)
           ? links.map((item, index) => this.renderItem(item, index))
@@ -310,6 +437,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
         data?: any;
         unfoldedField?: string;
         foldedField?: string;
+        reload?: any;
       }
   > {
     constructor(props: any) {
@@ -442,6 +570,7 @@ export class NavigationRenderer extends React.Component<RendererProps> {
     return (
       <ConditionBuilderWithRemoteOptions
         {...rest}
+        reload={this.reload}
         remoteConfigRef={this.remoteConfigRef}
       />
     );

package/src/renderers/Page.tsx

@@ -371,6 +371,8 @@ export default class Page extends React.Component<PageProps> {
       JSON.stringify(props.cssVars) !== JSON.stringify(prevProps.cssVars)
     ) {
       this.updateVarStyle();
+    } else if (props.defaultData !== prevProps.defaultData) {
+      store.reInitData(props.defaultData);
     }
   }
 
@@ -663,7 +665,7 @@ export default class Page extends React.Component<PageProps> {
       onAction: this.handleAction,
       onQuery: initApi ? this.handleQuery : undefined,
       onChange: this.handleChange,
-      loading: store.loading
+      pageLoading: store.loading
     };
 
     const hasAside = Array.isArray(regions)