@jorgequevedoc/react-gridforms 1.1.0 → 1.1.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.
- package/dist/components/FormField.d.ts +7 -2
- package/dist/components/FormField.d.ts.map +1 -1
- package/dist/components/FormField.js +23 -3
- package/dist/components/FormField.js.map +1 -1
- package/dist/components/FormRow.d.ts +1 -2
- package/dist/components/FormRow.d.ts.map +1 -1
- package/dist/components/FormRow.js +6 -3
- package/dist/components/FormRow.js.map +1 -1
- package/dist/components/FormSection.d.ts +1 -2
- package/dist/components/FormSection.d.ts.map +1 -1
- package/dist/components/GridForm.d.ts +1 -2
- package/dist/components/GridForm.d.ts.map +1 -1
- package/dist/components/GridForm.js +0 -4
- package/dist/components/GridForm.js.map +1 -1
- package/dist/components/ThemeToggle.d.ts +1 -2
- package/dist/components/ThemeToggle.d.ts.map +1 -1
- package/dist/index.ts +7 -0
- package/dist/theme/ThemeContext.d.ts.map +1 -1
- package/dist/theme/ThemeContext.js +16 -9
- package/dist/theme/ThemeContext.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
interface FormFieldProps {
|
|
2
|
+
export interface FormFieldProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
span: number;
|
|
5
5
|
label?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Explicitly associates the label with a control by id. When omitted, a
|
|
8
|
+
* single input/select/textarea child is auto-wired to the label via a
|
|
9
|
+
* generated id. Ignored for RadioGroup, whose label acts as a group caption.
|
|
10
|
+
*/
|
|
11
|
+
htmlFor?: string;
|
|
6
12
|
className?: string;
|
|
7
13
|
rowspan?: number;
|
|
8
14
|
}
|
|
9
15
|
export declare const FormField: React.FC<FormFieldProps>;
|
|
10
|
-
export {};
|
|
11
16
|
//# sourceMappingURL=FormField.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAIlE,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAkFD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwF9C,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import React, { useState, useRef, useEffect, useId } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
+
import { RadioGroup } from './inputs/RadioGroup';
|
|
4
5
|
const StyledFormField = styled.div `
|
|
5
6
|
padding: ${(props) => props.theme.spacing.sm};
|
|
6
7
|
position: relative;
|
|
@@ -75,9 +76,28 @@ const StyledFormField = styled.div `
|
|
|
75
76
|
border-bottom: 1px solid ${(props) => props.theme.colors.border};
|
|
76
77
|
}
|
|
77
78
|
`;
|
|
78
|
-
export const FormField = ({ children, span, label, className, rowspan = 12, }) => {
|
|
79
|
+
export const FormField = ({ children, span, label, htmlFor, className, rowspan = 12, }) => {
|
|
79
80
|
const [isFocused, setIsFocused] = useState(false);
|
|
80
81
|
const fieldRef = useRef(null);
|
|
82
|
+
const generatedId = useId();
|
|
83
|
+
// Associate the label with its control. When the caller hasn't supplied an
|
|
84
|
+
// explicit `htmlFor`, auto-wire a single (non-RadioGroup) child by injecting a
|
|
85
|
+
// generated id and pointing the label at it. RadioGroup is a multi-control
|
|
86
|
+
// group, so its label stays a plain caption.
|
|
87
|
+
const soleChild = React.Children.count(children) === 1 ? children : null;
|
|
88
|
+
const isElementChild = React.isValidElement(soleChild) && soleChild.type !== RadioGroup;
|
|
89
|
+
const existingId = isElementChild
|
|
90
|
+
? soleChild.props.id
|
|
91
|
+
: undefined;
|
|
92
|
+
let labelFor = htmlFor;
|
|
93
|
+
let renderedChildren = children;
|
|
94
|
+
if (htmlFor == null && isElementChild) {
|
|
95
|
+
const fieldId = existingId ?? generatedId;
|
|
96
|
+
labelFor = fieldId;
|
|
97
|
+
if (existingId == null) {
|
|
98
|
+
renderedChildren = React.cloneElement(soleChild, { id: fieldId });
|
|
99
|
+
}
|
|
100
|
+
}
|
|
81
101
|
useEffect(() => {
|
|
82
102
|
const handleClick = (e) => {
|
|
83
103
|
if (fieldRef.current && !fieldRef.current.contains(e.target)) {
|
|
@@ -106,6 +126,6 @@ export const FormField = ({ children, span, label, className, rowspan = 12, }) =
|
|
|
106
126
|
}
|
|
107
127
|
};
|
|
108
128
|
}, []);
|
|
109
|
-
return (_jsxs(StyledFormField, { ref: fieldRef, "data-field-span": span, span: span, isFocused: isFocused, className: className, rowspan: rowspan, children: [label && _jsx("label", { children: label }),
|
|
129
|
+
return (_jsxs(StyledFormField, { ref: fieldRef, "data-field-span": span, span: span, isFocused: isFocused, className: className, rowspan: rowspan, children: [label && _jsx("label", { htmlFor: labelFor, children: label }), renderedChildren] }));
|
|
110
130
|
};
|
|
111
131
|
//# sourceMappingURL=FormField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":";AAAA,
|
|
1
|
+
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/components/FormField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
interface FormRowProps {
|
|
2
|
+
export interface FormRowProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
span: number;
|
|
5
5
|
className?: string;
|
|
6
6
|
}
|
|
7
7
|
export declare const FormRow: React.FC<FormRowProps>;
|
|
8
|
-
export {};
|
|
9
8
|
//# sourceMappingURL=FormRow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormRow.d.ts","sourceRoot":"","sources":["../../src/components/FormRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,
|
|
1
|
+
{"version":3,"file":"FormRow.d.ts","sourceRoot":"","sources":["../../src/components/FormRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqB1C,CAAC"}
|
|
@@ -5,7 +5,7 @@ const StyledFormRow = styled.div `
|
|
|
5
5
|
border-bottom: 1px solid ${(props) => props.theme.colors.border};
|
|
6
6
|
width: 100%;
|
|
7
7
|
display: flex;
|
|
8
|
-
flex-wrap: wrap
|
|
8
|
+
flex-wrap: wrap;
|
|
9
9
|
|
|
10
10
|
> div[data-field-span]:first-child {
|
|
11
11
|
border-left: none;
|
|
@@ -26,9 +26,12 @@ const StyledFormRow = styled.div `
|
|
|
26
26
|
}
|
|
27
27
|
`;
|
|
28
28
|
export const FormRow = ({ children, span, className, }) => {
|
|
29
|
-
// Clone children and inject rowspan prop
|
|
29
|
+
// Clone children and inject rowspan prop.
|
|
30
|
+
// Only inject into custom (function/class) components such as FormField —
|
|
31
|
+
// injecting into intrinsic DOM elements (e.g. a bare <div>) would surface an
|
|
32
|
+
// "unknown prop `rowspan`" warning from React.
|
|
30
33
|
const childrenWithRowspan = React.Children.map(children, (child) => {
|
|
31
|
-
if (React.isValidElement(child)) {
|
|
34
|
+
if (React.isValidElement(child) && typeof child.type !== 'string') {
|
|
32
35
|
return React.cloneElement(child, { rowspan: span });
|
|
33
36
|
}
|
|
34
37
|
return child;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormRow.js","sourceRoot":"","sources":["../../src/components/FormRow.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAkB;6BACrB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;CAsBhE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,EAAE,EAAE;IACH,
|
|
1
|
+
{"version":3,"file":"FormRow.js","sourceRoot":"","sources":["../../src/components/FormRow.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAkB;6BACrB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;CAsBhE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,EAAE,EAAE;IACH,0CAA0C;IAC1C,0EAA0E;IAC1E,6EAA6E;IAC7E,+CAA+C;IAC/C,MAAM,mBAAmB,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACjE,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAClE,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAyB,CAAC,CAAC;QAC7E,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,aAAa,qBAAgB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,YACjE,mBAAmB,GACN,CACjB,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
interface FormSectionProps {
|
|
2
|
+
export interface FormSectionProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
title: string;
|
|
5
5
|
className?: string;
|
|
6
6
|
}
|
|
7
7
|
export declare const FormSection: React.FC<FormSectionProps>;
|
|
8
|
-
export {};
|
|
9
8
|
//# sourceMappingURL=FormSection.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormSection.d.ts","sourceRoot":"","sources":["../../src/components/FormSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,
|
|
1
|
+
{"version":3,"file":"FormSection.d.ts","sourceRoot":"","sources":["../../src/components/FormSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiCD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAWlD,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
interface GridFormProps {
|
|
2
|
+
export interface GridFormProps {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
onSubmit?: (e: React.FormEvent) => void;
|
|
5
5
|
className?: string;
|
|
6
6
|
}
|
|
7
7
|
export declare const GridForm: React.FC<GridFormProps>;
|
|
8
|
-
export {};
|
|
9
8
|
//# sourceMappingURL=GridForm.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridForm.d.ts","sourceRoot":"","sources":["../../src/components/GridForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,
|
|
1
|
+
{"version":3,"file":"GridForm.d.ts","sourceRoot":"","sources":["../../src/components/GridForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiFD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAa5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridForm.js","sourceRoot":"","sources":["../../src/components/GridForm.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA4BhB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe;;;qBAG1C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe;eACvD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB;;;;;;;;;;+BAU9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;eAYpD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;;;;mBAK7B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa;eACnD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW;;;uBAGjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE
|
|
1
|
+
{"version":3,"file":"GridForm.js","sourceRoot":"","sources":["../../src/components/GridForm.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAQvC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA4BhB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe;;;qBAG1C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe;eACvD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB;;;;;;;;;;+BAU9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;eAYpD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;;;;mBAK7B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa;eACnD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW;;;uBAGjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;;;;;;;;;;;iCAWvB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;CAGpE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;IACH,OAAO,CACL,KAAC,cAAc,IACb,SAAS,EAAE,aAAa,SAAS,IAAI,EAAE,EAAE,EACzC,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,
|
|
1
|
+
{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CASlD,CAAC"}
|
package/dist/index.ts
CHANGED
|
@@ -14,6 +14,13 @@ export {
|
|
|
14
14
|
export { ThemeProvider, useTheme } from './theme/ThemeContext';
|
|
15
15
|
export { lightTheme, darkTheme } from './theme';
|
|
16
16
|
|
|
17
|
+
// Component prop types
|
|
18
|
+
export type { GridFormProps } from './components/GridForm';
|
|
19
|
+
export type { FormSectionProps } from './components/FormSection';
|
|
20
|
+
export type { FormRowProps } from './components/FormRow';
|
|
21
|
+
export type { FormFieldProps } from './components/FormField';
|
|
22
|
+
export type { ThemeToggleProps } from './components/ThemeToggle';
|
|
23
|
+
|
|
17
24
|
// Type exports
|
|
18
25
|
export type { TextInputProps } from './components/inputs/TextInput';
|
|
19
26
|
export type {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,UAAU,gBAAgB;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;
|
|
1
|
+
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,UAAU,gBAAgB;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAMD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAcD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0BtD,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC"}
|
|
@@ -2,19 +2,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { createContext, useContext, useState, useEffect } from 'react';
|
|
3
3
|
import { ThemeProvider as StyledThemeProvider } from 'styled-components';
|
|
4
4
|
import { lightTheme, darkTheme } from './themes';
|
|
5
|
+
const STORAGE_KEY = 'gridforms-theme';
|
|
5
6
|
const ThemeContext = createContext(undefined);
|
|
7
|
+
// Read the persisted theme synchronously so the first render already reflects
|
|
8
|
+
// the saved choice (no light→dark flash). Guarded for non-browser (SSR) envs.
|
|
9
|
+
const getInitialTheme = (fallback) => {
|
|
10
|
+
if (typeof window === 'undefined') {
|
|
11
|
+
return fallback;
|
|
12
|
+
}
|
|
13
|
+
const savedTheme = window.localStorage.getItem(STORAGE_KEY);
|
|
14
|
+
return savedTheme === 'light' || savedTheme === 'dark'
|
|
15
|
+
? savedTheme
|
|
16
|
+
: fallback;
|
|
17
|
+
};
|
|
6
18
|
export const ThemeProvider = ({ children, initialTheme = 'light', }) => {
|
|
7
|
-
const [themeMode, setThemeMode] = useState(initialTheme);
|
|
8
|
-
// Load theme from localStorage on mount
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
const savedTheme = localStorage.getItem('gridforms-theme');
|
|
11
|
-
if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
|
|
12
|
-
setThemeMode(savedTheme);
|
|
13
|
-
}
|
|
14
|
-
}, []);
|
|
19
|
+
const [themeMode, setThemeMode] = useState(() => getInitialTheme(initialTheme));
|
|
15
20
|
// Save theme to localStorage when it changes
|
|
16
21
|
useEffect(() => {
|
|
17
|
-
|
|
22
|
+
if (typeof window !== 'undefined') {
|
|
23
|
+
window.localStorage.setItem(STORAGE_KEY, themeMode);
|
|
24
|
+
}
|
|
18
25
|
}, [themeMode]);
|
|
19
26
|
const toggleTheme = () => {
|
|
20
27
|
setThemeMode((prev) => (prev === 'light' ? 'dark' : 'light'));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeContext.js","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AASjD,MAAM,YAAY,GAAG,aAAa,CAA+B,SAAS,CAAC,CAAC;AAO5E,
|
|
1
|
+
{"version":3,"file":"ThemeContext.js","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AASjD,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAEtC,MAAM,YAAY,GAAG,aAAa,CAA+B,SAAS,CAAC,CAAC;AAO5E,8EAA8E;AAC9E,8EAA8E;AAC9E,MAAM,eAAe,GAAG,CAAC,QAAmB,EAAa,EAAE;IACzD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,QAAQ,CAAC;IAClB,CAAC;IACD,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5D,OAAO,UAAU,KAAK,OAAO,IAAI,UAAU,KAAK,MAAM;QACpD,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,QAAQ,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,YAAY,GAAG,OAAO,GACvB,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,GAAG,EAAE,CACzD,eAAe,CAAC,YAAY,CAAC,CAC9B,CAAC;IAEF,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACtD,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,YACpE,KAAC,mBAAmB,IAAC,KAAK,EAAE,YAAY,YAAG,QAAQ,GAAuB,GACpD,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAqB,EAAE;IAC7C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
|
package/package.json
CHANGED