react-toggle-list/dist/react-toggle-list.esm.js

Provides easy toggle list with React.

import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import React, { useState } from 'react';
import { RxTriangleDown, RxTriangleRight } from 'react-icons/rx';

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

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

export { ToggleList as ReactToggleList };