amis 1.9.1-beta.3 → 1.9.1-beta.4

package/src/SchemaRenderer.tsx

@@ -391,13 +391,10 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       ref: this.refFn,
       render: this.renderChild,
       rootStore: rootStore,
+      disabled: disable ?? rest.disabled ?? restSchema.disabled,
       dispatchEvent: this.dispatchEvent
     };
 
-    if (disable) {
-      (props as any).disabled = true;
-    }
-
     // 自动解析变量模式，主要是方便直接引入第三方组件库，无需为了支持变量封装一层
     if (renderer.autoVar) {
       for (const key of Object.keys($schema)) {

package/src/actions/CmptAction.ts

@@ -56,16 +56,16 @@ export class CmptAction implements RendererAction {
 
     // 数据更新
     if (action.actionType === 'setValue') {
-      if (component.setData) {
-        return component.setData(action.args?.value);
+      if (component?.setData) {
+        return component?.setData(action.args?.value);
       } else {
-        return component.props.onChange?.(action.args?.value);
+        return component?.props.onChange?.(action.args?.value);
       }
     }
 
     // 刷新
     if (action.actionType === 'reload') {
-      return component.reload?.(undefined, action.args);
+      return component?.reload?.(undefined, action.args);
     }
 
     // 执行组件动作

package/src/components/WithRemoteConfig.tsx

@@ -24,7 +24,12 @@ import {
   tokenize
 } from '../utils/tpl-builtin';
 import {reaction} from 'mobx';
-import {createObject, findIndex, findTreeIndex} from '../utils/helper';
+import {
+  createObject,
+  findIndex,
+  findTreeIndex,
+  isObject
+} from '../utils/helper';
 
 export const Store = types
   .model('RemoteConfigStore')
@@ -166,12 +171,15 @@ export interface WithRemoteConfigSettings {
     props: any
   ) => any;
 
-  injectedPropsFilter?: (props: {
-    config: any;
-    loading?: boolean;
-    deferLoad: (term: string) => any;
-    updateConfig: (config: any) => void;
-  }) => any;
+  injectedPropsFilter?: (
+    injectedProps: {
+      config: any;
+      loading?: boolean;
+      deferLoad: (term: string) => any;
+      updateConfig: (config: any) => void;
+    },
+    props: any
+  ) => any;
 }
 
 export function withRemoteConfig<P = any>(
@@ -219,6 +227,8 @@ export function withRemoteConfig<P = any>(
             props.store.setComponent(this);
             this.deferLoadConfig = this.deferLoadConfig.bind(this);
             props.remoteConfigRef?.(this);
+            props.store.setData(props.data);
+            this.syncConfig();
           }
 
           componentDidMount() {
@@ -226,10 +236,7 @@ export function withRemoteConfig<P = any>(
             const {store, data} = this.props;
             const source = (this.props as any)[config.sourceField || 'source'];
 
-            store.setData(data);
-
             if (isPureVariable(source)) {
-              this.syncConfig();
               this.toDispose.push(
                 reaction(
                   () =>
@@ -323,6 +330,8 @@ export function withRemoteConfig<P = any>(
                 config,
                 'syncConfig'
               );
+            } else if (isObject(source) && !isEffectiveApi(source, data)) {
+              store.setConfig(source, config, 'syncConfig');
             }
           }
 
@@ -389,7 +398,7 @@ export function withRemoteConfig<P = any>(
                   ? {loadOptions: this.loadOptions}
                   : {})}
                 {...(config.injectedPropsFilter
-                  ? config.injectedPropsFilter(injectedProps)
+                  ? config.injectedPropsFilter(injectedProps, this.props)
                   : injectedProps)}
               />
             );

package/src/components/table/ItemActionsWrapper.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {ClassNamesFn} from '../../theme';
+
+export interface ItemActionsProps {
+  classnames: ClassNamesFn;
+  children?: JSX.Element;
+  dom: HTMLTableRowElement;
+}
+
+export default class ItemActionsWrapper extends React.Component<ItemActionsProps, {}> {
+  render() {
+    const {classnames: cx, children, dom} = this.props;
+    if (!dom) {
+      return;
+    }
+
+    const frame = dom.closest('table')?.parentElement?.parentElement as HTMLElement;
+
+    const rect = dom.getBoundingClientRect();
+    const height = rect.height;
+    const top = rect.top - frame.getBoundingClientRect().top;
+
+    return (
+      <div
+        className={cx('Table-itemActions-wrap')}
+        style={{top: top + 'px', height: height + 'px'}}>
+        {children}
+      </div>
+    );
+  }
+}

package/src/components/table/index.tsx

@@ -23,12 +23,13 @@ import Spinner from '../Spinner';
 import HeadCellSort from './HeadCellSort';
 import HeadCellFilter from './HeadCellFilter';
 import HeadCellSelect from './HeadCellSelect';
+import ItemActionsWrapper from './ItemActionsWrapper';
 import Cell from './Cell';
 
 export interface ColumnProps {
   title: string | React.ReactNode | Function;
   key: string;
-  className?: string;
+  className?: Function;
   children?: Array<ColumnProps>;
   render: Function;
   fixed?: boolean | string;
@@ -144,6 +145,7 @@ export interface TableProps extends ThemeProps, LocaleProps {
   showHeader?: boolean; // 是否展示表头
   onSelect?: Function;
   onSelectAll?: Function;
+  itemActions?: Function;
 }
 
 export interface ScrollProps {
@@ -156,6 +158,11 @@ export interface TableState {
   dataSource: Array<any>;
   expandedRowKeys: Array<string | number>;
   colWidths: Array<number>;
+  hoverRow: {
+    rowIndex?: number,
+    record: any,
+    target: HTMLTableRowElement
+  } | null;
 }
 
 function getMaxLevelThRowSpan(columns: Array<ColumnProps>) {
@@ -336,7 +343,8 @@ export class Table extends React.PureComponent<TableProps, TableState> {
           ? props.expandable.defaultExpandedRowKeys || []
           : [])
       ],
-      colWidths: []
+      colWidths: [],
+      hoverRow: null
     };
 
     this.onTableContentScroll = this.onTableContentScroll.bind(this);
@@ -1104,43 +1112,43 @@ export class Table extends React.PureComponent<TableProps, TableState> {
                   );
                 }
 
-                const children = (
-                  <span>
-                    {sort}
-                    {filter}
-                    {resizable ? (
-                      <i
-                        className={cx('Table-thead-resizable')}
-                        onMouseDown={e => this.onResizeMouseDown(e, item.key)}
-                      ></i>
-                    ) : null}
-                  </span>
-                );
-
-                return (
-                  <Cell
-                    wrapperComponent="th"
-                    rowSpan={item.rowSpan}
-                    colSpan={item.colSpan}
-                    key={'cell' + (item.key || i)}
-                    fixed={item.fixed === true ? 'left' : item.fixed}
-                    className={cx({
-                      'Table-cell-last':
-                        i === maxCount - 1 && i === data.length - 1
-                    })}
-                    groupId={item.groupId}
-                    depth={item.depth}
-                  >
-                    {typeof item.title === 'function'
-                      ? item.title(children)
-                      : item.title}
-                  </Cell>
-                );
-              })}
-            </tr>
-          );
-        })}
-      </thead>
+            const children = (
+              <span>
+                {sort}
+                  {filter}
+                  {resizable ? (
+                    <i
+                      className={cx('Table-thead-resizable')}
+                      onMouseDown={e => this.onResizeMouseDown(e, item.key)}
+                    ></i>
+                  ) : null}
+              </span>
+            );
+
+            return (
+              <Cell
+                wrapperComponent="th"
+                rowSpan={item.rowSpan}
+                colSpan={item.colSpan}
+                key={`cell-${i}`}
+                fixed={item.fixed === true ? 'left' : item.fixed}
+                className={cx({
+                  'Table-cell-last':
+                    i === maxCount - 1 && i === data.length - 1
+                })}
+                groupId={item.groupId}
+                depth={item.depth}
+              >
+                  {typeof item.title === 'function'
+                    ? item.title(children)
+                    : item.title}
+              </Cell>
+            );
+          })}
+        </tr>
+        );
+      })}
+    </thead>
     );
   }
 
