amis 1.5.7 → 1.6.1

package/src/renderers/Form/Select.tsx

@@ -11,7 +11,7 @@ import find from 'lodash/find';
 import debouce from 'lodash/debounce';
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
-import {isEmpty, createObject, autobind} from '../../utils/helper';
+import {isEmpty, createObject, autobind, isMobile} from '../../utils/helper';
 import {dataMapping} from '../../utils/tpl-builtin';
 import {SchemaApi} from '../../Schema';
 import Spinner from '../../components/Spinner';
@@ -91,6 +91,7 @@ export interface SelectProps extends OptionsControlProps {
   autoComplete?: Api;
   searchable?: boolean;
   defaultOpen?: boolean;
+  useMobileUI?: boolean;
 }
 
 export default class SelectControl extends React.Component<SelectProps, any> {
@@ -231,8 +232,12 @@ export default class SelectControl extends React.Component<SelectProps, any> {
   }
 
   mergeOptions(options: Array<object>) {
-    const {selectedOptions} = this.props;
-    let combinedOptions = normalizeOptions(options).concat();
+    const {selectedOptions, valueField = 'value'} = this.props;
+    let combinedOptions = normalizeOptions(
+      options,
+      undefined,
+      valueField
+    ).concat();
 
     if (Array.isArray(selectedOptions) && selectedOptions.length) {
       selectedOptions.forEach(option => {
@@ -298,6 +303,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       borderMode,
       selectMode,
       env,
+      useMobileUI,
       ...rest
     } = this.props;
 
@@ -305,6 +311,8 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       noResultsText = render('noResultText', noResultsText);
     }
 
+    const mobileUI = useMobileUI && isMobile();
+
     return (
       <div className={cx(`${classPrefix}SelectControl`, className)}>
         {['table', 'list', 'group', 'tree', 'chained', 'associated'].includes(
@@ -314,7 +322,12 @@ export default class SelectControl extends React.Component<SelectProps, any> {
         ) : (
           <Select
             {...rest}
-            useMobileUI={env.useMobileUI}
+            useMobileUI={useMobileUI}
+            popOverContainer={
+              mobileUI && env && env.getModalContainer
+                ? env.getModalContainer
+                : rest.popOverContainer
+            }
             borderMode={borderMode}
             placeholder={placeholder}
             multiple={multiple || multi}
@@ -348,6 +361,7 @@ export interface TransferDropDownProps
       | 'descriptionClassName'
     > {
   borderMode?: 'full' | 'half' | 'none';
+  useMobileUI?: boolean;
 }
 
 class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProps> {
@@ -368,7 +382,8 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
       multiple,
       columns,
       leftMode,
-      borderMode
+      borderMode,
+      useMobileUI
     } = this.props;
 
     // 目前 LeftOptions 没有接口可以动态加载
@@ -408,6 +423,7 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
           leftMode={leftMode}
           leftOptions={leftOptions}
           borderMode={borderMode}
+          useMobileUI={useMobileUI}
         />
 
         <Spinner overlay key="info" show={loading} />

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} />

package/src/renderers/Form/TreeSelect.tsx

@@ -568,12 +568,13 @@ export default class TreeSelectControl extends React.Component<
       selectedOptions,
       placeholder,
       popOverContainer,
-      env,
-      translate: __
+      useMobileUI,
+      translate: __,
+      env
     } = this.props;
 
-    const { isOpened } = this.state;
-    const { useMobileUI } = env;
+    const {isOpened} = this.state;
+    const mobileUI = useMobileUI && isMobile();
     return (
       <div ref={this.container} className={cx(`TreeSelectControl`, className)}>
         <ResultBox
@@ -612,7 +613,7 @@ export default class TreeSelectControl extends React.Component<
         >
           {loading ? <Spinner size="sm" /> : undefined}
         </ResultBox>
-        { !(useMobileUI && isMobile()) && isOpened ? (
+        {!mobileUI && isOpened ? (
           <Overlay
             container={popOverContainer || (() => this.container.current)}
             target={() => this.target}
@@ -631,17 +632,18 @@ export default class TreeSelectControl extends React.Component<
             </PopOver>
           </Overlay>
         ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              className={cx(`${ns}TreeSelect-popup`)}
-              isShow={isOpened}
-              onHide={this.close}
-            >
-              {this.renderOuter()}
-            </PopUp>
-          )
-        }
+        {mobileUI ? (
+          <PopUp
+            container={
+              env && env.getModalContainer ? env.getModalContainer : undefined
+            }
+            className={cx(`${ns}TreeSelect-popup`)}
+            isShow={isOpened}
+            onHide={this.close}
+          >
+            {this.renderOuter()}
+          </PopUp>
+        ) : null}
       </div>
     );
   }

package/src/renderers/Form/index.tsx

@@ -1133,7 +1133,13 @@ export default class Form extends React.Component<FormProps, object> {
         });
     } else if (action.actionType === 'reload') {
       store.setCurrentAction(action);
-      action.target && this.reloadTarget(action.target, data);
+      if (action.target) {
+        this.reloadTarget(action.target, data);
+      } else {
+        // 刷自己
+        this.receive(data);
+      }
+      // action.target && this.reloadTarget(action.target, data);
     } else if (onAction) {
       // 不识别的丢给上层去处理。
       return onAction(e, action, data, throwErrors, delegate || this.context);

package/src/renderers/IFrame.tsx

@@ -161,8 +161,6 @@ export default class IFrame extends React.Component<IFrameProps, object> {
       ...style
     };
 
-    src = dataMapping(src, data);
-
     const finalSrc = src ? buildApi(src, data).url : undefined;
 
     if (

package/src/renderers/Link.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaTpl} from '../Schema';
-import {autobind, getPropValue} from '../utils/helper';
+import {autobind, createObject, getPropValue} from '../utils/helper';
 import {filter} from '../utils/tpl';
 import {BadgeSchema, withBadge} from '../components/Badge';
 import Link from '../components/Link';
@@ -58,8 +58,8 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
     htmlTarget: ''
   };
 
-  handleClick(href: string) {
-    const {env, blank, body} = this.props;
+  async handleClick(href: string) {
+    const {env, blank, body, dispatchEvent, data} = this.props;
     env?.tracker(
       {
         eventType: 'url',
@@ -68,6 +68,21 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
       },
       this.props
     );
+    // 触发渲染器事件
+    const rendererEvent = await dispatchEvent(
+      'click',
+      createObject(data, {
+        // 注意：每个组件都必须把数据链带上
+        url: href,
+        blank,
+        label: body
+      })
+    );
+
+    // 阻止原有动作执行
+    if (rendererEvent?.prevented) {
+      return;
+    }
   }
 
   getHref() {}

package/src/renderers/Log.tsx

@@ -131,7 +131,11 @@ export class Log extends React.Component<LogProps, LogState> {
     if (!api.url) {
       return;
     }
-    const res = await fetch(api.url);
+    const res = await fetch(api.url, {
+      method: api.method?.toLocaleUpperCase() || 'GET',
+      headers: (api.headers as Record<string, string>) || undefined,
+      body: api.data ? JSON.stringify(api.data) : undefined
+    });
     if (res.status === 200) {
       const body = res.body;
       if (!body) {