@rolster/react-components 19.8.22 → 19.10.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.cjs +252 -114
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/es/index.mjs +250 -115
- package/dist/es/index.mjs.map +1 -1
- package/dist/esm/components/atoms/AreaText/AreaText.js +39 -8
- package/dist/esm/components/atoms/AreaText/AreaText.js.map +1 -1
- package/dist/esm/components/atoms/Input/Input.js +66 -14
- package/dist/esm/components/atoms/Input/Input.js.map +1 -1
- package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.d.ts +13 -0
- package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.js +34 -0
- package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.js.map +1 -0
- package/dist/esm/controllers/AppThemeController.d.ts +7 -0
- package/dist/esm/controllers/AppThemeController.js +20 -0
- package/dist/esm/controllers/AppThemeController.js.map +1 -0
- package/dist/esm/helpers/app-theme.js +2 -3
- package/dist/esm/helpers/app-theme.js.map +1 -1
- package/dist/esm/i18n.d.ts +3 -0
- package/dist/esm/i18n.js +6 -0
- package/dist/esm/i18n.js.map +1 -1
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types.d.ts +2 -2
- package/package.json +3 -3
- package/readme.md +38 -24
|
@@ -3,6 +3,17 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
|
3
3
|
import { renderClassStatus } from '../../../helpers/css';
|
|
4
4
|
const AREA_TEXT_MAX_ROWS = 8;
|
|
5
5
|
const AREA_TEXT_MIN_ROWS = 3;
|
|
6
|
+
function writeAreaValue(element, valueArea) {
|
|
7
|
+
const rawArea = element.value;
|
|
8
|
+
if (rawArea === valueArea) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
const selection = element.selectionStart;
|
|
12
|
+
const offset = valueArea.length - rawArea.length;
|
|
13
|
+
const caret = Math.max(0, Math.min(selection + offset, valueArea.length));
|
|
14
|
+
element.value = valueArea;
|
|
15
|
+
element.setSelectionRange(caret, caret);
|
|
16
|
+
}
|
|
6
17
|
function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier, maxLength, maxRows, minRows, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize = 'vertical', value }) {
|
|
7
18
|
const valueInitial = String(formControl?.value ?? value ?? '');
|
|
8
19
|
const rowsMin = minRows ?? AREA_TEXT_MIN_ROWS;
|
|
@@ -11,7 +22,9 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
|
|
|
11
22
|
const [focused, setFocused] = useState(false);
|
|
12
23
|
const elementRef = useRef(null);
|
|
13
24
|
const areaRef = formControl?.elementRef ?? elementRef;
|
|
14
|
-
const
|
|
25
|
+
const composing = useRef(false);
|
|
26
|
+
const valueSent = useRef(formControl?.value);
|
|
27
|
+
const valueSource = useRef(formControl ? formControl.value : value);
|
|
15
28
|
const heightIsManual = useRef(false);
|
|
16
29
|
const heightApplied = useRef(0);
|
|
17
30
|
const refreshHeight = useCallback(() => {
|
|
@@ -37,13 +50,16 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
|
|
|
37
50
|
heightApplied.current = height;
|
|
38
51
|
}, [areaRef, rowsMax, rowsMin]);
|
|
39
52
|
useEffect(() => {
|
|
40
|
-
|
|
41
|
-
|
|
53
|
+
const source = formControl ? formControl.value : value;
|
|
54
|
+
const isEcho = Object.is(source, valueSent.current);
|
|
55
|
+
const isSame = Object.is(source, valueSource.current);
|
|
56
|
+
valueSource.current = source;
|
|
57
|
+
if (!isEcho && !isSame) {
|
|
58
|
+
const nextValue = String(source ?? '');
|
|
42
59
|
if (valueArea !== nextValue) {
|
|
43
60
|
setValueArea(nextValue);
|
|
44
61
|
}
|
|
45
62
|
}
|
|
46
|
-
changeIsInternal.current = false;
|
|
47
63
|
}, [formControl?.value, value, valueArea]);
|
|
48
64
|
useEffect(() => {
|
|
49
65
|
refreshHeight();
|
|
@@ -67,13 +83,28 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
|
|
|
67
83
|
observer.observe(element);
|
|
68
84
|
return () => observer.disconnect();
|
|
69
85
|
}, [areaRef, resize]);
|
|
70
|
-
const
|
|
71
|
-
const
|
|
72
|
-
|
|
86
|
+
const applyArea = useCallback((element) => {
|
|
87
|
+
const rawArea = element.value;
|
|
88
|
+
const formatter = formControl?.formatter;
|
|
89
|
+
const nextValue = formatter && formControl?.formatOn !== 'blur' && !composing.current
|
|
90
|
+
? (formatter(rawArea) ?? '')
|
|
91
|
+
: rawArea;
|
|
92
|
+
writeAreaValue(element, nextValue);
|
|
93
|
+
valueSent.current = nextValue;
|
|
73
94
|
onValue?.(nextValue);
|
|
74
95
|
setValueArea(nextValue);
|
|
75
96
|
formControl?.setValue(nextValue);
|
|
76
97
|
}, [formControl, onValue]);
|
|
98
|
+
const onChangeArea = useCallback((event) => {
|
|
99
|
+
applyArea(event.target);
|
|
100
|
+
}, [applyArea]);
|
|
101
|
+
const onCompositionStart = useCallback(() => {
|
|
102
|
+
composing.current = true;
|
|
103
|
+
}, []);
|
|
104
|
+
const onCompositionEnd = useCallback((event) => {
|
|
105
|
+
composing.current = false;
|
|
106
|
+
applyArea(event.currentTarget);
|
|
107
|
+
}, [applyArea]);
|
|
77
108
|
const onKeyDownArea = useCallback((event) => {
|
|
78
109
|
onKeyDown?.(event);
|
|
79
110
|
if (event.key === 'Enter') {
|
|
@@ -100,7 +131,7 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
|
|
|
100
131
|
readonly: readOnly,
|
|
101
132
|
resizable: resize !== 'none' && !disabledArea && !readOnly
|
|
102
133
|
});
|
|
103
|
-
return (_jsxs("div", { id: identifier, className: className, children: [_jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), _jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
|
|
134
|
+
return (_jsxs("div", { id: identifier, className: className, children: [_jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: disabledArea, readOnly: readOnly, maxLength: maxLength, rows: rowsMin, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), _jsx("span", { className: "rls-area-text__value", "aria-hidden": "true", children: valueArea })] }));
|
|
104
135
|
}
|
|
105
136
|
export const RlsAreaText = memo(RlsAreaTextComponent);
|
|
106
137
|
//# sourceMappingURL=AreaText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AreaText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/AreaText/AreaText.tsx"],"names":[],"mappings":";AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"AreaText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/AreaText/AreaText.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,30 +1,82 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import { renderClassStatus } from '../../../helpers/css';
|
|
4
|
+
function valueToInput(value) {
|
|
5
|
+
return value ? String(value) : '';
|
|
6
|
+
}
|
|
7
|
+
function selectionStartOf(element) {
|
|
8
|
+
try {
|
|
9
|
+
// Lanza o retorna null en inputs sin selección (number, email, etc.)
|
|
10
|
+
return element.selectionStart;
|
|
11
|
+
}
|
|
12
|
+
catch {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Escribe el valor formateado directamente en el DOM y conserva la posición
|
|
18
|
+
* del cursor, corrigiéndola por la diferencia de longitud. Es necesario
|
|
19
|
+
* porque, cuando el formateador rechaza un carácter, el estado del control
|
|
20
|
+
* no cambia y React no vuelve a escribir el input.
|
|
21
|
+
*/
|
|
22
|
+
function writeInputValue(element, valueInput) {
|
|
23
|
+
const rawInput = element.value;
|
|
24
|
+
if (rawInput === valueInput) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const selection = selectionStartOf(element);
|
|
28
|
+
element.value = valueInput;
|
|
29
|
+
if (selection !== null) {
|
|
30
|
+
const offset = valueInput.length - rawInput.length;
|
|
31
|
+
const caret = Math.max(0, Math.min(selection + offset, valueInput.length));
|
|
32
|
+
element.setSelectionRange(caret, caret);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
4
35
|
function RlsInputComponent({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
|
|
5
|
-
const
|
|
6
|
-
const [valueInput, setValueInput] = useState(valueInitial);
|
|
36
|
+
const [valueInput, setValueInput] = useState(() => valueToInput(formControl?.value ?? value));
|
|
7
37
|
const [focused, setFocused] = useState(false);
|
|
8
|
-
const
|
|
38
|
+
const composing = useRef(false);
|
|
39
|
+
const valueSent = useRef(formControl?.value);
|
|
9
40
|
useEffect(() => {
|
|
10
|
-
if (
|
|
11
|
-
const valueControl =
|
|
41
|
+
if (formControl && !Object.is(formControl.value, valueSent.current)) {
|
|
42
|
+
const valueControl = valueToInput(formControl.value);
|
|
12
43
|
if (valueInput !== valueControl) {
|
|
13
44
|
setValueInput(valueControl);
|
|
14
45
|
}
|
|
15
46
|
}
|
|
16
|
-
changeIsInternal.current = false;
|
|
17
47
|
}, [formControl?.value]);
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
? parseFloat((+
|
|
22
|
-
:
|
|
23
|
-
|
|
48
|
+
const applyInput = useCallback((element) => {
|
|
49
|
+
const rawInput = element.value;
|
|
50
|
+
const parsed = type === 'number'
|
|
51
|
+
? parseFloat((+rawInput).toFixed(decimals))
|
|
52
|
+
: rawInput;
|
|
53
|
+
const formatter = formControl?.formatter;
|
|
54
|
+
const value = formatter && formControl?.formatOn !== 'blur' && !composing.current
|
|
55
|
+
? formatter(parsed)
|
|
56
|
+
: parsed;
|
|
57
|
+
const textInput = Object.is(value, parsed)
|
|
58
|
+
? rawInput
|
|
59
|
+
: type === 'number'
|
|
60
|
+
? Number.isNaN(value)
|
|
61
|
+
? ''
|
|
62
|
+
: String(value)
|
|
63
|
+
: valueToInput(value);
|
|
64
|
+
writeInputValue(element, textInput);
|
|
65
|
+
valueSent.current = value;
|
|
24
66
|
onValue?.(value);
|
|
25
|
-
setValueInput(
|
|
67
|
+
setValueInput(textInput);
|
|
26
68
|
formControl?.setValue(value);
|
|
27
69
|
}, [formControl, onValue, type, decimals]);
|
|
70
|
+
const onChangeInput = useCallback((event) => {
|
|
71
|
+
applyInput(event.target);
|
|
72
|
+
}, [applyInput]);
|
|
73
|
+
const onCompositionStart = useCallback(() => {
|
|
74
|
+
composing.current = true;
|
|
75
|
+
}, []);
|
|
76
|
+
const onCompositionEnd = useCallback((event) => {
|
|
77
|
+
composing.current = false;
|
|
78
|
+
applyInput(event.currentTarget);
|
|
79
|
+
}, [applyInput]);
|
|
28
80
|
const onKeyDownInput = useCallback((event) => {
|
|
29
81
|
onKeyDown?.(event);
|
|
30
82
|
if (event.key === 'Enter') {
|
|
@@ -48,7 +100,7 @@ function RlsInputComponent({ children, decimals, disabled, formControl, identifi
|
|
|
48
100
|
disabled: formControl?.disabled || disabled,
|
|
49
101
|
focused: formControl?.focused ?? focused
|
|
50
102
|
});
|
|
51
|
-
return (_jsxs("div", { id: identifier, className: className, children: [_jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), _jsx("span", { className: "rls-input__value", children: children })] }));
|
|
103
|
+
return (_jsxs("div", { id: identifier, className: className, children: [_jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), _jsx("span", { className: "rls-input__value", children: children })] }));
|
|
52
104
|
}
|
|
53
105
|
export const RlsInput = memo(RlsInputComponent);
|
|
54
106
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { RlsAppTheme } from '../../../types';
|
|
2
|
+
import { PropsWithRlsTheme } from '../../definitions';
|
|
3
|
+
export type AppThemeLabels = Partial<Record<RlsAppTheme, string>>;
|
|
4
|
+
interface AppThemeTabsProps extends PropsWithRlsTheme {
|
|
5
|
+
labels?: AppThemeLabels;
|
|
6
|
+
onValue?: (value: RlsAppTheme) => void;
|
|
7
|
+
themes?: RlsAppTheme[];
|
|
8
|
+
value?: RlsAppTheme;
|
|
9
|
+
}
|
|
10
|
+
export declare const APP_THEMES: RlsAppTheme[];
|
|
11
|
+
declare function RlsAppThemeTabsComponent({ labels, onValue, rlsTheme, themes, value }: AppThemeTabsProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const RlsAppThemeTabs: import("react").MemoExoticComponent<typeof RlsAppThemeTabsComponent>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import { getAppTheme, setAppTheme } from '../../../helpers/app-theme';
|
|
4
|
+
import { reactI18n } from '../../../i18n';
|
|
5
|
+
import { RlsTabs } from '../Tabs/Tabs';
|
|
6
|
+
export const APP_THEMES = ['light', 'dim', 'dark'];
|
|
7
|
+
const LABELS = {
|
|
8
|
+
light: () => reactI18n('appThemeLight'),
|
|
9
|
+
dim: () => reactI18n('appThemeDim'),
|
|
10
|
+
dark: () => reactI18n('appThemeDark')
|
|
11
|
+
};
|
|
12
|
+
function RlsAppThemeTabsComponent({ labels, onValue, rlsTheme, themes = APP_THEMES, value }) {
|
|
13
|
+
const [appTheme, setAppThemeValue] = useState(() => value ?? getAppTheme());
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (value !== undefined) {
|
|
16
|
+
setAppTheme(value);
|
|
17
|
+
setAppThemeValue(value);
|
|
18
|
+
}
|
|
19
|
+
}, [value]);
|
|
20
|
+
const tabs = useMemo(() => {
|
|
21
|
+
return themes.map((theme) => ({
|
|
22
|
+
label: labels?.[theme] ?? LABELS[theme](),
|
|
23
|
+
value: theme
|
|
24
|
+
}));
|
|
25
|
+
}, [labels, themes]);
|
|
26
|
+
const onSelect = useCallback((theme) => {
|
|
27
|
+
setAppTheme(theme);
|
|
28
|
+
setAppThemeValue(theme);
|
|
29
|
+
onValue?.(theme);
|
|
30
|
+
}, [onValue]);
|
|
31
|
+
return (_jsx(RlsTabs, { tabs: tabs, value: appTheme, onValue: onSelect, rlsTheme: rlsTheme }));
|
|
32
|
+
}
|
|
33
|
+
export const RlsAppThemeTabs = memo(RlsAppThemeTabsComponent);
|
|
34
|
+
//# sourceMappingURL=AppThemeTabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppThemeTabs.js","sourceRoot":"","sources":["../../../../../src/components/molecules/AppThemeTabs/AppThemeTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAO,MAAM,cAAc,CAAC;AAW5C,MAAM,CAAC,MAAM,UAAU,GAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,GAAsC;IAChD,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,eAAe,CAAC;IACvC,GAAG,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC;IACnC,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC;CACtC,CAAC;AAEF,SAAS,wBAAwB,CAAC,EAChC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,GAAG,UAAU,EACnB,KAAK,EACa;IAClB,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAC3C,GAAG,EAAE,CAAC,KAAK,IAAI,WAAW,EAAE,CAC7B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,OAAO,CAAqB,GAAG,EAAE;QAC5C,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC5B,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE;YACzC,KAAK,EAAE,KAAK;SACb,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAkB,EAAE,EAAE;QACrB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAExB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { RlsAppTheme } from '../types';
|
|
2
|
+
export interface AppThemeController {
|
|
3
|
+
setValue: (value: RlsAppTheme) => void;
|
|
4
|
+
toggle: () => void;
|
|
5
|
+
value: RlsAppTheme;
|
|
6
|
+
}
|
|
7
|
+
export declare function useAppThemeController(initialTheme?: RlsAppTheme, primaryTheme?: RlsAppTheme, secondaryTheme?: RlsAppTheme): AppThemeController;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useCallback, useState } from 'react';
|
|
2
|
+
import { getAppTheme, setAppTheme } from '../helpers/app-theme';
|
|
3
|
+
export function useAppThemeController(initialTheme, primaryTheme = 'light', secondaryTheme = 'dark') {
|
|
4
|
+
const [appTheme, setAppThemeValue] = useState(() => {
|
|
5
|
+
if (initialTheme) {
|
|
6
|
+
setAppTheme(initialTheme);
|
|
7
|
+
return initialTheme;
|
|
8
|
+
}
|
|
9
|
+
return getAppTheme();
|
|
10
|
+
});
|
|
11
|
+
const setValue = useCallback((value) => {
|
|
12
|
+
setAppTheme(value);
|
|
13
|
+
setAppThemeValue(value);
|
|
14
|
+
}, []);
|
|
15
|
+
const toggle = useCallback(() => {
|
|
16
|
+
setValue(appTheme === primaryTheme ? secondaryTheme : primaryTheme);
|
|
17
|
+
}, [appTheme, primaryTheme, secondaryTheme, setValue]);
|
|
18
|
+
return { setValue, toggle, value: appTheme };
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=AppThemeController.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppThemeController.js","sourceRoot":"","sources":["../../../src/controllers/AppThemeController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAShE,MAAM,UAAU,qBAAqB,CACnC,YAA0B,EAC1B,eAA4B,OAAO,EACnC,iBAA8B,MAAM;IAEpC,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAc,GAAG,EAAE;QAC9D,IAAI,YAAY,EAAE,CAAC;YACjB,WAAW,CAAC,YAAY,CAAC,CAAC;YAE1B,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,OAAO,WAAW,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,KAAkB,EAAE,EAAE;QAClD,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC/C,CAAC"}
|
|
@@ -3,9 +3,8 @@ export function getAppTheme() {
|
|
|
3
3
|
if (typeof document === 'undefined') {
|
|
4
4
|
return 'light';
|
|
5
5
|
}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
: 'light';
|
|
6
|
+
const theme = document.body.getAttribute(APP_THEME_ATTRIBUTE);
|
|
7
|
+
return theme === 'dark' || theme === 'dim' ? theme : 'light';
|
|
9
8
|
}
|
|
10
9
|
export function setAppTheme(theme) {
|
|
11
10
|
if (typeof document === 'undefined') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-theme.js","sourceRoot":"","sources":["../../../src/helpers/app-theme.ts"],"names":[],"mappings":"AAEA,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAExC,MAAM,UAAU,WAAW;IACzB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,
|
|
1
|
+
{"version":3,"file":"app-theme.js","sourceRoot":"","sources":["../../../src/helpers/app-theme.ts"],"names":[],"mappings":"AAEA,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAExC,MAAM,UAAU,WAAW;IACzB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;IAE9D,OAAO,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAkB;IAC5C,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO;IACT,CAAC;IAED,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAgB,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAEvE,WAAW,CAAC,KAAK,CAAC,CAAC;IAEnB,OAAO,KAAK,CAAC;AACf,CAAC"}
|
package/dist/esm/i18n.d.ts
CHANGED
package/dist/esm/i18n.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { i18n } from '@rolster/i18n';
|
|
2
2
|
export const reactI18n = i18n({
|
|
3
3
|
es: {
|
|
4
|
+
appThemeDark: 'Oscuro',
|
|
5
|
+
appThemeDim: 'Intermedio',
|
|
6
|
+
appThemeLight: 'Claro',
|
|
4
7
|
confirmationActionApproved: 'Aceptar',
|
|
5
8
|
dateActionCancel: 'Cancelar',
|
|
6
9
|
dateActionSelect: 'Establecer',
|
|
@@ -13,6 +16,9 @@ export const reactI18n = i18n({
|
|
|
13
16
|
listInputPlaceholder: 'Escriba palabre clave para filtrar...'
|
|
14
17
|
},
|
|
15
18
|
en: {
|
|
19
|
+
appThemeDark: 'Dark',
|
|
20
|
+
appThemeDim: 'Dim',
|
|
21
|
+
appThemeLight: 'Light',
|
|
16
22
|
confirmationActionApproved: 'Approved',
|
|
17
23
|
dateActionCancel: 'Cancel',
|
|
18
24
|
dateActionSelect: 'Select',
|
package/dist/esm/i18n.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../src/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC;IAC5B,EAAE,EAAE;QACF,0BAA0B,EAAE,SAAS;QACrC,gBAAgB,EAAE,UAAU;QAC5B,gBAAgB,EAAE,YAAY;QAC9B,eAAe,EAAE,KAAK;QACtB,wBAAwB,EAAE,UAAU;QACpC,wBAAwB,EAAE,WAAW;QACrC,uBAAuB,EAAE,aAAa;QACtC,oBAAoB,EAClB,2DAA2D;QAC7D,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,uCAAuC;KAC9D;IACD,EAAE,EAAE;QACF,0BAA0B,EAAE,UAAU;QACtC,gBAAgB,EAAE,QAAQ;QAC1B,gBAAgB,EAAE,QAAQ;QAC1B,eAAe,EAAE,OAAO;QACxB,wBAAwB,EAAE,QAAQ;QAClC,wBAAwB,EAAE,SAAS;QACnC,uBAAuB,EAAE,QAAQ;QACjC,oBAAoB,EAAE,iDAAiD;QACvE,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,4BAA4B;KACnD;CACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../src/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC;IAC5B,EAAE,EAAE;QACF,YAAY,EAAE,QAAQ;QACtB,WAAW,EAAE,YAAY;QACzB,aAAa,EAAE,OAAO;QACtB,0BAA0B,EAAE,SAAS;QACrC,gBAAgB,EAAE,UAAU;QAC5B,gBAAgB,EAAE,YAAY;QAC9B,eAAe,EAAE,KAAK;QACtB,wBAAwB,EAAE,UAAU;QACpC,wBAAwB,EAAE,WAAW;QACrC,uBAAuB,EAAE,aAAa;QACtC,oBAAoB,EAClB,2DAA2D;QAC7D,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,uCAAuC;KAC9D;IACD,EAAE,EAAE;QACF,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,KAAK;QAClB,aAAa,EAAE,OAAO;QACtB,0BAA0B,EAAE,UAAU;QACtC,gBAAgB,EAAE,QAAQ;QAC1B,gBAAgB,EAAE,QAAQ;QAC1B,eAAe,EAAE,OAAO;QACxB,wBAAwB,EAAE,QAAQ;QAClC,wBAAwB,EAAE,SAAS;QACnC,uBAAuB,EAAE,QAAQ;QACjC,oBAAoB,EAAE,iDAAiD;QACvE,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,4BAA4B;KACnD;CACF,CAAC,CAAC"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ export * from './components/atoms/TabularText/TabularText';
|
|
|
35
35
|
export * from './components/definitions';
|
|
36
36
|
export * from './components/molecules/Accordion/Accordion';
|
|
37
37
|
export * from './components/molecules/Alert/Alert';
|
|
38
|
+
export * from './components/molecules/AppThemeTabs/AppThemeTabs';
|
|
38
39
|
export * from './components/molecules/Ballot/Ballot';
|
|
39
40
|
export * from './components/molecules/Body/Body';
|
|
40
41
|
export * from './components/molecules/ButtonProgress/ButtonProgress';
|
|
@@ -101,6 +102,7 @@ export * from './components/organisms/PickerDateRange/PickerDateRange';
|
|
|
101
102
|
export * from './components/organisms/Snackbar/Snackbar';
|
|
102
103
|
export type { FieldProps, InputProps, RolsterReactInputControl } from './components/types';
|
|
103
104
|
export * from './context';
|
|
105
|
+
export * from './controllers/AppThemeController';
|
|
104
106
|
export * from './controllers/DatatableController';
|
|
105
107
|
export * from './controllers/DesingSystemController';
|
|
106
108
|
export * from './controllers/DropdownController';
|
package/dist/esm/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export * from './components/atoms/TabularText/TabularText';
|
|
|
35
35
|
export * from './components/definitions';
|
|
36
36
|
export * from './components/molecules/Accordion/Accordion';
|
|
37
37
|
export * from './components/molecules/Alert/Alert';
|
|
38
|
+
export * from './components/molecules/AppThemeTabs/AppThemeTabs';
|
|
38
39
|
export * from './components/molecules/Ballot/Ballot';
|
|
39
40
|
export * from './components/molecules/Body/Body';
|
|
40
41
|
export * from './components/molecules/ButtonProgress/ButtonProgress';
|
|
@@ -100,6 +101,7 @@ export * from './components/organisms/PickerDate/PickerDate';
|
|
|
100
101
|
export * from './components/organisms/PickerDateRange/PickerDateRange';
|
|
101
102
|
export * from './components/organisms/Snackbar/Snackbar';
|
|
102
103
|
export * from './context';
|
|
104
|
+
export * from './controllers/AppThemeController';
|
|
103
105
|
export * from './controllers/DatatableController';
|
|
104
106
|
export * from './controllers/DesingSystemController';
|
|
105
107
|
export * from './controllers/DropdownController';
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0CAA0C,CAAC;AACzD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0CAA0C,CAAC;AACzD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0CAA0C,CAAC;AACzD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oDAAoD,CAAC;AACnE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sDAAsD,CAAC;AACrE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sDAAsD,CAAC;AACrE,cAAc,oDAAoD,CAAC;AACnE,cAAc,kDAAkD,CAAC;AACjE,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kDAAkD,CAAC;AACjE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kEAAkE,CAAC;AACjF,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oDAAoD,CAAC;AACnE,cAAc,wDAAwD,CAAC;AACvE,cAAc,oDAAoD,CAAC;AACnE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,oDAAoD,CAAC;AACnE,cAAc,0DAA0D,CAAC;AACzE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kDAAkD,CAAC;AACjE,cAAc,0DAA0D,CAAC;AACzE,cAAc,sCAAsC,CAAC;AACrD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sDAAsD,CAAC;AACrE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,gEAAgE,CAAC;AAC/E,cAAc,8CAA8C,CAAC;AAC7D,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,gEAAgE,CAAC;AAC/E,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oDAAoD,CAAC;AACnE,cAAc,kDAAkD,CAAC;AACjE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,0CAA0C,CAAC;AACzD,cAAc,4DAA4D,CAAC;AAC3E,cAAc,sEAAsE,CAAC;AACrF,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sDAAsD,CAAC;AACrE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sDAAsD,CAAC;AACrE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,0DAA0D,CAAC;AACzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,kDAAkD,CAAC;AACjE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oCAAoC,CAAC;AACnD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sDAAsD,CAAC;AACrE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oDAAoD,CAAC;AACnE,cAAc,gDAAgD,CAAC;AAC/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,cAAc,0CAA0C,CAAC;AAMzD,cAAc,WAAW,CAAC;AAC1B,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,cAAc,SAAS,CAAC"}
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export type RlsTheme = 'standard' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'warning' | 'danger' | 'berry' | 'hope' | 'mountains' | 'ross' | 'amaizing' | 'purple' | 'amber' | 'smartness' | 'obsidian';
|
|
3
|
-
export type RlsAppTheme = 'light' | 'dark';
|
|
2
|
+
export type RlsTheme = 'standard' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'warning' | 'danger' | 'berry' | 'hope' | 'mountains' | 'ross' | 'amaizing' | 'purple' | 'amber' | 'smartness' | 'obsidian' | 'neutral';
|
|
3
|
+
export type RlsAppTheme = 'light' | 'dim' | 'dark';
|
|
4
4
|
export type RlsDesignSystem = 'bordered' | 'filled' | 'gradient';
|
|
5
5
|
export type RlsButtonType = 'ghost' | 'flat' | 'raised';
|
|
6
6
|
declare module 'react' {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolster/react-components",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.10.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Package containing UI components for React Project.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,14 +43,14 @@
|
|
|
43
43
|
"@rolster/dates": "^4.1.7",
|
|
44
44
|
"@rolster/i18n": "^3.1.4",
|
|
45
45
|
"@rolster/react": "^19.0.1",
|
|
46
|
-
"@rolster/react-forms": "^19.
|
|
46
|
+
"@rolster/react-forms": "^19.6.0",
|
|
47
47
|
"@rolster/strings": "^3.1.2",
|
|
48
48
|
"react-dom": "^19.2.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@eslint/js": "^10.0.1",
|
|
52
52
|
"@rolster/rollup": "^2.2.0",
|
|
53
|
-
"@rolster/styles-foundations": "^3.
|
|
53
|
+
"@rolster/styles-foundations": "^3.7.0",
|
|
54
54
|
"@rolster/types": "^1.1.1",
|
|
55
55
|
"@types/react": "^19.0.0",
|
|
56
56
|
"@types/react-dom": "^19.0.0",
|
package/readme.md
CHANGED
|
@@ -82,6 +82,17 @@ createRoot(document.getElementById('root')!).render(
|
|
|
82
82
|
|
|
83
83
|
Field components are driven by `@rolster/react-forms`: the `formControl` prop takes a `ReactControl` created with `useInputControl` or `useFormControl`, and the field renders the error of the control through `RlsMessageFormError`. Those messages are translated with `@rolster/i18n` and can be extended with `setErrorsI18n`.
|
|
84
84
|
|
|
85
|
+
`RlsInput`, `RlsAreaText` and the fields built over them honour the `formatter` and `formatOn` options of the control. While the user types (or pastes) they apply the formatter before writing the value, keep the caret in place when the text length changes, revert characters the formatter rejects even when the control value does not change, and wait for the end of an IME composition before formatting. With `formatOn: 'blur'` the raw text is kept until the field loses focus and the control formats it.
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
const name = useInputControl({
|
|
89
|
+
value: '',
|
|
90
|
+
formatter: (value: string) => value.toUpperCase()
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
<RlsFieldText formControl={name}>Nombre completo</RlsFieldText>;
|
|
94
|
+
```
|
|
95
|
+
|
|
85
96
|
Components that display a list of options (`RlsFieldSelect`, `RlsFieldList`, `RlsFieldAutocomplete` and the `RlsChooser*` family) receive their `suggestions` as elements of `@rolster/components`, usually instances of `RolsterListElement` or `RolsterAutocompleteElement`, or of a subclass that overrides `title`, `description` and `compareTo`.
|
|
86
97
|
|
|
87
98
|
## Features
|
|
@@ -157,6 +168,7 @@ function Header({ requesting, onSave }: HeaderProps) {
|
|
|
157
168
|
| ------------------------- | ---------------------------------------------------------------------------------------- |
|
|
158
169
|
| `RlsAccordion` | Collapsible section with title and indicator, animated on the height of its content |
|
|
159
170
|
| `RlsAlert` | Message block with optional icon and bordered variant |
|
|
171
|
+
| `RlsAppThemeTabs` | Tab bar with the application themes that writes the selected one on the body |
|
|
160
172
|
| `RlsBallot` | Avatar, title and subtitle row, with skeleton state |
|
|
161
173
|
| `RlsBody` | Body container of an application page |
|
|
162
174
|
| `RlsButtonProgress` | Action button surrounded by a circular progress while `progressing` |
|
|
@@ -290,27 +302,28 @@ function Assignment({ persons }: { persons: Person[] }) {
|
|
|
290
302
|
|
|
291
303
|
### Hooks
|
|
292
304
|
|
|
293
|
-
| Hook
|
|
294
|
-
|
|
|
295
|
-
| `useRlsContext(): RlsState`
|
|
296
|
-
| `useConfirmation(): ConfirmationService`
|
|
297
|
-
| `useNotifications(): NotificationsService`
|
|
298
|
-
| `useSnackbar(): SnackbarService`
|
|
299
|
-
| `useFieldAutocomplete(props)`
|
|
300
|
-
| `useFieldList(props)`
|
|
301
|
-
| `useFieldSelect(props)`
|
|
302
|
-
| `useListController(props)`
|
|
303
|
-
| `useDatatable(table?): DatatableController`
|
|
304
|
-
| `useDesingSystemController(primary?, secondary?)`
|
|
305
|
-
| `
|
|
306
|
-
| `
|
|
307
|
-
| `
|
|
308
|
-
| `
|
|
309
|
-
| `
|
|
310
|
-
| `
|
|
311
|
-
| `
|
|
312
|
-
| `
|
|
313
|
-
| `
|
|
305
|
+
| Hook | Description |
|
|
306
|
+
| ------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
|
307
|
+
| `useRlsContext(): RlsState` | Reads the context of `RlsApplication`; throws when the wrapper is missing |
|
|
308
|
+
| `useConfirmation(): ConfirmationService` | Creates the `confirmation` function and the `RlsConfirmation` node that renders it |
|
|
309
|
+
| `useNotifications(): NotificationsService` | Creates the `notify` function and the `RlsNotifications` node with the stack |
|
|
310
|
+
| `useSnackbar(): SnackbarService` | Creates the `snackbar` function and the `RlsSnackbar` node that renders it |
|
|
311
|
+
| `useFieldAutocomplete(props)` | State of an autocomplete field: coincidences, pattern, references and event handlers |
|
|
312
|
+
| `useFieldList(props)` | State of a multiple selection field: selected elements, references and event handlers |
|
|
313
|
+
| `useFieldSelect(props)` | State of a single selection field: value, references and event handlers |
|
|
314
|
+
| `useListController(props)` | Base of the previous ones: visibility, keyboard navigation and writing to the control |
|
|
315
|
+
| `useDatatable(table?): DatatableController` | Observes the body of a table and reports whether it is scrollable |
|
|
316
|
+
| `useDesingSystemController(primary?, secondary?)` | Applies a design system and toggles between two of them |
|
|
317
|
+
| `useAppThemeController(initial?, primary?, secondary?)` | Applies an application theme and toggles between two of them |
|
|
318
|
+
| `useDropdownController(effect?): DropdownController` | Opens a `RlsDropdown` at a position or from a mouse event |
|
|
319
|
+
| `usePortalController(): PortalController` | Visibility of modals, sheets and navigation panels |
|
|
320
|
+
| `useTabsController(options): TabsController` | Creates the control of a tab bar and the `Tabs` node bound to it |
|
|
321
|
+
| `useImageEditorController(options)` | Opens the file selector and the image editor, and returns the node that renders them |
|
|
322
|
+
| `useFormSingleSelectionController(props)` | `checked` state and selection of a value over a control |
|
|
323
|
+
| `useFormToggleController(props)` | `checked` state and toggle of a `boolean` control |
|
|
324
|
+
| `useResize({ refElement, onResize })` | Reports the dimensions of an element when it changes size |
|
|
325
|
+
| `useRelocationOnComponent({ container, element })` | Allows dragging an element inside its container |
|
|
326
|
+
| `useEventCallback(callback)` | Returns a stable function that always calls the last received callback |
|
|
314
327
|
|
|
315
328
|
```tsx
|
|
316
329
|
import { RlsButton, useRlsContext } from '@rolster/react-components';
|
|
@@ -343,12 +356,12 @@ function DeleteAction({ person }: { person: Person }) {
|
|
|
343
356
|
|
|
344
357
|
### Theme and design system
|
|
345
358
|
|
|
346
|
-
The application theme is written on the `app-theme` attribute of `document.body`, and the colors of a theme are written as custom properties on that same element.
|
|
359
|
+
The application theme is written on the `app-theme` attribute of `document.body`, and the colors of a theme are written as custom properties on that same element. The themes are `light`, `dim` and `dark`, as declared by `@rolster/styles-foundations`; `RlsAppThemeTabs` renders them as a tab bar and applies the selected one, with translated labels that the `labels` prop can override.
|
|
347
360
|
|
|
348
361
|
| Function | Description |
|
|
349
362
|
| ---------------------------------------- | ---------------------------------------------------------------------------- |
|
|
350
363
|
| `getAppTheme(): RlsAppTheme` | Current theme, `light` when nothing has been set |
|
|
351
|
-
| `setAppTheme(theme)` | Writes `light` or `dark` on the application body
|
|
364
|
+
| `setAppTheme(theme)` | Writes `light`, `dim` or `dark` on the application body |
|
|
352
365
|
| `toggleAppTheme(): RlsAppTheme` | Switches between `light` and `dark`, and returns the applied theme |
|
|
353
366
|
| `setDesignSystem(designSystem?)` | Writes the class of the design system on the body and removes the other ones |
|
|
354
367
|
| `generateThemePalette(color, theme?)` | Builds a `ThemePalette` of eleven shades from a hexadecimal color |
|
|
@@ -387,7 +400,7 @@ toggleAppTheme(); // 'dark'
|
|
|
387
400
|
| Type | Description |
|
|
388
401
|
| -------------------------------- | ------------------------------------------------------------------------------- |
|
|
389
402
|
| `RlsTheme` | Color theme of a component, applied with the `rlsTheme` prop |
|
|
390
|
-
| `RlsAppTheme` | Application theme, `light` or `dark`
|
|
403
|
+
| `RlsAppTheme` | Application theme, `light`, `dim` or `dark` |
|
|
391
404
|
| `RlsDesignSystem` | Design system, `bordered`, `filled` or `gradient` |
|
|
392
405
|
| `RlsButtonType` | Button style, `ghost`, `flat` or `raised` |
|
|
393
406
|
| `PropsWithClassName` | Props with an optional `className` |
|
|
@@ -403,6 +416,7 @@ toggleAppTheme(); // 'dark'
|
|
|
403
416
|
| `NotificationsConfig` | Configuration of a notification, a `SnackbarConfig` plus `duration` |
|
|
404
417
|
| `PaginationEvent<T>` | Event of `RlsPagination`: page, limits and suggestions of the page |
|
|
405
418
|
| `Tab<T>` | Tab of `RlsTabs`: label, value and disabled state |
|
|
419
|
+
| `AppThemeLabels` | Labels of `RlsAppThemeTabs`, one optional string per application theme |
|
|
406
420
|
| `NavbarMenuOption` | Option of `RlsNavbarMenu`: identifier, icon and label |
|
|
407
421
|
| `ImageEditorValue` | Result of the image editor: `base64` and `blob` |
|
|
408
422
|
| `ThemePalette` | Palette generated for a theme: shades, custom properties and CSS |
|