@zat-design/sisyphus-react 3.0.13

package/es/old/ProCustomColumn/LeftBody.js

@@ -0,0 +1,206 @@
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "antd/es/checkbox/style";
+import _Checkbox from "antd/es/checkbox";
+var _excluded = ["dataSource", "onChange", "value"];
+import { SearchOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+import emptyImg from '../../assets/empty.png';
+// import "./style/index.less";
+var CheckboxGroup = _Checkbox.Group;
+var ProColumnItem = function ProColumnItem(_ref) {
+  var itemKey = _ref.itemKey,
+    title = _ref.title,
+    columns = _ref.columns,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    rightValue = _ref.rightValue,
+    getRightValue = _ref.getRightValue;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    indeterminate = _useState2[0],
+    setIndeterminate = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    checkAll = _useState4[0],
+    setCheckAll = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    plainOptions = _useState6[0],
+    setPlainOptions = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    checkedList = _useState8[0],
+    setCheckedList = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    allCheckDisabled = _useState10[0],
+    setAllCheckDisabled = _useState10[1];
+  useEffect(function () {
+    if (value) {
+      setCheckedList(value);
+      if (value.length === columns.length) {
+        setCheckAll(true);
+      } else {
+        setCheckAll(false);
+      }
+    } else {
+      setCheckedList([]);
+      setCheckAll(false);
+    }
+    setIndeterminate(!!(value === null || value === void 0 ? void 0 : value.length) && value.length < plainOptions.length);
+  }, [value, columns]);
+  useEffect(function () {
+    var options = columns.map(function (item) {
+      return item.value;
+    });
+    setPlainOptions(options);
+    setAllCheckDisabled(columns.some(function (item) {
+      return item.disabled;
+    }));
+  }, [columns]);
+  var handleRightValue = function handleRightValue(list) {
+    var nextRightValue = columns.filter(function (item) {
+      return list.includes(item.value);
+    });
+    getRightValue(nextRightValue.map(function (item) {
+      return _objectSpread({
+        key: itemKey
+      }, item);
+    }));
+  };
+  var _onChange = function _onChange(list) {
+    onChange(list);
+    setIndeterminate(!!list.length && list.length < plainOptions.length);
+    setCheckAll(list.length === plainOptions.length);
+    handleRightValue(list);
+  };
+  var onCheckAllChange = function onCheckAllChange(e) {
+    var selectOptions = e.target.checked ? plainOptions : [];
+    onChange(selectOptions);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+    handleRightValue(selectOptions);
+  };
+  return /*#__PURE__*/React.createElement("div", null, title && /*#__PURE__*/React.createElement("h4", null, title), /*#__PURE__*/React.createElement(_Checkbox, {
+    indeterminate: indeterminate,
+    onChange: onCheckAllChange,
+    checked: checkAll,
+    disabled: allCheckDisabled
+  }, "\u5168\u9009"), /*#__PURE__*/React.createElement(CheckboxGroup, {
+    options: columns,
+    onChange: _onChange,
+    value: checkedList
+  }));
+};
+var LeftBody = function LeftBody(_ref2) {
+  var dataSource = _ref2.dataSource,
+    onChange = _ref2.onChange,
+    value = _ref2.value,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    checkedItems = _useState12[0],
+    setCheckedItems = _useState12[1];
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    filteredItems = _useState14[0],
+    setFilteredItems = _useState14[1];
+  useEffect(function () {
+    if (value) {
+      setCheckedItems(value);
+    }
+  }, [value]);
+  useEffect(function () {
+    setFilteredItems(dataSource);
+  }, [dataSource]);
+  var handleSearch = function handleSearch(event) {
+    if (!event.target.value) {
+      setFilteredItems(dataSource);
+    } else {
+      var items = [];
+      dataSource.forEach(function (item) {
+        var _columns = [];
+        item.columns.forEach(function (i) {
+          if (i.label && i.label.toString().indexOf(event.target.value) > -1) {
+            _columns.push(i);
+          }
+        });
+        if (_columns.length > 0) {
+          items.push({
+            key: item.key,
+            title: item.title,
+            columns: _columns
+          });
+        }
+      });
+      setFilteredItems(items);
+    }
+  };
+  var _onChange = function _onChange(key) {
+    return function (values) {
+      var targetCategory = checkedItems.find(function (item) {
+        return item.key === key;
+      });
+      var nextCheckedItems = _toConsumableArray(checkedItems);
+      if (targetCategory) {
+        nextCheckedItems = checkedItems.map(function (item) {
+          if (item.key === key) {
+            return {
+              key: key,
+              value: values
+            };
+          }
+          return item;
+        });
+      } else {
+        nextCheckedItems.push({
+          key: key,
+          value: values
+        });
+      }
+      onChange(nextCheckedItems);
+    };
+  };
+  var columnsEles = filteredItems.map(function (item) {
+    var checkItem = checkedItems.find(function (i) {
+      return i.key === item.key;
+    });
+    var _ref3 = checkItem || {},
+      itemValue = _ref3.value;
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.key,
+      className: "listItem"
+    }, /*#__PURE__*/React.createElement(ProColumnItem, _objectSpread(_objectSpread(_objectSpread({}, item), {}, {
+      onChange: _onChange(item.key),
+      value: itemValue
+    }, rest), {}, {
+      itemKey: item.key
+    })));
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "leftBody"
+  }, /*#__PURE__*/React.createElement("h4", null, "\u53EF\u6DFB\u52A0\u7684\u5217"), /*#__PURE__*/React.createElement(_Input, {
+    placeholder: "\u8BF7\u8F93\u5165\u5217\u540D\u79F0\u8FDB\u884C\u67E5\u8BE2",
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
+      style: {
+        color: '#bcbcbc'
+      }
+    }),
+    allowClear: true,
+    onChange: handleSearch
+  }), /*#__PURE__*/React.createElement("ul", {
+    className: "list"
+  }, (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.length) > 0 ? columnsEles : /*#__PURE__*/React.createElement("div", {
+    className: "noData"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "emptyImg",
+    src: emptyImg,
+    alt: "\u6682\u65E0\u6570\u636E"
+  }), "\u672A\u627E\u5230\u76F8\u5173\u7ED3\u679C")));
+};
+export default LeftBody;

