@geoinsight/react-components 0.4.0 → 0.4.1

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.
Files changed (3) hide show
  1. package/dist/cjs/index.js +130 -171
  2. package/dist/esm/index.js +129 -173
  3. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -3,197 +3,95 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
5
  var clsx = require('clsx');
6
+ var tfi = require('react-icons/tfi');
6
7
  var tb = require('react-icons/tb');
7
8
  var io5 = require('react-icons/io5');
8
9
 
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) {
10
+ function recursiveChildren(children, i = 0) {
11
+ return react.Children.map(children, (child, index) => {
12
+ if (!react.isValidElement(child)) {
13
+ return child;
14
+ }
15
+ if (child.props.children) {
16
+ return react.cloneElement(child, {
17
+ ...child.props,
18
+ children: recursiveChildren(child.props.children, i++),
19
+ ...(child?.type?.displayName === "AccordionItem" && {
20
+ label: `${child?.type?.displayName}-${index}-${i}`,
21
+ }),
22
+ });
23
+ }
24
+ });
25
+ }
26
+ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
38
27
  if ((children && typeof children === "string") ||
39
- typeof children[0] === "string") {
28
+ (Array.isArray(children) && typeof children[0] === "string")) {
40
29
  return;
41
30
  }
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);
31
+ for (const child of children) {
32
+ if (react.isValidElement(child)) {
33
+ if (child?.type?.displayName === "AccordionItem" && child.props.label) {
34
+ toggleArray[child.props.label] = {
35
+ isToggle: props.expanded === "all"
36
+ ? true
37
+ : props.expanded === "none"
38
+ ? false
39
+ : props.expanded === "custom"
40
+ ? child?.props.isExpanded
41
+ : false,
42
+ depth: i,
43
+ paddingLeft: `${16 * i}px`,
44
+ };
45
+ }
46
+ if (typeof child.props.children !== "string" &&
47
+ child.props.children.find((v) => v?.type?.displayName === "AccordionItem")) {
48
+ recursiveToggle(Array.isArray(child.props.children)
49
+ ? child.props.children
50
+ : [child.props.children], toggleArray, i + 1, props);
51
+ }
60
52
  }
61
53
  }
62
- return arr;
54
+ return toggleArray;
63
55
  }
56
+
64
57
  const AccordionContext = react.createContext(undefined);
65
58
  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 }) }));
59
+ const newChildren = react.useMemo(() => recursiveChildren(children, 0), []);
60
+ const [toggle, setToggle] = react.useState(recursiveToggle(newChildren, {}, 0, { expanded }));
61
+ return (jsxRuntime.jsx(AccordionContext.Provider, { value: { toggle, setToggle }, children: jsxRuntime.jsx("div", { className: "accordion", children: newChildren }) }));
80
62
  };
81
- function Accordion({ children, expanded, menu, allExpanded, defaultValue, selectValue, }) {
63
+ const useAccordion = () => {
64
+ const context = react.useContext(AccordionContext);
65
+ if (context === undefined) {
66
+ throw new Error("useTheme must be used within a ThemeProvider");
67
+ }
68
+ return context;
69
+ };
70
+
71
+ function Accordion({ children, expanded = "all", defaultValue, selectValue, }) {
82
72
  // 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
- );
73
+ return (jsxRuntime.jsx(AccordionProvider, { expanded: expanded, children: children }));
159
74
  }
160
75
 
76
+ const AccordionItem = react.forwardRef(function AccordionItem({ children, label, isExpanded = false }, ref) {
77
+ const { toggle, setToggle } = useAccordion();
78
+ return (jsxRuntime.jsx("div", { className: "accordion-item", style: {
79
+ paddingLeft: toggle && label && toggle[label].paddingLeft,
80
+ }, children: react.Children.map(children, (child) => react.cloneElement(child, {
81
+ toggle: toggle,
82
+ setToggle: setToggle,
83
+ ...(child?.type?.displayName !== "AccordionItem" && {
84
+ label: label,
85
+ }),
86
+ isExpanded: isExpanded,
87
+ })) }));
88
+ });
89
+
161
90
  const Anchor = ({ Custom, children, ...rest }) => Custom ? jsxRuntime.jsx(Custom, { ...rest, children: children }) : jsxRuntime.jsx("a", { ...rest, children: children });
162
91
  function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
163
92
  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] }));
164
93
  }
165
94
 
166
- function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
167
- return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
168
- }
169
-
170
- function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
171
- const ref = react.useRef();
172
- const [isShow, setIsShow] = react.useState(false);
173
- const handleClickToggle = () => {
174
- if (ref && ref.current) {
175
- if (isShow) {
176
- ref.current.style.height = hideHeight;
177
- }
178
- else {
179
- ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
180
- }
181
- setIsShow((prev) => !prev);
182
- }
183
- };
184
- return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
185
- height: hasToggleButton ? hideHeight : showHeight,
186
- }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
187
- }
188
-
189
- function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
190
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
191
- }
192
-
193
- function Loading({ img, children }) {
194
- return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
195
- }
196
-
197
95
  const ThemeContext = react.createContext(undefined);
