optimizely-oui/module/js/components/Sidebar/Sidebar.js

Optimizely's Component Library.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import { Resizable } from "re-resizable";
/**
 * Sidebar
 *
 * Example:
 *
 *  <Sidebar
 *    anchor='left'
 *    border={ true }
 *    docked={ true }
 *    isOpen={ false }
 *    width={ 100 }>
 *     sidebar content goes here
 *  </Sidebar>
 *
 */

/**
 *
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */

var Sidebar = function Sidebar(_ref) {
  var anchor = _ref.anchor,
      border = _ref.border,
      boxShadow = _ref.boxShadow,
      children = _ref.children,
      className = _ref.className,
      docked = _ref.docked,
      sticky = _ref.sticky,
      isResizable = _ref.isResizable,
      isOpen = _ref.isOpen,
      width = _ref.width,
      minWidth = _ref.minWidth,
      maxWidth = _ref.maxWidth,
      testSection = _ref.testSection,
      props = _objectWithoutProperties(_ref, ["anchor", "border", "boxShadow", "children", "className", "docked", "sticky", "isResizable", "isOpen", "width", "minWidth", "maxWidth", "testSection"]);

  var baseClasses = classNames("background--white", "flex", "flex--1", "flex--column", "oui-sidebar", "overflow--hidden");
  var classes = classNames(baseClasses, {
    "border--right": border && anchor === "left",
    "border--left": border && anchor === "right",
    "oui-shadow": boxShadow,
    "position--relative": docked,
    "position--absolute height--1-1": !docked && !sticky,
    "position--fixed height--1-1": !docked && sticky,
    "visibility--hidden": !isOpen
  }, className);
  var anchorPosition = anchor === "left" ? -1 * width : 0;

  var styles = _defineProperty({
    width: isOpen ? width : 0,
    maxWidth: isOpen ? width : 0
  }, anchor, isOpen ? 0 : anchorPosition);

  var resizeEnabled = {
    top: false,
    right: anchor === "left" && isResizable,
    bottom: false,
    left: anchor === "right" && isResizable,
    topRight: false,
    bottomRight: false,
    bottomLeft: false,
    topLeft: false
  };
  var defaultSize = {
    width: isOpen ? width : 0,
    height: "auto"
  };

  if (isResizable && !docked) {
    return React.createElement(Resizable, {
      defaultSize: defaultSize,
      minWidth: minWidth,
      maxWidth: maxWidth,
      "data-oui-component": true,
      "data-test-section": testSection,
      className: classes,
      style: styles,
      enable: resizeEnabled
    }, isOpen && children);
  }

  return React.createElement("div", _extends({
    "data-oui-component": true,
    "data-test-section": testSection,
    className: classes,
    style: styles
  }, props), isOpen && children);
};

Sidebar.defaultProps = {
  anchor: "right",
  border: false,
  docked: false,
  sticky: false,
  isResizable: false,
  isOpen: false,
  width: 0
};
Sidebar.propTypes = {
  /**
   * Determines whether the sidebar should render on
   * the left or right side of the page
   */
  anchor: PropTypes.oneOf(["left", "right"]),

  /** Determines if the sidebar should have a border */
  border: PropTypes.bool,

  /** Determines if the sidebar should have a box shadow */
  boxShadow: PropTypes.bool,

  /** Sidebar children */
  children: PropTypes.node.isRequired,

  /** CSS class names. */
  className: PropTypes.string,

  /**
   * Docked sidebars push page-content to left or right when open.
   * Un-docked sidebars render open over page-content (i.e postition absolute)
   */
  docked: PropTypes.bool,

  /**
   * Sticky sidebars render open over page-content (i.e postition fixed).
   * And maintain their position on the screen on scroll.
   * This prop is only in effect when docked is false.
   */
  isOpen: PropTypes.bool,

  /** Determines if the sidebar is visible */
  isResizable: PropTypes.bool,

  /** When resizable, The maximum pixel width of the sidebar */
  maxWidth: PropTypes.number,

  /** When resizable, The minimum pixel width of the sidebar */
  minWidth: PropTypes.number,

  /** Determines if the sidebar is resizable.
    Resizable only works for undocked sidebars. */
  sticky: PropTypes.bool,

  /** Hook for automated JavaScript tests */
  testSection: PropTypes.string,

  /** The pixel width of the sidebar */
  width: PropTypes.number.isRequired
};
export default Sidebar;