@aloudata/aloudata-design 0.1.0-beta.4 → 0.2.0-beta.2

package/lib/Navigator/style/index.less

@@ -0,0 +1,224 @@
+@import '../../style/index.less';
+@import '../../Icon/index.less';
+
+/* stylelint-disable */
+
+@ald-prefix:ant;
+
+.supTitle() {
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.subTitle() {
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.ald-nav {
+  width: 216px;
+  background-color: @BBG15;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  user-select: none;
+
+  &-logo {
+    height: 72px;
+    padding: 24px;
+    width: 100%;
+
+    &-able-click {
+      cursor: pointer;
+    }
+  }
+
+  &-menu-icon-right.anticon {
+    color: @ND60;
+  }
+
+  &-menu {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .ant-menu-sub.ant-menu-inline {
+      background-color: unset;
+    }
+
+    .anticon.ant-menu-item-icon {
+      font-size: 20px !important;
+      width: 20px !important;
+      height: 20px !important;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      background: @ND90;
+      border: 3px solid transparent;
+      background-clip: padding-box;
+    }
+
+    &::-webkit-scrollbar {
+      background-color: transparent;
+      width: 12px;
+      height: 12px;
+    }
+
+    .ant-menu-inline,
+    .ant-menu-vertical,
+    .ant-menu-vertical-left {
+      border-right: unset;
+    }
+
+    .ant-menu {
+      background: @BBG15;
+      color: @ND0;
+
+      &.ant-menu-root {
+
+        .ant-menu-item {
+          margin-bottom: 16px;
+          padding: 0 12px !important;
+        }
+
+        li:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+      }
+
+      &.ant-menu-sub {
+        .ant-menu-item {
+          margin-top: 4px;
+          margin-bottom: 0;
+          padding: 0 12px 0 44px!important;
+        }
+      }
+
+      // 只有子级菜单相关颜色操作
+      .ant-menu-item-only-child {
+        color: @ND30;
+        height: 32px !important;
+        line-height: 32px !important;
+        font-size: 12px !important;
+        .subTitle();
+
+        &:hover {
+          color: @ND30 !important;
+        }
+
+        &.ant-menu-item-selected {
+          font-weight: 500;
+
+          &:hover {
+            color: @ND0 !important;
+          }
+        }
+      }
+
+      .ant-menu-item {
+        height: 40px;
+        width: 100%;
+        border-radius: 8px;
+        .supTitle();
+
+        &-selected {
+          background-color: @BBG20 !important;
+          color: @ND0;
+          position: relative;
+          overflow: unset;
+
+          ::before {
+            width: 4px;
+            content: '';
+            background: @B40;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: -12px;
+            border-radius: 1px;
+          }
+        }
+
+        &::after {
+          display: none !important;
+        }
+      }
+
+      .ant-menu-submenu {
+        margin-bottom: 16px;
+
+        .ant-menu-submenu-title {
+          padding: 0 12px !important;
+          height: 40px;
+          line-height: 40px;
+          .supTitle();
+
+          &:hover {
+            color: @ND0;
+          }
+        }
+
+        &-selected {
+          color: @ND0;
+        }
+
+        &-active {
+          color: @ND0;
+        }
+      }
+
+      // 修改icon和文字的margin
+      .ant-menu-item .ant-menu-item-icon + span,
+      .ant-menu-submenu-title .ant-menu-item-icon + span,
+      .ant-menu-item .anticon + span,
+      .ant-menu-submenu-title .anticon + span {
+        margin-left: 12px;
+      }
+
+      // 取消item点击时的高亮背景色
+      .ant-menu-item:active,
+      .ant-menu-submenu-title:active {
+        background: unset;
+      }
+
+      .ant-menu-inline .ant-menu-item,
+      .ant-menu-inline .ant-menu-submenu-title {
+        width: 100% !important;
+      }
+
+      // 删除右侧的高亮
+      .ant-menu-vertical .ant-menu-item::after,
+      .ant-menu-vertical-left .ant-menu-item::after,
+      .ant-menu-vertical-right .ant-menu-item::after,
+      .ant-menu-inline .ant-menu-item::after {
+        display: none;
+      }
+    }
+
+    .ant-menu-light .ant-menu-item:hover,
+    .ant-menu-light .ant-menu-item-active,
+    .ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+    .ant-menu-light .ant-menu-submenu-active,
+    .ant-menu-light .ant-menu-submenu-title:hover {
+      color: unset;
+    }
+  }
+
+  &-footer {
+    height: 56px;
+
+    &-wrap {
+      border: 1px solid @ND0;
+      color: @ND0;
+      height: 100%;
+    }
+  }
+}

package/lib/Table/demo/basic/createData.d.ts

@@ -0,0 +1,9 @@
+declare function makeData(length: number): {
+    firstName: string;
+    lastName: string;
+    age: number;
+    visits: number;
+    progress: number;
+    status: string;
+}[];
+export { makeData };

package/lib/Table/demo/basic/createData.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeData = makeData;
+
+function makeData(length) {
+  var data = [];
+
+  for (var i = 0; i < length; i++) {
+    data.push({
+      firstName: 'supermarket',
+      lastName: 'charity',
+      age: i + 1,
+      visits: 47,
+      progress: 41,
+      status: 'relationship'
+    });
+  }
+
+  return data;
+}

package/lib/Table/demo/basic/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Table/demo/basic/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/radio/style");
+
+var _radio = _interopRequireDefault(require("antd/es/radio"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+var _createData = require("./createData");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+// import Table from '../../Example'
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress'
+}];
+
+var _default = function _default() {
+  var _React$useState = _react.default.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      scrollY = _React$useState2[0],
+      setScrollY = _React$useState2[1];
+
+  var handleChange = function handleChange(e) {
+    setScrollY(e.target.value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    value: scrollY,
+    onChange: handleChange
+  }, /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+    value: 0
+  }, "\u65E0\u6EDA\u52A8"), /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+    value: 200
+  }, "\u5185\u90E8\u6EDA\u52A8")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Table, {
+    columns: columns,
+    scrollY: scrollY,
+    data: (0, _createData.makeData)(10)
+  }));
+};
+
+exports.default = _default;

