feat:支持动态配置表格行高和字号

2019-11-11 17:17:34 +08:00 · 2019-11-11 17:17:34 +08:00 · 9a40f28b16
parent 4ddf9cbae1
commit 9a40f28b16
12 changed files with 175920 additions and 169737 deletions
--- a/demo/demolist/Demo0.js
+++ b/demo/demolist/Demo0.js
@ -0,0 +1,95 @@
+/**
+*
+* @title 自定义设置行高和字号
+* @description canConfigureTableSize 设置是否显示toolbar设置按钮，getToolbarContainer 设置按钮放置的容器。
+*/
+
+import React, { Component } from "react";
+import Table from "../../src";
+
+const columns = [
+    { title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
+    { title: "采购组织", dataIndex: "org", key: "org", width: 200 },
+    { title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
+    { title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
+    { title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
+    { title: "单据状态", dataIndex: "status", key: "status", width: 100 },
+    { title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
+    { title: "单位", dataIndex: "unit", key: "unit", width: 100 },
+    { title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
+];
+
+const data = [
+    {
+        orderNum: "NU0391025",
+        org: "用友网络科技股份有限公司",
+        supplier: "xx供应商",
+        orderDate: '2018年03月18日',
+        quantity: '100.00',
+        status: '正常',
+        submitter: '小张',
+        unit: 'pc',
+        sum: '8,487.00',
+        key: "1"
+    },
+    {
+        orderNum: "NU0391026",
+        org: "用友网络科技股份有限公司",
+        supplier: "xx供应商",
+        orderDate: '2018年02月05日',
+        quantity: '91.00',
+        status: '异常',
+        submitter: '小红',
+        unit: 'pc',
+        sum: '675.00',
+        key: "2"
+    },
+    {
+        orderNum: "NU0391027",
+        org: "用友网络科技股份有限公司",
+        supplier: "xx供应商",
+        orderDate: '2018年07月01日',
+        quantity: '98.00',
+        status: '正常',
+        submitter: '小李',
+        unit: 'pc',
+        sum: '1,531.00',
+        key: "3"
+    }
+];
+
+class Demo0 extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: data,
+            selectedRowIndex: 0,
+        }
+    }
+
+    getToolbarContainer = () => {
+        return document.getElementById('table-toolbar-container');
+    }
+
+    render () {
+        return (
+            <div className="demo0">
+                <div id="table-toolbar-container"></div>
+                <Table
+                    canConfigureTableSize={true}
+                    getToolbarContainer={this.getToolbarContainer}
+                    columns={columns}
+                    data={data}
+                    onRowClick={(record, index, indent) => {
+                        this.setState({
+                            selectedRowIndex: index
+                        });
+                    }}
+                />
+            </div>
+        );
+    }
+}
+
+export default Demo0;
--- a/demo/demolist/Demo0.scss
+++ b/demo/demolist/Demo0.scss
@ -0,0 +1,6 @@
+.demo0{
+    text-align: end;
+    .u-table-adjustSize-btn{
+        margin-bottom: 8px;
+    }
+}
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -231,6 +231,8 @@
    color: rgb(33, 33, 33); }
  .u-table.fixed-height td {
    padding: 0px 8px; }
+  .u-table.fixed-height th {
+    padding: 0px 8px; }
  .u-table-fixed-header .u-table-body {
    background: #fff;
    position: relative; }
@ -704,6 +706,27 @@
 ::-webkit-scrollbar-track-piece {
  display: none; }

+.u-table-adjustSize-btn.u-button {
+  min-width: 0;
+  padding: 4px 12px; }
+  .u-table-adjustSize-btn.u-button .uf {
+    padding: 0; }
+    .u-table-adjustSize-btn.u-button .uf:first-child {
+      margin-right: 8px; }
+    .u-table-adjustSize-btn.u-button .uf:last-child {
+      font-size: 12px; }
+
+.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 8px;
+  line-height: 32px;
+  height: 32px; }
+  .u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item svg {
+    margin-right: 4px; }
+
 .selected {
  background: #e3f2fd; }

@ -712,6 +735,11 @@
  .demo25 .u-table-filter-column-filter-icon {
    right: 15px; }

+.demo0 {
+  text-align: end; }
+  .demo0 .u-table-adjustSize-btn {
+    margin-bottom: 8px; }
+
 th .drop-menu .uf {
  font-size: 12px;
  visibility: hidden;
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/package.json
+++ b/package.json
@ -57,6 +57,7 @@
  "bee-loading": "^1.0.6",
  "bee-locale": "0.0.11",
  "bee-menus": "^2.0.2",
+  "bee-overlay": "^1.0.31",
  "bee-select": "^2.0.4",
  "classnames": "^2.2.5",
  "component-classes": "^1.2.6",
--- a/src/Table.js
+++ b/src/Table.js
@ -10,6 +10,12 @@ import ColumnManager from './ColumnManager';
 import createStore from './createStore';
 import Loading from 'bee-loading';
 import { Event,EventUtil,closest} from "./utils";
+import Dropdown from 'bee-dropdown';
+import Menu from 'bee-menus';
+import Button from 'bee-button';
+import Icon from 'bee-icon';
+import Tablesvg from './svg';
+import Portal from 'bee-overlay/build/Portal';

 const propTypes = {
  data: PropTypes.array,
@ -51,7 +57,9 @@ const propTypes = {
  onFilterClear: PropTypes.func,
  syncHover: PropTypes.bool,
  tabIndex:PropTypes.string,
-  hoverContent:PropTypes.func
+  hoverContent:PropTypes.func,
+  canConfigureTableSize: PropTypes.bool,
+  getToolbarContainer: PropTypes.func,
 };

 const defaultProps = {
@ -85,7 +93,8 @@ const defaultProps = {
  setRowHeight:()=>{},
  setRowParentIndex:()=>{},
  tabIndex:'0',
-  heightConsistent:false
+  heightConsistent:false,
+  canConfigureTableSize:false
 };

 class Table extends Component {
@ -112,6 +121,7 @@ class Table extends Component {
      scrollPosition: 'left',
      fixedColumnsHeadRowsHeight: [],
      fixedColumnsBodyRowsHeight: [],
+      tableSizeConf: null, //实现表格动态缩放
    }

    this.onExpandedRowsChange = this.onExpandedRowsChange.bind(this);
@ -346,6 +356,7 @@ class Table extends Component {
  }

  getHeader(columns, fixed) {
+    const { tableSizeConf } = this.state;
    const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
      onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder} = this.props;
    const rows = this.getHeaderRows(columns);
@ -358,7 +369,11 @@ class Table extends Component {
      });
    }

-    const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
+    // const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
+    let trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : ( headerHeight ? { height: headerHeight } : null );
+    if( !fixed && tableSizeConf && tableSizeConf.headerHeight ){
+        trStyle = { height:tableSizeConf.headerHeight };
+    }
    let drop = draggable ? { onDragStart, onDragOver, onDrop, onDragEnter, draggable } : {};
    let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder } : {};
    let contentWidthDiff = 0;
@ -533,7 +548,7 @@ class Table extends Component {
    const childrenColumnName = props.childrenColumnName;
    const expandedRowRender = props.expandedRowRender;
    const expandRowByClick = props.expandRowByClick;
-    const { fixedColumnsBodyRowsHeight } = this.state;
+    const { fixedColumnsBodyRowsHeight,tableSizeConf } = this.state;
    let rst = [];

    let height;
@ -588,6 +603,10 @@ class Table extends Component {
      } else if(fixed || props.heightConsistent) {
        height = fixedColumnsBodyRowsHeight[fixedIndex];
      }
+      // 如果切换了配置，以自定义配置的高度为准
+      if( !fixed && !props.heightConsistent && tableSizeConf && tableSizeConf.headerHeight ){
+        height = tableSizeConf.height;
+      }

      let leafColumns;
      if (fixed === 'left') {
@ -649,6 +668,7 @@ class Table extends Component {
          fixedIndex={fixedIndex+lazyCurrentIndex}
          rootIndex = {rootIndex}
          syncHover = {props.syncHover}
+          tableSizeConf={tableSizeConf}
        />
      );
      this.treeRowIndex++;
@ -1170,7 +1190,56 @@ class Table extends Component {
    this.props.onTableKeyDown&&this.props.onTableKeyDown();
  }

+    /**
+     * 自定义设置表格行高、字体大小
+     */
+    getTableToolbar = () => {
+        const { clsPrefix } = this.props;
+        let menu = (
+            <Menu className={`${clsPrefix}-adjustSize-menus`} onSelect={this.onConfigMenuSelect}>
+                <Menu.Item key="sm">{Tablesvg.compact}紧凑型</Menu.Item>
+                <Menu.Item key="md">{Tablesvg.moderate}适中</Menu.Item>
+                <Menu.Item key="lg">{Tablesvg.easy}宽松型</Menu.Item>
+            </Menu>
+        )
+        return (
+            <Dropdown
+                trigger={['hover']}
+                overlay={menu}
+                placement="bottomRight"
+                animation="slide-up">
+                <Button bordered className={`${clsPrefix}-adjustSize-btn`}><Icon type="uf-table"/><Icon type="uf-arrow-down"/></Button>
+            </Dropdown>
+        ) 
+    }
+    onConfigMenuSelect = ({key}) => {
+        let { tableSizeConf } = this.state;
+        if(key === 'sm'){
+            tableSizeConf = {
+                height: 30,
+                headerHeight: 35,
+                fontSize: 12
+            };
+        } else if(key === 'lg'){
+            tableSizeConf = {
+                height: 50,
+                headerHeight: 50,
+                fontSize: 14
+            };
+        } else if(key === 'md'){
+            tableSizeConf = {
+                height: 40,
+                headerHeight: 40,
+                fontSize: 12
+            };
+        }
+        this.setState({
+            tableSizeConf
+        })
+    }
+
  render() {
+    const {tableSizeConf} = this.state;
    const props = this.props;
    const clsPrefix = props.clsPrefix;

@ -1186,7 +1255,7 @@ class Table extends Component {
    }
    className += ` ${clsPrefix}-scroll-position-${this.state.scrollPosition}`;
    //如果传入height说明是固定高度
-    if(props.height){
+    if(props.height || tableSizeConf){
      className += ' fixed-height';
    }
    const isTableScroll = this.columnManager.isAnyColumnsFixed() ||
@ -1198,10 +1267,17 @@ class Table extends Component {
        show: loading,
      };
    }
-
+    let portal = props.canConfigureTableSize && typeof window !== 'undefined' && props.getToolbarContainer ? (
+        <Portal container={props.getToolbarContainer}>
+            { this.getTableToolbar() }
+        </Portal>
+    ) : this.getTableToolbar();
    return (
      <div className={className} style={props.style} ref={el => this.contentTable = el} 
      tabIndex={props.focusable && (props.tabIndex?props.tabIndex:'0')} >
+        { props.canConfigureTableSize && 
+          <div className={`${clsPrefix}-toolbar`}>{portal}</div>
+        }
        {this.getTitle()}
        <div className={`${clsPrefix}-content`}>
         
--- a/src/Table.scss
+++ b/src/Table.scss
@ -149,6 +149,9 @@ $checkbox-height:16px;
  &.fixed-height td {
    padding: 0px 8px;
  }
+  &.fixed-height th {
+    padding: 0px 8px;
+  }

  &-fixed-header &-body {
    background: #fff;
@ -821,4 +824,22 @@ $checkbox-height:16px;

 ::-webkit-scrollbar-track-piece {
  display: none;
+}
+// 调整 table size 
+.u-table-adjustSize-btn.u-button{
+    min-width: 0;
+    padding: 4px 12px;
+    .uf {
+        padding: 0;
+        &:first-child{ margin-right: 8px; }
+        &:last-child{ font-size: 12px; }
+    }
+}
+.u-table-adjustSize-menus.u-dropdown-menu>.u-dropdown-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    line-height: 32px;
+    height: 32px;
+    svg{ margin-right: 4px; }
 }
--- a/src/TableRow.js
+++ b/src/TableRow.js
@ -48,6 +48,7 @@ class TableRow extends Component{
     this._timeout = null;
     this.state = {
         hovered: false,
+         tableSizeConf: {}
     };
     this.onRowClick = this.onRowClick.bind(this);
     this.onRowDoubleClick = this.onRowDoubleClick.bind(this);
@ -74,7 +75,15 @@ class TableRow extends Component{
  
    
  }
-
+  componentWillReceiveProps(nextProps){
+    const { tableSizeConf:newTableSizeConf } = nextProps;
+    const { tableSizeConf:oldTableSizeConf } = this.props;
+    if( newTableSizeConf !== oldTableSizeConf ){
+        this.setState({
+            tableSizeConf: newTableSizeConf
+        })
+    }
+  }

  componentDidUpdate(prevProps) {
    if(this.props.treeType){
@ -161,6 +170,7 @@ class TableRow extends Component{
  }
 
  render() {
+    const { tableSizeConf } = this.state;
    const {
      clsPrefix, columns, record, height, visible, index,
      expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
@ -222,6 +232,9 @@ class TableRow extends Component{
    if (!visible) {
      style.display = 'none';
    }
+    if (tableSizeConf && tableSizeConf.fontSize) {
+      style.fontSize = tableSizeConf.fontSize;
+    }
    return ( 
      <tr
        onClick={this.onRowClick}
--- a/src/svg.js
+++ b/src/svg.js
@ -0,0 +1,7 @@
+// 紧凑、适中、宽松型图标，后续更新 iconfont 资源后，可以删掉该文件
+
+export default {
+    compact: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.554h13.999V6H5v1.554zm0 2.816h13.999V8.814H5v1.556zm0 2.814h13.999v-1.556H5v1.556zm0 2.814h13.999v-1.555H5v1.555zm0 2.815h13.999v-1.554H5v1.554z" fill="#505F79" fill-rule="evenodd"/></svg>,
+    moderate: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 9.163h14V6H5v3.163zm0 4.825h14v-3.163H5v3.163zm0 4.825h14v-3.164H5v3.164z" fill="#505F79" fill-rule="evenodd"/></svg>,
+    easy: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 11.075h14V6H5v5.075zm0 7.739h14v-5.075H5v5.075z" fill="#505F79" fill-rule="evenodd"/></svg>
+}