@geoinsight/react-components 0.3.5 → 0.4.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/dist/cjs/index.css +96 -0
- package/dist/cjs/index.js +155 -2
- package/dist/esm/index.css +96 -0
- package/dist/esm/index.js +156 -4
- package/package.json +1 -1
package/dist/cjs/index.css
CHANGED
|
@@ -114,6 +114,102 @@
|
|
|
114
114
|
--color-primary-800: #2c5f1c;
|
|
115
115
|
--color-primary-900: #1e3f12;
|
|
116
116
|
}
|
|
117
|
+
.accordion {
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
gap: var(--spacing-4);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.accordion-item {
|
|
124
|
+
display: flex;
|
|
125
|
+
flex-direction: column;
|
|
126
|
+
gap: var(--spacing-4);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.accordion-button.button {
|
|
130
|
+
border: unset;
|
|
131
|
+
border-radius: var(--spacing-8);
|
|
132
|
+
color: var(--color-neutral-900);
|
|
133
|
+
justify-content: flex-end;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.accordion-button__button.button {
|
|
137
|
+
gap: 8px;
|
|
138
|
+
padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.accordion-button__link.button {
|
|
142
|
+
padding: var(--spacing-4) var(--spacing-32) var(--spacing-4) var(--spacing-16);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.accordion-button__link.button:hover {
|
|
146
|
+
background-color: var(--color-primary) !important;
|
|
147
|
+
box-shadow: 0 4px 4px 0 var(--color-neutral-400);
|
|
148
|
+
transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic-bezier);
|
|
149
|
+
color: var(--color-neutral-900);
|
|
150
|
+
text-decoration: unset;
|
|
151
|
+
text-underline-offset: unset;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.accordion-button__button--dark.button {
|
|
155
|
+
background-color: var(--color-neutral-200);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.accordion-button__button--light.button {
|
|
159
|
+
background-color: var(--color-neutral-800);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.accordion-button__link--dark.button {
|
|
163
|
+
background-color: var(--color-neutral-100) !important;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.accordion-button__link--light.button {
|
|
167
|
+
background-color: var(--color-neutral-700) !important;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.accordion-content {
|
|
171
|
+
border-radius: var(--spacing-8);
|
|
172
|
+
/* color: var(--color-neutral-100); */
|
|
173
|
+
display: flex;
|
|
174
|
+
flex-direction: column;
|
|
175
|
+
gap: var(--spacing-4);
|
|
176
|
+
padding: 0 0 var(--spacing-8) var(--spacing-16);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* .accordion__title {
|
|
180
|
+
border-radius: var(--spacing-8);
|
|
181
|
+
background-color: var(--color-neutral-700);
|
|
182
|
+
color: var(--color-neutral-100);
|
|
183
|
+
justify-content: flex-end;
|
|
184
|
+
gap: 8px;
|
|
185
|
+
padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.accordion__menu {
|
|
189
|
+
display: flex;
|
|
190
|
+
flex-direction: column;
|
|
191
|
+
gap: var(--spacing-4);
|
|
192
|
+
padding: 0 0 var(--spacing-8) var(--spacing-16);
|
|
193
|
+
} */
|
|
194
|
+
/*
|
|
195
|
+
.accordion__child {
|
|
196
|
+
border-radius: var(--spacing-8);
|
|
197
|
+
background-color: var(--color-neutral-200);
|
|
198
|
+
color: var(--color-neutral-900);
|
|
199
|
+
font-size: var(--font-size-14);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.accordion__child--active {
|
|
203
|
+
background-color: var(--color-neutral-500);
|
|
204
|
+
} */
|
|
205
|
+
/*
|
|
206
|
+
.accordion__check {
|
|
207
|
+
color: var(--color-neutral-500);
|
|
208
|
+
margin-right: calc(var(--spacing-24) * -1);
|
|
209
|
+
position: absolute;
|
|
210
|
+
right: 0;
|
|
211
|
+
} */
|
|
212
|
+
|
|
117
213
|
.button {
|
|
118
214
|
align-items: center;
|
|
119
215
|
border-radius: var(--spacing-32);
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,14 +1,166 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var clsx = require('clsx');
|
|
5
4
|
var react = require('react');
|
|
5
|
+
var clsx = require('clsx');
|
|
6
6
|
var tb = require('react-icons/tb');
|
|
7
7
|
var io5 = require('react-icons/io5');
|
|
8
8
|
|
|
9
|
+
// const recursive = (children, expanded) => {
|
|
10
|
+
// return (checkIfArray(children) as any).flat(
|
|
11
|
+
// // arr1
|
|
12
|
+
// (child: { props: { label: string; isExpanded: boolean } }, index) => {
|
|
13
|
+
// console.log(
|
|
14
|
+
// checkIfArray(child.props.children).map((child1) => {
|
|
15
|
+
// return child1?.type?.displayName;
|
|
16
|
+
// })
|
|
17
|
+
// );
|
|
18
|
+
// return [
|
|
19
|
+
// ...(checkIfArray(child.props.children).find((child1) => {
|
|
20
|
+
// return child1?.type?.displayName === "AccordionItem";
|
|
21
|
+
// })
|
|
22
|
+
// ? recursive(child.props.children, expanded)
|
|
23
|
+
// : [
|
|
24
|
+
// child?.props.label,
|
|
25
|
+
// expanded === "all"
|
|
26
|
+
// ? true
|
|
27
|
+
// : expanded === "none"
|
|
28
|
+
// ? false
|
|
29
|
+
// : child?.props.isExpanded,
|
|
30
|
+
// ]),
|
|
31
|
+
// ];
|
|
32
|
+
// }
|
|
33
|
+
// );
|
|
34
|
+
// };
|
|
35
|
+
// 1. children.map((child)=>[child.props.label,true]) // [["things", true], ["thing1", true]]
|
|
36
|
+
// 2.
|
|
37
|
+
function recursive(children, arr = {}, i = 0) {
|
|
38
|
+
if ((children && typeof children === "string") ||
|
|
39
|
+
typeof children[0] === "string") {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
for (const [index, child] of children.entries()) {
|
|
43
|
+
// if (!child.props.children || child.props.children && !Array.isArray(child.props.children)) {
|
|
44
|
+
// return;
|
|
45
|
+
// }
|
|
46
|
+
if (child.type.displayName === "AccordionItem" && child.props.label) {
|
|
47
|
+
arr[child.props.label] = {
|
|
48
|
+
isToggle: true,
|
|
49
|
+
depth: i,
|
|
50
|
+
paddingLeft: `${16 * i}px`,
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
console.log(child.props.label);
|
|
54
|
+
if (typeof child.props.children !== "string" &&
|
|
55
|
+
child.props.children.find((v) => v.type.displayName === "AccordionItem")) {
|
|
56
|
+
recursive(Array.isArray(child.props.children)
|
|
57
|
+
? child.props.children
|
|
58
|
+
: [child.props.children], arr, i + 1);
|
|
59
|
+
console.log(child.props.children, i);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return arr;
|
|
63
|
+
}
|
|
64
|
+
const AccordionContext = react.createContext(undefined);
|
|
65
|
+
const AccordionProvider = ({ children, expanded = "all" }) => {
|
|
66
|
+
// const a = recursive1(children);
|
|
67
|
+
// console.log(recursiveFlatmap(a));
|
|
68
|
+
const newChildren = react.Children.map(children, (child, index) => {
|
|
69
|
+
return react.cloneElement(child, {
|
|
70
|
+
// isToggle: isToggle,
|
|
71
|
+
// setIsToggle: setIsToggle,
|
|
72
|
+
...(child?.type?.displayName === "AccordionItem" && {
|
|
73
|
+
label: `${child?.type?.displayName}-${index}`,
|
|
74
|
+
}),
|
|
75
|
+
// isExpanded: isExpanded,
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
const [isToggle, setIsToggle] = react.useState(recursive(newChildren));
|
|
79
|
+
return (jsxRuntime.jsx(AccordionContext.Provider, { value: { isToggle, setIsToggle }, children: jsxRuntime.jsx("div", { className: "accordion", children: newChildren }) }));
|
|
80
|
+
};
|
|
81
|
+
function Accordion({ children, expanded, menu, allExpanded, defaultValue, selectValue, }) {
|
|
82
|
+
// const { dataTheme } = useTheme();
|
|
83
|
+
// const [toggle, setToggle] = useState<{ [key: string]: boolean | undefined }>(
|
|
84
|
+
// children.map((_,index)=> ({
|
|
85
|
+
// [index]: true
|
|
86
|
+
// }))
|
|
87
|
+
// // Object.fromEntries(
|
|
88
|
+
// // Object.entries(menu).map(([key, { isExpanded = false }]) => [
|
|
89
|
+
// // key,
|
|
90
|
+
// // allExpanded !== undefined ? allExpanded : isExpanded,
|
|
91
|
+
// // ])
|
|
92
|
+
// // )
|
|
93
|
+
// );
|
|
94
|
+
// // const [selected, setSelected] = useState<string>(defaultValue);
|
|
95
|
+
// const handleToggle = (name: string) => {
|
|
96
|
+
// setToggle((prev) => {
|
|
97
|
+
// return { ...prev, [name]: !prev[name] };
|
|
98
|
+
// });
|
|
99
|
+
// };
|
|
100
|
+
return (
|
|
101
|
+
// <div className="accordion">
|
|
102
|
+
// {Children.map(children, (child, index) =>
|
|
103
|
+
// cloneElement(child, {
|
|
104
|
+
// isToggle: index === toggle[index],
|
|
105
|
+
// handleToggle: handleToggle
|
|
106
|
+
// })
|
|
107
|
+
// )}
|
|
108
|
+
// </div>
|
|
109
|
+
jsxRuntime.jsx(AccordionProvider, { expanded: expanded, children: children })
|
|
110
|
+
// <div className="accordion">
|
|
111
|
+
/* <AccordionItem>
|
|
112
|
+
<AccordionButton dataTheme={dataTheme}>
|
|
113
|
+
title
|
|
114
|
+
</AccordionButton>
|
|
115
|
+
<AccordionContent>
|
|
116
|
+
ch
|
|
117
|
+
</AccordionContent>
|
|
118
|
+
</AccordionItem> */
|
|
119
|
+
/* {Object.keys(menu).map((item) => (
|
|
120
|
+
<>
|
|
121
|
+
<Button
|
|
122
|
+
className={"accordion__title"}
|
|
123
|
+
data-theme={menu[item].dataTheme}
|
|
124
|
+
icon={toggle[item] ? <TfiAngleDown /> : <TfiAngleUp />}
|
|
125
|
+
onClick={() => handleToggle(item)}
|
|
126
|
+
>
|
|
127
|
+
{menu[item].label}
|
|
128
|
+
</Button>
|
|
129
|
+
{toggle[item] && (
|
|
130
|
+
<div className="accordion__menu">
|
|
131
|
+
{menu[item].children.map((child) => (
|
|
132
|
+
<Button
|
|
133
|
+
mode="secondary"
|
|
134
|
+
data-theme={menu[item].dataTheme}
|
|
135
|
+
className={`accordion__child ${
|
|
136
|
+
child.id === selected && ` accordion__child--active`
|
|
137
|
+
}`}
|
|
138
|
+
onClick={() => {
|
|
139
|
+
setSelected(child.id);
|
|
140
|
+
selectValue && selectValue(item, child);
|
|
141
|
+
}}
|
|
142
|
+
>
|
|
143
|
+
<>
|
|
144
|
+
{child.label}
|
|
145
|
+
{child.id === selected ? (
|
|
146
|
+
<BsCheckLg className={"accordion__check"} size={"1rem"} />
|
|
147
|
+
) : (
|
|
148
|
+
""
|
|
149
|
+
)}
|
|
150
|
+
</>
|
|
151
|
+
</Button>
|
|
152
|
+
))}
|
|
153
|
+
</div>
|
|
154
|
+
)}
|
|
155
|
+
</>
|
|
156
|
+
))}
|
|
157
|
+
// </div>*/
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
|
|
9
161
|
const Anchor = ({ Custom, children, ...rest }) => Custom ? jsxRuntime.jsx(Custom, { ...rest, children: children }) : jsxRuntime.jsx("a", { ...rest, children: children });
|
|
10
162
|
function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
|
|
11
|
-
return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(
|
|
163
|
+
return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
|
|
12
164
|
}
|
|
13
165
|
|
|
14
166
|
function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
|
|
@@ -211,6 +363,7 @@ function useModal({} = {}) {
|
|
|
211
363
|
return context;
|
|
212
364
|
}
|
|
213
365
|
|
|
366
|
+
exports.Accordion = Accordion;
|
|
214
367
|
exports.Button = Button;
|
|
215
368
|
exports.Input = Input;
|
|
216
369
|
exports.Loading = Loading;
|
package/dist/esm/index.css
CHANGED
|
@@ -114,6 +114,102 @@
|
|
|
114
114
|
--color-primary-800: #2c5f1c;
|
|
115
115
|
--color-primary-900: #1e3f12;
|
|
116
116
|
}
|
|
117
|
+
.accordion {
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
gap: var(--spacing-4);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.accordion-item {
|
|
124
|
+
display: flex;
|
|
125
|
+
flex-direction: column;
|
|
126
|
+
gap: var(--spacing-4);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.accordion-button.button {
|
|
130
|
+
border: unset;
|
|
131
|
+
border-radius: var(--spacing-8);
|
|
132
|
+
color: var(--color-neutral-900);
|
|
133
|
+
justify-content: flex-end;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.accordion-button__button.button {
|
|
137
|
+
gap: 8px;
|
|
138
|
+
padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.accordion-button__link.button {
|
|
142
|
+
padding: var(--spacing-4) var(--spacing-32) var(--spacing-4) var(--spacing-16);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.accordion-button__link.button:hover {
|
|
146
|
+
background-color: var(--color-primary) !important;
|
|
147
|
+
box-shadow: 0 4px 4px 0 var(--color-neutral-400);
|
|
148
|
+
transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic-bezier);
|
|
149
|
+
color: var(--color-neutral-900);
|
|
150
|
+
text-decoration: unset;
|
|
151
|
+
text-underline-offset: unset;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.accordion-button__button--dark.button {
|
|
155
|
+
background-color: var(--color-neutral-200);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.accordion-button__button--light.button {
|
|
159
|
+
background-color: var(--color-neutral-800);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.accordion-button__link--dark.button {
|
|
163
|
+
background-color: var(--color-neutral-100) !important;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.accordion-button__link--light.button {
|
|
167
|
+
background-color: var(--color-neutral-700) !important;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.accordion-content {
|
|
171
|
+
border-radius: var(--spacing-8);
|
|
172
|
+
/* color: var(--color-neutral-100); */
|
|
173
|
+
display: flex;
|
|
174
|
+
flex-direction: column;
|
|
175
|
+
gap: var(--spacing-4);
|
|
176
|
+
padding: 0 0 var(--spacing-8) var(--spacing-16);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* .accordion__title {
|
|
180
|
+
border-radius: var(--spacing-8);
|
|
181
|
+
background-color: var(--color-neutral-700);
|
|
182
|
+
color: var(--color-neutral-100);
|
|
183
|
+
justify-content: flex-end;
|
|
184
|
+
gap: 8px;
|
|
185
|
+
padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.accordion__menu {
|
|
189
|
+
display: flex;
|
|
190
|
+
flex-direction: column;
|
|
191
|
+
gap: var(--spacing-4);
|
|
192
|
+
padding: 0 0 var(--spacing-8) var(--spacing-16);
|
|
193
|
+
} */
|
|
194
|
+
/*
|
|
195
|
+
.accordion__child {
|
|
196
|
+
border-radius: var(--spacing-8);
|
|
197
|
+
background-color: var(--color-neutral-200);
|
|
198
|
+
color: var(--color-neutral-900);
|
|
199
|
+
font-size: var(--font-size-14);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.accordion__child--active {
|
|
203
|
+
background-color: var(--color-neutral-500);
|
|
204
|
+
} */
|
|
205
|
+
/*
|
|
206
|
+
.accordion__check {
|
|
207
|
+
color: var(--color-neutral-500);
|
|
208
|
+
margin-right: calc(var(--spacing-24) * -1);
|
|
209
|
+
position: absolute;
|
|
210
|
+
right: 0;
|
|
211
|
+
} */
|
|
212
|
+
|
|
117
213
|
.button {
|
|
118
214
|
align-items: center;
|
|
119
215
|
border-radius: var(--spacing-32);
|
package/dist/esm/index.js
CHANGED
|
@@ -1,12 +1,164 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { createContext, Children, cloneElement, useState, useRef, useEffect, useContext, useReducer } from 'react';
|
|
2
3
|
import clsx from 'clsx';
|
|
3
|
-
import { useRef, useState, createContext, useEffect, useContext, useReducer } from 'react';
|
|
4
4
|
import { TbArrowsDiagonal2 } from 'react-icons/tb';
|
|
5
5
|
import { IoClose } from 'react-icons/io5';
|
|
6
6
|
|
|
7
|
+
// const recursive = (children, expanded) => {
|
|
8
|
+
// return (checkIfArray(children) as any).flat(
|
|
9
|
+
// // arr1
|
|
10
|
+
// (child: { props: { label: string; isExpanded: boolean } }, index) => {
|
|
11
|
+
// console.log(
|
|
12
|
+
// checkIfArray(child.props.children).map((child1) => {
|
|
13
|
+
// return child1?.type?.displayName;
|
|
14
|
+
// })
|
|
15
|
+
// );
|
|
16
|
+
// return [
|
|
17
|
+
// ...(checkIfArray(child.props.children).find((child1) => {
|
|
18
|
+
// return child1?.type?.displayName === "AccordionItem";
|
|
19
|
+
// })
|
|
20
|
+
// ? recursive(child.props.children, expanded)
|
|
21
|
+
// : [
|
|
22
|
+
// child?.props.label,
|
|
23
|
+
// expanded === "all"
|
|
24
|
+
// ? true
|
|
25
|
+
// : expanded === "none"
|
|
26
|
+
// ? false
|
|
27
|
+
// : child?.props.isExpanded,
|
|
28
|
+
// ]),
|
|
29
|
+
// ];
|
|
30
|
+
// }
|
|
31
|
+
// );
|
|
32
|
+
// };
|
|
33
|
+
// 1. children.map((child)=>[child.props.label,true]) // [["things", true], ["thing1", true]]
|
|
34
|
+
// 2.
|
|
35
|
+
function recursive(children, arr = {}, i = 0) {
|
|
36
|
+
if ((children && typeof children === "string") ||
|
|
37
|
+
typeof children[0] === "string") {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
for (const [index, child] of children.entries()) {
|
|
41
|
+
// if (!child.props.children || child.props.children && !Array.isArray(child.props.children)) {
|
|
42
|
+
// return;
|
|
43
|
+
// }
|
|
44
|
+
if (child.type.displayName === "AccordionItem" && child.props.label) {
|
|
45
|
+
arr[child.props.label] = {
|
|
46
|
+
isToggle: true,
|
|
47
|
+
depth: i,
|
|
48
|
+
paddingLeft: `${16 * i}px`,
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
console.log(child.props.label);
|
|
52
|
+
if (typeof child.props.children !== "string" &&
|
|
53
|
+
child.props.children.find((v) => v.type.displayName === "AccordionItem")) {
|
|
54
|
+
recursive(Array.isArray(child.props.children)
|
|
55
|
+
? child.props.children
|
|
56
|
+
: [child.props.children], arr, i + 1);
|
|
57
|
+
console.log(child.props.children, i);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return arr;
|
|
61
|
+
}
|
|
62
|
+
const AccordionContext = createContext(undefined);
|
|
63
|
+
const AccordionProvider = ({ children, expanded = "all" }) => {
|
|
64
|
+
// const a = recursive1(children);
|
|
65
|
+
// console.log(recursiveFlatmap(a));
|
|
66
|
+
const newChildren = Children.map(children, (child, index) => {
|
|
67
|
+
return cloneElement(child, {
|
|
68
|
+
// isToggle: isToggle,
|
|
69
|
+
// setIsToggle: setIsToggle,
|
|
70
|
+
...(child?.type?.displayName === "AccordionItem" && {
|
|
71
|
+
label: `${child?.type?.displayName}-${index}`,
|
|
72
|
+
}),
|
|
73
|
+
// isExpanded: isExpanded,
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
const [isToggle, setIsToggle] = useState(recursive(newChildren));
|
|
77
|
+
return (jsx(AccordionContext.Provider, { value: { isToggle, setIsToggle }, children: jsx("div", { className: "accordion", children: newChildren }) }));
|
|
78
|
+
};
|
|
79
|
+
function Accordion({ children, expanded, menu, allExpanded, defaultValue, selectValue, }) {
|
|
80
|
+
// const { dataTheme } = useTheme();
|
|
81
|
+
// const [toggle, setToggle] = useState<{ [key: string]: boolean | undefined }>(
|
|
82
|
+
// children.map((_,index)=> ({
|
|
83
|
+
// [index]: true
|
|
84
|
+
// }))
|
|
85
|
+
// // Object.fromEntries(
|
|
86
|
+
// // Object.entries(menu).map(([key, { isExpanded = false }]) => [
|
|
87
|
+
// // key,
|
|
88
|
+
// // allExpanded !== undefined ? allExpanded : isExpanded,
|
|
89
|
+
// // ])
|
|
90
|
+
// // )
|
|
91
|
+
// );
|
|
92
|
+
// // const [selected, setSelected] = useState<string>(defaultValue);
|
|
93
|
+
// const handleToggle = (name: string) => {
|
|
94
|
+
// setToggle((prev) => {
|
|
95
|
+
// return { ...prev, [name]: !prev[name] };
|
|
96
|
+
// });
|
|
97
|
+
// };
|
|
98
|
+
return (
|
|
99
|
+
// <div className="accordion">
|
|
100
|
+
// {Children.map(children, (child, index) =>
|
|
101
|
+
// cloneElement(child, {
|
|
102
|
+
// isToggle: index === toggle[index],
|
|
103
|
+
// handleToggle: handleToggle
|
|
104
|
+
// })
|
|
105
|
+
// )}
|
|
106
|
+
// </div>
|
|
107
|
+
jsx(AccordionProvider, { expanded: expanded, children: children })
|
|
108
|
+
// <div className="accordion">
|
|
109
|
+
/* <AccordionItem>
|
|
110
|
+
<AccordionButton dataTheme={dataTheme}>
|
|
111
|
+
title
|
|
112
|
+
</AccordionButton>
|
|
113
|
+
<AccordionContent>
|
|
114
|
+
ch
|
|
115
|
+
</AccordionContent>
|
|
116
|
+
</AccordionItem> */
|
|
117
|
+
/* {Object.keys(menu).map((item) => (
|
|
118
|
+
<>
|
|
119
|
+
<Button
|
|
120
|
+
className={"accordion__title"}
|
|
121
|
+
data-theme={menu[item].dataTheme}
|
|
122
|
+
icon={toggle[item] ? <TfiAngleDown /> : <TfiAngleUp />}
|
|
123
|
+
onClick={() => handleToggle(item)}
|
|
124
|
+
>
|
|
125
|
+
{menu[item].label}
|
|
126
|
+
</Button>
|
|
127
|
+
{toggle[item] && (
|
|
128
|
+
<div className="accordion__menu">
|
|
129
|
+
{menu[item].children.map((child) => (
|
|
130
|
+
<Button
|
|
131
|
+
mode="secondary"
|
|
132
|
+
data-theme={menu[item].dataTheme}
|
|
133
|
+
className={`accordion__child ${
|
|
134
|
+
child.id === selected && ` accordion__child--active`
|
|
135
|
+
}`}
|
|
136
|
+
onClick={() => {
|
|
137
|
+
setSelected(child.id);
|
|
138
|
+
selectValue && selectValue(item, child);
|
|
139
|
+
}}
|
|
140
|
+
>
|
|
141
|
+
<>
|
|
142
|
+
{child.label}
|
|
143
|
+
{child.id === selected ? (
|
|
144
|
+
<BsCheckLg className={"accordion__check"} size={"1rem"} />
|
|
145
|
+
) : (
|
|
146
|
+
""
|
|
147
|
+
)}
|
|
148
|
+
</>
|
|
149
|
+
</Button>
|
|
150
|
+
))}
|
|
151
|
+
</div>
|
|
152
|
+
)}
|
|
153
|
+
</>
|
|
154
|
+
))}
|
|
155
|
+
// </div>*/
|
|
156
|
+
);
|
|
157
|
+
}
|
|
158
|
+
|
|
7
159
|
const Anchor = ({ Custom, children, ...rest }) => Custom ? jsx(Custom, { ...rest, children: children }) : jsx("a", { ...rest, children: children });
|
|
8
160
|
function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
|
|
9
|
-
return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(
|
|
161
|
+
return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
|
|
10
162
|
}
|
|
11
163
|
|
|
12
164
|
function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
|
|
@@ -209,4 +361,4 @@ function useModal({} = {}) {
|
|
|
209
361
|
return context;
|
|
210
362
|
}
|
|
211
363
|
|
|
212
|
-
export { Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
|
|
364
|
+
export { Accordion, Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
|