@etsoo/materialui
Version:
TypeScript Material-UI Implementation
33 lines (32 loc) • 1.41 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollTopFab = ScrollTopFab;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const VerticalAlignTop_1 = __importDefault(require("@mui/icons-material/VerticalAlignTop"));
const useScrollTrigger_1 = __importDefault(require("@mui/material/useScrollTrigger"));
const Zoom_1 = __importDefault(require("@mui/material/Zoom"));
const Fab_1 = __importDefault(require("@mui/material/Fab"));
/**
* Scroll to top fab
* @returns Component
*/
function ScrollTopFab(props) {
// Destruct
const { color, size, target, title } = props;
// Scroll trigger
const trigger = (0, useScrollTrigger_1.default)({
target,
disableHysteresis: true,
threshold: 120
});
// Icon click handler
// behavior: 'smooth'
const handleClick = () => {
target.scrollTo({ top: 0 });
};
return trigger ? ((0, jsx_runtime_1.jsx)(Zoom_1.default, { in: trigger, children: (0, jsx_runtime_1.jsx)(Fab_1.default, { color: color, size: size, title: title, onClick: handleClick, children: (0, jsx_runtime_1.jsx)(VerticalAlignTop_1.default, {}) }) })) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {}));
}