amis 1.8.0-beta.13 → 1.8.0-beta.17

package/src/renderers/Date.tsx

@@ -105,6 +105,8 @@ export class DateField extends React.Component<DateProps, DateState> {
 
     const value = getPropValue(this.props);
 
+    // 主要是给 fromNow 用的
+    let date;
     if (value) {
       let ISODate = moment(value, moment.ISO_8601);
       let NormalDate = moment(value, valueFormat);
@@ -114,6 +116,10 @@ export class DateField extends React.Component<DateProps, DateState> {
         : NormalDate.isValid()
         ? NormalDate.format(format)
         : false;
+
+      if (viewValue) {
+        date = viewValue as string;
+      }
     }
 
     if (fromNow) {
@@ -126,7 +132,14 @@ export class DateField extends React.Component<DateProps, DateState> {
       viewValue
     );
 
-    return <span className={cx('DateField', className)}>{viewValue}</span>;
+    return (
+      <span
+        className={cx('DateField', className)}
+        title={fromNow ? date : undefined}
+      >
+        {viewValue}
+      </span>
+    );
   }
 }
 

package/src/renderers/Form/NestedSelect.tsx

@@ -62,7 +62,7 @@ export interface NestedSelectControlSchema extends FormOptionsControl {
   onlyChildren?: boolean;
 
   /**
-   * 单选时只允许选择叶子节点
+   * 只允许选择叶子节点
    */
   onlyLeaf?: boolean;
 
@@ -300,11 +300,20 @@ export default class NestedSelectControl extends React.Component<
       withChildren,
       onlyChildren,
       cascade,
-      options
+      options,
+      onlyLeaf
     } = this.props;
     const {stack} = this.state;
 
     let valueField = this.props.valueField || 'value';
+    
+    if (
+      onlyLeaf
+      && !Array.isArray(option)
+      && option.children
+    ) {
+      return;
+    }
 
     if (
       !Array.isArray(option) &&

package/src/renderers/Form/TabsTransfer.tsx

@@ -1,15 +1,19 @@
-import {
-  OptionsControlProps,
-  OptionsControl,
-  FormOptionsControl
-} from './Options';
+import {OptionsControlProps, OptionsControl} from './Options';
 import React from 'react';
-import {Api} from '../../types';
+import find from 'lodash/find';
 import Spinner from '../../components/Spinner';
 import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
 import TabsTransfer from '../../components/TabsTransfer';
-import {SchemaApi, SchemaObject} from '../../Schema';
-import {autobind, createObject} from '../../utils/helper';
+import {Option, optionValueCompare} from '../../components/Select';
+import {
+  autobind,
+  string2regExp,
+  filterTree,
+  createObject,
+  findTreeIndex,
+  getTree,
+  spliceTree
+} from '../../utils/helper';
 import {BaseSelection, ItemRenderStates} from '../../components/Selection';
 
 /**
@@ -32,10 +36,170 @@ export interface TabsTransferProps
       | 'descriptionClassName'
     > {}
 
+export class BaseTabsTransferRenderer<
+  T extends OptionsControlProps = TabsTransferProps
+> extends BaseTransferRenderer<T> {
+  @autobind
+  async handleTabSearch(
+    term: string,
+    option: Option,
+    cancelExecutor: Function
+  ) {
+    const {options, labelField, valueField, env, data} = this.props;
+    const {searchApi} = option;
+
+    if (searchApi) {
+      try {
+        const payload = await env.fetcher(
+          searchApi,
+          createObject(data, {term}),
+          {
+            cancelExecutor
+          }
+        );
+
+        if (!payload.ok) {
+          throw new Error(payload.msg || '搜索请求异常');
+        }
+
+        const result =
+          payload.data.options || payload.data.items || payload.data;
+        if (!Array.isArray(result)) {
+          throw new Error('CRUD.invalidArray');
+        }
+
+        return result.map(item => {
+          let resolved: any = null;
+          const value = item[valueField || 'value'];
+
+          // 只有 value 值有意义的时候，再去找；否则直接返回
+          if (Array.isArray(options) && value !== null && value !== undefined) {
+            resolved = find(options, optionValueCompare(value, valueField));
+          }
+
+          return resolved || item;
+        });
+      } catch (e) {
+        if (!env.isCancel(e)) {
+          env.notify('error', e.message);
+        }
+
+        return [];
+      }
+    } else if (term) {
+      const regexp = string2regExp(term);
+
+      return filterTree(
+        options,
+        (option: Option) => {
+          return !!(
+            (Array.isArray(option.children) && option.children.length) ||
+            (option[(valueField as string) || 'value'] &&
+              (regexp.test(option[(labelField as string) || 'label']) ||
+                regexp.test(option[(valueField as string) || 'value'])))
+          );
+        },
+        0,
+        true
+      );
+    } else {
+      return options;
+    }
+  }
+
+  @autobind
+  async handleChange(value: Array<Option> | Option, optionModified?: boolean) {
+    const {
+      onChange,
+      joinValues,
+      delimiter,
+      valueField,
+      extractValue,
+      options,
+      dispatchEvent,
+      setOptions,
+      translate: __
+    } = this.props;
+    let newValue: any = value;
+    let newOptions = options.concat();
+    const UN_MATCH_RESULT = 'UN_MATCH_RESULT';
+
+    if (Array.isArray(value)) {
+      newValue = value.map(item => {
+        const indexes = findTreeIndex(
+          options,
+          optionValueCompare(
+            item[(valueField as string) || 'value'],
+            (valueField as string) || 'value'
+          )
+        );
+
+        // 这里主要是把查询出来的没有匹配的搜索的结果（一般是DEFFER时）聚合在一个分类下
+        if (!indexes) {
+          const searchIndexes = findTreeIndex(
+            newOptions,
+            item => item.value === UN_MATCH_RESULT
+          );
+          if (!searchIndexes) {
+            newOptions.push({
+              label: __('searchResult'),
+              value: UN_MATCH_RESULT,
+              visible: false,
+              children: [item]
+            });
+          } else {
+            const origin = getTree(newOptions, searchIndexes);
+            if (origin?.children) {
+              origin.children.push(item);
+              newOptions = spliceTree(newOptions, searchIndexes, 1, {
+                ...origin,
+                ...item
+              });
+            }
+          }
+        } else if (optionModified) {
+          const origin = getTree(newOptions, indexes);
+          newOptions = spliceTree(newOptions, indexes, 1, {
+            ...origin,
+            ...item
+          });
+        }
+
+        return joinValues || extractValue
+          ? item[(valueField as string) || 'value']
+          : item;
+      });
+
+      if (joinValues) {
+        newValue = newValue.join(delimiter || ',');
+      }
+    } else if (value) {
+      newValue =
+        joinValues || extractValue
+          ? value[(valueField as string) || 'value']
+          : value;
+    }
+
+    (newOptions.length > options.length || optionModified) &&
+      setOptions(newOptions, true);
+
+    // 触发渲染器事件
+    const rendererEvent = await dispatchEvent('change', {
+      value: newValue,
+      options
+    });
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange(newValue);
+  }
+}
+
 @OptionsControl({
   type: 'tabs-transfer'
 })
-export class TabsTransferRenderer extends BaseTransferRenderer<TabsTransferProps> {
+export class TabsTransferRenderer extends BaseTabsTransferRenderer<TabsTransferProps> {
   @autobind
   optionItemRender(option: any, states: ItemRenderStates) {
     const {menuTpl, render, data} = this.props;
@@ -64,7 +228,6 @@ export class TabsTransferRenderer extends BaseTransferRenderer<TabsTransferProps
       selectedOptions,
       sortable,
       loading,
-      searchable,
       searchResultMode,
       showArrow,
       deferLoad,
@@ -84,7 +247,7 @@ export class TabsTransferRenderer extends BaseTransferRenderer<TabsTransferProps
           option2value={this.option2value}
           sortable={sortable}
           searchResultMode={searchResultMode}
-          onSearch={searchable ? this.handleSearch : undefined}
+          onSearch={this.handleTabSearch}
           showArrow={showArrow}
           onDeferLoad={deferLoad}
           onLeftDeferLoad={leftDeferLoad}

package/src/renderers/Form/TabsTransferPicker.tsx

@@ -1,15 +1,11 @@
-import {
-  OptionsControlProps,
-  OptionsControl,
-  FormOptionsControl
-} from './Options';
+import {OptionsControlProps, OptionsControl} from './Options';
 import React from 'react';
 import Spinner from '../../components/Spinner';
-import {BaseTransferRenderer} from './Transfer';
-import {SchemaApi, SchemaObject} from '../../Schema';
+import {BaseTabsTransferRenderer} from './TabsTransfer';
 import TabsTransferPicker from '../../components/TabsTransferPicker';
 import {TabsTransferControlSchema} from './TabsTransfer';
 import {autobind, createObject} from '../../utils/helper';
+import {Option, optionValueCompare} from '../../components/Select';
 import {BaseSelection, ItemRenderStates} from '../../components/Selection';
 
 /**
@@ -35,7 +31,7 @@ export interface TabsTransferProps
 @OptionsControl({
   type: 'tabs-transfer-picker'
 })
-export class TabsTransferPickerRenderer extends BaseTransferRenderer<TabsTransferProps> {
+export class TabsTransferPickerRenderer extends BaseTabsTransferRenderer<TabsTransferProps> {
   @autobind
   optionItemRender(option: any, states: ItemRenderStates) {
     const {menuTpl, render, data} = this.props;
@@ -64,7 +60,6 @@ export class TabsTransferPickerRenderer extends BaseTransferRenderer<TabsTransfe
       selectedOptions,
       sortable,
       loading,
-      searchable,
       searchResultMode,
       showArrow,
       deferLoad,
@@ -86,7 +81,7 @@ export class TabsTransferPickerRenderer extends BaseTransferRenderer<TabsTransfe
           option2value={this.option2value}
           sortable={sortable}
           searchResultMode={searchResultMode}
-          onSearch={searchable ? this.handleSearch : undefined}
+          onSearch={this.handleTabSearch}
           showArrow={showArrow}
           onDeferLoad={deferLoad}
           selectTitle={selectTitle}

package/src/renderers/Form/TreeSelect.tsx

@@ -18,7 +18,12 @@ import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
 import Spinner from '../../components/Spinner';
 import ResultBox from '../../components/ResultBox';
-import {autobind, getTreeAncestors, isMobile, createObject} from '../../utils/helper';
+import {
+  autobind,
+  getTreeAncestors,
+  isMobile,
+  createObject
+} from '../../utils/helper';
 import {findDOMNode} from 'react-dom';
 import {normalizeOptions} from '../../components/Select';
 import {Action} from '../../types';
@@ -127,7 +132,7 @@ export default class TreeSelectControl extends React.Component<
     pathSeparator: '/'
   };
 
-  treeRef: any
+  treeRef: any;
 
   container: React.RefObject<HTMLDivElement> = React.createRef();
 
@@ -417,13 +422,8 @@ export default class TreeSelectControl extends React.Component<
 
   @autobind
   handleResultChange(value: Array<Option>) {
-    const {
-      joinValues,
-      extractValue,
-      delimiter,
-      valueField,
-      multiple
-    } = this.props;
+    const {joinValues, extractValue, delimiter, valueField, multiple} =
+      this.props;
 
     let newValue: any = Array.isArray(value) ? value.concat() : [];
 
@@ -452,9 +452,12 @@ export default class TreeSelectControl extends React.Component<
   async resultChangeEvent(value: any) {
     const {onChange, dispatchEvent, data} = this.props;
 
-    const rendererEvent = await dispatchEvent('change', createObject(data, {
-      value
-    }));
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value
+      })
+    );
 
     if (rendererEvent?.prevented) {
       return;

package/src/renderers/Form/index.tsx

@@ -626,7 +626,8 @@ export default class Form extends React.Component<FormProps, object> {
   }
 
   async onInit() {
-    const {onInit, store, persistData, submitOnInit, dispatchEvent} = this.props;
+    const {onInit, store, persistData, submitOnInit, dispatchEvent} =
+      this.props;
     if (!isAlive(store)) {
       return;
     }
@@ -659,7 +660,10 @@ export default class Form extends React.Component<FormProps, object> {
     persistData && store.getLocalPersistData();
 
     // 派发init事件，参数为初始化数据
-    const dispatcher = dispatchEvent('inited', createObject(this.props.data, {formData: data}));
+    const dispatcher = dispatchEvent(
+      'inited',
+      createObject(this.props.data, {formData: data})
+    );
     if (!dispatcher?.prevented) {
       onInit && onInit(data, this.props);
     }
@@ -754,14 +758,16 @@ export default class Form extends React.Component<FormProps, object> {
     const {store, dispatchEvent, data} = this.props;
 
     this.flush();
-    return store.validate(this.hooks['validate'] || [], forceValidate).then((result: boolean) => {
-      if (result) {
-        dispatchEvent('validateSucc', data);
-      } else {
-        dispatchEvent('validateFail', data);
-      }
-      return result;
-    });
+    return store
+      .validate(this.hooks['validate'] || [], forceValidate)
+      .then((result: boolean) => {
+        if (result) {
+          dispatchEvent('validateSucc', data);
+        } else {
+          dispatchEvent('validateFail', data);
+        }
+        return result;
+      });
   }
 
   clearErrors() {
@@ -792,7 +798,7 @@ export default class Form extends React.Component<FormProps, object> {
       fn,
       this.hooks['validate'] || [],
       __(messages && messages.validateFailed),
-      validateErrCb,
+      validateErrCb
     );
   }
 
@@ -859,7 +865,7 @@ export default class Form extends React.Component<FormProps, object> {
   formItemDispatchEvent(dispatchEvent: any) {
     return (type: string, data: any) => {
       dispatchEvent(type, data);
-    }
+    };
   }
 
   emitChange(submit: boolean) {
@@ -868,9 +874,17 @@ export default class Form extends React.Component<FormProps, object> {
     if (!isAlive(store)) {
       return;
     }
-    const dispatcher = dispatchEvent('change', createObject(data, {formData: store.data}));
+    const dispatcher = dispatchEvent(
+      'change',
+      createObject(data, {formData: store.data})
+    );
     if (!dispatcher?.prevented) {
-      onChange && onChange(store.data, difference(store.data, store.pristine), this.props);
+      onChange &&
+        onChange(
+          store.data,
+          difference(store.data, store.pristine),
+          this.props
+        );
     }
 
     store.clearRestError();
@@ -1026,7 +1040,10 @@ export default class Form extends React.Component<FormProps, object> {
               errorMessage: saveFailed,
               onSuccess: (result: Payload) => {
                 // result为提交接口返回的内容
-                dispatchEvent('submitSucc', createObject(this.props.data, {result}));
+                dispatchEvent(
+                  'submitSucc',
+                  createObject(this.props.data, {result})
+                );
                 if (
                   !isEffectiveApi(finnalAsyncApi, store.data) ||
                   store.data[finishedField || 'finished']
@@ -1041,7 +1058,10 @@ export default class Form extends React.Component<FormProps, object> {
                 );
               },
               onFailed: (result: Payload) => {
-                dispatchEvent('submitFail', createObject(this.props.data, {error: result}));
+                dispatchEvent(
+                  'submitFail',
+                  createObject(this.props.data, {error: result})
+                );
               }
             })
             .then(async response => {
@@ -1634,6 +1654,7 @@ export default class Form extends React.Component<FormProps, object> {
   type: 'form',
   storeType: FormStore.name,
   isolateScope: true,
+  storeExtendsData: (props: any) => props.inheritData,
   shouldSyncSuperStore: (store, props, prevProps) => {
     // 如果是 QuickEdit，让 store 同步 __super 数据。
     if (

package/src/renderers/Markdown.tsx

@@ -64,11 +64,10 @@ export class Markdown extends React.Component<MarkdownProps, MarkdownState> {
 
   componentDidUpdate(prevProps: MarkdownProps) {
     const props = this.props;
-    if (
-      props.src &&
-      isApiOutdated(prevProps.src, props.src, prevProps.data, props.data)
-    ) {
-      this.updateContent();
+    if (props.src) {
+      if (isApiOutdated(prevProps.src, props.src, prevProps.data, props.data)) {
+          this.updateContent();
+      }
     } else {
       this.updateContent();
     }

package/src/renderers/Nav.tsx

@@ -230,6 +230,7 @@ export interface NavigationProps
   onSelect?: (item: Link) => void | false;
   onToggle?: (item: Link, forceFold?: boolean) => void;
   onDragUpdate?: (dropInfo: IDropInfo) => void;
+  onOrderChange?: (res: Link[]) => void;
   togglerClassName?: string;
   links?: Array<Link>;
   loading?: boolean;
@@ -858,6 +859,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
         }
       }
       this.props.updateConfig(links, 'update');
+      this.props.onOrderChange!(links);
       await this.saveOrder(
         mapTree(links, (link: Link) => {
           // 清除内部加的字段
@@ -871,6 +873,10 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
       );
     }
 
+    /**
+     * @description 在接口存在的时候，调用接口保存排序结果
+     * @param links 排序后的结果
+     */
     async saveOrder(links: Links) {
       const {saveOrderApi, env, data, reload} = this.props;
       if (saveOrderApi && isEffectiveApi(saveOrderApi)) {
@@ -880,7 +886,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
           {method: 'post'}
         );
         reload();
-      } else {
+      } else if (!this.props.onOrderChange) {
         env.alert('NAV saveOrderApi is required!');
       }
     }

package/src/renderers/Page.tsx

@@ -12,7 +12,12 @@ import {
   FunctionPropertyNames
 } from '../types';
 import {filter, evalExpression} from '../utils/tpl';
-import {isVisible, autobind, bulkBindFunctions} from '../utils/helper';
+import {
+  isVisible,
+  autobind,
+  bulkBindFunctions,
+  isObjectShallowModified
+} from '../utils/helper';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import Alert from '../components/Alert2';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';
@@ -422,7 +427,9 @@ export default class Page extends React.Component<PageProps> {
       JSON.stringify(props.cssVars) !== JSON.stringify(prevProps.cssVars)
     ) {
       this.updateVarStyle();
-    } else if (props.defaultData !== prevProps.defaultData) {
+    } else if (
+      isObjectShallowModified(prevProps.defaultData, props.defaultData)
+    ) {
       store.reInitData(props.defaultData);
     }
   }

package/src/renderers/Service.tsx

@@ -14,7 +14,13 @@ import {
   str2AsyncFunction
 } from '../utils/api';
 import {Spinner} from '../components';
-import {autobind, isEmpty, isVisible, qsstringify} from '../utils/helper';
+import {
+  autobind,
+  isEmpty,
+  isObjectShallowModified,
+  isVisible,
+  qsstringify
+} from '../utils/helper';
 import {
   BaseSchema,
   SchemaApi,
@@ -185,7 +191,7 @@ export default class Service extends React.Component<ServiceProps> {
       this.socket = this.fetchWSData(props.ws, store.data);
     }
 
-    if (props.defaultData !== prevProps.defaultData) {
+    if (isObjectShallowModified(prevProps.defaultData, props.defaultData)) {
       store.reInitData(props.defaultData);
     }