@zat-design/sisyphus-react 4.5.9 → 4.5.10-beta.2

package/es/ProTreeModal/components/List.js

@@ -1,15 +1,14 @@
-/* eslint-disable brace-style */
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
-import { Checkbox, Col, Row } from 'antd';
-import { DndContext } from '@dnd-kit/core';
-import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useDeepCompareEffect, useSetState, useVirtualList } from 'ahooks';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { Checkbox, Col, Row } from "antd";
+import { DndContext } from "@dnd-kit/core";
+import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useDeepCompareEffect, useSetState, useVirtualList } from "ahooks";
 import SearchTitle from "./SearchTitle";
 import CloseIcon from "./CloseIcon";
 import SortableItem from "./SortableItem";
-import { CASCADER } from '..';
+import { CASCADER } from "..";
 import { isEmpty } from "../../utils";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function List(props, ref) {
   const {
     checkedValues,
@@ -18,7 +17,7 @@ function List(props, ref) {
     searchStr,
     showCodeName,
     span,
-    mode = 'render',
+    mode = "render",
     fieldNames,
     draggable,
     modeType,
@@ -33,52 +32,41 @@ function List(props, ref) {
   const fieldNameLabel = fieldNames.label;
   const fieldNameValue = fieldNames.value;
   const isCASCADER = modeType === CASCADER;
-  const [{
-    checkedList
-  }, setState] = useSetState({
+  const [{ checkedList }, setState] = useSetState({
     checkedList: []
   });
   useImperativeHandle(ref, () => ({
-    onChange: () => checkedList.map(item => item[fieldNameValue])
+    onChange: () => checkedList.map((item) => item[fieldNameValue])
   }));
   useDeepCompareEffect(() => {
     setState({
       checkedList: treeData
     });
   }, [treeData]);
-  const {
-    min,
-    max
-  } = useMemo(() => {
-    let min = -1;
-    let max = checkedList?.length || 0;
+  const { min, max } = useMemo(() => {
+    let min2 = -1;
+    let max2 = (checkedList == null ? void 0 : checkedList.length) || 0;
     let minFlag = false;
     let maxFlag = false;
-    checkedList?.forEach((item, index) => {
+    checkedList == null ? void 0 : checkedList.forEach((item, index) => {
       if (item.disabled && !minFlag) {
-        min = index;
+        min2 = index;
       } else {
         minFlag = true;
       }
       if (!item.disabled && !maxFlag) {
         maxFlag = true;
       } else if (maxFlag && item.disabled) {
-        max = index;
+        max2 = index;
         maxFlag = false;
       }
     });
-    return {
-      min,
-      max
-    };
+    return { min: min2, max: max2 };
   }, [checkedList]);
-  const handleDragEnd = ({
-    active,
-    over
-  }) => {
-    if (active.id !== over?.id) {
-      const activeIndex = checkedList.findIndex(item => item?.[fieldNameValue] === active.id);
-      const overIndex = checkedList.findIndex(item => item?.[fieldNameValue] === over?.id);
+  const handleDragEnd = ({ active, over }) => {
+    if (active.id !== (over == null ? void 0 : over.id)) {
+      const activeIndex = checkedList.findIndex((item) => (item == null ? void 0 : item[fieldNameValue]) === active.id);
+      const overIndex = checkedList.findIndex((item) => (item == null ? void 0 : item[fieldNameValue]) === (over == null ? void 0 : over.id));
       if (overIndex <= min || overIndex >= max) {
         return;
       }
@@ -86,37 +74,35 @@ function List(props, ref) {
       setState({
         checkedList: newCheckedList
       });
-      handleDragEndChange?.(newCheckedList.map(item => item[fieldNameValue]));
+      handleDragEndChange == null ? void 0 : handleDragEndChange(newCheckedList.map((item) => item[fieldNameValue]));
     }
   };
   function getLineHeight(string, width) {
     if (isEmpty(string)) {
       return 0;
     }
-    // 创建临时元素
-    const temp = document.createElement('div');
-    temp.style.position = 'absolute';
-    temp.style.visibility = 'hidden';
-    temp.style.right = '-10000px';
-    temp.style.width = `${width}px`; // 设置宽度
-    temp.style.whiteSpace = 'normal'; // 保持换行
-    temp.innerHTML = string.replace(/\n/g, '<br>'); // 替换换行符
-    document.body.appendChild(temp); // 添加到DOM中以获取计算后的高度
-    // 清理
+    const temp = document.createElement("div");
+    temp.style.position = "absolute";
+    temp.style.visibility = "hidden";
+    temp.style.right = "-10000px";
+    temp.style.width = `${width}px`;
+    temp.style.whiteSpace = "normal";
+    temp.innerHTML = string.replace(/\n/g, "<br>");
+    document.body.appendChild(temp);
     const len = Math.floor(temp.getBoundingClientRect().height / 20);
     document.body.removeChild(temp);
     return len * 20;
   }
-  const handleCommonTitle = item => {
+  const handleCommonTitle = (item) => {
     if (isCASCADER) {
-      return item?.title;
+      return item == null ? void 0 : item.title;
     }
     return item[fieldNameLabel];
   };
-  const handleGetTitle = item => {
+  const handleGetTitle = (item) => {
     if (showCodeName) {
       if (isCASCADER) {
-        if (item[fieldNameValue] && item?.title) {
+        if (item[fieldNameValue] && (item == null ? void 0 : item.title)) {
           return `${item[fieldNameValue]}-${item.title}`;
         }
         return handleCommonTitle(item);
@@ -136,145 +122,93 @@ function List(props, ref) {
       return Math.floor(getLineHeight(title, 406)) + 12;
     }
   });
-
-  // 是否为多列模式
-  const isRowCols = mode === 'render' && span && span !== 24;
-
-  // 开启 draggable 拖拽模式
+  const isRowCols = mode === "render" && span && span !== 24;
   if (draggable) {
-    return /*#__PURE__*/_jsx("div", {
-      className: "checked-container",
-      children: /*#__PURE__*/_jsx(DndContext, {
-        onDragEnd: handleDragEnd,
-        children: /*#__PURE__*/_jsx(SortableContext, {
-          items: checkedList?.map(item => item?.[fieldNameValue]),
-          strategy: verticalListSortingStrategy,
-          children: checkedList?.map((item, index) => /*#__PURE__*/_jsx(SortableItem, {
-            index: index,
-            "data-row-key": item?.[fieldNameValue],
-            label: item?.[fieldNameLabel],
-            item: item,
+    return /* @__PURE__ */ jsx("div", { className: "checked-container", children: /* @__PURE__ */ jsx(DndContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(
+      SortableContext,
+      {
+        items: checkedList == null ? void 0 : checkedList.map((item) => item == null ? void 0 : item[fieldNameValue]),
+        strategy: verticalListSortingStrategy,
+        children: checkedList == null ? void 0 : checkedList.map((item, index) => /* @__PURE__ */ jsx(
+          SortableItem,
+          {
+            index,
+            "data-row-key": item == null ? void 0 : item[fieldNameValue],
+            label: item == null ? void 0 : item[fieldNameLabel],
+            item,
             drag: draggable,
-            disabled: disabled,
+            disabled,
             onClose: () => handleFilterClose(item[fieldNameValue])
-          }, `item-${item?.[fieldNameValue]}`))
-        })
-      })
-    });
+          },
+          `item-${item == null ? void 0 : item[fieldNameValue]}`
+        ))
+      }
+    ) }) });
   }
-
-  // 编辑状态
-  if (!isRowCols && mode === 'render') {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(Checkbox.Group, {
-        disabled: disabled,
-        style: {
-          width: '100%'
+  if (!isRowCols && mode === "render") {
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Checkbox.Group, { disabled, style: { width: "100%" }, value: checkedValues, children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "432px", overflow: "auto", width: "100%" }, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, children: /* @__PURE__ */ jsx(Row, { children: list.map((_item) => {
+      const item = _item.data;
+      const title = handleGetTitle(item);
+      const content = optionRender ? optionRender(item, searchStr) : /* @__PURE__ */ jsx(SearchTitle, { label: title, searchStr });
+      return /* @__PURE__ */ jsx(
+        Col,
+        {
+          span: span || 24,
+          className: !span || span === 24 ? "pro-tree-modal-checkbox-content" : "",
+          style: { marginBottom: span ? 16 : 12 },
+          children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              onChange: (e) => handleOnChange == null ? void 0 : handleOnChange(e, item[fieldNameValue]),
+              value: item[fieldNameValue],
+              disabled: item.disabled,
+              children: content
+            }
+          )
         },
-        value: checkedValues,
-        children: /*#__PURE__*/_jsx("div", {
-          ref: containerRef,
-          style: {
-            height: '432px',
-            overflow: 'auto',
-            width: '100%'
-          },
-          children: /*#__PURE__*/_jsx("div", {
-            ref: wrapperRef,
-            children: /*#__PURE__*/_jsx(Row, {
-              children: list.map(_item => {
-                const item = _item.data;
-                const title = handleGetTitle(item);
-                const content = optionRender ? optionRender(item, searchStr) : /*#__PURE__*/_jsx(SearchTitle, {
-                  label: title,
-                  searchStr: searchStr
-                });
-                return /*#__PURE__*/_jsx(Col, {
-                  span: span || 24,
-                  className: !span || span === 24 ? 'pro-tree-modal-checkbox-content' : '',
-                  style: {
-                    marginBottom: span ? 16 : 12
-                  },
-                  children: /*#__PURE__*/_jsx(Checkbox, {
-                    onChange: e => handleOnChange?.(e, item[fieldNameValue]),
-                    value: item[fieldNameValue],
-                    disabled: item.disabled,
-                    children: content
-                  })
-                }, item[fieldNameValue]);
-              })
-            })
-          })
-        })
-      })
-    });
+        item[fieldNameValue]
+      );
+    }) }) }) }) }) });
   }
-
-  // 编辑状态
   if (isRowCols) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(Checkbox.Group, {
-        disabled: disabled,
-        style: {
-          width: '100%'
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Checkbox.Group, { disabled, style: { width: "100%" }, value: checkedValues, children: /* @__PURE__ */ jsx(Row, { children: treeData.map((item) => {
+      const title = handleGetTitle(item);
+      const content = optionRender ? optionRender(item, searchStr) : /* @__PURE__ */ jsx(SearchTitle, { label: title, searchStr });
+      return /* @__PURE__ */ jsx(
+        Col,
+        {
+          span: span || 24,
+          className: !span || span === 24 ? "pro-tree-modal-checkbox-content" : "",
+          style: { marginBottom: span ? 16 : 12 },
+          children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              onChange: (e) => handleOnChange(e, item[fieldNameValue]),
+              value: item[fieldNameValue],
+              disabled: item.disabled,
+              children: content
+            }
+          )
         },
-        value: checkedValues,
-        children: /*#__PURE__*/_jsx(Row, {
-          children: treeData.map(item => {
-            const title = handleGetTitle(item);
-            const content = optionRender ? optionRender(item, searchStr) : /*#__PURE__*/_jsx(SearchTitle, {
-              label: title,
-              searchStr: searchStr
-            });
-            return /*#__PURE__*/_jsx(Col, {
-              span: span || 24,
-              className: !span || span === 24 ? 'pro-tree-modal-checkbox-content' : '',
-              style: {
-                marginBottom: span ? 16 : 12
-              },
-              children: /*#__PURE__*/_jsx(Checkbox, {
-                onChange: e => handleOnChange(e, item[fieldNameValue]),
-                value: item[fieldNameValue],
-                disabled: item.disabled,
-                children: content
-              })
-            }, item[fieldNameValue]);
-          })
-        })
-      })
-    });
+        item[fieldNameValue]
+      );
+    }) }) }) });
   }
