amis 1.9.1-beta.12 → 1.9.1-beta.21

package/src/components/formula/VariableList.tsx

@@ -6,6 +6,7 @@ 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';
@@ -20,7 +21,9 @@ 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) {
@@ -32,7 +35,9 @@ function VariableList(props: VariableListProps) {
     classPrefix: themePrefix,
     itemClassName,
     selectMode,
-    onSelect
+    onSelect,
+    placeholderRender,
+    selfVariableName
   } = props;
   const [filterVars, setFilterVars] = React.useState(list);
   const classPrefix = `${themePrefix}FormulaEditor-VariableList`;
@@ -42,7 +47,32 @@ function VariableList(props: VariableListProps) {
       : (option: Option, states: ItemRenderStates): JSX.Element => {
           return (
             <span className={cx(`${classPrefix}-item`, itemClassName)}>
-              <label>{option.label}</label>
+              {
+                  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>
+                  )
+                }
               {option?.tag ? (
                 <span className={cx(`${classPrefix}-item-tag`)}>
                   {option.tag}
@@ -90,9 +120,11 @@ 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>
           ))}
@@ -102,6 +134,7 @@ function VariableList(props: VariableListProps) {
           {renderSearchBox()}
           <TreeSelection
             itemRender={itemRender}
+            placeholderRender={placeholderRender}
             className={cx(`${classPrefix}-base`, 'is-scrollable')}
             multiple={false}
             options={filterVars}
@@ -113,6 +146,7 @@ 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,7 +61,9 @@ 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 {
@@ -128,6 +130,8 @@ export {
   Table,
   SchemaVariableListPicker,
   SchemaVariableList,
+  VariableList,
+  PickerContainer,
   FormulaPicker,
   InputJSONSchema
 };

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

@@ -13,6 +13,7 @@ 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;
 }
 
@@ -77,15 +78,16 @@ export class SchemaVariableList extends React.Component<
   }
 
   render() {
-    const {selectMode} = this.props;
+    const {selectMode, value, placeholderRender} = this.props;
 
     return (
       <VariableList
         data={this.state.variables}
-        value={this.props.value}
+        value={value}
         onSelect={this.handleSelect}
         selectMode={selectMode || 'tree'}
         itemRender={this.itemRender}
+        placeholderRender={placeholderRender}
       />
     );
   }

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

@@ -17,6 +17,7 @@ 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> {
@@ -31,7 +32,8 @@ export class SchemaVariableListPicker extends React.Component<SchemaVariableList
       title,
       selectMode,
       beforeBuildVariables,
-      onPickerOpen
+      onPickerOpen,
+      placeholderRender
     } = this.props;
 
     return (
@@ -51,6 +53,7 @@ export class SchemaVariableListPicker extends React.Component<SchemaVariableList
               schemas={stateSchemas ?? schemas}
               selectMode={selectMode}
               beforeBuildVariables={beforeBuildVariables}
+              placeholderRender={placeholderRender}
             />
           ) : (
             <></>

package/src/components/table/HeadCellFilter.tsx

@@ -180,7 +180,10 @@ export class HeadCellFilter extends React.Component<Props, State> {
     const payload = {[column.key]: selectedKeys};
 
     if (onFilter) {
-      const prevented = await onFilter(payload);
+      const prevented = await onFilter({
+        filterName: column.key,
+        filterValue: selectedKeys?.join(',')
+      });
       if (prevented) {
         return;
       }

package/src/components/table/HeadCellSort.tsx

@@ -51,7 +51,7 @@ export class HeadCellSort extends React.Component<Props, State> {
           }
 
           if (onSort) {
-            const prevented = onSort({
+            const prevented = await onSort({
               orderBy: this.state.orderBy,
               order: this.state.order
             });

package/src/components/table/index.tsx

@@ -10,7 +10,6 @@ import find from 'lodash/find';
 import isEqual from 'lodash/isEqual';
 import filter from 'lodash/filter';
 import intersection from 'lodash/intersection';
-import cloneDeep from 'lodash/cloneDeep';
 import Sortable from 'sortablejs';
 
 import {themeable, ClassNamesFn, ThemeProps} from '../../theme';
@@ -325,12 +324,15 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   constructor(props: TableProps) {
     super(props);
 
-    this.selectedRows = props.rowSelection
-      ? this.getSelectedRows(
-          props.dataSource,
-          props.rowSelection?.selectedRowKeys
-        )
-      : [];
+    if (props.rowSelection) {
+      const selectedResult = this.getSelectedRows(
+        props.dataSource,
+        props.rowSelection?.selectedRowKeys
+      );
+
+      this.selectedRows = selectedResult.selectedRows;
+      this.unSelectedRows = selectedResult.unSelectedRows;
+    }
 
     this.state = {
       selectedRowKeys: props.rowSelection
@@ -361,6 +363,8 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   tdColumns: Array<TdProps>;
   // 表格当前选中行
   selectedRows: Array<any>;
+  // 表格当前未选中行
+  unSelectedRows: Array<any>;
   // 拖拽排序
   sortable: Sortable;
   // 记录点击起始横坐标
@@ -393,6 +397,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     selectedRowKeys: Array<string | number>
   ) {
     const selectedRows: Array<any> = [];
+    const unSelectedRows: Array<any> = [];
     dataSource.forEach(data => {
       if (
         find(
@@ -401,10 +406,12 @@ export class Table extends React.PureComponent<TableProps, TableState> {
         )
       ) {
         selectedRows.push(data);
+      } else {
+        unSelectedRows.push(data);
       }
     });
 
-    return selectedRows;
+    return {selectedRows, unSelectedRows};
   }
 
   updateTableBodyFixed() {
@@ -498,10 +505,12 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     // 选择项发生了变化触发
     if (!isEqual(prevState.selectedRowKeys, this.state.selectedRowKeys)) {
       // 更新保存的已选择行数据
-      this.selectedRows = this.getSelectedRows(
+      const selectedResult = this.getSelectedRows(
         this.state.dataSource,
         this.state.selectedRowKeys
       );
+      this.selectedRows = selectedResult.selectedRows;
+      this.unSelectedRows = selectedResult.unSelectedRows;
 
       const {rowSelection} = this.props;
       rowSelection &&
@@ -526,10 +535,12 @@ export class Table extends React.PureComponent<TableProps, TableState> {
         this.setState({
           selectedRowKeys: this.props.rowSelection.selectedRowKeys
         });
-        this.selectedRows = this.getSelectedRows(
+        const selectedResult = this.getSelectedRows(
           this.state.dataSource,
           this.state.selectedRowKeys
         );
+        this.selectedRows = selectedResult.selectedRows;
+        this.unSelectedRows = selectedResult.unSelectedRows;
       }
     }
 
@@ -599,37 +610,6 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     this.destroyDragging();
   }
 
-  exchange(fromIndex: number, toIndex: number, item: any) {
-    const {scroll, headSummary} = this.props;
-    // 如果有头部总结行 fromIndex就会+1
-    if ((!scroll || (scroll && !scroll.y)) && headSummary) {
-      fromIndex = fromIndex - 1;
-    }
-
-    const index = toIndex - fromIndex;
-
-    const levels = item.getAttribute('row-levels');
-    const rowIndex = +item.getAttribute('row-index');
-
-    const dataSource = cloneDeep(this.state.dataSource);
-    const levelsArray = levels ? levels.split(',') : [];
-    const childrenColumnName = this.getChildrenColumnName();
-    let data: Array<any> = dataSource;
-    let i = 0;
-    while (i < levelsArray.length) {
-      data = data[levelsArray[i]][childrenColumnName];
-      i++;
-    }
-
-    if (data && data.length > 0) {
-      const row = cloneDeep(data[rowIndex]);
-      data.splice(rowIndex, 1);
-      data.splice(rowIndex + index, 0, row);
-    }
-
-    return data;
-  }
-
   initDragging() {
     const {classnames: cx, onDrag} = this.props;
 
@@ -666,14 +646,9 @@ export class Table extends React.PureComponent<TableProps, TableState> {
           return;
         }
 
-        const {onDrag} = this.props;
-        if (onDrag) {
-          const data = this.exchange(e.oldIndex, e.newIndex, e.item);
-          const prevented = await onDrag(data);
-          if (prevented) {
-            return;
-          }
-        }
+        const rowLevels = e.item.getAttribute('row-levels');
+
+        onDrag && onDrag(e.oldIndex, e.newIndex, rowLevels ? rowLevels.split(',') : []);
       }
     });
   }
@@ -1037,9 +1012,8 @@ export class Table extends React.PureComponent<TableProps, TableState> {
                             const selectedRowKeys = value ? allRowKeys : [];
                             if (onSelectAll) {
                               const prevented = await onSelectAll(
-                                value,
-                                selectedRowKeys,
                                 selectedRows,
+                                value ? [] : selectedRows,
                                 changeRows
                               );
                               if (prevented) {
@@ -1152,9 +1126,16 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     );
   }
 
-  onRowClick(event: React.ChangeEvent<any>, record?: any, rowIndex?: number) {
+  async onRowClick(event: React.ChangeEvent<any>, record?: any, rowIndex?: number) {
     const {rowSelection, onRow} = this.props;
 
+    if (onRow && onRow.onRowClick) {
+      const prevented = await onRow.onRowClick(event, record, rowIndex);
+      if (prevented) {
+        return;
+      }
+    }
+
     if (rowSelection && rowSelection.type && rowSelection.rowClick) {
       const defaultKey = this.getRowSelectionKeyField();
 
@@ -1165,10 +1146,6 @@ export class Table extends React.PureComponent<TableProps, TableState> {
 
       this.selectedSingleRow(!isSelected, record);
     }
-
-    if (record && onRow) {
-      onRow.onRowClick && onRow.onRowClick(event, record, rowIndex);
-    }
   }
 
   onRowMouseEnter(
@@ -1350,42 +1327,41 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     const defaultKey = this.getRowSelectionKeyField();
     const isRadio = rowSelection && rowSelection.type === 'radio';
 
-    if (onSelect) {
-      const prevented = await onSelect(
-        data,
-        value,
-        this.selectedRows,
-        this.state.selectedRowKeys
-      );
-      if (prevented) {
-        return;
-      }
-    }
-
+    let selectedRowKeys = [];
     if (value) {
       if (isRadio) {
-        this.setState({selectedRowKeys: [data[defaultKey]]});
+        selectedRowKeys = [data[defaultKey]];
       } else {
-        this.setState(prevState => ({
-          selectedRowKeys: [
-            ...prevState.selectedRowKeys,
-            data[defaultKey],
-            ...this.getDataChildrenKeys(data)
-          ].filter((key, i, a) => a.indexOf(key) === i)
-        }));
+        selectedRowKeys = [
+          ...this.state.selectedRowKeys,
+          data[defaultKey],
+          ...this.getDataChildrenKeys(data)
+        ].filter((key, i, a) => a.indexOf(key) === i)
       }
     } else {
       if (!isRadio) {
-        this.setState({
-          selectedRowKeys: this.state.selectedRowKeys.filter(
-            key =>
-              ![data[defaultKey], ...this.getDataChildrenKeys(data)].includes(
-                key
-              )
-          )
-        });
+        selectedRowKeys = this.state.selectedRowKeys.filter(
+          key =>
+            ![data[defaultKey], ...this.getDataChildrenKeys(data)].includes(
+              key
+            )
+        )
+      }
+    }
+
+    if (onSelect) {
+      const selectedResult = this.getSelectedRows(this.state.dataSource, selectedRowKeys);
+      const prevented = await onSelect(
+        selectedResult.selectedRows,
+        selectedRowKeys,
+        selectedResult.unSelectedRows
+      );
+      if (prevented) {
+        return;
       }
     }
+
+    this.setState({selectedRowKeys});
   }
 
   renderRow(data: any, rowIndex: number, levels: Array<number>) {
@@ -1396,6 +1372,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       draggable,
       indentSize,
       rowClassName,
+      keyField,
       lineHeight // 是否设置了固定行高
     } = this.props;
 
@@ -1515,10 +1492,11 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       key => key === data[defaultKey]
     );
     const hasChildrenChecked = this.hasCheckedChildrenRows(data);
+    const isRadio = rowSelection && rowSelection.type === 'radio';
 
     return [
       <tr
-        key={rowIndex}
+        key={`${data[keyField || 'key'] || rowIndex}`} // 可能会拖拽排序，就不能用rowIndex作为key了，否则显示会有问题
         row-index={rowIndex}
         row-levels={levels.join(',')}
         className={cx(
@@ -1546,8 +1524,8 @@ export class Table extends React.PureComponent<TableProps, TableState> {
             <CheckBox
               name={'Table-checkbox'}
               type={rowSelection.type || 'checkbox'}
-              partial={hasChildrenChecked && !isChecked}
-              checked={hasChildrenChecked || isChecked}
+              partial={!isRadio && hasChildrenChecked && !isChecked}
+              checked={isRadio ? isChecked : (hasChildrenChecked || isChecked)}
               onChange={(value, shift) => {
                 if (!(rowSelection && rowSelection.rowClick)) {
                   this.selectedSingleRow(value, data);
@@ -1603,9 +1581,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
             </Cell>
           </tr>
         ) : (
-          this.state.dataSource.map((data, index) => {
-            return this.renderRow(data, index, []);
-          })
+          this.state.dataSource.map((data, index) => this.renderRow(data, index, []))
         )}
       </tbody>
     );

package/src/locale/de-DE.ts

@@ -132,7 +132,7 @@ register('de-DE', {
   'File.retry': 'Wiederholen',
   'File.start': 'Hochladen beginnen',
   'File.upload': 'Hochladen',
-  'Image.upload':'Hochladen',
+  'Image.upload': 'Hochladen',
   'File.uploadFailed': 'Zurückgegebene Daten der Upload-API sind leer',
   'File.uploading': 'Wird hochgeladen...',
   'FormItem.autoUpdateloadFaild': 'Die Schnittstelle hat einen Fehler zurückgegeben, bitte sorgfältig prüfen',
@@ -333,5 +333,5 @@ register('de-DE', {
   'JSONSchema.description': 'Description',
   'JSONSchema.key': 'Key',
   'JSONSchema.array_items': 'Items',
-  'TimeNow': 'Jetzt',
+  'TimeNow': 'Jetzt'
 });

package/src/locale/en-US.ts

@@ -134,7 +134,7 @@ register('en-US', {
   'File.sizeLimit': 'The maximum file size is {{maxSize}} B',
   'File.start': 'Start upload',
   'File.upload': 'Upload',
-  'Image.upload':'Upload image',
+  'Image.upload': 'Upload image',
   'File.uploadFailed': 'return data of udpload api is empty',
   'File.uploading': 'Uploading',
   'FormItem.autoUpdateloadFaild': 'return data of autoUpdate api is error',
@@ -336,5 +336,5 @@ register('en-US', {
   'JSONSchema.description': 'Description',
   'JSONSchema.key': 'Key',
   'JSONSchema.array_items': 'Items',
-  'TimeNow': 'Now',
+  'TimeNow': 'Now'
 });

package/src/locale/zh-CN.ts

@@ -202,7 +202,7 @@ register('zh-CN', {
   'Select.clearAll': '移除所有',
   'Select.createLabel': '新增选项',
   'Select.placeholder': '请选择',
-  'Select.searchPromptText': '输入内容进行检索',
+  'Select.searchPromptText': '搜索',
   'sort': '排序',
   'SubForm.button': '设置',
   'SubForm.editDetail': '编辑详情',

package/src/renderers/Action.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import hotkeys from 'hotkeys-js';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
 import {Renderer, RendererProps} from '../factory';
 import {filter} from '../utils/tpl';
 import Button from '../components/Button';
-import pick from 'lodash/pick';
-import omit from 'lodash/omit';
+import {ScopedContext} from '../Scoped';
+import {isObject} from '../utils/helper';
+
+import type {IScopedContext} from '../Scoped';
+import type {Action as ICmptAction} from '../types';
 
 export interface ButtonSchema extends BaseSchema {
   /**
@@ -407,7 +412,8 @@ const ActionProps = [
   'copyFormat',
   'payload',
   'requireSelected',
-  'countDown'
+  'countDown',
+  'fileName'
 ];
 import {filterContents} from './Remark';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
@@ -431,7 +437,6 @@ 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
@@ -851,28 +856,68 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
 export default themeable(Action);
 
+export type ActionRendererProps = RendererProps &
+  Omit<ActionProps, 'onAction' | 'isCurrentUrl' | 'tooltipContainer'> & {
+    onAction: (
+      e: React.MouseEvent<any> | string | void | null,
+      action: object,
+      data: any
+    ) => void;
+    btnDisabled?: boolean;
+  };
+
 @Renderer({
   type: 'action'
 })
 // @ts-ignore 类型没搞定
 @withBadge
-export class ActionRenderer extends React.Component<
-  RendererProps &
-    Omit<ActionProps, 'onAction' | 'isCurrentUrl' | 'tooltipContainer'> & {
-      onAction: (
-        e: React.MouseEvent<any> | void | null,
-        action: object,
-        data: any
-      ) => void;
-      btnDisabled?: boolean;
+export class ActionRenderer extends React.Component<ActionRendererProps> {
+  static contextType = ScopedContext;
+
+  constructor(props: ActionRendererProps, scoped: IScopedContext) {
+    super(props);
+
+    scoped.registerComponent(this);
+  }
+
+  componentWillUnmount() {
+    const scoped = this.context as IScopedContext;
+    scoped.unRegisterComponent(this);
+  }
+
+  /**
+   * 动作处理
+   */
+  doAction(
+    action: ICmptAction,
+    args: {
+      value?: string | {[key: string]: string};
+    }
+  ) {
+    const actionType = action?.actionType;
+
+    if (actionType === 'click') {
+      this.handleAction(actionType, action);
     }
-> {
+  }
+
   @autobind
-  async handleAction(e: React.MouseEvent<any> | void | null, action: any) {
+  async handleAction(
+    e: React.MouseEvent<any> | string | void | null,
+    action: any
+  ) {
     const {env, onAction, data, ignoreConfirm, dispatchEvent} = this.props;
+    let mergedData = data;
+
+    if (action?.actionType === 'click' && isObject(action?.args)) {
+      mergedData = createObject(data, action.args);
+    }
 
     // 触发渲染器事件
-    const rendererEvent = await dispatchEvent(e as React.MouseEvent<any>, data);
+    const rendererEvent = await dispatchEvent(
+      e as React.MouseEvent<any> | string,
+      mergedData
+    );
 
     // 阻止原有动作执行
     if (rendererEvent?.prevented) {
@@ -880,14 +925,14 @@ export class ActionRenderer extends React.Component<
     }
 
     if (!ignoreConfirm && action.confirmText && env.confirm) {
-      let confirmed = await env.confirm(filter(action.confirmText, data));
+      let confirmed = await env.confirm(filter(action.confirmText, mergedData));
       if (confirmed) {
-        await onAction(e, action, data);
+        await onAction(e, action, mergedData);
       } else if (action.countDown) {
         throw new Error('cancel');
       }
     } else {
-      await onAction(e, action, data);
+      await onAction(e, action, mergedData);
     }
   }