shineout 0.0.1-alpha.1

package/cjs/table/__example__/04-group.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 表头分组
+ *    -- Table 会自动合并相邻相同 group 的表头
+ * en - Column group
+ *    -- Table automatically merges headers with adjacent and identical groups.
+ */
+
+var data = [{
+  id: 1,
+  firstName: 'Ephraim',
+  lastName: 'Wisozk',
+  position: 'Marketing Designer',
+  start: '2012-01-29',
+  time: '01:42',
+  salary: 115777,
+  country: 'Reunion',
+  office: 'Miami',
+  office5: 'Istanbul',
+  height: 113.74
+}, {
+  id: 2,
+  firstName: 'Osvaldo',
+  lastName: 'Beer',
+  position: 'Financial Controller',
+  start: '2007-09-04',
+  time: '03:26',
+  salary: 396093,
+  country: 'Syrian Arab Republic',
+  office: 'San Paulo',
+  office5: 'Shenzhen',
+  height: 82.13
+}, {
+  id: 3,
+  firstName: 'Dylan',
+  lastName: 'Ratke',
+  position: 'Development Lead',
+  start: '2009-10-16',
+  time: '01:45',
+  salary: 236064,
+  country: 'Peru',
+  office: 'Boston',
+  office5: 'Delhi',
+  height: 179.53
+}, {
+  id: 4,
+  firstName: 'Shaniya',
+  lastName: 'Jacobs',
+  position: 'Developer',
+  start: '2014-06-30',
+  time: '02:17',
+  salary: 338985,
+  country: 'Peru',
+  office: 'Chengdu',
+  office5: 'Dallas-Fort Worth',
+  height: 190.11
+}];
+var name = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  style: {
+    background: '#ccc',
+    display: 'block',
+    lineHeight: '40px',
+    color: '#fff'
+  },
+  children: "Name"
+});
+var other = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  children: "Other"
+});
+var columns = [{
+  title: 'First Name',
+  render: 'firstName',
+  group: [name, 'True Name']
+}, {
+  title: 'Last Name',
+  render: 'lastName',
+  group: [name, 'True Name']
+}, {
+  title: 'Nick Name',
+  render: function render() {
+    return 'nickname';
+  },
+  group: name
+}, {
+  title: 'Country',
+  render: 'country'
+}, {
+  title: 'Office',
+  render: 'office',
+  group: other
+}, {
+  title: 'Position',
+  render: 'position',
+  group: other
+}];
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, {
+    bordered: true,
+    keygen: "id",
+    columns: columns,
+    data: data
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/table/__example__/05-fixed-head.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 固定表头
+ *    -- 当 table 设置高度后，表头会固定在顶部
+ * en - Fixed head
+ *    -- When the table sets the height, the header will be fixed at the top.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/table/__example__/05-fixed-head.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _mock = require("@sheinx/mock");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 固定表头
+ *    -- 当 table 设置高度后，表头会固定在顶部
+ * en - Fixed head
+ *    -- When the table sets the height, the header will be fixed at the top.
+ */
+
+var data = _mock.user.fetchSync(20);
+var columns = [{
+  title: 'id',
+  render: 'id',
+  width: 50
+}, {
+  title: 'Name',
+  render: function render(d) {
+    return "".concat(d.firstName, " ").concat(d.lastName);
+  }
+}, {
+  title: 'Country',
+  render: 'country'
+}, {
+  title: 'Position',
+  render: 'position'
+}, {
+  title: 'Office',
+  render: 'office'
+}, {
+  title: 'Start Date',
+  render: 'start'
+}, {
+  title: 'Salary($)',
+  render: function render(d) {
+    return "".concat(d.salary.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
+  }
+}];
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, {
+    bordered: true,
+    keygen: "id",
+    style: {
+      height: 300
+    },
+    columns: columns,
+    data: data,
+    width: 1500
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/table/__example__/06-fixed-column.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 固定列
+ *    -- 设置 column 的 fixed 属性，可以固定列。只在设置了表格的 width 属性，并且 width 大于外部容器情况下才会生效
+ * en - Fixed column
+ *    -- Set the fixed property of the column can fix the column; Only take effect if the table's width property is set and width is greater than the external container.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/table/__example__/06-fixed-column.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _mock = require("@sheinx/mock");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 固定列
+ *    -- 设置 column 的 fixed 属性，可以固定列。只在设置了表格的 width 属性，并且 width 大于外部容器情况下才会生效
+ * en - Fixed column
+ *    -- Set the fixed property of the column can fix the column; Only take effect if the table's width property is set and width is greater than the external container.
+ */
+
+var data = _mock.user.fetchSync(20);
+var columns = [{
+  title: 'id',
+  render: 'id',
+  width: 50
+}, {
+  title: 'First Name',
+  group: 'Name',
+  render: 'firstName',
+  width: 120
+}, {
+  title: 'Last Name',
+  fixed: 'left',
+  group: 'Name',
+  render: 'lastName',
+  width: 120
+}, {
+  title: 'Country',
+  render: 'country'
+}, {
+  title: 'Position',
+  render: 'position'
+}, {
+  title: 'Office',
+  render: 'office'
+}, {
+  title: 'Start Date',
+  render: 'start'
+}, {
+  title: 'Salary($)',
+  fixed: 'right',
+  width: 100,
+  render: function render(d) {
+    return "".concat(d.salary.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
+  }
+}];
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, {
+    bordered: true,
+    keygen: "id",
+    width: 1500,
+    style: {
+      height: 300
+    },
+    columns: columns,
+    data: data
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/table/__example__/07-01-virtual-list.d.ts

@@ -0,0 +1,10 @@
+/**
+ * cn - 性能
+ *    -- Table内部对大量数据的渲染做了lazy render的优化。这个例子加载了10000条，55列数据。可以通过设置rowsInView调整单次最多render的行数，默认为20
+ * en - Performance
+ *    -- The rendering of large amounts of data in the Table has been optimized by lazy render. This example loads 10000 pieces and 55 columns of data.
+ *    -- You can set rowsInView property to change the number of rows in rendering. The default value is 20.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/table/__example__/07-01-virtual-list.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _mock = require("@sheinx/mock");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 性能
+ *    -- Table内部对大量数据的渲染做了lazy render的优化。这个例子加载了10000条，55列数据。可以通过设置rowsInView调整单次最多render的行数，默认为20
+ * en - Performance
+ *    -- The rendering of large amounts of data in the Table has been optimized by lazy render. This example loads 10000 pieces and 55 columns of data.
+ *    -- You can set rowsInView property to change the number of rows in rendering. The default value is 20.
+ */
+
+var data = _mock.user.fetchSync(10000);
+var columns = [{
+  title: 'id',
+  render: 'id',
+  width: 80
+}, {
+  title: 'Name',
+  fixed: 'left',
+  render: function render(d) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        height: d.height
+      },
+      children: "".concat(d.firstName, " ").concat(d.lastName)
+    });
+  },
+  width: 160
+}, {
+  title: 'Country',
+  render: 'country',
+  width: 200
+}, {
+  title: 'Position',
+  render: 'position'
+}, {
+  title: 'Office',
+  render: 'office'
+}, {
+  title: 'Start Date',
+  render: 'start',
+  width: 140
+}];
+for (var i = 0; i < 50; i++) {
+  columns.push({
+    title: "".concat(i + 1, "($)"),
+    render: function render(d) {
+      return "".concat(d.salary.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
+    }
+  });
+}
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, {
+    verticalAlign: "top",
+    virtual: true,
+    keygen: "id",
+    width: 6400,
+    style: {
+      height: 600
+    },
+    columns: columns,
+    data: data,
+    rowsInView: 20,
+    bordered: true
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/table/__example__/07-02-virtual-scroll.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 虚拟滚动
+ *    -- 虚拟列表提供了一个 scrollToIndex 方法滚动到指定行。
+ * en - scrollToIndex
+ *    -- The virtual list table provides a scrollToIndex method to scroll to the specified row.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/table/__example__/07-02-virtual-scroll.js

@@ -0,0 +1,119 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.concat.js");
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("../..");
+var _mock = require("@sheinx/mock");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * cn - 虚拟滚动
+ *    -- 虚拟列表提供了一个 scrollToIndex 方法滚动到指定行。
+ * en - scrollToIndex
+ *    -- The virtual list table provides a scrollToIndex method to scroll to the specified row.
+ */
+
+var data = _mock.user.fetchSync(10000);
+var columns = [{
+  title: 'id',
+  render: 'id',
+  width: 80
+}, {
+  title: 'Name',
+  fixed: 'left',
+  render: function render(d) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: "name_".concat(d.id),
+      style: {
+        height: d.height
+      },
+      children: "".concat(d.firstName, " ").concat(d.lastName)
+    });
+  },
+  width: 160
+}, {
+  title: 'Country',
+  render: 'country'
+}, {
+  title: 'Position',
+  render: 'position'
+}, {
+  title: 'Office',
+  render: 'office'
+}, {
+  title: 'Start Date',
+  render: 'start',
+  width: 140
+}];
+var App = function App() {
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    table = _useState2[0],
+    setTable = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      index: 25
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+  var handleScroll = function handleScroll() {
+    if (table) table.scrollToIndex(state.index - 1, function () {
+      var el = document.querySelector("#name_".concat(state.index));
+      if (el) {
+        el.style.color = 'red';
+      }
+    });
+  };
+  var handleIndexChange = function handleIndexChange(_ref) {
+    var index = _ref.index;
+    setState({
+      index: index
+    });
+  };
+  (0, _react.useEffect)(function () {
+    setTimeout(handleScroll);
+  }, [state]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Form, {
+      defaultValue: state,
+      inline: true,
+      onSubmit: handleIndexChange,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Input.Number, {
+        min: 1,
+        max: 10000,
+        width: 100,
+        name: "index"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+        htmlType: "submit",
+        children: "Scroll"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, {
+      keygen: "id",
+      bordered: true,
+      data: data,
+      virtual: true,
+      width: 1400,
+      rowsInView: 5,
+      columns: columns,
+      style: {
+        height: 500
+      },
+      tableRef: function tableRef(t) {
+        return setTable(t);
+      }
+    })]
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/table/__example__/08-loading.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 加载中
+ *    -- 设置 loading 属性可以将表格状态设置为加载中
+ * en - Loading
+ *    -- Set the loading property can set the table state to loading.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/table/__example__/08-loading.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _mock = require("@sheinx/mock");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 加载中
+ *    -- 设置 loading 属性可以将表格状态设置为加载中
+ * en - Loading
+ *    -- Set the loading property can set the table state to loading.
+ */
+
+var data = _mock.user.fetchSync(8);
+var columns = [{
+  title: 'id',
+  render: 'id',
+  width: 50
+}, {
+  title: 'Name',
+  render: function render(d) {
+    return "".concat(d.firstName, " ").concat(d.lastName);
+  }
+}, {
+  title: 'Country',
+  render: 'country'
+}, {
+  title: 'Position',
+  render: 'position'
+}, {
+  title: 'Office',
+  render: 'office'
+}];
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, {
+    keygen: "id",
+    loading: true,
+    columns: columns,
+    data: data
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/table/__example__/09-01-sorter.d.ts

@@ -0,0 +1,17 @@
+/**
+ * cn - 排序
+ *    -- 设置 Table 的 sorter 属性统一指定排序函数
+ *    -- 设置 column 的 sorter 标示此列需要排序并指定依据字段，会作为第一个参数传入排序函数
+ *    -- defaultOrder 指定该列默认排序规则
+ *    -- sorter 返回一个 sort 函数时，使用这个函数对数据进行内部排序
+ *    -- 后端或自行排序用户自行处理，sorter 函数不要返回结果
+ * en - Sorter
+ *    -- Set the sorter property of Table to indicate the method of table sort.
+ *    -- Set the sorter property of Column to indicate the sort key string, will pass to table sorter method
+ *    -- Set defaultOrder mark defualt order
+ *    -- When the sorter returns a function, use this function to sort data internally.
+ *    -- Server-side or self-sorting is is handled by the user, do not return results.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/cjs/table/__example__/09-01-sorter.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _mock = require("@sheinx/mock");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 排序
+ *    -- 设置 Table 的 sorter 属性统一指定排序函数
+ *    -- 设置 column 的 sorter 标示此列需要排序并指定依据字段，会作为第一个参数传入排序函数
+ *    -- defaultOrder 指定该列默认排序规则
+ *    -- sorter 返回一个 sort 函数时，使用这个函数对数据进行内部排序
+ *    -- 后端或自行排序用户自行处理，sorter 函数不要返回结果
+ * en - Sorter
+ *    -- Set the sorter property of Table to indicate the method of table sort.
+ *    -- Set the sorter property of Column to indicate the sort key string, will pass to table sorter method
+ *    -- Set defaultOrder mark defualt order
+ *    -- When the sorter returns a function, use this function to sort data internally.
+ *    -- Server-side or self-sorting is is handled by the user, do not return results.
+ */
+
+var data = _mock.user.fetchSync(10);
+var columns = [{
+  title: 'Name',
+  fixed: 'left',
+  sorter: 'firstName',
+  defaultOrder: 'asc',
+  render: function render(d) {
+    return "".concat(d.firstName, " ").concat(d.lastName);
+  }
+}, {
+  title: 'Age',
+  render: 'age',
+  sorter: 'age'
+}, {
+  title: 'Position',
+  render: 'position'
+}, {
+  title: 'Salary($)',
+  render: function render(d) {
+    return "".concat(d.salary.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
+  }
+}];
+var App = function App() {
+  var sorter = {
+    age: function age(order) {
+      return function (a, b) {
+        return order === 'asc' ? a.age - b.age : b.age - a.age;
+      };
+    },
+    firstName: function firstName(order) {
+      return function (a, b) {
+        return order === 'asc' ? a.firstName.localeCompare(b.firstName) : b.firstName.localeCompare(a.firstName);
+      };
+    }
+  };
+  var handleSorter = function handleSorter(name, order) {
+    return sorter[name](order);
+  };
+  var handleCancel = function handleCancel(prevType, index) {
+    console.log('sort cancel : ', prevType, index);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, {
+    striped: true,
+    data: data,
+    keygen: "id",
+    columns: columns,
+    sorter: handleSorter,
+    onSortCancel: handleCancel
+  });
+};
+var _default = App;
+exports.default = _default;

package/cjs/table/__example__/09-02-sorter-render.d.ts

@@ -0,0 +1,9 @@
+/**
+ * cn - 自定义排序图标
+ *    -- 设置 Table 的 renderSorter 属性来自定义图标
+ * en - Sorter
+ *    -- Set the renderSorter property of the Table to customize the icon.
+ */
+import React from 'react';
+declare const App: React.FC;
+export default App;