@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/es/ProThemeTools/utils/index.js

@@ -51,4 +51,49 @@ export var getKebabCase = function getKebabCase(str) {
   }
 
   return temp;
+};
+/**
+ * 设置表格斑马纹
+ * @param stripe boolean
+ */
+export var setTableNoStripe = function setTableNoStripe(stripe) {
+  var proTables = document.querySelectorAll('.pro-table');
+  var antTables = document.querySelectorAll('.ant-table');
+  if (!proTables.length) {
+    return;
+  }
+  for (var i = 0; i < proTables.length; i++) {
+    var proTable = proTables[i];
+    if (stripe) {
+      proTable.classList.remove('pro-table-no-stripe');
+    } else {
+      proTable.classList.add('pro-table-no-stripe');
+    }
+  }
+  for (var _i = 0; _i < antTables.length; _i++) {
+    var antTable = antTables[_i];
+    if (stripe) {
+      antTable.classList.remove('pro-table-no-stripe');
+    } else {
+      antTable.classList.add('pro-table-no-stripe');
+    }
+  }
+};
+/**
+ * 设置表格边框
+ * @param border boolean
+ */
+export var setTableBorder = function setTableBorder(border) {
+  var proTables = document.querySelectorAll('.pro-table');
+  if (!proTables.length) {
+    return;
+  }
+  for (var i = 0; i < proTables.length; i++) {
+    var proTable = proTables[i];
+    if (border) {
+      proTable.classList.add('pro-table-bordered');
+    } else {
+      proTable.classList.remove('pro-table-bordered');
+    }
+  }
 };

package/es/ProTooltip/index.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import { ProTooltipPropsType } from './propsType';
 import './style/index.less';
-declare const ProTooltip: (props: ProTooltipPropsType) => React.JSX.Element;
+declare const ProTooltip: (props: ProTooltipPropsType) => JSX.Element;
 export default ProTooltip;

package/es/ProTooltip/index.js

@@ -1,18 +1,23 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "antd/es/tooltip/style";
 import _Tooltip from "antd/es/tooltip";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["text", "width", "line", "isResponsiveWidth", "className", "style"];