198
96
  function ThemeProvider({ children }) {
199
97
  const [dataTheme, setDataTheme] = react.useState();
@@ -242,6 +140,64 @@ function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
242
140
  return context;
243
141
  }
244
142
 
143
+ const AccordionButton = react.forwardRef(function AccordionButton({ children, is = "link", label, toggle, setToggle, ...rest }, ref) {
144
+ const { dataTheme } = useTheme();
145
+ const handleToggle = () => {
146
+ setToggle((prev) => {
147
+ if (label) {
148
+ return {
149
+ ...prev,
150
+ [label]: {
151
+ ...(prev && label && prev[label]),
152
+ isToggle: prev && !prev[label].isToggle,
153
+ },
154
+ };
155
+ }
156
+ else {
157
+ return prev;
158
+ }
159
+ });
160
+ };
161
+ return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
162
+ icon: label && toggle && toggle[label].isToggle ? (jsxRuntime.jsx(tfi.TfiAngleDown, {})) : (jsxRuntime.jsx(tfi.TfiAngleUp, {})),
163
+ }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
164
+ });
165
+
166
+ const AccordionContent = react.forwardRef(function AccordionContent({ children, label, toggle, }, ref) {
167
+ return label && toggle && toggle[label].isToggle && jsxRuntime.jsx("div", { className: "accordion-content", children: children });
168
+ });
169
+
170
+ function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
171
+ return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
172
+ }
173
+
174
+ function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
175
+ const ref = react.useRef();
176
+ const [isShow, setIsShow] = react.useState(false);
177
+ const handleClickToggle = () => {
178
+ if (ref && ref.current) {
179
+ if (isShow) {
180
+ ref.current.style.height = hideHeight;
181
+ }
182
+ else {
183
+ ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
184
+ }
185
+ setIsShow((prev) => !prev);
186
+ }
187
+ };
188
+ return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
189
+ height: hasToggleButton ? hideHeight : showHeight,
190
+ }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
191
+ }
192
+
193
+ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
194
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
195
+ }
196
+
197
+ function Loading({ img, children }) {
198
+ return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
199
+ }
200
+
245
201
  const LoadingContext = react.createContext(undefined);
246
202
  function loadingReducer(state, action) {
247
203
  switch (action.type) {
@@ -364,6 +320,9 @@ function useModal({} = {}) {
364
320
  }
365
321
 
366
322
  exports.Accordion = Accordion;
323
+ exports.AccordionButton = AccordionButton;
324
+ exports.AccordionContent = AccordionContent;
325
+ exports.AccordionItem = AccordionItem;
367
326
  exports.Button = Button;
368
327
  exports.Input = Input;
369
328
  exports.Loading = Loading;
package/dist/esm/index.js CHANGED
@@ -1,197 +1,95 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { createContext, Children, cloneElement, useState, useRef, useEffect, useContext, useReducer } from 'react';
2
+ import { Children, isValidElement, cloneElement, createContext, useContext, useMemo, useState, forwardRef, useEffect, useRef, useReducer } from 'react';
3
3
  import clsx from 'clsx';
4
+ import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
4
5
  import { TbArrowsDiagonal2 } from 'react-icons/tb';
5
6
  import { IoClose } from 'react-icons/io5';
6
7
 
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) {
8
+ function recursiveChildren(children, i = 0) {
9
+ return Children.map(children, (child, index) => {
10
+ if (!isValidElement(child)) {
11
+ return child;
12
+ }
13
+ if (child.props.children) {
14
+ return cloneElement(child, {
15
+ ...child.props,
16
+ children: recursiveChildren(child.props.children, i++),
17
+ ...(child?.type?.displayName === "AccordionItem" && {
18
+ label: `${child?.type?.displayName}-${index}-${i}`,
19
+ }),
20
+ });
21
+ }
22
+ });
23
+ }
24
+ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
36
25
  if ((children && typeof children === "string") ||
37
- typeof children[0] === "string") {
26
+ (Array.isArray(children) && typeof children[0] === "string")) {
38
27
  return;
39
28
  }
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);
29
+ for (const child of children) {
30
+ if (isValidElement(child)) {
31
+ if (child?.type?.displayName === "AccordionItem" && child.props.label) {
32
+ toggleArray[child.props.label] = {
33
+ isToggle: props.expanded === "all"
34
+ ? true
35
+ : props.expanded === "none"
36
+ ? false
37
+ : props.expanded === "custom"
38
+ ? child?.props.isExpanded
39
+ : false,
40
+ depth: i,
41
+ paddingLeft: `${16 * i}px`,
42
+ };
43
+ }
44
+ if (typeof child.props.children !== "string" &&
45
+ child.props.children.find((v) => v?.type?.displayName === "AccordionItem")) {
46
+ recursiveToggle(Array.isArray(child.props.children)
47
+ ? child.props.children
48
+ : [child.props.children], toggleArray, i + 1, props);
49
+ }
58
50
  }
59
51
  }
60
- return arr;
52
+ return toggleArray;
61
53
  }
54
+
62
55
  const AccordionContext = createContext(undefined);
63
56
  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 }) }));
