amis 1.9.1-beta.28 → 1.9.1-beta.30

package/src/renderers/Card.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import omit from 'lodash/omit';
+import merge from 'lodash/merge';
 import {Renderer, RendererProps} from '../factory';
 import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
@@ -9,7 +11,6 @@ import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
 import PopOver, {SchemaPopOver} from './PopOver';
 import {TableCell} from './Table';
 import Copyable, {SchemaCopyable} from './Copyable';
-import omit = require('lodash/omit');
 import {
   BaseSchema,
   SchemaClassName,
@@ -207,6 +208,11 @@ export interface CardSchema extends BaseSchema {
    * 次要说明
    */
   secondary?: SchemaTpl;
+
+  /**
+   * 卡片内容区的表单项label是否使用Card内部的样式，默认为true
+   */
+  useCardLabel?: boolean;
 }
 export interface CardProps
   extends RendererProps,
@@ -249,7 +255,8 @@ export class CardRenderer extends React.Component<CardProps> {
     selectable: false,
     checkable: true,
     selected: false,
-    hideCheckToggler: false
+    hideCheckToggler: false,
+    useCardLabel: true
   };
 
   static propsList: Array<string> = [
@@ -490,10 +497,10 @@ export class CardRenderer extends React.Component<CardProps> {
     return this.renderFeild(`column/${index}`, field, index, props);
   }
 
-  renderFeild(region: string, field: any, key: any, props: any) {
-    const {render, classnames: cx, itemIndex} = props;
+  renderFeild(region: string, field: Schema, key: any, props: any) {
+    const {render, classnames: cx, itemIndex, useCardLabel} = props;
     const data = this.props.data;
-    if (!isVisible(field, data)) {
+    if (!field || !isVisible(field, data)) {
       return;
     }
 
@@ -501,7 +508,7 @@ export class CardRenderer extends React.Component<CardProps> {
 
     return (
       <div className={cx('Card-field')} key={key}>
-        {field && field.label ? (
+        {useCardLabel && field.label ? (
           <label className={cx('Card-fieldLabel', field.labelClassName)}>
             {field.label}
           </label>
@@ -510,12 +517,17 @@ export class CardRenderer extends React.Component<CardProps> {
         {
           render(
             region,
-            {
-              ...field,
-              field: field,
-              $$id,
-              type: 'card-item-field'
-            },
+            merge(
+              {
+                ...field,
+                field: field,
+                $$id,
+                type: 'card-item-field'
+              },
+              useCardLabel
+                ? {label: false, field: {...field, label: false}}
+                : {}
+            ),
             {
               className: cx('Card-fieldValue', field.className),
               rowIndex: itemIndex,

package/src/renderers/Form/InputColor.tsx

@@ -4,10 +4,7 @@ import cx from 'classnames';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import type {PresetColor} from '../../components/ColorPicker';
 import {isMobile} from '../../utils/helper';
-
-export const ColorPicker = React.lazy(
-  () => import('../../components/ColorPicker')
-);
+import ColorPicker from '../../components/ColorPicker';
 
 /**
  * Color 颜色选择框
@@ -80,21 +77,19 @@ export default class ColorControl extends React.PureComponent<
     const mobileUI = useMobileUI && isMobile();
     return (
       <div className={cx(`${ns}ColorControl`, className)}>
-        <Suspense fallback={<div>...</div>}>
-          <ColorPicker
-            classPrefix={ns}
-            {...rest}
-            useMobileUI={useMobileUI}
-            popOverContainer={
-              mobileUI && env && env.getModalContainer
-                ? env.getModalContainer
-                : mobileUI
-                ? undefined
-                : rest.popOverContainer
-            }
-            value={value || ''}
-          />
-        </Suspense>
+        <ColorPicker
+          classPrefix={ns}
+          {...rest}
+          useMobileUI={useMobileUI}
+          popOverContainer={
+            mobileUI && env && env.getModalContainer
+              ? env.getModalContainer
+              : mobileUI
+              ? undefined
+              : rest.popOverContainer
+          }
+          value={value || ''}
+        />
       </div>
     );
   }

package/src/renderers/Form/InputExcel.tsx

@@ -66,6 +66,12 @@ export default class ExcelControl extends React.PureComponent<
 
   ExcelJS: any;
 
+  componentDidUpdate(prevProps: ExcelProps) {
+    if (prevProps.value !== this.props.value && !this.props.value) {
+      this.setState({filename: ''});
+    }
+  }
+
   @autobind
   handleDrop(files: File[]) {
     const {allSheets, onChange, dispatchEvent, data} = this.props;

package/src/renderers/Form/InputFile.tsx

@@ -222,12 +222,12 @@ export interface FileControlSchema extends FormBaseControl {
   /**
    * 说明文档内容配置
    */
-   documentation?: string;
+  documentation?: string;
 
-   /**
+  /**
    * 说明文档链接配置
    */
-    documentLink?: string;
+  documentLink?: string;
 
   /**
    * 是否为拖拽上传
@@ -580,14 +580,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       file[urlField as keyof typeof file] ||
       file[valueField as keyof typeof file];
 
-    let api =
-      typeof downloadUrl === 'string' && !~downloadUrl.indexOf('$')
+    const api =
+      typeof downloadUrl === 'string' &&
+      !~downloadUrl.indexOf('$') &&
+      typeof fileUrl === 'string'
         ? `${downloadUrl}${fileUrl}`
         : downloadUrl
         ? downloadUrl
-        : `${fileUrl}`;
+        : undefined;
 
-    this.handleApi(api, file);
+    api && this.handleApi(api, file);
   }
 
   downloadTpl(e: React.MouseEvent) {
@@ -1283,7 +1285,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       templateUrl,
       drag,
       documentation,
-      documentLink,
+      documentLink
     } = this.props;
     let {files, uploading, error} = this.state;
     const nameField = this.props.nameField || 'name';
@@ -1348,17 +1350,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                   <Icon icon="cloud-upload" className="icon" />
                   <span>
                     {__('File.dragDrop')}
-                    <span 
-                      className={cx('FileControl-acceptTip-click')}
-                    >{__('File.clickUpload')}</span>
+                    <span className={cx('FileControl-acceptTip-click')}>
+                      {__('File.clickUpload')}
+                    </span>
                   </span>
-                  <div
-                    className={cx('FileControl-acceptTip-help', 'TplField')}>
-                    {documentLink ?
-                      <a
-                        href={documentLink}
-                        onClick={e => e.stopPropagation()}
-                      >{documentation ? documentation : __('File.helpText')}</a> : null}
+                  <div className={cx('FileControl-acceptTip-help', 'TplField')}>
+                    {documentLink ? (
+                      <a href={documentLink} onClick={e => e.stopPropagation()}>
+                        {documentation ? documentation : __('File.helpText')}
+                      </a>
+                    ) : null}
                   </div>
                   {maxSize ? (
                     <div className={cx('FileControl-sizeTip')}>

package/src/renderers/Form/InputTable.tsx

@@ -12,13 +12,14 @@ import {RendererData, Action, Api, Payload, ApiObject} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
 import {filter} from '../../utils/tpl';
 import omit from 'lodash/omit';
-import {dataMapping} from '../../utils/tpl-builtin';
+import {dataMapping, filterDate} from '../../utils/tpl-builtin';
 import findIndex from 'lodash/findIndex';
 import {SimpleMap} from '../../utils/SimpleMap';
 import {Icon} from '../../components/icons';
 import {TableSchema} from '../Table';
 import {SchemaApi} from '../../Schema';
 import find from 'lodash/find';
+import moment from 'moment';
 
 export interface TableControlSchema
   extends FormBaseControl,
@@ -466,19 +467,39 @@ export default class FormTable extends React.Component<TableProps, TableState> {
   }
 
   addItem(index: number) {
-    const {needConfirm, scaffold, columns} = this.props;
+    const {needConfirm, scaffold, columns, data} = this.props;
     const items = this.state.items.concat();
     let value: any = {
       __isPlaceholder: true
     };
 
     if (Array.isArray(columns)) {
-      columns.forEach(column => {
+      columns.forEach((column: any) => {
         if (
           typeof column.value !== 'undefined' &&
           typeof column.name === 'string'
         ) {
-          setVariable(value, column.name, column.value);
+          if (
+            [
+              'input-date',
+              'input-datetime',
+              'input-time',
+              'input-month',
+              'input-quarter',
+              'input-year'
+            ].includes(column.type)
+          ) {
+            const date = filterDate(column.value, data, column.format || 'X');
+            setVariable(
+              value,
+              column.name,
+              (column.utc ? moment.utc(date) : date).format(
+                column.format || 'X'
+              )
+            );
+          } else {
+            setVariable(value, column.name, column.value);
+          }
         }
       });
     }

package/src/renderers/Form/InputText.tsx

@@ -96,6 +96,12 @@ export interface TextControlSchema extends FormOptionsControl {
     /** 用户输入的字符自动转大写 */
     upperCase?: boolean;
   };
+
+  /** control节点的CSS类名 */
+  inputControlClassName?: string;
+
+  /** 原生input标签的CSS类名 */
+  nativeInputClassName: string;
 }
 
 export type InputTextRendererEvent =
@@ -124,6 +130,10 @@ export interface TextProps extends OptionsControlProps {
     lowerCase?: boolean; // 用户输入的字符自动转小写
     upperCase?: boolean; // 用户输入的字符自动转大写
   };
+  /** control节点的CSS类名 */
+  inputControlClassName?: string;
+  /** 原生input标签的CSS类名 */
+  nativeInputClassName?: string;
 }
 
 export interface TextState {
@@ -580,6 +590,8 @@ export default class TextControl extends React.PureComponent<
   renderSugestMode() {
     const {
       className,
+      inputControlClassName,
+      nativeInputClassName,
       inputOnly,
       value,
       placeholder,
@@ -652,6 +664,7 @@ export default class TextControl extends React.PureComponent<
             <div
               className={cx(
                 `TextControl-input TextControl-input--withAC`,
+                inputControlClassName,
                 inputOnly ? className : '',
                 {
                   'is-opened': isOpen,
@@ -705,6 +718,7 @@ export default class TextControl extends React.PureComponent<
                   })}
                   autoComplete="off"
                   size={10}
+                  className={cx(nativeInputClassName)}
                 />
               </>
 
@@ -786,6 +800,8 @@ export default class TextControl extends React.PureComponent<
       classPrefix: ns,
       classnames: cx,
       className,
+      inputControlClassName,
+      nativeInputClassName,
       inputOnly,
       value,
       placeholder,
@@ -815,6 +831,7 @@ export default class TextControl extends React.PureComponent<
           {
             [`TextControl-input--border${ucFirst(borderMode)}`]: borderMode
           },
+          inputControlClassName,
           inputOnly ? className : ''
         )}
       >
@@ -839,11 +856,9 @@ export default class TextControl extends React.PureComponent<
           step={step}
           onChange={this.handleNormalInputChange}
           value={this.valueToString(value)}
-          className={cx(
-            type === 'password' &&
-              revealPassword &&
-              'TextControl-input-password'
-          )}
+          className={cx(nativeInputClassName, {
+            'TextControl-input-password': type === 'password' && revealPassword
+          })}
         />
         {clearable && !disabled && !readOnly && value ? (
           <a onClick={this.clearValue} className={`${ns}TextControl-clear`}>

package/src/renderers/IFrame.tsx

@@ -29,6 +29,22 @@ export interface IFrameSchema extends BaseSchema {
 
   width?: number | string;
   height?: number | string;
+
+  alloow?: string;
+
+  name?: string;
+
+  referrerpolicy?:
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url';
+
+  sandbox?: string;
 }
 
 export interface IFrameProps
@@ -145,7 +161,17 @@ export default class IFrame extends React.Component<IFrameProps, object> {
 
   render() {
     const {width, height} = this.state;
-    let {className, src, name, frameBorder, data, style} = this.props;
+    let {
+      className,
+      src,
+      name,
+      frameBorder,
+      data,
+      style,
+      allow,
+      sandbox,
+      referrerpolicy
+    } = this.props;
 
     let tempStyle: any = {};
 
@@ -178,6 +204,9 @@ export default class IFrame extends React.Component<IFrameProps, object> {
         ref={this.IFrameRef}
         onLoad={this.onLoad}
         src={finalSrc}
+        allow={allow}
+        referrerPolicy={referrerpolicy}
+        sandbox={sandbox}
       />
     );
   }

package/src/renderers/Table/index.tsx

@@ -1941,6 +1941,7 @@ export default class Table extends React.Component<TableProps, object> {
             column.pristine.className,
             column.pristine.labelClassName
           )}
+          style={props.style}
         >
           {column.label ? render('tpl', column.label) : null}
 
@@ -1992,7 +1993,7 @@ export default class Table extends React.Component<TableProps, object> {
             classPrefix={ns}
             type={multiple ? 'checkbox' : 'radio'}
             checked={item.checked}
-            disabled={item.checkdisable}
+            disabled={item.checkdisable || !item.checkable}
             onChange={
               checkOnItemClick ? noop : this.handleCheck.bind(this, item)
             }

package/src/renderers/Tag.tsx

@@ -88,6 +88,7 @@ export class TagField extends React.Component<TagProps, object> {
       displayMode,
       color,
       className,
+      closable,
       data,
       style = {}
     } = this.props;
@@ -114,6 +115,7 @@ export class TagField extends React.Component<TagProps, object> {
         displayMode={displayMode}
         color={color}
         icon={icon}
+        closable={closable}
         style={style}
       >
         {label}

package/src/renderers/Wizard.tsx

@@ -745,6 +745,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
             };
           },
           onFailed: async (error: any) => {
+            store.markSaving(false);
             const dispatcher = await this.dispatchEvent(
               'submitFail',
               createObject(this.props.data, {error})
@@ -805,7 +806,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
 
   // 接管里面 form 的提交，不能直接让 form 提交，因为 wizard 自己需要知道进度。
   @autobind
-  async handleSubmit(values: object, action: Action) {
+  handleSubmit(values: object, action: Action) {
     const {store, steps, finishedField} = this.props;
 
     if (this.state.currentStep < steps.length) {

package/src/store/formItem.ts

@@ -457,7 +457,10 @@ export const FormItemStore = StoreNode.named('FormItemStore')
           if (childFirst !== undefined) {
             return childFirst;
           }
-        } else if (option[self.valueField || 'value'] && !option.disabled) {
+        } else if (
+          option[self.valueField || 'value'] != null &&
+          !option.disabled
+        ) {
           return option;
         }
       }

package/src/utils/dom.tsx

@@ -95,11 +95,12 @@ export function calculatePosition(
 
   const clip = container.getBoundingClientRect();
   const clip2 = overlayNode.getBoundingClientRect();
+  // getBoundingClientRect 会返回长宽精确值，rem计算后可能会有小数 导致 scale 不正确，所以这里需要四舍五入取整
   const scaleX = overlayNode.offsetWidth
-    ? clip2.width / overlayNode.offsetWidth
+    ? Math.round(clip2.width) / overlayNode.offsetWidth
     : 1;
   const scaleY = overlayNode.offsetHeight
-    ? clip2.height / overlayNode.offsetHeight
+    ? Math.round(clip2.height) / overlayNode.offsetHeight
     : 1;
 
   // auto 尝试四个方向对齐。