amis 1.4.2-beta.6 → 1.5.0

package/src/renderers/Form/Select.tsx

@@ -14,6 +14,9 @@ import {isEffectiveApi} from '../../utils/api';
 import {isEmpty, createObject, autobind} from '../../utils/helper';
 import {dataMapping} from '../../utils/tpl-builtin';
 import {SchemaApi} from '../../Schema';
+import Spinner from '../../components/Spinner';
+import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
+import TransferDropDown from '../../components/TransferDropDown';
 
 /**
  * Select 下拉选择框。
@@ -28,11 +31,6 @@ export interface SelectControlSchema extends FormOptionsControl {
    */
   autoComplete?: SchemaApi;
 
-  /**
-   * 是否可以搜索值
-   */
-  searchable?: boolean;
-
   /**
    * 可以自定义菜单展示。
    */
@@ -42,6 +40,51 @@ export interface SelectControlSchema extends FormOptionsControl {
    * 边框模式，全边框，还是半边框，或者没边框。
    */
   borderMode?: 'full' | 'half' | 'none';
+
+  /**
+   * 勾选展示模式
+   */
+  selectMode?: 'table' | 'group' | 'tree' | 'chained' | 'associated';
+
+  /**
+   * 当 selectMode 为 associated 时用来定义左侧的选项
+   */
+  leftOptions?: Array<Option>;
+
+  /**
+   * 当 selectMode 为 associated 时用来定义左侧的选择模式
+   */
+  leftMode?: 'tree' | 'list';
+
+  /**
+   * 当 selectMode 为 associated 时用来定义右侧的选择模式
+   */
+  rightMode?: 'table' | 'list' | 'tree' | 'chained';
+
+  /**
+   * 搜索结果展示模式
+   */
+  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
+
+  /**
+   * 当 selectMode 为 table 时定义表格列信息。
+   */
+  columns?: Array<any>;
+
+  /**
+   * 当 searchResultMode 为 table 时定义表格列信息。
+   */
+  searchResultColumns?: Array<any>;
+
+  /**
+   * 可搜索？
+   */
+  searchable?: boolean;
+
+  /**
+   * 搜索 API
+   */
+  searchApi?: SchemaApi;
 }
 
 export interface SelectProps extends OptionsControlProps {
@@ -220,6 +263,18 @@ export default class SelectControl extends React.Component<SelectProps, any> {
     reload && reload();
   }
 
+  option2value() {}
+
+  renderOtherMode() {
+    const {selectMode, ...rest} = this.props;
+    return (
+      <TransferDropdownRenderer
+        {...rest}
+        selectMode={selectMode === 'group' ? 'list' : selectMode}
+      />
+    );
+  }
+
   render() {
     let {
       autoComplete,
@@ -241,6 +296,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       render,
       menuTpl,
       borderMode,
+      selectMode,
       ...rest
     } = this.props;
 
@@ -250,25 +306,110 @@ export default class SelectControl extends React.Component<SelectProps, any> {
 
     return (
       <div className={cx(`${classPrefix}SelectControl`, className)}>
-        <Select
-          {...rest}
-          borderMode={borderMode}
-          placeholder={placeholder}
-          multiple={multiple || multi}
-          ref={this.inputRef}
+        {['table', 'list', 'group', 'tree', 'chained', 'associated'].includes(
+          selectMode
+        ) ? (
+          this.renderOtherMode()
+        ) : (
+          <Select
+            {...rest}
+            borderMode={borderMode}
+            placeholder={placeholder}
+            multiple={multiple || multi}
+            ref={this.inputRef}
+            value={selectedOptions}
+            options={options}
+            loadOptions={
+              isEffectiveApi(autoComplete) ? this.lazyloadRemote : undefined
+            }
+            creatable={creatable}
+            searchable={searchable || !!autoComplete}
+            onChange={this.changeValue}
+            loading={loading}
+            noResultsText={noResultsText}
+            renderMenu={menuTpl ? this.renderMenu : undefined}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+export interface TransferDropDownProps
+  extends OptionsControlProps,
+    Omit<
+      TransferControlSchema,
+      | 'type'
+      | 'options'
+      | 'inputClassName'
+      | 'className'
+      | 'descriptionClassName'
+    > {
+  borderMode?: 'full' | 'half' | 'none';
+}
+
+class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProps> {
+  render() {
+    const {
+      className,
+      classnames: cx,
+      selectedOptions,
+      sortable,
+      loading,
+      searchable,
+      searchResultMode,
+      showArrow,
+      deferLoad,
+      disabled,
+      selectTitle,
+      selectMode,
+      multiple,
+      columns,
+      leftMode,
+      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
+          selectMode={selectMode}
+          className={className}
           value={selectedOptions}
+          disabled={disabled}
           options={options}
-          loadOptions={
-            isEffectiveApi(autoComplete) ? this.lazyloadRemote : undefined
-          }
-          creatable={creatable}
-          searchable={searchable || !!autoComplete}
-          onChange={this.changeValue}
-          loading={loading}
-          noResultsText={noResultsText}
-          renderMenu={menuTpl ? this.renderMenu : undefined}
+          onChange={this.handleChange}
+          option2value={this.option2value}
+          sortable={sortable}
+          searchResultMode={searchResultMode}
+          onSearch={searchable ? this.handleSearch : undefined}
+          showArrow={showArrow}
+          onDeferLoad={deferLoad}
+          selectTitle={selectTitle}
+          multiple={multiple}
+          columns={columns}
+          leftMode={leftMode}
+          leftOptions={leftOptions}
+          borderMode={borderMode}
         />
-      </div>
+
+        <Spinner overlay key="info" show={loading} />
+      </>
     );
   }
 }

package/src/renderers/Form/TabsTransferPicker.tsx

@@ -0,0 +1,123 @@
+import {
+  OptionsControlProps,
+  OptionsControl,
+  FormOptionsControl
+} from './Options';
+import React from 'react';
+import {Api} from '../../types';
+import Spinner from '../../components/Spinner';
+import {BaseTransferRenderer} from './Transfer';
+import TabsTransfer from '../../components/TabsTransfer';
+import {SchemaApi} from '../../Schema';
+import TransferPicker from '../../components/TransferPicker';
+import TabsTransferPicker from '../../components/TabsTransferPicker';
+
+/**
+ * TabsTransferPicker 穿梭器的弹框形态
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/tabs-transfer-picker
+ */
+export interface TabsTransferPickerControlSchema extends FormOptionsControl {
+  type: 'tabs-transfer-picker';
+
+  /**
+   * 是否显示剪头
+   */
+  showArrow?: boolean;
+
+  /**
+   * 可排序？
+   */
+  sortable?: boolean;
+
+  /**
+   * 搜索结果展示模式
+   */
+  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
+
+  /**
+   * 可搜索？
+   */
+  searchable?: boolean;
+
+  /**
+   * 搜索 API
+   */
+  searchApi?: SchemaApi;
+
+  /**
+   * 左侧的标题文字
+   */
+  selectTitle?: string;
+
+  /**
+   * 右侧结果的标题文字
+   */
+  resultTitle?: string;
+
+  /**
+   * 弹窗大小
+   */
+  pickerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export interface TabsTransferProps
+  extends OptionsControlProps,
+    Omit<
+      TabsTransferPickerControlSchema,
+      | 'type'
+      | 'options'
+      | 'inputClassName'
+      | 'className'
+      | 'descriptionClassName'
+    > {}
+
+@OptionsControl({
+  type: 'tabs-transfer-picker'
+})
+export class TabsTransferPickerRenderer extends BaseTransferRenderer<TabsTransferProps> {
+  render() {
+    const {
+      className,
+      classnames: cx,
+      options,
+      selectedOptions,
+      sortable,
+      loading,
+      searchable,
+      searchResultMode,
+      showArrow,
+      deferLoad,
+      disabled,
+      selectTitle,
+      resultTitle,
+      pickerSize,
+      columns,
+      leftMode,
+      leftOptions
+    } = this.props;
+
+    return (
+      <div className={cx('TabsTransferControl', className)}>
+        <TabsTransferPicker
+          value={selectedOptions}
+          disabled={disabled}
+          options={options}
+          onChange={this.handleChange}
+          option2value={this.option2value}
+          sortable={sortable}
+          searchResultMode={searchResultMode}
+          onSearch={searchable ? this.handleSearch : undefined}
+          showArrow={showArrow}
+          onDeferLoad={deferLoad}
+          selectTitle={selectTitle}
+          resultTitle={resultTitle}
+          size={pickerSize}
+          leftMode={leftMode}
+          leftOptions={leftOptions}
+        />
+
+        <Spinner overlay key="info" show={loading} />
+      </div>
+    );
+  }
+}

package/src/renderers/Form/Transfer.tsx

@@ -207,8 +207,9 @@ export class BaseTransferRenderer<
         (option: Option) => {
           return !!(
             (Array.isArray(option.children) && option.children.length) ||
-            regexp.test(option[(labelField as string) || 'label']) ||
-            regexp.test(option[(valueField as string) || 'value'])
+            (option[(valueField as string) || 'value'] &&
+              (regexp.test(option[(labelField as string) || 'label']) ||
+                regexp.test(option[(valueField as string) || 'value'])))
           );
         },
         0,
@@ -248,7 +249,6 @@ export class BaseTransferRenderer<
     const {
       className,
       classnames: cx,
-      options,
       selectedOptions,
       showArrow,
       sortable,
@@ -259,7 +259,6 @@ export class BaseTransferRenderer<
       searchResultMode,
       searchResultColumns,
       deferLoad,
-      leftOptions,
       leftMode,
       rightMode,
       disabled,
@@ -269,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

@@ -0,0 +1,145 @@
+import {
+  OptionsControlProps,
+  OptionsControl,
+  FormOptionsControl
+} from './Options';
+import React from 'react';
+import {Api} from '../../types';
+import Spinner from '../../components/Spinner';
+import {BaseTransferRenderer} from './Transfer';
+import TabsTransfer from '../../components/TabsTransfer';
+import {SchemaApi} from '../../Schema';
+import TransferPicker from '../../components/TransferPicker';
+
+/**
+ * TransferPicker 穿梭器的弹框形态
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/transfer-picker
+ */
+export interface TransferPickerControlSchema extends FormOptionsControl {
+  type: 'transfer-picker';
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
+
+  /**
+   * 是否显示剪头
+   */
+  showArrow?: boolean;
+
+  /**
+   * 可排序？
+   */
+  sortable?: boolean;
+
+  /**
+   * 搜索结果展示模式
+   */
+  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
+
+  /**
+   * 可搜索？
+   */
+  searchable?: boolean;
+
+  /**
+   * 搜索 API
+   */
+  searchApi?: SchemaApi;
+
+  /**
+   * 左侧的标题文字
+   */
+  selectTitle?: string;
+
+  /**
+   * 右侧结果的标题文字
+   */
+  resultTitle?: string;
+
+  /**
+   * 弹窗大小
+   */
+  pickerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export interface TabsTransferProps
+  extends OptionsControlProps,
+    Omit<
+      TransferPickerControlSchema,
+      | 'type'
+      | 'options'
+      | 'inputClassName'
+      | 'className'
+      | 'descriptionClassName'
+    > {}
+
+@OptionsControl({
+  type: 'transfer-picker'
+})
+export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferProps> {
+  render() {
+    const {
+      className,
+      classnames: cx,
+      selectedOptions,
+      sortable,
+      loading,
+      searchable,
+      searchResultMode,
+      showArrow,
+      deferLoad,
+      disabled,
+      selectTitle,
+      resultTitle,
+      pickerSize,
+      columns,
+      leftMode,
+      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('TransferControl', className)}>
+        <TransferPicker
+          borderMode={borderMode}
+          selectMode={selectMode}
+          value={selectedOptions}
+          disabled={disabled}
+          options={options}
+          onChange={this.handleChange}
+          option2value={this.option2value}
+          sortable={sortable}
+          searchResultMode={searchResultMode}
+          onSearch={searchable ? this.handleSearch : undefined}
+          showArrow={showArrow}
+          onDeferLoad={deferLoad}
+          selectTitle={selectTitle}
+          resultTitle={resultTitle}
+          size={pickerSize}
+          columns={columns}
+          leftMode={leftMode}
+          leftOptions={leftOptions}
+        />
+
+        <Spinner overlay key="info" show={loading} />
+      </div>
+    );
+  }
+}

package/src/renderers/Form/TreeSelect.tsx

@@ -478,6 +478,19 @@ export default class TreeSelectControl extends React.Component<
       minLength,
       labelField,
       nodePath,
+      onAdd,
+      creatable,
+      createTip,
+      addControls,
+      onEdit,
+      editable,
+      editTip,
+      editControls,
+      removable,
+      removeTip,
+      onDelete,
+      rootCreatable,
+      rootCreateTip,
       translate: __,
       deferLoad,
       expandTreeOptions
@@ -533,6 +546,18 @@ export default class TreeSelectControl extends React.Component<
             pathSeparator={pathSeparator}
             maxLength={maxLength}
             minLength={minLength}
+            onAdd={onAdd}
+            creatable={creatable}
+            createTip={createTip}
+            rootCreatable={rootCreatable}
+            rootCreateTip={rootCreateTip}
+            onEdit={onEdit}
+            editable={editable}
+            editTip={editTip}
+            removable={removable}
+            removeTip={removeTip}
+            onDelete={onDelete}
+            bultinCUD={!addControls && !editControls}
             onDeferLoad={deferLoad}
             onExpandTree={expandTreeOptions}
           />

package/src/renderers/Form/index.tsx

@@ -202,6 +202,11 @@ export interface FormSchema extends BaseSchema {
    */
   mode?: 'normal' | 'inline' | 'horizontal';
 
+  /**
+   * 表单项显示为几列
+   */
+  columnCount?: number;
+
   /**
    * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
    */
@@ -347,6 +352,7 @@ export default class Form extends React.Component<FormProps, object> {
       right: 10,
       offset: 2
     },
+    columnCount: 0,
     panelClassName: 'Panel--default',
     messages: {
       fetchFailed: 'fetchFailed',
@@ -367,6 +373,7 @@ export default class Form extends React.Component<FormProps, object> {
     'initFetch',
     'wrapWithPanel',
     'mode',
+    'columnCount',
     'collapsable',
     'horizontal',
     'panelClassName',
@@ -827,7 +834,7 @@ export default class Form extends React.Component<FormProps, object> {
       );
     }
 
-    if (store.persistData) {
+    if (store.persistData && store.inited) {
       store.setLocalPersistData();
     }
   }
@@ -1418,6 +1425,7 @@ export default class Form extends React.Component<FormProps, object> {
       debug,
       $path,
       store,
+      columnCount,
       render
     } = this.props;
 
@@ -1429,7 +1437,12 @@ export default class Form extends React.Component<FormProps, object> {
 
     return (
       <WrapperComponent
-        className={cx(`Form`, `Form--${mode || 'normal'}`, className)}
+        className={cx(
+          `Form`,
+          `Form--${mode || 'normal'}`,
+          columnCount ? `Form--column Form--column-${columnCount}` : null,
+          className
+        )}
         onSubmit={this.handleFormSubmit}
         noValidate
       >

package/src/renderers/Form/wrapControl.tsx

@@ -479,8 +479,17 @@ export function wrapControl<
             const {
               formStore: form,
               onChange,
-              $schema: {name, onChange: onFormItemChange, maxLength, minLength},
+              $schema: {
+                name,
+                id,
+                label,
+                type,
+                onChange: onFormItemChange,
+                maxLength,
+                minLength
+              },
               data,
+              env,
               validateOnChange,
               formSubmited
             } = this.props;
@@ -495,6 +504,22 @@ export function wrapControl<
               return;
             }
 
+            if (type !== 'input-password') {
+              env?.tracker(
+                {
+                  eventType: 'formItemChange',
+                  eventData: {
+                    id,
+                    name,
+                    label,
+                    type,
+                    value
+                  }
+                },
+                this.props
+              );
+            }
+
             this.model.changeEmitedValue(value);
             if (
               onFormItemChange?.(value, oldValue, this.model, form) === false