57
+ const newChildren = useMemo(() => recursiveChildren(children, 0), []);
58
+ const [toggle, setToggle] = useState(recursiveToggle(newChildren, {}, 0, { expanded }));
59
+ return (jsx(AccordionContext.Provider, { value: { toggle, setToggle }, children: jsx("div", { className: "accordion", children: newChildren }) }));
78
60
  };
79
- function Accordion({ children, expanded, menu, allExpanded, defaultValue, selectValue, }) {
61
+ const useAccordion = () => {
62
+ const context = useContext(AccordionContext);
63
+ if (context === undefined) {
64
+ throw new Error("useTheme must be used within a ThemeProvider");
65
+ }
66
+ return context;
67
+ };
68
+
69
+ function Accordion({ children, expanded = "all", defaultValue, selectValue, }) {
80
70
  // 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
- );
71
+ return (jsx(AccordionProvider, { expanded: expanded, children: children }));
157
72
  }
158
73
 
74
+ const AccordionItem = forwardRef(function AccordionItem({ children, label, isExpanded = false }, ref) {
75
+ const { toggle, setToggle } = useAccordion();
76
+ return (jsx("div", { className: "accordion-item", style: {
77
+ paddingLeft: toggle && label && toggle[label].paddingLeft,
78
+ }, children: Children.map(children, (child) => cloneElement(child, {
79
+ toggle: toggle,
80
+ setToggle: setToggle,
81
+ ...(child?.type?.displayName !== "AccordionItem" && {
82
+ label: label,
83
+ }),
84
+ isExpanded: isExpanded,
85
+ })) }));
86
+ });
87
+
159
88
  const Anchor = ({ Custom, children, ...rest }) => Custom ? jsx(Custom, { ...rest, children: children }) : jsx("a", { ...rest, children: children });
160
89
  function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
161
90
  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] }));
162
91
  }
163
92
 
164
- function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
165
- return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
166
- }
167
-
168
- function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
169
- const ref = useRef();
170
- const [isShow, setIsShow] = useState(false);
171
- const handleClickToggle = () => {
172
- if (ref && ref.current) {
173
- if (isShow) {
174
- ref.current.style.height = hideHeight;
175
- }
176
- else {
177
- ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
178
- }
179
- setIsShow((prev) => !prev);
180
- }
181
- };
182
- return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
183
- height: hasToggleButton ? hideHeight : showHeight,
184
- }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
185
- }
186
-
187
- function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
188
- return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
189
- }
190
-
191
- function Loading({ img, children }) {
192
- return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
193
- }
194
-
195
93
  const ThemeContext = createContext(undefined);
196
94
  function ThemeProvider({ children }) {
197
95
  const [dataTheme, setDataTheme] = useState();
@@ -240,6 +138,64 @@ function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
240
138
  return context;
241
139
  }
242
140
 
141
+ const AccordionButton = forwardRef(function AccordionButton({ children, is = "link", label, toggle, setToggle, ...rest }, ref) {
142
+ const { dataTheme } = useTheme();
143
+ const handleToggle = () => {
144
+ setToggle((prev) => {
145
+ if (label) {
146
+ return {
147
+ ...prev,
148
+ [label]: {
149
+ ...(prev && label && prev[label]),
150
+ isToggle: prev && !prev[label].isToggle,
151
+ },
152
+ };
153
+ }
154
+ else {
155
+ return prev;
156
+ }
157
+ });
158
+ };
159
+ return (jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
160
+ icon: label && toggle && toggle[label].isToggle ? (jsx(TfiAngleDown, {})) : (jsx(TfiAngleUp, {})),
161
+ }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
162
+ });
163
+
164
+ const AccordionContent = forwardRef(function AccordionContent({ children, label, toggle, }, ref) {
165
+ return label && toggle && toggle[label].isToggle && jsx("div", { className: "accordion-content", children: children });
166
+ });
167
+
168
+ function Input({ className = "", classNameGroup = "", errorMessage = "", inputRef, styleGroup, ...rest }) {
169
+ return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
170
+ }
171
+
172
+ function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
173
+ const ref = useRef();
174
+ const [isShow, setIsShow] = useState(false);
175
+ const handleClickToggle = () => {
176
+ if (ref && ref.current) {
177
+ if (isShow) {
178
+ ref.current.style.height = hideHeight;
179
+ }
180
+ else {
181
+ ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
182
+ }
183
+ setIsShow((prev) => !prev);
184
+ }
185
+ };
186
+ return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
187
+ height: hasToggleButton ? hideHeight : showHeight,
188
+ }, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
189
+ }
190
+
191
+ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
192
+ return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
193
+ }
194
+
195
+ function Loading({ img, children }) {
196
+ return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
197
+ }
198
+
243
199
  const LoadingContext = createContext(undefined);
244
200
  function loadingReducer(state, action) {
245
201
  switch (action.type) {
@@ -361,4 +317,4 @@ function useModal({} = {}) {
361
317
  return context;
362
318
  }
363
319
 
364
- export { Accordion, Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
320
+ export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoinsight/react-components",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "This library is the main UI component library for geoinsight",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",