-
-  // 预览状态
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx("div", {
-      ref: containerRef,
-      style: {
-        height: '432px',
-        overflow: 'auto'
-      },
-      children: /*#__PURE__*/_jsx("div", {
-        ref: wrapperRef,
-        children: list.map(_item => {
-          const item = _item.data;
-          let title = item[fieldNameLabel];
-          if (showCodeName) {
-            if (item[fieldNameValue] && item[fieldNameLabel]) {
-              title = `${item[fieldNameValue]}-${item[fieldNameLabel]}`;
-            }
-          }
-          return /*#__PURE__*/_jsxs("div", {
-            className: "pro-tree-modal-checkbox-content",
-            children: [/*#__PURE__*/_jsx("div", {
-              className: "pro-tree-modal-checkbox-content-look",
-              children: optionRender ? optionRender(item, searchStr) : title
-            }), disabled || item.disabled ? null : /*#__PURE__*/_jsx(CloseIcon, {
-              onClick: () => handleFilterClose(item[fieldNameValue])
-            })]
-          }, item[fieldNames.value]);
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "432px", overflow: "auto" }, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, children: list.map((_item) => {
+    const item = _item.data;
+    let title = item[fieldNameLabel];
+    if (showCodeName) {
+      if (item[fieldNameValue] && item[fieldNameLabel]) {
+        title = `${item[fieldNameValue]}-${item[fieldNameLabel]}`;
+      }
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "pro-tree-modal-checkbox-content", children: [
+      /* @__PURE__ */ jsx("div", { className: "pro-tree-modal-checkbox-content-look", children: optionRender ? optionRender(item, searchStr) : title }),
+      disabled || item.disabled ? null : /* @__PURE__ */ jsx(CloseIcon, { onClick: () => handleFilterClose(item[fieldNameValue]) })
+    ] }, item[fieldNames.value]);
+  }) }) }) });
 }
