react-spatial/components/Sidebar/Sidebar.js

Components to build React map apps.

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Button from '../Button';

var propTypes = {
  /** Open or close the  */
  open: PropTypes.bool,
  title: PropTypes.string,
  position: PropTypes.oneOf(['left', 'right']),
  modal: PropTypes.bool,
  className: PropTypes.string,
  children: PropTypes.node,
  onModalClick: PropTypes.func,
  collapseWidth: PropTypes.number,
};

var defaultProps = {
  open: false,
  title: null,
  position: 'left',
  modal: true,
  className: 'tm-sidebar',
  children: null,
  onModalClick: function () {},
  collapseWidth: 0,
};
var timeout;

var Sidebar = function (ref) {
  var open = ref.open;
  var title = ref.title;
  var position = ref.position;
  var modal = ref.modal;
  var className = ref.className;
  var children = ref.children;
  var onModalClick = ref.onModalClick;
  var collapseWidth = ref.collapseWidth;

  var ref$1 = useState(!open);
  var shouldRemoveElt = ref$1[0];
  var setRemoveElt = ref$1[1];

  // We add the SideBar element before opening it.
  // We remove the SideBar element after closing it.
  useEffect(function () {
    window.clearTimeout(timeout);
    timeout = window.setTimeout(
      function () {
        setRemoveElt(!open);
      },
      open ? 5 : 300
    );
  });

  var isClosed = !open && shouldRemoveElt;

  // If the sidebar is closed and collapseWidth is 0, we remove
  // completely the SideBar from the tree.
  if (isClosed && collapseWidth === 0) {
    return null;
  }

  var isClosing = open && !shouldRemoveElt;
  var classToggle = isClosing ? 'open' : 'close';
  var classMain = className + " " + className + "-" + position + " " + className + "-" + classToggle;
  var classModal = className + "-modal " + className + "-modal-" + classToggle;
  var style = !open ? { width: collapseWidth } : undefined;
  var header = title ? React.createElement( 'header', null, title ) : null;

  // If the sidebar is closed, we remove the modal background.
  var modalBg =
    !modal || isClosed ? null : (
      React.createElement( Button, { className: classModal, onClick: onModalClick })
    );

  return (
    React.createElement( React.Fragment, null,
      modalBg,
      React.createElement( 'div', { className: classMain, style: style },
        header,
        children
      )
    )
  );
};

Sidebar.propTypes = propTypes;
Sidebar.defaultProps = defaultProps;

export default Sidebar;

//# sourceMappingURL=Sidebar.js.map