donghy 0.0.1

package/dist/esm/components/common/FloatButton/FloatButton.js

@@ -0,0 +1,572 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { forwardRef, useState, useEffect, useCallback, useRef, useMemo, createContext, useContext } from 'react';
+import { PlusOutlined, VerticalAlignTopOutlined, CloseOutlined, FileTextOutlined } from "../Icon";
+import styles from "./FloatButton.module.css";
+
+/* ─── Types ─── */
+
+/**
+ * 浮动按钮类型
+ */
+
+/**
+ * 浮动按钮形状
+ */
+
+/**
+ * 浮动按钮组展开方向
+ */
+
+/**
+ * 浮动按钮组触发方式
+ */
+
+/**
+ * 浮动按钮引用接口
+ */
+
+/**
+ * 浮动按钮徽标属性接口
+ */
+
+/**
+ * 浮动按钮语义化 DOM 节点类型
+ */
+
+/**
+ * 浮动按钮组语义化 DOM 节点类型
+ */
+
+/**
+ * 浮动按钮组件属性接口
+ */
+
+/**
+ * 浮动按钮组组件属性接口
+ */
+
+/**
+ * 浮动按钮回到顶部属性接口
+ */
+
+/* ─── Internal types ─── */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var GroupContext = /*#__PURE__*/createContext(null);
+
+/* ─── Helpers ─── */
+
+function resolveClass(part, defaultClass, classNamesProp, props) {
+  var extra;
+  if (typeof classNamesProp === 'function') {
+    extra = classNamesProp(props || {})[part];
+  } else if (classNamesProp) {
+    extra = classNamesProp[part];
+  }
+  return [defaultClass, extra].filter(Boolean).join(' ');
+}
+function resolveStyle(part, stylesProp, props) {
+  if (typeof stylesProp === 'function') {
+    return stylesProp(props || {})[part] || {};
+  } else if (stylesProp) {
+    return stylesProp[part] || {};
+  }
+  return {};
+}
+function getScroll(el) {
+  if (el === window) {
+    return window.scrollY || document.documentElement.scrollTop;
+  }
+  return el.scrollTop;
+}
+function scrollTo(targetY, _ref) {
+  var getContainer = _ref.getContainer,
+    duration = _ref.duration;
+  var container = getContainer();
+  var startY = getScroll(container);
+  var diff = targetY - startY;
+  if (diff === 0) return;
+  var startTime = performance.now();
+  var animate = function animate(currentTime) {
+    var elapsed = currentTime - startTime;
+    var progress = Math.min(elapsed / duration, 1);
+    var ease = 1 - Math.pow(1 - progress, 3);
+    var currentY = startY + diff * ease;
+    if (container === window) {
+      window.scrollTo(0, currentY);
+    } else {
+      container.scrollTop = currentY;
+    }
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    }
+  };
+  requestAnimationFrame(animate);
+}
+function throttleByAnimationFrame(fn) {
+  var pending = false;
+  var lastArgs = null;
+  var rafId = null;
+  var throttled = function throttled() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    lastArgs = args;
+    if (pending) return;
+    pending = true;
+    rafId = requestAnimationFrame(function () {
+      pending = false;
+      if (lastArgs) {
+        fn.apply(void 0, _toConsumableArray(lastArgs));
+        lastArgs = null;
+      }
+    });
+  };
+  throttled.cancel = function () {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    pending = false;
+    lastArgs = null;
+  };
+  return throttled;
+}
+
+/* ─── FloatButton ─── */
+
+var FloatButton = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref3, _groupCtx$individual, _badge$overflowCount, _badge$overflowCount2;
+  var icon = _ref2.icon,
+    content = _ref2.content,
+    description = _ref2.description,
+    tooltip = _ref2.tooltip,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'default' : _ref2$type,
+    shapeProp = _ref2.shape,
+    badge = _ref2.badge,
+    href = _ref2.href,
+    target = _ref2.target,
+    _ref2$htmlType = _ref2.htmlType,
+    htmlType = _ref2$htmlType === void 0 ? 'button' : _ref2$htmlType,
+    disabled = _ref2.disabled,
+    classNamesProp = _ref2.classNames,
+    stylesProp = _ref2.styles,
+    onClick = _ref2.onClick,
+    style = _ref2.style,
+    className = _ref2.className,
+    children = _ref2.children,
+    download = _ref2.download,
+    rel = _ref2.rel;
+  var groupCtx = useContext(GroupContext);
+  var shape = (_ref3 = shapeProp !== null && shapeProp !== void 0 ? shapeProp : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.shape) !== null && _ref3 !== void 0 ? _ref3 : 'circle';
+  var individual = (_groupCtx$individual = groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.individual) !== null && _groupCtx$individual !== void 0 ? _groupCtx$individual : true;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipVisible = _useState2[0],
+    setTooltipVisible = _useState2[1];
+  var innerRef = useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      nativeElement: innerRef.current
+    };
+  });
+  var resolvedContent = content !== null && content !== void 0 ? content : description;
+  var isLink = !!href;
+  var isEmpty = !icon && !resolvedContent && !children;
+  var defaultedIcon = icon !== null && icon !== void 0 ? icon : isEmpty ? /*#__PURE__*/_jsx(FileTextOutlined, {}) : undefined;
+  var renderProps = {
+    icon: icon,
+    content: content,
+    description: description,
+    tooltip: tooltip,
+    type: type,
+    shape: shape,
+    badge: badge,
+    href: href,
+    onClick: onClick
+  };
+  var rootClass = resolveClass('root', '', classNamesProp !== null && classNamesProp !== void 0 ? classNamesProp : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.classNames, renderProps);
+  var iconClass = resolveClass('icon', styles.icon, classNamesProp !== null && classNamesProp !== void 0 ? classNamesProp : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.classNames, renderProps);
+  var contentClass = resolveClass('content', styles.content, classNamesProp !== null && classNamesProp !== void 0 ? classNamesProp : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.classNames, renderProps);
+  var rootStyleExtra = resolveStyle('root', stylesProp !== null && stylesProp !== void 0 ? stylesProp : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.styles, renderProps);
+  var iconStyleExtra = resolveStyle('icon', stylesProp !== null && stylesProp !== void 0 ? stylesProp : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.styles, renderProps);
+  var contentStyleExtra = resolveStyle('content', stylesProp !== null && stylesProp !== void 0 ? stylesProp : groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.styles, renderProps);
+  var badgeEl = badge ? /*#__PURE__*/_jsx("span", {
+    className: [styles.badge, badge.dot ? styles.badgeDot : ''].filter(Boolean).join(' '),
+    style: badge.style,
+    children: badge.dot ? '' : badge.count && badge.count > ((_badge$overflowCount = badge.overflowCount) !== null && _badge$overflowCount !== void 0 ? _badge$overflowCount : 99) ? "".concat((_badge$overflowCount2 = badge.overflowCount) !== null && _badge$overflowCount2 !== void 0 ? _badge$overflowCount2 : 99, "+") : badge.count
+  }) : null;
+  var buttonContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [badgeEl, /*#__PURE__*/_jsxs("span", {
+      className: styles.body,
+      children: [defaultedIcon && /*#__PURE__*/_jsx("span", {
+        className: iconClass,
+        style: iconStyleExtra,
+        children: defaultedIcon
+      }), resolvedContent && /*#__PURE__*/_jsx("span", {
+        className: contentClass,
+        style: contentStyleExtra,
+        children: resolvedContent
+      }), children]
+    })]
+  });
+  var rootCls = [styles.root, groupCtx ? styles.rootInGroup : '', rootClass, className].filter(Boolean).join(' ');
+  var mergedStyle = _objectSpread(_objectSpread({}, rootStyleExtra), style);
+  var dataAttrs = {
+    'data-type': type,
+    'data-shape': shape,
+    'data-individual': individual || undefined,
+    'data-empty': isEmpty || undefined,
+    'data-disabled': disabled || undefined
+  };
+  var handleClick = function handleClick(e) {
+    if (disabled) return;
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+  var btn = isLink ? /*#__PURE__*/_jsx("a", _objectSpread(_objectSpread({
+    ref: innerRef,
+    className: rootCls,
+    style: mergedStyle,
+    href: disabled ? undefined : href,
+    target: target,
+    download: download,
+    rel: rel,
+    onClick: handleClick,
+    "aria-disabled": disabled || undefined,
+    tabIndex: disabled ? -1 : undefined
+  }, dataAttrs), {}, {
+    children: buttonContent
+  })) : /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({
+    ref: innerRef,
+    className: rootCls,
+    style: mergedStyle,
+    type: htmlType,
+    disabled: disabled,
+    onClick: handleClick
+  }, dataAttrs), {}, {
+    children: buttonContent
+  }));
+  if (!tooltip) return btn;
+  var tooltipTitle = _typeof(tooltip) === 'object' && 'title' in tooltip ? tooltip.title : tooltip;
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.tooltipWrapper,
+    onMouseEnter: function onMouseEnter() {
+      return setTooltipVisible(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setTooltipVisible(false);
+    },
+    children: [btn, tooltipVisible && /*#__PURE__*/_jsx("div", {
+      className: styles.tooltip,
+      children: tooltipTitle
+    })]
+  });
+});
+FloatButton.displayName = 'FloatButton';
+
+/* ─── Group ─── */
+
+var defaultGroupIcon = /*#__PURE__*/_jsx(PlusOutlined, {});
+var defaultGroupCloseIcon = /*#__PURE__*/_jsx(CloseOutlined, {});
+var FloatButtonGroup = function FloatButtonGroup(_ref4) {
+  var _ref4$shape = _ref4.shape,
+    shapeProp = _ref4$shape === void 0 ? 'circle' : _ref4$shape,
+    trigger = _ref4.trigger,
+    openProp = _ref4.open,
+    icon = _ref4.icon,
+    closeIcon = _ref4.closeIcon,
+    _ref4$type = _ref4.type,
+    groupType = _ref4$type === void 0 ? 'default' : _ref4$type,
+    _ref4$placement = _ref4.placement,
+    placement = _ref4$placement === void 0 ? 'top' : _ref4$placement,
+    onChange = _ref4.onChange,
+    onClick = _ref4.onClick,
+    classNamesProp = _ref4.classNames,
+    stylesProp = _ref4.styles,
+    children = _ref4.children,
+    style = _ref4.style,
+    className = _ref4.className;
+  var isControlled = openProp !== undefined;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalOpen = _useState4[0],
+    setInternalOpen = _useState4[1];
+  var open = isControlled ? openProp : internalOpen;
+  var groupRef = useRef(null);
+  var openRef = useRef(open);
+  openRef.current = open;
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    motionState = _useState6[0],
+    setMotionState = _useState6[1];
+  var isMenuMode = trigger === 'click' || trigger === 'hover';
+  var individual = shapeProp === 'circle';
+  var triggerOpenRef = useRef(undefined);
+  triggerOpenRef.current = function (next) {
+    if (openRef.current !== next) {
+      if (!isControlled) setInternalOpen(next);
+      onChange === null || onChange === void 0 || onChange(next);
+    }
+  };
+  useEffect(function () {
+    if (!isMenuMode) return;
+    if (open) {
+      setMotionState('enter');
+      var raf = requestAnimationFrame(function () {
+        setMotionState('enter-active');
+      });
+      return function () {
+        return cancelAnimationFrame(raf);
+      };
+    } else {
+      setMotionState('leave');
+      var _raf = requestAnimationFrame(function () {
+        setMotionState('leave-active');
+      });
+      return function () {
+        return cancelAnimationFrame(_raf);
+      };
+    }
+  }, [open, isMenuMode]);
+  useEffect(function () {
+    if (motionState === 'leave-active' || motionState === 'leave') {
+      var timer = setTimeout(function () {
+        setMotionState(null);
+      }, 300);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [motionState]);
+  useEffect(function () {
+    if (!isMenuMode || trigger !== 'click') return;
+    var onDocClick = function onDocClick(e) {
+      var _groupRef$current;
+      if ((_groupRef$current = groupRef.current) !== null && _groupRef$current !== void 0 && _groupRef$current.contains(e.target)) return;
+      if (openRef.current) triggerOpenRef.current(false);
+    };
+    document.addEventListener('click', onDocClick, {
+      capture: true
+    });
+    return function () {
+      return document.removeEventListener('click', onDocClick, {
+        capture: true
+      });
+    };
+  }, [isMenuMode, trigger]);
+  var hoverTimer = useRef(undefined);
+  var handleMouseEnter = useCallback(function () {
+    if (trigger === 'hover') {
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
+      triggerOpenRef.current(true);
+    }
+  }, [trigger]);
+  var handleMouseLeave = useCallback(function () {
+    if (trigger === 'hover') {
+      hoverTimer.current = setTimeout(function () {
+        triggerOpenRef.current(false);
+      }, 100);
+    }
+  }, [trigger]);
+  var handleClick = useCallback(function (e) {
+    if (trigger === 'click') {
+      triggerOpenRef.current(!openRef.current);
+    }
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [trigger, onClick]);
+  useEffect(function () {
+    return function () {
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
+    };
+  }, []);
+  var renderProps = {
+    shape: shapeProp,
+    trigger: trigger,
+    open: open,
+    placement: placement
+  };
+  var rootClassExtra = resolveClass('root', '', classNamesProp, renderProps);
+  var listClassExtra = resolveClass('list', '', classNamesProp, renderProps);
+  var _triggerClassExtra = resolveClass('trigger', '', classNamesProp, renderProps);
+  var rootStyleExtra = resolveStyle('root', stylesProp, renderProps);
+  var listStyleExtra = resolveStyle('list', stylesProp, renderProps);
+  var makeContext = function makeContext(prefix) {
+    var resolvedClassNames = typeof classNamesProp === 'function' ? classNamesProp(renderProps) : classNamesProp;
+    var resolvedStyles = typeof stylesProp === 'function' ? stylesProp(renderProps) : stylesProp;
+    return {
+      shape: shapeProp,
+      individual: individual,
+      classNames: {
+        root: resolvedClassNames === null || resolvedClassNames === void 0 ? void 0 : resolvedClassNames[prefix],
+        icon: resolvedClassNames === null || resolvedClassNames === void 0 ? void 0 : resolvedClassNames["".concat(prefix, "Icon")],
+        content: resolvedClassNames === null || resolvedClassNames === void 0 ? void 0 : resolvedClassNames["".concat(prefix, "Content")]
+      },
+      styles: {
+        root: resolvedStyles === null || resolvedStyles === void 0 ? void 0 : resolvedStyles[prefix],
+        icon: resolvedStyles === null || resolvedStyles === void 0 ? void 0 : resolvedStyles["".concat(prefix, "Icon")],
+        content: resolvedStyles === null || resolvedStyles === void 0 ? void 0 : resolvedStyles["".concat(prefix, "Content")]
+      }
+    };
+  };
+  var listContext = useMemo(function () {
+    return makeContext('item');
+  }, [shapeProp, individual, classNamesProp, stylesProp]);
+  var triggerContext = useMemo(function () {
+    return _objectSpread(_objectSpread({}, makeContext('trigger')), {}, {
+      individual: true
+    });
+  }, [shapeProp, classNamesProp, stylesProp]);
+  var motionClass = motionState === 'enter' ? styles.wrapEnter : motionState === 'enter-active' ? styles.wrapEnterActive : motionState === 'leave' ? styles.wrapLeave : motionState === 'leave-active' ? styles.wrapLeaveActive : '';
+  var wrapCls = [styles.wrap, listClassExtra, motionClass].filter(Boolean).join(' ');
+  var wrapStyle = _objectSpread(_objectSpread({}, listStyleExtra), {}, {
+    flexDirection: placement === 'top' || placement === 'bottom' ? 'column' : 'row'
+  });
+  var groupCls = [styles.group, isMenuMode ? styles.group : '', className, rootClassExtra].filter(Boolean).join(' ');
+  var groupDataAttrs = {
+    'data-shape': shapeProp,
+    'data-trigger': trigger,
+    'data-placement': placement,
+    'data-menu-mode': isMenuMode || undefined
+  };
+  if (!isMenuMode) {
+    return /*#__PURE__*/_jsx(GroupContext.Provider, {
+      value: listContext,
+      children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+        ref: groupRef,
+        className: groupCls,
+        style: _objectSpread(_objectSpread({}, rootStyleExtra), style)
+      }, groupDataAttrs), {}, {
+        children: children
+      }))
+    });
+  }
+  return /*#__PURE__*/_jsx(GroupContext.Provider, {
+    value: listContext,
+    children: /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      ref: groupRef,
+      className: groupCls,
+      style: _objectSpread(_objectSpread({}, rootStyleExtra), style),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }, groupDataAttrs), {}, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: wrapCls,
+        style: wrapStyle,
+        children: children
+      }), /*#__PURE__*/_jsx(GroupContext.Provider, {
+        value: triggerContext,
+        children: /*#__PURE__*/_jsx(FloatButton, {
+          className: styles.trigger,
+          icon: open ? closeIcon !== null && closeIcon !== void 0 ? closeIcon : defaultGroupCloseIcon : icon !== null && icon !== void 0 ? icon : defaultGroupIcon,
+          type: groupType,
+          shape: shapeProp,
+          onClick: handleClick
+        })
+      })]
+    }))
+  });
+};
+FloatButtonGroup.displayName = 'FloatButtonGroup';
+
+/* ─── BackTop ─── */
+
+var defaultBackTopIcon = /*#__PURE__*/_jsx(VerticalAlignTopOutlined, {});
+var FloatButtonBackTop = function FloatButtonBackTop(_ref5) {
+  var _groupCtx$shape;
+  var _ref5$duration = _ref5.duration,
+    duration = _ref5$duration === void 0 ? 450 : _ref5$duration,
+    target = _ref5.target,
+    _ref5$visibilityHeigh = _ref5.visibilityHeight,
+    visibilityHeight = _ref5$visibilityHeigh === void 0 ? 400 : _ref5$visibilityHeigh,
+    onClick = _ref5.onClick,
+    icon = _ref5.icon,
+    content = _ref5.content,
+    _ref5$type = _ref5.type,
+    type = _ref5$type === void 0 ? 'default' : _ref5$type,
+    _ref5$shape = _ref5.shape,
+    shape = _ref5$shape === void 0 ? 'circle' : _ref5$shape,
+    className = _ref5.className,
+    style = _ref5.style;
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    visible = _useState8[0],
+    setVisible = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    _mounted = _useState10[0],
+    setMounted = _useState10[1];
+  var innerRef = useRef(null);
+  var getTarget = useCallback(function () {
+    var _target;
+    return (_target = target === null || target === void 0 ? void 0 : target()) !== null && _target !== void 0 ? _target : window;
+  }, [target]);
+  useEffect(function () {
+    setMounted(true);
+  }, []);
+  useEffect(function () {
+    var container = getTarget();
+    var handleScroll = throttleByAnimationFrame(function () {
+      var scrollTop = getScroll(container);
+      setVisible(scrollTop >= visibilityHeight);
+    });
+    handleScroll();
+    container.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return function () {
+      handleScroll.cancel();
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [getTarget, visibilityHeight]);
+  var scrollToTop = useCallback(function () {
+    scrollTo(0, {
+      getContainer: getTarget,
+      duration: duration
+    });
+    onClick === null || onClick === void 0 || onClick();
+  }, [getTarget, duration, onClick]);
+  var groupCtx = useContext(GroupContext);
+  var mergedShape = (_groupCtx$shape = groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.shape) !== null && _groupCtx$shape !== void 0 ? _groupCtx$shape : shape;
+  var rootCls = [styles.root, styles.backtop, groupCtx ? styles.rootInGroup : '', visible ? '' : styles.backtopHidden, className].filter(Boolean).join(' ');
+  var dataAttrs = {
+    'data-type': type,
+    'data-shape': mergedShape
+  };
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    ref: innerRef,
+    className: rootCls,
+    style: style,
+    onClick: scrollToTop
+  }, dataAttrs), {}, {
+    children: /*#__PURE__*/_jsxs("span", {
+      className: styles.body,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: styles.icon,
+        children: icon !== null && icon !== void 0 ? icon : defaultBackTopIcon
+      }), content && /*#__PURE__*/_jsx("span", {
+        className: styles.content,
+        children: content
+      })]
+    })
+  }));
+};
+FloatButtonBackTop.displayName = 'FloatButtonBackTop';
+var FloatButtonWithSub = FloatButton;
+FloatButtonWithSub.Group = FloatButtonGroup;
+FloatButtonWithSub.BackTop = FloatButtonBackTop;
+export { FloatButtonWithSub as FloatButton, FloatButtonGroup, FloatButtonBackTop };
+export default FloatButtonWithSub;