@veeyaainnovatives/accordion 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +193 -0
- package/dist/index.esm.js +101 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +118 -0
- package/dist/index.js.map +1 -0
- package/package.json +54 -0
package/README.md
ADDED
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
# @veeyaainnovatives/accordion
|
|
2
|
+
|
|
3
|
+
A reusable Accordion component for React applications, built on top of react-bootstrap.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @veeyaainnovatives/accordion --save
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Peer Dependencies
|
|
12
|
+
|
|
13
|
+
This package requires the following peer dependencies:
|
|
14
|
+
|
|
15
|
+
- `react` (^16.8.0 || ^17.0.0 || ^18.0.0)
|
|
16
|
+
- `react-dom` (^16.8.0 || ^17.0.0 || ^18.0.0)
|
|
17
|
+
- `react-bootstrap` (^2.0.0)
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### Method 1: Using Items Array (Simple)
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
import { Accordion } from '@veeyaainnovatives/accordion';
|
|
25
|
+
|
|
26
|
+
function App() {
|
|
27
|
+
const items = [
|
|
28
|
+
{
|
|
29
|
+
eventKey: 'item-1',
|
|
30
|
+
header: 'First Item',
|
|
31
|
+
body: 'Content for first item'
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
eventKey: 'item-2',
|
|
35
|
+
header: 'Second Item',
|
|
36
|
+
body: 'Content for second item'
|
|
37
|
+
}
|
|
38
|
+
];
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<Accordion
|
|
42
|
+
items={items}
|
|
43
|
+
defaultActiveKey="item-1"
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Method 2: Using Children (Full Customization)
|
|
50
|
+
|
|
51
|
+
```jsx
|
|
52
|
+
import { Accordion, BootstrapAccordion, AccordionItem, AccordionHeader, AccordionBody } from '@veeyaainnovatives/accordion';
|
|
53
|
+
|
|
54
|
+
function App() {
|
|
55
|
+
return (
|
|
56
|
+
<Accordion defaultActiveKey="0" className="accordion">
|
|
57
|
+
<AccordionItem eventKey="step-1">
|
|
58
|
+
<AccordionHeader>
|
|
59
|
+
<div className="w-100">
|
|
60
|
+
<h1 className="accordian-title">Step 1 - Project Information</h1>
|
|
61
|
+
</div>
|
|
62
|
+
</AccordionHeader>
|
|
63
|
+
<AccordionBody>
|
|
64
|
+
<div className="faq-content">
|
|
65
|
+
<p>Your custom content here</p>
|
|
66
|
+
</div>
|
|
67
|
+
</AccordionBody>
|
|
68
|
+
</AccordionItem>
|
|
69
|
+
|
|
70
|
+
<AccordionItem eventKey="step-2">
|
|
71
|
+
<AccordionHeader>
|
|
72
|
+
<h1>Step 2</h1>
|
|
73
|
+
</AccordionHeader>
|
|
74
|
+
<AccordionBody>
|
|
75
|
+
<p>More content</p>
|
|
76
|
+
</AccordionBody>
|
|
77
|
+
</AccordionItem>
|
|
78
|
+
</Accordion>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Props
|
|
84
|
+
|
|
85
|
+
### Accordion Component Props
|
|
86
|
+
|
|
87
|
+
| Prop | Type | Default | Description |
|
|
88
|
+
|------|------|---------|-------------|
|
|
89
|
+
| `items` | `Array` | `[]` | Array of accordion items (when using items array method) |
|
|
90
|
+
| `defaultActiveKey` | `string\|number\|Array` | `undefined` | Default active accordion item(s) |
|
|
91
|
+
| `className` | `string` | `""` | Additional CSS classes for the accordion |
|
|
92
|
+
| `accordionStyle` | `object` | `{}` | Custom styles for the accordion |
|
|
93
|
+
| `alwaysOpen` | `boolean` | `false` | Allow multiple items to be open at once |
|
|
94
|
+
| `flush` | `boolean` | `false` | Remove the default background color, borders, and rounded corners |
|
|
95
|
+
| `onSelect` | `function` | `undefined` | Callback fired when an accordion item is selected |
|
|
96
|
+
| `children` | `ReactNode` | `undefined` | Direct children (for full customization) |
|
|
97
|
+
|
|
98
|
+
### Item Object Structure (when using items array)
|
|
99
|
+
|
|
100
|
+
| Property | Type | Description |
|
|
101
|
+
|----------|------|-------------|
|
|
102
|
+
| `eventKey` | `string\|number` | Unique key for the accordion item |
|
|
103
|
+
| `key` | `string\|number` | Alternative to eventKey |
|
|
104
|
+
| `header` | `ReactNode\|string` | Header content (or use `title`) |
|
|
105
|
+
| `title` | `ReactNode\|string` | Alternative to header |
|
|
106
|
+
| `body` | `ReactNode\|string` | Body content (or use `content` or `children`) |
|
|
107
|
+
| `content` | `ReactNode\|string` | Alternative to body |
|
|
108
|
+
| `children` | `ReactNode` | Alternative to body |
|
|
109
|
+
| `component` | `Component` | Custom component for Accordion.Item (defaults to BootstrapAccordion.Item) |
|
|
110
|
+
| `headerComponent` | `Component` | Custom component for Accordion.Header (defaults to BootstrapAccordion.Header) |
|
|
111
|
+
| `bodyComponent` | `Component` | Custom component for Accordion.Body (defaults to BootstrapAccordion.Body) |
|
|
112
|
+
| `itemProps` | `object` | Additional props for Accordion.Item |
|
|
113
|
+
| `headerProps` | `object` | Additional props for Accordion.Header |
|
|
114
|
+
| `bodyProps` | `object` | Additional props for Accordion.Body |
|
|
115
|
+
|
|
116
|
+
## Examples
|
|
117
|
+
|
|
118
|
+
### Basic Usage with Items
|
|
119
|
+
|
|
120
|
+
```jsx
|
|
121
|
+
<Accordion
|
|
122
|
+
items={[
|
|
123
|
+
{ eventKey: '1', header: 'Item 1', body: 'Content 1' },
|
|
124
|
+
{ eventKey: '2', header: 'Item 2', body: 'Content 2' }
|
|
125
|
+
]}
|
|
126
|
+
defaultActiveKey="1"
|
|
127
|
+
/>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### With Custom Styling
|
|
131
|
+
|
|
132
|
+
```jsx
|
|
133
|
+
<Accordion
|
|
134
|
+
items={items}
|
|
135
|
+
className="custom-accordion"
|
|
136
|
+
accordionStyle={{ marginTop: '20px' }}
|
|
137
|
+
/>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Multiple Items Open
|
|
141
|
+
|
|
142
|
+
```jsx
|
|
143
|
+
<Accordion
|
|
144
|
+
items={items}
|
|
145
|
+
alwaysOpen={true}
|
|
146
|
+
defaultActiveKey={['0', '1']}
|
|
147
|
+
/>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Full Customization with Children
|
|
151
|
+
|
|
152
|
+
```jsx
|
|
153
|
+
import { Accordion, AccordionItem, AccordionHeader, AccordionBody } from '@veeyaainnovatives/accordion';
|
|
154
|
+
|
|
155
|
+
<Accordion defaultActiveKey="0">
|
|
156
|
+
<AccordionItem eventKey="0">
|
|
157
|
+
<AccordionHeader>
|
|
158
|
+
<div className="w-100">
|
|
159
|
+
<h1 className="custom-title">Custom Header</h1>
|
|
160
|
+
</div>
|
|
161
|
+
</AccordionHeader>
|
|
162
|
+
<AccordionBody>
|
|
163
|
+
<div className="custom-content">
|
|
164
|
+
<p>Fully customized content</p>
|
|
165
|
+
</div>
|
|
166
|
+
</AccordionBody>
|
|
167
|
+
</AccordionItem>
|
|
168
|
+
</Accordion>
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### With JSX in Items
|
|
172
|
+
|
|
173
|
+
```jsx
|
|
174
|
+
<Accordion
|
|
175
|
+
items={[
|
|
176
|
+
{
|
|
177
|
+
eventKey: '1',
|
|
178
|
+
header: <h2>Custom Header</h2>,
|
|
179
|
+
body: (
|
|
180
|
+
<div>
|
|
181
|
+
<p>Custom body with JSX</p>
|
|
182
|
+
<button>Click me</button>
|
|
183
|
+
</div>
|
|
184
|
+
)
|
|
185
|
+
}
|
|
186
|
+
]}
|
|
187
|
+
/>
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
## License
|
|
191
|
+
|
|
192
|
+
MIT
|
|
193
|
+
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { Accordion as Accordion$1 } from 'react-bootstrap';
|
|
2
|
+
export { AccordionBody, AccordionHeader, AccordionItem, Accordion as BootstrapAccordion } from 'react-bootstrap';
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function _defineProperty(e, r, t) {
|
|
6
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
7
|
+
value: t,
|
|
8
|
+
enumerable: true,
|
|
9
|
+
configurable: true,
|
|
10
|
+
writable: true
|
|
11
|
+
}) : e[r] = t, e;
|
|
12
|
+
}
|
|
13
|
+
function ownKeys(e, r) {
|
|
14
|
+
var t = Object.keys(e);
|
|
15
|
+
if (Object.getOwnPropertySymbols) {
|
|
16
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
17
|
+
r && (o = o.filter(function (r) {
|
|
18
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
19
|
+
})), t.push.apply(t, o);
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
}
|
|
23
|
+
function _objectSpread2(e) {
|
|
24
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
25
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
26
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
|
|
27
|
+
_defineProperty(e, r, t[r]);
|
|
28
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
29
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
return e;
|
|
33
|
+
}
|
|
34
|
+
function _toPrimitive(t, r) {
|
|
35
|
+
if ("object" != typeof t || !t) return t;
|
|
36
|
+
var e = t[Symbol.toPrimitive];
|
|
37
|
+
if (void 0 !== e) {
|
|
38
|
+
var i = e.call(t, r);
|
|
39
|
+
if ("object" != typeof i) return i;
|
|
40
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
41
|
+
}
|
|
42
|
+
return ("string" === r ? String : Number)(t);
|
|
43
|
+
}
|
|
44
|
+
function _toPropertyKey(t) {
|
|
45
|
+
var i = _toPrimitive(t, "string");
|
|
46
|
+
return "symbol" == typeof i ? i : i + "";
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const Accordion = _ref => {
|
|
50
|
+
let {
|
|
51
|
+
items = [],
|
|
52
|
+
defaultActiveKey,
|
|
53
|
+
className = "",
|
|
54
|
+
accordionStyle = {},
|
|
55
|
+
alwaysOpen = false,
|
|
56
|
+
flush = false,
|
|
57
|
+
onSelect,
|
|
58
|
+
// Allow direct children for full customization
|
|
59
|
+
children
|
|
60
|
+
} = _ref;
|
|
61
|
+
// If children are provided, render them directly (for full customization)
|
|
62
|
+
if (children) {
|
|
63
|
+
return /*#__PURE__*/jsx(Accordion$1, {
|
|
64
|
+
defaultActiveKey: defaultActiveKey,
|
|
65
|
+
className: className,
|
|
66
|
+
style: accordionStyle,
|
|
67
|
+
alwaysOpen: alwaysOpen,
|
|
68
|
+
flush: flush,
|
|
69
|
+
onSelect: onSelect,
|
|
70
|
+
children: children
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// Otherwise, render items from the items array
|
|
75
|
+
return /*#__PURE__*/jsx(Accordion$1, {
|
|
76
|
+
defaultActiveKey: defaultActiveKey,
|
|
77
|
+
className: className,
|
|
78
|
+
style: accordionStyle,
|
|
79
|
+
alwaysOpen: alwaysOpen,
|
|
80
|
+
flush: flush,
|
|
81
|
+
onSelect: onSelect,
|
|
82
|
+
children: items.map((item, index) => {
|
|
83
|
+
const eventKey = item.eventKey || item.key || "item-".concat(index);
|
|
84
|
+
const ItemComponent = item.component || Accordion$1.Item;
|
|
85
|
+
const HeaderComponent = item.headerComponent || Accordion$1.Header;
|
|
86
|
+
const BodyComponent = item.bodyComponent || Accordion$1.Body;
|
|
87
|
+
return /*#__PURE__*/jsxs(ItemComponent, _objectSpread2(_objectSpread2({
|
|
88
|
+
eventKey: eventKey
|
|
89
|
+
}, item.itemProps || {}), {}, {
|
|
90
|
+
children: [/*#__PURE__*/jsx(HeaderComponent, _objectSpread2(_objectSpread2({}, item.headerProps || {}), {}, {
|
|
91
|
+
children: item.header || item.title || "Item ".concat(index + 1)
|
|
92
|
+
})), /*#__PURE__*/jsx(BodyComponent, _objectSpread2(_objectSpread2({}, item.bodyProps || {}), {}, {
|
|
93
|
+
children: item.body || item.content || item.children || null
|
|
94
|
+
}))]
|
|
95
|
+
}), eventKey);
|
|
96
|
+
})
|
|
97
|
+
});
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
export { Accordion };
|
|
101
|
+
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/Accordion.jsx"],"sourcesContent":["import { Accordion as BootstrapAccordion } from 'react-bootstrap';\r\n\r\nconst Accordion = ({\r\n items = [],\r\n defaultActiveKey,\r\n className = \"\",\r\n accordionStyle = {},\r\n alwaysOpen = false,\r\n flush = false,\r\n onSelect,\r\n // Allow direct children for full customization\r\n children\r\n}) => {\r\n // If children are provided, render them directly (for full customization)\r\n if (children) {\r\n return (\r\n <BootstrapAccordion\r\n defaultActiveKey={defaultActiveKey}\r\n className={className}\r\n style={accordionStyle}\r\n alwaysOpen={alwaysOpen}\r\n flush={flush}\r\n onSelect={onSelect}\r\n >\r\n {children}\r\n </BootstrapAccordion>\r\n );\r\n }\r\n\r\n // Otherwise, render items from the items array\r\n return (\r\n <BootstrapAccordion\r\n defaultActiveKey={defaultActiveKey}\r\n className={className}\r\n style={accordionStyle}\r\n alwaysOpen={alwaysOpen}\r\n flush={flush}\r\n onSelect={onSelect}\r\n >\r\n {items.map((item, index) => {\r\n const eventKey = item.eventKey || item.key || `item-${index}`;\r\n const ItemComponent = item.component || BootstrapAccordion.Item;\r\n const HeaderComponent = item.headerComponent || BootstrapAccordion.Header;\r\n const BodyComponent = item.bodyComponent || BootstrapAccordion.Body;\r\n\r\n return (\r\n <ItemComponent key={eventKey} eventKey={eventKey} {...(item.itemProps || {})}>\r\n <HeaderComponent {...(item.headerProps || {})}>\r\n {item.header || item.title || `Item ${index + 1}`}\r\n </HeaderComponent>\r\n <BodyComponent {...(item.bodyProps || {})}>\r\n {item.body || item.content || item.children || null}\r\n </BodyComponent>\r\n </ItemComponent>\r\n );\r\n })}\r\n </BootstrapAccordion>\r\n );\r\n};\r\n\r\nexport default Accordion;\r\n\r\n"],"names":["Accordion","_ref","items","defaultActiveKey","className","accordionStyle","alwaysOpen","flush","onSelect","children","_jsx","BootstrapAccordion","style","map","item","index","eventKey","key","concat","ItemComponent","component","Item","HeaderComponent","headerComponent","Header","BodyComponent","bodyComponent","Body","_jsxs","_objectSpread","itemProps","headerProps","header","title","bodyProps","body","content"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAMA,SAAS,GAAGC,IAAA,IAUZ;EAAA,IAVa;AACjBC,IAAAA,KAAK,GAAG,EAAE;IACVC,gBAAgB;AAChBC,IAAAA,SAAS,GAAG,EAAE;IACdC,cAAc,GAAG,EAAE;AACnBC,IAAAA,UAAU,GAAG,KAAK;AAClBC,IAAAA,KAAK,GAAG,KAAK;IACbC,QAAQ;AACR;AACAC,IAAAA;AACF,GAAC,GAAAR,IAAA;AACC;AACA,EAAA,IAAIQ,QAAQ,EAAE;IACZ,oBACEC,GAAA,CAACC,WAAkB,EAAA;AACjBR,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,MAAAA,SAAS,EAAEA,SAAU;AACrBQ,MAAAA,KAAK,EAAEP,cAAe;AACtBC,MAAAA,UAAU,EAAEA,UAAW;AACvBC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,QAAQ,EAAEA,QAAS;AAAAC,MAAAA,QAAA,EAElBA;AAAQ,KACS,CAAC;AAEzB,EAAA;;AAEA;EACA,oBACEC,GAAA,CAACC,WAAkB,EAAA;AACjBR,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,IAAAA,SAAS,EAAEA,SAAU;AACrBQ,IAAAA,KAAK,EAAEP,cAAe;AACtBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,QAAQ,EAAEA,QAAS;IAAAC,QAAA,EAElBP,KAAK,CAACW,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;AAC1B,MAAA,MAAMC,QAAQ,GAAGF,IAAI,CAACE,QAAQ,IAAIF,IAAI,CAACG,GAAG,IAAA,OAAA,CAAAC,MAAA,CAAYH,KAAK,CAAE;MAC7D,MAAMI,aAAa,GAAGL,IAAI,CAACM,SAAS,IAAIT,WAAkB,CAACU,IAAI;MAC/D,MAAMC,eAAe,GAAGR,IAAI,CAACS,eAAe,IAAIZ,WAAkB,CAACa,MAAM;MACzE,MAAMC,aAAa,GAAGX,IAAI,CAACY,aAAa,IAAIf,WAAkB,CAACgB,IAAI;AAEnE,MAAA,oBACEC,IAAA,CAACT,aAAa,EAAAU,cAAA,CAAAA,cAAA,CAAA;AAAgBb,QAAAA,QAAQ,EAAEA;AAAS,OAAA,EAAMF,IAAI,CAACgB,SAAS,IAAI,EAAE,CAAA,EAAA,EAAA,EAAA;AAAArB,QAAAA,QAAA,EAAA,cACzEC,GAAA,CAACY,eAAe,EAAAO,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAMf,IAAI,CAACiB,WAAW,IAAI,EAAE,CAAA,EAAA,EAAA,EAAA;AAAAtB,UAAAA,QAAA,EACzCK,IAAI,CAACkB,MAAM,IAAIlB,IAAI,CAACmB,KAAK,IAAA,OAAA,CAAAf,MAAA,CAAYH,KAAK,GAAG,CAAC;AAAE,SAAA,CAClC,CAAC,eAClBL,GAAA,CAACe,aAAa,EAAAI,cAAA,CAAAA,cAAA,KAAMf,IAAI,CAACoB,SAAS,IAAI,EAAE,CAAA,EAAA,EAAA,EAAA;AAAAzB,UAAAA,QAAA,EACrCK,IAAI,CAACqB,IAAI,IAAIrB,IAAI,CAACsB,OAAO,IAAItB,IAAI,CAACL,QAAQ,IAAI;AAAI,SAAA,CACtC,CAAC;AAAA,OAAA,CAAA,EANEO,QAOL,CAAC;IAEpB,CAAC;AAAC,GACgB,CAAC;AAEzB;;;;"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var reactBootstrap = require('react-bootstrap');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
|
|
6
|
+
function _defineProperty(e, r, t) {
|
|
7
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
8
|
+
value: t,
|
|
9
|
+
enumerable: true,
|
|
10
|
+
configurable: true,
|
|
11
|
+
writable: true
|
|
12
|
+
}) : e[r] = t, e;
|
|
13
|
+
}
|
|
14
|
+
function ownKeys(e, r) {
|
|
15
|
+
var t = Object.keys(e);
|
|
16
|
+
if (Object.getOwnPropertySymbols) {
|
|
17
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
18
|
+
r && (o = o.filter(function (r) {
|
|
19
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
20
|
+
})), t.push.apply(t, o);
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
}
|
|
24
|
+
function _objectSpread2(e) {
|
|
25
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
26
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
27
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
|
|
28
|
+
_defineProperty(e, r, t[r]);
|
|
29
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
30
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
return e;
|
|
34
|
+
}
|
|
35
|
+
function _toPrimitive(t, r) {
|
|
36
|
+
if ("object" != typeof t || !t) return t;
|
|
37
|
+
var e = t[Symbol.toPrimitive];
|
|
38
|
+
if (void 0 !== e) {
|
|
39
|
+
var i = e.call(t, r);
|
|
40
|
+
if ("object" != typeof i) return i;
|
|
41
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
42
|
+
}
|
|
43
|
+
return ("string" === r ? String : Number)(t);
|
|
44
|
+
}
|
|
45
|
+
function _toPropertyKey(t) {
|
|
46
|
+
var i = _toPrimitive(t, "string");
|
|
47
|
+
return "symbol" == typeof i ? i : i + "";
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const Accordion = _ref => {
|
|
51
|
+
let {
|
|
52
|
+
items = [],
|
|
53
|
+
defaultActiveKey,
|
|
54
|
+
className = "",
|
|
55
|
+
accordionStyle = {},
|
|
56
|
+
alwaysOpen = false,
|
|
57
|
+
flush = false,
|
|
58
|
+
onSelect,
|
|
59
|
+
// Allow direct children for full customization
|
|
60
|
+
children
|
|
61
|
+
} = _ref;
|
|
62
|
+
// If children are provided, render them directly (for full customization)
|
|
63
|
+
if (children) {
|
|
64
|
+
return /*#__PURE__*/jsxRuntime.jsx(reactBootstrap.Accordion, {
|
|
65
|
+
defaultActiveKey: defaultActiveKey,
|
|
66
|
+
className: className,
|
|
67
|
+
style: accordionStyle,
|
|
68
|
+
alwaysOpen: alwaysOpen,
|
|
69
|
+
flush: flush,
|
|
70
|
+
onSelect: onSelect,
|
|
71
|
+
children: children
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Otherwise, render items from the items array
|
|
76
|
+
return /*#__PURE__*/jsxRuntime.jsx(reactBootstrap.Accordion, {
|
|
77
|
+
defaultActiveKey: defaultActiveKey,
|
|
78
|
+
className: className,
|
|
79
|
+
style: accordionStyle,
|
|
80
|
+
alwaysOpen: alwaysOpen,
|
|
81
|
+
flush: flush,
|
|
82
|
+
onSelect: onSelect,
|
|
83
|
+
children: items.map((item, index) => {
|
|
84
|
+
const eventKey = item.eventKey || item.key || "item-".concat(index);
|
|
85
|
+
const ItemComponent = item.component || reactBootstrap.Accordion.Item;
|
|
86
|
+
const HeaderComponent = item.headerComponent || reactBootstrap.Accordion.Header;
|
|
87
|
+
const BodyComponent = item.bodyComponent || reactBootstrap.Accordion.Body;
|
|
88
|
+
return /*#__PURE__*/jsxRuntime.jsxs(ItemComponent, _objectSpread2(_objectSpread2({
|
|
89
|
+
eventKey: eventKey
|
|
90
|
+
}, item.itemProps || {}), {}, {
|
|
91
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(HeaderComponent, _objectSpread2(_objectSpread2({}, item.headerProps || {}), {}, {
|
|
92
|
+
children: item.header || item.title || "Item ".concat(index + 1)
|
|
93
|
+
})), /*#__PURE__*/jsxRuntime.jsx(BodyComponent, _objectSpread2(_objectSpread2({}, item.bodyProps || {}), {}, {
|
|
94
|
+
children: item.body || item.content || item.children || null
|
|
95
|
+
}))]
|
|
96
|
+
}), eventKey);
|
|
97
|
+
})
|
|
98
|
+
});
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
Object.defineProperty(exports, "AccordionBody", {
|
|
102
|
+
enumerable: true,
|
|
103
|
+
get: function () { return reactBootstrap.AccordionBody; }
|
|
104
|
+
});
|
|
105
|
+
Object.defineProperty(exports, "AccordionHeader", {
|
|
106
|
+
enumerable: true,
|
|
107
|
+
get: function () { return reactBootstrap.AccordionHeader; }
|
|
108
|
+
});
|
|
109
|
+
Object.defineProperty(exports, "AccordionItem", {
|
|
110
|
+
enumerable: true,
|
|
111
|
+
get: function () { return reactBootstrap.AccordionItem; }
|
|
112
|
+
});
|
|
113
|
+
Object.defineProperty(exports, "BootstrapAccordion", {
|
|
114
|
+
enumerable: true,
|
|
115
|
+
get: function () { return reactBootstrap.Accordion; }
|
|
116
|
+
});
|
|
117
|
+
exports.Accordion = Accordion;
|
|
118
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/Accordion.jsx"],"sourcesContent":["import { Accordion as BootstrapAccordion } from 'react-bootstrap';\r\n\r\nconst Accordion = ({\r\n items = [],\r\n defaultActiveKey,\r\n className = \"\",\r\n accordionStyle = {},\r\n alwaysOpen = false,\r\n flush = false,\r\n onSelect,\r\n // Allow direct children for full customization\r\n children\r\n}) => {\r\n // If children are provided, render them directly (for full customization)\r\n if (children) {\r\n return (\r\n <BootstrapAccordion\r\n defaultActiveKey={defaultActiveKey}\r\n className={className}\r\n style={accordionStyle}\r\n alwaysOpen={alwaysOpen}\r\n flush={flush}\r\n onSelect={onSelect}\r\n >\r\n {children}\r\n </BootstrapAccordion>\r\n );\r\n }\r\n\r\n // Otherwise, render items from the items array\r\n return (\r\n <BootstrapAccordion\r\n defaultActiveKey={defaultActiveKey}\r\n className={className}\r\n style={accordionStyle}\r\n alwaysOpen={alwaysOpen}\r\n flush={flush}\r\n onSelect={onSelect}\r\n >\r\n {items.map((item, index) => {\r\n const eventKey = item.eventKey || item.key || `item-${index}`;\r\n const ItemComponent = item.component || BootstrapAccordion.Item;\r\n const HeaderComponent = item.headerComponent || BootstrapAccordion.Header;\r\n const BodyComponent = item.bodyComponent || BootstrapAccordion.Body;\r\n\r\n return (\r\n <ItemComponent key={eventKey} eventKey={eventKey} {...(item.itemProps || {})}>\r\n <HeaderComponent {...(item.headerProps || {})}>\r\n {item.header || item.title || `Item ${index + 1}`}\r\n </HeaderComponent>\r\n <BodyComponent {...(item.bodyProps || {})}>\r\n {item.body || item.content || item.children || null}\r\n </BodyComponent>\r\n </ItemComponent>\r\n );\r\n })}\r\n </BootstrapAccordion>\r\n );\r\n};\r\n\r\nexport default Accordion;\r\n\r\n"],"names":["Accordion","_ref","items","defaultActiveKey","className","accordionStyle","alwaysOpen","flush","onSelect","children","_jsx","BootstrapAccordion","style","map","item","index","eventKey","key","concat","ItemComponent","component","Item","HeaderComponent","headerComponent","Header","BodyComponent","bodyComponent","Body","_jsxs","_objectSpread","itemProps","headerProps","header","title","bodyProps","body","content"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAMA,SAAS,GAAGC,IAAA,IAUZ;EAAA,IAVa;AACjBC,IAAAA,KAAK,GAAG,EAAE;IACVC,gBAAgB;AAChBC,IAAAA,SAAS,GAAG,EAAE;IACdC,cAAc,GAAG,EAAE;AACnBC,IAAAA,UAAU,GAAG,KAAK;AAClBC,IAAAA,KAAK,GAAG,KAAK;IACbC,QAAQ;AACR;AACAC,IAAAA;AACF,GAAC,GAAAR,IAAA;AACC;AACA,EAAA,IAAIQ,QAAQ,EAAE;IACZ,oBACEC,cAAA,CAACC,wBAAkB,EAAA;AACjBR,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,MAAAA,SAAS,EAAEA,SAAU;AACrBQ,MAAAA,KAAK,EAAEP,cAAe;AACtBC,MAAAA,UAAU,EAAEA,UAAW;AACvBC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,QAAQ,EAAEA,QAAS;AAAAC,MAAAA,QAAA,EAElBA;AAAQ,KACS,CAAC;AAEzB,EAAA;;AAEA;EACA,oBACEC,cAAA,CAACC,wBAAkB,EAAA;AACjBR,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,IAAAA,SAAS,EAAEA,SAAU;AACrBQ,IAAAA,KAAK,EAAEP,cAAe;AACtBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,QAAQ,EAAEA,QAAS;IAAAC,QAAA,EAElBP,KAAK,CAACW,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;AAC1B,MAAA,MAAMC,QAAQ,GAAGF,IAAI,CAACE,QAAQ,IAAIF,IAAI,CAACG,GAAG,IAAA,OAAA,CAAAC,MAAA,CAAYH,KAAK,CAAE;MAC7D,MAAMI,aAAa,GAAGL,IAAI,CAACM,SAAS,IAAIT,wBAAkB,CAACU,IAAI;MAC/D,MAAMC,eAAe,GAAGR,IAAI,CAACS,eAAe,IAAIZ,wBAAkB,CAACa,MAAM;MACzE,MAAMC,aAAa,GAAGX,IAAI,CAACY,aAAa,IAAIf,wBAAkB,CAACgB,IAAI;AAEnE,MAAA,oBACEC,eAAA,CAACT,aAAa,EAAAU,cAAA,CAAAA,cAAA,CAAA;AAAgBb,QAAAA,QAAQ,EAAEA;AAAS,OAAA,EAAMF,IAAI,CAACgB,SAAS,IAAI,EAAE,CAAA,EAAA,EAAA,EAAA;AAAArB,QAAAA,QAAA,EAAA,cACzEC,cAAA,CAACY,eAAe,EAAAO,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAMf,IAAI,CAACiB,WAAW,IAAI,EAAE,CAAA,EAAA,EAAA,EAAA;AAAAtB,UAAAA,QAAA,EACzCK,IAAI,CAACkB,MAAM,IAAIlB,IAAI,CAACmB,KAAK,IAAA,OAAA,CAAAf,MAAA,CAAYH,KAAK,GAAG,CAAC;AAAE,SAAA,CAClC,CAAC,eAClBL,cAAA,CAACe,aAAa,EAAAI,cAAA,CAAAA,cAAA,KAAMf,IAAI,CAACoB,SAAS,IAAI,EAAE,CAAA,EAAA,EAAA,EAAA;AAAAzB,UAAAA,QAAA,EACrCK,IAAI,CAACqB,IAAI,IAAIrB,IAAI,CAACsB,OAAO,IAAItB,IAAI,CAACL,QAAQ,IAAI;AAAI,SAAA,CACtC,CAAC;AAAA,OAAA,CAAA,EANEO,QAOL,CAAC;IAEpB,CAAC;AAAC,GACgB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@veeyaainnovatives/accordion",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A reusable Accordion component for React applications",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/index.esm.js",
|
|
10
|
+
"require": "./dist/index.js"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"README.md"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "rollup -c",
|
|
19
|
+
"dev": "rollup -c -w",
|
|
20
|
+
"prepare": "npm run build"
|
|
21
|
+
},
|
|
22
|
+
"keywords": [
|
|
23
|
+
"react",
|
|
24
|
+
"accordion",
|
|
25
|
+
"component",
|
|
26
|
+
"veeyaainnovatives"
|
|
27
|
+
],
|
|
28
|
+
"author": "Veeyaa Innovatives",
|
|
29
|
+
"license": "MIT",
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
32
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
33
|
+
"react-bootstrap": "^2.0.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@babel/core": "^7.23.5",
|
|
37
|
+
"@babel/preset-env": "^7.23.5",
|
|
38
|
+
"@babel/preset-react": "^7.23.3",
|
|
39
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
40
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
41
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
42
|
+
"rollup": "^4.6.1",
|
|
43
|
+
"rollup-plugin-peer-deps-external": "^2.2.4"
|
|
44
|
+
},
|
|
45
|
+
"repository": {
|
|
46
|
+
"type": "git",
|
|
47
|
+
"url": "https://github.com/npmveeyaa/accordion.git"
|
|
48
|
+
},
|
|
49
|
+
"homepage": "https://github.com/npmveeyaa/accordion#readme",
|
|
50
|
+
"bugs": {
|
|
51
|
+
"url": "https://github.com/npmveeyaa/accordion/issues"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|