amis 1.2.4-beta.10 → 1.2.4-beta.11

package/src/components/icons.tsx

@@ -149,6 +149,9 @@ import ExpandAltIcon from '../icons/expand-alt.svg';
 // @ts-ignore
 import CompressAltIcon from '../icons/compress-alt.svg';
 
+// @ts-ignore
+import TransparentIcon from '../icons/transparent.svg';
+
 // 兼容原来的用法，后续不直接试用。
 // @ts-ignore
 export const closeIcon = <CloseIcon />;
@@ -245,6 +248,7 @@ registerIcon('plus-cicle', PlusCicleIcon);
 registerIcon('ellipsis-v', EllipsisVIcon);
 registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
+registerIcon('transparent', TransparentIcon);
 
 export function Icon({
   icon,

package/src/locale/de-DE.ts

@@ -4,6 +4,8 @@ register('de-DE', {
   'Action.countDown': '${timeLeft} warten',
   'Alert.info': 'Systeminformationen',
   'asc': 'Aufsteigend',
+  'App.home': 'Startseite',
+  'App.navigation': 'Navigation',
   'cancel': 'Abbrechen',
   'Card.dragTip': 'Obere Schaltfläche zum Sortieren ziehen',
   'Card.toggleDrag': 'Zum Sortieren umschalten',

package/src/locale/en-US.ts

@@ -3,6 +3,8 @@ import {register} from '../locale';
 register('en-US', {
   'Action.countDown': 'Wait for ${timeLeft}s',
   'Alert.info': 'System Info',
+  'App.home': 'Home',
+  'App.navigation': 'Navigation',
   'asc': 'Asc',
   'cancel': 'Cancel',
   'Card.dragTip': 'Drag top button to sort',

package/src/locale/zh-CN.ts

@@ -3,6 +3,8 @@ import {register} from '../locale';
 register('zh-CN', {
   'Action.countDown': '请等待 ${timeLeft} 秒',
   'Alert.info': '系统消息',
+  'App.home': '首页',
+  'App.navigation': '导航',
   'asc': '正序',
   'cancel': '取消',
   'Card.dragTip': '请拖动顶部的按钮进行排序',

package/src/renderers/Form/InputImage.tsx

@@ -370,7 +370,7 @@ export default class ImageControl extends React.Component<
     file: any;
     executor: () => void;
   }> = [];
-  cropper = React.createRef<Cropper>();
+  cropper: Cropper;
   dropzone = React.createRef<any>();
   frameImageRef = React.createRef<any>();
   current: FileValue | FileX | null = null;
@@ -512,8 +512,8 @@ export default class ImageControl extends React.Component<
         guides: true,
         dragMode: 'move',
         viewMode: 1,
-        rotatable: false,
-        scalable: false,
+        rotatable: true,
+        scalable: true,
         ...crop
       };
     }
@@ -862,7 +862,7 @@ export default class ImageControl extends React.Component<
   }
 
   handleCrop() {
-    this.cropper.current!.getCroppedCanvas().toBlob((file: File) => {
+    this.cropper.getCroppedCanvas().toBlob((file: File) => {
       this.addFiles([file]);
       this.setState({
         cropFile: undefined,
@@ -884,7 +884,7 @@ export default class ImageControl extends React.Component<
   }
 
   rotatableCrop() {
-    this.cropper.current!.rotate(90);
+    this.cropper.rotate(45);
   }
 
   addFiles(files: Array<FileX>) {
@@ -1211,7 +1211,13 @@ export default class ImageControl extends React.Component<
         {cropFile ? (
           <div className={cx('ImageControl-cropperWrapper')}>
             <Suspense fallback={<div>...</div>}>
-              <Cropper {...crop} ref={this.cropper} src={cropFile.preview} />
+              <Cropper
+                {...crop}
+                onInitialized={instance => {
+                  this.cropper = instance;
+                }}
+                src={cropFile.preview}
+              />
             </Suspense>
             <div className={cx('ImageControl-croperToolbar')}>
               {crop.rotatable && (

package/src/renderers/Form/InputTree.tsx

@@ -56,6 +56,21 @@ export interface TreeControlSchema extends FormOptionsControl {
    */
   rootCreatable?: boolean;
 
+  /**
+   * 是否开启节点路径模式
+   */
+  enableNodePath?: boolean;
+
+  /**
+   * 开启节点路径模式后，节点路径的分隔符
+   */
+  pathSeparator?: string;
+
+  /**
+   * 是否显示展开线
+   */
+  showOutline?: boolean;
+
   deferApi?: SchemaApi;
 }
 
@@ -68,7 +83,10 @@ export interface TreeProps
       | 'className'
       | 'inputClassName'
       | 'descriptionClassName'
-    > {}
+    > {
+  enableNodePath?: boolean;
+  pathSeparator?: string;
+}
 
 export default class TreeControl extends React.Component<TreeProps> {
   static defaultProps: Partial<TreeProps> = {
@@ -76,7 +94,9 @@ export default class TreeControl extends React.Component<TreeProps> {
     multiple: false,
     rootLabel: '顶级',
     rootValue: '',
-    showIcon: true
+    showIcon: true,
+    enableNodePath: false,
+    pathSeparator: '/'
   };
 
   reload() {
@@ -90,6 +110,8 @@ export default class TreeControl extends React.Component<TreeProps> {
       treeContainerClassName,
       classPrefix: ns,
       value,
+      enableNodePath,
+      pathSeparator = '/',
       onChange,
       disabled,
       joinValues,
@@ -125,7 +147,9 @@ export default class TreeControl extends React.Component<TreeProps> {
       rootCreatable,
       rootCreateTip,
       labelField,
+      nodePath,
       deferLoad,
+      expandTreeOptions,
       translate: __
     } = this.props;
 
@@ -160,6 +184,9 @@ export default class TreeControl extends React.Component<TreeProps> {
             cascade={cascade}
             foldedField="collapsed"
             value={value || ''}
+            nodePath={nodePath}
+            enableNodePath={enableNodePath}
+            pathSeparator={pathSeparator}
             selfDisabledAffectChildren={false}
             onAdd={onAdd}
             creatable={creatable}
@@ -174,6 +201,7 @@ export default class TreeControl extends React.Component<TreeProps> {
             onDelete={onDelete}
             bultinCUD={!addControls && !editControls}
             onDeferLoad={deferLoad}
+            onExpandTree={expandTreeOptions}
           />
         )}
       </div>

package/src/renderers/Form/NestedSelect.tsx

@@ -39,12 +39,18 @@ export interface NestedSelectControlSchema extends FormOptionsControl {
    * 弹框的 css 类
    */
   menuClassName?: string;
+
+  /**
+   * 是否隐藏选择框中已选中节点的祖先节点的文本信息
+   */
+  hideNodePathLabel?: boolean;
 }
 
 export interface NestedSelectProps extends OptionsControlProps {
   cascade?: boolean;
   noResultsText?: string;
   withChildren?: boolean;
+  hideNodePathLabel?: boolean;
 }
 
 export interface NestedSelectState {
@@ -64,7 +70,8 @@ export default class NestedSelectControl extends React.Component<
     searchPromptText: 'Select.searchPromptText',
     noResultsText: 'noResult',
     checkAll: true,
-    checkAllLabel: '全选'
+    checkAllLabel: '全选',
+    hideNodePathLabel: false
   };
   target: any;
   input: HTMLInputElement;
@@ -134,7 +141,11 @@ export default class NestedSelectControl extends React.Component<
 
   @autobind
   renderValue(item: Option, key?: any) {
-    const {classnames: cx, labelField, options} = this.props;
+    const {classnames: cx, labelField, options, hideNodePathLabel} = this.props;
+
+    if (hideNodePathLabel) {
+      return item[labelField || 'label'];
+    }
     const ancestors = getTreeAncestors(options, item, true);
 
     return (
@@ -561,7 +572,8 @@ export default class NestedSelectControl extends React.Component<
       selectedOptions,
       clearable,
       loading,
-      borderMode
+      borderMode,
+      hideNodePathLabel
     } = this.props;
 
     return (

package/src/renderers/Form/Options.tsx

@@ -14,7 +14,8 @@ import {
   findTreeIndex,
   getTree,
   isEmpty,
-  getTreeAncestors
+  getTreeAncestors,
+  normalizeNodePath
 } from '../../utils/helper';
 import {reaction} from 'mobx';
 import {
@@ -203,6 +204,7 @@ export interface OptionsControlProps
   setLoading: (value: boolean) => void;
   reloadOptions: (setError?: boolean) => void;
   deferLoad: (option: Option) => void;
+  expandTreeOptions: (nodePathArr: any[]) => void;
   onAdd?: (
     idx?: number | Array<number>,
     value?: any,
@@ -478,6 +480,8 @@ export function registerOptionsControl(config: OptionsConfig) {
         multiple,
         formItem,
         valueField,
+        enableNodePath,
+        pathSeparator,
         onChange
       } = this.props;
 
@@ -704,7 +708,6 @@ export function registerOptionsControl(config: OptionsConfig) {
     @autobind
     deferLoad(option: Option) {
       const {deferApi, source, env, formItem, data} = this.props;
-
       const api = option.deferApi || deferApi || source;
 
       if (!api) {
@@ -718,6 +721,22 @@ export function registerOptionsControl(config: OptionsConfig) {
       formItem?.deferLoadOptions(option, api, createObject(data, option));
     }
 
+    @autobind
+    expandTreeOptions(nodePathArr: any[]) {
+      const {deferApi, source, env, formItem, data} = this.props;
+      const api = deferApi || source;
+
+      if (!api) {
+        env.notify(
+          'error',
+          '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
+        );
+        return;
+      }
+
+      formItem?.expandTreeOptions(nodePathArr, api, createObject(data));
+    }
+
     @autobind
     async initOptions(data: any) {
       await this.reloadOptions(false, true);
@@ -1070,9 +1089,23 @@ export function registerOptionsControl(config: OptionsConfig) {
         deleteApi,
         creatable,
         editable,
-        removable
+        removable,
+        enableNodePath,
+        pathSeparator,
+        delimiter = ',',
+        labelField = 'label',
+        valueField = 'value'
       } = this.props;
 
+      const {nodePathArray, nodeValueArray} = normalizeNodePath(
+        value,
+        enableNodePath,
+        labelField,
+        valueField,
+        pathSeparator,
+        delimiter
+      );
+
       return (
         <Control
           {...this.props}
@@ -1080,13 +1113,22 @@ export function registerOptionsControl(config: OptionsConfig) {
           options={formItem ? formItem.filteredOptions : []}
           onToggle={this.handleToggle}
           onToggleAll={this.handleToggleAll}
-          selectedOptions={formItem ? formItem.getSelectedOptions(value) : []}
+          selectedOptions={
+            formItem
+              ? formItem.getSelectedOptions(
+                  value,
+                  enableNodePath ? nodeValueArray : undefined
+                )
+              : []
+          }
+          nodePath={nodePathArray}
           loading={formItem ? formItem.loading : false}
           setLoading={this.setLoading}
           setOptions={this.setOptions}
           syncOptions={this.syncOptions}
           reloadOptions={this.reload}
           deferLoad={this.deferLoad}
+          expandTreeOptions={this.expandTreeOptions}
           creatable={
             creatable !== false && isEffectiveApi(addApi) ? true : creatable
           }

package/src/renderers/Form/TreeSelect.tsx

@@ -67,11 +67,29 @@ export interface TreeSelectControlSchema extends FormOptionsControl {
    * 顶级节点是否可以创建子节点
    */
   rootCreatable?: boolean;
+
+  /**
+   * 是否隐藏选择框中已选中节点的祖先节点的文本信息
+   */
+  hideNodePathLabel?: boolean;
+
+  /**
+   * 是否开启节点路径模式
+   */
+  enableNodePath?: boolean;
+
+  /**
+   * 开启节点路径模式后，节点路径的分隔符
+   */
+  pathSeparator?: string;
 }
 
 export interface TreeSelectProps extends OptionsControlProps {
   placeholder?: any;
   autoComplete?: Api;
+  hideNodePathLabel?: boolean;
+  enableNodePath?: boolean;
+  pathSeparator?: string;
 }
 
 export interface TreeSelectState {
@@ -95,7 +113,10 @@ export default class TreeSelectControl extends React.Component<
     joinValues: true,
     extractValue: false,
     delimiter: ',',
-    resetValue: ''
+    resetValue: '',
+    hideNodePathLabel: false,
+    enableNodePath: false,
+    pathSeparator: '/'
   };
 
   container: React.RefObject<HTMLDivElement> = React.createRef();
@@ -411,7 +432,11 @@ export default class TreeSelectControl extends React.Component<
 
   @autobind
   renderItem(item: Option) {
-    const {labelField, options} = this.props;
+    const {labelField, options, hideNodePathLabel} = this.props;
+
+    if (hideNodePathLabel) {
+      return item[labelField || 'label'];
+    }
 
     // 将所有祖先节点也展现出来
     const ancestors = getTreeAncestors(options, item, true);
@@ -425,6 +450,8 @@ export default class TreeSelectControl extends React.Component<
   renderOuter() {
     const {
       value,
+      enableNodePath,
+      pathSeparator = '/',
       disabled,
       joinValues,
       extractValue,
@@ -450,8 +477,10 @@ export default class TreeSelectControl extends React.Component<
       maxLength,
       minLength,
       labelField,
+      nodePath,
       translate: __,
-      deferLoad
+      deferLoad,
+      expandTreeOptions
     } = this.props;
 
     let filtedOptions =
@@ -499,9 +528,13 @@ export default class TreeSelectControl extends React.Component<
             foldedField="collapsed"
             hideRoot
             value={value || ''}
+            nodePath={nodePath}
+            enableNodePath={enableNodePath}
+            pathSeparator={pathSeparator}
             maxLength={maxLength}
             minLength={minLength}
             onDeferLoad={deferLoad}
+            onExpandTree={expandTreeOptions}
           />
         </PopOver>
       </Overlay>

package/src/renderers/Table/index.tsx

@@ -1967,53 +1967,57 @@ export default class Table extends React.Component<TableProps, object> {
 
                 const type = (column as BaseSchema).type || 'plain';
                 if (type === 'image') {
-                  const imageData = await toDataURL(value);
-                  const imageDimensions = await getImageDimensions(imageData);
-                  let imageWidth = imageDimensions.width;
-                  let imageHeight = imageDimensions.height;
-                  // 限制一下图片高宽
-                  const imageMaxSize = 100;
-                  if (imageWidth > imageHeight) {
-                    if (imageWidth > imageMaxSize) {
-                      imageHeight = (imageMaxSize * imageHeight) / imageWidth;
-                      imageWidth = imageMaxSize;
+                  try {
+                    const imageData = await toDataURL(value);
+                    const imageDimensions = await getImageDimensions(imageData);
+                    let imageWidth = imageDimensions.width;
+                    let imageHeight = imageDimensions.height;
+                    // 限制一下图片高宽
+                    const imageMaxSize = 100;
+                    if (imageWidth > imageHeight) {
+                      if (imageWidth > imageMaxSize) {
+                        imageHeight = (imageMaxSize * imageHeight) / imageWidth;
+                        imageWidth = imageMaxSize;
+                      }
+                    } else {
+                      if (imageHeight > imageMaxSize) {
+                        imageWidth = (imageMaxSize * imageWidth) / imageHeight;
+                        imageHeight = imageMaxSize;
+                      }
                     }
-                  } else {
-                    if (imageHeight > imageMaxSize) {
-                      imageWidth = (imageMaxSize * imageWidth) / imageHeight;
-                      imageHeight = imageMaxSize;
+                    const imageMatch = imageData.match(/data:image\/(.*);/);
+                    let imageExt = 'png';
+                    if (imageMatch) {
+                      imageExt = imageMatch[1];
                     }
-                  }
-                  const imageMatch = imageData.match(/data:image\/(.*);/);
-                  let imageExt = 'png';
-                  if (imageMatch) {
-                    imageExt = imageMatch[1];
-                  }
-                  // 目前 excel 只支持这些格式，所以其它格式直接输出 url
-                  if (
-                    imageExt != 'png' &&
-                    imageExt != 'jpeg' &&
-                    imageExt != 'gif'
-                  ) {
-                    sheetRow.getCell(columIndex).value = value;
-                    continue;
-                  }
-                  const imageId = workbook.addImage({
-                    base64: imageData,
-                    extension: imageExt
-                  });
-                  const linkURL = getAbsoluteUrl(value);
-                  worksheet.addImage(imageId, {
-                    // 这里坐标位置是从 0 开始的，所以要减一
-                    tl: {col: columIndex - 1, row: rowIndex - 1},
-                    ext: {
-                      width: imageWidth,
-                      height: imageHeight
-                    },
-                    hyperlinks: {
-                      tooltip: linkURL
+                    // 目前 excel 只支持这些格式，所以其它格式直接输出 url
+                    if (
+                      imageExt != 'png' &&
+                      imageExt != 'jpeg' &&
+                      imageExt != 'gif'
+                    ) {
+                      sheetRow.getCell(columIndex).value = value;
+                      continue;
                     }
-                  });
+                    const imageId = workbook.addImage({
+                      base64: imageData,
+                      extension: imageExt
+                    });
+                    const linkURL = getAbsoluteUrl(value);
+                    worksheet.addImage(imageId, {
+                      // 这里坐标位置是从 0 开始的，所以要减一
+                      tl: {col: columIndex - 1, row: rowIndex - 1},
+                      ext: {
+                        width: imageWidth,
+                        height: imageHeight
+                      },
+                      hyperlinks: {
+                        tooltip: linkURL
+                      }
+                    });
+                  } catch (e) {
+                    console.warn(e.stack);
+                  }
                 } else if (type == 'link') {
                   const linkURL = getAbsoluteUrl(value);
                   sheetRow.getCell(columIndex).value = {