-export default /*#__PURE__*/forwardRef(List);
+var List_default = forwardRef(List);
+export {
+  List_default as default
+};

package/es/ProTreeModal/components/SearchTitle.js

@@ -1,22 +1,19 @@
-import { memo } from 'react';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
 function SearchTitle(props) {
-  const {
-    label,
-    searchStr = ''
-  } = props;
+  const { label, searchStr = "" } = props;
   const strTitle = label;
-  const index = strTitle?.indexOf(searchStr);
-  const beforeStr = strTitle?.substring(0, index);
-  const afterStr = strTitle?.slice(index + searchStr.length);
-  const title = index > -1 ? /*#__PURE__*/_jsxs("span", {
-    children: [beforeStr, searchStr ? /*#__PURE__*/_jsx("span", {
-      className: "pro-tree-modal-search-value",
-      children: searchStr
-    }) : null, afterStr]
-  }) : /*#__PURE__*/_jsx("span", {
-    children: strTitle
-  });
+  const index = strTitle == null ? void 0 : strTitle.indexOf(searchStr);
+  const beforeStr = strTitle == null ? void 0 : strTitle.substring(0, index);
+  const afterStr = strTitle == null ? void 0 : strTitle.slice(index + searchStr.length);
+  const title = index > -1 ? /* @__PURE__ */ jsxs("span", { children: [
+    beforeStr,
+    searchStr ? /* @__PURE__ */ jsx("span", { className: "pro-tree-modal-search-value", children: searchStr }) : null,
+    afterStr
+  ] }) : /* @__PURE__ */ jsx("span", { children: strTitle });
   return title;
 }
