@para-ui/core 3.0.55 → 3.0.56

package/ToggleButton/index.js

@@ -0,0 +1,193 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { Button } from '../Button/index.js';
+import { UUID } from '@paraview/lib';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import AutoTips from '../AutoTips/index.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/typeof-498dd2b1.js';
+import '../_verture/slicedToArray-76060636.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '@para-ui/icons/LoadingF';
+import '@para-ui/icons/Forbid';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Down';
+import '../_verture/index-77f9e0fb.js';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-87febeb9.js';
+import 'dayjs';
+import '../_verture/useFormatMessage-703f8b20.js';
+import '@para-ui/core/GlobalContext';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/23 上午9:50\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-toggle-button.paraui-v3-button {\n  height: 30px;\n  padding: 0 20px;\n  color: rgb(46, 55, 67);\n  line-height: 30px;\n}\n.paraui-v3-toggle-button.paraui-v3-button:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button-wrap {\n  display: inline-block;\n}\n.paraui-v3-toggle-button .toggle-button-text {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected:hover {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled]::before {\n  border-color: rgba(46, 55, 67, 0.4);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected::before {\n  content: \" \";\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border: 10px solid rgb(54, 102, 214);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected::after {\n  content: \" \";\n  position: absolute;\n  bottom: 2px;\n  right: 3px;\n  width: 4px;\n  height: 8px;\n  border: 2px solid rgb(255, 255, 255);\n  border-top: 0;\n  border-left: 0;\n  border-radius: 2px;\n  transform: rotate(45deg);\n}\n.paraui-v3-toggle-button-disabled.paraui-v3-toggle-button {\n  color: rgba(46, 55, 67, 0.4);\n  pointer-events: auto;\n  cursor: not-allowed;\n}\n.paraui-v3-toggle-button-disabled.paraui-v3-toggle-button:hover {\n  color: rgba(46, 55, 67, 0.4);\n}\n\n.paraui-v3-togglebutton-group {\n  display: flex;\n  flex-flow: row wrap;\n}\n.paraui-v3-togglebutton-group .paraui-v3-toggle-button {\n  margin: 0 10px;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button {\n  margin: 0;\n  padding: 0 16px;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button:hover {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button ~ .paraui-v3-toggle-button::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected {\n  color: rgb(54, 102, 214);\n  border: 0;\n  font-weight: 700;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:first-child:before {\n  display: none;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:not(:first-child)::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.4);\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected::after {\n  display: none;\n}";
+styleInject(css_248z);
+
+//切换按钮组
+var ToggleButtonGroup = function ToggleButtonGroup(props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'outlined' : _props$type,
+    className = props.className,
+    style = props.style,
+    _props$exclusive = props.exclusive,
+    exclusive = _props$exclusive === void 0 ? false : _props$exclusive,
+    _props$toggleable = props.toggleable,
+    toggleable = _props$toggleable === void 0 ? true : _props$toggleable,
+    data = props.data,
+    value = props.value,
+    onChange = props.onChange;
+  if (type === 'text' && !('exclusive' in props)) {
+    exclusive = true;
+  }
+  var makeCls = clsx("".concat($prefixCls, "-togglebutton-group"), className, _defineProperty({}, "".concat($prefixCls, "-togglebutton-group-text"), type === 'text'));
+  //多选
+  var handleChange = function handleChange(evt, buttonValue) {
+    if (!onChange) return;
+    var index = value && (value === null || value === void 0 ? void 0 : value.indexOf(buttonValue));
+    var newValue;
+    if (value && index >= 0) {
+      newValue = value.slice();
+      newValue.splice(index, 1);
+    } else {
+      newValue = value ? value.concat(buttonValue) : [buttonValue];
+    }
+    onChange(evt, newValue);
+  };
+  //单选
+  var handleExclusiveChange = function handleExclusiveChange(evt, buttonValue) {
+    if (!onChange) return;
+    if (!toggleable) {
+      if (value === buttonValue) return;
+      onChange(evt, buttonValue);
+      return;
+    }
+    onChange(evt, value === buttonValue ? null : buttonValue);
+  };
+  //是否选中
+  var hasValueSelected = function hasValueSelected(value, candidate) {
+    if (candidate === undefined || value === undefined) return false;
+    if (Array.isArray(candidate)) {
+      return candidate.includes(value);
+    }
+    return value === candidate;
+  };
+  //渲染组
+  var renderGroup = function renderGroup() {
+    if (!data || !(data === null || data === void 0 ? void 0 : data.length)) return null;
+    return data.map(function (item, idx) {
+      var label = item.label,
+        selected = item.selected,
+        rest = __rest(item, ["label", "selected"]);
+      var hasSelected = selected === undefined ? hasValueSelected(rest.value, value) : selected;
+      return jsx(ToggleButton, Object.assign({}, rest, {
+        style: style,
+        selected: hasSelected,
+        autoToolTipOverflow: type !== 'text',
+        variant: type === 'text' ? 'text' : 'outlined',
+        onClick: exclusive ? handleExclusiveChange : handleChange
+      }, {
+        children: label
+      }), idx);
+    });
+  };
+  return jsx("div", Object.assign({
+    className: makeCls
+  }, {
+    children: renderGroup()
+  }));
+};
+
+//切换按钮
+var ToggleButton = function ToggleButton(props) {
+  var _clsx;
+  var className = props.className,
+    style = props.style,
+    children = props.children,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$selected = props.selected,
+    selected = _props$selected === void 0 ? false : _props$selected,
+    value = props.value;
+    props.autoToolTipOverflow;
+    var _props$width = props.width,
+    width = _props$width === void 0 ? 120 : _props$width,
+    onClick = props.onClick,
+    restProps = __rest(props, ["className", "style", "children", "disabled", "selected", "value", "autoToolTipOverflow", "width", "onClick"]);
+  // const [hasTip, setHasTip] = useState<boolean>(false);
+  var id = useRef(UUID()).current;
+  var prefixCls = "".concat($prefixCls, "-toggle-button");
+  //className
+  var makeCls = clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-selected"), selected), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _clsx));
+  //点击事件
+  var handleClick = function handleClick(evt) {
+    if (onClick) onClick(evt, value);
+  };
+  // useLayoutEffect(() => {
+  //     if (!autoToolTipOverflow) return;
+  //     let btn: HTMLButtonElement | null = document.querySelector(`[data-id="${id}"]`);
+  //     if (!btn) return;
+  //     let span: any = document.createElement('span');
+  //     span.textContent = children;
+  //     document.body.appendChild(span);
+  //     if (span.offsetWidth > (btn.offsetWidth - 16 * 2)) {
+  //         setHasTip(true);
+  //     }
+  //     span?.remove();
+  // }, []);
+  //渲染
+  // const renderToggleButton = () => {
+  //     let btn = (
+  //         <Button
+  //             data-id={id}
+  //             variant={'outlined'}
+  //             size={'medium'}
+  //             {...restProps}
+  //             style={{ width, ...style }}
+  //             className={makeCls}
+  //             disabled={disabled}
+  //             value={value}
+  //             onClick={handleClick}>
+  //             <span className={'toggle-button-text'}>
+  //                 {children}
+  //             </span>
+  //         </Button>
+  //     );
+  //     if (hasTip) {
+  //         return (
+  //             <Tooltip title={children as string}>
+  //                 <span className={`${prefixCls}-wrap`}>
+  //                     {btn}
+  //                 </span>
+  //             </Tooltip>
+  //         );
+  //     }
+  //     return btn;
+  // };
+  return jsx(Button, Object.assign({
+    "data-id": id,
+    variant: 'outlined',
+    size: 'medium'
+  }, restProps, {
+    style: Object.assign({
+      width: width
+    }, style),
+    className: makeCls,
+    disabled: disabled,
+    value: value,
+    onClick: handleClick
+  }, {
+    children: jsx("span", Object.assign({
+      className: 'toggle-button-text'
+    }, {
+      children: jsx(AutoTips, {
+        children: children
+      })
+    }))
+  }));
+};
+
+export { ToggleButton, ToggleButtonGroup, ToggleButton as default };

package/Tooltip/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author Hanz
+ * @date 2022/5/25 下午6:02
+ * @description tooltip
+ */
+import { FC } from 'react';
+import { TooltipProps } from './interface';
+import './index.scss';
+export declare const Tooltip: FC<TooltipProps>;
+export type { TooltipProps };
+export default Tooltip;

package/Tooltip/index.js

@@ -0,0 +1,368 @@
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import RcTooltip from 'rc-tooltip';
+import { placements } from 'rc-tooltip/lib/placements';
+import clsx from 'clsx';
+import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+
+//自动调整位置
+var autoAdjustOverflowEnabled = {
+  adjustX: 1,
+  adjustY: 1
+};
+//非自动调整位置
+var autoAdjustOverflowDisabled = {
+  adjustX: 0,
+  adjustY: 0
+};
+var targetOffset = [0, 0];
+//获得调整位置选项
+function getOverflowOptions(autoAdjustOverflow) {
+  if (typeof autoAdjustOverflow === 'boolean') {
+    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
+  }
+  return Object.assign(Object.assign({}, autoAdjustOverflowDisabled), autoAdjustOverflow);
+}
+//tooltip placement
+function getPlacements(config) {
+  var _config$arrowWidth = config.arrowWidth,
+    arrowWidth = _config$arrowWidth === void 0 ? 4 : _config$arrowWidth,
+    _config$horizontalArr = config.horizontalArrowShift,
+    horizontalArrowShift = _config$horizontalArr === void 0 ? 16 : _config$horizontalArr,
+    _config$verticalArrow = config.verticalArrowShift,
+    verticalArrowShift = _config$verticalArrow === void 0 ? 8 : _config$verticalArrow,
+    autoAdjustOverflow = config.autoAdjustOverflow,
+    arrowPointAtCenter = config.arrowPointAtCenter;
+  var placementMap = {
+    left: {
+      points: ['cr', 'cl'],
+      offset: [-8, 0]
+    },
+    right: {
+      points: ['cl', 'cr'],
+      offset: [8, 0]
+    },
+    top: {
+      points: ['bc', 'tc'],
+      offset: [0, -8]
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      offset: [0, 8]
+    },
+    topLeft: {
+      points: ['bl', 'tc'],
+      offset: [-(horizontalArrowShift + arrowWidth), -8]
+    },
+    leftTop: {
+      points: ['tr', 'cl'],
+      offset: [-8, -(verticalArrowShift + arrowWidth)]
+    },
+    topRight: {
+      points: ['br', 'tc'],
+      offset: [horizontalArrowShift + arrowWidth, -8]
+    },
+    rightTop: {
+      points: ['tl', 'cr'],
+      offset: [8, -(verticalArrowShift + arrowWidth)]
+    },
+    bottomRight: {
+      points: ['tr', 'bc'],
+      offset: [horizontalArrowShift + arrowWidth, 8]
+    },
+    rightBottom: {
+      points: ['bl', 'cr'],
+      offset: [8, verticalArrowShift + arrowWidth]
+    },
+    bottomLeft: {
+      points: ['tl', 'bc'],
+      offset: [-(horizontalArrowShift + arrowWidth), 8]
+    },
+    leftBottom: {
+      points: ['br', 'cl'],
+      offset: [-8, verticalArrowShift + arrowWidth]
+    }
+  };
+  Object.keys(placementMap).forEach(function (key) {
+    placementMap[key] = arrowPointAtCenter ? Object.assign(Object.assign({}, placementMap[key]), {
+      overflow: getOverflowOptions(autoAdjustOverflow),
+      targetOffset: targetOffset
+    }) : Object.assign(Object.assign({}, placements[key]), {
+      offset: getAlignOffset(key).offset,
+      overflow: getOverflowOptions(autoAdjustOverflow)
+    });
+    placementMap[key].ignoreShake = true;
+  });
+  return placementMap;
+}
+var splitObject = function splitObject(obj, keys) {
+  var picked = {};
+  var omitted = Object.assign({}, obj);
+  keys.forEach(function (key) {
+    if (obj && key in obj) {
+      picked[key] = obj[key];
+      delete omitted[key];
+    }
+  });
+  return {
+    picked: picked,
+    omitted: omitted
+  };
+};
+//兼容禁用title
+function getDisabledCompatibleChildren(child) {
+  var element = /*#__PURE__*/React__default.isValidElement(child) ? child : jsx("span", {
+    children: child
+  });
+  if (element.type === 'button' && element.props.disabled) {
+    var _splitObject = splitObject(element.props.style, ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex']),
+      picked = _splitObject.picked,
+      omitted = _splitObject.omitted;
+    var spanStyle = Object.assign(Object.assign({
+      display: 'inline-block'
+    }, picked), {
+      cursor: 'not-allowed',
+      width: element.props.block ? '100%' : null
+    });
+    var buttonStyle = Object.assign(Object.assign({}, omitted), {
+      pointerEvents: 'none'
+    });
+    var _child = /*#__PURE__*/React__default.cloneElement(element, {
+      style: buttonStyle,
+      className: null
+    });
+    return jsx("span", Object.assign({
+      style: spanStyle,
+      className: clsx(element.props.className, "".concat($rcPrefixCls, "-tooltip-disabled-compatible-wrapper"))
+    }, {
+      children: _child
+    }));
+  }
+  return element;
+}
+//映射placement
+function mapLegacyPlacement(place) {
+  var legacyPlacement = {
+    'bottom-end': 'bottomRight',
+    'bottom-start': 'bottomLeft',
+    'left-end': 'leftBottom',
+    'left-start': 'leftTop',
+    'right-end': 'rightBottom',
+    'right-start': 'rightTop',
+    'top-end': 'topRight',
+    'top-start': 'topLeft'
+  };
+  return legacyPlacement[place] || place;
+}
+//浮层偏移量
+function getAlignOffset(place) {
+  var mPlace = mapLegacyPlacement(place);
+  var offsetMap = {
+    left: {
+      offset: [-8, 0]
+    },
+    right: {
+      offset: [8, 0]
+    },
+    top: {
+      offset: [0, -8]
+    },
+    bottom: {
+      offset: [0, 8]
+    },
+    topLeft: {
+      offset: [0, -8]
+    },
+    leftTop: {
+      offset: [-8, 0]
+    },
+    topRight: {
+      offset: [0, -8]
+    },
+    rightTop: {
+      offset: [8, 0]
+    },
+    bottomRight: {
+      offset: [0, 8]
+    },
+    rightBottom: {
+      offset: [8, 0]
+    },
+    bottomLeft: {
+      offset: [0, 8]
+    },
+    leftBottom: {
+      offset: [-8, 0]
+    }
+  };
+  return offsetMap[mPlace];
+}
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/25 下午7:17\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-tooltip {\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  line-height: 1.5715;\n  position: absolute;\n  z-index: 1500;\n  display: block;\n  width: max-content;\n  visibility: visible;\n}\n.paraui-v3-tooltip .component-tooltip-content {\n  position: relative;\n}\n.paraui-v3-tooltip.component-tooltip-hidden {\n  display: none;\n}\n.paraui-v3-tooltip.paraui-v3-tooltip-hide-arrow .component-tooltip-arrow {\n  display: none;\n}\n.paraui-v3-tooltip .component-tooltip-inner {\n  min-width: 30px;\n  min-height: 32px;\n  padding: 5px 12px;\n  color: rgb(255, 255, 255);\n  text-align: left;\n  text-decoration: none;\n  word-wrap: break-word;\n  background-color: rgba(46, 55, 67, 0.7);\n  border-radius: 4px;\n  line-height: 22px;\n}\n.paraui-v3-tooltip .component-tooltip-arrow {\n  position: absolute;\n  z-index: 2;\n  display: block;\n  width: 22px;\n  height: 22px;\n  overflow: hidden;\n  background: transparent;\n  pointer-events: none;\n}\n.paraui-v3-tooltip .component-tooltip-arrow-content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 11.3137085px;\n  height: 11.3137085px;\n  margin: auto;\n  content: \"\";\n  border-radius: 0 0 2px;\n  pointer-events: none;\n  background: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-tooltip .component-tooltip-arrow-content::before {\n  position: absolute;\n  top: -11.3137085px;\n  left: -11.3137085px;\n  width: 33.9411255px;\n  height: 33.9411255px;\n  background-repeat: no-repeat;\n  background-position: -10px -10px;\n  content: \"\";\n  clip-path: path(\"M 9.849242404917499 24.091883092036785 A 5 5 0 0 1 13.384776310850237 22.627416997969522 L 20.627416997969522 22.627416997969522 A 2 2 0 0 0 22.627416997969522 20.627416997969522 L 22.627416997969522 13.384776310850237 A 5 5 0 0 1 24.091883092036785 9.849242404917499 L 23.091883092036785 9.849242404917499 L 9.849242404917499 23.091883092036785 Z\");\n}\n.paraui-v3-tooltip.component-tooltip-placement-top .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-topLeft .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-topRight .component-tooltip-arrow {\n  bottom: 0;\n  transform: translateY(100%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-top .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-topLeft .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-topRight .component-tooltip-arrow-content {\n  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateY(-11px) rotate(45deg);\n}\n.paraui-v3-tooltip.component-tooltip-placement-top .component-tooltip-arrow {\n  left: 50%;\n  transform: translateY(100%) translateX(-50%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-topLeft .component-tooltip-arrow {\n  left: 13px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-topRight .component-tooltip-arrow {\n  right: 13px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-right .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-rightTop .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-rightBottom .component-tooltip-arrow {\n  left: 0;\n  transform: translateX(-100%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-right .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-rightTop .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-rightBottom .component-tooltip-arrow-content {\n  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateX(11px) rotate(135deg);\n}\n.paraui-v3-tooltip.component-tooltip-placement-right .component-tooltip-arrow {\n  top: 50%;\n  transform: translateX(-100%) translateY(-50%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-rightTop .component-tooltip-arrow {\n  top: 5px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-rightBottom .component-tooltip-arrow {\n  bottom: 5px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-left .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-leftTop .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-leftBottom .component-tooltip-arrow {\n  right: 0;\n  transform: translateX(100%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-left .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-leftTop .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-leftBottom .component-tooltip-arrow-content {\n  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateX(-11px) rotate(315deg);\n}\n.paraui-v3-tooltip.component-tooltip-placement-left .component-tooltip-arrow {\n  top: 50%;\n  transform: translateX(100%) translateY(-50%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-leftTop .component-tooltip-arrow {\n  top: 5px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-leftBottom .component-tooltip-arrow {\n  bottom: 5px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottom .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-bottomLeft .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-bottomRight .component-tooltip-arrow {\n  top: 0;\n  transform: translateY(-100%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottom .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-bottomLeft .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-bottomRight .component-tooltip-arrow-content {\n  box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateY(11px) rotate(225deg);\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottom .component-tooltip-arrow {\n  left: 50%;\n  transform: translateY(-100%) translateX(-50%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottomLeft .component-tooltip-arrow {\n  left: 13px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottomRight .component-tooltip-arrow {\n  right: 13px;\n}\n\n.component-tooltip-zoom-big-fast-enter,\n.component-tooltip-zoom-big-fast-appear {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tooltip-zoom-big-fast-leave {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tooltip-zoom-big-fast-enter.component-tooltip-zoom-big-fast-enter-active,\n.component-tooltip-zoom-big-fast-appear.component-tooltip-zoom-big-fast-appear-active {\n  animation-name: componentTooltipZoomBigIn;\n  animation-play-state: running;\n}\n\n.component-tooltip-zoom-big-fast-leave.component-tooltip-zoom-big-fast-leave-active {\n  animation-name: componentTooltipZoomBigOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tooltip-zoom-big-fast-enter,\n.component-tooltip-zoom-big-fast-appear {\n  transform: scale(0);\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n}\n\n.component-tooltip-zoom-big-fast-enter-prepare,\n.component-tooltip-zoom-big-fast-appear-prepare {\n  transform: none;\n}\n\n.component-tooltip-zoom-big-fast-leave {\n  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);\n}\n\n@keyframes componentTooltipZoomBigIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes componentTooltipZoomBigOut {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n}";
+styleInject(css_248z);
+
+//tooltip
+var Tooltip = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var _a;
+  var _React$useState = React__default.useState(props.defaultVisible),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    visible = _React$useState2[0],
+    setVisible = _React$useState2[1]; //是否显示
+  var wrapRef = React__default.useRef(); //锚点
+  var tRef = React__default.useRef(); //实例
+  var _React$useState3 = React__default.useState([0, 0]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    targetOffset = _React$useState4[0],
+    setTargetOffset = _React$useState4[1];
+  React__default.useEffect(function () {
+    var _a;
+    if ('visible' in props || 'open' in props) {
+      setVisible(!!((_a = props.visible) !== null && _a !== void 0 ? _a : props.open));
+    }
+  }, [(_a = props.visible) !== null && _a !== void 0 ? _a : props.open]);
+  //no title
+  var isUntitled = function isUntitled() {
+    var title = props.title;
+    return !title && title !== 0;
+  };
+  //浮层切换时回调
+  var onVisibleChange = function onVisibleChange(vis) {
+    var _a;
+    if (!('visible' in props || 'open' in props)) {
+      setVisible(isUntitled() ? false : vis);
+    }
+    if (!isUntitled()) {
+      (_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, vis);
+    }
+  };
+  //tooltip 弹出位置
+  var getTooltipPlacements = function getTooltipPlacements() {
+    var builtinPlacements = props.builtinPlacements,
+      arrowPointAtCenter = props.arrowPointAtCenter,
+      autoAdjustOverflow = props.autoAdjustOverflow;
+    return builtinPlacements || getPlacements({
+      arrowPointAtCenter: arrowPointAtCenter,
+      autoAdjustOverflow: autoAdjustOverflow
+    });
+  };
+  // 动态设置动画点
+  var onPopupAlign = function onPopupAlign(domNode, align) {
+    var placements = getTooltipPlacements();
+    // 当前返回的位置
+    var placement = Object.keys(placements).find(function (key) {
+      return placements[key].points[0] === align.points[0] && placements[key].points[1] === align.points[1];
+    });
+    if (!placement) {
+      return;
+    }
+    // 根据当前坐标设置动画点
+    var rect = domNode.getBoundingClientRect();
+    var transformOrigin = {
+      top: '50%',
+      left: '50%'
+    };
+    if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
+      transformOrigin.top = "".concat(rect.height - align.offset[1], "px");
+    } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
+      transformOrigin.top = "".concat(-align.offset[1], "px");
+    }
+    if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
+      transformOrigin.left = "".concat(rect.width - align.offset[0], "px");
+    } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
+      transformOrigin.left = "".concat(-align.offset[0], "px");
+    }
+    domNode.style.transformOrigin = "".concat(transformOrigin.left, " ").concat(transformOrigin.top);
+  };
+  //跟随光标
+  var handleMouseMove = function handleMouseMove(e) {
+    var _a, _b, _c, _d;
+    if (wrapRef.current) {
+      var popupHeight = ((_d = (_c = (_b = (_a = tRef.current) === null || _a === void 0 ? void 0 : _a.popupRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getElement()) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
+      var cursorSpace = popupHeight === 0 ? 60 : 30;
+      var _wrapRef$current$getB = wrapRef.current.getBoundingClientRect(),
+        x = _wrapRef$current$getB.x,
+        y = _wrapRef$current$getB.y,
+        width = _wrapRef$current$getB.width;
+      var newX = e.clientX - (x + width / 2);
+      var newY = e.clientY - y + popupHeight + cursorSpace;
+      setTimeout(function () {
+        setTargetOffset([-newX, -newY]);
+      });
+    }
+  };
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? "".concat($rcPrefixCls, "-tooltip") : _props$prefixCls,
+    getPopupContainer = props.getPopupContainer,
+    overlayClassName = props.overlayClassName,
+    overlayInnerStyle = props.overlayInnerStyle,
+    overlayStyle = props.overlayStyle,
+    children = props.children,
+    title = props.title,
+    placement = props.placement,
+    isPopover = props.isPopover,
+    followCursor = props.followCursor,
+    maxWidth = props.maxWidth,
+    restProps = __rest(props, ["prefixCls", "getPopupContainer", "overlayClassName", "overlayInnerStyle", "overlayStyle", "children", "title", "placement", "isPopover", "followCursor", "maxWidth"]);
+  var tempVisible = visible;
+  if (!('visible' in props || 'open' in props) && isUntitled()) {
+    //没有title必然不可见
+    tempVisible = false;
+  }
+  //overlayCls
+  var overlayCls = clsx(!isPopover && "".concat($prefixCls, "-tooltip"), overlayClassName, !props.arrow && "".concat($prefixCls, "-tooltip-hide-arrow"));
+  var mergeOverlayStyle = Object.assign({}, overlayStyle);
+  if (maxWidth) {
+    mergeOverlayStyle.maxWidth = maxWidth;
+  }
+  return jsx(RcTooltip, Object.assign({}, restProps, {
+    prefixCls: prefixCls,
+    placement: followCursor ? 'top' : mapLegacyPlacement(placement),
+    overlayClassName: overlayCls,
+    getTooltipContainer: getPopupContainer,
+    ref: ref || tRef,
+    builtinPlacements: getTooltipPlacements(),
+    overlay: title,
+    visible: tempVisible,
+    align: {
+      targetOffset: targetOffset
+    },
+    onVisibleChange: onVisibleChange,
+    onPopupAlign: onPopupAlign,
+    overlayStyle: mergeOverlayStyle,
+    overlayInnerStyle: overlayInnerStyle,
+    arrowContent: props.arrow ? jsx("span", {
+      className: "".concat($rcPrefixCls, "-tooltip-arrow-content")
+    }) : null,
+    motion: {
+      motionName: "".concat($rcPrefixCls, "-tooltip-zoom-big-fast"),
+      motionDeadline: 1000
+    }
+  }, {
+    children: followCursor ? jsx("div", Object.assign({
+      style: {
+        display: 'inline-block'
+      },
+      ref: wrapRef,
+      onMouseMove: handleMouseMove
+    }, {
+      children: getDisabledCompatibleChildren(children)
+    })) : getDisabledCompatibleChildren(children)
+  }));
+});
+Tooltip.displayName = 'Tooltip';
+Tooltip.defaultProps = {
+  placement: 'top',
+  mouseEnterDelay: 0.1,
+  mouseLeaveDelay: 0.1,
+  arrowPointAtCenter: false,
+  autoAdjustOverflow: true,
+  arrow: true,
+  defaultVisible: false,
+  followCursor: false
+};
+
+export { Tooltip, Tooltip as default };

package/Tooltip/interface.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @author Hanz
+ * @date 2022/5/25 下午7:16
+ * @description
+ */
+import React from "react";
+import { TooltipProps as RcTooltipProps } from "rc-tooltip/lib/Tooltip";
+export type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'bottom-end' | 'bottom-start' | 'left-end' | 'left-start' | 'right-end' | 'right-start' | 'top-end' | 'top-start';
+export interface TooltipProps extends Partial<Omit<RcTooltipProps, 'children'>> {
+    /** 提示文字 */
+    title?: React.ReactNode;
+    /** style */
+    style?: React.CSSProperties;
+    /** cls */
+    className?: string;
+    /** 位置 */
+    placement?: TooltipPlacement;
+    /** 箭头是否指向目标元素中心 */
+    arrowPointAtCenter?: boolean;
+    /** 被遮挡时自动调整位置 */
+    autoAdjustOverflow?: boolean;
+    /** 渲染容器 */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /** 子节点 */
+    children?: React.ReactNode;
+    /** 是否显示箭头 */
+    arrow?: boolean;
+    /** 控制浮层是否显示 */
+    open?: boolean;
+    /** 跟随光标移动 */
+    followCursor?: boolean;
+    /** 容器最大宽度 */
+    maxWidth?: number | string;
+    [name: string]: any;
+}

package/Tooltip/utils.d.ts

@@ -0,0 +1,18 @@
+import { BuildInPlacements } from 'rc-trigger';
+import React from "react";
+import { TooltipPlacement } from './interface';
+interface AdjustOverflow {
+    adjustX?: 0 | 1;
+    adjustY?: 0 | 1;
+}
+interface PlacementsConfig {
+    arrowWidth?: number;
+    horizontalArrowShift?: number;
+    verticalArrowShift?: number;
+    arrowPointAtCenter?: boolean;
+    autoAdjustOverflow?: boolean | AdjustOverflow;
+}
+export default function getPlacements(config: PlacementsConfig): BuildInPlacements;
+export declare function getDisabledCompatibleChildren(child: React.ReactNode): JSX.Element;
+export declare function mapLegacyPlacement(place: TooltipPlacement): string;
+export {};

package/Transfer/box.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, CSSProperties } from 'react';
+import Sortable from 'sortablejs';
+interface IBox {
+    title: string;
+    data: ItemDataProps[];
+    multiple: boolean;
+    onSearch: (e: string, direction: 'left' | 'right') => void;
+    onchange: (e: any, bol: boolean, index: number, direction: 'left' | 'right', multiple: boolean) => void;
+    onMove: (direction: 'left' | 'right') => void;
+    queryAll: (e: any, direction: any) => void;
+    inverse: (direction: any) => void;
+    direction: 'left' | 'right';
+    fluctuationPosition?: number;
+    fluctuationOrther?: number;
+    onEndSort?: (oldIndex: any, newIndex: any) => void;
+    rightIcon?: (item: ItemDataProps) => ReactNode;
+    style: CSSProperties | undefined;
+    customKey: string;
+}
+export interface ItemDataProps {
+    /** 唯一值,用来过滤 */
+    key?: string;
+    /** 显示名 */
+    name?: string;
+    /** 描述 */
+    description?: string;
+    /** 是否选中 */
+    checked?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否隐藏 */
+    hide?: boolean;
+    tagColor?: string;
+    [name: string]: any;
+}
+export declare const Box: (props: IBox) => JSX.Element;
+export default Box;
+export declare const Sortablejs: typeof Sortable;