@kdcloudjs/table 1.0.3 → 1.1.1

package/es/table/pipeline/features/filter/FilterPanel.js

@@ -36,8 +36,8 @@ function FilterPanel(_ref) {
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      opaque = _useState4[0],
-      setOpaque = _useState4[1];
+      visible = _useState4[0],
+      setVisible = _useState4[1];
 
   var ref = React.useRef(null);
 
@@ -47,16 +47,16 @@ function FilterPanel(_ref) {
 
   useEffect(function () {
     setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
-    setOpaque(true);
+    setVisible(true);
   }, [position]);
   useWindowEvents(function (e) {
     return !isContainPanel(e) && onClose();
   }, ['mousedown']);
   return /*#__PURE__*/React.createElement(FilterPanelStyle, {
     style: _extends(_extends({}, style), {
-      left: perfectPosition.x,
-      top: perfectPosition.y,
-      opacity: opaque ? 1 : 0
+      left: visible ? perfectPosition.x : 0,
+      top: visible ? perfectPosition.y : 0,
+      opacity: visible ? 1 : 0
     }),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -54,7 +54,9 @@ export function multiSelect() {
     });
     var set = new _Set(value); // todo: 暂使用hidden隐藏选择列 后续增加配置
 
-    if (opts.checkboxColumn && opts.checkboxColumn.hidden !== true) {
+    var hiddenSelectColumn = opts.checkboxColumn && opts.checkboxColumn.hidden === true;
+
+    if (!hiddenSelectColumn) {
       var _context;
 
       var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {

package/lib/table/pipeline/features/filter/FilterPanel.js

@@ -60,8 +60,8 @@ function FilterPanel(_ref) {
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      opaque = _useState4[0],
-      setOpaque = _useState4[1];
+      visible = _useState4[0],
+      setVisible = _useState4[1];
 
   var ref = _react.default.useRef(null);
 
@@ -71,16 +71,16 @@ function FilterPanel(_ref) {
 
   (0, _react.useEffect)(function () {
     setPerfectPosition((0, _utils.keepWithinBounds)(document.body, ref.current, position.x, position.y, true));
-    setOpaque(true);
+    setVisible(true);
   }, [position]);
   useWindowEvents(function (e) {
     return !isContainPanel(e) && onClose();
   }, ['mousedown']);
   return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
     style: (0, _extends2.default)((0, _extends2.default)({}, style), {
-      left: perfectPosition.x,
-      top: perfectPosition.y,
-      opacity: opaque ? 1 : 0
+      left: visible ? perfectPosition.x : 0,
+      top: visible ? perfectPosition.y : 0,
+      opacity: visible ? 1 : 0
     }),
     ref: ref
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/table/pipeline/features/multiSelect.js

@@ -72,7 +72,9 @@ function multiSelect() {
     });
     var set = new _set.default(value); // todo: 暂使用hidden隐藏选择列 后续增加配置
 
-    if (opts.checkboxColumn && opts.checkboxColumn.hidden !== true) {
+    var hiddenSelectColumn = opts.checkboxColumn && opts.checkboxColumn.hidden === true;
+
+    if (!hiddenSelectColumn) {
       var _context;
 
       var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/table",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "金蝶 react table 组件",
   "title": "table",
   "keywords": [

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

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

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

@@ -1,152 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-import React from 'react';
-import { renderHook, act } from '@testing-library/react-hooks';
-import { mount } from 'enzyme';
-import { multiSelect } from '../multiSelect';
-import { useTablePipeline } from '../../pipeline';
-var NAME = 'multiSelect';
-
-var MockCheckbox = function MockCheckbox(_a) {
-  var indeterminate = _a.indeterminate,
-      props = __rest(_a, ["indeterminate"]);
-
-  return /*#__PURE__*/React.createElement("input", _extends({
-    type: 'checkbox',
-    className: 'checkbox'
-  }, props));
-};
-
-var ROWS = [{
-  id: '1'
-}];
-var INPUT_DATA = {
-  columns: [],
-  dataSource: ROWS
-};
-describe("".concat(NAME), function () {
-  it('not set Checkbox', function () {
-    var _renderHook = renderHook(function () {
-      return useTablePipeline();
-    }),
-        result = _renderHook.result;
-
-    var _multiSelect = function _multiSelect() {
-      return multiSelect()(result.current);
-    };
-
-    expect(_multiSelect).toThrowError(/Checkbox/);
-  });
-  it('set require props,test checkboxColumn render, cell change and select all event', function () {
-    var _renderHook2 = renderHook(function () {
-      return useTablePipeline({
-        components: {
-          Checkbox: MockCheckbox
-        }
-      }).input(INPUT_DATA).primaryKey('id');
-    }),
-        result = _renderHook2.result;
-
-    multiSelect({
-      stopClickEventPropagation: true // 阻止冒泡
-
-    })(result.current);
-    expect(result.current.getColumns().length).toBeGreaterThan(0);
-    var checkboxColumn = result.current.getColumns()[0];
-    var wrapper = mount(checkboxColumn.render({}, {
-      id: '1'
-    }, 0)); // 测试复选框行点击onChange
-
-    act(function () {
-      _findInstanceProperty(wrapper).call(wrapper, MockCheckbox).at(0).simulate('change', {
-        target: {},
-        nativeEvent: {
-          stopPropagation: jest.fn()
-        }
-      });
-    });
-    expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
-      "lastKey": "1",
-      "value": ["1"]
-    });
-    var titleWrapper = mount(checkboxColumn.title); // 测试选择列表头全选
-
-    act(function () {
-      _findInstanceProperty(titleWrapper).call(titleWrapper, MockCheckbox).at(0).simulate('change');
-    });
-  });
-  it('set clickArea=cell, test getCellProps and cell click', function () {
-    var _renderHook3 = renderHook(function () {
-      return useTablePipeline({
-        components: {
-          Checkbox: MockCheckbox
-        }
-      }).input(INPUT_DATA).primaryKey('id');
-    }),
-        result = _renderHook3.result;
-
-    multiSelect({
-      clickArea: 'cell'
-    })(result.current);
-    var checkboxColumn = result.current.getColumns()[0]; // 测试getCellProps
-
-    var cellProps = checkboxColumn.getCellProps('', ROWS[0], 0);
-
-    if (typeof cellProps.onClick === 'function') {
-      act(function () {
-        var mockEvent = {};
-        cellProps.onClick(mockEvent);
-      });
-      expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
-        "lastKey": "1",
-        "value": ["1"]
-      });
-    }
-  });
-  it('set clickArea=row, test appendRowPropsGetter fn', function () {
-    var _renderHook4 = renderHook(function () {
-      return useTablePipeline({
-        components: {
-          Checkbox: MockCheckbox
-        }
-      }).input(INPUT_DATA).primaryKey('id');
-    }),
-        result = _renderHook4.result;
-
-    var pipeline = multiSelect({
-      lastKey: '1',
-      clickArea: 'row'
-    })(result.current); // 调用 appendRowPropsGetter 设置的函数
-
-    var props = pipeline.getProps();
-    var rowProps = props.getRowProps(ROWS[0], 0);
-
-    if (rowProps.onClick) {
-      act(function () {
-        var mockEvent = {
-          shiftKey: true
-        };
-        rowProps.onClick(mockEvent);
-      });
-      expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
-        "lastKey": "1",
-        "value": ["1"]
-      });
-    }
-  });
-});

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

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

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

@@ -1,223 +0,0 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import { rowDetail } from '../rowDetail';
-import { useTablePipeline } from '../../pipeline';
-import { mount } from 'enzyme';
-import { renderHook } from '@testing-library/react-hooks';
-import { act } from 'react-dom/test-utils';
-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: 1162,
-  cure: 428,
-  dead: 0,
-  t: '2020-02-15 19:52:02'
-}, {
-  id: '5',
-  prov: '湖南省',
-  confirm: 1001,
-  cure: 417,
-  dead: 2,
-  t: '2020-02-15 19:52:02'
-}];
-var columns = [{
-  code: 'prov',
-  name: '省份',
-  width: 150,
-  features: {
-    sortable: true,
-    filterable: true
-  }
-}, {
-  code: 'confirm',
-  name: '确诊',
-  width: 100,
-  align: 'right',
-  features: {
-    sortable: true,
-    filterable: true
-  }
-}, {
-  code: 'cure',
-  name: '治愈',
-  width: 100,
-  align: 'right',
-  features: {
-    sortable: true,
-    filterable: true
-  }
-}, {
-  code: 'dead',
-  name: '死亡',
-  width: 100,
-  align: 'right',
-  features: {
-    sortable: true,
-    filterable: true
-  }
-}, {
-  code: 't',
-  name: '更新时间',
-  width: 180,
-  features: {
-    sortable: true,
-    filterable: true
-  }
-}];
-describe('rowDetail 单元测试', function () {
-  var opt = {
-    defaultOpenKeys: ['2'],
-    clickArea: 'content',
-    hasDetail: function hasDetail(row) {
-      var _context;
-
-      return _includesInstanceProperty(_context = ['1', '2', '3']).call(_context, row.id);
-    },
-    renderDetail: jest.fn(),
-    onChangeOpenKeys: jest.fn()
-  };
-  it('初始化', function () {
-    var _renderHook = renderHook(function () {
-      return useTablePipeline({
-        primaryKey: 'id'
-      }).input({
-        dataSource: dataSource,
-        columns: columns
-      });
-    }),
-        result = _renderHook.result;
-
-    var tablePipeline = result.current;
-    var newPipeline = rowDetail(opt)(tablePipeline); // 默认有1行展开，所以有6行
-
-    expect(newPipeline.getDataSource().length).toBe(6);
-  });
-  it('primaryKey不传', function () {
-    var _renderHook2 = renderHook(function () {
-      return useTablePipeline().input({
-        dataSource: dataSource,
-        columns: columns
-      });
-    }),
-        result = _renderHook2.result;
-
-    var tablePipeline = result.current;
-    expect(function () {
-      return rowDetail(opt)(tablePipeline);
-    }).toThrow(Error);
-  });
-  it('模拟行点击事件', function () {
-    var _renderHook3 = renderHook(function () {
-      return useTablePipeline({
-        primaryKey: 'id'
-      }).input({
-        dataSource: dataSource,
-        columns: columns
-      });
-    }),
-        result = _renderHook3.result;
-
-    var tablePipeline = result.current;
-    var newPipeline = rowDetail(opt)(tablePipeline);
-    var newDataSource = newPipeline.getDataSource();
-    var col = newPipeline.getColumns();
-    var wrapper = mount(col[0].render('1', newDataSource[0], 0));
-
-    var div = _findInstanceProperty(wrapper).call(wrapper, 'div').at(0);
-
-    expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(0);
-    act(function () {
-      div.simulate('click');
-    });
-    expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(1); // 点击没有展开行的行，不会触发onChange回调
-
-    var wrapper1 = mount(col[0].render('4', newDataSource[4], 4));
-
-    var div1 = _findInstanceProperty(wrapper1).call(wrapper1, 'div').at(0);
-
-    act(function () {
-      div1.simulate('click');
-    });
-    expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(1);
-  });
-  it('设置指定列展开', function () {
-    var _renderHook4 = renderHook(function () {
-      return useTablePipeline({
-        primaryKey: 'id'
-      }).input({
-        dataSource: dataSource,
-        columns: columns
-      });
-    }),
-        result = _renderHook4.result;
-
-    var tablePipeline = result.current;
-    opt.expandColumnCode = 'confirm';
-    var newPipeline = rowDetail(opt)(tablePipeline);
-    var col = newPipeline.getColumns();
-    var wrapper = mount(col[1].render('1', newPipeline.getDataSource()[0], 0)); // 不知道为啥是两个
-
-    expect(_findInstanceProperty(wrapper).call(wrapper, '.expansion-cell').length).toBe(2);
-    col[0].render('1', newPipeline.getDataSource()[2], 2);
-    expect(opt.renderDetail).toBeCalled();
-    var spanRect = col[0].getSpanRect('1', newPipeline.getDataSource()[2], 2);
-    expect(spanRect).toEqual({
-      top: 2,
-      bottom: 3,
-      left: 0,
-      right: 6
-    });
-    delete opt.expandColumnCode;
-  });
-  it('getCellProps 和getSpanRect', function () {
-    var _renderHook5 = renderHook(function () {
-      return useTablePipeline({
-        primaryKey: 'id'
-      }).input({
-        dataSource: dataSource,
-        columns: columns
-      });
-    }),
-        result = _renderHook5.result;
-
-    var tablePipeline = result.current;
-    opt.clickArea = 'cell';
-    var newPipeline = rowDetail(opt)(tablePipeline);
-    var col = newPipeline.getColumns();
-    var cellProps = col[0].getCellProps('1', newPipeline.getDataSource()[0], 0);
-    expect(cellProps.style).toEqual({
-      cursor: 'pointer'
-    });
-    cellProps.onClick();
-    expect(opt.onChangeOpenKeys).toBeCalled(); // detail 总是成一行
-
-    var spanRect = col[0].getSpanRect('1', newPipeline.getDataSource()[2], 2);
-    expect(spanRect).toEqual({
-      top: 2,
-      bottom: 3,
-      left: 0,
-      right: 6
-    });
-  });
-});

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

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

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

@@ -1,120 +0,0 @@
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import { rowGrouping } from '../rowGrouping';
-import { useTablePipeline } from '../../pipeline';
-import { mount } from 'enzyme';
-import { renderHook } from '@testing-library/react-hooks';
-var dataSource = [{
-  id: 'alibaba',
-  groupTitle: '阿里巴巴网络技术有限公司',
-  children: [{
-    id: '1-1',
-    title: '二级标题',
-    dept: '消费者事业部-淘宝-UED',
-    dest: '云南大理',
-    guide: 'Douglas Lee'
-  }, {
-    id: '1-2',
-    title: '二级标题',
-    dept: '消费者事业部-淘宝-UED',
-    dest: '云南大理',
-    guide: 'Douglas Lee'
-  }]
-}, {
-  id: 'antfin',
-  groupTitle: '蚂蚁金服有限公司',
-  children: [{
-    id: '2-1',
-    title: '二级标题',
-    dept: '消费者事业部-淘宝-UED',
-    dest: '云南大理',
-    guide: 'Douglas Lee'
-  }, {
-    id: '2-2',
-    title: '二级标题',
-    dept: '消费者事业部-淘宝-UED',
-    dest: '云南大理',
-    guide: 'Douglas Lee'
-  }]
-}, {
-  id: 'other',
-  groupTitle: 'group without children'
-}];
-var columns = [{
-  code: 'title',
-  name: '标题',
-  width: 200
-}, {
-  code: 'dept',
-  name: '部门名称',
-  width: 180
-}, {
-  code: 'dest',
-  name: '团建目的地',
-  width: 160
-}, {
-  code: 'guide',
-  name: '当地导游',
-  width: 160
-}];
-describe('rowGrouping 单元测试', function () {
-  var opts = {
-    defaultOpenAll: true,
-    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 = rowGrouping(opts)(tablePipeline);
-  });
-  afterEach(function () {
-    newPipeline = null;
-    opts.onChangeOpenKeys.mockClear();
-  });
-  it('初始化', function () {
-    expect(newPipeline.getDataSource().length).toBe(7);
-  });
-  it('getCellProps', function () {
-    var col = newPipeline.getColumns();
-    var cellProps = col[0].getCellProps('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[0], 0);
-    expect(cellProps.style).toEqual({
-      cursor: 'pointer'
-    });
-    cellProps.onClick();
-    expect(opts.onChangeOpenKeys).toBeCalled(); // 不是分组行没有cellProps
-
-    var cellProps1 = col[0].getCellProps('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[1], 1);
-    expect(cellProps1).toBe(undefined);
-  });
-  it('getSpanRect', function () {
-    var col = newPipeline.getColumns();
-    var spanRect = col[0].getSpanRect('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[0], 0);
-    expect(spanRect).toEqual({
-      top: 0,
-      bottom: 1,
-      left: 0,
-      right: 5
-    });
-  });
-  it('单元格渲染', function () {
-    var col = newPipeline.getColumns();
-    var wrapper = mount(col[0].render('1', newPipeline.getDataSource()[0], 0));
-    expect(_findInstanceProperty(wrapper).call(wrapper, '.expansion-cell').length).toBe(2);
-    var wrapper1 = mount(col[0].render('1', newPipeline.getDataSource()[1], 1));
-    expect(_findInstanceProperty(wrapper1).call(wrapper1, '.expansion-cell').length).toBe(0);
-  });
-  it('appendRowPropsGetter', function () {
-    var props = newPipeline.getProps();
-    var rowProps = props.getRowProps(newPipeline.getDataSource()[0], 0);
-    expect(rowProps.className).toBe('alternative');
-  });
-});

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

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