amis 1.3.5-beta.3 → 1.4.1

package/src/renderers/Card.tsx

@@ -6,7 +6,13 @@ import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Checkbox from '../components/Checkbox';
 import {IItem} from '../store/list';
-import {padArr, isVisible, isDisabled, noop} from '../utils/helper';
+import {
+  padArr,
+  isVisible,
+  isDisabled,
+  noop,
+  isClickOnInput
+} from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
 import PopOver, {SchemaPopOver} from './PopOver';
@@ -209,19 +215,11 @@ export class Card extends React.Component<CardProps> {
   }
 
   handleClick(e: React.MouseEvent<HTMLDivElement>) {
-    const target: HTMLElement = e.target as HTMLElement;
-    const ns = this.props.classPrefix;
-    let formItem;
-
-    if (
-      !e.currentTarget.contains(target) ||
-      ~['INPUT', 'TEXTAREA'].indexOf(target.tagName) ||
-      ((formItem = target.closest(`button, a, .${ns}Form-item`)) &&
-        e.currentTarget.contains(formItem))
-    ) {
+    if (isClickOnInput(e)) {
       return;
     }
-    const {item, href, data, env, blank} = this.props;
+
+    const {item, href, data, env, blank, itemAction, onAction} = this.props;
     if (href) {
       env.jumpTo(filter(href, data), {
         type: 'button',
@@ -231,6 +229,11 @@ export class Card extends React.Component<CardProps> {
       return;
     }
 
+    if (itemAction) {
+      onAction && onAction(e, itemAction, item?.data || data);
+      return;
+    }
+
     this.props.onCheck && this.props.onCheck(item);
   }
 
@@ -447,7 +450,8 @@ export class Card extends React.Component<CardProps> {
       classPrefix: ns,
       imageClassName,
       avatarTextClassName,
-      href
+      href,
+      itemAction
     } = this.props;
 
     let heading = null;
@@ -558,10 +562,12 @@ export class Card extends React.Component<CardProps> {
     return (
       <div
         onClick={
-          (checkOnItemClick && checkable) || href ? this.handleClick : undefined
+          (checkOnItemClick && checkable) || href || itemAction
+            ? this.handleClick
+            : undefined
         }
         className={cx('Card', className, {
-          'Card--link': href
+          'Card--link': href || itemAction
         })}
       >
         {this.renderToolbar()}

package/src/renderers/Collapse.tsx

@@ -7,6 +7,7 @@ import {
   SchemaCollection,
   SchemaTpl
 } from '../Schema';
+import {isClickOnInput} from '../utils/helper';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -134,7 +135,10 @@ export default class Collapse extends React.Component<
     }
   }
 
-  toggleCollapsed() {
+  toggleCollapsed(e: React.MouseEvent<HTMLElement>) {
+    if (isClickOnInput(e)) {
+      return;
+    }
     this.props.collapsable !== false &&
       this.setState({
         collapsed: !this.state.collapsed

package/src/renderers/Dialog.tsx

@@ -318,7 +318,7 @@ export default class Dialog extends React.Component<DialogProps> {
   handleExited() {
     const {lazySchema, store} = this.props;
     if (isAlive(store)) {
-      store.setFormData({});
+      store.reset();
       store.setEntered(false);
       if (typeof lazySchema === 'function') {
         store.setSchema('');
@@ -395,7 +395,8 @@ export default class Dialog extends React.Component<DialogProps> {
       affixOffsetTop: 0,
       onChange: this.handleFormChange,
       onInit: this.handleFormInit,
-      onSaved: this.handleFormSaved
+      onSaved: this.handleFormSaved,
+      syncLocation: false // 弹框中的 crud 一般不需要同步地址栏
     };
 
     if (!(body as Schema).type) {

package/src/renderers/Drawer.tsx

@@ -394,7 +394,8 @@ export default class Drawer extends React.Component<DrawerProps> {
       popOverContainer: this.getPopOverContainer,
       onChange: this.handleFormChange,
       onInit: this.handleFormInit,
-      onSaved: this.handleFormSaved
+      onSaved: this.handleFormSaved,
+      syncLocation: false
     };
 
     if (schema.type === 'form') {

package/src/renderers/DropDownButton.tsx

@@ -76,6 +76,15 @@ export interface DropdownButtonSchema extends BaseSchema {
    * 是否只显示图标。
    */
   iconOnly?: boolean;
+
+  /**
+   * 触发条件，默认是 click
+   */
+  trigger?: 'click' | 'hover';
+  /**
+   * 是否显示下拉按钮
+   */
+  hideCaret?: boolean;
 }
 
 export interface DropDownButtonProps
@@ -266,7 +275,9 @@ export default class DropDownButton extends React.Component<
       iconOnly,
       icon,
       isActived,
-      data
+      trigger,
+      data,
+      hideCaret
     } = this.props;
 
     return (
@@ -281,6 +292,8 @@ export default class DropDownButton extends React.Component<
           },
           className
         )}
+        onMouseEnter={trigger === 'hover' ? this.open : () => {}}
+        onMouseLeave={trigger === 'hover' ? this.close : () => {}}
         ref={this.domRef}
       >
         <TooltipWrapper
@@ -317,9 +330,13 @@ export default class DropDownButton extends React.Component<
               )
             ) : null}
             {typeof label === 'string' ? filter(label, data) : label}
-            <span className={cx('DropDown-caret')}>
-              <Icon icon="caret" className="icon" />
-            </span>
+            {
+              !hideCaret
+              ? <span className={cx('DropDown-caret')} >
+                <Icon icon="caret" className="icon" />
+              </span>
+              : null
+            }
           </button>
         </TooltipWrapper>
         {this.state.isOpened ? this.renderOuter() : null}

package/src/renderers/Form/ButtonGroupSelect.tsx

@@ -108,6 +108,9 @@ export default class ButtonGroupControl extends React.Component<
             className: cx(option.className, btnClassName),
             disabled: option.disabled || disabled,
             onClick: (e: React.UIEvent<any>) => {
+              if (disabled) {
+                return;
+              }
               this.handleToggle(option);
               e.preventDefault(); // 禁止 onAction 触发
             }

package/src/renderers/Form/Combo.tsx

@@ -1452,3 +1452,10 @@ export default class ComboControl extends React.Component<ComboProps> {
   extendsData: false
 })
 export class ComboControlRenderer extends ComboControl {}
+
+@FormItem({
+  type: 'input-kv',
+  storeType: ComboStore.name,
+  extendsData: false
+})
+export class KVControlRenderer extends ComboControl {}

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/InputNumber.tsx

@@ -4,7 +4,8 @@ import cx from 'classnames';
 import {filter} from '../../utils/tpl';
 import NumberInput from '../../components/NumberInput';
 import {FormOptionsControl} from './Options';
-
+import Select, {normalizeOptions, Option} from '../../components/Select';
+import {PlainObject} from '../../types';
 /**
  * 数字输入框
  * 文档：https://baidu.gitee.io/amis/docs/components/form/number
@@ -48,14 +49,20 @@ export interface NumberControlSchema extends FormBaseControl {
    * 后缀
    */
   suffix?: string;
+
+  /**
+   * 单位列表
+   */
+  unitOptions?: string | Array<Option> | string[] | PlainObject;
+
   /**
    * 是否千分分隔
    */
   kilobitSeparator?: boolean;
   /**
-  * 只读
-  */
-  readOnly?: boolean
+   * 只读
+   */
+  readOnly?: boolean;
 }
 
 export interface NumberProps extends FormControlProps {
@@ -67,8 +74,8 @@ export interface NumberProps extends FormControlProps {
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
    */
-   borderMode?: 'full' | 'half' | 'none';
-   /**
+  borderMode?: 'full' | 'half' | 'none';
+  /**
    * 前缀
    */
   prefix?: string;
@@ -83,10 +90,19 @@ export interface NumberProps extends FormControlProps {
   /**
    * 只读
    */
-  readOnly?: boolean
+  readOnly?: boolean;
+}
+
+interface NumberState {
+  // 数字单位，将会影响输出
+  unit?: string;
+  unitOptions?: Option[];
 }
 
-export default class NumberControl extends React.Component<NumberProps, any> {
+export default class NumberControl extends React.Component<
+  NumberProps,
+  NumberState
+> {
   static defaultProps: Partial<NumberProps> = {
     step: 1,
     resetValue: ''
@@ -94,17 +110,51 @@ export default class NumberControl extends React.Component<NumberProps, any> {
 
   constructor(props: NumberProps) {
     super(props);
-
     this.handleChange = this.handleChange.bind(this);
+    this.handleChangeUnit = this.handleChangeUnit.bind(this);
+    const unit = this.getUnit();
+    const unitOptions = normalizeOptions(props.unitOptions);
+    this.state = {unit, unitOptions};
+  }
+
+  // 解析出单位
+  getUnit() {
+    const props = this.props;
+    if (props.unitOptions && props.unitOptions.length) {
+      const optionValues = normalizeOptions(props.unitOptions).map(
+        option => option.value
+      );
+      // 如果有值就解析出来作为单位
+      if (props.value && typeof props.value === 'string') {
+        let unit = optionValues[0];
+        // 先找长的字符，这样如果有 ab 和 b 两种后缀相同的也能识别
+        optionValues.sort((a, b) => b.length - a.length);
+        for (const optionValue of optionValues) {
+          if (props.value.endsWith(optionValue)) {
+            unit = optionValue;
+            break;
+          }
+        }
+        return unit;
+      } else {
+        // 没有值就使用第一个单位
+        return optionValues[0];
+      }
+    }
+    return undefined;
   }
 
   handleChange(inputValue: any) {
-    const {classPrefix: ns, onChange, resetValue} = this.props;
+    const {classPrefix: ns, onChange, resetValue, unitOptions} = this.props;
 
     if (inputValue && typeof inputValue !== 'number') {
       return;
     }
 
+    if (inputValue !== null && unitOptions && this.state.unit) {
+      inputValue = inputValue + this.state.unit;
+    }
+
     onChange(inputValue === null ? resetValue ?? null : inputValue);
   }
 
@@ -116,6 +166,28 @@ export default class NumberControl extends React.Component<NumberProps, any> {
     return value;
   }
 
+  // 单位选项的变更
+  handleChangeUnit(option: Option) {
+    let value = this.props.value;
+    const prevUnitValue = this.state.unit;
+    this.setState({unit: option.value}, () => {
+      if (value) {
+        value = value.replace(prevUnitValue, '');
+        this.props.onChange(value + this.state.unit);
+      }
+    });
+  }
+
+  componentDidUpdate(prevProps: NumberProps) {
+    if (this.props.value !== prevProps.value) {
+      const unit = this.getUnit();
+      this.setState({unit: unit});
+    }
+    if (this.props.unitOptions !== prevProps.unitOptions) {
+      this.setState({unitOptions: normalizeOptions(this.props.unitOptions)});
+    }
+  }
+
   render(): JSX.Element {
     const {
       className,
@@ -132,6 +204,7 @@ export default class NumberControl extends React.Component<NumberProps, any> {
       suffix,
       prefix,
       kilobitSeparator,
+      unitOptions,
       readOnly
     } = this.props;
 
@@ -141,29 +214,43 @@ export default class NumberControl extends React.Component<NumberProps, any> {
     if (typeof finalPrecision === 'number') {
       precisionProps.precision = finalPrecision;
     }
+
+    const unit = this.state?.unit;
     // 数据格式化
     const formatter = (value: string | number) => {
       // 增加千分分隔
       if (kilobitSeparator && value) {
         value = (value + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       }
-      return (prefix ? prefix : '')
-       + value
-       + (suffix ? suffix : '');
-    }
+      return (prefix ? prefix : '') + value + (suffix ? suffix : '');
+    };
     // 将数字还原
     const parser = (value: string) => {
       if (value) {
         prefix && (value = value.replace(prefix, ''));
         suffix && (value = value.replace(suffix, ''));
-        kilobitSeparator &&  (value = value.replace(/,/g, ''));
+        kilobitSeparator && (value = value.replace(/,/g, ''));
       }
       return value;
-    }
+    };
+
+    const finalValue =
+      unit && value && typeof value === 'string'
+        ? value.replace(unit, '')
+        : value;
+
     return (
-      <div className={cx(`${ns}NumberControl`, className)}>
+      <div
+        className={cx(
+          `${ns}NumberControl`,
+          {
+            [`${ns}NumberControl--withUnit`]: unitOptions
+          },
+          className
+        )}
+      >
         <NumberInput
-          value={value}
+          value={finalValue}
           step={step}
           max={this.filterNum(max)}
           min={this.filterNum(min)}
@@ -177,6 +264,14 @@ export default class NumberControl extends React.Component<NumberProps, any> {
           borderMode={borderMode}
           readOnly={readOnly}
         />
+        {unitOptions ? (
+          <Select
+            value={unit}
+            clearable={false}
+            options={this.state.unitOptions || []}
+            onChange={this.handleChangeUnit}
+          />
+        ) : null}
       </div>
     );
   }

package/src/renderers/Form/InputRange.tsx

@@ -7,6 +7,7 @@ import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import InputRange from '../../components/Range';
 import {Icon} from '../../components/icons';
 import {FormOptionsControl} from './Options';
+import {stripNumber} from '../../utils/tpl-builtin';
 
 /**
  * Range
@@ -205,7 +206,7 @@ export default class RangeControl extends React.PureComponent<
 
   handleChange(value: any) {
     this.setState({
-      value: value,
+      value: stripNumber(value),
       minValue: value.min,
       maxValue: value.max
     });
@@ -253,6 +254,8 @@ export default class RangeControl extends React.PureComponent<
             min: value.min,
             max: value.max
           };
+    } else {
+      endValue = stripNumber(value);
     }
     const {onChange} = this.props;
     this.setState(
@@ -268,7 +271,7 @@ export default class RangeControl extends React.PureComponent<
 
     return typeof step !== 'number' || step >= 1 || step < 0
       ? 0
-      : step.toString().split('.')[1].length;
+      : step.toString().split('.')[1]?.length;
   }
 
   getValue(value: any, type?: string) {