@@ -1182,8 +1190,17 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       }
     }
 
-    if (record && onRow) {
-      onRow.onRowMouseEnter && onRow.onRowMouseEnter(event, record, rowIndex);
+    if (record) {
+      let target = event.target;
+      if (target.tagName !== 'TR') {
+        target = target.closest('tr');
+      }
+
+      this.setState({hoverRow: {target, rowIndex, record}}, () => {
+        if (onRow) {
+          onRow.onRowMouseEnter && onRow.onRowMouseEnter(event, record, rowIndex);
+        }
+      });
     }
   }
 
@@ -1206,11 +1223,17 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       }
     }
 
-    if (record && onRow) {
-      onRow.onRowMouseLeave && onRow.onRowMouseLeave(event, record, rowIndex);
+    if (record) {
+      if (onRow) {
+        onRow.onRowMouseLeave && onRow.onRowMouseLeave(event, record, rowIndex);
+      }
     }
   }
 
+  onMouseLeave(event: React.ChangeEvent<any>) {
+    this.setState({hoverRow: null});
+  }
+
   onExpandRow(data: any) {
     const {expandedRowKeys} = this.state;
     const {expandable} = this.props;
@@ -1396,7 +1419,8 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       levels.length > 0 ? (
         <span
           className={cx('Table-row-indent', `indent-level-${levels.length}`)}
-          style={{paddingLeft: indentSize * levels.length + 'px'}}
+          style={levels.length > 0
+            ? {paddingLeft: (indentSize * levels.length) + 'px'} : {}}
         ></span>
       ) : null;
 
@@ -1415,6 +1439,9 @@ export class Table extends React.PureComponent<TableProps, TableState> {
           props.rowSpan === 1;
         }
       }
