@bigbinary/neetoui/dist/Accordion.js

neetoUI drives the experience at all neeto products

import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { isEmpty } from 'ramda';
import { AnimatePresence, motion } from 'framer-motion';
import { Right } from '@bigbinary/neeto-icons';

var _excluded$1 = ["open", "children", "className"];
var Collapse = function Collapse(_ref) {
  var _ref$open = _ref.open,
    open = _ref$open === void 0 ? false : _ref$open,
    children = _ref.children,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    otherProps = _objectWithoutProperties(_ref, _excluded$1);
  return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(motion.div, _extends({
    animate: {
      opacity: 1,
      height: "auto"
    },
    exit: {
      opacity: 0,
      height: 0
    },
    initial: {
      opacity: 0,
      height: 0,
      overflow: "hidden"
    },
    transition: {
      duration: 0.3
    }
  }, otherProps), /*#__PURE__*/React__default.createElement("div", {
    className: className
  }, children)));
};

var Item = function Item(_ref) {
  var id = _ref.id,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? "" : _ref$title,
    _ref$isOpen = _ref.isOpen,
    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
    _ref$onClick = _ref.onClick,
    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
    children = _ref.children,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$titleProps = _ref.titleProps,
    titleProps = _ref$titleProps === void 0 ? {} : _ref$titleProps,
    _ref$iconProps = _ref.iconProps,
    iconProps = _ref$iconProps === void 0 ? {} : _ref$iconProps;
  var onKeyDown = function onKeyDown(e) {
    switch (e.key) {
      case " ":
      case "Enter":
        onClick();
        break;
    }
  };
  return /*#__PURE__*/React__default.createElement("div", {
    className: classnames("neeto-ui-accordion__wrapper", _defineProperty({}, className, className))
  }, /*#__PURE__*/React__default.createElement("div", {
    onClick: onClick,
    onKeyDown: onKeyDown,
    "aria-controls": "neeto-ui-accordion-section-".concat(id),
    "aria-disabled": isOpen,
    "aria-expanded": isOpen,
    id: "neeto-ui-accordion-item-".concat(id),
    role: "button",
    tabIndex: 0,
    className: classnames("neeto-ui-accordion__item neeto-ui-flex neeto-ui-justify-between neeto-ui-items-center", {
      "neeto-ui-accordion__item--open": isOpen
    })
  }, /*#__PURE__*/React__default.createElement("div", _extends({}, titleProps, {
    className: "neeto-ui-accordion__item-handle neeto-ui-flex neeto-ui-flex-grow neeto-ui-items-center neeto-ui-break-words"
  }), title), /*#__PURE__*/React__default.createElement(motion.div, {
    animate: isOpen ? "open" : "collapsed",
    className: "neeto-ui-accordion__item-toggle-icon neeto-ui-flex-grow-0",
    transition: {
      duration: 0.3
    },
    variants: {
      open: {
        rotate: 90
      },
      collapsed: {
        rotate: 0
      }
    }
  }, /*#__PURE__*/React__default.createElement(Right, _extends({
    size: 16
  }, iconProps)))), /*#__PURE__*/React__default.createElement(Collapse, {
    "aria-labelledby": "neeto-ui-accordion-item-".concat(id),
    className: "neeto-ui-accordion__drop",
    id: "neeto-ui-accordion-section-".concat(id),
    open: isOpen,
    role: "region"
  }, children));
};
Item.displayName = "Accordion.Item";

var _excluded = ["children", "defaultActiveKey", "padded", "style", "className"];
var ACCORDION_STYLES = {
  primary: "primary",
  secondary: "secondary"
};
var Accordion = function Accordion(_ref) {
  var children = _ref.children,
    _ref$defaultActiveKey = _ref.defaultActiveKey,
    defaultActiveKey = _ref$defaultActiveKey === void 0 ? null : _ref$defaultActiveKey,
    _ref$padded = _ref.padded,
    padded = _ref$padded === void 0 ? false : _ref$padded,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? ACCORDION_STYLES.primary : _ref$style,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(defaultActiveKey),
    _useState2 = _slicedToArray(_useState, 2),
    openTab = _useState2[0],
    setOpenTab = _useState2[1];
  useEffect(function () {
    setOpenTab(defaultActiveKey);
  }, [defaultActiveKey]);
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: classnames("neeto-ui-accordions-outer-wrapper", _defineProperty({
      "neeto-ui-accordions-outer-wrapper--padded": padded,
      "neeto-ui-accordions-outer-wrapper--secondary": style === ACCORDION_STYLES.secondary
    }, className, className))
  }, otherProps), React__default.Children.map(children, function (child, index) {
    var isSingleOrLastChild = isEmpty(children) || index === children.length - 1;
    return /*#__PURE__*/React__default.cloneElement(child, {
      id: index,
      key: index,
      isOpen: openTab === index,
      className: classnames(child.props.className, {
        "neeto-ui-accordion__wrapper--last-item": isSingleOrLastChild
      }),
      onClick: function onClick() {
        setOpenTab(openTab === index ? null : index);
        child.props.onClick && child.props.onClick();
      }
    });
  }));
};
Accordion.Item = Item;

export { Accordion as default };
//# sourceMappingURL=Accordion.js.map