react-toggle-list/dist/react-toggle-list.cjs.dev.js

Provides easy toggle list with React.

'use strict';

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

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var rx = require('react-icons/rx');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

/**
 * @description Down Arrow component
 * @returns {JSX.Element}
 */
function ArrowDown() {
  return /*#__PURE__*/React__default["default"].createElement(rx.RxTriangleDown, {
    size: 25,
    style: {
      position: 'relative',
      left: -10
    }
  });
}
ArrowDown.displayName = 'ArrowDown';

/**
 * @description Right Arrow component
 * @returns {JSX.Element}
 */
function ArrowRight() {
  return /*#__PURE__*/React__default["default"].createElement(rx.RxTriangleRight, {
    size: 25,
    style: {
      position: 'relative',
      left: -10
    }
  });
}
ArrowRight.displayName = 'ArrowRight';

/**
 * @param {ToggleItem} items title & subItems -> ToggleItem
 * @description Toggle list Component
 * @returns {JSX.Element}
 */
function ToggleList(_ref) {
  var items = _ref.items,
    _ref$arrowDown = _ref.arrowDown,
    arrowDown = _ref$arrowDown === void 0 ? /*#__PURE__*/React__default["default"].createElement(ArrowDown, null) : _ref$arrowDown,
    _ref$arrowRight = _ref.arrowRight,
    arrowRight = _ref$arrowRight === void 0 ? /*#__PURE__*/React__default["default"].createElement(ArrowRight, null) : _ref$arrowRight;
  var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    show = _useState2[0],
    setShow = _useState2[1];
  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
    role: "button",
    className: "flex flex-row items-center cursor-pointer",
    onClick: function onClick() {
      return setShow(!show);
    }
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "w-6"
  }, show ? arrowDown : arrowRight), /*#__PURE__*/React__default["default"].createElement("p", null, items.title)), show && /*#__PURE__*/React__default["default"].createElement("div", {
    className: "flex flex-row mt-2",
    role: "list"
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "w-6"
  }), /*#__PURE__*/React__default["default"].createElement("div", null, items.subItems.map(function (subItem, index) {
    return /*#__PURE__*/React__default["default"].createElement("div", {
      role: "listitem",
      key: "item-".concat(subItem, "-").concat(index)
    }, subItem);
  }))));
}
ToggleList.displayName = 'ToggleList';

exports.ReactToggleList = ToggleList;