@sooloer/pages 0.0.1

package/dist/table/demo/global-checkbox.js

@@ -0,0 +1,83 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ProTable } from "../..";
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/lib/locale/zh_CN';
+import React, { useCallback, useEffect, useState } from 'react';
+import { columns, fetchData, total } from "./data";
+export default (function () {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = useState({
+      pageNo: 1,
+      pageSize: 20
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    _useState6$ = _useState6[0],
+    pageNo = _useState6$.pageNo,
+    pageSize = _useState6$.pageSize,
+    setPage = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedRowKeys = _useState8[0],
+    setSelectedRowKeys = _useState8[1];
+  var queryData = useCallback(function (pageNo, pageSize) {
+    setLoading(true);
+    var data = fetchData(pageNo, pageSize);
+    setTimeout(function () {
+      setDataSource(data);
+      setLoading(false);
+    }, 1000);
+  }, []);
+  var handlePageChange = function handlePageChange(pageNo, pageSize) {
+    setPage({
+      pageNo: pageNo,
+      pageSize: pageSize
+    });
+  };
+  useEffect(function () {
+    queryData(pageNo, pageSize);
+  }, [pageNo, pageSize, queryData]);
+  var handleRowSelectionChange = function handleRowSelectionChange(selectedRowKeys, globalChecked) {
+    console.log(selectedRowKeys, globalChecked);
+    setSelectedRowKeys(selectedRowKeys);
+  };
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    locale: zhCN
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '420px'
+    }
+  }, /*#__PURE__*/React.createElement(ProTable, {
+    loading: {
+      spinning: loading,
+      tip: '加载中...'
+    },
+    height: 420,
+    columns: columns,
+    dataSource: dataSource,
+    globalCheckable: true,
+    rowSelection: {
+      fixed: true,
+      selectedRowKeys: selectedRowKeys,
+      // @ts-ignore
+      onChange: handleRowSelectionChange
+    },
+    pagination: {
+      total: total,
+      current: pageNo,
+      pageSize: pageSize,
+      onChange: handlePageChange
+    }
+  })));
+});

package/dist/table/demo/setting.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/table/demo/setting.js

@@ -0,0 +1,78 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ProTable } from "../..";
+import { Col, ConfigProvider, Row } from 'antd';
+import zhCN from 'antd/lib/locale/zh_CN';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { columns, fetchData, total } from "./data";
+export default (function () {
+  var settingRef = useRef(null);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    dataSource = _useState2[0],
+    setDataSource = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = useState({
+      pageNo: 1,
+      pageSize: 20
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    _useState6$ = _useState6[0],
+    pageNo = _useState6$.pageNo,
+    pageSize = _useState6$.pageSize,
+    setPage = _useState6[1];
+  var queryData = useCallback(function (pageNo, pageSize) {
+    setLoading(true);
+    var data = fetchData(pageNo, pageSize);
+    setTimeout(function () {
+      setDataSource(data);
+      setLoading(false);
+    }, 1000);
+  }, []);
+  var handlePageChange = function handlePageChange(pageNo, pageSize) {
+    setPage({
+      pageNo: pageNo,
+      pageSize: pageSize
+    });
+  };
+  useEffect(function () {
+    queryData(pageNo, pageSize);
+  }, [pageNo, pageSize, queryData]);
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    locale: zhCN
+  }, /*#__PURE__*/React.createElement(Row, {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/React.createElement(Col, {
+    flex: "1"
+  }), /*#__PURE__*/React.createElement(Col, {
+    flex: "none"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: settingRef
+  }))), /*#__PURE__*/React.createElement(ProTable, {
+    setting: {
+      onReload: function onReload() {
+        queryData(pageNo, pageSize);
+      },
+      getContainer: settingRef === null || settingRef === void 0 ? void 0 : settingRef.current
+    },
+    loading: loading,
+    height: 420,
+    columns: columns,
+    dataSource: dataSource,
+    pagination: {
+      total: total,
+      current: pageNo,
+      pageSize: pageSize,
+      onChange: handlePageChange
+    }
+  }));
+});

package/dist/table/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ProTableProps } from './typing';
+declare const ProTable: React.FC<ProTableProps>;
+export default ProTable;

package/dist/table/index.js

