amis 1.4.2-beta.11 → 1.4.2-beta.16

package/src/icons/drag-bar.svg

@@ -1,7 +1,13 @@
-<svg viewBox="0 0 428 684" version="1.1" 
-    xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="drag-bar" fill="currentColor" fill-rule="nonzero">
-        <path d="M171.333333,86 C171.333333,133.128298 133.128298,171.333333 86,171.333333 C38.8717015,171.333333 0.666667,133.128298 0.666667,86 C0.666667,38.8717015 38.8717015,0.666667 86,0.666667 C133.128298,0.666667 171.333333,38.8717015 171.333333,86 L171.333333,86 Z M86,256.666667 C38.8717015,256.666667 0.666667,294.871702 0.666667,342 C0.666667,389.128298 38.8717015,427.333333 86,427.333333 C133.128298,427.333333 171.333333,389.128298 171.333333,342 C171.333333,294.871702 133.128298,256.666667 86,256.666667 L86,256.666667 Z M86,512.666667 C38.8717015,512.666667 0.666667,550.871702 0.666667,598 C0.666667,645.128298 38.8717015,683.333333 86,683.333333 C133.128298,683.333333 171.333333,645.128298 171.333333,598 C171.333333,550.871702 133.128298,512.666667 86,512.666667 L86,512.666667 Z M342,171.333333 C389.128298,171.333333 427.333333,133.128298 427.333333,86 C427.333333,38.8717015 389.128298,0.666667 342,0.666667 C294.871702,0.666667 256.666667,38.8717015 256.666667,86 C256.666667,133.128298 294.871702,171.333333 342,171.333333 L342,171.333333 Z M342,256.666667 C294.871702,256.666667 256.666667,294.871702 256.666667,342 C256.666667,389.128298 294.871702,427.333333 342,427.333333 C389.128298,427.333333 427.333333,389.128298 427.333333,342 C427.333333,294.871702 389.128298,256.666667 342,256.666667 L342,256.666667 Z M342,512.666667 C294.871702,512.666667 256.666667,550.871702 256.666667,598 C256.666667,645.128298 294.871702,683.333333 342,683.333333 C389.128298,683.333333 427.333333,645.128298 427.333333,598 C427.333333,575.368193 418.342883,553.663326 402.339778,537.660222 C386.336674,521.657117 364.631807,512.666667 342,512.666667 L342,512.666667 Z" id="形状"></path>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g transform="translate(5.000000, 1.000000)" stroke-width="1" stroke="currentColor">
+        <circle cx="1" cy="1" r="1"></circle>
+        <circle cx="5" cy="1" r="1"></circle>
+        <circle cx="1" cy="5" r="1"></circle>
+        <circle cx="5" cy="5" r="1"></circle>
+        <circle cx="1" cy="9" r="1"></circle>
+        <circle cx="5" cy="9" r="1"></circle>
+        <circle cx="1" cy="13" r="1"></circle>
+        <circle cx="5" cy="13" r="1"></circle>
     </g>
-</svg>
+</svg>

package/src/index.tsx

@@ -56,6 +56,7 @@ import './renderers/Form/ButtonToolbar';
 import './renderers/Breadcrumb';
 import './renderers/DropDownButton';
 import './renderers/Collapse';
+import './renderers/CollapseGroup';
 import './renderers/Color';
 import './renderers/CRUD';
 import './renderers/Pagination';
@@ -167,6 +168,7 @@ import './renderers/Markdown';
 import './renderers/TableView';
 import './renderers/Code';
 import './renderers/WebComponent';
+import './renderers/GridNav';
 
 import Scoped, {ScopedContext} from './Scoped';
 

package/src/locale/en-US.ts

