amis 1.3.5-beta.7 → 1.4.2-beta.11

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 图片上传控件
@@ -110,6 +112,16 @@ export interface ImageControlSchema extends FormBaseControl {
         scalable?: boolean;
       };
 
+  /**
+   * 裁剪后的图片类型
+   */
+  cropFormat?: string;
+
+  /**
+   * 裁剪后的质量
+   */
+  cropQuality?: number;
+
   /**
    * 是否允许二次裁剪。
    */
@@ -780,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)
       );
@@ -793,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);
     }
   }
 
@@ -862,14 +880,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() {
@@ -1362,7 +1385,6 @@ export default class ImageControl extends React.Component<
                                     fixedSize ? fixedSizeClassName : ''
                                   )}
                                 >
-                                  <p>{__('File.uploading')}</p>
                                   <div className={cx('ImageControl-progress')}>
                                     <span
                                       style={{
@@ -1375,6 +1397,7 @@ export default class ImageControl extends React.Component<
                                       )}
                                     />
                                   </div>
+                                  <p>{__('File.uploading')}</p>
                                 </div>
                               </>
                             ) : (
@@ -1509,7 +1532,10 @@ export default class ImageControl extends React.Component<
                             thumbRatio={thumbRatio}
                           />
                         ) : (
-                          <Icon icon="plus" className="icon" />
+                          <>
+                            <Icon icon="plus" className="icon" />
+                            <span>{__('File.upload')}</span>
+                          </>
                         )}
 
                         {isFocused ? (

package/src/renderers/Form/InputTable.tsx

@@ -30,6 +30,26 @@ export interface TableControlSchema
    */
   addable?: boolean;
 
+  /**
+   * 可复制新增
+   */
+  copyable?: boolean;
+
+  /**
+   * 复制按钮文字
+   */
+  copyBtnLabel?: string;
+
+  /**
+   * 复制按钮图标
+   */
+  copyBtnIcon?: string;
+
+  /**
+   * 是否显示复制按钮
+   */
+  copyAddBtn?: boolean;
+
   /**
    * 是否可以拖拽排序
    */
@@ -41,12 +61,12 @@ export interface TableControlSchema
   addApi?: SchemaApi;
 
   /**
-   * 新增按钮
+   * 新增按钮文字
    */
   addBtnLabel?: string;
 
   /**
-   * 新增图标
+   * 新增按钮图标
    */
   addBtnIcon?: string;
 
@@ -73,12 +93,12 @@ export interface TableControlSchema
   /**
    * 更新按钮名称
    */
-  updateBtnLabel?: string;
+  editBtnLabel?: string;
 
   /**
    * 更新按钮图标
    */
-  updateBtnIcon?: string;
+  editBtnIcon?: string;
 
   /**
    * 确认按钮文字
@@ -172,7 +192,8 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     placeholder: '空',
     scaffold: {},
     addBtnIcon: 'plus',
-    updateBtnIcon: 'pencil',
+    copyBtnIcon: 'copy',
+    editBtnIcon: 'pencil',
     deleteBtnIcon: 'minus',
     confirmBtnIcon: 'check',
     cancelBtnIcon: 'close',
@@ -188,6 +209,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     'showAddBtn',
     'addable',
     'removable',
+    'copyable',
     'editable',
     'addApi',
     'updateApi',
@@ -423,6 +445,26 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     return onAction && onAction(action, ctx, ...rest);
   }
 
+  copyItem(index: number) {
+    const {needConfirm} = this.props;
+    const items = this.state.items.concat();
+
+    items.splice(index + 1, 0, items[index]);
+    index = Math.min(index + 1, items.length - 1);
+    this.setState(
+      {
+        items
+      },
+      () => {
+        if (needConfirm === false) {
+          this.emitValue();
+        } else {
+          this.startEdit(index, true);
+        }
+      }
+    );
+  }
+
   addItem(index: number) {
     const {needConfirm, scaffold, columns} = this.props;
     const items = this.state.items.concat();
@@ -653,6 +695,38 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       });
     }
 
+    if (props.copyable && props.showCopyBtn !== false) {
+      btns.push({
+        children: ({
+          key,
+          rowIndex,
+          offset
+        }: {
+          key: any;
+          rowIndex: number;
+          offset: number;
+        }) =>
+          ~this.state.editIndex && needConfirm !== false ? null : (
+            <Button
+              classPrefix={ns}
+              size="sm"
+              key={key}
+              level="link"
+              tooltip={__('Table.copyRow')}
+              tooltipContainer={
+                env && env.getModalContainer ? env.getModalContainer : undefined
+              }
+              onClick={this.copyItem.bind(this, rowIndex + offset, undefined)}
+            >
+              {props.copyBtnLabel ? <span>{props.copyBtnLabel}</span> : null}
+              {props.copyBtnIcon ? (
+                <Icon icon={props.copyBtnIcon} className="icon" />
+              ) : null}
+            </Button>
+          )
+      });
+    }
+
     if (props.needConfirm === false) {
       columns = columns.map(column => {
         const quickEdit = column.quickEdit;
@@ -716,11 +790,16 @@ export default class FormTable extends React.Component<TableProps, TableState> {
                 }
                 onClick={() => this.startEdit(rowIndex + offset)}
               >
-                {props.updateBtnLabel ? (
-                  <span>{props.updateBtnLabel}</span>
+                {props.updateBtnLabel || props.editBtnLabel ? (
+                  <span>{props.updateBtnLabel || props.editBtnLabel}</span>
                 ) : null}
-                {props.updateBtnIcon ? (
-                  <Icon icon={props.updateBtnIcon} className="icon" />
+                {/* 兼容之前的写法 */}
+                {typeof props.updateBtnIcon !== 'undefined' ? (
+                  props.updateBtnIcon ? (
+                    <Icon icon={props.updateBtnIcon} className="icon" />
+                  ) : null
+                ) : props.editBtnIcon ? (
+                  <Icon icon={props.editBtnIcon} className="icon" />
                 ) : null}
               </Button>
             )

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;

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};
 
