amis 1.9.1-beta.12 → 1.9.1-beta.18

package/src/renderers/Action.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import hotkeys from 'hotkeys-js';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
 import {Renderer, RendererProps} from '../factory';
 import {filter} from '../utils/tpl';
 import Button from '../components/Button';
-import pick from 'lodash/pick';
-import omit from 'lodash/omit';
+import {ScopedContext} from '../Scoped';
+import {isObject} from '../utils/helper';
+
+import type {IScopedContext} from '../Scoped';
+import type {Action as ICmptAction} from '../types';
 
 export interface ButtonSchema extends BaseSchema {
   /**
@@ -407,7 +412,8 @@ const ActionProps = [
   'copyFormat',
   'payload',
   'requireSelected',
-  'countDown'
+  'countDown',
+  'fileName'
 ];
 import {filterContents} from './Remark';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
@@ -431,7 +437,6 @@ import {generateIcon} from '../utils/icon';
 import {BadgeSchema, withBadge} from '../components/Badge';
 import {normalizeApi, str2AsyncFunction} from '../utils/api';
 import {TooltipWrapper} from '../components/TooltipWrapper';
-import handleAction from '../utils/handleAction';
 
 // 构造一个假的 React 事件避免可能的报错，主要用于快捷键功能
 // 来自 https://stackoverflow.com/questions/27062455/reactjs-can-i-create-my-own-syntheticevent
@@ -851,28 +856,68 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
 export default themeable(Action);
 
+export type ActionRendererProps = RendererProps &
+  Omit<ActionProps, 'onAction' | 'isCurrentUrl' | 'tooltipContainer'> & {
+    onAction: (
+      e: React.MouseEvent<any> | string | void | null,
+      action: object,
+      data: any
+    ) => void;
+    btnDisabled?: boolean;
+  };
+
 @Renderer({
   type: 'action'
 })
 // @ts-ignore 类型没搞定
 @withBadge
-export class ActionRenderer extends React.Component<
-  RendererProps &
-    Omit<ActionProps, 'onAction' | 'isCurrentUrl' | 'tooltipContainer'> & {
-      onAction: (
-        e: React.MouseEvent<any> | void | null,
-        action: object,
-        data: any
-      ) => void;
-      btnDisabled?: boolean;
+export class ActionRenderer extends React.Component<ActionRendererProps> {
+  static contextType = ScopedContext;
+
+  constructor(props: ActionRendererProps, scoped: IScopedContext) {
+    super(props);
+
+    scoped.registerComponent(this);
+  }
+
+  componentWillUnmount() {
+    const scoped = this.context as IScopedContext;
+    scoped.unRegisterComponent(this);
+  }
+
+  /**
+   * 动作处理
+   */
+  doAction(
+    action: ICmptAction,
+    args: {
+      value?: string | {[key: string]: string};
+    }
+  ) {
+    const actionType = action?.actionType;
+
+    if (actionType === 'click') {
+      this.handleAction(actionType, action);
     }
-> {
+  }
+
   @autobind
-  async handleAction(e: React.MouseEvent<any> | void | null, action: any) {
+  async handleAction(
+    e: React.MouseEvent<any> | string | void | null,
+    action: any
+  ) {
     const {env, onAction, data, ignoreConfirm, dispatchEvent} = this.props;
+    let mergedData = data;
+
+    if (action?.actionType === 'click' && isObject(action?.args)) {
+      mergedData = createObject(data, action.args);
+    }
 
     // 触发渲染器事件
-    const rendererEvent = await dispatchEvent(e as React.MouseEvent<any>, data);
+    const rendererEvent = await dispatchEvent(
+      e as React.MouseEvent<any> | string,
+      mergedData
+    );
 
     // 阻止原有动作执行
     if (rendererEvent?.prevented) {
@@ -880,14 +925,14 @@ export class ActionRenderer extends React.Component<
     }
 
     if (!ignoreConfirm && action.confirmText && env.confirm) {
-      let confirmed = await env.confirm(filter(action.confirmText, data));
+      let confirmed = await env.confirm(filter(action.confirmText, mergedData));
       if (confirmed) {
-        await onAction(e, action, data);
+        await onAction(e, action, mergedData);
       } else if (action.countDown) {
         throw new Error('cancel');
       }
     } else {
-      await onAction(e, action, data);
+      await onAction(e, action, mergedData);
     }
   }
 

package/src/renderers/Breadcrumb.tsx

@@ -56,7 +56,7 @@ export type ItemPlace = 'start' | 'middle' | 'end';
  * 文档：https://baidu.gitee.io/amis/docs/components/breadcrumb
  */
 
- export interface BreadcrumbSchema extends BaseSchema {
+export interface BreadcrumbSchema extends BaseSchema {
   /**
    *  指定为面包屑显示控件
    */
@@ -103,18 +103,13 @@ export type ItemPlace = 'start' | 'middle' | 'end';
   tooltipPosition?: TooltipPositionType;
 }
 
-export interface BreadcrumbProps extends RendererProps,
-  Omit<BreadcrumbSchema, 'type' | 'className'> {}
+export interface BreadcrumbProps
+  extends RendererProps,
+    Omit<BreadcrumbSchema, 'type' | 'className'> {}
 
 export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
   render() {
-    const {
-      items,
-      source,
-      data,
-      env,
-      ...restProps
-    } = this.props;
+    const {items, source, data, env, ...restProps} = this.props;
 
     let crumbItems = items
       ? items
@@ -128,7 +123,7 @@ export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
         item.label = filter(item.label, data);
       }
       if (item.href) {
-        item.href = filter(item.href, data);
+        item.href = resolveVariableAndFilter(item.href, data, '| raw');
       }
       if (item.dropdown) {
         item.dropdown = item.dropdown.map(dropdownItem => {
@@ -136,7 +131,11 @@ export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
             dropdownItem.label = filter(dropdownItem.label, data);
           }
           if (dropdownItem.href) {
-            dropdownItem.href = filter(dropdownItem.href, data);
+            dropdownItem.href = resolveVariableAndFilter(
+              dropdownItem.href,
+              data,
+              '| raw'
+            );
           }
           return dropdownItem;
         });

package/src/renderers/CRUD.tsx

@@ -670,6 +670,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             throw e;
           }
         });
+    } else if (action.actionType === 'reload' && !action.target) {
+      this.reload();
     } else if (
       pickerMode &&
       (action.actionType === 'confirm' || action.actionType === 'submit')

package/src/renderers/Form/InputFormula.tsx

@@ -54,7 +54,7 @@ export interface InputFormulaControlSchema extends FormBaseControl {
   /**
    * 控件模式
    */
-  inputMode?: 'button' | 'input-button';
+  inputMode?: 'button' | 'input-button' | 'input-group';
 
   /**
    * 外层input是否允许输入，否需要点击fx在弹窗中输入
@@ -94,6 +94,11 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   borderMode?: 'full' | 'half' | 'none';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 输入框占位符
    */
@@ -123,11 +128,12 @@ export interface InputFormulaProps
 export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
   static defaultProps: Pick<
     InputFormulaControlSchema,
-    'inputMode' | 'borderMode' | 'evalMode'
+    'inputMode' | 'borderMode' | 'evalMode' | 'onlyVariable'
   > = {
     inputMode: 'input-button',
     borderMode: 'full',
-    evalMode: true
+    evalMode: true,
+    onlyVariable: false
   };
 
   ref: any;
@@ -162,6 +168,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       onChange,
       evalMode,
       variableMode,
+      onlyVariable,
       header,
       label,
       value,
@@ -206,6 +213,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
         evalMode={evalMode}
         variables={variables}
         variableMode={variableMode}
+        onlyVariable={onlyVariable}
         functions={functions}
         header={header || label || ''}
         borderMode={borderMode}

package/src/renderers/Form/InputTree.tsx

@@ -62,6 +62,11 @@ export interface TreeControlSchema extends FormOptionsControl {
    */
   onlyChildren?: boolean;
 
+  /**
+   * 单选时，只运行选择叶子节点
+   */
+  onlyLeaf?: boolean;
+
   /**
    * 顶级节点是否可以创建子节点
    */
@@ -174,6 +179,7 @@ export default class TreeControl extends React.Component<TreeProps> {
       unfoldedLevel,
       withChildren,
       onlyChildren,
+      onlyLeaf,
       loading,
       hideRoot,
       rootLabel,
@@ -228,6 +234,7 @@ export default class TreeControl extends React.Component<TreeProps> {
             unfoldedLevel={unfoldedLevel}
             withChildren={withChildren}
             onlyChildren={onlyChildren}
+            onlyLeaf={onlyLeaf}
             hideRoot={hideRoot}
             rootLabel={__(rootLabel)}
             rootValue={rootValue}

package/src/renderers/Form/Picker.tsx

@@ -247,7 +247,7 @@ export default class PickerControl extends React.PureComponent<
   }
 
   @autobind
-  handleChange(items: Array<any>) {
+  async handleChange(items: Array<any>) {
     const {
       joinValues,
       valueField,
@@ -255,6 +255,8 @@ export default class PickerControl extends React.PureComponent<
       extractValue,
       multiple,
       options,
+      data,
+      dispatchEvent,
       setOptions,
       onChange
     } = this.props;
@@ -286,6 +288,14 @@ export default class PickerControl extends React.PureComponent<
     });
 
     additionalOptions.length && setOptions(options.concat(additionalOptions));
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {value, option: items[0]})
+    );
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
     onChange(value);
   }
 

package/src/renderers/Form/wrapControl.tsx

@@ -327,7 +327,7 @@ export function wrapControl<
             // 此处需要同时考虑 defaultValue 和 value
             if (model && typeof props.value !== 'undefined') {
               // 渲染器中的 value 优先
-              if (props.value !== prevProps.value && props.value !== model.tmpValue) {
+              if (!isEqual(props.value, prevProps.value) && !isEqual(props.value, model.tmpValue)) {
                 // 外部直接传入的 value 无需执行运算器
                 model.changeTmpValue(props.value);
               }
@@ -338,7 +338,7 @@ export function wrapControl<
             ) {
               // 渲染器中的 defaultValue 优先（备注: SchemaRenderer中会将 value 改成 defaultValue）
               if (
-                props.defaultValue !== prevProps.defaultValue ||
+                !isEqual(props.defaultValue, prevProps.defaultValue) ||
                 (!isEqual(props.data, prevProps.data) &&
                   isNeedFormula(props.defaultValue, props.data, prevProps.data))
               ) {
@@ -350,7 +350,7 @@ export function wrapControl<
                   prevProps.defaultValue,
                   prevProps.data
                 );
-                if (curResult !== prevResult && curResult !== model.tmpValue) {
+                if (!isEqual(curResult, prevResult) && !isEqual(curResult, model.tmpValue)) {
                   // 识别上下文变动、自身数值变动、公式运算结果变动
                   model.changeTmpValue(curResult);
                   if (props.onChange) {
@@ -363,29 +363,29 @@ export function wrapControl<
 
               if (
                 valueByName !== undefined &&
-                props.defaultValue === prevProps.defaultValue
+                isEqual(props.defaultValue, prevProps.defaultValue)
               ) {
                 // value 非公式表达式时，name 值优先，若 defaultValue 主动变动时，则使用 defaultValue
                 if (
                   // 然后才是查看关联的 name 属性值是否变化
-                  props.data !== prevProps.data &&
-                  (!model.emitedValue || model.emitedValue === model.tmpValue)
+                  !isEqual(props.data, prevProps.data) &&
+                  (!model.emitedValue || isEqual(model.emitedValue, model.tmpValue))
                 ) {
                   model.changeEmitedValue(undefined);
                   const prevValueByName = getVariable(props.data, model.name);
                   if (
-                    (valueByName !== prevValueByName ||
+                    (!isEqual(valueByName, prevValueByName) ||
                       getVariable(props.data, model.name, false) !==
                         getVariable(prevProps.data, model.name, false)) &&
-                    valueByName !== model.tmpValue
+                     !isEqual(valueByName, model.tmpValue)
                   ) {
                     model.changeTmpValue(valueByName);
                   }
                 }
               } else if (
                 typeof props.defaultValue !== 'undefined' &&
-                props.defaultValue !== prevProps.defaultValue &&
-                props.defaultValue !== model.tmpValue
+                !isEqual(props.defaultValue, prevProps.defaultValue) &&
+                !isEqual(props.defaultValue, model.tmpValue)
               ) {
                 // 组件默认值非公式
                 const curValue = replaceExpression(props.defaultValue);

package/src/renderers/Service.tsx

@@ -653,7 +653,6 @@ export class ServiceRenderer extends Service {
   }
 
   componentWillUnmount() {
-    super.componentWillUnmount();
     const scoped = this.context as IScopedContext;
     scoped.unRegisterComponent(this as ScopedComponentType);
   }

package/src/renderers/Steps.tsx

@@ -6,7 +6,7 @@ import {
   RemoteOptionsProps,
   withRemoteConfig
 } from '../components/WithRemoteConfig';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import {filter} from '../utils/tpl';
 import {getPropValue} from '../utils/helper';
 
@@ -74,12 +74,12 @@ export interface StepsSchema extends BaseSchema {
   /**
    * 标签放置位置
    */
-   labelPlacement?: 'horizontal' | 'vertical';
+  labelPlacement?: 'horizontal' | 'vertical';
 
-   /**
+  /**
    * 点状步骤条
    */
-    progressDot?: boolean;
+  progressDot?: boolean;
 }
 
 export interface StepsProps
@@ -102,7 +102,7 @@ export function StepsCmpt(props: StepsProps) {
   } = props;
 
   const stepsRow =
-    (resolveVariable(source, data) as Array<StepSchema>) ||
+    (resolveVariableAndFilter(source, data, '| raw') as Array<StepSchema>) ||
     config ||
     steps ||
     [];

package/src/renderers/Table/index.tsx

@@ -972,10 +972,7 @@ export default class Table extends React.Component<TableProps, object> {
       return;
     }
 
-    onSaveOrder(
-      movedItems,
-      items
-    );
+    onSaveOrder(movedItems, items);
   }
 
   syncSelected() {
@@ -2300,7 +2297,10 @@ export default class Table extends React.Component<TableProps, object> {
             onClick={async () => {
               const {data, dispatchEvent} = this.props;
 
-              const allToggled = !(store.activeToggaleColumns.length === store.toggableColumns.length);
+              const allToggled = !(
+                store.activeToggaleColumns.length ===
+                store.toggableColumns.length
+              );
               const rendererEvent = await dispatchEvent(
                 'columnToggled',
                 createObject(data, {
@@ -2341,9 +2341,11 @@ export default class Table extends React.Component<TableProps, object> {
             key={column.index}
             onClick={async () => {
               const {data, dispatchEvent} = this.props;
-              let columns = store.activeToggaleColumns.map(item => item.pristine);
+              let columns = store.activeToggaleColumns.map(
+                item => item.pristine
+              );
               if (!column.toggled) {
-                columns.push(column.pristine)
+                columns.push(column.pristine);
               } else {
                 columns = columns.filter(c => c.name !== column.pristine.name);
               }

package/src/renderers/Table-v2/HeadCellSearchDropdown.tsx

@@ -143,8 +143,8 @@ export class HeadCellSearchDropDown extends React.Component<
     return schema || 'error';
   }
 
-  handleAction(e: any, action: Action, ctx: object, confirm: Function) {
-    const {onAction} = this.props;
+  async handleAction(e: any, action: Action, ctx: object, confirm: Function) {
+    const {onAction, data, dispatchEvent, name} = this.props;
 
     if (action.actionType === 'cancel' || action.actionType === 'close') {
       confirm();
@@ -157,17 +157,14 @@ export class HeadCellSearchDropDown extends React.Component<
       return;
     }
 
-    onAction && onAction(e, action, ctx);
-  }
-
-  async handleReset() {
-    const {onSearch, data, name, store, dispatchEvent} = this.props;
     const values = {...data};
+    this.formItems.forEach(key => setVariable(values, key, undefined));
 
     const rendererEvent = await dispatchEvent(
       'columnSearch',
       createObject(data, {
-        ...values
+        searchName: name,
+        searchValue: values
       })
     );
 
@@ -175,6 +172,13 @@ export class HeadCellSearchDropDown extends React.Component<
       return;
     }
 
+    onAction && onAction(e, action, ctx);
+  }
+
+  async handleReset() {
+    const {onSearch, data, name, store} = this.props;
+    const values = {...data};
+
     this.formItems.forEach(key => setVariable(values, key, undefined));
 
     if (values.orderBy === name) {
@@ -200,7 +204,8 @@ export class HeadCellSearchDropDown extends React.Component<
     const rendererEvent = await dispatchEvent(
       'columnSearch',
       createObject(data, {
-        ...values
+        searchName: name,
+        searchValue: values
       })
     );