@@ -85,6 +85,7 @@ register('en-US', {
   'Excel.placeholder': `Drag 'n' drop excel here, or click to select`,
   'fetchFailed': 'Fetch api failed',
   'File.continueAdd': 'Continue add',
+  'File.downloadTpl': 'Download template',
   'File.dragDrop': `Drag 'n' drop some files here`,
   'File.errorRetry': 'File upload failed, please try again',
   'File.failed': 'Failed files.',

package/src/locale/zh-CN.ts

@@ -87,6 +87,7 @@ register('zh-CN', {
   'Excel.placeholder': '拖拽 Excel 到这，或点击上传',
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
+  'File.downloadTpl': '下载模板',
   'File.dragDrop': '将文件拖拽到此处',
   'File.errorRetry': '文件上传失败请重试',
   'File.failed': '失败文件',

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,143 +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)}
-        >
-          <div className={cx('Collapse-header-wrapper')}>
-            {render('heading', finalTitle, {className: 'Collapse-header-tpl'})}
-            {collapsable && <span className={cx('Collapse-arrow')} />}
-          </div>
-        </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/InputFile.tsx

@@ -18,7 +18,8 @@ import {dataMapping} from '../../utils/tpl-builtin';
 import {
   SchemaApi,
   SchemaClassName,
-  SchemaTokenizeableString
+  SchemaTokenizeableString,
+  SchemaUrlPath
 } from '../../Schema';
 import merge from 'lodash/merge';
 
@@ -89,6 +90,11 @@ export interface FileControlSchema extends FormBaseControl {
    */
   downloadUrl?: SchemaApi;
 
+  /**
+   * 模板下载地址
+   */
+  templateUrl?: SchemaApi;
+
   /**
    * 默认 `file`, 如果你不想自己存储，则可以忽略此属性。
    * @default file
@@ -276,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',
@@ -388,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() {
@@ -535,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';
 
@@ -550,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) {
@@ -1171,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';
@@ -1194,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"

package/src/renderers/Form/Item.tsx

@@ -1089,7 +1089,8 @@ export const detectProps = [
   'items',
   'showCounter',
   'minLength',
-  'maxLength'
+  'maxLength',
+  'embed'
 ];
 
 export function asFormItem(config: Omit<FormItemConfig, 'component'>) {

package/src/renderers/Form/Select.tsx

@@ -344,14 +344,15 @@ export interface TransferDropDownProps
       | 'inputClassName'
       | 'className'
       | 'descriptionClassName'
-    > {}
+    > {
+  borderMode?: 'full' | 'half' | 'none';
+}
 
 class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProps> {
   render() {
     const {
       className,
       classnames: cx,
-      options,
       selectedOptions,
       sortable,
       loading,
@@ -363,11 +364,27 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
       selectTitle,
       selectMode,
       multiple,
+      columns,
       leftMode,
-      leftOptions,
-      columns
+      borderMode
     } = this.props;
 
+    // 目前 LeftOptions 没有接口可以动态加载
+    // 为了方便可以快速实现动态化，让选项的第一个成员携带
+    // LeftOptions 信息
+    let {options, leftOptions, leftDefaultValue} = this.props;
+    if (
+      selectMode === 'associated' &&
+      options &&
+      options.length === 1 &&
+      options[0].leftOptions &&
+      Array.isArray(options[0].children)
+    ) {
+      leftOptions = options[0].leftOptions;
+      leftDefaultValue = options[0].leftDefaultValue ?? leftDefaultValue;
+      options = options[0].children;
+    }
+
     return (
       <>
         <TransferDropDown
@@ -388,6 +405,7 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
           columns={columns}
           leftMode={leftMode}
           leftOptions={leftOptions}
+          borderMode={borderMode}
         />
 
         <Spinner overlay key="info" show={loading} />

package/src/renderers/Form/Transfer.tsx

@@ -249,7 +249,6 @@ export class BaseTransferRenderer<
     const {
       className,
       classnames: cx,
-      options,
       selectedOptions,
       showArrow,
       sortable,
@@ -260,7 +259,6 @@ export class BaseTransferRenderer<
       searchResultMode,
       searchResultColumns,
       deferLoad,
-      leftOptions,
       leftMode,
       rightMode,
       disabled,
@@ -270,6 +268,22 @@ export class BaseTransferRenderer<
       resultItemRender
     } = this.props;
 
+    // 目前 LeftOptions 没有接口可以动态加载
+    // 为了方便可以快速实现动态化，让选项的第一个成员携带
+    // LeftOptions 信息
+    let {options, leftOptions, leftDefaultValue} = this.props;
+    if (
+      selectMode === 'associated' &&
+      options &&
+      options.length === 1 &&
+      options[0].leftOptions &&
+      Array.isArray(options[0].children)
+    ) {
+      leftOptions = options[0].leftOptions;
+      leftDefaultValue = options[0].leftDefaultValue ?? leftDefaultValue;
+      options = options[0].children;
+    }
+
     return (
       <div className={cx('TransferControl', className)}>
         <Transfer

package/src/renderers/Form/TransferPicker.tsx

@@ -17,6 +17,10 @@ import TransferPicker from '../../components/TransferPicker';
  */
 export interface TransferPickerControlSchema extends FormOptionsControl {
   type: 'transfer-picker';
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
 
   /**
    * 是否显示剪头
@@ -78,7 +82,6 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
     const {
       className,
       classnames: cx,
-      options,
       selectedOptions,
       sortable,
       loading,
@@ -92,12 +95,31 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
       pickerSize,
       columns,
       leftMode,
-      leftOptions
+      selectMode,
+      borderMode
     } = this.props;
 
+    // 目前 LeftOptions 没有接口可以动态加载
+    // 为了方便可以快速实现动态化，让选项的第一个成员携带
+    // LeftOptions 信息
+    let {options, leftOptions, leftDefaultValue} = this.props;
+    if (
+      selectMode === 'associated' &&
+      options &&
+      options.length === 1 &&
+      options[0].leftOptions &&
+      Array.isArray(options[0].children)
+    ) {
+      leftOptions = options[0].leftOptions;
+      leftDefaultValue = options[0].leftDefaultValue ?? leftDefaultValue;
+      options = options[0].children;
+    }
+
     return (
-      <div className={cx('TabsTransferControl', className)}>
+      <div className={cx('TransferControl', className)}>
         <TransferPicker
+          borderMode={borderMode}
+          selectMode={selectMode}
           value={selectedOptions}
           disabled={disabled}
           options={options}