@insticc/genericform 1.0.11 → 2.0.0

package/build/Demo2.js

@@ -0,0 +1,495 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _index = _interopRequireDefault(require("./index"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
+ * @file Demo2.jsx
+ * GenericForm with full external state management.
+ *
+ * Mount anywhere:  <Demo2 />
+ */
+// ── Option sets ───────────────────────────────────────────────────────────────
+var COUNTRIES = [{
+  value: 'PT',
+  text: 'Portugal'
+}, {
+  value: 'ES',
+  text: 'Spain'
+}, {
+  value: 'FR',
+  text: 'France'
+}, {
+  value: 'DE',
+  text: 'Germany'
+}];
+var PRIORITY_OPTIONS = [{
+  value: 'low',
+  text: 'Low'
+}, {
+  value: 'medium',
+  text: 'Medium'
+}, {
+  value: 'high',
+  text: 'High'
+}];
+var CITY_BY_COUNTRY = {
+  PT: 'Lisbon',
+  ES: 'Madrid',
+  FR: 'Paris',
+  DE: 'Berlin'
+};
+
+// ── Initial values ────────────────────────────────────────────────────────────
+var INITIAL = {
+  firstName: '',
+  lastName: '',
+  email: '',
+  age: '',
+  country: '',
+  city: '',
+  priority: 'medium',
+  notify: false,
+  notifyEmail: '',
+  notes: '',
+  perms: ['read']
+};
+
+// ── Component ─────────────────────────────────────────────────────────────────
+var Demo2 = function Demo2() {
+  var _useState = (0, _react.useState)(INITIAL),
+    _useState2 = _slicedToArray(_useState, 2),
+    formState = _useState2[0],
+    setFormState = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fieldLog = _useState4[0],
+    setFieldLog = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    submitted = _useState6[0],
+    setSubmitted = _useState6[1];
+
+  // ── Handlers ────────────────────────────────────────────────────────────────
+
+  // onDataChange — full snapshot; becomes the new formState
+  var handleDataChange = (0, _react.useCallback)(function (data) {
+    setFormState(data);
+  }, []);
+
+  // onFieldChange — per-field reactions (dependent fields, logging)
+  var handleFieldChange = (0, _react.useCallback)(function (_ref) {
+    var name = _ref.name,
+      value = _ref.value,
+      option = _ref.option;
+    // Dependent field: auto-fill city when country is selected
+    if (name === 'country') {
+      setFormState(function (prev) {
+        var _CITY_BY_COUNTRY$valu;
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          city: (_CITY_BY_COUNTRY$valu = CITY_BY_COUNTRY[value]) !== null && _CITY_BY_COUNTRY$valu !== void 0 ? _CITY_BY_COUNTRY$valu : ''
+        });
+      });
+    }
+    setFieldLog(function (prev) {
+      return [{
+        time: new Date().toLocaleTimeString(),
+        name: name,
+        value: _typeof(value) === 'object' ? JSON.stringify(value) : String(value !== null && value !== void 0 ? value : ''),
+        option: option ? JSON.stringify(option) : undefined
+      }].concat(_toConsumableArray(prev)).slice(0, 10);
+    });
+  }, []);
+
+  // Parent actions that write directly to formState
+  var loadProfile = function loadProfile() {
+    return setFormState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        firstName: 'Maria',
+        lastName: 'Santos',
+        email: 'maria@demo.com',
+        age: 34,
+        country: 'PT',
+        city: 'Lisbon',
+        priority: 'high',
+        notify: true,
+        notifyEmail: 'alerts@demo.com'
+      });
+    });
+  };
+  var resetForm = function resetForm() {
+    return setFormState(INITIAL);
+  };
+  var clearField = function clearField(name) {
+    return setFormState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, name, ''));
+    });
+  };
+
+  // ── Fields — every value comes from formState ────────────────────────────────
+  var fields = [{
+    name: 'sep0',
+    type: 'hr'
+  }, {
+    name: 'lbl0',
+    type: 'label',
+    displayName: 'Personal info'
+  }, {
+    name: 'firstName',
+    type: 'text',
+    displayName: 'First name',
+    required: true,
+    inline: true,
+    value: formState.firstName
+  }, {
+    name: 'lastName',
+    type: 'text',
+    displayName: 'Last name',
+    required: true,
+    inline: true,
+    value: formState.lastName
+  }, {
+    name: 'email',
+    type: 'email',
+    displayName: 'Email',
+    required: true,
+    value: formState.email,
+    validate: function validate(v) {
+      return v && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? 'Invalid email' : null;
+    }
+  }, {
+    name: 'age',
+    type: 'int',
+    displayName: 'Age',
+    value: formState.age,
+    min: 0,
+    max: 120
+  }, {
+    name: 'sep1',
+    type: 'hr'
+  }, {
+    name: 'lbl1',
+    type: 'label',
+    displayName: 'Preferences'
+  }, {
+    name: 'country',
+    type: 'select',
+    displayName: 'Country',
+    required: true,
+    value: formState.country,
+    options: COUNTRIES
+  }, {
+    name: 'city',
+    type: 'text',
+    displayName: 'City (auto-filled)',
+    value: formState.city,
+    disabled: true
+  }, {
+    name: 'priority',
+    type: 'radioGroup',
+    displayName: 'Priority',
+    value: formState.priority,
+    options: PRIORITY_OPTIONS
+  }, {
+    name: 'notify',
+    type: 'toggle',
+    displayName: 'Enable notifications',
+    value: formState.notify
+  }, {
+    name: 'notifyEmail',
+    type: 'email',
+    displayName: 'Notification email',
+    value: formState.notifyEmail,
+    hide: function hide(fd) {
+      return !fd.notify;
+    },
+    validate: function validate(v, fd) {
+      return fd.notify && !v ? 'Required when notifications are on' : null;
+    }
+  }, {
+    name: 'sep2',
+    type: 'hr'
+  }, {
+    name: 'notes',
+    type: 'textArea',
+    displayName: 'Notes',
+    value: formState.notes,
+    rows: 3,
+    maxLength: 500
+  }, {
+    name: 'sep3',
+    type: 'hr'
+  }, {
+    name: 'lbl3',
+    type: 'label',
+    displayName: 'Access'
+  }, {
+    name: 'perms',
+    type: 'checkboxGroup',
+    displayName: 'Permissions',
+    value: formState.perms,
+    options: [{
+      name: 'read',
+      label: 'Read'
+    }, {
+      name: 'write',
+      label: 'Write'
+    }, {
+      name: 'delete',
+      label: 'Delete'
+    }]
+  }, {
+    name: 'sep4',
+    type: 'hr'
+  }, {
+    name: 'lbl4',
+    type: 'label',
+    displayName: 'Advanced'
+  }, {
+    name: 'advanced',
+    type: 'accordion',
+    defaultOpen: false,
+    sections: [{
+      title: 'Config',
+      icon: '⚙️',
+      content: /*#__PURE__*/React.createElement("p", {
+        style: {
+          fontSize: '0.85rem',
+          color: '#555'
+        }
+      }, "Config fields go here.")
+    }, {
+      title: 'Danger zone',
+      icon: '⚠️',
+      content: /*#__PURE__*/React.createElement("p", {
+        style: {
+          fontSize: '0.85rem',
+          color: '#db2828'
+        }
+      }, "Destructive actions.")
+    }]
+  }];
+
+  // ── Derived ─────────────────────────────────────────────────────────────────
+  var required = ['firstName', 'lastName', 'email', 'country'];
+  var filled = required.filter(function (k) {
+    return formState[k];
+  });
+  var pct = Math.round(filled.length / required.length * 100);
+
+  // ── JSX ─────────────────────────────────────────────────────────────────────
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 960,
+      margin: '2rem auto',
+      fontFamily: 'sans-serif',
+      display: 'grid',
+      gridTemplateColumns: '1fr 320px',
+      gap: 24,
+      alignItems: 'start'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      fontSize: '1.3rem',
+      marginBottom: '0.25rem'
+    }
+  }, "Demo 2 \u2014 formState as field values"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: '#666',
+      fontSize: '0.85rem',
+      marginBottom: '1rem'
+    }
+  }, "Every ", /*#__PURE__*/React.createElement("code", null, "field.value"), " reads from ", /*#__PURE__*/React.createElement("code", null, "formState"), ".", /*#__PURE__*/React.createElement("code", null, "onDataChange"), " keeps it in sync. Parent actions write directly to ", /*#__PURE__*/React.createElement("code", null, "formState"), "."), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8,
+      marginBottom: '1.25rem',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: loadProfile,
+    style: {
+      padding: '6px 12px',
+      fontSize: '0.8rem',
+      cursor: 'pointer',
+      borderRadius: 5,
+      background: '#2185d0',
+      color: '#fff',
+      border: 'none'
+    }
+  }, "Load profile"), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return clearField('email');
+    },
+    style: {
+      padding: '6px 12px',
+      fontSize: '0.8rem',
+      cursor: 'pointer',
+      borderRadius: 5,
+      background: '#fff',
+      border: '1px solid #ccc'
+    }
+  }, "Clear email"), /*#__PURE__*/React.createElement("button", {
+    onClick: resetForm,
+    style: {
+      padding: '6px 12px',
+      fontSize: '0.8rem',
+      cursor: 'pointer',
+      borderRadius: 5,
+      background: '#fff',
+      border: '1px solid #ccc'
+    }
+  }, "Reset all")), /*#__PURE__*/React.createElement(_index["default"], {
+    title: "User profile",
+    fields: fields,
+    submitText: "Save profile",
+    cancelText: "Reset all",
+    validateOnChange: true,
+    validateOnSubmit: true,
+    onDataChange: handleDataChange,
+    onFieldChange: handleFieldChange,
+    onSubmit: function onSubmit(data) {
+      return setSubmitted(data);
+    },
+    onCancel: resetForm
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'sticky',
+      top: 16,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f9f9f9',
+      border: '1px solid #e0e0e0',
+      borderRadius: 8,
+      padding: '12px 14px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: '0.78rem',
+      fontWeight: 600,
+      marginBottom: 6,
+      color: '#444'
+    }
+  }, "Required \u2014 ", pct, "%"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#e0e0e0',
+      borderRadius: 4,
+      height: 8,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(pct, "%"),
+      height: '100%',
+      transition: 'width .3s',
+      background: pct === 100 ? '#21ba45' : '#2185d0'
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f9f9f9',
+      border: '1px solid #e0e0e0',
+      borderRadius: 8,
+      padding: '12px 14px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: '0.78rem',
+      fontWeight: 600,
+      marginBottom: 6,
+      color: '#444'
+    }
+  }, "formState (parent)"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      fontSize: '0.7rem',
+      maxHeight: 240,
+      overflow: 'auto',
+      margin: 0,
+      color: '#222'
+    }
+  }, JSON.stringify(formState, null, 2))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f9f9f9',
+      border: '1px solid #e0e0e0',
+      borderRadius: 8,
+      padding: '12px 14px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: '0.78rem',
+      fontWeight: 600,
+      marginBottom: 6,
+      color: '#444'
+    }
+  }, "onFieldChange log"), fieldLog.length === 0 ? /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: '0.75rem',
+      color: '#888',
+      margin: 0
+    }
+  }, "No changes yet.") : fieldLog.map(function (e, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      style: {
+        fontSize: '0.7rem',
+        borderBottom: '0.5px solid #eee',
+        paddingBottom: 3,
+        marginBottom: 3
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: '#aaa'
+      }
+    }, e.time), ' ', /*#__PURE__*/React.createElement("strong", null, e.name), " \u2192 ", /*#__PURE__*/React.createElement("code", null, e.value), e.option && /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: '#888',
+        fontSize: '0.65rem'
+      }
+    }, "option: ", e.option));
+  })), submitted && /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f0f8f0',
+      border: '1px solid #b2dfb2',
+      borderRadius: 8,
+      padding: '12px 14px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: '0.78rem',
+      fontWeight: 600,
+      marginBottom: 6,
+      color: '#2d6a2d'
+    }
+  }, "\u2713 Submitted"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      fontSize: '0.7rem',
+      maxHeight: 200,
+      overflow: 'auto',
+      margin: 0,
+      color: '#222'
+    }
+  }, JSON.stringify(submitted, null, 2)))));
+};
+var _default = exports["default"] = Demo2;