@@ -0,0 +1,173 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["rowKey", "columns", "dataSource", "rowSelection", "multipleable", "expandable"],
+  _excluded2 = ["onChange", "selectedRowKeys", "getCheckboxProps"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo, useState } from 'react';
+import Table from "./table";
+var ProTable = function ProTable(_ref) {
+  var _ref$rowKey = _ref.rowKey,
+    rowKey = _ref$rowKey === void 0 ? 'id' : _ref$rowKey,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    rowSelection = _ref.rowSelection,
+    _ref$multipleable = _ref.multipleable,
+    multipleable = _ref$multipleable === void 0 ? false : _ref$multipleable,
+    expandable = _ref.expandable,
+    args = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    globalChecked = _useState2[0],
+    setGlobalChecked = _useState2[1];
+
+  // 当前页rowKey集合
+  var curRowKeys = useMemo(function () {
+    return dataSource.map(function (item) {
+      return item[rowKey];
+    });
+  }, [dataSource]);
+
+  // 行属性扩展
+  var getRowCheckboxProps = function getRowCheckboxProps(record) {
+    if (rowSelection) {
+      var _rowSelection$getChec;
+      var _ref2 = expandable || {},
+        _ref2$selectionable = _ref2.selectionable,
+        selectionable = _ref2$selectionable === void 0 ? false : _ref2$selectionable;
+      var props = (rowSelection === null || rowSelection === void 0 || (_rowSelection$getChec = rowSelection.getCheckboxProps) === null || _rowSelection$getChec === void 0 ? void 0 : _rowSelection$getChec.call(rowSelection, record)) || {};
+      if (selectionable) {
+        var item = ((rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || []).find(function (item) {
+          return (item === null || item === void 0 ? void 0 : item.id) === record[rowKey];
+        });
+        if (item) {
+          props.indeterminate = !!((item === null || item === void 0 ? void 0 : item.expandSelectedRowKeys) || []).length;
+        }
+      }
+      return props;
+    }
+    return null;
+  };
+
+  // 单行勾选
+  var handleSelect = function handleSelect(record, selected) {
+    if (rowSelection) {
+      var selectedRowKeys = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || [];
+      if (selected) {
+        var _rowSelection$onChang;
+        // 非当前页勾选集合
+        var notCurSelectedRows = multipleable ? selectedRowKeys.filter(function (item) {
+          return !curRowKeys.includes(item.id);
+        }) : [];
+
+        // 当前页勾选项集合
+        var curSelectedRows = selectedRowKeys.filter(function (item) {
+          return curRowKeys.includes(item.id);
+        });
+        var newSelectedRows = [].concat(_toConsumableArray(notCurSelectedRows), _toConsumableArray(curSelectedRows), [{
+          id: record[rowKey],
+          record: record,
+          expandSelectedRowKeys: [],
+          expandUnselectedRowKeys: []
+        }]);
+        rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang = rowSelection.onChange) === null || _rowSelection$onChang === void 0 || _rowSelection$onChang.call(rowSelection, newSelectedRows, globalChecked);
+      } else {
+        var _rowSelection$onChang2;
+        rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang2 = rowSelection.onChange) === null || _rowSelection$onChang2 === void 0 || _rowSelection$onChang2.call(rowSelection, selectedRowKeys.filter(function (row) {
+          return row.id !== record[rowKey];
+        }), globalChecked);
+      }
+    }
+  };
+
+  // 当页全选
+  var handleSelectAll = function handleSelectAll(selected) {
+    if (rowSelection) {
+      var _rowSelection$onChang3;
+      var selectedRowKeys = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || [];
+      // 非当前页勾选集合
+      var notCurSelectedRows = multipleable ? selectedRowKeys.filter(function (item) {
+        return !curRowKeys.includes(item.id);
+      }) : [];
+      rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang3 = rowSelection.onChange) === null || _rowSelection$onChang3 === void 0 || _rowSelection$onChang3.call(rowSelection, [].concat(_toConsumableArray(notCurSelectedRows), _toConsumableArray((selected ? dataSource : []).map(function (item) {
+        return {
+          record: item,
+          id: item[rowKey],
+          expandSelectedRowKeys: [],
+          expandUnselectedRowKeys: []
+        };
+      }))), globalChecked);
+    }
+  };
+
+  // 初始化 勾选数据
+  var resetSelection = function resetSelection() {
+    if (rowSelection) {
+      var onChange = rowSelection.onChange,
+        _rowSelection$selecte = rowSelection.selectedRowKeys,
+        selectedRowKeys = _rowSelection$selecte === void 0 ? [] : _rowSelection$selecte,
+        getCheckboxProps = rowSelection.getCheckboxProps,
+        otherProps = _objectWithoutProperties(rowSelection, _excluded2);
+      // @ts-ignore
+      var keys = selectedRowKeys.map(function (item) {
+        return item === null || item === void 0 ? void 0 : item.id;
+      });
+      if (otherProps.fixed) {
+        otherProps.fixed = expandable ? false : otherProps.fixed;
+      }
+      return {
+        rowSelection: _objectSpread(_objectSpread({}, otherProps), {}, {
+          columnWidth: 40,
+          onSelect: handleSelect,
+          selectedRowKeys: _toConsumableArray(keys),
+          onSelectAll: handleSelectAll,
+          getCheckboxProps: getRowCheckboxProps
+        })
+      };
+    }
+    return null;
+  };
+
+  // 全局勾选
+  var handleGlobalCheckboxChange = function handleGlobalCheckboxChange(checked) {
+    var _rowSelection$onChang4;
+    setGlobalChecked(checked);
+    rowSelection === null || rowSelection === void 0 || (_rowSelection$onChang4 = rowSelection.onChange) === null || _rowSelection$onChang4 === void 0 || _rowSelection$onChang4.call(rowSelection, _toConsumableArray((checked ? dataSource : []).map(function (item) {
+      return {
+        record: item,
+        id: item[rowKey],
+        expandSelectedRowKeys: [],
+        expandUnselectedRowKeys: []
+      };
+    })), checked);
+  };
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(Table, _extends({
+      rowKey: rowKey,
+      columns: columns,
+      dataSource: dataSource
+    }, args, resetSelection(), {
+      onGlobalCheckboxChange: handleGlobalCheckboxChange
+    }))
+  );
+};
+export default ProTable;