+
+      const className = typeof item.className === 'function'
+        ? item.className(data, rowIndex) : ''
       return props.rowSpan === 0 || props.colSpan === 0 ? null : (
         <Cell
           key={i}
@@ -1422,15 +1449,16 @@ export class Table extends React.PureComponent<TableProps, TableState> {
           fixed={item.fixed === true ? 'left' : item.fixed}
           column={item}
           groupId={item.groupId}
+          className={cx({
+            [`${className}`]: !!className
+          })}
         >
-          <div
-            className={cx('Table-cell-wrapper', {
-              [cx('Table-cell-wrapper-prefix')]:
-                i === 0 &&
-                (!!indentDom || (levels.length === 0 && hasChildrenRow)),
-              [cx(`Table-cell-height-${lineHeight}`)]: !!lineHeight
-            })}
-          >
+          <div className={cx('Table-cell-wrapper', {
+            [cx('Table-cell-wrapper-prefix')]:
+              i === 0 &&
+                (!!indentDom || levels.length === 0 && hasChildrenRow),
+            [cx(`Table-cell-height-${lineHeight}`)]: !!lineHeight
+          })}>
             {i === 0 && levels.length > 0 ? indentDom : null}
             {i === 0 && hasChildrenRow
               ? this.getExpandedIcons(isExpanded, data)
@@ -1759,18 +1787,28 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       footSummary,
       loading,
       showHeader,
+      itemActions,
       classnames: cx
     } = this.props;
 
     // 设置了横向滚动轴 则table的table-layout为fixed
     const hasScrollX = scroll && scroll.x;
+    const hoverRow = this.state.hoverRow;
 
     return (
       <div
         ref={this.contentDom}
         className={cx('Table-content')}
         style={hasScrollX ? {overflow: 'auto hidden'} : {}}
+        onMouseLeave={this.onMouseLeave.bind(this)}
       >
+        {itemActions && hoverRow
+          ? <ItemActionsWrapper
+              dom={hoverRow.target}
+              classnames={cx}>
+                {typeof itemActions === 'function'
+                  ? itemActions(hoverRow.record, hoverRow.rowIndex) : null}
+              </ItemActionsWrapper> : null}
         <table
           style={
             hasScrollX
@@ -1831,7 +1869,11 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   }
 
   renderScrollTableBody() {
-    const {scroll, classnames: cx} = this.props;
+    const {
+      scroll,
+      itemActions,
+      classnames: cx
+    } = this.props;
 
     const style = {};
     const tableStyle = {};
@@ -1847,12 +1889,27 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       });
     }
 
+    const hoverRow = this.state.hoverRow;
+
     return (
-      <div ref={this.bodyDom} className={cx('Table-body')} style={style}>
-        <table className={cx('Table-table')} style={tableStyle}>
-          {this.renderColGroup()}
-          {this.renderTBody()}
-        </table>
+      <div
+        ref={this.bodyDom}
+        className={cx('Table-body')}
+        style={style}
+        onMouseLeave={this.onMouseLeave.bind(this)}>
+        {itemActions && hoverRow
+          ? <ItemActionsWrapper
+              dom={hoverRow.target}
+              classnames={cx}>
+                {typeof itemActions === 'function'
+                  ? itemActions(hoverRow.record, hoverRow.rowIndex) : null}
+              </ItemActionsWrapper> : null}
+          <table
+            className={cx('Table-table')}
+            style={tableStyle}>
+            {this.renderColGroup()}
+            {this.renderTBody()}
+          </table>
       </div>
     );
   }

