@activecollab/components
Version:
ActiveCollab Components
129 lines • 4.42 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useEffect, forwardRef, useState, useImperativeHandle } from "react";
import { Transition } from "react-transition-group";
import classnames from "classnames";
import { StyledAnimatedSpan, StyledCssTransition, StyledHeader, StyledIconsWrapperSmall, StyledListSeparator, StyledSheetIcons, StyledSheetWrapper, StyledSheetWrapperPaper } from "./Styles";
import { IconButton } from "../IconButton";
import { Overlay } from "../Overlay";
import { Tooltip } from "../Tooltip";
import { Window } from "../Window";
export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
children,
onClose,
controls = [],
open: defaultOpen = false,
animation = "top",
position = "center",
mode = "normal",
disableFocusLock = false,
disableScrollLock = false,
disableBackgroundColor = false,
bodyStyle,
bodyClassName,
disableBackgroundClick = false,
...rest
} = _ref;
const [open, setOpen] = useState(defaultOpen);
const [exited, setExited] = useState(true);
useEffect(() => {
setOpen(defaultOpen);
}, [defaultOpen]);
const handleEnter = useCallback(() => {
setExited(false);
}, []);
const handleExited = useCallback(() => {
setExited(true);
onClose == null || onClose();
}, [onClose]);
const handleClose = useCallback(() => {
setOpen(false);
}, []);
const handleBackgroundClick = useCallback(event => {
if (!disableBackgroundClick) {
event.preventDefault();
handleClose();
}
}, [disableBackgroundClick, handleClose]);
useImperativeHandle(ref, () => ({
close: handleClose
}));
if (!open && exited) {
return null;
}
return /*#__PURE__*/React.createElement(Window, _extends({}, rest, {
onClose: handleClose,
disableFocusLock: disableFocusLock,
disableScrollLock: disableScrollLock
}), open && /*#__PURE__*/React.createElement(Overlay, {
onClick: handleBackgroundClick,
disableBackgroundColor: disableBackgroundColor
}), /*#__PURE__*/React.createElement(StyledSheetWrapper, {
className: classnames("c-sheet__wrapper", bodyClassName),
style: bodyStyle,
$position: position,
$mode: mode
}, controls.length > 0 && /*#__PURE__*/React.createElement(StyledSheetIcons, null, controls.map((_ref2, index) => {
let {
icon: IconComponent,
tooltip,
onClick,
disabled,
className
} = _ref2;
const maxDurationIn = 4;
const maxDurationOut = 2;
const control = index + 1;
const durationOut = Math.max(0, maxDurationOut - control);
const durationIn = Math.min(control, maxDurationIn);
return /*#__PURE__*/React.createElement(Transition, {
appear: true,
in: open,
timeout: maxDurationIn * 100,
key: "c-sheet-control-" + index
}, state => /*#__PURE__*/React.createElement(Tooltip, {
title: tooltip,
disable: !tooltip || disabled
}, /*#__PURE__*/React.createElement(StyledAnimatedSpan, {
onClick: onClick,
$disabled: disabled,
$mode: mode,
$state: state,
className: className,
$maxDurationIn: maxDurationIn / 10,
$maxDurationOut: maxDurationOut / 10,
$durationOut: durationOut / 10,
$durationIn: durationIn / 10
}, IconComponent)));
})), /*#__PURE__*/React.createElement(StyledCssTransition, {
appear: true,
in: open,
timeout: 400,
classNames: "c-sheet__animation",
$direction: animation,
onEnter: handleEnter,
onExited: handleExited
}, /*#__PURE__*/React.createElement(StyledSheetWrapperPaper, {
paperClass: "c-sheet__wrapper__paper"
}, controls.length > 0 && /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(StyledIconsWrapperSmall, null, controls.map((_ref3, index) => {
let {
icon: IconComponent,
tooltip,
onClick,
disabled,
className
} = _ref3;
return /*#__PURE__*/React.createElement(Tooltip, {
title: tooltip,
disable: !tooltip || disabled,
key: index
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: onClick,
disabled: disabled,
className: className,
variant: "text gray"
}, IconComponent));
})), /*#__PURE__*/React.createElement(StyledListSeparator, null)), children))));
});
Sheet.displayName = "Sheet";
//# sourceMappingURL=Sheet.js.map