@activecollab/components/dist/esm/components/Sheet/Sheet.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
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 = _ref.children,
    onClose = _ref.onClose,
    _ref$controls = _ref.controls,
    controls = _ref$controls === void 0 ? [] : _ref$controls,
    _ref$open = _ref.open,
    defaultOpen = _ref$open === void 0 ? false : _ref$open,
    _ref$animation = _ref.animation,
    animation = _ref$animation === void 0 ? "top" : _ref$animation,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? "center" : _ref$position,
    _ref$mode = _ref.mode,
    mode = _ref$mode === void 0 ? "normal" : _ref$mode,
    _ref$disableFocusLock = _ref.disableFocusLock,
    disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
    _ref$disableScrollLoc = _ref.disableScrollLock,
    disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
    _ref$disableBackgroun = _ref.disableBackgroundColor,
    disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
    bodyStyle = _ref.bodyStyle,
    bodyClassName = _ref.bodyClassName,
    _ref$disableBackgroun2 = _ref.disableBackgroundClick,
    disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  const _useState = useState(defaultOpen),
    open = _useState[0],
    setOpen = _useState[1];
  const _useState2 = useState(true),
    exited = _useState2[0],
    setExited = _useState2[1];
  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 IconComponent = _ref2.icon,
      tooltip = _ref2.tooltip,
      onClick = _ref2.onClick,
      disabled = _ref2.disabled,
      className = _ref2.className;
    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 IconComponent = _ref3.icon,
      tooltip = _ref3.tooltip,
      onClick = _ref3.onClick,
      disabled = _ref3.disabled,
      className = _ref3.className;
    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