package/dist/table/setting/components/height.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SizeProps } from '../../typing';
+type ColumnHeightProps = {
+    size: SizeProps;
+    onChange?: (size: SizeProps) => void;
+};
+declare const ColumnHeight: React.FC<ColumnHeightProps>;
+export default ColumnHeight;

package/dist/table/setting/components/height.js

@@ -0,0 +1,45 @@
+import { ColumnHeightOutlined } from '@ant-design/icons';
+import { Dropdown, Menu, Tooltip } from 'antd';
+import React from 'react';
+var MENUS = [{
+  key: 'large',
+  label: '默认'
+}, {
+  key: 'middle',
+  label: '中等'
+}, {
+  key: 'small',
+  label: '紧凑'
+}];
+var ColumnHeight = function ColumnHeight(_ref) {
+  var size = _ref.size,
+    onChange = _ref.onChange;
+  var settingMenu = /*#__PURE__*/React.createElement(Menu, {
+    style: {
+      width: '80px',
+      textAlign: 'center'
+    },
+    selectedKeys: [size]
+    // @ts-ignore
+    ,
+    onClick: function onClick(_ref2) {
+      var key = _ref2.key;
+      return onChange === null || onChange === void 0 ? void 0 : onChange(key);
+    }
+  }, MENUS.map(function (item) {
+    return /*#__PURE__*/React.createElement(Menu.Item, {
+      key: item.key
+    }, item.label);
+  }));
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    arrow: true,
+    placement: "bottom",
+    dropdownRender: function dropdownRender() {
+      return settingMenu;
+    },
+    trigger: ['click']
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u8868\u683C\u5BC6\u5EA6"
+  }, /*#__PURE__*/React.createElement(ColumnHeightOutlined, null)));
+};
+export default ColumnHeight;

package/dist/table/setting/components/reload.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ColumnHeightProps = {
+    loading?: boolean;
+    onReload?: () => void;
+};
+declare const Reload: React.FC<ColumnHeightProps>;
+export default Reload;

package/dist/table/setting/components/reload.js

@@ -0,0 +1,19 @@
+import { ReloadOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import React from 'react';
+var Reload = function Reload(_ref) {
+  var loading = _ref.loading,
+    onReload = _ref.onReload;
+  var handleReload = function handleReload() {
+    if (loading) {
+      return;
+    }
+    onReload === null || onReload === void 0 || onReload();
+  };
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u5237\u65B0"
+  }, /*#__PURE__*/React.createElement(ReloadOutlined, {
+    onClick: handleReload
+  }));
+};
+export default Reload;

package/dist/table/setting/components/sort-group.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type SortGroupProps = {
+    data?: any[];
+    checkable?: boolean;
+    sortable?: boolean;
+    selectedKeys?: string[];
+    onChange?: (keys: string[]) => void;
+};
+declare const SortGroupWrap: React.FC<SortGroupProps>;
+export default SortGroupWrap;

package/dist/table/setting/components/sort-group.js

