@sheinx/base 3.0.0-alpha.1

package/esm/table/__example__/01-base.js

@@ -0,0 +1,191 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireDefault(require("react"));
+var _2 = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var jssStyle = {
+  table: _shineoutStyle.useTableStyle,
+  radio: _shineoutStyle.useRadioStyle,
+  checkbox: _shineoutStyle.useCheckboxStyle
+};
+var id = 0;
+var mockData = function mockData(i) {
+  var item = {
+    id: id++,
+    name: "Edward King Edward King Edward King Edward King ".concat(i),
+    age: Math.floor(Math.random() * 100),
+    address: "London, Park Lane no. ".concat(i),
+    sex: i % 2 === 0 ? 'man' : 'femail',
+    children: []
+  };
+  return item;
+};
+// mock 1000 rows 学生数据
+var data = Array(10).fill(0).map(function (_, i) {
+  return _objectSpread({}, mockData(i));
+});
+var columns = [{
+  type: 'checkbox',
+  width: 20
+}, {
+  type: 'expand',
+  width: 20,
+  render: function render() {
+    return function () {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          padding: '12px'
+        },
+        children: "123213"
+      });
+    };
+  }
+}, {
+  title: 'ID2',
+  render: 'id',
+  width: 40,
+  treeColumnsName: 'children',
+  sorter: function sorter(order) {
+    return function (a, b) {
+      return order === 'asc' ? a.id - b.id : b.id - a.id;
+    };
+  },
+  defaultOrder: 'asc'
+}, {
+  title: 'age2',
+  render: 'age',
+  width: 40,
+  sorter: function sorter(order) {
+    return function (a, b) {
+      return order === 'asc' ? a.age - b.age : b.age - a.age;
+    };
+  }
+}, {
+  title: 'age',
+  render: 'age',
+  width: 40,
+  sorter: 'age',
+  rowSpan: function rowSpan(data, nextData) {
+    return data.age === nextData.age;
+  },
+  colSpan: function colSpan(data) {
+    return data.age % 2 === 0 ? 2 : 1;
+  }
+}, {
+  title: 'Name',
+  render: 'name',
+  width: 80,
+  sorter: 'name'
+}, {
+  title: 'Age',
+  render: 'age',
+  width: 100,
+  group: ['group1', 'group2']
+}, {
+  title: 'Address',
+  render: 'address',
+  group: ['group1', 'group2'],
+  width: 100
+}, {
+  title: 'Sex',
+  render: 'sex',
+  width: 50,
+  fixed: 'right'
+}];
+var sorters = {
+  id: function id(order) {
+    return function (a, b) {
+      return order === 'asc' ? a.id - b.id : b.id - a.id;
+    };
+  },
+  name: function name(order) {
+    return function (a, b) {
+      return order === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+    };
+  },
+  age: function age(order) {
+    return function (a, b) {
+      return order === 'asc' ? a.age - b.age : b.age - a.age;
+    };
+  }
+};
+var _default = function _default() {
+  var _React$useState = _react.default.useState(1),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    bordered = _React$useState2[0],
+    setBordered = _React$useState2[1];
+  var _React$useState3 = _react.default.useState('top'),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    va = _React$useState4[0],
+    setVa = _React$useState4[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "bordered:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.RadioGroup, {
+        jssStyle: jssStyle,
+        data: [0, 1],
+        value: bordered,
+        onChange: function onChange(d) {
+          return setBordered(d);
+        },
+        keygen: true,
+        renderItem: function renderItem(d) {
+          return !!d ? 'true' : 'false';
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "vertical:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.RadioGroup, {
+        jssStyle: jssStyle,
+        data: ['middle', 'top'],
+        value: va,
+        onChange: function onChange(d) {
+          return setVa(d);
+        },
+        keygen: true,
+        renderItem: function renderItem(d) {
+          return d;
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Table, {
+      sticky: {
+        top: 180
+      },
+      columnResizable: true,
+      bordered: !!bordered,
+      sorter: function sorter(key, order, list) {
+        console.log(key, order, list);
+        var orderFunc = sorters[key];
+        return orderFunc(order);
+      },
+      width: 1000,
+      style: {
+        height: ''
+      },
+      keygen: "id",
+      verticalAlign: va,
+      jssStyle: jssStyle,
+      data: data,
+      format: 'id',
+      columns: columns,
+      onRowSelect: function onRowSelect(value) {
+        console.log(value);
+      }
+    })]
+  });
+};
+exports.default = _default;

package/esm/table/__example__/02-virtual.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=02-virtual.d.ts.map

package/esm/table/__example__/02-virtual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"02-virtual.d.ts","sourceRoot":"","sources":["02-virtual.tsx"],"names":[],"mappings":";;AAiGA,wBAgBE"}

package/esm/table/__example__/02-virtual.js

