amis 1.4.2-beta.6 → 1.5.0

package/src/renderers/Collapse.tsx

@@ -3,11 +3,10 @@ import {Renderer, RendererProps} from '../factory';
 import {Collapse as BasicCollapse} from '../components/Collapse';
 import {
   BaseSchema,
-  SchemaClassName,
   SchemaCollection,
-  SchemaTpl
+  SchemaTpl,
+  SchemaObject
 } from '../Schema';
-import {isClickOnInput} from '../utils/helper';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -19,10 +18,20 @@ export interface CollapseSchema extends BaseSchema {
    */
   type: 'collapse';
 
+  /**
+   * 标识
+   */
+  key?: string;
+
   /**
    * 标题展示位置
    */
-  titlePosition: 'top' | 'bottom';
+  headerPosition?: 'top' | 'bottom';
+
+  /**
+   * 标题
+   */
+  header?: string | SchemaCollection;
 
   /**
    * 内容区域
@@ -32,7 +41,12 @@ export interface CollapseSchema extends BaseSchema {
   /**
    * 配置 Body 容器 className
    */
-  bodyClassName?: SchemaClassName;
+  bodyClassName?: string;
+
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
 
   /**
    * 是否可折叠
@@ -45,19 +59,24 @@ export interface CollapseSchema extends BaseSchema {
   collapsed?: boolean;
 
   /**
-   * 标题 CSS 类名
+   * 图标是否展示
    */
-  headingClassName?: string;
+  showArrow?: boolean;
+
+   /**
+    * 自定义切换图标
+    */
+  expandIcon?: SchemaObject;
 
   /**
-   * 标题
+   * 标题 CSS 类名
    */
-  title?: SchemaTpl;
+  headingClassName?: string;
 
   /**
    * 收起的标题
    */
-  collapseTitle?: SchemaTpl;
+  collapseHeader?: SchemaTpl;
 
   /**
    * 控件大小
@@ -85,141 +104,77 @@ export interface CollapseProps
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 
-export interface CollapseState {
-  collapsed: boolean;
-}
-
 export default class Collapse extends React.Component<
   CollapseProps,
-  CollapseState
+  {}
 > {
-  static propsList: Array<string> = [
-    'wrapperComponent',
-    'headingComponent',
-    'bodyClassName',
-    'collapsed',
-    'headingClassName',
-    'title',
-    'mountOnEnter',
-    'unmountOnExit'
-  ];
-
-  static defaultProps: Partial<CollapseProps> = {
-    titlePosition: 'top',
-    wrapperComponent: 'div',
-    headingComponent: 'h4',
-    className: '',
-    headingClassName: '',
-    bodyClassName: '',
-    collapsable: true
-  };
-
-  state = {
-    collapsed: false
-  };
-
-  constructor(props: CollapseProps) {
-    super(props);
-
-    this.toggleCollapsed = this.toggleCollapsed.bind(this);
-    this.state.collapsed = !!props.collapsed;
-  }
-
-  componentDidUpdate(prevProps: CollapseProps) {
-    const props = this.props;
-
-    if (prevProps.collapsed !== props.collapsed) {
-      this.setState({
-        collapsed: !!props.collapsed
-      });
-    }
-  }
-
-  toggleCollapsed(e: React.MouseEvent<HTMLElement>) {
-    if (isClickOnInput(e)) {
-      return;
-    }
-    this.props.collapsable !== false &&
-      this.setState({
-        collapsed: !this.state.collapsed
-      });
-  }
 
   render() {
     const {
+      key,
+      id,
       classPrefix: ns,
       classnames: cx,
       size,
-      wrapperComponent: WrapperComponent,
-      headingComponent: HeadingComponent,
+      wrapperComponent,
+      headingComponent,
       className,
       headingClassName,
       children,
       titlePosition,
+      headerPosition,
       title,
       collapseTitle,
+      collapseHeader,
+      header,
       body,
       bodyClassName,
       render,
       collapsable,
       translate: __,
       mountOnEnter,
-      unmountOnExit
+      unmountOnExit,
+      showArrow,
+      expandIcon,
+      disabled,
+      collapsed,
+      propsUpdate,
+      onCollapse
     } = this.props;
-    // 默认给个 title，不然没法点
-    const finalTitle = this.state.collapsed ? title : collapseTitle || title;
-
-    let dom = [
-      finalTitle ? (
-        <HeadingComponent
-          key="title"
-          onClick={this.toggleCollapsed}
-          className={cx(`Collapse-header`, headingClassName)}
-        >
-          {collapsable && <span className={cx('Collapse-arrow')} />}
-          {render('heading', finalTitle)}
-        </HeadingComponent>
-      ) : null,
 
+    return (
       <BasicCollapse
-        show={collapsable ? !this.state.collapsed : true}
+        key={key}
+        id={id}
         classnames={cx}
         classPrefix={ns}
-        key="body"
         mountOnEnter={mountOnEnter}
         unmountOnExit={unmountOnExit}
+        size={size}
+        wrapperComponent={wrapperComponent}
+        headingComponent={headingComponent}
+        className={className}
+        headingClassName={headingClassName}
+        bodyClassName={bodyClassName}
+        headerPosition={titlePosition || headerPosition}
+        collapsable={collapsable}
+        collapsed={collapsed}
+        showArrow={showArrow}
+        disabled={disabled}
+        propsUpdate={propsUpdate}
+        expandIcon={expandIcon ? render('arrow-icon', expandIcon || '', {className: cx('Collapse-icon-tranform')}) : null}
+        collapseHeader={collapseTitle || collapseHeader ? render('heading', collapseTitle || collapseHeader) : null}
+        header={render('heading', title || header || '')}
+        body={children
+          ? typeof children === 'function'
+            ? children(this.props)
+            : children
+          : body
+          ? render('body', body)
+          : null}
+        onCollapse={onCollapse}
       >
-        <div className={cx(`Collapse-body`, bodyClassName)}>
-          {children
-            ? typeof children === 'function'
-              ? children(this.props)
-              : children
-            : body
-            ? render('body', body)
-            : null}
-        </div>
       </BasicCollapse>
-    ];
-
-    if (titlePosition === 'bottom') {
-      dom.reverse();
-    }
-
-    return (
-      <WrapperComponent
-        className={cx(
-          `Collapse`,
-          {
-            'is-collapsed': this.state.collapsed,
-            [`Collapse--${size}`]: size,
-            'Collapse--collapsable': collapsable,
-            'Collapse--title-bottom': titlePosition === 'bottom'
-          },
-          className
-        )}
-      >
-        {dom}
-      </WrapperComponent>
     );
   }
 }

package/src/renderers/CollapseGroup.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {BaseSchema, SchemaCollection, SchemaObject} from '../Schema';
+import CollapseGroup from '../components/CollapseGroup';
+
+/**
+ * CollapseGroup 折叠渲染器，格式说明。
+ * 文档：https://baidu.gitee.io/amis/docs/components/collapse
+ */
+export interface CollapseGroupSchema extends BaseSchema {
+  /**
+   * 指定为折叠器类型
+   */
+  type: 'collapse-group';
+
+  /**
+   * 激活面板
+   */
+  activeKey?: Array<string | number | never> | string | number;
+
+  /**
+   * 手风琴模式
+   */
+  accordion?: boolean;
+
+  /**
+   * 自定义切换图标
+   */
+  expandIcon?: SchemaObject;
+
+  /**
+   * 设置图标位置
+   */
+  expandIconPosition?: 'left' | 'right';
+
+  /**
+   * 内容区域
+   */
+  body?: SchemaCollection;
+}
+export interface CollapseGroupProps
+  extends RendererProps,
+    Omit<CollapseGroupSchema, 'type' | 'className'> {
+
+  children?: JSX.Element | ((props?: any) => JSX.Element);
+}
+
+export class CollapseGroupRender extends React.Component<CollapseGroupProps, {}> {
+  constructor(props: CollapseGroupProps) {
+    super(props);
+  }
+  render() {
+    const {
+      defaultActiveKey,
+      accordion,
+      expandIcon,
+      expandIconPosition,
+      body,
+      className,
+      render
+    } = this.props;
+    return (
+      <CollapseGroup
+          defaultActiveKey={defaultActiveKey}
+          accordion={accordion}
+          expandIcon={expandIcon}
+          expandIconPosition={expandIconPosition}
+          className={className}
+        >
+          {render('body', body || '')}
+        </CollapseGroup>
+    )
+  }
+}
+
+
+@Renderer({
+  type: 'collapse-group'
+})
+export class CollapseGroupRenderer extends CollapseGroupRender {}

package/src/renderers/Form/ConditionBuilder.tsx

@@ -66,12 +66,12 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
     RemoteOptionsProps & React.ComponentProps<typeof ConditionBuilder>
   > {
     render() {
-      const {loading, config, deferLoad, ...rest} = this.props;
+      const {loading, config, deferLoad, disabled, ...rest} = this.props;
       return (
         <ConditionBuilder
           {...rest}
           fields={config || rest.fields || []}
-          disabled={loading}
+          disabled={disabled || loading}
         />
       );
     }

package/src/renderers/Form/InputCity.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
-import {Select, Spinner} from '../../components';
+import Spinner from '../../components/Spinner';
+import Select from '../../components/Select';
 import {autobind} from '../../utils/helper';
 import {Option} from './Options';
 import {localeable, LocaleProps} from '../../locale';
@@ -293,13 +294,8 @@ export class CityPicker extends React.Component<
 
   @autobind
   syncOut() {
-    const {
-      onChange,
-      allowStreet,
-      joinValues,
-      extractValue,
-      delimiter
-    } = this.props;
+    const {onChange, allowStreet, joinValues, extractValue, delimiter} =
+      this.props;
 
     const {code, province, city, district, street} = this.state;
 

package/src/renderers/Form/InputColor.tsx

@@ -1,7 +1,9 @@
 import React, {Suspense} from 'react';
-import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 
+import {FormItem, FormControlProps, FormBaseControl} from './Item';
+import type {PresetColor} from '../../components/ColorPicker';
+
 export const ColorPicker = React.lazy(
   () => import('../../components/ColorPicker')
 );
@@ -34,7 +36,7 @@ export interface InputColorControlSchema extends FormBaseControl {
   /**
    * 预设颜色，用户可以直接从预设中选。
    */
-  presetColors?: Array<any>;
+  presetColors?: Array<PresetColor>;
 
   /**
    * 是否允许用户输入颜色。

package/src/renderers/Form/InputFile.tsx

@@ -18,8 +18,10 @@ import {dataMapping} from '../../utils/tpl-builtin';
 import {
   SchemaApi,
   SchemaClassName,
-  SchemaTokenizeableString
+  SchemaTokenizeableString,
+  SchemaUrlPath
 } from '../../Schema';
+import merge from 'lodash/merge';
 
 /**
  * File 文件上传控件
@@ -88,6 +90,11 @@ export interface FileControlSchema extends FormBaseControl {
    */
   downloadUrl?: SchemaApi;
 
+  /**
+   * 模板下载地址
+   */
+  templateUrl?: SchemaApi;
+
   /**
    * 默认 `file`, 如果你不想自己存储，则可以忽略此属性。
    * @default file
@@ -275,6 +282,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     extractValue: false,
     delimiter: ',',
     downloadUrl: '', // '/api/file/'
+    templateUrl: '',
     useChunk: 'auto',
     chunkSize: 5 * 1024 * 1024, // 文件大于5M， 自动分块上传
     startChunkApi: '/api/upload/startChunk',
@@ -356,11 +364,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     if (value && value instanceof Blob) {
       files = [value as any];
     } else if (value) {
-      files = (Array.isArray(value)
-        ? value
-        : joinValues
-        ? `${(value as any)[valueField] || value}`.split(delimiter)
-        : [value as any]
+      files = (
+        Array.isArray(value)
+          ? value
+          : joinValues
+          ? `${(value as any)[valueField] || value}`.split(delimiter)
+          : [value as any]
       )
         .map(item => FileControl.valueToFile(item, props) as FileValue)
         .filter(item => item);
@@ -386,6 +395,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     this.uploadBigFile = this.uploadBigFile.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
     this.syncAutoFill = this.syncAutoFill.bind(this);
+    this.downloadTpl = this.downloadTpl.bind(this);
   }
 
   componentDidMount() {
@@ -402,11 +412,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       let files: Array<FileValue> = [];
 
       if (value) {
-        files = (Array.isArray(value)
-          ? value
-          : joinValues && typeof value === 'string'
-          ? value.split(delimiter)
-          : [value as any]
+        files = (
+          Array.isArray(value)
+            ? value
+            : joinValues && typeof value === 'string'
+            ? value.split(delimiter)
+            : [value as any]
         )
           .map(item => {
             let obj = FileControl.valueToFile(
@@ -532,7 +543,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     e.preventDefault();
     e.stopPropagation();
 
-    const {data, env, downloadUrl} = this.props;
+    const {downloadUrl} = this.props;
     const urlField = this.props.urlField || 'url';
     const valueField = this.props.valueField || 'value';
 
@@ -547,10 +558,23 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         ? downloadUrl
         : `${fileUrl}`;
 
+    this.handleApi(api, file);
+  }
+
+  downloadTpl(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.handleApi(this.props.templateUrl || '');
+  }
+
+  handleApi(api: SchemaApi, payload?: object) {
+    const {data, env} = this.props;
     if (api) {
       const ctx = createObject(data, {
-        ...file
+        ...payload
       });
+
       const apiObject = normalizeApi(api);
 
       if (apiObject.method?.toLowerCase() === 'get' && !apiObject.data) {
@@ -851,8 +875,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange} = this.props;
-    if (!isEmpty(autoFill)) {
+    const {autoFill, multiple, onBulkChange, data} = this.props;
+    if (!isEmpty(autoFill) && onBulkChange) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
@@ -864,7 +888,12 @@ export default class FileControl extends React.Component<FileProps, FileState> {
             }
           : files[0]
       );
-      onBulkChange && onBulkChange(toSync);
+      Object.keys(toSync).forEach(key => {
+        if (isPlainObject(toSync[key]) && isPlainObject(data[key])) {
+          toSync[key] = merge({}, data[key], toSync[key]);
+        }
+      });
+      onBulkChange(toSync);
     }
   }
 
@@ -1163,7 +1192,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       classnames: cx,
       translate: __,
       render,
-      downloadUrl
+      downloadUrl,
+      templateUrl
     } = this.props;
     let {files, uploading, error} = this.state;
     const nameField = this.props.nameField || 'name';
@@ -1186,6 +1216,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
 
     return (
       <div className={cx('FileControl', className)}>
+        {templateUrl ? (
+          <a
+            className={cx('FileControl-templateInfo')}
+            onClick={this.downloadTpl.bind(this)}
+          >
+            <Icon icon="download" className="icon" />
+            <span>{__('File.downloadTpl')}</span>
+          </a>
+          ) : null}
+
         <DropZone
           disabled={disabled}
           key="drop-zone"
@@ -1223,13 +1263,14 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                       onClick={this.handleSelect}
                     >
                       <Icon icon="upload" className="icon" />
-                      <span>{!multiple && files.length
-                        ? __('File.repick')
-                        : multiple && files.length
-                        ? __('File.continueAdd')
-                        : btnLabel
-                        ? btnLabel
-                        : __('File.upload')}
+                      <span>
+                        {!multiple && files.length
+                          ? __('File.repick')
+                          : multiple && files.length
+                          ? __('File.continueAdd')
+                          : btnLabel
+                          ? btnLabel
+                          : __('File.upload')}
                       </span>
                     </Button>
                   ) : null}

package/src/renderers/Form/InputImage.tsx

@@ -29,6 +29,8 @@ import {
   SchemaUrlPath
 } from '../../Schema';
 import {filter} from '../../utils/tpl';
+import isPlainObject from 'lodash/isPlainObject';
+import merge from 'lodash/merge';
 
 /**
  * Image 图片上传控件
@@ -790,8 +792,8 @@ export default class ImageControl extends React.Component<
   }
 
   syncAutoFill() {
-    const {autoFill, multiple, onBulkChange} = this.props;
-    if (!isEmpty(autoFill)) {
+    const {autoFill, multiple, onBulkChange, data} = this.props;
+    if (!isEmpty(autoFill) && onBulkChange) {
       const files = this.state.files.filter(
         file => ~['uploaded', 'init', 'ready'].indexOf(file.state as string)
       );
@@ -803,7 +805,13 @@ export default class ImageControl extends React.Component<
             }
           : files[0]
       );
-      onBulkChange && onBulkChange(toSync);
+
+      Object.keys(toSync).forEach(key => {
+        if (isPlainObject(toSync[key]) && isPlainObject(data[key])) {
+          toSync[key] = merge({}, data[key], toSync[key]);
+        }
+      });
+      onBulkChange(toSync);
     }
   }
 

package/src/renderers/Form/Item.tsx

@@ -314,7 +314,7 @@ export interface FormItemProps extends RendererProps {
     submitOnChange?: boolean,
     changeImmediately?: boolean
   ) => void;
-  onBulkChange: (
+  onBulkChange?: (
     values: {[propName: string]: any},
     submitOnChange?: boolean
   ) => void;
@@ -1089,7 +1089,8 @@ export const detectProps = [
   'items',
   'showCounter',
   'minLength',
-  'maxLength'
+  'maxLength',
+  'embed'
 ];
 
 export function asFormItem(config: Omit<FormItemConfig, 'component'>) {

package/src/renderers/Form/Options.tsx

@@ -48,6 +48,8 @@ import {
   SchemaObject,
   SchemaTokenizeableString
 } from '../../Schema';
+import isPlainObject from 'lodash/isPlainObject';
+import merge from 'lodash/merge';
 
 export {Option};
 
@@ -450,7 +452,12 @@ export function registerOptionsControl(config: OptionsConfig) {
       const {autoFill, multiple, onBulkChange, data} = this.props;
       const formItem = this.props.formItem as IFormItemStore;
 
-      if (autoFill && !isEmpty(autoFill) && formItem.filteredOptions.length) {
+      if (
+        onBulkChange &&
+        autoFill &&
+        !isEmpty(autoFill) &&
+        formItem.filteredOptions.length
+      ) {
         const selectedOptions = formItem.getSelectedOptions(value);
         const toSync = dataMapping(
           autoFill,
@@ -482,7 +489,14 @@ export function registerOptionsControl(config: OptionsConfig) {
                 selectedOptions[0]
               )
         );
-        onBulkChange?.(toSync);
+
+        Object.keys(toSync).forEach(key => {
+          if (isPlainObject(toSync[key]) && isPlainObject(data[key])) {
+            toSync[key] = merge({}, data[key], toSync[key]);
+          }
+        });
+
+        onBulkChange(toSync);
       }
     }
 
@@ -873,7 +887,19 @@ export function registerOptionsControl(config: OptionsConfig) {
               body: {
                 type: 'form',
                 api: addApi,
-                controls: addControls
+                controls: [
+                  {
+                    type: 'hidden',
+                    name: 'idx',
+                    value: idx
+                  },
+                  {
+                    type: 'hidden',
+                    name: 'parent',
+                    value: parent
+                  },
+                  ...(addControls || [])
+                ]
               }
             },
             ctx