@kdcloudjs/table 1.0.0

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

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _utils = require("../../../utils/");
+
+var _templateObject;
+
+var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\n      color:#666;\n      background-color: #fff;\n      padding: 6px 16px 6px 16px;\n      display: inline-block;\n      border-right: 1px solid transparent;\n      border-left: 1px solid transparent;\n      border-top: 1px solid transparent;\n      border-top-right-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  }\n\n  .popup-body {\n    display: flex;\n  }\n"])));
+
+var useWindowEvents = function useWindowEvents(func, evens) {
+  _react.default.useEffect(function () {
+    evens.forEach(function (event) {
+      return window.addEventListener(event, func, true);
+    });
+    return function () {
+      return evens.forEach(function (event) {
+        return window.removeEventListener(event, func, true);
+      });
+    };
+  }, [evens, func]);
+};
+
+function FilterPanel(_ref) {
+  var style = _ref.style,
+      children = _ref.children,
+      position = _ref.position,
+      filterIcon = _ref.filterIcon,
+      onClose = _ref.onClose;
+
+  var _useState = (0, _react.useState)(position),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      perfectPosition = _useState2[0],
+      setPerfectPosition = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      opaque = _useState4[0],
+      setOpaque = _useState4[1];
+
+  var ref = _react.default.useRef(null);
+
+  var isContainPanel = function isContainPanel(e) {
+    return (0, _utils.isElementInEventPath)(ref.current, e);
+  };
+
+  (0, _react.useEffect)(function () {
+    setPerfectPosition((0, _utils.keepWithinBounds)(document.body, ref.current, position.x, position.y, true));
+    setOpaque(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
+    }),
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'popup-header'
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: 'popup-header-icon'
+  }, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
+    width: 14,
+    height: 14,
+    viewBox: "64 64 896 896",
+    focusable: "false",
+    "data-icon": "filter",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "popup-body"
+  }, children));
+}
+
+var _default = FilterPanel;
+exports.default = _default;

package/lib/table/pipeline/features/filter/__test__/Filter.test.d.ts

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

package/lib/table/pipeline/features/filter/__test__/Filter.test.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _styles = require("../../../../base/styles");
+
+var _Filter = _interopRequireDefault(require("../Filter"));
+
+var _DefaultFilterContent = _interopRequireDefault(require("../DefaultFilterContent"));
+
+var NAME = 'Filter';
+var setFilter = jest.fn();
+var setFilterModel = jest.fn();
+describe("".concat(NAME), function () {
+  it('render and test event', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Filter.default, {
+      setFilter: setFilter,
+      setFilterModel: setFilterModel,
+      filterModel: {
+        filter: []
+      },
+      stopClickEventPropagation: true,
+      isFilterActive: true
+    }));
+    (0, _find.default)(wrapper).call(wrapper, ".".concat(_styles.Classes.filterIcon)).at(0).simulate('click');
+    (0, _find.default)(wrapper).call(wrapper, 'div').at(0).simulate('mousedown');
+    expect((0, _find.default)(wrapper).call(wrapper, _DefaultFilterContent.default).length).toBe(1);
+    wrapper.unmount();
+  });
+});

package/lib/table/pipeline/features/filter/index.d.ts

