linkmore-design 1.0.33 → 1.0.36

package/es/CardTable/footer.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/pagination/style");
+
+var _pagination = _interopRequireDefault(require("antd/es/pagination"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _context = _interopRequireDefault(require("./context"));
+
+var Footer = function Footer() {
+  var _useContext = (0, _react.useContext)(_context.default),
+      dispatch = _useContext.dispatch,
+      data = _useContext.data,
+      onChange = _useContext.onChange,
+      defaultPage = _useContext.defaultPage;
+
+  var onPageChange = function onPageChange(pageIndex, pageSize) {
+    dispatch({
+      type: 'changePage',
+      page: {
+        pageIndex: pageIndex,
+        pageSize: pageSize
+      }
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(pageIndex, pageSize);
+  };
+
+  var config = (0, _react.useMemo)(function () {
+    return {
+      total: (defaultPage === null || defaultPage === void 0 ? void 0 : defaultPage.total) || data.length,
+      current: (defaultPage === null || defaultPage === void 0 ? void 0 : defaultPage.pageIndex) || 1,
+      pageSize: (defaultPage === null || defaultPage === void 0 ? void 0 : defaultPage.pageSize) || 20
+    };
+  }, [defaultPage]);
+  return /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: function showTotal(total) {
+      return "\u5171 ".concat(total, " \u6761");
+    },
+    size: "small",
+    onChange: onPageChange
+  }, config));
+};
+
+var _default = Footer;
+exports.default = _default;

package/es/CardTable/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _LmCardTable = _interopRequireDefault(require("./LmCardTable"));
+
+var _default = _LmCardTable.default; // export * from LmCardTable;
+
+exports.default = _default;

package/es/CardTable/style/style.css

@@ -0,0 +1,265 @@
+.lm_card_table_wrapper {
+  height: 100%;
+}
+.lm_card_table_wrapper .lm_card_table_container {
+  height: 100%;
+  overflow: auto;
+}
+.lm_card_table_wrapper .lm_card_table_container .lm_card_table .lm_card_table_body .lm_card_table_body_row {
+  display: grid;
+  grid-gap: 16px;
+  padding-bottom: 16px;
+}
+.lm_card_table_wrapper .lm_card_table_container .lm_card_table .lm_card_table_body .lm_card_table_body_row.last_row {
+  padding-bottom: 0;
+}
+.lm_card_table_wrapper .lm_card_table_container .lm_card_table .lm_card_table_body .lm_card_table_body_row .lm_card_table_body_cell {
+  width: 100%;
+  overflow: hidden;
+}
+.card_PTC {
+  height: 100%;
+}
+.card_PTC .card_PTC_container {
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+  height: 100%;
+  border-radius: 2px;
+  background-color: var(--color-4);
+  padding: calc(var(--gap) * 2);
+  transition: 0.3s;
+}
+.card_PTC .card_PTC_container .card_checkbox {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 1;
+  opacity: 0;
+  transition: 0.3s;
+}
+.card_PTC .card_PTC_container .card_checkbox .lm-checkbox {
+  font-size: 0;
+  border: 8px solid rgba(255, 255, 255, 0.625);
+  border-radius: 2px;
+}
+.card_PTC .card_PTC_container .card_checkbox .ant-checkbox {
+  margin: 0;
+  top: 0;
+}
+.card_PTC .card_PTC_container .PTC_operate {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  z-index: 1;
+  background-color: rgba(255, 255, 255, 0.625);
+  border-radius: 2px;
+  opacity: 0;
+  transition: 0.3s;
+}
+.card_PTC .card_PTC_container .PTC_operate > * {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+.card_PTC .card_PTC_container .PTC_operate:hover {
+  color: var(--primary-color);
+}
+.card_PTC .card_PTC_container .card_PTC_top {
+  position: relative;
+  flex: 1;
+  border-radius: 2px;
+  background: var(--color-15);
+  overflow: hidden;
+}
+.card_PTC .card_PTC_container .card_PTC_top .ant-image {
+  width: 100%;
+  height: 100%;
+}
+.card_PTC .card_PTC_container .card_PTC_top .ant-image .ant-image-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.card_PTC .card_PTC_container .card_PTC_center .card_title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 8px;
+}
+.card_PTC .card_PTC_container .card_PTC_center .card_copy_text {
+  font-size: 12px;
+  color: var(--color-45);
+  margin-top: 4px;
+}
+.card_PTC .card_PTC_container .card_PTC_center .card_copy_text .ant-typography {
+  margin: 0;
+  color: inherit;
+}
+.card_PTC .card_PTC_container .card_PTC_center .card_copy_text .ant-typography .ant-typography-copy {
+  color: inherit;
+}
+.card_PTC .card_PTC_container .card_PTC_center .card_copy_text .ant-typography .ant-typography-copy.ant-typography-copy-success {
+  color: var(--success-color);
+}
+.card_PTC .card_PTC_container .card_PTC_bottom {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-height: 24px;
+  overflow: hidden;
+}
+.card_PTC .card_PTC_container .card_PTC_bottom button {
+  border: none;
+  background-color: var(--background-color);
+}
+.card_PTC .card_PTC_container:hover {
+  background-color: var(--color-6);
+}
+.card_PTC .card_PTC_container:hover .card_checkbox,
+.card_PTC .card_PTC_container:hover .PTC_operate {
+  opacity: 1;
+}
+.card_PTC .card_PTC_container.checked .card_checkbox,
+.card_PTC .card_PTC_container.checked .PTC_operate {
+  opacity: 1;
+}
+.card_PTR {
+  height: 100%;
+}
+.card_PTR .card_PTR_container {
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  border-radius: 2px;
+  background-color: var(--background-color);
+  transition: 0.3s;
+}
+.card_PTR .card_PTR_container .card_PTR_body {
+  position: relative;
+  display: flex;
+  flex: 1;
+  gap: var(--gap);
+  padding: calc(var(--gap) * 2);
+  overflow: hidden;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_checkbox {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 1;
+  opacity: 0;
+  transition: 0.3s;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_checkbox .lm-checkbox {
+  font-size: 0;
+  border: 8px solid rgba(255, 255, 255, 0.625);
+  border-radius: 2px;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_checkbox .ant-checkbox {
+  margin: 0;
+  top: 0;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_left {
+  width: 40%;
+  min-width: 126px;
+  border-radius: 2px;
+  background: var(--color-15);
+  overflow: hidden;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_left .ant-image {
+  width: 100%;
+  height: 100%;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_left .ant-image .ant-image-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right {
+  flex: 1;
+  display: flex;
+  flex-flow: column;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right .card_title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right .card_copy_text {
+  font-size: 12px;
+  color: var(--color-45);
+  margin-top: 4px;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right .card_copy_text .ant-typography {
+  margin: 0;
+  color: inherit;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right .card_copy_text .ant-typography .ant-typography-copy {
+  color: inherit;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right .card_copy_text .ant-typography .ant-typography-copy.ant-typography-copy-success {
+  color: var(--success-color);
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right .PTR_extend {
+  flex: 1 1 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  row-gap: 126px;
+  margin-top: 8px;
+  overflow: hidden;
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right .PTR_extend button {
+  border: none;
+  background-color: var(--background-color);
+}
+.card_PTR .card_PTR_container .card_PTR_body .card_PTR_right .PTR_desc {
+  font-size: 12px;
+  color: var(--color-65);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.card_PTR .card_PTR_container .card_PTR_footer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--background-color);
+}
+.card_PTR .card_PTR_container .card_PTR_footer > * {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: initial;
+  height: 40px;
+  border: none;
+  background-color: var(--background-color);
+}
+.card_PTR .card_PTR_container .card_PTR_footer > *::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  height: 18px;
+  width: 1px;
+  background-color: var(--color-15);
+}
+.card_PTR .card_PTR_container .card_PTR_footer > *:last-child::after {
+  display: none;
+}
+.card_PTR .card_PTR_container:hover .card_PTR_body .card_checkbox {
+  opacity: 1;
+}
+.hasChecked .card_PTC .card_PTC_container .card_checkbox,
+.hasChecked .card_PTR .card_PTR_container .card_PTR_body .card_checkbox {
+  opacity: 1;
+}

package/es/CardTable/table/Table.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TableBody = _interopRequireDefault(require("../body/TableBody"));
+
+// 卡片表格
+var LmCardTable = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var table = _ref.table,
+      tableContainerRef = _ref.tableContainerRef;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_card_table"
+  }, /*#__PURE__*/_react.default.createElement(_TableBody.default, {
+    table: table,
+    tableContainerRef: tableContainerRef
+  }));
+});
+
+var _default = LmCardTable;
+exports.default = _default;

package/es/CardTable/table/TableContainer.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _utils = require("../utils");
+
+// 主体区域: 对表格进行包裹
+// 获取主体高度
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+
+var LmCardTableContainer = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var table = _ref.table;
+  var dataSource = table.dataSource,
+      dispatch = table.dispatch,
+      cellConfig = table.cellConfig,
+      type = table.type;
+  var tableContainerRef = (0, _react.useRef)(null); // 行数据计算
+
+  var getRows = function getRows(columnCount) {
+    var arr = [];
+    var len = Math.ceil(dataSource.length / columnCount);
+
+    for (var i = 0; i < len; i++) {
+      var startIndex = columnCount * i;
+      var items = dataSource.slice(startIndex, startIndex + columnCount);
+      arr.push(items);
+    }
+
+    return arr;
+  }; // 获取容器盒子高宽
+
+
+  var getResize = function getResize() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        blockSize = _ref2.blockSize,
+        inlineSize = _ref2.inlineSize;
+
+    // 列数量
+    var colCount = (0, _utils.getResizeColumnCount)({
+      width: inlineSize,
+      height: blockSize
+    }, cellConfig.width); // 获取行
+
+    var rows = getRows(colCount);
+    dispatch({
+      type: 'windowResize',
+      resize: {
+        width: inlineSize,
+        height: blockSize
+      }
+    });
+    dispatch({
+      type: 'changeColumnCount',
+      columnCount: colCount
+    });
+    dispatch({
+      type: 'changeRows',
+      rows: rows
+    });
+  }; // 获取表格高度
+
+
+  useIsomorphicLayoutEffect(function () {
+    // 频繁变动可考虑增加防抖
+    var resizeObserver = new ResizeObserver(function (entries) {
+      // console.log("我的resize变化啦");
+      var borderbox = entries[0].borderBoxSize[0];
+      getResize(borderbox);
+    });
+
+    if (tableContainerRef.current) {
+      resizeObserver.observe(tableContainerRef.current);
+    }
+
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [type]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: tableContainerRef,
+    className: "lm_card_table_container"
+  }, /*#__PURE__*/_react.default.createElement(_Table.default, {
+    table: table,
+    tableContainerRef: tableContainerRef
+  }));
+});
+
+var _default = LmCardTableContainer;
+exports.default = _default;

package/es/CardTable/table/TableRoot.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TableWrapper = _interopRequireDefault(require("./TableWrapper"));
+
+var _excluded = ["rowConfig", "cellConfig", "defaultConfig", "checkboxConfig"];
+
+var reducer = function reducer(state, action) {
+  var page = action.page,
+      resize = action.resize,
+      columnCount = action.columnCount,
+      rows = action.rows,
+      checkboxConfig = action.checkboxConfig;
+
+  switch (action.type) {
+    case 'changePage':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        page: page
+      });
+
+    case 'changeColumnCount':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        columnCount: columnCount
+      });
+
+    case 'changeRows':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        rows: rows
+      });
+
+    case 'windowResize':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        resize: resize
+      });
+
+    case 'changeCheckboxConfig':
+      // 复选中的Key
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        checkboxConfig: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state.checkboxConfig), checkboxConfig)
+      });
+
+    default:
+      throw new Error();
+  }
+};
+
+var getInitialState = function getInitialState(_ref) {
+  var _ref$checkboxConfig$c = _ref.checkboxConfig.checkKeys,
+      checkKeys = _ref$checkboxConfig$c === void 0 ? [] : _ref$checkboxConfig$c,
+      _ref$dataSource = _ref.dataSource,
+      dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+      cellKey = _ref.cellKey;
+  var checkValues = dataSource.filter(function (v) {
+    return checkKeys.includes(v[cellKey]);
+  }) || [];
+  return {
+    checkboxConfig: {
+      checkKeys: checkKeys,
+      checkValues: checkValues
+    },
+    defaultValue: [],
+    page: {
+      pageIndex: 1,
+      pageSize: 20,
+      total: 0
+    },
+    resize: {
+      widht: 0,
+      height: 0
+    },
+    // 列数量
+    columnCount: 5,
+    rows: [] // 行数据
+
+  };
+};
+
+var LmCardTableRoot = function LmCardTableRoot(_ref2) {
+  var rowConfig = _ref2.rowConfig,
+      cellConfig = _ref2.cellConfig,
+      defaultConfig = _ref2.defaultConfig,
+      checkboxConfig = _ref2.checkboxConfig,
+      resetProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var initialState = (0, _react.useMemo)(function () {
+    return getInitialState((0, _objectSpread2.default)({
+      checkboxConfig: checkboxConfig
+    }, resetProps));
+  }, []);
+
+  var _useReducer = (0, _react.useReducer)(reducer, initialState),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isFullScreen = _useState2[0],
+      setIsFullScreen = _useState2[1];
+
+  var _state$checkboxConfig = state.checkboxConfig,
+      checkKeys = _state$checkboxConfig.checkKeys,
+      checkValues = _state$checkboxConfig.checkValues; // 设置选中的数据
+
+  var setSelectCells = function setSelectCells(checked, cell) {
+    var nKeys = checked ? [].concat((0, _toConsumableArray2.default)(checkKeys), [cell[resetProps.cellKey]]) : checkKeys.filter(function (v) {
+      return v !== cell[resetProps.cellKey];
+    });
+    var nValues = checked ? [].concat((0, _toConsumableArray2.default)(checkValues), [cell]) : checkValues.filter(function (v) {
+      return v[resetProps.cellKey] !== cell[resetProps.cellKey];
+    });
+    dispatch({
+      type: 'changeCheckboxConfig',
+      checkboxConfig: {
+        checkKeys: nKeys,
+        checkValues: nValues
+      }
+    });
+  }; // 配置对象收集
+
+
+  var config = {
+    rowConfig: (0, _objectSpread2.default)({
+      // 行配置
+      gap: 16
+    }, rowConfig),
+    cellConfig: (0, _objectSpread2.default)({
+      // 单元格配置对象
+      width: 192,
+      height: 282
+    }, cellConfig),
+    defaultConfig: defaultConfig
+  };
+  var table = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+    state: state,
+    dispatch: dispatch
+  }, config), resetProps), {}, {
+    setSelectCells: setSelectCells
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isFullScreen && /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+    table: table
+  }));
+};
+
+var _default = LmCardTableRoot;
+exports.default = _default;

