amis 1.10.1-beta.1 → 1.10.1

package/src/components/table/index.tsx

@@ -14,7 +14,7 @@ import Sortable from 'sortablejs';
 
 import {themeable, ClassNamesFn, ThemeProps} from '../../theme';
 import {localeable, LocaleProps} from '../../locale';
-import {isObject, isBreakpoint, guid} from '../../utils/helper';
+import {isObject, isBreakpoint, guid, autobind} from '../../utils/helper';
 import {Icon} from '../icons';
 import CheckBox from '../Checkbox';
 import Spinner from '../Spinner';
@@ -158,9 +158,9 @@ export interface TableState {
   expandedRowKeys: Array<string | number>;
   colWidths: Array<number>;
   hoverRow: {
-    rowIndex?: number,
-    record: any,
-    target: HTMLTableRowElement
+    rowIndex?: number;
+    record: any;
+    target: HTMLTableRowElement;
   } | null;
 }
 
@@ -349,7 +349,6 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       hoverRow: null
     };
 
-    this.onTableContentScroll = this.onTableContentScroll.bind(this);
     this.getPopOverContainer = this.getPopOverContainer.bind(this);
   }
 
@@ -366,10 +365,14 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   // 表格当前未选中行
   unSelectedRows: Array<any>;
   // 拖拽排序
-  sortable: Sortable;
+  sortable: Sortable | null;
   // 记录点击起始横坐标
   resizeStart: number;
   resizeKey: string;
+  resizeTarget: HTMLElement | null;
+  resizeWidth: number;
+  // 可以拖拽的最长距离
+  resizeMaxDistance: number;
 
   tableDom: React.RefObject<HTMLDivElement> = React.createRef();
   theadDom: React.RefObject<HTMLTableSectionElement> = React.createRef();
@@ -417,6 +420,9 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   updateTableBodyFixed() {
     const tbodyDom = this.tbodyDom && (this.tbodyDom.current as HTMLElement);
     const tdColumns = [...this.tdColumns];
+    if (!tbodyDom) {
+      return;
+    }
     this.updateTbodyFixedRow(tbodyDom, tdColumns);
     this.updateHeadSummaryFixedRow(tbodyDom);
   }
@@ -433,11 +439,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     });
   }
 
-  componentDidMount() {
-    if (this.props.loading) {
-      return;
-    }
-
+  updateTableFixedRows() {
     if (hasFixedColumn(this.props.columns)) {
       const headerDom =
         this.headerDom && (this.headerDom.current as HTMLElement);
@@ -451,14 +453,17 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       const tfootDom = this.tfootDom && (this.tfootDom.current as HTMLElement);
       tfootDom && this.updateFootSummaryFixedRow(tfootDom);
     }
+  }
 
-    let current = null;
-    if (this.contentDom && this.contentDom.current) {
-      current = this.contentDom.current;
-      current.addEventListener('scroll', this.onTableContentScroll.bind(this));
-    } else {
-      current = this.headerDom?.current;
+  componentDidMount() {
+    if (this.props.loading) {
+      return;
+    }
+
+    this.updateTableFixedRows();
 
+    let current = this.contentDom?.current;
+    if (this.headerDom?.current) {
       // overflow设置为hidden的情况
       const hiddenDomRefs = [this.headerDom, this.footDom];
       hiddenDomRefs.forEach(
@@ -467,14 +472,6 @@ export class Table extends React.PureComponent<TableProps, TableState> {
           ref.current &&
           ref.current.addEventListener('wheel', this.onWheel.bind(this))
       );
-      // 横向同步滚动
-      const scrollDomRefs = [this.bodyDom];
-      scrollDomRefs.forEach(
-        ref =>
-          ref &&
-          ref.current &&
-          ref.current.addEventListener('scroll', this.onTableScroll.bind(this))
-      );
     }
     current && this.updateTableDom(current);
 
@@ -482,13 +479,6 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       this.initDragging();
     }
 
-    if (this.props.resizable) {
-      this.theadDom.current?.addEventListener(
-        'mouseup',
-        this.onResizeMouseUp.bind(this)
-      );
-    }
-
     this.updateStickyHeader();
 
     this.updateColWidths();
@@ -497,9 +487,19 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   componentDidUpdate(prevProps: TableProps, prevState: TableState) {
     // 数据源发生了变化
     if (!isEqual(prevProps.dataSource, this.props.dataSource)) {
-      this.setState({dataSource: [...this.props.dataSource]}, () =>
-        this.updateColWidths()
-      ); // 异步加载数据需求再更新一次
+      this.setState({dataSource: [...this.props.dataSource]}, () => {
+        if (this.props.draggable) {
+          if (this.sortable) {
+            this.destroyDragging();
+          }
+
+          this.initDragging();
+        }
+
+        this.updateTableFixedRows();
+
+        this.updateColWidths();
+      }); // 异步加载数据需求再更新一次
     }
 
     // 选择项发生了变化触发
@@ -584,13 +584,6 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   }
 
   componentWillUnmount() {
-    this.contentDom &&
-      this.contentDom.current &&
-      this.contentDom.current.removeEventListener(
-        'scroll',
-        this.onTableContentScroll.bind(this)
-      );
-
     const hiddenDomRefs = [this.headerDom, this.footDom];
     hiddenDomRefs.forEach(
       ref =>
@@ -599,14 +592,6 @@ export class Table extends React.PureComponent<TableProps, TableState> {
         ref.current.removeEventListener('wheel', this.onWheel.bind(this))
     );
 
-    const scrollDomRefs = [this.bodyDom];
-    scrollDomRefs.forEach(
-      ref =>
-        ref &&
-        ref.current &&
-        ref.current.removeEventListener('scroll', this.onTableScroll.bind(this))
-    );
-
     this.destroyDragging();
   }
 
@@ -648,13 +633,15 @@ export class Table extends React.PureComponent<TableProps, TableState> {
 
         const rowLevels = e.item.getAttribute('row-levels');
 
-        onDrag && onDrag(e.oldIndex, e.newIndex, rowLevels ? rowLevels.split(',') : []);
+        onDrag &&
+          onDrag(e.oldIndex, e.newIndex, rowLevels ? rowLevels.split(',') : []);
       }
     });
   }
 
   destroyDragging() {
     this.sortable && this.sortable.destroy();
+    this.sortable = null;
   }
 
   updateStickyHeader() {
@@ -840,73 +827,61 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     );
   }
 