package/es/old/ProCustomColumn/RightBody.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { RightValueItemPropsType } from './propsType';
+interface RightBodyPropsType {
+    value?: RightValueItemPropsType[];
+    getRightValue: (values: RightValueItemPropsType[]) => void;
+    onChange: (value: RightValueItemPropsType | []) => void;
+}
+declare const RightBody: FC<RightBodyPropsType>;
+export default RightBody;

package/es/old/ProCustomColumn/RightBody.js

@@ -0,0 +1,145 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import "antd/es/tag/style";
+import _Tag from "antd/es/tag";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ReactSVG } from 'react-svg';
+import { ProTooltip } from '../../index';
+import disabledSvg from '../../assets/disabled.svg';
+import dragSvg from '../../assets/drag.svg';
+var SortableItem = function SortableItem(props) {
+  var label = props.label,
+    item = props.item,
+    _onClose = props.onClose;
+  var data = useSortable({
+    id: props['data-row-key'],
+    disabled: item.disabled
+  });
+  var attributes = data.attributes,
+    listeners = data.listeners,
+    setNodeRef = data.setNodeRef,
+    transform = data.transform,
+    transition = data.transition,
+    isDragging = data.isDragging;
+  var style = _objectSpread(_objectSpread({}, props.style), {}, {
+    transform: CSS.Transform.toString(transform && _objectSpread(_objectSpread({}, transform), {}, {
+      scaleY: 1
+    })),
+    transition: transition
+  }, isDragging ? {
+    position: 'relative',
+    zIndex: 9999
+  } : {});
+  return /*#__PURE__*/React.createElement("li", _objectSpread({
+    ref: item.disabled ? null : setNodeRef,
+    style: style,
+    className: "right-list-item ".concat(item.disabled ? 'disabled' : '')
+  }, item.disabled ? {} : attributes), /*#__PURE__*/React.createElement(_Tag, {
+    closable: true,
+    onClose: function onClose(e) {
+      return _onClose(e);
+    }
+  }, item.disabled ? /*#__PURE__*/React.createElement(ReactSVG, {
+    className: "disabled-icon",
+    src: disabledSvg
+  }) : /*#__PURE__*/React.createElement(ReactSVG, _objectSpread({
+    className: "drag-icon",
+    src: dragSvg
+  }, listeners)), /*#__PURE__*/React.createElement(ProTooltip, {
+    text: label
+  }, label)));
+};
+var RightBody = function RightBody(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    getRightValue = _ref.getRightValue;
+  var min = -1;
+  var max = (value === null || value === void 0 ? void 0 : value.length) || 0;
+  var minFlag = false;
+  var maxFlag = false;
+  value === null || value === void 0 ? void 0 : value.forEach(function (item, index) {
+    if (item.disabled && !minFlag) {
+      min = index;
+    } else {
+      minFlag = true;
+    }
+    if (!item.disabled && !maxFlag) {
+      maxFlag = true;
+    } else if (maxFlag && item.disabled) {
+      max = index;
+      maxFlag = false;
+    }
+  });
+  var _onClose2 = function onClose(itemValue) {
+    var targetItem = value === null || value === void 0 ? void 0 : value.find(function (item) {
+      return item.value === itemValue;
+    });
+    if (targetItem) {
+      onChange(targetItem);
+    }
+    var nextValue = _toConsumableArray(value || []);
+    nextValue = nextValue.filter(function (item) {
+      return item.value !== itemValue;
+    });
+    getRightValue(nextValue);
+  };
+  var handleClear = function handleClear() {
+    var nextValue = _toConsumableArray(value || []);
+    nextValue = nextValue.filter(function (item) {
+      return !!item.disabled;
+    });
+    // @ts-ignore
+    onChange([]);
+    getRightValue(nextValue);
+  };
+  var onDragEnd = function onDragEnd(_ref2) {
+    var active = _ref2.active,
+      over = _ref2.over;
+    if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+      var activeIndex = value.findIndex(function (i) {
+        return i.value === active.id;
+      });
+      var overIndex = value.findIndex(function (i) {
+        return i.value === (over === null || over === void 0 ? void 0 : over.id);
+      });
+      if (overIndex <= min || overIndex >= max) {
+        return;
+      }
+      var nextValue = arrayMove(value, activeIndex, overIndex);
+      getRightValue(nextValue);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "rightBody"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/React.createElement("span", null, "\u5DF2\u9009", value ? value.length : 0, "\u5217"), /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    onClick: handleClear
+  }, "\u6E05\u7A7A")), /*#__PURE__*/React.createElement("div", {
+    className: "list"
+  }, /*#__PURE__*/React.createElement(DndContext, {
+    onDragEnd: onDragEnd
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: value.map(function (i) {
+      return i.value;
+    }),
+    strategy: verticalListSortingStrategy
+  }, value === null || value === void 0 ? void 0 : value.map(function (item) {
+    return /*#__PURE__*/React.createElement(SortableItem, {
+      key: "item-".concat(item.value),
+      "data-row-key": item.value,
+      label: item.label,
+      item: item,
+      onClose: function onClose() {
+        return _onClose2(item.value);
+      }
+    });
+  })))));
+};
+export default RightBody;

