@zat-design/sisyphus-react 3.0.13

package/lib/old/ProCustomColumn/index.js

@@ -0,0 +1,171 @@
+"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/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _reactSvg = require("react-svg");
+var _LeftBody = _interopRequireDefault(require("./LeftBody"));
+var _RightBody = _interopRequireDefault(require("./RightBody"));
+var _customColumn = _interopRequireDefault(require("../../assets/customColumn.svg"));
+var _excluded = ["defaultValue", "dataSource", "width", "title", "cancelText", "okText", "onConfirm", "onOk", "onCancel"];
+var ProCustomColumn = function ProCustomColumn(_ref) {
+  var _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? [] : _ref$defaultValue,
+    dataSource = _ref.dataSource,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 800 : _ref$width,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '自定义列' : _ref$title,
+    _ref$cancelText = _ref.cancelText,
+    cancelText = _ref$cancelText === void 0 ? '取消' : _ref$cancelText,
+    _ref$okText = _ref.okText,
+    okText = _ref$okText === void 0 ? '确定' : _ref$okText,
+    onConfirm = _ref.onConfirm,
+    onOk = _ref.onOk,
+    onCancel = _ref.onCancel,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    checkedItems = _useState4[0],
+    setCheckedItems = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    emptyCheckedItems = _useState6[0],
+    setEmptyCheckedItems = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    prevCheckedItems = _useState8[0],
+    setPrevCheckedItems = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    rightValue = _useState10[0],
+    setRightValue = _useState10[1];
+  var _useState11 = (0, _react.useState)([]),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    prevRightValue = _useState12[0],
+    setPrevRightValue = _useState12[1];
+  (0, _react.useEffect)(function () {
+    var checkedItems = [];
+    var emptyCheckedItems = [];
+    var rightValue = [];
+    defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.forEach(function (item) {
+      var _item$columns, _item$columns2, _item$columns2$filter, _item$columns3;
+      checkedItems.push({
+        key: item.key,
+        value: (_item$columns = item.columns) === null || _item$columns === void 0 ? void 0 : _item$columns.map(function (item) {
+          return item.value;
+        })
+      });
+      emptyCheckedItems.push({
+        key: item.key,
+        // @ts-ignore
+        value: (_item$columns2 = item.columns) === null || _item$columns2 === void 0 ? void 0 : (_item$columns2$filter = _item$columns2.filter(function (item) {
+          return item.disabled;
+        })) === null || _item$columns2$filter === void 0 ? void 0 : _item$columns2$filter.map(function (item) {
+          return item.value;
+        })
+      });
+      (_item$columns3 = item.columns) === null || _item$columns3 === void 0 ? void 0 : _item$columns3.forEach(function (subItem) {
+        rightValue.push((0, _objectSpread2.default)({
+          key: item.key
+        }, subItem));
+      });
+    });
+    setCheckedItems(checkedItems);
+    setPrevCheckedItems(checkedItems);
+    setRightValue(rightValue);
+    setPrevRightValue(rightValue);
+    setEmptyCheckedItems(emptyCheckedItems);
+  }, [defaultValue]);
+  var getRightValue = function getRightValue(values) {
+    setRightValue(values);
+  };
+  var onLeftChange = function onLeftChange(values) {
+    setCheckedItems(values);
+  };
+  var onRightChange = function onRightChange(value) {
+    if (Array.isArray(value)) {
+      setCheckedItems(emptyCheckedItems);
+    } else {
+      var key = value.key;
+      var nextCheckedItems = (0, _toConsumableArray2.default)(checkedItems || []);
+      nextCheckedItems = nextCheckedItems.map(function (item) {
+        if (item.key === key) {
+          var nextItemValue = item.value.filter(function (i) {
+            return i !== value.value;
+          });
+          return {
+            key: key,
+            value: nextItemValue
+          };
+        }
+        return item;
+      });
+      setCheckedItems(nextCheckedItems);
+    }
+  };
+  var _onOk = function _onOk() {
+    onConfirm && onConfirm(rightValue);
+    setPrevRightValue(rightValue);
+    setPrevCheckedItems(checkedItems);
+    setVisible(false);
+  };
+  var _onCancel = function _onCancel(event) {
+    setVisible(false);
+    setRightValue(prevRightValue);
+    setCheckedItems(prevCheckedItems);
+    onCancel && onCancel(event);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-custom-column"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    className: "custom-column-btn",
+    icon: /*#__PURE__*/_react.default.createElement(_reactSvg.ReactSVG, {
+      className: "anticon",
+      wrapper: "span",
+      src: _customColumn.default
+    }),
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, "\u81EA\u5B9A\u4E49\u5217"), /*#__PURE__*/_react.default.createElement(_antd.Modal, (0, _objectSpread2.default)({
+    className: "pro-custom-column-modal",
+    width: width,
+    bodyStyle: {
+      paddingTop: 0
+    },
+    open: visible,
+    title: title,
+    okText: okText,
+    cancelText: cancelText,
+    onOk: _onOk,
+    onCancel: _onCancel
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: "main"
+  }, /*#__PURE__*/_react.default.createElement(_LeftBody.default, {
+    dataSource: dataSource,
+    onChange: onLeftChange,
+    value: checkedItems,
+    rightValue: rightValue,
+    getRightValue: getRightValue
+  }), /*#__PURE__*/_react.default.createElement(_RightBody.default, {
+    onChange: onRightChange,
+    value: rightValue,
+    getRightValue: getRightValue
+  }))));
+};
+var _default = ProCustomColumn;
+exports.default = _default;