-import { useSize } from 'ahooks';
-import React, { useEffect, useRef, useState } from 'react';
+var _excluded = ["text", "mode", "width", "line", "isResponsiveWidth", "className", "style", "lineHeight"];
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSize, useSetState, useDebounce } from 'ahooks';
+import { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import './style/index.less';
 var ProTooltip = function ProTooltip(props) {
+  var _useSize;
   var ref = useRef();
   var childRef = useRef();
+  var contentWrapRef = useRef();
   var text = props.text,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'default' : _props$mode,
     _props$width = props.width,
     width = _props$width === void 0 ? '120px' : _props$width,
     _props$line = props.line,
@@ -23,71 +28,252 @@ var ProTooltip = function ProTooltip(props) {
     className = _props$className === void 0 ? '' : _props$className,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
+    _props$lineHeight = props.lineHeight,
+    lineHeight = _props$lineHeight === void 0 ? 22 : _props$lineHeight,
     restProps = _objectWithoutProperties(props, _excluded);
+  var _width = mode === 'auto' ? 'auto' : width;
   var content = text !== null && text !== void 0 ? text : '-';
   var isMultiLine = Number(line) > 1;
-  var _useState = useState(width),
-    _useState2 = _slicedToArray(_useState, 2),
-    localWidth = _useState2[0],
-    setLocalWidth = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShowToolTip = _useState4[0],
-    setIsShowToolTip = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    parentElement = _useState6[0],
-    setParentElement = _useState6[1];
+  var _useSetState = useSetState({
+      localWidth: _width,
+      isShowToolTip: true,
+      localElement: null,
+      parentElement: null,
+      specialProps: {
+        visibility: 'hidden'
+      },
+      visible: 'hidden'
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    _useSetState2$ = _useSetState2[0],
+    localWidth = _useSetState2$.localWidth,
+    isShowToolTip = _useSetState2$.isShowToolTip,
+    parentElement = _useSetState2$.parentElement,
+    localElement = _useSetState2$.localElement,
+    specialProps = _useSetState2$.specialProps,
+    visible = _useSetState2$.visible,
+    setState = _useSetState2[1];
   var size = useSize(parentElement);
+  var debouncedValue = useDebounce(size, {
+    wait: 16.7
+  });
+  var _ref = (_useSize = useSize(localElement)) !== null && _useSize !== void 0 ? _useSize : {},
+    _localSizeWidth = _ref.width;
+  var overlayStyle = mode === 'auto' ? {
+    maxWidth: _localSizeWidth
+  } : {};
   var multiStyle = isMultiLine ? {
     WebkitLineClamp: line
   } : {};
+  var AutoMixinSingle = function AutoMixinSingle() {
+    return isShowToolTip && line === 1 ? _jsx(_Tooltip, _objectSpread(_objectSpread({
+      title: text
+    }, restProps), {}, {
+      overlayStyle: overlayStyle,
+      children: _jsx("div", _objectSpread(_objectSpread({}, specialProps), {}, {
+        style: _objectSpread(_objectSpread({}, multiStyle), {}, {
+          width: localWidth,
+          visibility: visible
+        }),
+        ref: childRef,
+        children: _jsx("div", _objectSpread(_objectSpread({}, specialProps), {}, {
+          ref: contentWrapRef,
+          children: content
+        }))
+      }))
+    })) : _jsx("div", {
+      className: isMultiLine ? 'multiLine' : 'singleLine',
+      style: _objectSpread(_objectSpread({}, multiStyle), {}, {
+        width: localWidth
+      }),
+      ref: childRef,
+      children: _jsx("div", {
+        className: "single-content-box",
+        style: {
+          visibility: visible
+        },
+        ref: contentWrapRef,
+        children: content
+      })
+    });
+  };
+  var AutoMixinMulti = function AutoMixinMulti() {
+    return isShowToolTip && line > 1 ? _jsx(_Tooltip, _objectSpread(_objectSpread({
+      title: text
+    }, restProps), {}, {
+      overlayStyle: overlayStyle,
+      children: _jsx("div", _objectSpread(_objectSpread({}, specialProps), {}, {
+        style: _objectSpread(_objectSpread({}, multiStyle), {}, {
+          width: localWidth,
+          visibility: visible
+        }),
+        ref: childRef,
+        children: _jsx("div", _objectSpread(_objectSpread({}, specialProps), {}, {
+          ref: contentWrapRef,
+          children: content
+        }))
+      }))
+    })) : _jsx("div", {
+      className: "multiLine",
+      style: _objectSpread(_objectSpread({}, multiStyle), {}, {
+        width: localWidth
+      }),
+      ref: childRef,
+      children: _jsx("div", {
+        className: "multi-content-box",
+        style: {
+          visibility: visible
+        },
+        ref: contentWrapRef,
+        children: content
+      })
+    });
+  };
+  var AutoMixin = function AutoMixin() {
+    if (mode !== 'auto') {
+      return null;
+    }
+    return line > 1 ? _jsx(AutoMixinMulti, {}) : _jsx(AutoMixinSingle, {});
+  };
   useEffect(function () {
     if (isResponsiveWidth && parentElement) {
       var cWidth = parentElement.clientWidth - 32;
       var contentDom = childRef.current;
-      setIsShowToolTip(contentDom.scrollWidth > contentDom.offsetWidth);
-      setLocalWidth(cWidth);
+      setState({
+        isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth,
+        localWidth: cWidth
+      });
+    }
+    if (!isResponsiveWidth) {
+      setState({
+        localWidth: _width
+      });
     }
-    !isResponsiveWidth && setLocalWidth(width);
   }, [isResponsiveWidth, size]);
+  useEffect(function () {
+    if (mode === 'auto' && line === 1) {
+      var localDom = ref.current;
+      setState({
+        localElement: localDom,
+        parentElement: localDom.parentElement,
+        specialProps: {
+          visibility: 'hidden'
+        },
+        visible: 'hidden'
+      });
+      var contentWrapDom = childRef.current;
+      var contentDom = contentWrapRef.current;
+      if (contentWrapDom && contentDom) {
+        if ((contentWrapDom === null || contentWrapDom === void 0 ? void 0 : contentWrapDom.offsetWidth) && (contentDom === null || contentDom === void 0 ? void 0 : contentDom.scrollWidth)) {
+          setState({
+            isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth,
+            specialProps: {
+              className: 'singleLine',
+              style: {
+                display: 'inline-block',
+                maxWidth: '100%',
+                visibility: 'visible'
+              }
+            },
+            visible: 'visible'
+          });
+        }
+      }
+    }
+  }, [mode, debouncedValue]);
+  useEffect(function () {
+    if (mode === 'auto' && line > 1 && JSON.stringify(specialProps) === '{}') {
+      var localDom = ref.current;
+      setState({
+        localElement: localDom,
+        parentElement: localDom.parentElement,
+        specialProps: {}
+      });
+      var contentWrapDom = childRef.current;
+      var contentDom = contentWrapRef.current;
+      if (contentWrapDom && contentDom) {
+        if (contentWrapDom === null || contentWrapDom === void 0 ? void 0 : contentWrapDom.scrollHeight) {
+          setState({
+            isShowToolTip: (contentWrapDom === null || contentWrapDom === void 0 ? void 0 : contentWrapDom.scrollHeight) > lineHeight * Number(line),
+            specialProps: {
+              className: 'multiLine',
+              style: _objectSpread({
+                maxWidth: '100%',
+                visibility: 'visible'
+              }, multiStyle)
+            },
+            visible: 'visible'
+          });
+        }
+      }
+    }
+  }, [mode, debouncedValue, specialProps]);
+  useEffect(function () {
+    if (mode === 'auto' && line === 1) {
+      setState({
+        specialProps: {
+          visibility: 'hidden'
+        },
+        visible: 'hidden'
+      });
+    }
+  }, [size]);
+  useEffect(function () {
+    if (mode === 'auto' && line > 1) {
+      if (JSON.stringify(specialProps) !== '{}') {
+        setState({
+          specialProps: {}
+        });
+      }
+    }
+  }, [debouncedValue]);
   useEffect(function () {
     var localDom = ref.current;
-    setParentElement(localDom.parentElement);
     var contentDom = childRef.current;
-    setIsShowToolTip(contentDom.scrollWidth > contentDom.offsetWidth);
+    setState({
+      parentElement: localDom.parentElement,
+      isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth
+    });
   }, []);
   var cls = classnames(_defineProperty({
     'pro-tooltip': true
   }, "".concat(className), className));
-  return /*#__PURE__*/React.createElement("div", {
+  return _jsx("div", {
     className: cls,
     ref: ref,
     style: _objectSpread(_objectSpread(_objectSpread({}, style), multiStyle), {}, {
       width: localWidth
-    })
-  }, isResponsiveWidth && isShowToolTip ? /*#__PURE__*/React.createElement(_Tooltip, _objectSpread({
-    title: text
-  }, restProps), /*#__PURE__*/React.createElement("div", {
-    className: isMultiLine ? 'multiLine' : 'singleLine',
-    style: _objectSpread(_objectSpread({}, multiStyle), {}, {
-      width: localWidth
-    }),
-    ref: childRef
-  }, content)) : isResponsiveWidth ? /*#__PURE__*/React.createElement("div", {
-    className: isMultiLine ? 'multiLine' : 'singleLine',
-    style: _objectSpread(_objectSpread({}, multiStyle), {}, {
-      width: localWidth
-    }),
-    ref: childRef
-  }, content) : /*#__PURE__*/React.createElement(_Tooltip, _objectSpread({
-    title: text
-  }, restProps), /*#__PURE__*/React.createElement("div", {
-    className: isMultiLine ? 'multiLine' : 'singleLine',
-    style: _objectSpread(_objectSpread({}, multiStyle), {}, {
-      width: localWidth
     }),
-    ref: childRef
-  }, content)));
+    children: isResponsiveWidth && isShowToolTip ? _jsx(_Tooltip, _objectSpread(_objectSpread({
+      title: text
+    }, restProps), {}, {
+      children: _jsx("div", {
+        className: isMultiLine ? 'multiLine' : 'singleLine',
+        style: _objectSpread(_objectSpread({}, multiStyle), {}, {
+          width: localWidth
+        }),
+        ref: childRef,
+        children: content
+      })
+    })) : isResponsiveWidth ? _jsx("div", {
+      className: isMultiLine ? 'multiLine' : 'singleLine',
+      style: _objectSpread(_objectSpread({}, multiStyle), {}, {
+        width: localWidth
+      }),
+      ref: childRef,
+      children: content
+    }) : mode === 'default' ? _jsx(_Tooltip, _objectSpread(_objectSpread({
+      title: text
+    }, restProps), {}, {
+      children: _jsx("div", {
+        className: isMultiLine ? 'multiLine' : 'singleLine',
+        style: _objectSpread(_objectSpread({}, multiStyle), {}, {
+          width: localWidth
+        }),
+        ref: childRef,
+        children: content
+      })
+    })) : _jsx(AutoMixin, {})
+  });
 };
 export default ProTooltip;

package/es/ProTooltip/propsType.d.ts

@@ -5,8 +5,11 @@ export interface ProTooltipPropsType {
     line?: number;
     isResponsiveWidth?: Boolean;
     className?: string;
+    children?: React.ReactNode;
     /** 样式 */
     style?: React.CSSProperties;
+    /** 兼容 */
+    [key: string]: any;
 }
 export interface RefObjectPropsType<T> {
     readonly current: T | null;

package/es/ProTooltip/style/index.less

@@ -2,21 +2,32 @@
   cursor: pointer;
 
   .singleLine {
-    overflow     : hidden;
-    white-space  : nowrap;
+    height: 16px;
+    overflow: hidden;
+    line-height: 16px;
+    white-space: nowrap;
     text-overflow: ellipsis;
+    transition: all 0.1s ease-in-out;
+    > .single-content-box {
+      display: 'inline-block';
+      max-width: '100%';
+      height: '100%';
+    }
 
-    &>* {
-      overflow     : hidden;
-      white-space  : nowrap;
+    & > * {
+      overflow: hidden;
+      white-space: nowrap;
       text-overflow: ellipsis;
     }
   }
 
   .multiLine {
-    display           : -webkit-box;
-    overflow          : hidden;
+    display: -webkit-box;
+    overflow: hidden;
     -webkit-box-orient: vertical;
+    > .multi-content-box {
+      max-width: '100%';
+      height: '100%';
+    }
   }
-
 }

package/es/ProTree/components/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function CloseIcon(props: any): JSX.Element;
+export default CloseIcon;

package/es/ProTree/components/CloseIcon.js

@@ -0,0 +1,30 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { jsx as _jsx } from "react/jsx-runtime";
+function CloseIcon(props) {
+  return _jsx("span", _objectSpread(_objectSpread({
+    className: "ant-input-suffix"
+  }, props), {}, {
+    children: _jsx("span", {
+      className: "ant-input-clear-icon pro-tree-modal-checkbox-close",
+      role: "button",
+      children: _jsx("span", {
+        role: "img",
+        "aria-label": "close-circle",
+        className: "anticon anticon-close-circle",
+        children: _jsx("svg", {
+          viewBox: "64 64 896 896",
+          focusable: "false",
+          "data-icon": "close-circle",
+          width: "1em",
+          height: "1em",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: _jsx("path", {
+            d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          })
+        })
+      })
+    })
+  }));
+}
+export default CloseIcon;

package/es/ProTree/components/List.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { FieldNamesType } from '../propsType';
+interface ListProps {
+    disabled?: boolean;
+    checkedValues?: any[];
+    treeData: any[];
+    searchStr?: string;
+    showCodeName?: boolean;
+    fieldNames: FieldNamesType;
+    mode?: 'render' | 'view';
+    handleOnChange?: (e: any, value: string) => void;
+    handleFilterClose?: (code: string) => void;
+    optionRender?: (item: any, searchStr?: string) => string | ReactNode;
+}
+declare function List(props: ListProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof List>;
+export default _default;

package/es/ProTree/components/List.js

@@ -0,0 +1,68 @@
+import "antd/es/checkbox/style";
+import _Checkbox from "antd/es/checkbox";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import SearchTitle from './SearchTitle';
+import CloseIcon from './CloseIcon';
+function List(props) {
+  var checkedValues = props.checkedValues,
+    disabled = props.disabled,
+    treeData = props.treeData,
+    searchStr = props.searchStr,
+    showCodeName = props.showCodeName,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'render' : _props$mode,
+    fieldNames = props.fieldNames,
+    handleOnChange = props.handleOnChange,
+    handleFilterClose = props.handleFilterClose,
+    optionRender = props.optionRender;
+  var fieldNameLabel = fieldNames.label;
+  var fieldNameValue = fieldNames.value;
+  if (mode === 'render') {
+    return _jsx(_Fragment, {
+      children: _jsx(_Checkbox.Group, {
+        disabled: disabled,
+        style: {
+          width: '100%'
+        },
+        value: checkedValues,
+        children: treeData.map(function (item) {
+          var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(item[fieldNameLabel]) : item[fieldNameLabel];
+          return _jsx("div", {
+            className: "pro-tree-checkbox-content",
+            children: _jsx(_Checkbox, {
+              onChange: function onChange(e) {
+                return handleOnChange(e, item[fieldNameValue]);
+              },
+              value: item[fieldNameValue],
+              disabled: item.disabled,
+              children: _jsx("span", {
+                children: optionRender ? optionRender(item, searchStr) : _jsx(SearchTitle, {
+                  label: title,
+                  searchStr: searchStr
+                })
+              })
+            })
+          }, item[fieldNameValue]);
+        })
+      })
+    });
+  }
+  return _jsx(_Fragment, {
+    children: treeData.map(function (item) {
+      var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(item[fieldNameLabel]) : item[fieldNameLabel];
+      return _jsxs("div", {
+        className: "pro-tree-checkbox-content",
+        children: [_jsx("div", {
+          className: "pro-tree-checkbox-content-look",
+          children: optionRender ? optionRender(item, searchStr) : title
+        }), disabled ? null : _jsx(CloseIcon, {
+          onClick: function onClick() {
+            return handleFilterClose(item[fieldNameValue]);
+          }
+        })]
+      }, item[fieldNames.value]);
+    })
+  });
+}
+export default /*#__PURE__*/memo(List);

package/es/ProTree/components/ProTree.d.ts

@@ -0,0 +1,4 @@
+import { ProTreeProps } from '../propsType';
+import '../style/index.less';
+declare const ProTree: (props: ProTreeProps) => JSX.Element;
+export default ProTree;