amis 1.6.0 → 1.6.1-beta.0

package/src/components/DateRangePicker.tsx

@@ -865,7 +865,8 @@ export class DateRangePicker extends React.Component<
           {
             'is-disabled': disabled,
             'is-focused': isFocused,
-            [`${ns}DateRangePicker--border${ucFirst(borderMode)}`]: borderMode
+            [`${ns}DateRangePicker--border${ucFirst(borderMode)}`]: borderMode,
+            'is-mobile': useMobileUI && isMobile()
           },
           className
         )}

package/src/components/MonthRangePicker.tsx

@@ -624,7 +624,8 @@ export class MonthRangePicker extends React.Component<
           `${ns}DateRangePicker`,
           {
             'is-disabled': disabled,
-            'is-focused': isFocused
+            'is-focused': isFocused,
+            'is-mobile': useMobileUI && isMobile()
           },
           className
         )}

package/src/components/Select.tsx

@@ -184,7 +184,8 @@ export function normalizeOptions(
   } = {
     values: [],
     options: []
-  }
+  },
+  valueField = 'value'
 ): Options {
   if (typeof options === 'string') {
     return options.split(',').map(item => {
@@ -225,7 +226,7 @@ export function normalizeOptions(
     });
   } else if (Array.isArray(options as Options)) {
     return (options as Options).map(item => {
-      const value = item && item.value;
+      const value = item && item[valueField];
 
       const idx =
         value !== undefined && !item.children
@@ -242,7 +243,7 @@ export function normalizeOptions(
       };
 
       if (typeof option.children !== 'undefined') {
-        option.children = normalizeOptions(option.children, share);
+        option.children = normalizeOptions(option.children, share, valueField);
       } else if (value !== undefined) {
         share.values.push(value);
         share.options.push(option);

package/src/components/Timeline.tsx

@@ -15,7 +15,7 @@ export function Timeline(props: TimelineProps) {
     classnames: cx,
     direction = 'vertical',
     reverse = false,
-    mode = 'right',
+    mode = 'right'
   } = props;
 
   const timelineDatasource = items?.slice();
@@ -23,9 +23,14 @@ export function Timeline(props: TimelineProps) {
   reverse && timelineDatasource?.reverse();
 
   return (
-    <div className={cx('Timeline', `Timeline-${direction}`, `Timeline-${mode}`)}>
-      {timelineDatasource?.map((item: TimelineItemProps) => <TimelineItem {...item} />)}
-    </div>)
+    <div
+      className={cx('Timeline', `Timeline-${direction}`, `Timeline-${mode}`)}
+    >
+      {timelineDatasource?.map((item: TimelineItemProps, index: number) => (
+        <TimelineItem {...item} key={`TimelineItem-${index}`} />
+      ))}
+    </div>
+  );
 }
 
 export default themeable(Timeline);

package/src/components/TimelineItem.tsx

@@ -13,11 +13,11 @@ export interface TimelineItemProps {
   /**
    * 事件名称
    */
-  title?: string| ReactNode;
+  title?: string | ReactNode;
 
   /**
-    * 详细内容
-    */
+   * 详细内容
+   */
   detail?: string;
 
   /**
@@ -25,9 +25,9 @@ export interface TimelineItemProps {
    */
   detailCollapsedText?: string;
 
-   /**
-    * detail展开时文案
-    */
+  /**
+   * detail展开时文案
+   */
   detailExpandedText?: string;
 
   /**
@@ -41,7 +41,12 @@ export interface TimelineItemProps {
   icon?: string | ReactNode;
 }
 
-export interface TimelineItem extends ThemeProps, LocaleProps, TimelineItemProps {}
+export interface TimelineItem
+  extends ThemeProps,
+    LocaleProps,
+    TimelineItemProps {
+  key: string;
+}
 
 export function TimelineItem(props: TimelineItem) {
   const {
@@ -54,25 +59,46 @@ export function TimelineItem(props: TimelineItem) {
     icon,
     classnames: cx,
     translate: __,
+    key
   } = props;
 
   const [detailVisible, setDetailVisible] = useState<boolean>(false);
 
-  const renderDetail = (detail: string, detailCollapsedText: string = __('Timeline.collapseText'), detailExpandedText: string = __('Timeline.expandText')) : ReactNode => {
-
+  const renderDetail = (
+    detail: string,
+    detailCollapsedText: string = __('Timeline.collapseText'),
+    detailExpandedText: string = __('Timeline.expandText')
+  ): ReactNode => {
     return (
       <>
-        <div className={cx('TimelineItem-detail-button')} onClick={() => setDetailVisible(!detailVisible)}>
+        <div
+          className={cx('TimelineItem-detail-button')}
+          onClick={() => setDetailVisible(!detailVisible)}
+        >
           {detailVisible ? detailExpandedText : detailCollapsedText}
-          <div className={cx('TimelineItem-detail-arrow', `${detailVisible && 'TimelineItem-detail-arrow-top'}`)}>
-            <Icon icon="tree-down"/>
+          <div
+            className={cx(
+              'TimelineItem-detail-arrow',
+              `${detailVisible && 'TimelineItem-detail-arrow-top'}`
+            )}
+          >
+            <Icon icon="tree-down" />
           </div>
         </div>
-        <div className={cx(`${detailVisible ? 'TimelineItem-detail-visible' : 'TimelineItem-detail-invisible'}`)}>
+        <div
+          className={cx(
+            `${
+              detailVisible
+                ? 'TimelineItem-detail-visible'
+                : 'TimelineItem-detail-invisible'
+            }`
+          )}
+        >
           {detail}
         </div>
-      </>);
-  }
+      </>
+    );
+  };
 
   // 判断是否为颜色值
   const isColorVal = color && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color);
@@ -81,27 +107,34 @@ export function TimelineItem(props: TimelineItem) {
   const levelColor = !isColorVal && color;
 
   return (
-    <div className={cx('TimelineItem')}>
+    <div className={cx('TimelineItem')} key={key}>
       <div className={cx('TimelineItem-axle')}>
         <div className={cx('TimelineItem-line')}></div>
-        {icon
-          ? <div className={cx('TimelineItem-icon')}>
-              <Icon icon={icon} className="icon"/>
-            </div>
-          : <div
-              className={cx('TimelineItem-round',
-                            levelColor && `TimelineItem-round--${levelColor}`)}
-              style={isColorVal ? {backgroundColor: color} : undefined}
-            ></div>
-        }
+        {icon ? (
+          <div className={cx('TimelineItem-icon')}>
+            <Icon icon={icon} className="icon" />
+          </div>
+        ) : (
+          <div
+            className={cx(
+              'TimelineItem-round',
+              levelColor && `TimelineItem-round--${levelColor}`
+            )}
+            style={isColorVal ? {backgroundColor: color} : undefined}
+          ></div>
+        )}
       </div>
       <div className={cx('TimelineItem-content')}>
         <div className={cx('TimelineItem-time')}>{time}</div>
         <div className={cx('TimelineItem-title')}>{title}</div>
-        {detail
-          && <div className={cx('TimelineItem-detail')}>{renderDetail(detail, detailCollapsedText, detailExpandedText)}</div>}
+        {detail && (
+          <div className={cx('TimelineItem-detail')}>
+            {renderDetail(detail, detailCollapsedText, detailExpandedText)}
+          </div>
+        )}
       </div>
-    </div>)
+    </div>
+  );
 }
 
 export default themeable(localeable(TimelineItem));

package/src/components/formula/plugin.ts

@@ -13,8 +13,6 @@ export function editorFactory(
 ) {
   registerLaunguageMode(cm);
 
-  console.log('here', props.evalMode);
-
   return cm(dom, {
     value: props.value || '',
     autofocus: true,

package/src/env.tsx

@@ -6,6 +6,11 @@ import {RendererConfig} from './factory';
 import {ThemeInstance} from './theme';
 import {Action, Api, Payload, Schema} from './types';
 import hoistNonReactStatic from 'hoist-non-react-statics';
+import {
+  RendererEvent,
+  RendererEventListener,
+  EventListeners
+} from './utils/renderer-event';
 
 export interface RendererEnv {
   fetcher: (api: Api, data?: any, options?: object) => Promise<Payload>;
@@ -54,6 +59,23 @@ export interface RendererEnv {
   ) => Promise<React.ReactType> | React.ReactType | JSX.Element | void;
   loadChartExtends?: () => void | Promise<void>;
   useMobileUI?: boolean;
+  bindEvent: (context: any) => (() => void) | undefined;
+  dispatchEvent: (
+    e:
+      | string
+      | React.ClipboardEvent<any>
+      | React.DragEvent<any>
+      | React.ChangeEvent<any>
+      | React.KeyboardEvent<any>
+      | React.TouchEvent<any>
+      | React.WheelEvent<any>
+      | React.AnimationEvent<any>
+      | React.TransitionEvent<any>
+      | React.MouseEvent<any>,
+    context: any,
+    data: any
+  ) => Promise<RendererEvent<any> | undefined>;
+  rendererEventListeners: RendererEventListener[];
   [propName: string]: any;
 }
 

package/src/factory.tsx

@@ -4,6 +4,7 @@ import {getEnv, destroy} from 'mobx-state-tree';
 import {wrapFetcher} from './utils/api';
 import {normalizeLink} from './utils/normalizeLink';
 import {
+  createObject,
   findIndex,
   isObject,
   JSONTraverse,
@@ -33,6 +34,14 @@ import ScopedRootRenderer, {RootRenderProps} from './Root';
 import {HocStoreFactory} from './WithStore';
 import {EnvContext, RendererEnv} from './env';
 import {envOverwrite} from './envOverwrite';
+import {
+  EventListeners,
+  createRendererEvent,
+  RendererEventListener,
+  OnEventProps,
+  RendererEvent
+} from './utils/renderer-event';
+import {runActions} from './actions/Action';
 
 export interface TestFunc {
   (
@@ -63,7 +72,7 @@ export interface RendererBasicConfig {
   // [propName:string]:any;
 }
 
-export interface RendererProps extends ThemeProps, LocaleProps {
+export interface RendererProps extends ThemeProps, LocaleProps, OnEventProps {
   render: (region: string, node: SchemaNode, props?: any) => JSX.Element;
   env: RendererEnv;
   $path: string; // 当前组件所在的层级信息
@@ -259,6 +268,7 @@ const defaultOptions: RenderOptions = {
   richTextToken: '',
   useMobileUI: true, // 是否启用移动端原生 UI
   loadRenderer,
+  rendererEventListeners: [],
   fetcher() {
     return Promise.reject('fetcher is required');
   },
@@ -348,6 +358,82 @@ const defaultOptions: RenderOptions = {
   },
   // 用于跟踪用户在界面中的各种操作
   tracker(eventTrack: EventTrack, props: PlainObject) {},
+  // 返回解绑函数
+  bindEvent(renderer: any) {
+    const listeners: EventListeners = renderer.props.$schema.onEvent;
+    if (listeners) {
+      // 暂存
+      for (let key of Object.keys(listeners)) {
+        this.rendererEventListeners.push({
+          renderer,
+          type: key,
+          weight: listeners[key].weight || 0,
+          actions: listeners[key].actions
+        });
+      }
+
+      return () => {
+        this.rendererEventListeners = this.rendererEventListeners.filter(
+          (item: RendererEventListener) => item.renderer === renderer
+        );
+      };
+    }
+
+    return undefined;
+  },
+  async dispatchEvent(
+    e: string | React.MouseEvent<any>,
+    renderer: React.Component<RendererProps>,
+    data: any,
+    broadcast: RendererEvent<any>
+  ) {
+    const eventName = typeof e === 'string' ? e : e.type;
+    if (!broadcast) {
+      const eventConfig = renderer?.props?.onEvent?.[eventName];
+
+      if (!eventConfig) {
+        // 没命中也没关系
+        return Promise.resolve(undefined);
+      }
+    }
+
+    // 没有可处理的监听
+    if (!this.rendererEventListeners.length) {
+      return Promise.resolve();
+    }
+
+    // 如果是广播动作，就直接复用
+    const rendererEvent =
+      broadcast ||
+      createRendererEvent(eventName, {
+        env: this,
+        nativeEvent: e,
+        data
+      });
+
+    // 过滤&排序
+    const listeners = this.rendererEventListeners
+      .filter(
+        (item: RendererEventListener) =>
+          item.type === eventName &&
+          (broadcast ? true : item.renderer === renderer)
+      )
+      .sort(
+        (prev: RendererEventListener, next: RendererEventListener) =>
+          next.weight - prev.weight
+      );
+
+    for (let listener of listeners) {
+      await runActions(listener.actions, listener.renderer, rendererEvent);
+
+      // 停止后续监听器执行
+      if (rendererEvent.stoped) {
+        break;
+      }
+    }
+
+    return rendererEvent;
+  },
   rendererResolver: resolveRenderer,
   replaceTextIgnoreKeys: [
     'type',

package/src/index.tsx

@@ -41,6 +41,8 @@ import {
 
 import './locale/zh-CN';
 
+import './utils/debug';
+
 import animation from './utils/Animation';
 
 export * from './Schema';
@@ -212,6 +214,8 @@ import {
 } from './theme';
 const classPrefix = getClassPrefix();
 
+import './actions';
+
 export * from './components/index';
 
 export {

package/src/renderers/Action.tsx

@@ -405,6 +405,7 @@ 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
@@ -828,8 +829,16 @@ export class ActionRenderer extends React.Component<
     }
 > {
   @autobind
-  handleAction(e: React.MouseEvent<any> | void | null, action: any) {
-    const {env, onAction, data, ignoreConfirm} = this.props;
+  async handleAction(e: React.MouseEvent<any> | void | null, action: any) {
+    const {env, onAction, data, ignoreConfirm, dispatchEvent} = this.props;
+
+    // 触发渲染器事件
+    const rendererEvent = await dispatchEvent(e as React.MouseEvent<any>, data);
+
+    // 阻止原有动作执行
+    if (rendererEvent?.prevented) {
+      return;
+    }
 
     if (!ignoreConfirm && action.confirmText && env.confirm) {
       env

package/src/renderers/Custom.tsx

@@ -100,7 +100,7 @@ export class Custom extends React.Component<CustomProps, object> {
     this.onMount(this.dom.current, value, onChange, this.props);
   }
 
-  componentwillUnmount() {
+  componentWillUnmount() {
     this.onUnmount(this.props);
   }
 

package/src/renderers/Form/Options.tsx

@@ -300,7 +300,7 @@ export function registerOptionsControl(config: OptionsConfig) {
 
       if (formItem) {
         formItem.setOptions(
-          normalizeOptions(options),
+          normalizeOptions(options, undefined, valueField),
           this.changeOptionValue,
           data
         );
@@ -383,14 +383,14 @@ export function registerOptionsControl(config: OptionsConfig) {
 
       if (prevProps.options !== props.options && formItem) {
         formItem.setOptions(
-          normalizeOptions(props.options || []),
+          normalizeOptions(props.options || [], undefined, props.valueField),
           this.changeOptionValue,
           props.data
         );
         this.normalizeValue();
       } else if (
         config.autoLoadOptionsFromSource !== false &&
-        props.formInited &&
+        (props.formInited || typeof props.formInited === 'undefined') &&
         props.source &&
         formItem &&
         (prevProps.source !== props.source || prevProps.data !== props.data)
@@ -409,7 +409,11 @@ export function registerOptionsControl(config: OptionsConfig) {
 
           if (prevOptions !== options) {
             formItem.setOptions(
-              normalizeOptions(options || []),
+              normalizeOptions(
+                options || [],
+                undefined,
+                props.valueField || 'value'
+              ),
               this.changeOptionValue,
               props.data
             );
@@ -707,14 +711,16 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     @autobind
     reloadOptions(setError?: boolean, isInit = false) {
-      const {source, formItem, data, onChange, setPrinstineValue, selectFirst} =
+      const {source, formItem, data, onChange, setPrinstineValue, valueField} =
         this.props;
 
       if (formItem && isPureVariable(source as string)) {
         isAlive(formItem) &&
           formItem.setOptions(
             normalizeOptions(
-              resolveVariableAndFilter(source as string, data, '| raw') || []
+              resolveVariableAndFilter(source as string, data, '| raw') || [],
+              undefined,
+              valueField
             ),
             this.changeOptionValue,
             data
@@ -808,7 +814,9 @@ export function registerOptionsControl(config: OptionsConfig) {
       const formItem = this.props.formItem as IFormItemStore;
       formItem &&
         formItem.setOptions(
-          skipNormalize ? options : normalizeOptions(options || []),
+          skipNormalize
+            ? options
+            : normalizeOptions(options || [], undefined, this.props.valueField),
           this.changeOptionValue,
           this.props.data
         );

package/src/renderers/Form/Select.tsx

@@ -232,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 => {
@@ -322,7 +326,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
             popOverContainer={
               mobileUI && env && env.getModalContainer
                 ? env.getModalContainer
-                : undefined
+                : rest.popOverContainer
             }
             borderMode={borderMode}
             placeholder={placeholder}

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/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/store/formItem.ts

@@ -595,7 +595,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
         json.data ||
         [];
 
-      options = normalizeOptions(options as any);
+      options = normalizeOptions(options as any, undefined, self.valueField);
 
       if (config?.extendsOptions && self.selectedOptions.length > 0) {
         self.selectedOptions.forEach((item: any) => {

package/src/utils/api.ts

@@ -15,6 +15,7 @@ import {
   uuid
 } from './helper';
 import isPlainObject from 'lodash/isPlainObject';
+import {debug} from './debug';
 
 const rSchema = /(?:^|raw\:)(get|post|put|delete|patch|options|head|jsonp):/i;
 
@@ -265,7 +266,10 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
     payload.errors = data.errors;
   }
 
+  debug('api', 'response', payload);
+
   if (payload.ok && api.responseData) {
+    debug('api', 'before dataMapping', payload.data);
     const responseData = dataMapping(
       api.responseData,
 
@@ -280,7 +284,7 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
       undefined,
       api.convertKeyToPath
     );
-    console.debug('responseData', responseData);
+    debug('api', 'after dataMapping', responseData);
     payload.data = responseData;
   }
 
@@ -294,7 +298,11 @@ export function wrapFetcher(
   return function (api, data, options) {
     api = buildApi(api, data, options) as ApiObject;
 
-    api.requestAdaptor && (api = api.requestAdaptor(api) || api);
+    if (api.requestAdaptor) {
+      debug('api', 'before requestAdaptor', api);
+      api = api.requestAdaptor(api) || api;
+      debug('api', 'after requestAdaptor', api);
+    }
 
     if (api.data && (hasFile(api.data) || api.dataType === 'form-data')) {
       api.data =
@@ -319,6 +327,8 @@ export function wrapFetcher(
       api.headers['Content-Type'] = 'application/json';
     }
 
+    debug('api', 'request api', api);
+
     tracker?.(
       {eventType: 'api', eventData: omit(api, ['config', 'data', 'body'])},
       api.data
@@ -355,12 +365,15 @@ export function wrapAdaptor(promise: Promise<fetcherResult>, api: ApiObject) {
   return adaptor
     ? promise
         .then(async response => {
+          debug('api', 'before adaptor data', (response as any).data);
           let result = adaptor((response as any).data, response, api);
 
           if (result?.then) {
             result = await result;
           }
 
+          debug('api', 'after adaptor data', result);
+
           return {
             ...response,
             data: result