amis 1.9.1-beta.21 → 1.9.1-beta.24

package/src/components/formula/VariableList.tsx

@@ -6,7 +6,6 @@ import Tabs, {Tab} from '../Tabs';
 import TreeSelection from '../TreeSelection';
 import SearchBox from '../SearchBox';
 import {findTree} from '../../utils/helper';
-import {Badge} from '../Badge';
 
 import type {VariableItem} from './Editor';
 import type {ItemRenderStates} from '../Selection';
@@ -21,9 +20,7 @@ export interface VariableListProps extends ThemeProps {
   selectMode?: 'list' | 'tree' | 'tabs';
   tabsMode?: TabsMode;
   itemRender?: (option: Option, states: ItemRenderStates) => JSX.Element;
-  placeholderRender?: (props: any) => JSX.Element | null;
   onSelect?: (item: VariableItem) => void;
-  selfVariableName?: string;
 }
 
 function VariableList(props: VariableListProps) {
@@ -35,9 +32,7 @@ function VariableList(props: VariableListProps) {
     classPrefix: themePrefix,
     itemClassName,
     selectMode,
-    onSelect,
-    placeholderRender,
-    selfVariableName
+    onSelect
   } = props;
   const [filterVars, setFilterVars] = React.useState(list);
   const classPrefix = `${themePrefix}FormulaEditor-VariableList`;
@@ -47,32 +42,7 @@ function VariableList(props: VariableListProps) {
       : (option: Option, states: ItemRenderStates): JSX.Element => {
           return (
             <span className={cx(`${classPrefix}-item`, itemClassName)}>
-              {
-                  option.label && option.label === selfVariableName && (
-                    <Badge
-                      classnames={cx}
-                      badge={{
-                        mode: "text",
-                        text: "self",
-                        offset: [
-                          15,
-                          2
-                        ]
-                      }}
-                    >
-                      <label>
-                        {option.label}
-                      </label>
-                    </Badge>
-                  )
-                }
-                {
-                  option.label && option.label !== selfVariableName && (
-                    <label>
-                        {option.label}
-                      </label>
-                  )
-                }
+              <label>{option.label}</label>
               {option?.tag ? (
                 <span className={cx(`${classPrefix}-item-tag`)}>
                   {option.tag}
@@ -120,11 +90,9 @@ function VariableList(props: VariableListProps) {
                 classPrefix={`${classPrefix}-sub-`}
                 className={cx(`${classPrefix}-sub`)}
                 itemRender={itemRender}
-                placeholderRender={placeholderRender}
                 selectMode={item.selectMode}
                 data={item.children!}
                 onSelect={onSelect}
-                selfVariableName={selfVariableName}
               />
             </Tab>
           ))}
@@ -134,7 +102,6 @@ function VariableList(props: VariableListProps) {
           {renderSearchBox()}
           <TreeSelection
             itemRender={itemRender}
-            placeholderRender={placeholderRender}
             className={cx(`${classPrefix}-base`, 'is-scrollable')}
             multiple={false}
             options={filterVars}
@@ -146,7 +113,6 @@ function VariableList(props: VariableListProps) {
           {renderSearchBox()}
           <GroupedSelection
             itemRender={itemRender}
-            placeholderRender={placeholderRender}
             className={cx(`${classPrefix}-base`, 'is-scrollable')}
             multiple={false}
             options={filterVars}

package/src/components/index.tsx

@@ -61,9 +61,7 @@ import PullRefresh from './PullRefresh';
 import Table from './table';
 import SchemaVariableListPicker from './schema-editor/SchemaVariableListPicker';
 import SchemaVariableList from './schema-editor/SchemaVariableList';
-import VariableList from './formula/VariableList';
 import FormulaPicker from './formula/Picker';
-import PickerContainer from './PickerContainer';
 import InputJSONSchema from './json-schema';
 
 export {
@@ -130,8 +128,6 @@ export {
   Table,
   SchemaVariableListPicker,
   SchemaVariableList,
-  VariableList,
-  PickerContainer,
   FormulaPicker,
   InputJSONSchema
 };

package/src/components/schema-editor/SchemaVariableList.tsx

@@ -13,7 +13,6 @@ export interface SchemaVariableListProps extends LocaleProps, ThemeProps {
   value?: string;
   onSelect?: (value: string, schema: JSONSchema) => void;
   selectMode?: 'list' | 'tree' | 'tabs';
-  placeholderRender?: (props: any) => JSX.Element | null;
   beforeBuildVariables?: (dataSchema: DataSchema) => void;
 }
 
@@ -78,16 +77,15 @@ export class SchemaVariableList extends React.Component<
   }
 
   render() {
-    const {selectMode, value, placeholderRender} = this.props;
+    const {selectMode} = this.props;
 
     return (
       <VariableList
         data={this.state.variables}
-        value={value}
+        value={this.props.value}
         onSelect={this.handleSelect}
         selectMode={selectMode || 'tree'}
         itemRender={this.itemRender}
-        placeholderRender={placeholderRender}
       />
     );
   }

package/src/components/schema-editor/SchemaVariableListPicker.tsx

@@ -17,7 +17,6 @@ export interface SchemaVariableListPickerProps extends SchemaVariableListProps {
   onConfirm?: (value?: any) => void;
   onCancel?: () => void;
   onPickerOpen?: (props: any) => any;
-  placeholderRender?: (props: any) => JSX.Element | null;
 }
 
 export class SchemaVariableListPicker extends React.Component<SchemaVariableListPickerProps> {
@@ -32,8 +31,7 @@ export class SchemaVariableListPicker extends React.Component<SchemaVariableList
       title,
       selectMode,
       beforeBuildVariables,
-      onPickerOpen,
-      placeholderRender
+      onPickerOpen
     } = this.props;
 
     return (
@@ -53,7 +51,6 @@ export class SchemaVariableListPicker extends React.Component<SchemaVariableList
               schemas={stateSchemas ?? schemas}
               selectMode={selectMode}
               beforeBuildVariables={beforeBuildVariables}
-              placeholderRender={placeholderRender}
             />
           ) : (
             <></>

package/src/renderers/CRUD.tsx

@@ -490,8 +490,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     // 另外autoGenerateFilter时，table 里面会单独处理这块逻辑
     // 所以这里应该忽略 autoGenerateFilter 情况
     if (
-      (!this.props.filter || (store.filterTogggable && !store.filterVisible)) &&
-      !autoGenerateFilter
+      (!this.props.filter && !autoGenerateFilter) ||
+      (store.filterTogggable && !store.filterVisible)
     ) {
       this.handleFilterInit({});
     }
@@ -670,7 +670,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             throw e;
           }
         });
-    } else if (action.actionType === 'reload') {
+    } else if (action.actionType === 'reload' && !action.target) {
       this.reload();
     } else if (
       pickerMode &&

package/src/renderers/Form/Group.tsx

@@ -89,7 +89,7 @@ export class ControlGroupRenderer extends React.Component<InputGroupProps> {
     const subSchema: any = control;
 
     return render(`${index}`, subSchema, {
-      disabled,
+      disabled: control.disabled || disabled,
       formMode: subFormMode || mode || formMode,
       formHorizontal: subFormHorizontal || horizontal || formHorizontal,
       ...otherProps

package/src/renderers/Form/InputFormula.tsx

@@ -94,6 +94,11 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   borderMode?: 'full' | 'half' | 'none';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 输入框占位符
    */
@@ -108,11 +113,6 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    * 函数面板CSS样式类名
    */
   functionClassName?: string;
-
-  /**
-   * 当前输入项字段 name: 用于避免循环绑定自身导致无限渲染
-   */
-  selfVariableName?: string;
 }
 
 export interface InputFormulaProps
@@ -128,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;
@@ -167,6 +168,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       onChange,
       evalMode,
       variableMode,
+      onlyVariable,
       header,
       label,
       value,
@@ -186,8 +188,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       variableClassName,
       functionClassName,
       data,
-      onPickerOpen,
-      selfVariableName
+      onPickerOpen
     } = this.props;
     let {variables, functions} = this.props;
 
@@ -212,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}
@@ -227,7 +229,6 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
         functionClassName={functionClassName}
         data={data}
         onPickerOpen={onPickerOpen}
-        selfVariableName={selfVariableName}
       />
     );
   }

package/src/renderers/Form/InputTag.tsx

@@ -41,7 +41,7 @@ export interface TagControlSchema extends FormOptionsControl {
   /**
    * 收纳标签的Popover配置
    */
-  overflowTagPopover: object;
+  overflowTagPopover?: object;
 }
 
 // declare function matchSorter(items:Array<any>, input:any, options:any): Array<any>;

package/src/renderers/Form/Options.tsx

@@ -320,10 +320,14 @@ export function registerOptionsControl(config: OptionsConfig) {
 
         this.toDispose.push(
           reaction(
-            () => JSON.stringify(formItem.options),
-            () => this.mounted && this.syncAutoFill(formItem.tmpValue)
+            () =>
+              JSON.stringify(formItem.getSelectedOptions(formItem.tmpValue)),
+            () =>
+              this.mounted &&
+              this.syncAutoFill(formItem.getSelectedOptions(formItem.tmpValue))
           )
         );
+
         // 默认全选。这里会和默认值\回填值逻辑冲突，所以如果有配置source则不执行默认全选
         if (
           multiple &&
@@ -361,10 +365,6 @@ export function registerOptionsControl(config: OptionsConfig) {
     componentDidMount() {
       this.mounted = true;
       this.normalizeValue();
-
-      if (this.props.value) {
-        this.syncAutoFill(this.props.value);
-      }
     }
 
     shouldComponentUpdate(nextProps: OptionsProps) {
@@ -448,7 +448,6 @@ export function registerOptionsControl(config: OptionsConfig) {
 
       if (prevProps.value !== props.value || formItem?.expressionsInOptions) {
         formItem.syncOptions(undefined, props.data);
-        this.syncAutoFill(props.value);
       }
     }
 
@@ -482,7 +481,7 @@ export function registerOptionsControl(config: OptionsConfig) {
       }
     }
 
-    syncAutoFill(value: any) {
+    syncAutoFill(selectedOptions: Array<any>) {
       const {autoFill, multiple, onBulkChange, data} = this.props;
       const formItem = this.props.formItem as IFormItemStore;
 
@@ -492,7 +491,6 @@ export function registerOptionsControl(config: OptionsConfig) {
         !isEmpty(autoFill) &&
         formItem.filteredOptions.length
       ) {
-        const selectedOptions = formItem.getSelectedOptions(value);
         const toSync = dataMapping(
           autoFill,
           multiple

package/src/renderers/Form/Select.tsx

@@ -19,6 +19,7 @@ import {BaseTransferRenderer, TransferControlSchema} from './Transfer';
 import TransferDropDown from '../../components/TransferDropDown';
 
 import type {TooltipObject} from '../../components/TooltipWrapper';
+import type {SchemaClassName} from '../../Schema';
 
 /**
  * Select 下拉选择框。
@@ -121,7 +122,12 @@ export interface SelectControlSchema extends FormOptionsControl {
   /**
    * 收纳标签的Popover配置
    */
-  overflowTagPopover: object;
+  overflowTagPopover?: object;
+
+  /**
+   * 选项的自定义CSS类名
+   */
+  optionClassName?: SchemaClassName;
 }
 
 export interface SelectProps extends OptionsControlProps {
@@ -349,9 +355,11 @@ export default class SelectControl extends React.Component<SelectProps, any> {
 
   @autobind
   renderMenu(option: Option, state: any) {
-    const {menuTpl, render, data} = this.props;
+    const {menuTpl, render, data, optionClassName} = this.props;
 
     return render(`menu/${state.index}`, menuTpl, {
+      showNativeTitle: true,
+      className: cx('Select-option-content', optionClassName),
       data: createObject(createObject(data, state), option)
     });
   }

package/src/renderers/Form/TreeSelect.tsx

@@ -112,7 +112,6 @@ export interface TreeSelectProps extends OptionsControlProps {
 
 export interface TreeSelectState {
   isOpened: boolean;
-  isFocused: boolean;
   inputValue: string;
 }
 
@@ -157,8 +156,7 @@ export default class TreeSelectControl extends React.Component<
 
     this.state = {
       inputValue: '',
-      isOpened: false,
-      isFocused: false
+      isOpened: false
     };
 
     this.open = this.open.bind(this);
@@ -206,22 +204,23 @@ export default class TreeSelectControl extends React.Component<
 
   handleFocus(e: any) {
     const {dispatchEvent, value, data} = this.props;
-    this.setState({
-      isFocused: true
-    });
-    dispatchEvent('focus', createObject(data, {
-      value
-    }));
+
+    dispatchEvent(
+      'focus',
+      createObject(data, {
+        value
+      })
+    );
   }
 
   handleBlur(e: any) {
     const {dispatchEvent, value, data} = this.props;
-    this.setState({
-      isFocused: false
-    });
-    dispatchEvent('blur', createObject(data, {
-      value
-    }));
+    dispatchEvent(
+      'blur',
+      createObject(data, {
+        value
+      })
+    );
   }
 
   handleKeyPress(e: React.KeyboardEvent) {
@@ -645,7 +644,6 @@ export default class TreeSelectControl extends React.Component<
             'TreeSelect--searchable':
               searchable || isEffectiveApi(autoComplete),
             'is-opened': this.state.isOpened,
-            'is-focused': this.state.isFocused,
             'is-disabled': disabled
           })}
           result={

package/src/renderers/Form/index.tsx

@@ -63,7 +63,7 @@ export interface FormSchemaHorizontal {
   right?: number;
   leftFixed?: boolean | number | 'xs' | 'sm' | 'md' | 'lg';
   justify?: boolean; // 两端对齐
-  labelAlign?: 'left' | 'right' // label对齐方式
+  labelAlign?: 'left' | 'right'; // label对齐方式
 }
 
 /**
@@ -988,7 +988,14 @@ export default class Form extends React.Component<FormProps, object> {
       data = store.data;
     }
     if (Array.isArray(action.required) && action.required.length) {
-      return store.validateFields(action.required).then(async result => {
+      store.clearErrors(); // 如果是按钮指定了required，则校验前先清空一下遗留的校验报错
+
+      const fields = action.required.map(item => ({
+        name: item,
+        rules: {isRequired: true}
+      }));
+
+      return store.validateFields(fields).then(async result => {
         if (!result) {
           const dispatcher = await dispatchEvent(
             'validateError',
@@ -997,6 +1004,9 @@ export default class Form extends React.Component<FormProps, object> {
           if (!dispatcher?.prevented) {
             env.notify('error', __('Form.validateFailed'));
           }
+
+          /** 抛异常是为了在dialog中catch这个错误，避免弹窗直接关闭 */
+          return Promise.reject(__('Form.validateFailed'));
         } else {
           dispatchEvent('validateSucc', this.props.data);
           this.handleAction(
@@ -1006,6 +1016,7 @@ export default class Form extends React.Component<FormProps, object> {
             throwErrors,
             delegate
           );
+          return;
         }
       });
     }

package/src/renderers/Table/exportExcel.ts

@@ -221,7 +221,7 @@ export async function exportExcel(
           text: text || absoluteURL,
           hyperlink: absoluteURL
         };
-      } else if (type === 'mapping') {
+      } else if (type === 'mapping' || (type as any) === 'static-mapping') {
         // 拷贝自 Mapping.tsx
         let map = column.pristine.map;
         const source = column.pristine.source;

package/src/renderers/Table/index.tsx

@@ -1081,11 +1081,11 @@ export default class Table extends React.Component<TableProps, object> {
     } = (this.heights = {});
 
     heights.header = table
-      .querySelector('thead>tr:last-child')!
-      .getBoundingClientRect().height;
-    heights.header2 = table
-      .querySelector('thead>tr:first-child')!
+      .querySelector('thead')!
       .getBoundingClientRect().height;
+    // heights.header2 = table
+    //   .querySelector('thead>tr:first-child')!
+    //   .getBoundingClientRect().height;
 
     forEach(
       table.querySelectorAll('thead>tr:last-child>th'),
@@ -1132,7 +1132,7 @@ export default class Table extends React.Component<TableProps, object> {
           table.querySelectorAll('thead>tr:first-child>th'),
           (item: HTMLElement) => {
             const width = widths2[item.getAttribute('data-index') as string];
-            item.style.cssText += `width: ${width}px; height: ${heights.header2}px`;
+            item.style.cssText += `width: ${width}px; height: ${heights.header}px`;
             totalWidth2 += width;
           }
         );
@@ -2797,6 +2797,42 @@ export default class Table extends React.Component<TableProps, object> {
   storeType: TableStore.name,
   name: 'table'
 })
-export class TableRenderer extends Table {}
+export class TableRenderer extends Table {
+  receive(values: any, subPath?: string) {
+    const scoped = this.context as IScopedContext;
+    const parents = scoped?.parent?.getComponents();
+
+    /**
+     * 因为Table在scope上注册，导致getComponentByName查询组件时会优先找到Table，和CRUD联动的动作都会失效
+     * 这里先做兼容处理，把动作交给上层的CRUD处理
+     */
+    if (Array.isArray(parents) && parents.length) {
+      // CRUD的name会透传给Table，这样可以保证找到CRUD
+      const crud = parents.find(cmpt => cmpt?.props?.name === this.props?.name);
+
+      return crud?.receive?.(values, subPath);
+    }
+
+    if (subPath) {
+      return scoped.send(subPath, values);
+    }
+  }
+
+  reload(subPath?: string, query?: any, ctx?: any) {
+    const scoped = this.context as IScopedContext;
+    const parents = scoped?.parent?.getComponents();
+
+    if (Array.isArray(parents) && parents.length) {
+      // CRUD的name会透传给Table，这样可以保证找到CRUD
+      const crud = parents.find(cmpt => cmpt?.props?.name === this.props?.name);
+
+      return crud?.reload?.(subPath, query, ctx);
+    }
+
+    if (subPath) {
+      return scoped.reload(subPath, ctx);
+    }
+  }
+}
 
 export {TableCell};

package/src/renderers/Tpl.tsx

@@ -40,6 +40,11 @@ export interface TplSchema extends BaseSchema {
    * 角标
    */
   badge?: BadgeSchema;
+
+  /**
+   * 是否设置外层DOM节点的title属性为文本内容
+   */
+  showNativeTitle?: boolean;
 }
 
 export interface TplProps extends RendererProps, TplSchema {
@@ -117,17 +122,22 @@ export class Tpl extends React.Component<TplProps, object> {
       inline,
       classnames: cx,
       style,
+      showNativeTitle,
       data
     } = this.props;
     const Component = wrapperComponent || (inline ? 'span' : 'div');
+    const content = this.getContent();
 
     return (
       <Component
         ref={this.htmlRef}
         className={cx('TplField', className)}
         style={buildStyle(style, data)}
+        {...(showNativeTitle
+          ? {title: typeof content === 'string' ? content : ''}
+          : {})}
       >
-        <span>{this.getContent()}</span>
+        <span>{content}</span>
       </Component>
     );
   }

package/src/store/form.ts

@@ -9,6 +9,7 @@ import {
   Instance
 } from 'mobx-state-tree';
 import debounce from 'lodash/debounce';
+import find from 'lodash/find';
 import {ServiceStore} from './service';
 import {FormItemStore, IFormItemStore, SFormItemStore} from './formItem';
 import {Api, ApiObject, fetchOptions, Payload} from '../types';
@@ -326,7 +327,6 @@ export const FormStore = ServiceStore.named('FormStore')
         }
 
         if (!json.ok) {
-
           if (json.status === 422 && json.errors) {
             setFormItemErrors(json.errors);
 
@@ -359,22 +359,23 @@ export const FormStore = ServiceStore.named('FormStore')
           );
           if (!ret?.dispatcher?.prevented) {
             self.msg &&
-            getEnv(self).notify(
-              'success',
-              self.msg,
-              json.msgTimeout !== undefined
-                ? {
-                    closeButton: true,
-                    timeout: json.msgTimeout
-                  }
-                : undefined
-            );
+              getEnv(self).notify(
+                'success',
+                self.msg,
+                json.msgTimeout !== undefined
+                  ? {
+                      closeButton: true,
+                      timeout: json.msgTimeout
+                    }
+                  : undefined
+              );
           }
           return json.data;
         }
       } catch (e) {
         self.markSaving(false);
-        let ret = options && options.onFailed && options.onFailed(e.response || {});
+        let ret =
+          options && options.onFailed && options.onFailed(e.response || {});
         if (ret?.then) {
           ret = yield ret;
         }
@@ -486,7 +487,7 @@ export const FormStore = ServiceStore.named('FormStore')
           if (dispatcher?.then) {
             dispatcher = yield dispatcher;
           }
-          if (!dispatcher?.prevented){
+          if (!dispatcher?.prevented) {
             msg && env.notify('error', msg);
           }
           throw new Error(msg);
@@ -548,20 +549,26 @@ export const FormStore = ServiceStore.named('FormStore')
       return self.valid;
     });
 
-    const validateFields: (fields: Array<string>) => Promise<boolean> = flow(
-      function* validateFields(fields: Array<string>) {
-        const items = self.items.concat();
-        let result: Array<boolean> = [];
-        for (let i = 0, len = items.length; i < len; i++) {
-          let item = items[i] as IFormItemStore;
+    const validateFields: (
+      fields: Array<string | {name: string; rules: {[propName: string]: any}}>
+    ) => Promise<boolean> = flow(function* validateFields(
+      fields: Array<string | {name: string; rules: {[propName: string]: any}}>
+    ) {
+      const items = self.items.concat();
+      const normalizedfields = fields.map(field =>
+        typeof field === 'string' ? {name: field, rules: {}} : field
+      );
+      let result: Array<boolean> = [];
+      for (let i = 0, len = items.length; i < len; i++) {
+        let item = items[i] as IFormItemStore;
+        const field = find(normalizedfields, field => field.name === item.name);
 
-          if (~fields.indexOf(item.name)) {
-            result.push(yield item.validate(self.data));
-          }
+        if (field) {
+          result.push(yield item.validate(self.data, undefined, field.rules));
         }
-        return result.every(item => item);
       }
-    );
+      return result.every(item => item);
+    });
 
     function clearErrors() {
       const items = self.items.concat();