amis 1.6.5-beta.3 → 1.8.0-beta.0

package/src/renderers/Form/InputFile.tsx

@@ -5,7 +5,7 @@ import isPlainObject from 'lodash/isPlainObject';
 // @ts-ignore
 import mapLimit from 'async/mapLimit';
 import ImageControl from './InputImage';
-import {Payload, ApiObject, ApiString} from '../../types';
+import {Payload, ApiObject, ApiString, Action} from '../../types';
 import {filter} from '../../utils/tpl';
 import Alert from '../../components/Alert2';
 import {qsstringify, createObject, guid, isEmpty} from '../../utils/helper';
@@ -17,6 +17,7 @@ import {
 } from '../../utils/api';
 import Button from '../../components/Button';
 import {Icon} from '../../components/icons';
+import TooltipWrapper from '../../components/TooltipWrapper';
 import DropZone from 'react-dropzone';
 import {FileRejection} from 'react-dropzone';
 import {dataMapping} from '../../utils/tpl-builtin';
@@ -213,6 +214,11 @@ export interface FileControlSchema extends FormBaseControl {
     uploaded: string;
     ready: string;
   };
+
+  /**
+   * 是否为拖拽上传
+   */
+  drag?: boolean;
 }
 
 export interface FileProps
@@ -275,6 +281,8 @@ export function getNameFromUrl(url: string) {
 
   return url;
 }
+export type InputFileRendererEvent = 'change' | 'success' | 'fail' | 'remove';
+export type InputFileRendererAction = 'clear';
 
 export default class FileControl extends React.Component<FileProps, FileState> {
   static defaultProps: Partial<FileProps> = {
@@ -305,7 +313,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       uploaded: '已上传',
       ready: ''
     },
-    asBase64: false
+    asBase64: false,
+    drag: false
   };
 
   state: FileState;
@@ -476,13 +485,13 @@ export default class FileControl extends React.Component<FileProps, FileState> {
 
     [].slice.call(files, 0, allowed).forEach((file: FileX) => {
       if (maxSize && file.size > maxSize) {
-        this.props.env.alert(
-          __('File.maxSize', {
-            filename: file[nameField as keyof typeof file] || file.name,
-            actualSize: ImageControl.formatFileSize(file.size),
-            maxSize: ImageControl.formatFileSize(maxSize)
-          })
-        );
+        // this.props.env.alert(
+        //   __('File.maxSize', {
+        //     filename: file[nameField as keyof typeof file] || file.name,
+        //     actualSize: ImageControl.formatFileSize(file.size),
+        //     maxSize: ImageControl.formatFileSize(maxSize)
+        //   })
+        // );
         file.state = 'invalid';
       } else {
         file.state = 'pending';
@@ -595,7 +604,11 @@ export default class FileControl extends React.Component<FileProps, FileState> {
   }
 
   handleSelect() {
-    this.dropzone.current && this.dropzone.current.open();
+    const {disabled, multiple, maxLength} = this.props;
+    !disabled &&
+      !(multiple && maxLength && this.state.files.length >= maxLength) &&
+      this.dropzone.current &&
+      this.dropzone.current.open();
   }
 
   startUpload(retry: boolean = false) {
@@ -1212,12 +1225,23 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     );
   }
 
+  // 动作
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {onChange} = this.props;
+    if (action.actionType === 'clear') {
+      this.setState({files: []}, () => {
+        onChange('');
+      });
+    }
+  }
+
   render() {
     const {
       btnLabel,
       accept,
       disabled,
       maxLength,
+      maxSize,
       multiple,
       autoUpload,
       description,
@@ -1230,7 +1254,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       translate: __,
       render,
       downloadUrl,
-      templateUrl
+      templateUrl,
+      drag
     } = this.props;
     let {files, uploading, error} = this.state;
     const nameField = this.props.nameField || 'name';
@@ -1278,39 +1303,56 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                 onClick: preventEvent
               })}
               className={cx('FileControl-dropzone', {
-                disabled,
+                'disabled':
+                  disabled ||
+                  (multiple && !!maxLength && files.length >= maxLength),
                 'is-empty': !files.length,
                 'is-active': isDragActive
               })}
             >
               <input disabled={disabled} {...getInputProps()} />
 