@@ -0,0 +1,127 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.from.js");
+var _react = _interopRequireDefault(require("react"));
+var _2 = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var jssStyle = {
+  table: _shineoutStyle.useTableStyle,
+  radio: _shineoutStyle.useRadioStyle,
+  checkbox: _shineoutStyle.useCheckboxStyle
+};
+var maxChild = 0;
+var mockData = function mockData(i) {
+  var childNum = Math.floor(Math.random() * 100);
+  var item = {
+    id: i,
+    name: "Edward King Edward King Edward King Edward King ".concat(i),
+    age: Math.floor(Math.random() * 100),
+    address: "London, Park Lane no. ".concat(i),
+    sex: i % 2 === 0 ? 'man' : 'femail',
+    height: Math.floor(Math.random() * 50),
+    children: []
+  };
+  if (maxChild < 10) {
+    maxChild++;
+    item.children = Array.from({
+      length: childNum
+    }).map(function (_, j) {
+      return mockData(j);
+    });
+  }
+  return item;
+};
+// mock 1000 rows 学生数据
+var data = Array(10000).fill(0).map(function (_, i) {
+  return _objectSpread({}, mockData(i));
+});
+var columns = [
+// {
+//   type: 'checkbox',
+//   width: 20,
+// },
+// {
+//   type: 'expand',
+//   width: 20,
+//   render: () => () => {
+//     return <div style={{ padding: '12px' }}>123213</div>;
+//   },
+// },
+{
+  title: 'ID2',
+  render: 'id',
+  width: 40,
+  fixed: 'left'
+}, {
+  title: 'age2',
+  render: function render(d) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        background: '#ccc',
+        height: d.height
+      },
+      children: d.age
+    });
+  },
+  width: 40
+}, {
+  title: 'age',
+  render: 'age',
+  width: 40,
+  rowSpan: function rowSpan(data, nextData) {
+    return data.age === nextData.age;
+  },
+  colSpan: function colSpan(data) {
+    return data.age % 2 === 0 ? 2 : 1;
+  }
+}, {
+  title: 'Name',
+  render: 'name',
+  width: 80
+}, {
+  title: 'Age',
+  render: 'age',
+  width: 100
+}, {
+  title: 'Address',
+  render: 'address',
+  width: 100
+}, {
+  title: 'Sex',
+  render: 'sex',
+  width: 50,
+  fixed: 'right'
+}];
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.Table, {
+      sticky: {
+        top: 180
+      },
+      width: 1200,
+      style: {
+        height: '500px'
+      },
+      keygen: "id",
+      fixed: true,
+      jssStyle: jssStyle,
+      data: data,
+      format: 'id',
+      columns: columns
+    })
+  });
+};
+exports.default = _default;

package/esm/table/colgroup.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface ColgroupProps {
+    colgroup?: (number | undefined)[];
+    columns?: {
+        key: string | number;
+        width?: number;
+    }[];
+    shouldLastColAuto: boolean;
+}
+declare const Colgroup: (props: ColgroupProps) => JSX.Element;
+export default Colgroup;
+//# sourceMappingURL=colgroup.d.ts.map

package/esm/table/colgroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colgroup.d.ts","sourceRoot":"","sources":["colgroup.tsx"],"names":[],"mappings":";AAAA,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IAClC,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AACD,QAAA,MAAM,QAAQ,UAAW,aAAa,gBA0BrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/table/colgroup.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _jsxRuntime = require("react/jsx-runtime");
+var Colgroup = function Colgroup(props) {
+  var _props$colgroup = props.colgroup,
+    colgroup = _props$colgroup === void 0 ? [] : _props$colgroup,
+    _props$columns = props.columns,
+    columns = _props$columns === void 0 ? [] : _props$columns;
+  var useColgroup = colgroup && colgroup.length === columns.length;
+  if (useColgroup) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("colgroup", {
+      children: colgroup === null || colgroup === void 0 ? void 0 : colgroup.map(function (item, index) {
+        var isLast = index === colgroup.length - 1;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+          style: {
+            width: isLast && props.shouldLastColAuto ? undefined : item
+          }
+        }, columns[index].key);
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("colgroup", {
+    children: columns.map(function (item) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+        style: {
+          width: item.width
+        }
+      }, item.key);
+    })
+  });
+};
+var _default = Colgroup;
+exports.default = _default;

package/esm/table/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Table } from './table';
+export type { TableProps, ColumnItem as TableColumnItem, ColumnFix as TableColumnFix, ColumnType as TableColumnType, ColumnOrder as TableColumnOrder, RenderSorterParam as TableRenderSorterParam, SummaryItem as TableSummaryItem, TableRef as TableTableRef, } from './table.type';
+//# sourceMappingURL=index.d.ts.map

package/esm/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AACpD,YAAY,EACV,UAAU,EACV,UAAU,IAAI,eAAe,EAC7B,SAAS,IAAI,cAAc,EAC3B,UAAU,IAAI,eAAe,EAC7B,WAAW,IAAI,gBAAgB,EAC/B,iBAAiB,IAAI,sBAAsB,EAC3C,WAAW,IAAI,gBAAgB,EAC/B,QAAQ,IAAI,aAAa,GAC1B,MAAM,cAAc,CAAC"}

package/esm/table/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _table.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _table.default;
+  }
+});
+var _table = _interopRequireDefault(require("./table"));

package/esm/table/table.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TableProps } from './table.type';
+declare const _default: <Item, Value>(props: TableProps<Item, Value>) => JSX.Element;
+export default _default;
+//# sourceMappingURL=table.d.ts.map

package/esm/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAkB1C,wBA2cE"}