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

Official repo for Hack Oregon React component library

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) } })); }

import { useState, Children, useRef, Fragment } from "react";
import PropTypes from "prop-types";
import { jsx, css } from "@emotion/core";
var toggleStyle = css(_templateObject());
var arrowStyle = css(_templateObject2());
var hiddenStyle = css(_templateObject3());

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

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

  var cta = expanded ? "Less" : "More";
  var arrow = expanded ? "up" : "down";
  var unhiddenChildren = Children.toArray(children).filter(function (child) {
    return !child.props.hidden;
  });
  var hiddenChildren = 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 jsx(Fragment, null, unhiddenChildren, jsx("div", {
    css: hiddenStyle,
    role: "group",
    tabIndex: "-1",
    ref: hiddenRef
  }, expanded && hiddenChildren), hiddenChildren.length > 0 && jsx("button", {
    css: toggleStyle,
    onClick: function onClick() {
      return handleClick(expanded);
    },
    type: "button",
    "aria-live": "polite",
    ref: buttonRef
  }, cta, 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.node
};
export default Collapsable;