package/es/CardTable/table/TableWrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TableContainer = _interopRequireDefault(require("./TableContainer"));
+
+// 包裹表格外围区域: 工具栏操作区域/主体区域/工具栏底部区域
+var LmCardTableWrapper = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var table = _ref.table;
+  var height = table.height;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_card_table_wrapper",
+    style: {
+      height: height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableContainer.default, {
+    table: table
+  }));
+});
+
+var _default = LmCardTableWrapper;
+exports.default = _default;

package/es/CardTable/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getResizeColumnCount = void 0;
+
+// 列响应数量处理: (盒子总高宽, 列宽度)
+var getResizeColumnCount = function getResizeColumnCount() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      totalWidth = _ref.width;
+
+  var colWidth = arguments.length > 1 ? arguments[1] : undefined;
+
+  if (totalWidth > 1790) {
+    return colWidth > 308 ? 4 : colWidth > 228 ? 5 : colWidth > 200 ? 6 : 7;
+  }
+
+  if (totalWidth > 1390) {
+    return colWidth > 308 ? 3 : colWidth > 228 ? 4 : colWidth > 200 ? 5 : 6;
+  }
+
+  if (totalWidth > 990) {
+    return colWidth > 308 ? 2 : colWidth > 228 ? 3 : colWidth > 200 ? 4 : 5;
+  } // 小于990时
+
+
+  return colWidth > 308 ? 2 : colWidth > 228 ? 3 : colWidth > 200 ? 4 : 5;
+};
+
+exports.getResizeColumnCount = getResizeColumnCount;