amis 1.8.0-beta.16 → 1.8.0-beta.17

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/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();
     }