@@ -0,0 +1,103 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Checkbox } from 'antd';
+import React from 'react';
+import { SortableContainer } from 'react-sortable-hoc';
+import SortableItem from "./sort-item";
+var arrayMoveMutate = function arrayMoveMutate(array, from, to) {
+  var startIndex = from < 0 ? array.length + from : from;
+  if (startIndex >= 0 && startIndex < array.length) {
+    var endIndex = to < 0 ? array.length + to : to;
+    var _array$splice = array.splice(from, 1),
+      _array$splice2 = _slicedToArray(_array$splice, 1),
+      item = _array$splice2[0];
+    array.splice(endIndex, 0, item);
+  }
+};
+var arrayMove = function arrayMove(array, from, to) {
+  var data = _toConsumableArray(array);
+  arrayMoveMutate(data, from, to);
+  return data;
+};
+var Group = function Group(_ref) {
+  var _ref$selectedKeys = _ref.selectedKeys,
+    selectedKeys = _ref$selectedKeys === void 0 ? [] : _ref$selectedKeys,
+    _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data,
+    checkable = _ref.checkable,
+    onChange = _ref.onChange;
+  console.log('SortGroup', selectedKeys);
+  var handleSortItemChange = function handleSortItemChange(keys) {
+    console.log(keys);
+    onChange === null || onChange === void 0 || onChange(_toConsumableArray(data.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        hideInTable: !keys.includes(item.dataIndex)
+      });
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sooloer-sortable-group"
+  }, /*#__PURE__*/React.createElement(Checkbox.Group, {
+    value: selectedKeys,
+    onChange: handleSortItemChange
+  }, data.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(SortableItem
+    // @ts-ignore
+    , {
+      checkable: checkable,
+      key: item.dataIndex,
+      index: index,
+      no: index + 1,
+      item: item
+    });
+  })));
+};
+var SortableGroup = SortableContainer(Group);
+var SortGroupWrap = function SortGroupWrap(_ref2) {
+  var _ref2$data = _ref2.data,
+    data = _ref2$data === void 0 ? [] : _ref2$data,
+    _ref2$selectedKeys = _ref2.selectedKeys,
+    selectedKeys = _ref2$selectedKeys === void 0 ? [] : _ref2$selectedKeys,
+    onChange = _ref2.onChange,
+    sortable = _ref2.sortable,
+    checkable = _ref2.checkable;
+  var handleSortEnd = function handleSortEnd(_ref3) {
+    var oldIndex = _ref3.oldIndex,
+      newIndex = _ref3.newIndex;
+    return onChange === null || onChange === void 0 ? void 0 : onChange(arrayMove(data, oldIndex, newIndex));
+  };
+  if (sortable) {
+    return /*#__PURE__*/React.createElement(SortableGroup
+    // @ts-ignore
+    , {
+      checkable: checkable,
+      axis: "xy",
+      data: data,
+      distance: 10,
+      selectedKeys: selectedKeys,
+      onChange: onChange,
+      onSortEnd: handleSortEnd
+    });
+  }
+  return /*#__PURE__*/React.createElement(Group, {
+    checkable: checkable,
+    data: data,
+    selectedKeys: selectedKeys,
+    onChange: onChange
+  });
+};
+export default SortGroupWrap;

package/dist/table/setting/components/sort-item.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SortableItem: React.ComponentClass<import("react-sortable-hoc").SortableElementProps, any>;
+export default SortableItem;

package/dist/table/setting/components/sort-item.js

@@ -0,0 +1,20 @@
+import { HolderOutlined } from '@ant-design/icons';
+import { Checkbox, Space } from 'antd';
+import React from 'react';
+import { SortableElement } from 'react-sortable-hoc';
+var SortItem = function SortItem(_ref) {
+  var no = _ref.no,
+    checkable = _ref.checkable,
+    item = _ref.item;
+  return /*#__PURE__*/React.createElement(Space, {
+    className: "sooloer-sortable-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sooloer-sortable-item-icon"
+  }, /*#__PURE__*/React.createElement(HolderOutlined, null)), /*#__PURE__*/React.createElement("span", {
+    className: "sooloer-sortable-item-index"
+  }, "".concat(no, ".")), checkable ? /*#__PURE__*/React.createElement(Checkbox, {
+    value: item === null || item === void 0 ? void 0 : item.dataIndex
+  }, item === null || item === void 0 ? void 0 : item.title) : item === null || item === void 0 ? void 0 : item.title);
+};
+var SortableItem = SortableElement(SortItem);
+export default SortableItem;

package/dist/table/setting/components/sort.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type ColumnSortProps = {
+    columns?: any[];
+    checkable?: boolean;
+    sortable?: boolean;
+    onChange?: (columns: any[]) => void;
+};
+declare const ColumnSort: React.FC<ColumnSortProps>;
+export default ColumnSort;