package/src/renderers/Form/JSONSchema.tsx

@@ -34,10 +34,10 @@ export interface JSONSchemaProps
 
 const EnhancedInputJSONSchema = withRemoteConfig({
   sourceField: 'schema',
-  injectedPropsFilter: props => {
+  injectedPropsFilter: (injectedProps, props) => {
     return {
-      schema: props.config,
-      loading: props.loading
+      schema: injectedProps.config,
+      loading: injectedProps.loading
     };
   }
 })(InputJSONSchema as any);

package/src/renderers/Form/Options.tsx

@@ -15,7 +15,10 @@ import {
   getTree,
   isEmpty,
   getTreeAncestors,
-  normalizeNodePath
+  normalizeNodePath,
+  mapTree,
+  getTreeDepth,
+  flattenTree
 } from '../../utils/helper';
 import {reaction} from 'mobx';
 import {
@@ -637,16 +640,19 @@ export function registerOptionsControl(config: OptionsConfig) {
       } = this.props;
       let newValue: string | Array<Option> | Option = '';
       if (multiple) {
-        newValue = valueArray;
+        /** 兼容tree数据结构 */
+        newValue =
+          getTreeDepth(valueArray) > 1 ? flattenTree(valueArray) : valueArray;
 
         if (joinValues) {
           newValue = (newValue as Array<any>)
             .map(item => item[valueField || 'value'])
+            .filter(item => item != null) /** tree的父节点可能没有value值 */
             .join(delimiter);
         } else if (extractValue) {
-          newValue = (newValue as Array<any>).map(
-            item => item[valueField || 'value']
-          );
+          newValue = (newValue as Array<any>)
+            .map(item => item[valueField || 'value'])
+            .filter(item => item != null);
         }
       } else {
         newValue = valueArray[0] || resetValue;
@@ -660,14 +666,18 @@ export function registerOptionsControl(config: OptionsConfig) {
 
     @autobind
     async handleToggleAll() {
-      const {value, onChange, formItem} = this.props;
+      const {value, onChange, formItem, valueField} = this.props;
 
       if (!formItem) {
         return;
       }
       const selectedOptions = formItem.getSelectedOptions(value);
+      /** 打平并过滤掉valueField不存在的case，保证全选时对比length一致 */
+      const filteredOptions = flattenTree(
+        formItem.filteredOptions.concat()
+      ).filter(item => item != null && item[valueField || 'value'] != null);
       let valueArray =
-        selectedOptions.length === formItem.filteredOptions.length
+        selectedOptions.length === filteredOptions.length
           ? []
           : formItem.filteredOptions.concat();
       const newValue = this.formatValueArray(valueArray);

package/src/renderers/Form/wrapControl.tsx

@@ -657,7 +657,6 @@ export function wrapControl<
               defaultValue: control.value,
               formItemValue: value, // 为了兼容老版本的自定义组件
               onChange: this.handleChange,
-
               onBlur: this.handleBlur,
               setValue: this.setValue,
               getValue: this.getValue,

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

@@ -113,6 +113,21 @@ export interface ColumnSchema {
    * 当前列是否展示
    */
   toggled?: boolean;
+
+  /**
+   * 列样式
+   */
+  className?: string;
+  
+  /**
+   * 表头单元格样式
+   */
+  titleClassName?: string;
+
+  /**
+   * 单元格样式
+   */
+  classNameExpr?: string;
 }
 
 export interface RowSelectionOptionsSchema {
@@ -156,7 +171,7 @@ export interface RowSelectionSchema {
   /**
    * 已选择的key值表达式
    */
-  selectedRowKeysExpr: string;
+  selectedRowKeysExpr?: string;
 
   /**
    * 已选择的key值表达式
@@ -583,7 +598,12 @@ export default class TableRenderer extends React.Component<
           }
 
           return (
-            <div className={cx('Table-head-cell-wrapper')}>
+            <div
+              key={col}
+              className={cx('Table-head-cell-wrapper', {
+              [`${column.className}`]: !!column.className,
+              [`${column.titleClassName}`]: !!column.titleClassName
+            })}>
               {content}
               {remark}
               {children}
@@ -686,6 +706,14 @@ export default class TableRenderer extends React.Component<
           });
         }
 
+        // 设置了单元格样式
+        if (column.classNameExpr) {
+          clone.className = (record: any, rowIndex: number) => {
+            const className = filter(column.classNameExpr, {record, rowIndex});
+            return `${className}${column.className ? ` ${column.className}` : ''}`;
+          };
+        }
+
         // 设置了列搜索
         if (column.searchable) {
           clone.filterDropdown = (
@@ -1129,6 +1157,7 @@ export default class TableRenderer extends React.Component<
       classnames: cx,
       placeholder,
       rowClassNameExpr,
+      itemActions,
       store,
       ...rest
     } = this.props;
@@ -1233,6 +1262,39 @@ export default class TableRenderer extends React.Component<
       };
     }
 
+    let itemActionsConfig = undefined;
+    if (itemActions) {
+      const finalActions = Array.isArray(itemActions)
+      ? itemActions.filter(action => !action.hiddenOnHover)
+      : [];
+
+      if (!finalActions.length) {
+        return null;
+      }
+
+      itemActionsConfig = (record: any, rowIndex: number) => {
+        return (
+          <div className={cx('Table-itemActions')}>
+            {finalActions.map((action, index) =>
+              render(
+                `itemAction/${index}`,
+                {
+                  ...(action as any),
+                  isMenuItem: true
+                },
+                {
+                  key: index,
+                  item: record,
+                  data: record,
+                  rowIndex
+                }
+              )
+            )}
+          </div>
+        );
+      };
+    }
+
     return (
       <Table
         {...rest}
@@ -1252,6 +1314,7 @@ export default class TableRenderer extends React.Component<
         onSort={this.handleSort}
         onFilter={this.handleFilter}
         onDrag={this.handleDragOver}
+        itemActions={itemActionsConfig}
       ></Table>
     );
   }