linkmore-design 1.0.3

package/lib/PopTable/index.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+require("antd/es/space/style");
+
+var _space = _interopRequireDefault(require("antd/es/space"));
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _BseTable = _interopRequireDefault(require("./BseTable"));
+
+var _excluded = ["columns", "data", "total", "rowSelection", "onChange", "getCheckboxRecords"];
+
+var Demo = function Demo(props) {
+  var inputRef = _react.default.useRef();
+
+  var tableRef = _react.default.useRef();
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      checkRow = _useState2[0],
+      setCheckRow = _useState2[1];
+
+  var columns = props.columns,
+      data = props.data,
+      total = props.total,
+      _props$rowSelection = props.rowSelection,
+      rowSelection = _props$rowSelection === void 0 ? true : _props$rowSelection,
+      onChange = props.onChange,
+      getCheckboxRecords = props.getCheckboxRecords,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useState3 = (0, _react.useState)('base'),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      activeKey = _useState4[0],
+      setActiveKey = _useState4[1]; // 表格分页、筛选、排序改变事件
+
+
+  var onTableChange = function onTableChange(params) {
+    var search = inputRef.current.input.value;
+    var nValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), {}, {
+      search: search
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
+  }; // 搜索事件
+
+
+  var onSearch = function onSearch(e) {
+    if (e.keyCode === 13) {
+      var search = inputRef.current.input.value;
+      setActiveKey(Date.now());
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        search: search
+      });
+    }
+  }; // 选中的行数据
+
+
+  var onClick = function onClick() {
+    var nValue = tableRef.current.getCheckboxRecords();
+
+    if (!rowSelection) {
+      nValue = checkRow;
+    }
+
+    getCheckboxRecords === null || getCheckboxRecords === void 0 ? void 0 : getCheckboxRecords(nValue);
+  };
+
+  var onTableClick = function onTableClick(row) {
+    if (!rowSelection) {
+      setCheckRow([row]);
+    }
+  };
+
+  var onDoubleClick = function onDoubleClick(row) {
+    getCheckboxRecords === null || getCheckboxRecords === void 0 ? void 0 : getCheckboxRecords([row]);
+  };
+
+  _react.default.useEffect(function () {
+    onChange === null || onChange === void 0 ? void 0 : onChange({});
+  }, []);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_popover_table"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "z_flex",
+    style: {
+      maxWidth: 485
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_operate"
+  }, /*#__PURE__*/_react.default.createElement(_space.default, {
+    className: "operate_left"
+  }, /*#__PURE__*/_react.default.createElement(_input.default, {
+    ref: inputRef,
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22",
+    onKeyDown: onSearch
+  })), /*#__PURE__*/_react.default.createElement(_space.default, {
+    className: "operate_right"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "primary",
+    icon: /*#__PURE__*/_react.default.createElement(_icons.SaveOutlined, null),
+    size: "small",
+    onClick: onClick
+  }, "\u786E\u8BA4"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_grid"
+  }, /*#__PURE__*/_react.default.createElement(_BseTable.default, (0, _extends2.default)({
+    key: activeKey,
+    ref: tableRef,
+    columns: columns,
+    total: total,
+    dataSource: data,
+    onClick: onTableClick,
+    onChange: onTableChange,
+    onDoubleClick: onDoubleClick,
+    rowSelection: rowSelection,
+    scroll: {
+      x: '100%',
+      y: 200
+    }
+  }, resetProps)))));
+};
+
+var _default = Demo;
+exports.default = _default;

package/lib/PopTable/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style.css");

package/lib/PopTable/style/style.css

