amis 1.5.7 → 1.5.8-beta.2

package/src/renderers/Form/InputFormula.tsx

@@ -5,7 +5,7 @@ import type {FuncGroup, VariableItem} from '../../components/formula/Editor';
 
 /**
  * InputFormula 公式编辑器
- * 文档：https://baidu.gitee.io/amis/docs/components/form/input-formula
+ * 文档：https://baidu.gitee.io/amis/zh-CN/components/form/input-formula
  */
 export interface InputFormulaControlSchema extends FormBaseControl {
   type: 'input-formula';
@@ -22,6 +22,9 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   variables: Array<VariableItem>;
 
+  /**
+   * 变量展现模式，可选值：'tabs' ｜ 'tree'
+   */
   variableMode?: 'tabs' | 'tree';
 
   /**
@@ -56,19 +59,21 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       variables,
       variableMode,
       functions,
-      header
+      header,
+      label,
+      value
     } = this.props;
 
     return (
       <FormulaPicker
-        value={selectedOptions}
+        value={value}
         disabled={disabled}
         onChange={onChange}
         evalMode={evalMode}
         variables={variables}
         variableMode={variableMode}
         functions={functions}
-        header={header}
+        header={header || label || ''}
       />
     );
   }

package/src/renderers/Form/InputImage.tsx

@@ -283,6 +283,7 @@ export interface ImageState {
   crop?: any;
   error?: string;
   cropFile?: FileValue;
+  cropFileName?: string; // 主要是用于后续上传的时候获得用户名
   submitOnChange?: boolean;
   frameImageWidth?: number;
 }
@@ -651,7 +652,7 @@ export default class ImageControl extends React.Component<
                 env.notify('error', error || __('File.errorRetry'));
               } else {
                 newFile = {
-                  name: file.name,
+                  name: file.name || this.state.cropFileName,
                   ...obj,
                   preview: file.preview
                 } as FileValue;
@@ -748,8 +749,10 @@ export default class ImageControl extends React.Component<
     this.setState({
       cropFile: {
         preview: files[index].preview || (files[index].url as string),
+        name: files[index].name,
         state: 'init'
-      }
+      },
+      cropFileName: files[index].name
     });
   }
 
@@ -848,7 +851,8 @@ export default class ImageControl extends React.Component<
       }
 
       return this.setState({
-        cropFile: file
+        cropFile: file,
+        cropFileName: file.name
       });
     }
 
@@ -899,6 +903,7 @@ export default class ImageControl extends React.Component<
     this.setState(
       {
         cropFile: undefined,
+        cropFileName: undefined,
         locked: false,
         lockedReason: ''
       },
@@ -1086,7 +1091,7 @@ export default class ImageControl extends React.Component<
     }
 
     // Note: File类型字段放在后面，可以支持第三方云存储鉴权
-    fd.append(fileField, file, (file as File).name);
+    fd.append(fileField, file, (file as File).name || this.state.cropFileName);
 
     const env = this.props.env;
 

package/src/renderers/Form/InputMonthRange.tsx

@@ -185,7 +185,6 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/InputQuarterRange.tsx

@@ -45,7 +45,6 @@ export default class QuarterRangeControl extends InputDateRange {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/InputYearRange.tsx

@@ -45,7 +45,6 @@ export default class YearRangeControl extends InputDateRange {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
-          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/Item.tsx

@@ -519,7 +519,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       // 强制不渲染 label 的话
@@ -575,6 +576,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       type: 'remark',
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
+                      useMobileUI,
                       className: cx(`Form-labelRemark`),
                       container: props.popOverContainer
                         ? props.popOverContainer
@@ -608,6 +610,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   icon: remark.icon || 'warning-mark',
                   tooltip: remark,
                   className: cx(`Form-remark`),
+                  useMobileUI,
                   container: props.popOverContainer
                     ? props.popOverContainer
                     : env && env.getModalContainer
@@ -664,7 +667,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -700,6 +704,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
                       className: cx(`Form-lableRemark`),
+                      useMobileUI,
                       container: props.popOverContainer
                         ? props.popOverContainer
                         : env && env.getModalContainer
@@ -725,6 +730,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                 icon: remark.icon || 'warning-mark',
                 className: cx(`Form-remark`),
                 tooltip: remark,
+                useMobileUI,
                 container:
                   env && env.getModalContainer
                     ? env.getModalContainer
@@ -779,7 +785,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderLabel,
         renderDescription,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -815,6 +822,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                       icon: labelRemark.icon || 'warning-mark',
                       tooltip: labelRemark,
                       className: cx(`Form-lableRemark`),
+                      useMobileUI,
                       container: props.popOverContainer
                         ? props.popOverContainer
                         : env && env.getModalContainer
@@ -841,6 +849,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   icon: remark.icon || 'warning-mark',
                   className: cx(`Form-remark`),
                   tooltip: remark,
+                  useMobileUI,
                   container: props.popOverContainer
                     ? props.popOverContainer
                     : env && env.getModalContainer
@@ -897,7 +906,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         renderDescription,
         hint,
         data,
-        showErrorMsg
+        showErrorMsg,
+        useMobileUI
       } = props;
 
       description = description || desc;
@@ -932,6 +942,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                         icon: labelRemark.icon || 'warning-mark',
                         tooltip: labelRemark,
                         className: cx(`Form-lableRemark`),
+                        useMobileUI,
                         container: props.popOverContainer
                           ? props.popOverContainer
                           : env && env.getModalContainer

package/src/renderers/Form/NestedSelect.tsx

@@ -647,7 +647,7 @@ export default class NestedSelectControl extends React.Component<
             multiple
               ? selectedOptions
               : selectedOptions.length
-              ? this.renderValue(selectedOptions[0])
+              ? selectedOptions[0]
               : ''
           }
           onResultClick={this.handleOutClick}

package/src/renderers/Form/Select.tsx

@@ -314,7 +314,6 @@ export default class SelectControl extends React.Component<SelectProps, any> {
         ) : (
           <Select
             {...rest}
-            useMobileUI={env.useMobileUI}
             borderMode={borderMode}
             placeholder={placeholder}
             multiple={multiple || multi}

package/src/renderers/Form/TabsTransfer.tsx

@@ -6,51 +6,19 @@ import {
 import React from 'react';
 import {Api} from '../../types';
 import Spinner from '../../components/Spinner';
-import {BaseTransferRenderer} from './Transfer';
+import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
 import TabsTransfer from '../../components/TabsTransfer';
-import {SchemaApi} from '../../Schema';
+import {SchemaApi, SchemaObject} from '../../Schema';
+import {autobind, createObject} from '../../utils/helper';
+import {BaseSelection, ItemRenderStates} from '../../components/Selection';
 
 /**
  * TabsTransfer
  * 文档：https://baidu.gitee.io/amis/docs/components/form/tabs-transfer
  */
-export interface TabsTransferControlSchema extends FormOptionsControl {
+export interface TabsTransferControlSchema
+  extends Omit<TransferControlSchema, 'type'> {
   type: 'tabs-transfer';
-
-  /**
-   * 是否显示剪头
-   */
-  showArrow?: boolean;
-
-  /**
-   * 可排序？
-   */
-  sortable?: boolean;
-
-  /**
-   * 搜索结果展示模式
-   */
-  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
-
-  /**
-   * 可搜索？
-   */
-  searchable?: boolean;
-
-  /**
-   * 搜索 API
-   */
-  searchApi?: SchemaApi;
-
-  /**
-   * 左侧的标题文字
-   */
-  selectTitle?: string;
-
-  /**
-   * 右侧结果的标题文字
-   */
-  resultTitle?: string;
 }
 
 export interface TabsTransferProps
@@ -68,6 +36,26 @@ export interface TabsTransferProps
   type: 'tabs-transfer'
 })
 export class TabsTransferRenderer extends BaseTransferRenderer<TabsTransferProps> {
+  @autobind
+  optionItemRender(option: any, states: ItemRenderStates) {
+    const {menuTpl, render, data} = this.props;
+    const ctx = arguments[2] || {};
+
+    if (menuTpl) {
+      return render(`item/${states.index}`, menuTpl, {
+        data: createObject(
+          createObject(data, {
+            ...states,
+            ...ctx
+          }),
+          option
+        )
+      });
+    }
+
+    return BaseSelection.itemRender(option, states);
+  }
+
   render() {
     const {
       className,
@@ -100,6 +88,8 @@ export class TabsTransferRenderer extends BaseTransferRenderer<TabsTransferProps
           onDeferLoad={deferLoad}
           selectTitle={selectTitle}
           resultTitle={resultTitle}
+          optionItemRender={this.optionItemRender}
+          resultItemRender={this.resultItemRender}
         />
 
         <Spinner overlay key="info" show={loading} />

package/src/renderers/Form/TabsTransferPicker.tsx

@@ -4,60 +4,21 @@ import {
   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 {SchemaApi, SchemaObject} from '../../Schema';
 import TabsTransferPicker from '../../components/TabsTransferPicker';
+import {TabsTransferControlSchema} from './TabsTransfer';
+import {autobind, createObject} from '../../utils/helper';
+import {BaseSelection, ItemRenderStates} from '../../components/Selection';
 
 /**
  * TabsTransferPicker 穿梭器的弹框形态
  * 文档：https://baidu.gitee.io/amis/docs/components/form/tabs-transfer-picker
  */
-export interface TabsTransferPickerControlSchema extends FormOptionsControl {
+export interface TabsTransferPickerControlSchema
+  extends Omit<TabsTransferControlSchema, 'type'> {
   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
@@ -75,6 +36,26 @@ export interface TabsTransferProps
   type: 'tabs-transfer-picker'
 })
 export class TabsTransferPickerRenderer extends BaseTransferRenderer<TabsTransferProps> {
+  @autobind
+  optionItemRender(option: any, states: ItemRenderStates) {
+    const {menuTpl, render, data} = this.props;
+    const ctx = arguments[2] || {};
+
+    if (menuTpl) {
+      return render(`item/${states.index}`, menuTpl, {
+        data: createObject(
+          createObject(data, {
+            ...states,
+            ...ctx
+          }),
+          option
+        )
+      });
+    }
+
+    return BaseSelection.itemRender(option, states);
+  }
+
   render() {
     const {
       className,
@@ -91,7 +72,6 @@ export class TabsTransferPickerRenderer extends BaseTransferRenderer<TabsTransfe
       selectTitle,
       resultTitle,
       pickerSize,
-      columns,
       leftMode,
       leftOptions
     } = this.props;
@@ -114,6 +94,8 @@ export class TabsTransferPickerRenderer extends BaseTransferRenderer<TabsTransfe
           size={pickerSize}
           leftMode={leftMode}
           leftOptions={leftOptions}
+          optionItemRender={this.optionItemRender}
+          resultItemRender={this.resultItemRender}
         />
 
         <Spinner overlay key="info" show={loading} />

package/src/renderers/Form/Transfer.tsx

@@ -5,20 +5,28 @@ import {
 } from './Options';
 import React from 'react';
 import Transfer from '../../components/Transfer';
-import {Option} from './Options';
+import type {Option} from './Options';
 import {
   autobind,
   filterTree,
   string2regExp,
   createObject,
-  findTree
+  findTree,
+  findTreeIndex,
+  getTree,
+  spliceTree
 } from '../../utils/helper';
 import {Api} from '../../types';
 import Spinner from '../../components/Spinner';
 import find from 'lodash/find';
 import {optionValueCompare} from '../../components/Select';
 import {resolveVariable} from '../../utils/tpl-builtin';
-import {SchemaApi} from '../../Schema';
+import {SchemaApi, SchemaObject} from '../../Schema';
+import {BaseSelection, ItemRenderStates} from '../../components/Selection';
+import {
+  ItemRenderStates as ResultItemRenderStates,
+  ResultList
+} from '../../components/ResultList';
 
 /**
  * Transfer
@@ -91,6 +99,16 @@ export interface TransferControlSchema extends FormOptionsControl {
    * 右侧结果的标题文字
    */
   resultTitle?: string;
+
+  /**
+   * 用来丰富选项展示
+   */
+  menuTpl?: SchemaObject;
+
+  /**
+   * 用来丰富值的展示
+   */
+  valueTpl?: SchemaObject;
 }
 
 export interface BaseTransferProps
@@ -103,7 +121,6 @@ export interface BaseTransferProps
       | 'descriptionClassName'
       | 'inputClassName'
     > {
-  optionItemRender?: (option: Option) => JSX.Element;
   resultItemRender?: (option: Option) => JSX.Element;
 }
 
@@ -111,7 +128,7 @@ export class BaseTransferRenderer<
   T extends OptionsControlProps = BaseTransferProps
 > extends React.Component<T> {
   @autobind
-  handleChange(value: Array<Option>) {
+  handleChange(value: Array<Option>, optionModified?: boolean) {
     const {
       onChange,
       joinValues,
@@ -125,30 +142,37 @@ export class BaseTransferRenderer<
     let newOptions = options.concat();
 
     if (Array.isArray(value)) {
-      if (joinValues || extractValue) {
-        newValue = value.map(item => {
-          const resolved = findTree(
-            options,
-            optionValueCompare(
-              item[(valueField as string) || 'value'],
-              (valueField as string) || 'value'
-            )
-          );
+      newValue = value.map(item => {
+        const indexes = findTreeIndex(
+          options,
+          optionValueCompare(
+            item[(valueField as string) || 'value'],
+            (valueField as string) || 'value'
+          )
+        );
 
-          if (!resolved) {
-            newOptions.push(item);
-          }
+        if (!indexes) {
+          newOptions.push(item);
+        } else if (optionModified) {
+          const origin = getTree(newOptions, indexes);
+          newOptions = spliceTree(newOptions, indexes, 1, {
+            ...origin,
+            ...item
+          });
+        }
 
-          return item[(valueField as string) || 'value'];
-        });
-      }
+        return joinValues || extractValue
+          ? item[(valueField as string) || 'value']
+          : item;
+      });
 
       if (joinValues) {
         newValue = newValue.join(delimiter || ',');
       }
     }
 
-    newOptions.length > options.length && setOptions(newOptions, true);
+    (newOptions.length > options.length || optionModified) &&
+      setOptions(newOptions, true);
     onChange(newValue);
   }
 
@@ -220,6 +244,33 @@ export class BaseTransferRenderer<
     }
   }
 
+  @autobind
+  optionItemRender(option: Option, states: ItemRenderStates) {
+    const {menuTpl, render, data} = this.props;
+
+    if (menuTpl) {
+      return render(`item/${states.index}`, menuTpl, {
+        data: createObject(createObject(data, states), option)
+      });
+    }
+
+    return BaseSelection.itemRender(option, states);
+  }
+
+  @autobind
+  resultItemRender(option: Option, states: ResultItemRenderStates) {
+    const {valueTpl, render, data} = this.props;
+
+    if (valueTpl) {
+      return render(`value/${states.index}`, valueTpl, {
+        onChange: states.onChange,
+        data: createObject(createObject(data, states), option)
+      });
+    }
+
+    return ResultList.itemRender(option);
+  }
+
   @autobind
   renderCell(
     column: {
@@ -264,7 +315,7 @@ export class BaseTransferRenderer<
       disabled,
       selectTitle,
       resultTitle,
-      optionItemRender,
+      menuTpl,
       resultItemRender
     } = this.props;
 
@@ -306,8 +357,8 @@ export class BaseTransferRenderer<
           cellRender={this.renderCell}
           selectTitle={selectTitle}
           resultTitle={resultTitle}
-          optionItemRender={optionItemRender}
-          resultItemRender={resultItemRender}
+          optionItemRender={this.optionItemRender}
+          resultItemRender={this.resultItemRender}
         />
 
         <Spinner overlay key="info" show={loading} />

package/src/renderers/Form/TransferPicker.tsx

@@ -6,57 +6,23 @@ import {
 import React from 'react';
 import {Api} from '../../types';
 import Spinner from '../../components/Spinner';
-import {BaseTransferRenderer} from './Transfer';
+import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
 import TabsTransfer from '../../components/TabsTransfer';
-import {SchemaApi} from '../../Schema';
+import {SchemaApi, SchemaObject} from '../../Schema';
 import TransferPicker from '../../components/TransferPicker';
 
 /**
  * TransferPicker 穿梭器的弹框形态
  * 文档：https://baidu.gitee.io/amis/docs/components/form/transfer-picker
  */
-export interface TransferPickerControlSchema extends FormOptionsControl {
+export interface TransferPickerControlSchema
+  extends Omit<TransferControlSchema, 'type'> {
   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;
-
   /**
    * 弹窗大小
    */
@@ -136,6 +102,8 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
           columns={columns}
           leftMode={leftMode}
           leftOptions={leftOptions}
+          optionItemRender={this.optionItemRender}
+          resultItemRender={this.resultItemRender}
         />
 
         <Spinner overlay key="info" show={loading} />