package/lib/Table/demo/editCell/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Table/demo/editCell/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+var _createData = require("../basic/createData");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import Table from '../../Example'
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress',
+  Cell: function Cell(row) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        color: 'red'
+      }
+    }, "\u8FDB\u5EA6\uFF1A", row.progress);
+  }
+}];
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Table, {
+    columns: columns,
+    data: (0, _createData.makeData)(10)
+  }));
+};
+
+exports.default = _default;

package/lib/Table/demo/renderHeaderRight/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Table/demo/renderHeaderRight/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+var _createData = require("../basic/createData");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import Table from '../../Example'
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress'
+}];
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Table, {
+    columns: columns,
+    data: (0, _createData.makeData)(10),
+    renderHeaderRight: function renderHeaderRight() {
+      return /*#__PURE__*/_react.default.createElement(_aloudataDesign.Input, {
+        placeholder: "\u8BF7\u8F93\u5165"
+      });
+    }
+  }));
+};
+
+exports.default = _default;

package/lib/Table/demo/rowSelect/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Table/demo/rowSelect/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+var _createData = require("../basic/createData");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import Table from '../../Example'
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress'
+}];
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Table, {
+    columns: columns,
+    onRowSelected: function onRowSelected(record) {
+      console.log(record);
+    },
+    data: (0, _createData.makeData)(10),
+    renderHeaderRight: function renderHeaderRight() {
+      return /*#__PURE__*/_react.default.createElement(_aloudataDesign.Input, {
+        placeholder: "\u8BF7\u8F93\u5165"
+      });
+    }
+  }));
+};
+
+exports.default = _default;

package/lib/Table/demo/sort/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Table/demo/sort/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+var _createData = require("../basic/createData");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import Table from '../../Example'
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress'
+}];
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-table-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Table, {
+    columns: columns,
+    data: (0, _createData.makeData)(10)
+  }));
+};
+
+exports.default = _default;

package/lib/Table/demo/virtualList/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Table/demo/virtualList/index.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+var _createData = require("../basic/createData");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var columns = [{
+  Header: 'First Name',
+  accessor: 'firstName',
+  width: 150
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age'
+}, {
+  Header: 'Visits',
+  accessor: 'visits'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}, {
+  Header: 'Profile Progress',
+  accessor: 'progress'
+}];
+
+var _default = function _default() {
+  var _React$useState = _react.default.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      data = _React$useState2[0],
+      setData = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      loading = _React$useState4[0],
+      setLoading = _React$useState4[1];
+
+  var _React$useState5 = _react.default.useState(true),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      hasNextPage = _React$useState6[0],
+      setHasNextPage = _React$useState6[1];
+
+  var _React$useState7 = _react.default.useState(1),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      currentPage = _React$useState8[0],
+      setCurrentPage = _React$useState8[1];
+
+  var pageSize = 10;
+
+  var loadMoreItems = function loadMoreItems() {
+    return new Promise(function (resolve) {
+      setLoading(true);
+      setTimeout(function () {
+        var newData = (0, _createData.makeData)(pageSize * currentPage);
+        setCurrentPage(currentPage + 1);
+        setLoading(false);
+
+        if (newData.length > 100) {
+          setHasNextPage(false);
+        } else {
+          setData(newData);
+        }
+
+        resolve();
+      }, 1000);
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-input-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Table, {
+    columns: columns,
+    scrollY: 450,
+    loading: loading,
+    data: data,
+    loadMore: loadMoreItems,
+    hasNextPage: hasNextPage
+  }));
+};
+
+exports.default = _default;

package/lib/Table/index.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import './style';
+import { ITableProps } from './interface';
+declare function Table<T extends Record<string, unknown>>({ columns, data, total, renderHeaderLeft, renderHeaderRight, scrollY, onRowSelected, loadMore, hasNextPage, loading, }: ITableProps<T>): ReactElement;
+export default Table;