-              {isDragActive ? (
-                <div className={cx('FileControl-acceptTip')}>
-                  {__('File.dragDrop')}
+              {drag ? (
+                <div
+                  className={cx('FileControl-acceptTip')}
+                  onClick={this.handleSelect}
+                >
+                  <Icon icon="cloud-upload" className="icon" />
+                  <span>{__('File.dragDrop')}</span>
+                  {maxSize ? (
+                    <div className={cx('FileControl-sizeTip')}>
+                      {__('File.sizeLimit', {maxSize})}
+                    </div>
+                  ) : null}
                 </div>
               ) : (
                 <>
-                  {(multiple && (!maxLength || files.length < maxLength)) ||
-                  !multiple ? (
-                    <Button
-                      level="default"
-                      disabled={disabled}
-                      className={cx('FileControl-selectBtn', btnClassName)}
-                      onClick={this.handleSelect}
-                    >
-                      <Icon icon="upload" className="icon" />
-                      <span>
-                        {!multiple && files.length
-                          ? __('File.repick')
-                          : multiple && files.length
-                          ? __('File.continueAdd')
-                          : btnLabel
-                          ? btnLabel
-                          : __('File.upload')}
-                      </span>
-                    </Button>
-                  ) : null}
+                  <Button
+                    level="default"
+                    disabled={disabled}
+                    className={cx('FileControl-selectBtn', {
+                      btnClassName,
+                      'is-disabled':
+                        multiple && !!maxLength && files.length >= maxLength
+                    })}
+                    tooltip={
+                      multiple && maxLength && files.length >= maxLength
+                        ? __('File.maxLength', {maxLength})
+                        : ''
+                    }
+                    onClick={this.handleSelect}
+                  >
+                    <Icon icon="upload" className="icon" />
+                    <span>
+                      {!multiple && files.length
+                        ? __('File.repick')
+                        : multiple && files.length
+                        ? __('File.continueAdd')
+                        : btnLabel
+                        ? btnLabel
+                        : __('File.upload')}
+                    </span>
+                  </Button>
 
                   {description
                     ? render('desc', description!, {
@@ -1320,92 +1362,102 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                         )
                       })
                     : null}
-
-                  {Array.isArray(files) ? (
-                    <ul className={cx('FileControl-list')}>
-                      {files.map((file, index) => (
-                        <li key={file.id}>
-                          <div
-                            className={cx('FileControl-itemInfo', {
-                              'is-invalid':
-                                file.state === 'invalid' ||
-                                file.state === 'error'
-                            })}
-                          >
-                            <Icon icon="file" className="icon" />
-                            {(file as FileValue)[urlField] ||
-                            (file as FileValue)[valueField] ||
-                            downloadUrl ? (
-                              <a
-                                className={cx('FileControl-itemInfoText')}
-                                target="_blank"
-                                rel="noopener"
-                                href="#"
-                                onClick={this.handleClickFile.bind(this, file)}
-                              >
-                                {file[nameField as keyof typeof file] ||
-                                  (file as FileValue).filename}
-                              </a>
-                            ) : (
-                              <span className={cx('FileControl-itemInfoText')}>
-                                {file[nameField as keyof typeof file] ||
-                                  (file as FileValue).filename}
-                              </span>
-                            )}
-
-                            {file.state === 'invalid' ||
-                            file.state === 'error' ? (
-                              <>
-                                <Icon icon="fail" className="icon" />
-                                <span className="text-danger">
-                                  {(file as FileValue).error || null}
-                                </span>
-                              </>
-                            ) : null}
-                            {!disabled ? (
-                              <a
-                                data-tooltip={__('Select.clear')}
-                                className={cx('FileControl-clear')}
-                                onClick={() => this.removeFile(file, index)}
-                              >
-                                <Icon icon="close" className="icon" />
-                              </a>
-                            ) : null}
-                          </div>
-                          {file.state === 'uploading' ||
-                          file.state === 'uploaded' ? (
-                            <div className={cx('FileControl-progressInfo')}>
-                              <div className={cx('FileControl-progress')}>
-                                <span
-                                  style={{
-                                    width: `${
-                                      file.state === 'uploaded'
-                                        ? 100
-                                        : (file.progress || 0) * 100
-                                    }%`
-                                  }}
-                                />
-                              </div>
-
-                              {file.state === 'uploaded' ? (
-                                <Icon icon="success" className="icon" />
-                              ) : (
-                                <span>
-                                  {Math.round((file.progress || 0) * 100)}%
-                                </span>
-                              )}
-                            </div>
-                          ) : null}
-                        </li>
-                      ))}
-                    </ul>
-                  ) : null}
                 </>
               )}
             </div>
           )}
         </DropZone>
 