@@ -0,0 +1,4 @@
+export { default as FilterPanel } from './FilterPanel';
+export { default as DefaultFilterContent } from './DefaultFilterContent';
+export { default as Filter } from './Filter';
+export { DEFAULT_FILTER_OPTIONS } from './util';

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilterPanel", {
+  enumerable: true,
+  get: function get() {
+    return _FilterPanel.default;
+  }
+});
+Object.defineProperty(exports, "DefaultFilterContent", {
+  enumerable: true,
+  get: function get() {
+    return _DefaultFilterContent.default;
+  }
+});
+Object.defineProperty(exports, "Filter", {
+  enumerable: true,
+  get: function get() {
+    return _Filter.default;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_FILTER_OPTIONS", {
+  enumerable: true,
+  get: function get() {
+    return _util.DEFAULT_FILTER_OPTIONS;
+  }
+});
+
+var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
+
+var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterContent"));
+
+var _Filter = _interopRequireDefault(require("./Filter"));
+
+var _util = require("./util");

package/lib/table/pipeline/features/filter/util.d.ts

@@ -0,0 +1,10 @@
+declare const DEFAULT_FILTER_OPTIONS: ({
+    title: string;
+    key: string;
+    filter: (value: any) => (data: any) => any;
+} | {
+    title: string;
+    key: string;
+    filter: () => (data: any) => boolean;
+})[];
+export { DEFAULT_FILTER_OPTIONS };

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_FILTER_OPTIONS = void 0;
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var DEFAULT_FILTER_OPTIONS = [{
+  title: '包含',
+  key: 'contain',
+  filter: function filter(value) {
+    return function (data) {
+      if (data == null) {
+        return false;
+      }
+
+      if (typeof data === 'number') {
+        data = data + '';
+      }
+
+      return (0, _includes.default)(data).call(data, value);
+    };
+  }
+}, {
+  title: '不包含',
+  key: 'notContain',
+  filter: function filter(value) {
+    return function (data) {
+      if (data == null) {
+        return true;
+      }
+
+      if (typeof data === 'number') {
+        data = data + '';
+      }
+
+      return !(0, _includes.default)(data).call(data, value);
+    };
+  }
+}, {
+  title: '等于',
+  key: 'equal',
+  filter: function filter(value) {
+    return function (data) {
+      return value !== data;
+    };
+  }
+}, {
+  title: '不等于',
+  key: 'notEqual',
+  filter: function filter(value) {
+    return function (data) {
+      return value !== data;
+    };
+  }
+}, {
+  title: '为空',
+  key: 'isNull',
+  filter: function filter() {
+    return function (data) {
+      return !data;
+    };
+  }
+}, {
+  title: '不为空',
+  key: 'notIsNull',
+  filter: function filter() {
+    return function (data) {
+      return !!data;
+    };
+  }
+}];
+exports.DEFAULT_FILTER_OPTIONS = DEFAULT_FILTER_OPTIONS;

package/lib/table/pipeline/features/index.d.ts

@@ -0,0 +1,16 @@
+export { autoRowSpan } from './autoRowSpan';
+export { buildTree } from './buildTree';
+export { columnHover, ColumnHoverFeatureOptions } from './columnHover';
+export { columnRangeHover, ColumnRangeHoverFeatureOptions } from './columnRangeHover';
+export { multiSelect, MultiSelectFeatureOptions } from './multiSelect';
+export { rowDetail, RowDetailFeatureOptions } from './rowDetail';
+export { rowGrouping, RowGroupingFeatureOptions } from './rowGrouping';
+export { singleSelect, SingleSelectFeatureOptions } from './singleSelect';
+export { sort, SortFeatureOptions } from './sort';
+export { tips } from './tips';
+export { treeMode, TreeModeFeatureOptions, treeMetaSymbol } from './treeMode';
+export { treeSelect, TreeSelectFeatureOptions } from './treeSelect';
+export { columnDrag, ColumnDragOptions } from './columnDrag';
+export { columnResize, ColumnResizeOptions } from './columnResizeWidth';
+export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
+export { filter, FilterFeatureOptions } from './columnFilter';

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

@@ -0,0 +1,141 @@
+"use strict";
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "autoRowSpan", {
+  enumerable: true,
+  get: function get() {
+    return _autoRowSpan.autoRowSpan;
+  }
+});
+Object.defineProperty(exports, "buildTree", {
+  enumerable: true,
+  get: function get() {
+    return _buildTree.buildTree;
+  }
+});
+Object.defineProperty(exports, "columnHover", {
+  enumerable: true,
+  get: function get() {
+    return _columnHover.columnHover;
+  }
+});
+Object.defineProperty(exports, "columnRangeHover", {
+  enumerable: true,
+  get: function get() {
+    return _columnRangeHover.columnRangeHover;
+  }
+});
+Object.defineProperty(exports, "multiSelect", {
+  enumerable: true,
+  get: function get() {
+    return _multiSelect.multiSelect;
+  }
+});
+Object.defineProperty(exports, "rowDetail", {
+  enumerable: true,
+  get: function get() {
+    return _rowDetail.rowDetail;
+  }
+});
+Object.defineProperty(exports, "rowGrouping", {
+  enumerable: true,
+  get: function get() {
+    return _rowGrouping.rowGrouping;
+  }
+});
+Object.defineProperty(exports, "singleSelect", {
+  enumerable: true,
+  get: function get() {
+    return _singleSelect.singleSelect;
+  }
+});
+Object.defineProperty(exports, "sort", {
+  enumerable: true,
+  get: function get() {
+    return _sort.sort;
+  }
+});
+Object.defineProperty(exports, "tips", {
+  enumerable: true,
+  get: function get() {
+    return _tips.tips;
+  }
+});
+Object.defineProperty(exports, "treeMode", {
+  enumerable: true,
+  get: function get() {
+    return _treeMode.treeMode;
+  }
+});
+Object.defineProperty(exports, "treeMetaSymbol", {
+  enumerable: true,
+  get: function get() {
+    return _treeMode.treeMetaSymbol;
+  }
+});
+Object.defineProperty(exports, "treeSelect", {
+  enumerable: true,
+  get: function get() {
+    return _treeSelect.treeSelect;
+  }
+});
+Object.defineProperty(exports, "columnDrag", {
+  enumerable: true,
+  get: function get() {
+    return _columnDrag.columnDrag;
+  }
+});
+Object.defineProperty(exports, "columnResize", {
+  enumerable: true,
+  get: function get() {
+    return _columnResizeWidth.columnResize;
+  }
+});
+Object.defineProperty(exports, "contextMenu", {
+  enumerable: true,
+  get: function get() {
+    return _contextMenu.contextMenu;
+  }
+});
+Object.defineProperty(exports, "filter", {
+  enumerable: true,
+  get: function get() {
+    return _filterInstanceProperty(_columnFilter);
+  }
+});
+
+var _autoRowSpan = require("./autoRowSpan");
+
+var _buildTree = require("./buildTree");
+
+var _columnHover = require("./columnHover");
+
+var _columnRangeHover = require("./columnRangeHover");
+
+var _multiSelect = require("./multiSelect");
+
+var _rowDetail = require("./rowDetail");
+
+var _rowGrouping = require("./rowGrouping");
+
+var _singleSelect = require("./singleSelect");
+
+var _sort = require("./sort");
+
+var _tips = require("./tips");
+
+var _treeMode = require("./treeMode");
+
+var _treeSelect = require("./treeSelect");
+
+var _columnDrag = require("./columnDrag");
+
+var _columnResizeWidth = require("./columnResizeWidth");
+
+var _contextMenu = require("./contextMenu");
+
+var _columnFilter = require("./columnFilter");