-  onResizeMouseDown(event: React.MouseEvent<any>, key: string) {
+  onResizeMouseDown(event: any, key: string) {
     // 点击记录起始坐标
     this.resizeStart = event.clientX;
-    // 记录点击的列名
     this.resizeKey = key;
+
+    let index =
+      this.tdColumns.findIndex(c => c.key === key) + this.getExtraColumnCount();
+
+    const colGroup = this.tableDom.current?.getElementsByTagName('colgroup')[0];
+    let currentWidth = 0;
+    let child = null;
+    if (colGroup && colGroup.children[index]) {
+      child = colGroup.children[index] as HTMLElement;
+      currentWidth = child.offsetWidth;
+    }
+    this.resizeWidth = currentWidth;
+    this.resizeTarget = child;
+
+    if (colGroup) {
+      let maxDistance = 0;
+      for (let i = 0; i < colGroup.children.length; i++) {
+        const child = colGroup.children[i] as HTMLElement;
+        // 自适应列 保证有一个最小宽度
+        // 如果都设置了固定宽度 那一个都拖不动
+        if (!this.tdColumns[i].width) {
+          maxDistance += child.offsetWidth - DefaultCellWidth;
+        }
+      }
+      this.resizeMaxDistance = maxDistance;
+    }
+
+    document.addEventListener('mousemove', this.onResizeMouseMove);
+    document.addEventListener('mouseup', this.onResizeMouseUp);
+
     event && event.stopPropagation();
   }
 
-  onResizeMouseUp(event: React.MouseEvent<any>) {
+  @autobind
+  onResizeMouseMove(event: any) {
     // 点击了调整列宽
-    if (this.resizeStart && this.resizeKey) {
+    if (this.resizeStart && this.resizeTarget) {
       // 计算横向移动距离
       const distance = event.clientX - this.resizeStart;
       const tdColumns = [...this.tdColumns];
-      let index =
-        tdColumns.findIndex(c => c.key === this.resizeKey) +
-        this.getExtraColumnCount();
-
-      const colGroup =
-        this.tableDom.current?.getElementsByTagName('colgroup')[0];
-      let currentWidth = 0;
-      if (colGroup && colGroup.children[index]) {
-        const child = colGroup.children[index] as HTMLElement;
-        currentWidth = child.offsetWidth;
-      }
 
       let newWidth = 0;
-      if (colGroup) {
-        let maxDistance = 0; // 最多可以移动的距离
-        // 调宽列
-        if (distance > 0) {
-          for (let i = 0; i < colGroup.children.length; i++) {
-            const child = colGroup.children[i] as HTMLElement;
-            // 自适应列 保证有一个最小宽度
-            // 如果都设置了固定宽度 那一个都拖不动
-            if (!this.tdColumns[i].width) {
-              maxDistance += child.offsetWidth - DefaultCellWidth;
-            }
-          }
-          if (colGroup.children[index]) {
-            const child = colGroup.children[index] as HTMLElement;
-            newWidth = currentWidth + Math.min(distance, maxDistance);
-            child.style.width = newWidth + 'px';
-          }
-        } else {
-          // 缩短列
-          const autoColumns = [];
-          for (let i = 0; i < colGroup.children.length; i++) {
-            const child = colGroup.children[i] as HTMLElement;
-            // 自适应列 保证有一个最小宽度
-            // 如果都设置了固定宽度 那一个都拖不动
-            if (!this.tdColumns[i].width) {
-              autoColumns.push(child);
-            }
-          }
-          maxDistance = DefaultCellWidth - currentWidth;
-          if (colGroup.children[index]) {
-            const child = colGroup.children[index] as HTMLElement;
-            newWidth = currentWidth + Math.max(distance, maxDistance);
-            child.style.width = newWidth + 'px';
-          }
-          const gap =
-            Math.abs(Math.max(distance, maxDistance)) / autoColumns.length;
-          autoColumns.forEach(c => {
-            c.style.width = c.offsetWidth + gap + 'px';
-          });
-        }
+      // 调宽列
+      if (distance > 0) {
+        newWidth =
+          this.resizeWidth + Math.min(distance, this.resizeMaxDistance);
+        this.resizeTarget.style.width = newWidth + 'px';
+      } else {
+        // 缩短列
+        newWidth = Math.max(this.resizeWidth + distance, DefaultCellWidth);
+        this.resizeTarget.style.width = newWidth + 'px';
       }
 
       const column = find(tdColumns, c => c.key === this.resizeKey);
@@ -918,13 +893,22 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       }
 
       this.tdColumns = tdColumns;
-
-      this.resizeStart = 0;
-      this.resizeKey = '';
     }
     event && event.stopPropagation();
   }
 
+  @autobind
+  onResizeMouseUp(event: MouseEvent) {
+    document.removeEventListener('mousemove', this.onResizeMouseMove);
+    document.removeEventListener('mouseup', this.onResizeMouseUp);
+
+    this.resizeStart = 0;
+    this.resizeKey = '';
+    this.resizeWidth = 0;
+    this.resizeTarget = null;
+    this.resizeMaxDistance = 0;
+  }
+
   renderTHead() {
     const {
       rowSelection,
@@ -1086,47 +1070,51 @@ 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-${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>
     );
   }
 
-  async 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) {
@@ -1175,7 +1163,8 @@ export class Table extends React.PureComponent<TableProps, TableState> {
 
       this.setState({hoverRow: {target, rowIndex, record}}, () => {
         if (onRow) {
-          onRow.onRowMouseEnter && onRow.onRowMouseEnter(event, record, rowIndex);
+          onRow.onRowMouseEnter &&
+            onRow.onRowMouseEnter(event, record, rowIndex);
         }
       });
     }
@@ -1336,21 +1325,22 @@ export class Table extends React.PureComponent<TableProps, TableState> {
           ...this.state.selectedRowKeys,
           data[defaultKey],
           ...this.getDataChildrenKeys(data)
-        ].filter((key, i, a) => a.indexOf(key) === i)
+        ].filter((key, i, a) => a.indexOf(key) === i);
       }
     } else {
       if (!isRadio) {
         selectedRowKeys = this.state.selectedRowKeys.filter(
           key =>
-            ![data[defaultKey], ...this.getDataChildrenKeys(data)].includes(
-              key
-            )
-        )
+            ![data[defaultKey], ...this.getDataChildrenKeys(data)].includes(key)
+        );
       }
     }
 
     if (onSelect) {
-      const selectedResult = this.getSelectedRows(this.state.dataSource, selectedRowKeys);
+      const selectedResult = this.getSelectedRows(
+        this.state.dataSource,
+        selectedRowKeys
+      );
       const prevented = await onSelect(
         selectedResult.selectedRows,
         selectedRowKeys,
@@ -1396,8 +1386,11 @@ export class Table extends React.PureComponent<TableProps, TableState> {
       levels.length > 0 ? (
         <span
           className={cx('Table-row-indent', `indent-level-${levels.length}`)}
-          style={levels.length > 0
-            ? {paddingLeft: (indentSize * levels.length) + 'px'} : {}}
+          style={
+            levels.length > 0
+              ? {paddingLeft: indentSize * levels.length + 'px'}
+              : {}
+          }
         ></span>
       ) : null;
 
@@ -1417,8 +1410,10 @@ export class Table extends React.PureComponent<TableProps, TableState> {
         }
       }
 
-      const className = typeof item.className === 'function'
-        ? item.className(data, rowIndex) : ''
+      const className =
+        typeof item.className === 'function'
+          ? item.className(data, rowIndex)
+          : '';
       return props.rowSpan === 0 || props.colSpan === 0 ? null : (
         <Cell
           key={i}
@@ -1430,12 +1425,14 @@ export class Table extends React.PureComponent<TableProps, TableState> {
             [`${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)
@@ -1525,7 +1522,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
               name={'Table-checkbox'}
               type={rowSelection.type || 'checkbox'}
               partial={!isRadio && hasChildrenChecked && !isChecked}
-              checked={isRadio ? isChecked : (hasChildrenChecked || isChecked)}
+              checked={isRadio ? isChecked : hasChildrenChecked || isChecked}
               onChange={(value, shift) => {
                 if (!(rowSelection && rowSelection.rowClick)) {
                   this.selectedSingleRow(value, data);
@@ -1581,7 +1578,9 @@ export class Table extends React.PureComponent<TableProps, TableState> {
             </Cell>
           </tr>
         ) : (
-          this.state.dataSource.map((data, index) => this.renderRow(data, index, []))
+          this.state.dataSource.map((data, index) =>
+            this.renderRow(data, index, [])
+          )
         )}
       </tbody>
     );
@@ -1723,6 +1722,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   onWheel(event: WheelEvent) {
     const {currentTarget, deltaX} =
       event as unknown as React.WheelEvent<HTMLDivElement>;
+
     if (deltaX) {
       this.onTableScroll({
         target: currentTarget,
@@ -1733,7 +1733,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
     }
   }
 
-  onTableScroll(event: {target: HTMLDivElement; scrollLeft?: number}) {
+  onTableScroll(event: any) {
     const scrollDomRefs = [this.headerDom, this.bodyDom, this.footDom];
 
     const {target, scrollLeft} = event;
@@ -1777,14 +1777,15 @@ export class Table extends React.PureComponent<TableProps, TableState> {
         className={cx('Table-content')}
         style={hasScrollX ? {overflow: 'auto hidden'} : {}}
         onMouseLeave={this.onMouseLeave.bind(this)}
+        onScroll={this.onTableContentScroll.bind(this)}
       >
-        {itemActions && hoverRow
-          ? <ItemActionsWrapper
-              dom={hoverRow.target}
-              classnames={cx}>
-                {typeof itemActions === 'function'
-                  ? itemActions(hoverRow.record, hoverRow.rowIndex) : null}
-              </ItemActionsWrapper> : null}
+        {itemActions && hoverRow ? (
+          <ItemActionsWrapper dom={hoverRow.target} classnames={cx}>
+            {typeof itemActions === 'function'
+              ? itemActions(hoverRow.record, hoverRow.rowIndex)
+              : null}
+          </ItemActionsWrapper>
+        ) : null}
         <table
           style={
             hasScrollX
@@ -1845,11 +1846,7 @@ export class Table extends React.PureComponent<TableProps, TableState> {
   }
 
   renderScrollTableBody() {
-    const {
-      scroll,
-      itemActions,
-      classnames: cx
-    } = this.props;
+    const {scroll, itemActions, classnames: cx} = this.props;
 
     const style = {};
     const tableStyle = {};
@@ -1872,20 +1869,20 @@ export class Table extends React.PureComponent<TableProps, TableState> {
         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>
+        onMouseLeave={this.onMouseLeave.bind(this)}
+        onScroll={this.onTableScroll.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/index.tsx

@@ -62,6 +62,7 @@ import './renderers/Collapse';
 import './renderers/CollapseGroup';
 import './renderers/Color';
 import './renderers/CRUD';
+import './renderers/CRUD2';
 import './renderers/Pagination';
 import './renderers/Cards';
 import './renderers/Card';

package/src/renderers/ButtonGroup.tsx

@@ -22,7 +22,7 @@ export interface ButtonGroupSchema extends BaseSchema {
   /**
    * @deprecated 给选中态 Button 配置 className。建议用btnActiveLevel
    */
-  btnActiveClassName: string;
+  btnActiveClassName?: string;
 
   /**
    * 按钮集合
@@ -32,7 +32,7 @@ export interface ButtonGroupSchema extends BaseSchema {
   /**
    * 按钮样式级别
    */
-  btnLevel: string;
+  btnLevel?: string;
 
   /**
    * 按钮选中的样式级别