-export default /*#__PURE__*/memo(SearchTitle);
+var SearchTitle_default = memo(SearchTitle);
+export {
+  SearchTitle_default as default
+};

package/es/ProTreeModal/components/SortableItem.js

@@ -1,74 +1,45 @@
-import React from 'react';
-import { Tag } from 'antd';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import classNames from 'classnames';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tag } from "antd";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import classNames from "classnames";
 import ProIcon from "../../ProIcon";
 import { ProTooltip } from "../../index";
 import disabledSvg from "../../assets/disabled.svg";
 import dragSvg from "../../assets/drag.svg";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SortableItem = props => {
-  const {
-    drag,
-    label,
-    item,
-    onClose,
-    disabled,
-    index
-  } = props;
+const SortableItem = (props) => {
+  const { drag, label, item, onClose, disabled, index } = props;
   const data = useSortable({
-    id: props['data-row-key'],
+    id: props["data-row-key"],
     disabled: item.disabled
   });
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = data;
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = data;
   const style = {
     ...props.style,
-    transform: CSS.Transform.toString(transform && {
-      ...transform,
-      scaleY: 1
-    }),
+    transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
     transition,
-    ...(isDragging ? {
-      position: 'relative',
-      zIndex: 9999
-    } : {})
+    ...isDragging ? { position: "relative", zIndex: 9999 } : {}
   };
   const isItemDisabled = item.disabled || disabled;
-  const classNamesValue = classNames('checked-item', `checked-item-${index}`, {
+  const classNamesValue = classNames("checked-item", `checked-item-${index}`, {
     disabled: isItemDisabled,
     dragable: drag
   });
-  return /*#__PURE__*/_jsx("li", {
-    ref: isItemDisabled ? null : setNodeRef,
-    style: style,
-    className: classNamesValue,
-    ...(isItemDisabled ? {} : attributes),
-    children: /*#__PURE__*/_jsxs(Tag, {
-      closable: !isItemDisabled,
-      onClose: e => onClose(e),
-      children: [drag ? isItemDisabled ? /*#__PURE__*/_jsx(ProIcon, {
-        className: "disabled-icon",
-        component: disabledSvg,
-        size: 16
-      }) : /*#__PURE__*/_jsx(ProIcon, {
-        component: dragSvg,
-        size: 20,
-        color: "#949599",
-        ...listeners
-      }) : null, /*#__PURE__*/_jsx(ProTooltip, {
-        mode: "auto",
-        line: 1,
-        text: label
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref: isItemDisabled ? null : setNodeRef,
+      style,
+      className: classNamesValue,
+      ...isItemDisabled ? {} : attributes,
+      children: /* @__PURE__ */ jsxs(Tag, { closable: !isItemDisabled, onClose: (e) => onClose(e), children: [
+        drag ? isItemDisabled ? /* @__PURE__ */ jsx(ProIcon, { className: "disabled-icon", component: disabledSvg, size: 16 }) : /* @__PURE__ */ jsx(ProIcon, { component: dragSvg, size: 20, color: "#949599", ...listeners }) : null,
+        /* @__PURE__ */ jsx(ProTooltip, { mode: "auto", line: 1, text: label })
+      ] })
+    }
+  );
+};
+var SortableItem_default = SortableItem;
+export {
+  SortableItem_default as default
 };
-export default SortableItem;