backpack-ui/dist/components/sidebarSection/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _settings = require("../../../settings.json");

var _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var SidebarSection = function (_React$Component) {
  _inherits(SidebarSection, _React$Component);

  function SidebarSection(props) {
    _classCallCheck(this, SidebarSection);

    var _this = _possibleConstructorReturn(this, (SidebarSection.__proto__ || Object.getPrototypeOf(SidebarSection)).call(this, props));

    _this.state = {
      collapsed: props.collapsed
    };

    _this.onClick = _this.onClick.bind(_this);
    return _this;
  }

  _createClass(SidebarSection, [{
    key: "onClick",
    value: function onClick(event) {
      this.setState({
        collapsed: !this.state.collapsed
      });

      event.preventDefault();
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props;
      var children = _props.children;
      var title = _props.title;
      var icon = _props.icon;
      var collapsed = _props.collapsed;
      var background = _props.background;
      var scopedStyles = _props.scopedStyles;
      var modifier = _props.modifier;
      var contentType = _props.contentType;
      var noMargin = _props.noMargin;
      var first = _props.first;


      var styles = {
        container: {
          base: (0, _objectAssign2.default)({}, {
            fontSize: "11px",
            paddingBottom: "35px",
            position: "relative"
          }, !first && {
            borderTop: "1px solid " + _settings.color.gray,
            paddingTop: "20px"
          }),

          background: {
            backgroundColor: "#e9f2f8", // This color does not exist in settings
            borderTop: 0,
            marginLeft: "-20px",
            paddingBottom: "40px",
            paddingLeft: "20px",
            paddingRight: "20px",
            paddingTop: "20px",
            width: "calc(100% + 40px)"
          },

          booking: !background ? {
            paddingBottom: "62px"
          } : {},

          checkboxes: {
            paddingBottom: "54px"
          },

          map: {
            paddingBottom: 0,
            paddingTop: 0
          },

          collapsed: {
            paddingBottom: 0,
            paddingTop: 0
          }
        },

        header: {
          base: {
            position: "relative"
          }
        },

        collapsibleHeading: {
          base: {
            backgroundColor: "transparent",
            display: "block",
            paddingBottom: "17px",
            paddingTop: "20px",
            position: "relative",
            textAlign: "left",
            width: "100%"
          }
        },

        content: {
          base: {
            marginTop: "14px"
          },

          booking: background ? {
            marginTop: "32px"
          } : {
            marginTop: "22px"
          },

          checkboxes: {
            marginTop: "16px"
          },

          map: {
            marginTop: 0
          },

          slider: {
            marginTop: "36px"
          },

          indented: {
            marginLeft: "20px"
          },

          collapsed: {
            display: "none",
            marginTop: "-1px",
            paddingBottom: "57px"
          },

          expanded: {
            display: "block"
          }
        },

        toggleIcon: {
          base: {
            backgroundColor: "transparent",
            color: _settings.color.blue,
            fontSize: "9px",
            marginTop: "-3px",
            position: "absolute",
            right: 0,
            top: "50%"
          }
        }
      };

      var heading = _react2.default.createElement(
        _heading2.default,
        {
          level: 4,
          weight: "thick",
          importance: "normal",
          size: "small",
          caps: true
        },
        icon && _react2.default.createElement(_icon2.default, {
          name: icon,
          size: "small",
          inline: "before",
          color: background ? "" : "gray"
        }),
        title
      );

      var collapsibleHeading = _react2.default.createElement(
        "button",
        {
          style: styles.collapsibleHeading.base,
          onClick: this.onClick
        },
        heading,
        _react2.default.createElement(_icon2.default, {
          name: this.state.collapsed ? "triangle-down" : "triangle-up",
          style: styles.toggleIcon.base,
          label: "Expand"
        })
      );

      return _react2.default.createElement(
        "section",
        {
          className: (0, _classnames2.default)("SidebarSection", background && "SidebarSection--background", collapsed && "SidebarSection--expandable", modifier && "SidebarSection--" + modifier),
          style: [styles.container.base, collapsed && styles.container.collapsed, background && styles.container.background, contentType && styles.container[contentType]]
        },
        scopedStyles && _react2.default.createElement(_radium.Style, {
          scopeSelector: ".SidebarSection",
          rules: {
            ul: {
              listStyle: "none"
            }
          }
        }),
        _react2.default.createElement(
          "header",
          {
            className: "SidebarSection-header",
            style: styles.header.base
          },
          collapsed && collapsibleHeading,
          !collapsed && heading
        ),
        _react2.default.createElement(
          "div",
          {
            className: "SidebarSection-content",
            style: [!noMargin && styles.content.base, icon && styles.content.indented, collapsed && styles.content.collapsed, !this.state.collapsed && styles.content.expanded, contentType && styles.content[contentType]],
            "aria-hidden": this.state.collapsed
          },
          children
        )
      );
    }
  }]);

  return SidebarSection;
}(_react2.default.Component);

SidebarSection.propTypes = {
  /**
   * Content for the section
   */
  children: _react2.default.PropTypes.node.isRequired,

  /**
   * The name of the section
   */
  title: _react2.default.PropTypes.string.isRequired,

  /**
   * The name of an icon to be placed to the left of the title
   */
  icon: _react2.default.PropTypes.string,

  /**
   * Should the section be collapsed and expandable
   */
  collapsed: _react2.default.PropTypes.bool,

  /**
   * Should the section be boxed in with a blue background
   */
  background: _react2.default.PropTypes.bool,

  /**
   * Should the component include scoped styles (for user generated content)
   */
  scopedStyles: _react2.default.PropTypes.bool,

  /**
   * A modifier classname to be appended to base classname; usually this is used
   * as a layout styling hook within an SCSS file, so be careful when removing
   */
  modifier: _react2.default.PropTypes.string,

  /**
   * A keyword to define the type of content within `SidebarSection-content`,
   * used to provide additional styling
   */
  contentType: _react2.default.PropTypes.oneOf(["", "booking", "checkboxes", "map", "slider"]),

  /**
   * Should the component have top margin
   */
  noMargin: _react2.default.PropTypes.bool,

  /**
   * Denotes that this is the first section in the sidebar; removes the top
   * border and padding
   */
  first: _react2.default.PropTypes.bool
};

SidebarSection.defaultProps = {
  children: null,

  title: "",

  icon: "",

  collapsed: false,

  background: false,

  scopedStyles: false,

  modifier: "",

  contentType: "",

  noMargin: false,

  first: false
};

exports.default = (0, _radium2.default)(SidebarSection);