@daoyi/nmtl-ui 2.0.1-beta.13 → 2.0.1-beta.131

package/lib/components/BackTop.js

@@ -1 +1,124 @@
-import{a as e}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import n,{useState as o,useRef as t,useEffect as i}from"react";import r from"prop-types";import{u as a,b as l,c}from"./index-b2745105.js";import{d as s}from"./debounce-c993109b.js";import{Fade as p,NoSsr as d,Box as m}from"@material-ui/core";import{i as u,a as f,r as b}from"./createSvgIcon-e24792d4.js";import{s as v}from"./style-inject.es-1f59c1d0.js";import"@material-ui/styles";import"react-dom";var x=a(l((function(e,o){Object.defineProperty(o,"__esModule",{value:!0}),o.default=void 0;var t=u(n),i=(0,f(b).default)(t.createElement("path",{d:"M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"}),"ExpandLessSharp");o.default=i})));v(".backTop {\n  right: 30px;\n  bottom: 50px;\n  position: fixed;\n  z-index: 10;\n  opacity: 0;\n  cursor: pointer; }\n  .backTop__default {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 70px;\n    height: 70px;\n    border-radius: 45px;\n    opacity: 0.8;\n    transition: opacity 0.3s ease-in-out; }\n    .backTop__default:hover {\n      opacity: 1; }\n    .backTop__default .MuiSvgIcon-root {\n      margin-bottom: -3px; }\n  .backTop:hover {\n    opacity: 0.7; }\n\n@media only screen and (max-width: 484px) {\n  .backTop {\n    right: 15px; } }\n");var y=function(r){var a=r.className,l=r.visibilityHeight,u=r.onClick,f=r.children,b=o(!1),v=e(b,2),y=v[0],h=v[1],w=t(s((function(){var e=window.scrollY;h(e>=l)}),100)).current;return i((function(){return window.addEventListener("scroll",(function(){return w()})),function(){window.removeEventListener("scroll",(function(){return w()}))}}),[]),n.createElement(p,{in:y,timeout:500,unmountOnExit:!0},n.createElement("div",{className:c("backTop",a),onClick:function(){window.scrollTo?window.scrollTo({top:0,left:0,behavior:"smooth"}):window.scrollTop=0,u()}},f?n.createElement("div",null,f):n.createElement(d,null,n.createElement(m,{className:"backTop__default",color:"text.primary",bgcolor:"primary.main",borderColor:"text.secondary"},n.createElement(x,null),"Top"))))};y.defaultProps={className:void 0,visibilityHeight:300,onClick:function(){},children:void 0},y.propTypes={className:r.string,visibilityHeight:r.number,onClick:r.func,children:r.node};export{y as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { d as debounce_1 } from './debounce-127da66c.js';
+import { Fade, NoSsr, Box } from '@material-ui/core';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import './isObjectLike-e111475d.js';
+import './_commonjsHelpers-70de2c37.js';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var ExpandLessSharp = {};
+
+var _interopRequireDefault = interopRequireDefault.exports;
+
+var _interopRequireWildcard = interopRequireWildcard.exports;
+
+Object.defineProperty(ExpandLessSharp, "__esModule", {
+  value: true
+});
+var default_1 = ExpandLessSharp.default = void 0;
+
+var React = _interopRequireWildcard(React__default);
+
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
+  d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"
+}), 'ExpandLessSharp');
+
+default_1 = ExpandLessSharp.default = _default;
+
+var css_248z = ".backTop {\n  right: 30px;\n  bottom: 50px;\n  position: fixed;\n  z-index: 10;\n  opacity: 0;\n  cursor: pointer;\n}\n.backTop__default {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 70px;\n  height: 70px;\n  border-radius: 45px;\n  opacity: 0.8;\n  transition: opacity 0.3s ease-in-out;\n}\n.backTop__default:hover {\n  opacity: 1;\n}\n.backTop__default .MuiSvgIcon-root {\n  margin-bottom: -3px;\n}\n.backTop:hover {\n  opacity: 0.7;\n}\n\n@media only screen and (max-width: 484px) {\n  .backTop {\n    right: 15px;\n  }\n}";
+styleInject(css_248z);
+
+var scrollToTop = function scrollToTop() {
+  if (window.scrollTo) {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
+  } else {
+    window.scrollTop = 0;
+  }
+};
+var BackTop = function BackTop(props) {
+  var className = props.className,
+    visibilityHeight = props.visibilityHeight,
+    _onClick = props.onClick,
+    children = props.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var scrollDebounce = useRef(debounce_1(function () {
+    var top = window.scrollY;
+    setShow(top >= visibilityHeight);
+  }, 100)).current;
+  useEffect(function () {
+    // const scrollEvent = () => scrollDebounce.current;
+    window.addEventListener('scroll', function () {
+      return scrollDebounce();
+    });
+    return function () {
+      window.removeEventListener('scroll', function () {
+        return scrollDebounce();
+      });
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Fade, {
+    in: show,
+    timeout: 500,
+    unmountOnExit: true
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('backTop', className),
+    role: "button",
+    tabIndex: 0,
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.backTop'
+    }),
+    onClick: function onClick() {
+      scrollToTop();
+      _onClick();
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        scrollToTop();
+        _onClick();
+      }
+    }
+  }, children ? /*#__PURE__*/React__default.createElement("div", null, children) : /*#__PURE__*/React__default.createElement(NoSsr, null, /*#__PURE__*/React__default.createElement(Box, {
+    className: "backTop__default",
+    color: "primary.contrastText",
+    bgcolor: "primary.main",
+    borderColor: "text.secondary"
+  }, /*#__PURE__*/React__default.createElement(default_1, {
+    "aria-hidden": "true"
+  }), "Top"))));
+};
+BackTop.defaultProps = {
+  className: undefined,
+  visibilityHeight: 300,
+  onClick: function onClick() {},
+  children: undefined
+};
+BackTop.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 可視返回Icon的高度偵測 */
+  visibilityHeight: PropTypes.number,
+  /** 點擊後的Callback */
+  onClick: PropTypes.func,
+  /** custom */
+  children: PropTypes.node
+};
+
+export { BackTop as default };