@hackoregon/component-library/dist/Collapsable/Collapsable.js

Official repo for Hack Oregon React component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = require("react");

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

var _core = require("@emotion/core");

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

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  outline: 0;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  display: block;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  background: none;\n  color: rgb(30, 98, 189);\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n  padding: 10px;\n  border-bottom: none;\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: 10px;\n  display: block;\n  text-align: center;\n  font-family: \"Rubik\", sans-serif;\n  font-weight: 500;\n  font-size: 1em;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var toggleStyle = (0, _core.css)(_templateObject());
var arrowStyle = (0, _core.css)(_templateObject2());
var hiddenStyle = (0, _core.css)(_templateObject3());

function Collapsable(_ref) {
  var children = _ref.children;
  var hiddenRef = (0, _react.useRef)(null);
  var buttonRef = (0, _react.useRef)(null);

  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      expanded = _useState2[0],
      setExpanded = _useState2[1];

  var cta = expanded ? "Less" : "More";
  var arrow = expanded ? "up" : "down";

  var unhiddenChildren = _react.Children.toArray(children).filter(function (child) {
    return !child.props.hidden;
  });

  var hiddenChildren = _react.Children.toArray(children).filter(function (child) {
    return child.props.hidden;
  });

  function handleClick(isExpanded) {
    setExpanded(!isExpanded);

    if (isExpanded) {
      buttonRef.current.focus();
    } else {
      hiddenRef.current.focus();
    }
  }

  return (0, _core.jsx)(_react.Fragment, null, unhiddenChildren, (0, _core.jsx)("div", {
    css: hiddenStyle,
    role: "group",
    tabIndex: "-1",
    ref: hiddenRef
  }, expanded && hiddenChildren), hiddenChildren.length > 0 && (0, _core.jsx)("button", {
    css: toggleStyle,
    onClick: function onClick() {
      return handleClick(expanded);
    },
    type: "button",
    "aria-live": "polite",
    ref: buttonRef
  }, cta, (0, _core.jsx)("span", {
    css: arrowStyle,
    className: "fa fa-arrow-".concat(arrow),
    "aria-hidden": "true"
  })));
}

var Section = function Section(_ref2) {
  var children = _ref2.children;
  return children;
};

Collapsable.Section = Section;
Collapsable.propTypes = {
  children: _propTypes["default"].node
};
var _default = Collapsable;
exports["default"] = _default;