@geoinsight/react-components 0.4.3 → 0.4.5

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 +57 -60
  2. package/dist/esm/index.js +58 -61
  3. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -16,8 +16,8 @@ function recursiveChildren(children, i = 0) {
16
16
  return react.cloneElement(child, {
17
17
  ...child.props,
18
18
  children: recursiveChildren(child.props.children, i++),
19
- ...(child?.type?.displayName === "AccordionItem" && {
20
- label: `${child?.type?.displayName}-${index}-${i}`,
19
+ ...(child?.type?.name === "AccordionItem" && {
20
+ label: `${child?.type?.name}-${index}-${i}`,
21
21
  }),
22
22
  });
23
23
  }
@@ -30,7 +30,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
30
30
  }
31
31
  for (const child of children) {
32
32
  if (react.isValidElement(child)) {
33
- if (child?.type?.displayName === "AccordionItem" && child.props.label) {
33
+ if (child?.type?.name === "AccordionItem" && child.props.label) {
34
34
  toggleArray[child.props.label] = {
35
35
  isToggle: props.expanded === "all"
36
36
  ? true
@@ -44,7 +44,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
44
44
  };
45
45
  }
46
46
  if (typeof child.props.children !== "string" &&
47
- child.props.children.find((v) => v?.type?.displayName === "AccordionItem")) {
47
+ child.props.children.find((v) => v?.type?.name === "AccordionItem")) {
48
48
  recursiveToggle(Array.isArray(child.props.children)
49
49
  ? child.props.children
50
50
  : [child.props.children], toggleArray, i + 1, props);
@@ -80,13 +80,13 @@ function Accordion({ children, expanded = "all",
80
80
  }
81
81
 
82
82
  function AccordionItem({ children, label, isExpanded = false, }) {
83
- const { toggle, setToggle } = useAccordion();
83
+ const { toggle } = useAccordion();
84
84
  return (jsxRuntime.jsx("div", { className: "accordion-item", style: {
85
85
  paddingLeft: toggle && label && toggle[label].paddingLeft,
86
86
  }, children: react.Children.map(children, (child) => react.cloneElement(child, {
87
87
  toggle: toggle,
88
- setToggle: setToggle,
89
- ...(child?.type?.displayName !== "AccordionItem" && {
88
+ // setToggle: setToggle,
89
+ ...(child?.type?.name !== "AccordionItem" && {
90
90
  label: label,
91
91
  }),
92
92
  isExpanded: isExpanded,
@@ -98,12 +98,59 @@ function Button({ children = "Click me", className = "", icon = undefined, isNew
98
98
  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] }));
99
99
  }
100
100
 
101
- // import { useTheme } from "../../context/themeContext";
101
+ const ThemeContext = react.createContext(undefined);
102
+ function ThemeProvider({ children }) {
103
+ const [dataTheme, setDataTheme] = react.useState();
104
+ const [paletteTheme, setPaletteTheme] = react.useState();
105
+ react.useEffect(() => {
106
+ if (window.matchMedia) {
107
+ if (localStorage.getItem("data-theme")) {
108
+ document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
109
+ setDataTheme(localStorage.getItem("data-theme"));
110
+ }
111
+ else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
112
+ document.documentElement.setAttribute("data-theme", "dark");
113
+ setDataTheme("dark");
114
+ }
115
+ }
116
+ }, []);
117
+ const switchDataTheme = (mode) => {
118
+ document.documentElement.setAttribute("data-theme", mode);
119
+ setDataTheme(mode);
120
+ localStorage.setItem("data-theme", mode);
121
+ };
122
+ const switchPaletteTheme = (mode) => {
123
+ document.documentElement.setAttribute("palette-theme", mode);
124
+ setPaletteTheme(mode);
125
+ localStorage.setItem("palette-theme", mode);
126
+ };
127
+ return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
128
+ }
129
+ function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
130
+ const context = react.useContext(ThemeContext);
131
+ // only happens if there is an initial mode value.
132
+ react.useEffect(() => {
133
+ if (dataTheme && !localStorage.getItem("data-theme")) {
134
+ context?.switchDataTheme(dataTheme);
135
+ }
136
+ else if (!dataTheme && localStorage.getItem("data-theme")) {
137
+ localStorage.removeItem("data-theme");
138
+ }
139
+ }, []);
140
+ react.useEffect(() => {
141
+ context?.switchPaletteTheme(paletteTheme);
142
+ }, []);
143
+ if (context === undefined) {
144
+ throw new Error("useTheme must be used within a ThemeProvider");
145
+ }
146
+ return context;
147
+ }
148
+
102
149
  function AccordionButton({ children, is = "link", label,
103
150
  // toggle,
104
151
  // setToggle = (prev: any) => void,
105
152
  ...rest }) {
106
- // const { dataTheme } = useTheme();
153
+ const { dataTheme } = useTheme();
107
154
  const { toggle, setToggle } = useAccordion();
108
155
  const handleToggle = () => {
109
156
  setToggle((prev) => {
@@ -121,9 +168,7 @@ function AccordionButton({ children, is = "link", label,
121
168
  }
122
169
  });
123
170
  };
124
- return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`
125
- // `accordion-button__${is}--${dataTheme}`
126
- ), ...(is !== "link" && {
171
+ return (jsxRuntime.jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
127
172
  icon: label && toggle && toggle[label].isToggle ? (jsxRuntime.jsx(tfi.TfiAngleDown, {})) : (jsxRuntime.jsx(tfi.TfiAngleUp, {})),
128
173
  }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
129
174
  }
@@ -165,54 +210,6 @@ function Loading({ img, children }) {
165
210
  return (jsxRuntime.jsxs("div", { className: "loading", children: [jsxRuntime.jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
166
211
  }
167
212
 
168
- const ThemeContext = react.createContext(undefined);
169
- function ThemeProvider({ children }) {
170
- const [dataTheme, setDataTheme] = react.useState();
171
- const [paletteTheme, setPaletteTheme] = react.useState();
172
- react.useEffect(() => {
173
- if (window.matchMedia) {
174
- if (localStorage.getItem("data-theme")) {
175
- document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
176
- setDataTheme(localStorage.getItem("data-theme"));
177
- }
178
- else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
179
- document.documentElement.setAttribute("data-theme", "dark");
180
- setDataTheme("dark");
181
- }
182
- }
183
- }, []);
184
- const switchDataTheme = (mode) => {
185
- document.documentElement.setAttribute("data-theme", mode);
186
- setDataTheme(mode);
187
- localStorage.setItem("data-theme", mode);
188
- };
189
- const switchPaletteTheme = (mode) => {
190
- document.documentElement.setAttribute("palette-theme", mode);
191
- setPaletteTheme(mode);
192
- localStorage.setItem("palette-theme", mode);
193
- };
194
- return (jsxRuntime.jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
195
- }
196
- function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
197
- const context = react.useContext(ThemeContext);
198
- // only happens if there is an initial mode value.
199
- react.useEffect(() => {
200
- if (dataTheme && !localStorage.getItem("data-theme")) {
201
- context?.switchDataTheme(dataTheme);
202
- }
203
- else if (!dataTheme && localStorage.getItem("data-theme")) {
204
- localStorage.removeItem("data-theme");
205
- }
206
- }, []);
207
- react.useEffect(() => {
208
- context?.switchPaletteTheme(paletteTheme);
209
- }, []);
210
- if (context === undefined) {
211
- throw new Error("useTheme must be used within a ThemeProvider");
212
- }
213
- return context;
214
- }
215
-
216
213
  const LoadingContext = react.createContext(undefined);
217
214
  function loadingReducer(state, action) {
218
215
  switch (action.type) {
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { Children, isValidElement, cloneElement, createContext, useState, useContext, useRef, useEffect, useReducer } from 'react';
2
+ import { Children, isValidElement, cloneElement, createContext, useState, useContext, useEffect, useRef, useReducer } from 'react';
3
3
  import clsx from 'clsx';
4
4
  import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
5
5
  import { TbArrowsDiagonal2 } from 'react-icons/tb';
@@ -14,8 +14,8 @@ function recursiveChildren(children, i = 0) {
14
14
  return cloneElement(child, {
15
15
  ...child.props,
16
16
  children: recursiveChildren(child.props.children, i++),
17
- ...(child?.type?.displayName === "AccordionItem" && {
18
- label: `${child?.type?.displayName}-${index}-${i}`,
17
+ ...(child?.type?.name === "AccordionItem" && {
18
+ label: `${child?.type?.name}-${index}-${i}`,
19
19
  }),
20
20
  });
21
21
  }
@@ -28,7 +28,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
28
28
  }
29
29
  for (const child of children) {
30
30
  if (isValidElement(child)) {
31
- if (child?.type?.displayName === "AccordionItem" && child.props.label) {
31
+ if (child?.type?.name === "AccordionItem" && child.props.label) {
32
32
  toggleArray[child.props.label] = {
33
33
  isToggle: props.expanded === "all"
34
34
  ? true
@@ -42,7 +42,7 @@ function recursiveToggle(children, toggleArray = {}, i = 0, props) {
42
42
  };
43
43
  }
44
44
  if (typeof child.props.children !== "string" &&
45
- child.props.children.find((v) => v?.type?.displayName === "AccordionItem")) {
45
+ child.props.children.find((v) => v?.type?.name === "AccordionItem")) {
46
46
  recursiveToggle(Array.isArray(child.props.children)
47
47
  ? child.props.children
48
48
  : [child.props.children], toggleArray, i + 1, props);
@@ -78,13 +78,13 @@ function Accordion({ children, expanded = "all",
78
78
  }
79
79
 
80
80
  function AccordionItem({ children, label, isExpanded = false, }) {
81
- const { toggle, setToggle } = useAccordion();
81
+ const { toggle } = useAccordion();
82
82
  return (jsx("div", { className: "accordion-item", style: {
83
83
  paddingLeft: toggle && label && toggle[label].paddingLeft,
84
84
  }, children: Children.map(children, (child) => cloneElement(child, {
85
85
  toggle: toggle,
86
- setToggle: setToggle,
87
- ...(child?.type?.displayName !== "AccordionItem" && {
86
+ // setToggle: setToggle,
87
+ ...(child?.type?.name !== "AccordionItem" && {
88
88
  label: label,
89
89
  }),
90
90
  isExpanded: isExpanded,
@@ -96,12 +96,59 @@ function Button({ children = "Click me", className = "", icon = undefined, isNew
96
96
  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] }));
97
97
  }
98
98
 
99
- // import { useTheme } from "../../context/themeContext";
99
+ const ThemeContext = createContext(undefined);
100
+ function ThemeProvider({ children }) {
101
+ const [dataTheme, setDataTheme] = useState();
102
+ const [paletteTheme, setPaletteTheme] = useState();
103
+ useEffect(() => {
104
+ if (window.matchMedia) {
105
+ if (localStorage.getItem("data-theme")) {
106
+ document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
107
+ setDataTheme(localStorage.getItem("data-theme"));
108
+ }
109
+ else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
110
+ document.documentElement.setAttribute("data-theme", "dark");
111
+ setDataTheme("dark");
112
+ }
113
+ }
114
+ }, []);
115
+ const switchDataTheme = (mode) => {
116
+ document.documentElement.setAttribute("data-theme", mode);
117
+ setDataTheme(mode);
118
+ localStorage.setItem("data-theme", mode);
119
+ };
120
+ const switchPaletteTheme = (mode) => {
121
+ document.documentElement.setAttribute("palette-theme", mode);
122
+ setPaletteTheme(mode);
123
+ localStorage.setItem("palette-theme", mode);
124
+ };
125
+ return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
126
+ }
127
+ function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
128
+ const context = useContext(ThemeContext);
129
+ // only happens if there is an initial mode value.
130
+ useEffect(() => {
131
+ if (dataTheme && !localStorage.getItem("data-theme")) {
132
+ context?.switchDataTheme(dataTheme);
133
+ }
134
+ else if (!dataTheme && localStorage.getItem("data-theme")) {
135
+ localStorage.removeItem("data-theme");
136
+ }
137
+ }, []);
138
+ useEffect(() => {
139
+ context?.switchPaletteTheme(paletteTheme);
140
+ }, []);
141
+ if (context === undefined) {
142
+ throw new Error("useTheme must be used within a ThemeProvider");
143
+ }
144
+ return context;
145
+ }
146
+
100
147
  function AccordionButton({ children, is = "link", label,
101
148
  // toggle,
102
149
  // setToggle = (prev: any) => void,
103
150
  ...rest }) {
104
- // const { dataTheme } = useTheme();
151
+ const { dataTheme } = useTheme();
105
152
  const { toggle, setToggle } = useAccordion();
106
153
  const handleToggle = () => {
107
154
  setToggle((prev) => {
@@ -119,9 +166,7 @@ function AccordionButton({ children, is = "link", label,
119
166
  }
120
167
  });
121
168
  };
122
- return (jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`
123
- // `accordion-button__${is}--${dataTheme}`
124
- ), ...(is !== "link" && {
169
+ return (jsx(Button, { as: is, className: clsx("accordion-button", `accordion-button__${is}`, `accordion-button__${is}--${dataTheme}`), ...(is !== "link" && {
125
170
  icon: label && toggle && toggle[label].isToggle ? (jsx(TfiAngleDown, {})) : (jsx(TfiAngleUp, {})),
126
171
  }), ...(is !== "link" && { onClick: handleToggle }), ...rest, children: children }));
127
172
  }
@@ -163,54 +208,6 @@ function Loading({ img, children }) {
163
208
  return (jsxs("div", { className: "loading", children: [jsx("img", { src: img ? img : "../../stories/assets/loading.gif" }), children] }));
164
209
  }
165
210
 
166
- const ThemeContext = createContext(undefined);
167
- function ThemeProvider({ children }) {
168
- const [dataTheme, setDataTheme] = useState();
169
- const [paletteTheme, setPaletteTheme] = useState();
170
- useEffect(() => {
171
- if (window.matchMedia) {
172
- if (localStorage.getItem("data-theme")) {
173
- document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
174
- setDataTheme(localStorage.getItem("data-theme"));
175
- }
176
- else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
177
- document.documentElement.setAttribute("data-theme", "dark");
178
- setDataTheme("dark");
179
- }
180
- }
181
- }, []);
182
- const switchDataTheme = (mode) => {
183
- document.documentElement.setAttribute("data-theme", mode);
184
- setDataTheme(mode);
185
- localStorage.setItem("data-theme", mode);
186
- };
187
- const switchPaletteTheme = (mode) => {
188
- document.documentElement.setAttribute("palette-theme", mode);
189
- setPaletteTheme(mode);
190
- localStorage.setItem("palette-theme", mode);
191
- };
192
- return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, paletteTheme, switchPaletteTheme }, children: children }));
193
- }
194
- function useTheme({ dataTheme = undefined, paletteTheme = "water", } = {}) {
195
- const context = useContext(ThemeContext);
196
- // only happens if there is an initial mode value.
197
- useEffect(() => {
198
- if (dataTheme && !localStorage.getItem("data-theme")) {
199
- context?.switchDataTheme(dataTheme);
200
- }
201
- else if (!dataTheme && localStorage.getItem("data-theme")) {
202
- localStorage.removeItem("data-theme");
203
- }
204
- }, []);
205
- useEffect(() => {
206
- context?.switchPaletteTheme(paletteTheme);
207
- }, []);
208
- if (context === undefined) {
209
- throw new Error("useTheme must be used within a ThemeProvider");
210
- }
211
- return context;
212
- }
213
-
214
211
  const LoadingContext = createContext(undefined);
215
212
  function loadingReducer(state, action) {
216
213
  switch (action.type) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoinsight/react-components",
3
- "version": "0.4.3",
3
+ "version": "0.4.5",
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",