package/es/old/ProCustomColumn/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { InnerModalPropsType, ProCustomColumnPropsType } from './propsType';
+declare const ProCustomColumn: FC<ProCustomColumnPropsType & InnerModalPropsType>;
+export default ProCustomColumn;

package/es/old/ProCustomColumn/index.js

@@ -0,0 +1,165 @@
+import "antd/es/modal/style";
+import _Modal from "antd/es/modal";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["defaultValue", "dataSource", "width", "title", "cancelText", "okText", "onConfirm", "onOk", "onCancel"];
+import React, { useEffect, useState } from 'react';
+import { ReactSVG } from 'react-svg';
+import LeftBody from './LeftBody';
+import RightBody from './RightBody';
+import customColumnSvg from '../../assets/customColumn.svg';
+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 = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    checkedItems = _useState4[0],
+    setCheckedItems = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    emptyCheckedItems = _useState6[0],
+    setEmptyCheckedItems = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    prevCheckedItems = _useState8[0],
+    setPrevCheckedItems = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    rightValue = _useState10[0],
+    setRightValue = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    prevRightValue = _useState12[0],
+    setPrevRightValue = _useState12[1];
+  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(_objectSpread({
+          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 = _toConsumableArray(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.createElement("div", {
+    className: "pro-custom-column"
+  }, /*#__PURE__*/React.createElement(_Button, {
+    className: "custom-column-btn",
+    icon: /*#__PURE__*/React.createElement(ReactSVG, {
+      className: "anticon",
+      wrapper: "span",
+      src: customColumnSvg
+    }),
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, "\u81EA\u5B9A\u4E49\u5217"), /*#__PURE__*/React.createElement(_Modal, _objectSpread({
+    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.createElement("div", {
+    className: "main"
+  }, /*#__PURE__*/React.createElement(LeftBody, {
+    dataSource: dataSource,
+    onChange: onLeftChange,
+    value: checkedItems,
+    rightValue: rightValue,
+    getRightValue: getRightValue
+  }), /*#__PURE__*/React.createElement(RightBody, {
+    onChange: onRightChange,
+    value: rightValue,
+    getRightValue: getRightValue
+  }))));
+};
+export default ProCustomColumn;

package/es/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/es/old/ProCustomColumn/propsType.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/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;
+    }
+  }
+}