zoapp-ui/components/expansionPanel.js

Javascript ES7 React UI Material Components extensions

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _zrmc = require("zrmc");

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

var ExpansionPanel = function (_Component) {
  (0, _inherits3.default)(ExpansionPanel, _Component);

  function ExpansionPanel(props) {
    (0, _classCallCheck3.default)(this, ExpansionPanel);

    var _this = (0, _possibleConstructorReturn3.default)(this, (ExpansionPanel.__proto__ || Object.getPrototypeOf(ExpansionPanel)).call(this, props));

    _initialiseProps.call(_this);

    var collapsed = props.collapsed;

    _this.state = { collapsed: collapsed, rotate: false };
    return _this;
  }

  (0, _createClass3.default)(ExpansionPanel, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.icon) {
        this.icon.addEventListener("animationend", this.rotationDone);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.icon) {
        this.icon.removeEventListener("animationend", this.rotationDone);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          label = _props.label,
          disabled = _props.disabled,
          compact = _props.compact,
          children = _props.children,
          style = _props.style,
          className = _props.className,
          elevation = _props.elevation,
          leftArrow = _props.leftArrow,
          description = _props.description;

      var sHeader = {};
      var sPanel = { display: "block", overflow: "hidden" };
      var cn = "zui-expansion ";
      if (className) {
        cn += className;
      }
      if (leftArrow) {
        cn += "zui-expansion-leftarrow " + cn;
      }
      var rotate = this.state.rotate;

      var expanded = !this.state.collapsed || rotate;
      if (expanded) {
        sPanel.height = "100%";
        if (compact) {
          sHeader.height = "48px";
          sHeader.paddingTop = "0px";
        } else {
          sHeader.height = "64px";
          sHeader.paddingTop = "4px";
        }
      } else {
        sPanel.height = "0px";
      }

      var st = (0, _extends3.default)({}, style);
      if (elevation > 0) {
        cn += " mdc-elevation--z" + elevation;
        if (!st.margin) {
          st.margin = "8px";
        }
      }
      var animation = rotate ? "rotate-arrow 150ms" : null;
      sPanel.transition = "height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms";
      sHeader.transition = "height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms";

      var icon = expanded ? "keyboard_arrow_up" : "keyboard_arrow_down";
      var desc = description ? _react2.default.createElement(
        "div",
        { className: "zui-expansion-description" },
        description
      ) : "";
      return _react2.default.createElement(
        "div",
        { className: cn, style: st },
        _react2.default.createElement(
          "div",
          {
            style: sHeader,
            className: "zui-expansion-header",
            onClick: function onClick(e) {
              e.preventDefault();
              if (!disabled) {
                _this2.onSwitch();
              }
            }
          },
          _react2.default.createElement(
            "div",
            {
              className: "zui-expansion-arrow",
              ref: function ref(e) {
                if (e) {
                  _this2.icon = e.firstChild;
                } else {
                  _this2.icon = null;
                }
              }
            },
            _react2.default.createElement(_zrmc.Icon, {
              name: icon,
              className: "zui-expansion-arrow-icon",
              style: {
                animation: animation,
                fontSize: "24px",
                textAlign: "center",
                paddingTop: "8px"
              },
              disabled: disabled
            })
          ),
          _react2.default.createElement(
            "div",
            { style: { display: "flex", width: "100%" } },
            _react2.default.createElement(
              "div",
              {
                className: "zui-expansion-title",
                style: description ? { width: "33%" } : null
              },
              label
            ),
            desc
          )
        ),
        _react2.default.createElement(
          "div",
          {
            style: sPanel,
            className: "zui-expansion-content",
            ref: function ref(e) {
              _this2.panel = e;
            }
          },
          children
        )
      );
    }
  }]);
  return ExpansionPanel;
}(_react.Component); /**
                      * Copyright (c) 2015-present, CWB SAS
                      *
                      * This source code is licensed under the MIT license found in the
                      * LICENSE file in the root directory of this source tree.
                      */


var _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.rotationDone = function () {
    var collapsed = !_this3.state.collapsed;
    _this3.setState(function () {
      return {
        collapsed: collapsed,
        rotate: false
      };
    });
  };

  this.onSwitch = function () {
    _this3.setState({ rotate: true });
  };
};

ExpansionPanel.defaultProps = {
  collapsed: false,
  disabled: false,
  elevation: 1,
  compact: false,
  leftArrow: false
};

ExpansionPanel.propTypes = {
  collapsed: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool,
  compact: _propTypes2.default.bool,
  leftArrow: _propTypes2.default.bool,
  label: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.string]).isRequired,
  description: _propTypes2.default.string,
  style: _propTypes2.default.shape({}),
  className: _propTypes2.default.string,
  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]).isRequired,
  elevation: _propTypes2.default.number
};

exports.default = ExpansionPanel;