@@ -270,7 +272,8 @@ export function registerOptionsControl(config: OptionsConfig) {
       : [];
     static ComposedComponent = Control;
 
-    reaction?: () => void;
+    toDispose: Array<() => void> = [];
+
     input: any;
     mounted = false;
 
@@ -302,9 +305,18 @@ export function registerOptionsControl(config: OptionsConfig) {
           data
         );
 
-        this.reaction = reaction(
-          () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
-          () => this.mounted && this.forceUpdate()
+        this.toDispose.push(
+          reaction(
+            () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
+            () => this.mounted && this.forceUpdate()
+          )
+        );
+
+        this.toDispose.push(
+          reaction(
+            () => JSON.stringify(formItem.options),
+            () => this.mounted && this.syncAutoFill(formItem.tmpValue)
+          )
         );
         // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
         if (
@@ -432,14 +444,20 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     componentWillUnmount() {
       this.props.removeHook?.(this.reload, 'init');
-      this.reaction?.();
+      this.toDispose.forEach(fn => fn());
+      this.toDispose = [];
     }
 
     syncAutoFill(value: any) {
       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,
@@ -471,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);
       }
     }
 

package/src/renderers/Form/Picker.tsx

@@ -397,14 +397,15 @@ export default class PickerControl extends React.PureComponent<
       options,
       multiple,
       valueField,
-      embed
+      embed,
+      source
     } = this.props;
 
     return render('modal-body', this.state.schema, {
       value: selectedOptions,
       valueField,
       primaryField: valueField,
-      options: options,
+      options: source ? [] : options,
       multiple,
       onSelect: embed ? this.handleChange : undefined,
       ref: this.crudRef,

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,92 @@ 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'
+    > {}
+
+class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProps> {
+  render() {
+    const {
+      className,
+      classnames: cx,
+      options,
+      selectedOptions,
+      sortable,
+      loading,
+      searchable,
+      searchResultMode,
+      showArrow,
+      deferLoad,
+      disabled,
+      selectTitle,
+      selectMode,
+      multiple,
+      leftMode,
+      leftOptions,
+      columns
+    } = this.props;
+
+    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}
         />
-      </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>
+    );
+  }
+}