package/build/FormFields/CustomAccordion.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _semanticUiReact = require("semantic-ui-react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var CustomAccordion = function CustomAccordion(_ref) {
+  var name = _ref.name,
+    _ref$sections = _ref.sections,
+    sections = _ref$sections === void 0 ? [] : _ref$sections,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    _ref$activeAllIndex = _ref.activeAllIndex,
+    activeAllIndex = _ref$activeAllIndex === void 0 ? false : _ref$activeAllIndex,
+    _ref$mainDivStyle = _ref.mainDivStyle,
+    mainDivStyle = _ref$mainDivStyle === void 0 ? {} : _ref$mainDivStyle,
+    _ref$inputStyle = _ref.inputStyle,
+    inputStyle = _ref$inputStyle === void 0 ? {} : _ref$inputStyle;
+  var allIndices = sections.map(function (_, i) {
+    return i;
+  });
+  var _useState = (0, _react.useState)(activeAllIndex ? allIndices : defaultOpen ? [0] : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var handleClick = function handleClick(_, _ref2) {
+    var index = _ref2.index;
+    return setActiveIndex(function (prev) {
+      return prev.includes(index) ? prev.filter(function (i) {
+        return i !== index;
+      }) : [].concat(_toConsumableArray(prev), [index]);
+    });
+  };
+  var renderContent = function renderContent(content) {
+    var _content$;
+    if (!Array.isArray(content)) return content;
+    // Legacy {label, value} row format
+    if (content.length > 0 && ((_content$ = content[0]) === null || _content$ === void 0 ? void 0 : _content$.label) !== undefined) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "ef-accordion-content"
+      }, content.map(function (item, idx) {
+        var _item$value;
+        return item.label === '---' ? /*#__PURE__*/React.createElement("hr", {
+          key: idx
+        }) : /*#__PURE__*/React.createElement("div", {
+          className: "ef-info-row",
+          key: idx
+        }, /*#__PURE__*/React.createElement("strong", null, item.label), /*#__PURE__*/React.createElement("span", null, (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 'N/A'));
+      }));
+    }
+    return content;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: name,
+    style: mainDivStyle
+  }, /*#__PURE__*/React.createElement(_semanticUiReact.Accordion, {
+    fluid: true,
+    styled: true,
+    className: "ef-accordion",
+    style: inputStyle
+  }, sections.map(function (section, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React.createElement(_semanticUiReact.Accordion.Title, {
+      active: activeIndex.includes(index),
+      index: index,
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement(_semanticUiReact.Icon, {
+      name: "dropdown"
+    }), section.icon && /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, section.icon), section.title), /*#__PURE__*/React.createElement(_semanticUiReact.Accordion.Content, {
+      active: activeIndex.includes(index)
+    }, renderContent(section.content)));
+  })));
+};
+CustomAccordion.propTypes = {
+  name: _propTypes["default"].string.isRequired,
+  sections: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    icon: _propTypes["default"].node,
+    content: _propTypes["default"].node
+  })),
+  accordionStates: _propTypes["default"].object,
+  onToggle: _propTypes["default"].func,
+  mainDivStyle: _propTypes["default"].object,
+  inputStyle: _propTypes["default"].object
+};
+var _default = exports["default"] = CustomAccordion;