package/lib/old/ProCustomColumn/propsType.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CheckboxOptionType, CheckboxValueType } from 'antd/lib/checkbox/Group';
+import { ModalProps } from 'antd/lib/modal';
+export interface RightValueItemPropsType extends CheckboxOptionType {
+    key: string | number;
+    value: any;
+}
+export interface ColumnsPropsType {
+    title: string;
+    key: number | string;
+    columns: CheckboxOptionType[];
+}
+export interface ProCustomColumnPropsType {
+    defaultValue: ColumnsPropsType[];
+    dataSource: ColumnsPropsType[];
+    onConfirm?: (value: RightValueItemPropsType[]) => void;
+    onCancel?: (value: RightValueItemPropsType[]) => void;
+}
+export interface InnerModalPropsType extends ModalProps {
+    onOk?: (value: RightValueItemPropsType | React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export interface CheckedItemsPropsType {
+    key: number | string;
+    value: CheckboxValueType[];
+}
+export interface ProColumnItemPropsType extends ColumnsPropsType {
+    itemKey: number | string;
+    value?: CheckboxValueType[];
+    rightValue: RightValueItemPropsType[];
+    getRightValue: (values: RightValueItemPropsType[]) => void;
+    onChange: (values: CheckboxValueType[]) => void;
+}
+export interface LeftBodyPropsType {
+    dataSource: ColumnsPropsType[];
+    value?: CheckedItemsPropsType[];
+    rightValue: RightValueItemPropsType[];
+    getRightValue: (values: RightValueItemPropsType[]) => void;
+    onChange: (values: CheckedItemsPropsType[]) => void;
+}

package/lib/old/ProCustomColumn/propsType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/old/ProCustomColumn/style/LeftBody.less

@@ -0,0 +1,74 @@
+.pro-custom-column-modal {
+  .leftBody {
+    width: 70%;
+    flex-shrink: 0;
+    height: 100%;
+    border: 1px solid #DCDCDC;
+    border-radius: var(--zaui-border-radius, 4px);
+    .ant-input-affix-wrapper {
+      height: 40px;
+      padding: var(--zaui-space-size-xs, 4px) var(--zaui-space-size-md, 16px);
+      background: unset;
+      border: none;
+      border-bottom: 1px solid #DCDCDC;
+      border-radius: 0;
+      &:hover {
+        border-bottom: 1px solid #DCDCDC;
+      }
+    }
+    .ant-input {
+      background: unset;
+    }
+    .ant-input-affix-wrapper:focus,
+    .ant-input-affix-wrapper-focused {
+      box-shadow: none;
+    }
+    > h4 {
+      height: 40px;
+      padding-left: var(--zaui-space-size-md, 16px);
+      line-height: 40px;
+      background: #F6F7F8;
+      border-radius: var(--zaui-border-radius, 4px) var(--zaui-border-radius, 4px) 0 0;
+      color: #616161;
+    }
+    .list {
+      height: calc(100% - 86px);
+      padding: var(--zaui-space-size-sm, 8px) 0 var(--zaui-space-size-sm, 8px) var(--zaui-space-size-md, 16px);
+      overflow-y: auto;
+      .noData {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: #616161;
+        .emptyImg {
+          margin-bottom: var(--zaui-space-size-md, 16px);
+          width: 80px;
+        }
+      }
+      .listItem {
+        margin-bottom: var(--zaui-space-size-md, 16px);
+        list-style-type: none;
+        h4 {
+          margin-bottom: var(--zaui-space-size-sm, 8px);
+        }
+      }
+      .ant-checkbox-wrapper {
+        margin-bottom: var(--zaui-space-size-md, 16px);
+      }
+      .ant-checkbox-group {
+        display: block;
+        .ant-checkbox-group-item {
+          width: 29%;
+          margin-bottom: var(--zaui-space-size-md, 16px);
+          margin-right: var(--zaui-space-size-md, 16px);
+
+          .ant-checkbox + span {
+            word-break: break-all;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/old/ProCustomColumn/style/RightBody.less

@@ -0,0 +1,25 @@
+.pro-custom-column-modal {
+  .rightBody {
+    flex: 1;
+    margin-left: var(--zaui-space-size-md, 16px);
+    border: 1px solid #DCDCDC;
+    border-radius: var(--zaui-border-radius, 4px);
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding: 0 0 0 var(--zaui-space-size-md, 16px);
+      background: #F6F7F8;
+      color: #616161;
+    }
+
+    .list {
+      height: calc(100% - 40px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: var(--zaui-space-size-ms, 8px);
+      padding-bottom: 0;
+    }
+  }
+}

package/lib/old/ProCustomColumn/style/index.less

@@ -0,0 +1,88 @@
+@import "./LeftBody";
+@import "./RightBody";
+
+.pro-custom-column {
+  .custom-column-btn {
+    display    : inline-flex;
+    align-items: center;
+
+    &:hover,
+    &:visited,
+    &:focus {
+      color     : unset;
+      border    : 1px solid #d9d9d9;
+      background: unset;
+    }
+
+    .anticon {
+      height: 16px;
+    }
+  }
+}
+
+.pro-custom-column-modal {
+
+  .ant-modal-header,
+  .ant-modal-footer {
+    border: none;
+  }
+
+  .ant-modal-footer {
+    padding: 0 var(--zaui-space-size-md, 16px) var(--zaui-space-size-md, 16px) var(--zaui-space-size-md, 16px);
+  }
+
+  .main {
+    display: flex;
+    height : 360px;
+  }
+}
+
+.right-list-item {
+  width         : 100%;
+  padding-bottom: var(--zaui-space-size-sm, 8px);
+
+  .ant-tag {
+    display        : flex;
+    align-items    : center;
+    justify-content: space-between;
+    width          : 100%;
+    height         : 32px;
+    background     : #F2F2F2;
+    border-radius  : var(--zaui-border-radius, 4px);
+    border         : none;
+    color          : #343434;
+    font-size      : var(--zaui-font-size, 14px);
+
+    .drag-icon {
+      height: 20px;
+      cursor: move;
+    }
+
+    .disabled-icon {
+      height: 20px;
+    }
+
+    .anticon-close {
+      color    : #DCDCDC;
+      font-size: var(--zaui-font-size-sm, 12px);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .pro-tooltip,
+    .anticon {
+      cursor: not-allowed;
+    }
+
+    .anticon {
+      pointer-events: none;
+    }
+  }
+}
+
+.sortable-helper {
+  list-style-type: none;
+  z-index        : 9999;
+}

package/lib/old/ProEditableTable/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProEditableTablePropsType } from './propsType';
+declare const ProEditableTable: React.ForwardRefExoticComponent<Pick<ProEditableTablePropsType, keyof ProEditableTablePropsType> & React.RefAttributes<unknown>>;
+export default ProEditableTable;