@kdcloudjs/table 1.0.0

package/es/table/pipeline/features/__test__/sort.test.js

@@ -0,0 +1,213 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import { sort } from '../sort';
+import { useTablePipeline } from '../../pipeline';
+import { mount } from 'enzyme';
+import { renderHook } from '@testing-library/react-hooks';
+var dataSource = [{
+  id: '1',
+  prov: '湖北省',
+  confirm: 54406,
+  cure: 4793,
+  dead: 1457,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '2',
+  prov: '广东省',
+  confirm: 1294,
+  cure: 409,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '3',
+  prov: '河南省',
+  confirm: 1212,
+  cure: 390,
+  dead: 13,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '4',
+  prov: '浙江省',
+  confirm: 1000,
+  cure: 428,
+  dead: 0,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '5',
+  prov: '湖南省',
+  confirm: 1000,
+  cure: 417,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}];
+var columns = [{
+  code: 'prov',
+  name: '省份',
+  width: 150,
+  features: {
+    sortable: true
+  }
+}, {
+  code: 'confirm',
+  name: '确诊',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true
+  }
+}, {
+  code: 'cure',
+  name: '治愈',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true
+  }
+}, {
+  code: 'dead',
+  name: '死亡',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true
+  }
+}, {
+  code: 't',
+  name: '更新时间',
+  width: 180,
+  features: {
+    sortable: true
+  }
+}];
+describe('sort 单元测试', function () {
+  var opts = {
+    defaultSorts: [{
+      code: 'cure',
+      order: 'asc'
+    }],
+    highlightColumnWhenActive: true,
+    mode: 'single',
+    keepDataSource: false,
+    onChangeSorts: jest.fn()
+  };
+  var newPipeline = null;
+  beforeEach(function () {
+    var _renderHook = renderHook(function () {
+      return useTablePipeline({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook.result;
+
+    var tablePipeline = result.current;
+    newPipeline = sort(opts)(tablePipeline);
+  });
+  afterEach(function () {
+    newPipeline = null;
+    opts.onChangeSorts.mockClear();
+  });
+  it('初始化数据', function () {
+    // 默认cure列升序排序
+    expect(newPipeline.getDataSource()[0]).toEqual({
+      id: '3',
+      prov: '河南省',
+      confirm: 1212,
+      cure: 390,
+      dead: 13,
+      t: '2020-02-15 19:52:02'
+    });
+  });
+  it('列头单元格渲染', function () {
+    var col = newPipeline.getColumns();
+    var wrapper = mount(col[0].title);
+    expect(_findInstanceProperty(wrapper).call(wrapper, 'SortIcon').length).toBe(1); // 列头单元格
+
+    var div = _findInstanceProperty(wrapper).call(wrapper, 'div').at(0);
+
+    div.simulate('click');
+    expect(opts.onChangeSorts).toBeCalledWith([{
+      code: 'prov',
+      order: 'desc'
+    }], {
+      code: 'prov',
+      order: 'desc'
+    });
+    expect(1).toBe(1);
+  });
+  it('getCellProps', function () {
+    var col = newPipeline.getColumns();
+    var cellProps = col[2].getCellProps(4793, newPipeline.getDataSource()[0], 0);
+    expect(cellProps.style).toEqual({
+      background: 'var(--highlight-bgcolor)'
+    });
+  });
+  it('keepDataSource为true,数据不变', function () {
+    var _renderHook2 = renderHook(function () {
+      return useTablePipeline({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook2.result;
+
+    var tablePipeline = result.current;
+    opts.keepDataSource = true;
+    var newPipeline = sort(opts)(tablePipeline);
+    expect(newPipeline.getDataSource()[0].id).toBe('1');
+    opts.keepDataSource = false;
+  });
+  it('多列排序', function () {
+    var _renderHook3 = renderHook(function () {
+      return useTablePipeline({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook3.result;
+
+    var tablePipeline = result.current;
+    opts.defaultSorts = [{
+      code: 'confirm',
+      order: 'desc'
+    }, {
+      code: 'cure',
+      order: 'asc'
+    }];
+    opts.mode = 'multiple';
+    var newPipeline = sort(opts)(tablePipeline); // confirm 降序，cure升序
+
+    expect(newPipeline.getDataSource()[3].confirm).toBe(1000);
+    expect(newPipeline.getDataSource()[3].cure).toBe(417);
+    expect(newPipeline.getDataSource()[4].confirm).toBe(1000);
+    expect(newPipeline.getDataSource()[4].cure).toBe(428);
+    var col = newPipeline.getColumns();
+    var confirmWrapper = mount(col[1].title); // 列头单元格
+
+    var div = _findInstanceProperty(confirmWrapper).call(confirmWrapper, 'div').at(0);
+
+    div.simulate('click'); // confirm 列初始是降序，点击后是升序
+    // calls[0][1]表示第1次调用的第二个参数
+
+    expect(opts.onChangeSorts.mock.calls[0][1]).toEqual({
+      code: 'confirm',
+      order: 'asc'
+    });
+    opts.onChangeSorts.mockClear();
+    var cureWrapper = mount(col[2].title);
+
+    var div1 = _findInstanceProperty(cureWrapper).call(cureWrapper, 'div').at(0);
+
+    div1.simulate('click'); // confirm 列初始是升序，点击后没有排序
+
+    expect(opts.onChangeSorts.mock.calls[0][1]).toEqual({
+      code: 'cure',
+      order: 'none'
+    });
+  });
+});

package/es/table/pipeline/features/__test__/tips.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/table/pipeline/features/__test__/tips.test.js

@@ -0,0 +1,123 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import { tips } from '../tips';
+import { useTablePipeline } from '../../pipeline';
+import { mount } from 'enzyme';
+import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+var dataSource = [{
+  id: '1',
+  prov: '湖北省',
+  confirm: 54406,
+  cure: 4793,
+  dead: 1457,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '2',
+  prov: '广东省',
+  confirm: 1294,
+  cure: 409,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '3',
+  prov: '河南省',
+  confirm: 1212,
+  cure: 390,
+  dead: 13,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '4',
+  prov: '浙江省',
+  confirm: 1000,
+  cure: 428,
+  dead: 0,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '5',
+  prov: '湖南省',
+  confirm: 1000,
+  cure: 417,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}];
+var columns = [{
+  code: 'prov',
+  name: '省份',
+  width: 150,
+  features: {
+    tips: '省份信息'
+  }
+}, {
+  code: 'confirm',
+  name: '确诊',
+  width: 100,
+  align: 'right',
+  features: {
+    tips: '确诊数量'
+  }
+}, {
+  code: 'cure',
+  name: '治愈',
+  width: 100,
+  align: 'right'
+}, {
+  code: 'dead',
+  name: '死亡',
+  width: 100,
+  align: 'right'
+}, {
+  code: 't',
+  name: '更新时间',
+  width: 180
+}];
+
+function Tooltip(_ref) {
+  var title = _ref.title,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", null, title);
+}
+
+describe('tips 单元测试', function () {
+  var newPipeline = null;
+  beforeEach(function () {
+    var _renderHook = renderHook(function () {
+      return useTablePipeline({
+        primaryKey: 'id',
+        components: {
+          Tooltip: Tooltip
+        }
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook.result;
+
+    var tablePipeline = result.current;
+    newPipeline = tips()(tablePipeline);
+  });
+  afterEach(function () {
+    newPipeline = null;
+  });
+  it('初始化时存在Tooltip组件', function () {
+    var col = newPipeline.getColumns();
+    var wrapper = mount(col[0].title);
+    expect(_findInstanceProperty(wrapper).call(wrapper, 'Tooltip').length).toBe(1);
+  });
+  it('不传Tooltip', function () {
+    var _renderHook2 = renderHook(function () {
+      return useTablePipeline({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook2.result;
+
+    var tablePipeline = result.current;
+    expect(function () {
+      return tips()(tablePipeline);
+    }).toThrow(Error);
+  });
+});

package/es/table/pipeline/features/__test__/treeMode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/table/pipeline/features/__test__/treeMode.test.js

@@ -0,0 +1,202 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import { treeMode } from '../treeMode';
+import { useTablePipeline } from '../../pipeline';
+import { mount } from 'enzyme';
+import { renderHook } from '@testing-library/react-hooks';
+
+function makeChildren(prefix) {
+  return [{
+    id: "".concat(prefix, "-1"),
+    title: '二级标题',
+    dept: '应用部',
+    dest: '云南大理',
+    guide: 'Douglas Lee',
+    children: [{
+      id: "".concat(prefix, "-1-1"),
+      title: '三级标题',
+      dept: '平台大前端-UED',
+      dest: '云南大理',
+      guide: 'Douglas Lee'
+    }, {
+      id: "".concat(prefix, "-1-2"),
+      title: '三级标题',
+      dept: '平台大前端-前端',
+      dest: '云南大理',
+      guide: 'Douglas Lee'
+    }]
+  }, {
+    id: "".concat(prefix, "-2"),
+    title: '二级标题',
+    dept: '应用部',
+    dest: '云南大理',
+    guide: 'Douglas Lee',
+    children: [{
+      id: "".concat(prefix, "-2-1"),
+      title: '三级标题',
+      dept: '平台大前端-UED',
+      dest: '云南大理',
+      guide: 'Douglas Lee'
+    }, {
+      id: "".concat(prefix, "-2-2"),
+      title: '三级标题',
+      dept: '平台大前端-前端',
+      dest: '云南大理',
+      guide: 'Douglas Lee'
+    }]
+  }, {
+    id: "".concat(prefix, "-3"),
+    title: '二级标题',
+    dept: '应用部',
+    dest: '云南大理',
+    guide: 'Douglas Lee'
+  }];
+}
+
+var dataSource = [{
+  id: '1',
+  title: '一级标题',
+  dept: '云苍穹-前端',
+  dest: 'South Maddison',
+  guide: 'Don Moreno',
+  children: makeChildren('1')
+}, {
+  id: '2',
+  title: '一级标题',
+  dept: '云苍穹-模型',
+  dest: 'Emilhaven',
+  guide: 'Douglas Richards',
+  children: makeChildren('2')
+}, {
+  id: '3',
+  title: '一级标题',
+  dept: '云苍穹-基础',
+  dest: '云南大理',
+  guide: 'Douglas Lee',
+  children: makeChildren('3')
+}, {
+  id: '4',
+  title: '一级标题',
+  dept: '云苍穹-体验',
+  dest: '杭州千岛湖',
+  guide: 'Eric Castillo',
+  children: makeChildren('4')
+}, {
+  id: '5',
+  title: '一级标题',
+  dept: '云苍穹-运营',
+  dest: 'East Karl',
+  guide: 'Herbert Patton'
+}];
+var columns = [{
+  code: 'title',
+  name: '标题',
+  width: 200,
+  getCellProps: function getCellProps() {
+    return {
+      style: {
+        background: 'red'
+      }
+    };
+  }
+}, {
+  code: 'dept',
+  name: '部门名称',
+  width: 180
+}, {
+  code: 'dest',
+  name: '团建目的地',
+  width: 160
+}, {
+  code: 'guide',
+  name: '当地导游',
+  width: 160
+}];
+describe('treeMode 单元测试', function () {
+  var opts = {
+    openKeys: ['4', '4-2'],
+    clickArea: 'content',
+    onChangeOpenKeys: jest.fn()
+  };
+  var newPipeline = null;
+  beforeEach(function () {
+    var _renderHook = renderHook(function () {
+      return useTablePipeline({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook.result;
+
+    var tablePipeline = result.current;
+    newPipeline = treeMode(opts)(tablePipeline);
+  });
+  afterEach(function () {
+    newPipeline = null;
+    opts.onChangeOpenKeys.mockClear();
+  });
+  it('初始化展示', function () {
+    // 5 + 3 + 2
+    expect(newPipeline.getDataSource().length).toBe(10);
+  });
+  it('展开图标单元格渲染', function () {
+    var col = newPipeline.getColumns();
+    var wrapper = mount(col[0].render('一级标题', newPipeline.getDataSource()[0], 0));
+    expect(_findInstanceProperty(wrapper).call(wrapper, 'CaretRightIcon').length).toBe(1);
+
+    var div = _findInstanceProperty(wrapper).call(wrapper, 'div').at(0);
+
+    div.simulate('click');
+    expect(opts.onChangeOpenKeys).toHaveBeenCalled();
+    expect(opts.onChangeOpenKeys).toBeCalledWith(['4', '4-2', '1'], '1', 'expand');
+    opts.onChangeOpenKeys.mockClear(); // 展开列点击
+
+    var expandColWrapper = mount(col[0].render('一级标题', newPipeline.getDataSource()[3], 3));
+
+    var div1 = _findInstanceProperty(expandColWrapper).call(expandColWrapper, 'div').at(0);
+
+    div1.simulate('click');
+    expect(opts.onChangeOpenKeys).toBeCalledWith(['4-2'], '4', 'collapse'); // 叶子节点渲染
+
+    var leafWrapper = mount(col[0].render('一级标题', newPipeline.getDataSource()[9], 9));
+    expect(_findInstanceProperty(leafWrapper).call(leafWrapper, '.expansion-cell.leaf').length).toBe(2);
+  });
+  it('getCellProps', function () {
+    var col = newPipeline.getColumns(); // clickArea: 'content' 取默认的cellProps
+
+    expect(col[0].getCellProps()).toEqual({
+      style: {
+        background: 'red'
+      }
+    });
+  });
+  it('clickArea 为cell', function () {
+    var _renderHook2 = renderHook(function () {
+      return useTablePipeline({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook2.result;
+
+    var tablePipeline = result.current;
+    opts.clickArea = 'cell';
+    var newPipeline = treeMode(opts)(tablePipeline);
+    var col = newPipeline.getColumns();
+    var cellProps = col[0].getCellProps('一级标题', newPipeline.getDataSource()[0], 0);
+    expect(cellProps.style).toEqual({
+      background: 'red',
+      cursor: 'pointer'
+    });
+    cellProps.onClick();
+    expect(opts.onChangeOpenKeys).toHaveBeenCalled(); // 叶子节点cellProps
+
+    var leafCellProps = col[0].getCellProps('一级标题', newPipeline.getDataSource()[9], 9);
+    expect(leafCellProps.style).toEqual({
+      background: 'red'
+    });
+  });
+});

package/es/table/pipeline/features/autoFill.d.ts

@@ -0,0 +1,4 @@
+import { TablePipeline } from '../pipeline';
+export declare const FILL_COLUMN_CODE = "$_fill_column_&";
+export declare const tableWidthKey = "tableWidth";
+export declare const autoFillTableWidth: () => (pipeline: TablePipeline) => TablePipeline;

package/es/table/pipeline/features/autoFill.js

@@ -0,0 +1,63 @@
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+import { getLeftNestedLockCount } from '../../base/calculations';
+import { isLeafNode, makeRecursiveMapper } from '../../utils';
+export var FILL_COLUMN_CODE = '$_fill_column_&';
+export var tableWidthKey = 'tableWidth';
+var fillColumnWidthKey = 'fillColumnWidth';
+export var autoFillTableWidth = function autoFillTableWidth() {
+  return function (pipeline) {
+    var width = pipeline.getStateAtKey(fillColumnWidthKey, 0);
+    var columns = pipeline.getColumns();
+
+    var fillColumns = _findInstanceProperty(columns).call(columns, function (col) {
+      return col.code === FILL_COLUMN_CODE;
+    });
+
+    if (fillColumns) {
+      fillColumns.width = width;
+    } else {
+      var rightNestedLockCount = getLeftNestedLockCount(_sliceInstanceProperty(columns).call(columns).reverse());
+      var spliceIndex = columns.length - rightNestedLockCount;
+      var _fillColumns = {
+        name: '',
+        code: FILL_COLUMN_CODE,
+        width: width,
+        features: {
+          resizeable: false
+        }
+      };
+
+      _spliceInstanceProperty(columns).call(columns, spliceIndex, 0, _fillColumns);
+    }
+
+    pipeline.columns(columns);
+    setAutoFillWidth(pipeline);
+    return pipeline;
+  };
+};
+
+var setAutoFillWidth = function setAutoFillWidth(pipeline) {
+  var tableWidth = pipeline.getStateAtKey(tableWidthKey);
+  if (!tableWidth) return;
+  var columnWidthSum = 0;
+  pipeline.mapColumns(makeRecursiveMapper(function (col) {
+    var width = col.width,
+        code = col.code;
+
+    if (isLeafNode(col) && code !== FILL_COLUMN_CODE) {
+      var resizeColumn = pipeline.getStateAtKey('columnResize');
+      columnWidthSum += resizeColumn && resizeColumn[code] || width;
+    }
+
+    return col;
+  }));
+  var fillColumnWidth = Math.floor(tableWidth - columnWidthSum);
+  fillColumnWidth = fillColumnWidth > 0 ? fillColumnWidth : 0;
+  var preWidth = pipeline.getStateAtKey(fillColumnWidthKey, 0);
+
+  if (preWidth !== fillColumnWidth) {
+    pipeline.setStateAtKey('fillColumnWidth', fillColumnWidth);
+  }
+};

package/es/table/pipeline/features/autoRowSpan.d.ts

@@ -0,0 +1,2 @@
+import { TablePipeline } from '../pipeline';
+export declare function autoRowSpan(): (pipeline: TablePipeline) => TablePipeline;

package/es/table/pipeline/features/autoRowSpan.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { internals } from '../../internals';
+import { isLeafNode, makeRecursiveMapper } from '../../utils';
+
+function isIdentity(x, y) {
+  return x === y;
+}
+
+export function autoRowSpan() {
+  return function autoRowSpanStep(pipeline) {
+    var dataSource = pipeline.getDataSource();
+    return pipeline.mapColumns(makeRecursiveMapper(function (col, _ref) {
+      var startIndex = _ref.startIndex,
+          endIndex = _ref.endIndex;
+
+      var _a;
+
+      if (!((_a = col.features) === null || _a === void 0 ? void 0 : _a.autoRowSpan)) {
+        return col;
+      }
+
+      if (!isLeafNode(col)) {
+        return col;
+      }
+
+      var isFunc = typeof col.features.autoRowSpan === 'function';
+      var shouldMergeCell = isFunc ? col.features.autoRowSpan : isIdentity;
+      var spanRects = [];
+      var lastBottom = 0;
+      var prevValue = null;
+      var prevRow = null;
+
+      for (var rowIndex = 0; rowIndex < dataSource.length; rowIndex++) {
+        var row = dataSource[rowIndex];
+        var value = internals.safeGetValue(col, row, rowIndex);
+
+        if (rowIndex === 0 || !shouldMergeCell(prevValue, value, prevRow, row)) {
+          var spanRect = {
+            top: lastBottom,
+            bottom: rowIndex,
+            left: startIndex,
+            right: endIndex
+          };
+
+          for (var i = lastBottom; i < rowIndex; i++) {
+            spanRects.push(spanRect);
+          }
+
+          lastBottom = rowIndex;
+        }
+
+        prevValue = value;
+        prevRow = row;
+      }
+
+      for (var _i = lastBottom; _i < dataSource.length; _i++) {
+        spanRects.push({
+          top: lastBottom,
+          bottom: dataSource.length,
+          left: startIndex,
+          right: endIndex
+        });
+      }
+
+      return _extends(_extends({}, col), {
+        getSpanRect: function getSpanRect(value, row, rowIndex) {
+          return spanRects[rowIndex];
+        }
+      });
+    }));
+  };
+}

package/es/table/pipeline/features/buildTree.d.ts

@@ -0,0 +1,2 @@
+import { TablePipeline } from '../pipeline';
+export declare function buildTree(idProp: string, parentIdProp: string): (pipeline: TablePipeline) => TablePipeline;

package/es/table/pipeline/features/buildTree.js

@@ -0,0 +1,8 @@
+import { buildTree as _buildTree } from '../../utils';
+export function buildTree(idProp, parentIdProp) {
+  return function (pipeline) {
+    return pipeline.mapDataSource(function (rows) {
+      return _buildTree(idProp, parentIdProp, rows);
+    });
+  };
+}