package/lib/table/pipeline/features/multiSelect.d.ts

@@ -0,0 +1,27 @@
+import { ArtColumn } from '../../interfaces';
+import { TablePipeline } from '../pipeline';
+export interface MultiSelectFeatureOptions {
+    /** 非受控用法：默认选中的值 */
+    defaultValue?: string[];
+    /** 非受控用法：默认 lastKey */
+    defaultLastKey?: string;
+    /** 受控用法：当前选中的 keys */
+    value?: string[];
+    /** 受控用法：上一次操作对应的 rowKey */
+    lastKey?: string;
+    /** 受控用法：状态改变回调  */
+    onChange?: (nextValue: string[], key: string, keys: string[], action: 'check' | 'uncheck' | 'check-all' | 'uncheck-all') => void;
+    /** 复选框所在列的位置 */
+    checkboxPlacement?: 'start' | 'end';
+    /** 复选框所在列的 column 配置，可指定 width，lock, title, align, features 等属性 */
+    checkboxColumn?: Partial<ArtColumn>;
+    /** 是否高亮被选中的行 */
+    highlightRowWhenSelected?: boolean;
+    /** 判断一行中的 checkbox 是否要禁用 */
+    isDisabled?(row: any, rowIndex: number): boolean;
+    /** 点击事件的响应区域 */
+    clickArea?: 'checkbox' | 'cell' | 'row';
+    /** 是否对触发 onChange 的 click 事件调用 event.stopPropagation() */
+    stopClickEventPropagation?: boolean;
+}
+export declare function multiSelect(opts?: MultiSelectFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.multiSelect = multiSelect;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _internals = require("../../internals");
+
+var _others = require("../../utils/others");
+
+var _utils = require("../../utils");
+
+function multiSelect() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function multiSelectStep(pipeline) {
+    var _context;
+
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+
+    var stateKey = 'multiSelect';
+    var Checkbox = pipeline.ctx.components.Checkbox;
+
+    if (Checkbox == null) {
+      throw new Error('使用 multiSelect 之前需要设置 pipeline.ctx.components.Checkbox');
+    }
+
+    var primaryKey = pipeline.ensurePrimaryKey('multiSelect');
+    var isDisabled = (_a = opts.isDisabled) !== null && _a !== void 0 ? _a : (0, _others.always)(false);
+    var clickArea = (_b = opts.clickArea) !== null && _b !== void 0 ? _b : 'checkbox';
+    var value = (_f = (_e = (_c = opts.value) !== null && _c !== void 0 ? _c : (_d = pipeline.getStateAtKey(stateKey)) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : opts.defaultValue) !== null && _f !== void 0 ? _f : [];
+    var lastKey = (_k = (_j = (_g = opts.lastKey) !== null && _g !== void 0 ? _g : (_h = pipeline.getStateAtKey(stateKey)) === null || _h === void 0 ? void 0 : _h.lastKey) !== null && _j !== void 0 ? _j : opts.defaultLastKey) !== null && _k !== void 0 ? _k : '';
+
+    var _onChange = function onChange(nextValue, key, keys, action) {
+      var _a;
+
+      (_a = opts.onChange) === null || _a === void 0 ? void 0 : _a.call(opts, nextValue, key, keys, action);
+      pipeline.setStateAtKey(stateKey, {
+        value: nextValue,
+        lastKey: key
+      }, {
+        keys: keys,
+        action: action
+      });
+    };
+
+    var dataSource = pipeline.getDataSource();
+    /** dataSource 中包含的所有 keys */
+
+    var fullKeySet = new _set.default();
+    /** 所有有效的 keys（disable 状态为 false） */
+
+    var allKeys = [];
+    dataSource.forEach(function (row, rowIndex) {
+      var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+
+      fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
+
+      if (!isDisabled(row, rowIndex)) {
+        allKeys.push(rowKey);
+      }
+    });
+    var set = new _set.default(value);
+    var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {
+      return set.has(key);
+    });
+    var isAnyChecked = allKeys.some(function (key) {
+      return set.has(key);
+    });
+
+    var defaultCheckboxColumnTitle = /*#__PURE__*/_react.default.createElement(Checkbox, {
+      checked: isAllChecked,
+      indeterminate: !isAllChecked && isAnyChecked,
+      onChange: function onChange(_) {
+        if (isAllChecked) {
+          _onChange(_others.arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
+        } else {
+          _onChange(_others.arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
+        }
+      }
+    });
+
+    var checkboxColumn = (0, _extends2.default)((0, _extends2.default)({
+      name: '是否选中',
+      title: defaultCheckboxColumnTitle,
+      width: 50,
+      align: 'center'
+    }, opts.checkboxColumn), {
+      getCellProps: function getCellProps(value, row, rowIndex) {
+        var _a, _b;
+
+        var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+
+        var checkboxCellProps = {};
+        var preCellProps = (_b = (_a = opts.checkboxColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
+
+        if (fullKeySet.has(rowKey) && clickArea === 'cell') {
+          var prevChecked = set.has(rowKey);
+          var disabled = isDisabled(row, rowIndex);
+          checkboxCellProps = {
+            style: {
+              cursor: disabled ? 'not-allowed' : 'pointer'
+            },
+            onClick: disabled ? undefined : function (e) {
+              if (opts.stopClickEventPropagation) {
+                e.stopPropagation();
+              }
+
+              onCheckboxChange(prevChecked, rowKey, e.shiftKey);
+            }
+          };
+        }
+
+        return (0, _utils.mergeCellProps)(preCellProps, checkboxCellProps);
+      },
+      render: function render(_, row, rowIndex) {
+        var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+
+        var checked = set.has(key);
+        return /*#__PURE__*/_react.default.createElement(Checkbox, {
+          checked: checked,
+          disabled: isDisabled(row, rowIndex),
+          onChange: clickArea === 'checkbox' ? function (arg1, arg2) {
+            var _a; // 这里要同时兼容 antd 和 fusion 的用法
+            // fusion: arg2?.nativeEvent
+            // antd: arg1.nativeEvent
+
+
+            var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1.nativeEvent;
+
+            if (nativeEvent) {
+              if (opts.stopClickEventPropagation) {
+                nativeEvent.stopPropagation();
+              }
+
+              onCheckboxChange(checked, key, nativeEvent.shiftKey);
+            }
+          } : undefined
+        });
+      }
+    });
+    var nextColumns = (0, _slice.default)(_context = pipeline.getColumns()).call(_context);
+    var checkboxPlacement = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
+
+    if (checkboxPlacement === 'start') {
+      nextColumns.unshift(checkboxColumn);
+    } else {
+      nextColumns.push(checkboxColumn);
+    }
+
+    pipeline.columns(nextColumns);
+    pipeline.appendRowPropsGetter(function (row, rowIndex) {
+      var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+
+      if (!fullKeySet.has(rowKey)) {
+        // rowKey 不在 fullKeySet 中说明这一行是在 multiSelect 之后才生成的，multiSelect 不对之后生成的行进行处理
+        return;
+      }
+
+      var style = {};
+      var className;
+      var onClick;
+      var checked = set.has(rowKey);
+
+      if (opts.highlightRowWhenSelected && checked) {
+        className = 'highlight';
+      }
+
+      if (clickArea === 'row') {
+        var disabled = isDisabled(row, rowIndex);
+
+        if (!disabled) {
+          style.cursor = 'pointer';
+
+          onClick = function onClick(e) {
+            if (opts.stopClickEventPropagation) {
+              e.stopPropagation();
+            }
+
+            onCheckboxChange(checked, rowKey, e.shiftKey);
+          };
+        }
+      }
+
+      return {
+        className: className,
+        style: style,
+        onClick: onClick
+      };
+    });
+    return pipeline;
+
+    function onCheckboxChange(prevChecked, key, batch) {
+      var batchKeys = [key];
+
+      if (batch && lastKey) {
+        var lastIdx = allKeys.indexOf(lastKey);
+        var cntIdx = allKeys.indexOf(key);
+
+        var _ref = lastIdx < cntIdx ? [lastIdx, cntIdx] : [cntIdx, lastIdx],
+            _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            start = _ref2[0],
+            end = _ref2[1];
+
+        batchKeys = (0, _slice.default)(allKeys).call(allKeys, start, end + 1);
+      }
+
+      if (prevChecked) {
+        _onChange(_others.arrayUtils.diff(value, batchKeys), key, batchKeys, 'uncheck');
+      } else {
+        _onChange(_others.arrayUtils.merge(value, batchKeys), key, batchKeys, 'check');
+      }
+    }
+  };
+}