+        {maxSize && !drag ? (
+          <div className={cx('FileControl-sizeTip')}>
+            {__('File.sizeLimit', {maxSize})}
+          </div>
+        ) : null}
+
+        {Array.isArray(files) ? (
+          <ul className={cx('FileControl-list')}>
+            {files.map((file, index) => {
+              const filename =
+                file[nameField as keyof typeof file] ||
+                (file as FileValue).filename;
+
+              return (
+                <li key={file.id}>
+                  <TooltipWrapper
+                    placement="bottom"
+                    tooltipClassName={cx('FileControl-list-tooltip')}
+                    tooltip={
+                      file.state === 'invalid' || file.state === 'error'
+                        ? (file as FileValue).error ||
+                          (maxSize && file.size > maxSize
+                            ? __('File.maxSize', {
+                                filename: file.name,
+                                actualSize: ImageControl.formatFileSize(
+                                  file.size
+                                ),
+                                maxSize: ImageControl.formatFileSize(maxSize)
+                              })
+                            : '')
+                        : ''
+                    }
+                  >
+                    <div
+                      className={cx('FileControl-itemInfo', {
+                        'is-invalid':
+                          file.state === 'invalid' || file.state === 'error'
+                      })}
+                    >
+                      <span className={cx('FileControl-itemInfoIcon')}>
+                        <Icon icon="file" className="icon" />
+                      </span>
+
+                      {(file as FileValue)[urlField] ||
+                      (file as FileValue)[valueField] ||
+                      downloadUrl ? (
+                        <a
+                          className={cx('FileControl-itemInfoText')}
+                          target="_blank"
+                          rel="noopener"
+                          href="#"
+                          onClick={this.handleClickFile.bind(this, file)}
+                        >
+                          {filename}
+                        </a>
+                      ) : (
+                        <span className={cx('FileControl-itemInfoText')}>
+                          {filename}
+                        </span>
+                      )}
+
+                      {!disabled ? (
+                        <a
+                          data-tooltip={__('Select.clear')}
+                          data-position="left"
+                          className={cx('FileControl-clear')}
+                          onClick={() => this.removeFile(file, index)}
+                        >
+                          <Icon icon="close" className="icon" />
+                        </a>
+                      ) : null}
+                    </div>
+                  </TooltipWrapper>
+
+                  {file.state === 'uploading' ? (
+                    <div className={cx('FileControl-progressInfo')}>
+                      <div className={cx('FileControl-progress')}>
+                        <span
+                          style={{width: `${(file.progress || 0) * 100}%`}}
+                        />
+                      </div>
+                      <span>{Math.round((file.progress || 0) * 100)}%</span>
+                    </div>
+                  ) : null}
+                </li>
+              );
+            })}
+          </ul>
+        ) : null}
+
         {failed ? (
           <div className={cx('FileControl-sum')}>
             {__('File.result', {

package/src/renderers/Form/InputImage.tsx

@@ -6,7 +6,7 @@ import DropZone from 'react-dropzone';
 import {FileRejection} from 'react-dropzone';
 import 'blueimp-canvastoblob';
 import find from 'lodash/find';
-import {Payload} from '../../types';
+import {Payload, Action} from '../../types';
 import {buildApi} from '../../utils/api';
 import {
   createObject,
@@ -244,7 +244,7 @@ export interface ImageControlSchema extends FormBaseControl {
   /**
    * 初始化时是否把其他字段同步到表单内部。
    */
-  initAutoFill?: boolean
+  initAutoFill?: boolean;
 
   /**
    * 默认占位图图片地址
@@ -314,6 +314,9 @@ export interface FileX extends File {
   [propName: string]: any;
 }
 
+export type InputImageRendererEvent = 'change' | 'success' | 'fail' | 'remove';
+export type InputImageRendererAction = 'clear';
+
 export default class ImageControl extends React.Component<
   ImageProps,
   ImageState
@@ -501,8 +504,8 @@ export default class ImageControl extends React.Component<
         this.syncAutoFill
       );
     } else if (prevProps.value !== props.value && !this.initAutoFill) {
-      this.initAutoFill = true
-      this.syncAutoFill()
+      this.initAutoFill = true;
+      this.syncAutoFill();
     }
 
     if (prevProps.crop !== props.crop) {
@@ -1245,10 +1248,19 @@ export default class ImageControl extends React.Component<
 
   async dispatchEvent(e: string, data?: Record<string, any>) {
     const {dispatchEvent} = this.props;
-    data = data ? data : this.state.files;
+    data = data ? data : this.files;
     return dispatchEvent(e, createObject(this.props.data, {file: data}));
   }
 
+  // 动作
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {onChange} = this.props;
+    if (action.actionType === 'clear') {
+      this.files = [];
+      onChange('');
+    }
+  }
+
   render() {
     const {
       className,
@@ -1380,37 +1392,51 @@ export default class ImageControl extends React.Component<
                           >
                             {file.state === 'invalid' ||
                             file.state === 'error' ? (
-                              <>
-                                <a
-                                  className={cx('ImageControl-itemClear')}
-                                  data-tooltip={__('Select.clear')}
-                                  data-position="bottom"
-                                  onClick={this.removeFile.bind(
-                                    this,
-                                    file,
-                                    key
-                                  )}
-                                >
-                                  <Icon icon="close" className="icon" />
-                                </a>
+                              <div className={cx('Image--thumb')}>
+                                <div className={cx('Image-thumbWrap')}>
+                                  <div
+                                    className={cx(
+                                      'Image-thumb',
+                                      'ImageControl-filename'
+                                    )}
+                                  >
+                                    <Icon icon="image" className="icon" />
+                                    <span
+                                      title={
+                                        file.name ||
+                                        getNameFromUrl(file.value || file.url)
+                                      }
+                                    >
+                                      {file.name ||
+                                        getNameFromUrl(file.value || file.url)}
+                                    </span>
+                                  </div>
 
-                                <a
-                                  className={cx(
-                                    'ImageControl-retryBtn',
-                                    {
-                                      'is-disabled': disabled
-                                    },
-                                    fixedSize ? 'ImageControl-fixed-size' : '',
-                                    fixedSize ? fixedSizeClassName : ''
-                                  )}
-                                  onClick={this.handleRetry.bind(this, key)}
-                                >
-                                  <Icon icon="retry" className="icon" />
-                                  <p className="ImageControl-itemInfoError">
-                                    {__('File.repick')}
-                                  </p>
-                                </a>
-                              </>
+                                  <div className={cx('Image-overlay')}>
+                                    <a
+                                      data-tooltip={__('File.repick')}
+                                      data-position="bottom"
+                                      onClick={this.handleRetry.bind(this, key)}
+                                    >
+                                      <Icon icon="refresh" className="icon" />
+                                    </a>
+
+                                    {!disabled ? (
+                                      <a
+                                        data-tooltip={__('Select.clear')}
+                                        data-position="bottom"
+                                        onClick={this.removeFile.bind(
+                                          this,
+                                          file,
+                                          key
+                                        )}
+                                      >
+                                        <Icon icon="remove" className="icon" />
+                                      </a>
+                                    ) : null}
+                                  </div>
+                                </div>
+                              </div>
                             ) : file.state === 'uploading' ? (
                               <>
                                 <a