amis 1.9.1-beta.12 → 1.9.1-beta.18

package/src/components/Select.tsx

@@ -778,10 +778,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
               })}
               onClick={this.removeItem.bind(this, index)}
             >
-              <Icon
-                icon="close"
-                className="icon"
-              />
+              <Icon icon="close" className="icon" />
             </span>
           </div>
         </TooltipWrapper>
@@ -1026,7 +1023,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           </div>
         ) : null}
 
-        <div ref={this.menuItemRef} className={cx('Select-option invisible')}>
+        <div ref={this.menuItemRef} className={cx('Select-option hidden')}>
           {multiple ? (
             <Checkbox size="sm">Placeholder</Checkbox>
           ) : (
@@ -1083,7 +1080,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           overlay
           className={cx('Select-popover')}
           style={{
-            minWidth: this.target ? this.target.offsetWidth : 'auto'
+            width: this.target ? this.target.offsetWidth : 'auto'
           }}
           onHide={this.close}
         >

package/src/components/formula/Editor.tsx

@@ -55,6 +55,11 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
    */
   variableMode?: 'tabs' | 'tree';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 函数集合，默认不需要传，即  amis-formula 里面那个函数
    * 如果有扩充，则需要传。
@@ -221,6 +226,19 @@ export class FormulaEditor extends React.Component<
 
   @autobind
   handleVariableSelect(item: VariableItem) {
+    const {onlyVariable, evalMode} = this.props;
+
+    // 只展示变量时，选择即提交
+    if (onlyVariable) {
+      const onChange = this.props.onChange;
+      const value = item.value
+        ? evalMode
+          ? item.value
+          : '${' + item.value + '}'
+        : '';
+      return onChange?.(value);
+    }
+
     this.editorPlugin?.insertContent(
       {
         key: item.value,
@@ -248,6 +266,7 @@ export class FormulaEditor extends React.Component<
       value,
       functions,
       variableMode,
+      onlyVariable,
       translate: __,
       classnames: cx,
       variableClassName,
@@ -267,23 +286,30 @@ export class FormulaEditor extends React.Component<
           'is-focused': focused
         })}
       >
-        <section className={cx(`FormulaEditor-content`)}>
-          <header className={cx(`FormulaEditor-header`)}>
-            {__(header || 'FormulaEditor.title')}
-          </header>
-
-          <CodeMirrorEditor
-            className={cx('FormulaEditor-editor')}
-            value={value}
-            onChange={this.handleOnChange}
-            editorFactory={this.editorFactory}
-            editorDidMount={this.handleEditorMounted}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-          />
-        </section>
-
-        <section className={cx('FormulaEditor-settings')}>
+        {onlyVariable ? null : (
+          <section className={cx(`FormulaEditor-content`)}>
+            <header className={cx(`FormulaEditor-header`)}>
+              {__(header || 'FormulaEditor.title')}
+            </header>
+
+            <CodeMirrorEditor
+              className={cx('FormulaEditor-editor')}
+              value={value}
+              onChange={this.handleOnChange}
+              editorFactory={this.editorFactory}
+              editorDidMount={this.handleEditorMounted}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
+            />
+          </section>
+        )}
+
+        <section
+          className={cx(
+            'FormulaEditor-settings',
+            onlyVariable ? 'only-variable' : ''
+          )}
+        >
           <div className={cx('FormulaEditor-panel')}>
             {variableMode !== 'tabs' ? (
               <div className={cx('FormulaEditor-panel-header')}>
@@ -310,12 +336,14 @@ export class FormulaEditor extends React.Component<
             </div>
           </div>
 
-          <FuncList
-            className={functionClassName}
-            title={__('FormulaEditor.function')}
-            data={functionList}
-            onSelect={this.handleFunctionSelect}
-          />
+          {onlyVariable ? null : (
+            <FuncList
+              className={functionClassName}
+              title={__('FormulaEditor.function')}
+              data={functionList}
+              onSelect={this.handleFunctionSelect}
+            />
+          )}
         </section>
       </div>
     );

package/src/components/formula/Picker.tsx

@@ -17,6 +17,7 @@ import {themeable} from '../../theme';
 import {localeable} from '../../locale';
 import type {SchemaIcon} from '../../Schema';
 import {parse, Evaluator} from 'amis-formula';
+import Input from '../Input';
 
 export interface FormulaPickerProps extends FormulaEditorProps {
   // 新的属性？
@@ -35,13 +36,18 @@ export interface FormulaPickerProps extends FormulaEditorProps {
   /**
    * 控件模式
    */
-  mode?: 'button' | 'input-button';
+  mode?: 'button' | 'input-button' | 'input-group';
 
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
    */
   borderMode?: 'full' | 'half' | 'none';
 
+  /**
+   * 只展示变量，不需要其他面板
+   */
+  onlyVariable?: boolean;
+
   /**
    * 按钮Label，inputMode为button时生效
    */
@@ -132,7 +138,8 @@ export class FormulaPicker extends React.Component<
   }
 
   static defaultProps = {
-    evalMode: true
+    evalMode: true,
+    onlyVariable: false
   };
 
   state: FormulaPickerState = {
@@ -173,8 +180,19 @@ export class FormulaPicker extends React.Component<
     this.setState({value}, () => this.handleConfirm());
   }
 
+  @autobind
+  handleInputGroupChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const onChange = this.props.onChange;
+    onChange && onChange(e.currentTarget.value);
+  }
+
   @autobind
   handleEditorChange(value: string) {
+    const {onlyVariable} = this.props;
+    if (onlyVariable) {
+      return this.confirm(value);
+    }
+
     this.setState({
       editorValue: value,
       isError: false
@@ -185,6 +203,10 @@ export class FormulaPicker extends React.Component<
   handleEditorConfirm() {
     const {translate: __} = this.props;
     const value = this.state.editorValue;
+    this.confirm(value);
+  }
+
+  confirm(value: string) {
     const validate = this.validate(value);
 
     if (validate === true) {
@@ -237,13 +259,11 @@ export class FormulaPicker extends React.Component<
     const {translate: __} = this.props;
 
     try {
-      const ast = parse(value, {
+      parse(value, {
         evalMode: this.props.evalMode,
         allowFilter: false
       });
 
-      new Evaluator({}).evalute(ast);
-
       return true;
     } catch (e) {
       if (/\s(\d+:\d+)$/.test(e.message)) {
@@ -276,6 +296,7 @@ export class FormulaPicker extends React.Component<
       functions,
       children,
       variableMode,
+      onlyVariable,
       ...rest
     } = this.props;
     const {isOpened, value, editorValue, isError} = this.state;
@@ -291,8 +312,14 @@ export class FormulaPicker extends React.Component<
             setState: this.updateState
           })
         ) : (
-          <div className={cx('FormulaPicker', className)}>
-            {mode === 'button' ? (
+          <div
+            className={cx(
+              'FormulaPicker',
+              className,
+              mode === 'input-group' ? 'is-input-group' : ''
+            )}
+          >
+            {mode === 'button' && (
               <Button
                 className={cx('FormulaPicker-action', 'w-full')}
                 level={level}
@@ -321,7 +348,8 @@ export class FormulaPicker extends React.Component<
                   {__(btnLabel || 'FormulaEditor.btnLabel')}
                 </span>
               </Button>
-            ) : (
+            )}
+            {mode === 'input-button' && (
               <>
                 <ResultBox
                   className={cx(
@@ -362,6 +390,29 @@ export class FormulaPicker extends React.Component<
                 </Button>
               </>
             )}
+            {mode === 'input-group' && (
+              <>
+                <Input
+                  className={cx('FormulaPicker-input')}
+                  onChange={this.handleInputGroupChange}
+                  placeholder={allowInput ? placeholder : ''}
+                  autoComplete="off"
+                  value={value}
+                  disabled={disabled}
+                  readOnly={!allowInput}
+                />
+
+                <a
+                  className={cx(`FormulaPicker-toggler`)}
+                  onClick={this.handleClick}
+                >
+                  <Icon
+                    icon={onlyVariable ? 'ellipsis-v' : 'function'}
+                    className="icon"
+                  />
+                </a>
+              </>
+            )}
           </div>
         )}
         <Modal
@@ -379,6 +430,7 @@ export class FormulaPicker extends React.Component<
               variables={this.state.variables ?? variables}
               functions={this.state.functions ?? functions}
               variableMode={this.state.variableMode ?? variableMode}
+              onlyVariable={onlyVariable}
               value={editorValue}
               onChange={this.handleEditorChange}
             />
@@ -391,10 +443,14 @@ export class FormulaPicker extends React.Component<
                 </span>
               </div>
             ) : null}
-            <Button onClick={this.close}>{__('cancel')}</Button>
-            <Button onClick={this.handleEditorConfirm} level="primary">
-              {__('confirm')}
-            </Button>
+            {onlyVariable ? null : (
+              <>
+                <Button onClick={this.close}>{__('cancel')}</Button>
+                <Button onClick={this.handleEditorConfirm} level="primary">
+                  {__('confirm')}
+                </Button>
+              </>
+            )}
           </Modal.Footer>
         </Modal>
       </>

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/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': '编辑详情',