@@ -0,0 +1,363 @@
+.ant-layout-sider {
+  min-height: 100vh;
+  background-color: #022766;
+}
+.ant-menu-dark .ant-menu-inline.ant-menu-sub {
+  box-shadow: none;
+}
+.ant-menu-submenu-placement-rightTop {
+  display: none;
+}
+.ant-table .row-active .ant-table-cell {
+  background-color: #FEFFD3 !important;
+}
+.ant-dropdown-menu-item {
+  font-size: 12px;
+  height: 32px;
+}
+.ant-tabs .ant-tabs-nav .ant-tabs-tab {
+  font-size: 14px;
+}
+.ant-tabs.auto_tabs {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+.ant-tabs.auto_tabs .ant-tabs-nav {
+  height: 48px;
+}
+.ant-tabs.auto_tabs .ant-tabs-content-holder {
+  flex: 1;
+  overflow: auto;
+}
+.ant-drawer.drawer_wrapper .ant-drawer-header {
+  padding: 0 24px;
+}
+.ant-drawer.drawer_wrapper .ant-drawer-body {
+  position: relative;
+  flex: 1;
+  padding: 0 24px;
+}
+.ant-modal-wrap.plugin_modal {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-end;
+}
+.ant-modal-wrap.plugin_modal .ant-modal {
+  left: 56px;
+  top: 0;
+  margin: 0 0 8px 8px;
+  padding: 0;
+}
+.ant-modal-wrap.lm_modal_confirm .anticon {
+  margin-top: -1px;
+  margin-right: 8px;
+}
+.ant-modal-wrap.lm_modal_confirm .ant-modal-body {
+  padding: 16px 24px;
+}
+.ant-popover.pop_img .ant-popover-inner-content {
+  line-height: 1;
+  padding: var(--gap);
+}
+@font-face {
+  font-family: 'iconfont';
+  /* Project id 2966019 */
+  src: url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.woff2?t=1641546077924') format('woff2'), url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.woff?t=1641546077924') format('woff'), url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.ttf?t=1641546077924') format('truetype');
+}
+.icon_ {
+  font-family: 'iconfont';
+  font-size: 14px;
+}
+.iconfont {
+  font-size: 12px;
+}
+.icon_home::before {
+  content: '\e7fc';
+}
+:root {
+  --them-color: #1890fc;
+  --main-color: #1890fc;
+  --primary-color: #1890fc;
+  --primary2-color: rgba(24, 144, 252, 0.08);
+  --success-color: #56C22D;
+  --warning-color: #FD9727;
+  --error-color: #FA4F53;
+  --aside-bg-color: #022766;
+  --font-color: rgba(0, 0, 0, 0.85);
+  --font2-color: rgba(0, 0, 0, 0.65);
+  --text-color: rgba(0, 0, 0, 0.45);
+  --box-shadow-color: rgba(0, 0, 0, 0.15);
+  --background-color: rgba(0, 0, 0, 0.04);
+  --background-color-hover: rgba(0, 0, 0, 0.08);
+  --border-color: #f0f0f0;
+  --stripe-color: #f5f5f5;
+  --border-hover-color: #f2f5f7;
+  --gap: 8px;
+  --basic-height: 24px;
+}
+.ant-input,
+.ant-select {
+  font-size: 12px;
+}
+.ant-select-dropdown .ant-select-item {
+  font-size: 12px;
+  align-items: center;
+}
+.react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+.react-resizable-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  width: 3px;
+  height: 40px;
+  cursor: col-resize;
+}
+.react-resizable-handle:hover {
+  background-color: var(--primary-color);
+}
+.react-resizable-handle:active {
+  background-color: var(--primary-color);
+}
+.yf_resizable_bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  height: 0;
+}
+.resizable_line {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background-color: var(--primary-color);
+  z-index: 1;
+}
+.handle_resizable {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  z-index: 2;
+}
+.lm_popover_table .btn-dashed {
+  font-size: 12px;
+  color: #ccc;
+  border-color: #ccc;
+}
+.lm_popover_table .z_flex {
+  display: flex;
+  flex-flow: column;
+  flex: 1;
+  height: 100%;
+}
+.lm_popover_table .lm_operate {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.lm_popover_table .lm_operate .ant-space-item,
+.lm_popover_table .lm_operate .ant-space-item > *,
+.lm_popover_table .lm_operate .ant-btn,
+.lm_popover_table .lm_operate .ant-input {
+  font-size: 12px;
+}
+.lm_popover_table .lm_operate .ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.lm_popover_table .lm_operate .ant-btn > .anticon:not(.anticon-down) {
+  font-size: 14px;
+}
+.lm_popover_table .lm_operate .anticon + span,
+.lm_popover_table .lm_operate span + .anticon {
+  margin-left: calc(var(--gap) / 2);
+}
+.lm_popover_table .lm_operate .operate_left,
+.lm_popover_table .lm_operate .operate_right {
+  display: flex;
+  padding-bottom: calc(var(--gap) * 2);
+}
+.lm_popover_table .lm_operate .operate_left:empty,
+.lm_popover_table .lm_operate .operate_right:empty {
+  padding-bottom: 0;
+}
+.lm_popover_table .lm_operate .ant-input-group {
+  font-size: 12px;
+  line-height: 1.5;
+}
+.lm_popover_table .lm_operate .ant-input-sm {
+  width: 180px;
+  font-size: 12px;
+  height: var(--basic-height);
+  padding: 0 10px;
+}
+.lm_popover_table .lm_operate .ant-select.ant-select-single .ant-select-selector {
+  font-size: 12px;
+  width: 160px;
+}
+.lm_popover_table .lm_operate .ant-picker {
+  font-size: 12px;
+}
+.lm_popover_table .lm_operate .ant-picker .ant-picker-input > input {
+  font-size: 12px;
+}
+.lm_popover_table .lm_operate .line {
+  display: block;
+  height: var(--basic-height);
+  border-right: 1px solid #eee;
+}
+.lm_popover_table .lm_grid {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+}
+.lm_popover_table .lm_grid > div {
+  height: 100%;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table.ant-table-small {
+  font-size: 12px;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-thead {
+  height: 40px;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-thead .text-overflow,
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-thead .text-overflow .ant-table-column-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-table-cell {
+  padding: 8px;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-table-cell.number {
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-table-cell.money {
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+  color: var(--error-color);
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-table-cell.money-color {
+  color: var(--error-color);
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-typography {
+  margin: 0;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-typography .ant-typography-copy {
+  color: var(--text-color);
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-typography .ant-typography-copy-success {
+  color: var(--success-color);
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-typography.ant-typography-ellipsis .ant-typography-edit {
+  opacity: 0;
+  color: var(--primary-color);
+  transition: 0.3s;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-tbody .ant-typography.ant-typography-ellipsis:hover .ant-typography-edit {
+  opacity: 1;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary {
+  height: 48px;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary td {
+  text-align: right;
+  background-color: var(--table-background-color);
+  padding: 0 8px;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary td:first-of-type {
+  text-align: left;
+  padding: 0 0 0 8px;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary td.number {
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary td.money {
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+  color: var(--error-color);
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary td.money-color {
+  color: var(--error-color);
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary td > div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary td > div:last-of-type {
+  font-weight: bold;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-summary .total_title {
+  position: relative;
+  white-space: nowrap;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-pro-table-list-toolbar-container {
+  padding: 0;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-pro-table-list-toolbar-container .ant-pro-table-list-toolbar-right {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  z-index: 4;
+  font-size: 16px;
+  width: 48px;
+  height: 38px;
+  justify-content: center;
+  background-color: #fafafa;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-pro-table-list-toolbar-container .ant-pro-table-list-toolbar-right::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 1.6em;
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-row {
+  position: relative;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-row .operate_fixed_right .operate_btn {
+  font-size: 12px;
+  color: var(--primary-color);
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-row .operate_fixed_right .operate_btn .ant-space-item {
+  cursor: pointer;
+}
+.lm_popover_table .lm_grid .ant-pro-table .ant-table-row .operate_fixed_right .ant-btn {
+  font-size: 12px;
+}
+.lm_popover_table .lm_grid .ant-pagination {
+  font-size: 12px;
+  padding-top: 12px;
+  margin: 0;
+}
+.lm_popover_table .lm_grid .ant-pagination .ant-select {
+  font-size: inherit;
+}
+.z-popover-table .ant-popover-inner-content {
+  padding: 16px;
+}
+.z-popover-table .ant-card-body {
+  padding: 0;
+}
+.z-popover-table .ant-empty-normal {
+  font-size: 12px;
+  margin: 8px 0 0;
+}
+.z-popover-table .ant-empty-normal .ant-empty-image {
+  font: 36px;
+}

package/lib/ProTable/ImgList/body.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));
+
+var _reactWindow = require("react-window");
+
+var _context = _interopRequireDefault(require("./context"));
+
+var _imgCell = _interopRequireDefault(require("./imgCell"));
+
+var _cardCell = _interopRequireDefault(require("./cardCell"));
+
+var _empty = _interopRequireDefault(require("./empty"));
+
+var ImgList = function ImgList(props) {
+  var widthCount = props.width,
+      heightCount = props.height;
+
+  var _useContext = (0, _react.useContext)(_context.default),
+      data = _useContext.data,
+      _useContext$heightCel = _useContext.heightCell,
+      heightCell = _useContext$heightCel === void 0 ? 375 : _useContext$heightCel,
+      _useContext$rowKey = _useContext.rowKey,
+      rowKey = _useContext$rowKey === void 0 ? 'id' : _useContext$rowKey,
+      _useContext$cell = _useContext.cell,
+      cell = _useContext$cell === void 0 ? 'img' : _useContext$cell; // 响应式列数量控制
+
+
+  var columnCount = (0, _react.useMemo)(function () {
+    return widthCount > 1800 ? 5 : widthCount > 1500 ? 4 : 3;
+  }, [widthCount]);
+  var widthCell = (0, _react.useMemo)(function () {
+    return (widthCount - 8) / columnCount;
+  }, [widthCount]);
+  var rowCount = (0, _react.useMemo)(function () {
+    var rs = Math.ceil(data.length / columnCount);
+    return rs;
+  }, [data, widthCount]);
+
+  var Cell = _react.default.useCallback(function (_ref) {
+    var columnIndex = _ref.columnIndex,
+        rowIndex = _ref.rowIndex,
+        style = _ref.style;
+    var idx = rowIndex * columnCount + columnIndex;
+    var config = {
+      item: data[idx],
+      index: idx,
+      style: style
+    };
+    var r = rowIndex === 0 ? 'first_row' : rowIndex === rowCount - 1 ? 'last_row' : '';
+    var c = columnIndex === 0 ? 'first_column' : columnIndex + 1 === columnCount ? 'last_column' : '';
+    var classN = "".concat(r, " ").concat(c);
+    return data[idx] ? cell === 'img' ? /*#__PURE__*/_react.default.createElement(_imgCell.default, (0, _extends2.default)({
+      key: rowKey,
+      className: classN
+    }, config)) : /*#__PURE__*/_react.default.createElement(_cardCell.default, (0, _extends2.default)({
+      key: rowKey,
+      className: classN
+    }, config)) : '';
+  }, [data, widthCount]);
+
+  var Gd = _react.default.useCallback(function () {
+    return /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeGrid, {
+      className: "virtual-grid lm_imgList",
+      columnCount: columnCount,
+      columnWidth: function columnWidth() {
+        return widthCell;
+      },
+      height: heightCount,
+      rowCount: rowCount,
+      rowHeight: function rowHeight() {
+        return heightCell;
+      },
+      width: widthCount
+    }, Cell);
+  }, [data, widthCount, heightCount]);
+
+  return data.length > 0 ? /*#__PURE__*/_react.default.createElement(Gd, null) : /*#__PURE__*/_react.default.createElement(_empty.default, null);
+}; // 监听大小
+
+
+var ResizeSize = function ResizeSize(props) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactVirtualizedAutoSizer.default, {
+    style: {
+      width: '100%'
+    }
+  }, function (_ref2) {
+    var height = _ref2.height,
+        width = _ref2.width;
+    return /*#__PURE__*/_react.default.createElement(ImgList, (0, _extends2.default)({}, props, {
+      width: width,
+      height: height
+    }));
+  }));
+};
+
+var _default = ResizeSize;
+exports.default = _default;