@stack-spot/citric-react 0.14.1 → 0.15.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/citric.css +6 -0
- package/dist/components/CheckboxGroup.d.ts +15 -1
- package/dist/components/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup.js +3 -2
- package/dist/components/CheckboxGroup.js.map +1 -1
- package/dist/components/RadioGroup.d.ts +15 -1
- package/dist/components/RadioGroup.d.ts.map +1 -1
- package/dist/components/RadioGroup.js +3 -2
- package/dist/components/RadioGroup.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CheckboxGroup.tsx +25 -9
- package/src/components/RadioGroup.tsx +25 -9
package/dist/citric.css
CHANGED
|
@@ -1796,6 +1796,11 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
|
|
|
1796
1796
|
--bg-hover: var(--palette-500);
|
|
1797
1797
|
--fg: var(--palette-50);
|
|
1798
1798
|
}
|
|
1799
|
+
|
|
1800
|
+
/* Images */
|
|
1801
|
+
img {
|
|
1802
|
+
width: 100%;
|
|
1803
|
+
}
|
|
1799
1804
|
}
|
|
1800
1805
|
|
|
1801
1806
|
/* Buttons and anchors (icon buttons) */
|
|
@@ -1935,6 +1940,7 @@ input[type="reset"][data-citric="icon-box"], .apply-citric input[type="reset"].c
|
|
|
1935
1940
|
|
|
1936
1941
|
&.full-width {
|
|
1937
1942
|
width: auto;
|
|
1943
|
+
flex: 1;
|
|
1938
1944
|
input {
|
|
1939
1945
|
flex: 1;
|
|
1940
1946
|
}
|
|
@@ -24,6 +24,9 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
|
|
|
24
24
|
onChange: (value: T[]) => void;
|
|
25
25
|
/**
|
|
26
26
|
* A function to render the item label.
|
|
27
|
+
*
|
|
28
|
+
* Attention: ignored if `renderItem` is set.
|
|
29
|
+
*
|
|
27
30
|
* @example
|
|
28
31
|
* `(option) => option.name`
|
|
29
32
|
* @default "the item's toString() result."
|
|
@@ -31,6 +34,17 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
|
|
|
31
34
|
* @returns a React Node to render.
|
|
32
35
|
*/
|
|
33
36
|
renderLabel?: (option: T) => React.ReactNode;
|
|
37
|
+
/**
|
|
38
|
+
* A function to render the item with the checkbox. When set, `renderLabel` is ignored.
|
|
39
|
+
* @example
|
|
40
|
+
* ```
|
|
41
|
+
* (checkbox, option) => <label>{checkbox} {option.name}</label>
|
|
42
|
+
* ```
|
|
43
|
+
* @param checkbox the checkbox.
|
|
44
|
+
* @param option the current item.
|
|
45
|
+
* @returns a React Node to render.
|
|
46
|
+
*/
|
|
47
|
+
renderItem?: (checkbox: React.ReactElement, option: T) => React.ReactNode;
|
|
34
48
|
/**
|
|
35
49
|
* A function to render the item value, a unique identifier for the option.
|
|
36
50
|
* @example
|
|
@@ -49,7 +63,7 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
|
|
|
49
63
|
isDisabled?: (option: T) => boolean;
|
|
50
64
|
}
|
|
51
65
|
export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseCheckboxGroupProps<T>;
|
|
52
|
-
declare function _CheckboxGroup<T>({ appearance, name, value, options, onChange, renderLabel, renderKey, isDisabled, colorScheme, style, ...props }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
declare function _CheckboxGroup<T>({ appearance, name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, ...props }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
53
67
|
export declare const CheckboxGroup: typeof _CheckboxGroup;
|
|
54
68
|
export {};
|
|
55
69
|
//# sourceMappingURL=CheckboxGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAA;AAEjI,iBAAS,cAAc,CAAC,CAAC,EAAE,EACzB,UAAuB,EACvB,IAAI,EACJ,KAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAA4B,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAsBvB;AAED,eAAO,MAAM,aAAa,uBAA0B,CAAA"}
|
|
@@ -5,12 +5,13 @@ import { defaultRenderKey, defaultRenderLabel } from '../utils/options.js';
|
|
|
5
5
|
import { withRef } from '../utils/react.js';
|
|
6
6
|
import { CitricComponent } from './CitricComponent.js';
|
|
7
7
|
import { Column } from './layout.js';
|
|
8
|
-
function _CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, isDisabled, colorScheme, style, ...props }) {
|
|
8
|
+
function _CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, ...props }) {
|
|
9
9
|
const items = useMemo(() => {
|
|
10
10
|
const valueKeys = value.map(renderKey);
|
|
11
11
|
return options.map((o) => {
|
|
12
12
|
const key = renderKey(o);
|
|
13
|
-
|
|
13
|
+
const checkbox = _jsx("input", { type: "checkbox", name: name, value: key, checked: value.includes(o) || (!isNil(key) && valueKeys.includes(key)), onChange: (e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? [])), disabled: isDisabled?.(o) });
|
|
14
|
+
return renderItem ? renderItem(checkbox, o) : (_jsxs(CitricComponent, { tag: "label", component: `${appearance}-row`, colorScheme: colorScheme, children: [checkbox, renderLabel(o)] }, key));
|
|
14
15
|
});
|
|
15
16
|
}, [options, value, name, colorScheme, appearance]);
|
|
16
17
|
return _jsx(Column, { ...props, style: { gap: '8px', ...style }, children: items });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAoEjC,SAAS,cAAc,CAAI,EACzB,UAAU,GAAG,UAAU,EACvB,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACc;IACtB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QACtC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,QAAQ,GAAG,gBACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EACtE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAChH,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5C,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAY,WAAW,EAAE,WAAW,aAC5F,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,KAFiD,GAAG,CAGnD,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAA;IACnD,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA"}
|
|
@@ -19,6 +19,9 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
|
|
|
19
19
|
onChange?: (value: T) => void;
|
|
20
20
|
/**
|
|
21
21
|
* A function to render the item label.
|
|
22
|
+
*
|
|
23
|
+
* Attention: ignored if `renderItem` is set.
|
|
24
|
+
*
|
|
22
25
|
* @example
|
|
23
26
|
* `(option) => option.name`
|
|
24
27
|
* @default "the item's toString() result."
|
|
@@ -26,6 +29,17 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
|
|
|
26
29
|
* @returns a React Node to render.
|
|
27
30
|
*/
|
|
28
31
|
renderLabel?: (option: T) => React.ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* A function to render the item with the radio button. When set, `renderLabel` is ignored.
|
|
34
|
+
* @example
|
|
35
|
+
* ```
|
|
36
|
+
* (radio, option) => <label>{radio} {option.name}</label>
|
|
37
|
+
* ```
|
|
38
|
+
* @param radio the radio button.
|
|
39
|
+
* @param option the current item.
|
|
40
|
+
* @returns a React Node to render.
|
|
41
|
+
*/
|
|
42
|
+
renderItem?: (radio: React.ReactElement, option: T) => React.ReactNode;
|
|
29
43
|
/**
|
|
30
44
|
* A function to render the item value, a unique identifier for the option.
|
|
31
45
|
* @example
|
|
@@ -44,7 +58,7 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
|
|
|
44
58
|
isDisabled?: (option: T) => boolean;
|
|
45
59
|
}
|
|
46
60
|
export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>;
|
|
47
|
-
declare function _RadioGroup<T>({ name, value, options, onChange, renderLabel, renderKey, isDisabled, colorScheme, style, ...props }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
61
|
+
declare function _RadioGroup<T>({ name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, ...props }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
48
62
|
export declare const RadioGroup: typeof _RadioGroup;
|
|
49
63
|
export {};
|
|
50
64
|
//# sourceMappingURL=RadioGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B
|
|
1
|
+
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAE3H,iBAAS,WAAW,CAAC,CAAC,EAAE,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAA4B,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAsBpB;AAED,eAAO,MAAM,UAAU,oBAAuB,CAAA"}
|
|
@@ -5,12 +5,13 @@ import { defaultRenderKey, defaultRenderLabel } from '../utils/options.js';
|
|
|
5
5
|
import { withRef } from '../utils/react.js';
|
|
6
6
|
import { CitricComponent } from './CitricComponent.js';
|
|
7
7
|
import { Column } from './layout.js';
|
|
8
|
-
function _RadioGroup({ name, value, options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, isDisabled, colorScheme, style, ...props }) {
|
|
8
|
+
function _RadioGroup({ name, value, options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, ...props }) {
|
|
9
9
|
const items = useMemo(() => {
|
|
10
10
|
const valueKey = value ? renderKey(value) : undefined;
|
|
11
11
|
return options.map((o) => {
|
|
12
12
|
const key = renderKey(o);
|
|
13
|
-
|
|
13
|
+
const radio = _jsx("input", { type: "radio", name: name, value: key, checked: value === o || (!isNil(key) && valueKey === key), onChange: () => onChange?.(o), disabled: isDisabled?.(o) });
|
|
14
|
+
return renderItem ? renderItem(radio, o) : (_jsxs(CitricComponent, { tag: "label", component: "radio-row", colorScheme: colorScheme, children: [radio, renderLabel(o)] }, key));
|
|
14
15
|
});
|
|
15
16
|
}, [options, value, name, colorScheme]);
|
|
16
17
|
return _jsx(Column, { ...props, style: { gap: '8px', ...style }, children: items });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AA+DjC,SAAS,WAAW,CAAI,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACW;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,KAAK,GAAG,gBACZ,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,KAAK,GAAG,CAAC,EACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACzC,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAW,WAAW,EAAE,WAAW,aAClF,KAAK,EACL,WAAW,CAAC,CAAC,CAAC,KAFuC,GAAG,CAGzC,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvC,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -31,6 +31,9 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
|
|
|
31
31
|
onChange: (value: T[]) => void,
|
|
32
32
|
/**
|
|
33
33
|
* A function to render the item label.
|
|
34
|
+
*
|
|
35
|
+
* Attention: ignored if `renderItem` is set.
|
|
36
|
+
*
|
|
34
37
|
* @example
|
|
35
38
|
* `(option) => option.name`
|
|
36
39
|
* @default "the item's toString() result."
|
|
@@ -38,6 +41,17 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
|
|
|
38
41
|
* @returns a React Node to render.
|
|
39
42
|
*/
|
|
40
43
|
renderLabel?: (option: T) => React.ReactNode,
|
|
44
|
+
/**
|
|
45
|
+
* A function to render the item with the checkbox. When set, `renderLabel` is ignored.
|
|
46
|
+
* @example
|
|
47
|
+
* ```
|
|
48
|
+
* (checkbox, option) => <label>{checkbox} {option.name}</label>
|
|
49
|
+
* ```
|
|
50
|
+
* @param checkbox the checkbox.
|
|
51
|
+
* @param option the current item.
|
|
52
|
+
* @returns a React Node to render.
|
|
53
|
+
*/
|
|
54
|
+
renderItem?: (checkbox: React.ReactElement, option: T) => React.ReactNode,
|
|
41
55
|
/**
|
|
42
56
|
* A function to render the item value, a unique identifier for the option.
|
|
43
57
|
* @example
|
|
@@ -66,6 +80,7 @@ function _CheckboxGroup<T>({
|
|
|
66
80
|
onChange,
|
|
67
81
|
renderLabel = defaultRenderLabel,
|
|
68
82
|
renderKey = defaultRenderKey,
|
|
83
|
+
renderItem,
|
|
69
84
|
isDisabled,
|
|
70
85
|
colorScheme,
|
|
71
86
|
style,
|
|
@@ -75,16 +90,17 @@ function _CheckboxGroup<T>({
|
|
|
75
90
|
const valueKeys = value.map(renderKey)
|
|
76
91
|
return options.map((o) => {
|
|
77
92
|
const key = renderKey(o)
|
|
78
|
-
|
|
93
|
+
const checkbox = <input
|
|
94
|
+
type="checkbox"
|
|
95
|
+
name={name}
|
|
96
|
+
value={key}
|
|
97
|
+
checked={value.includes(o) || (!isNil(key) && valueKeys.includes(key))}
|
|
98
|
+
onChange={(e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? []))}
|
|
99
|
+
disabled={isDisabled?.(o)}
|
|
100
|
+
/>
|
|
101
|
+
return renderItem ? renderItem(checkbox, o) : (
|
|
79
102
|
<CitricComponent tag="label" component={`${appearance}-row`} key={key} colorScheme={colorScheme}>
|
|
80
|
-
|
|
81
|
-
type="checkbox"
|
|
82
|
-
name={name}
|
|
83
|
-
value={key}
|
|
84
|
-
checked={value.includes(o) || (!isNil(key) && valueKeys.includes(key))}
|
|
85
|
-
onChange={(e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? []))}
|
|
86
|
-
disabled={isDisabled?.(o)}
|
|
87
|
-
/>
|
|
103
|
+
{checkbox}
|
|
88
104
|
{renderLabel(o)}
|
|
89
105
|
</CitricComponent>
|
|
90
106
|
)
|
|
@@ -26,6 +26,9 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
|
|
|
26
26
|
onChange?: (value: T) => void,
|
|
27
27
|
/**
|
|
28
28
|
* A function to render the item label.
|
|
29
|
+
*
|
|
30
|
+
* Attention: ignored if `renderItem` is set.
|
|
31
|
+
*
|
|
29
32
|
* @example
|
|
30
33
|
* `(option) => option.name`
|
|
31
34
|
* @default "the item's toString() result."
|
|
@@ -33,6 +36,17 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
|
|
|
33
36
|
* @returns a React Node to render.
|
|
34
37
|
*/
|
|
35
38
|
renderLabel?: (option: T) => React.ReactNode,
|
|
39
|
+
/**
|
|
40
|
+
* A function to render the item with the radio button. When set, `renderLabel` is ignored.
|
|
41
|
+
* @example
|
|
42
|
+
* ```
|
|
43
|
+
* (radio, option) => <label>{radio} {option.name}</label>
|
|
44
|
+
* ```
|
|
45
|
+
* @param radio the radio button.
|
|
46
|
+
* @param option the current item.
|
|
47
|
+
* @returns a React Node to render.
|
|
48
|
+
*/
|
|
49
|
+
renderItem?: (radio: React.ReactElement, option: T) => React.ReactNode,
|
|
36
50
|
/**
|
|
37
51
|
* A function to render the item value, a unique identifier for the option.
|
|
38
52
|
* @example
|
|
@@ -60,6 +74,7 @@ function _RadioGroup<T>({
|
|
|
60
74
|
onChange,
|
|
61
75
|
renderLabel = defaultRenderLabel,
|
|
62
76
|
renderKey = defaultRenderKey,
|
|
77
|
+
renderItem,
|
|
63
78
|
isDisabled,
|
|
64
79
|
colorScheme,
|
|
65
80
|
style,
|
|
@@ -69,16 +84,17 @@ function _RadioGroup<T>({
|
|
|
69
84
|
const valueKey = value ? renderKey(value) : undefined
|
|
70
85
|
return options.map((o) => {
|
|
71
86
|
const key = renderKey(o)
|
|
72
|
-
|
|
87
|
+
const radio = <input
|
|
88
|
+
type="radio"
|
|
89
|
+
name={name}
|
|
90
|
+
value={key}
|
|
91
|
+
checked={value === o || (!isNil(key) && valueKey === key)}
|
|
92
|
+
onChange={() => onChange?.(o)}
|
|
93
|
+
disabled={isDisabled?.(o)}
|
|
94
|
+
/>
|
|
95
|
+
return renderItem ? renderItem(radio, o) : (
|
|
73
96
|
<CitricComponent tag="label" component="radio-row" key={key} colorScheme={colorScheme}>
|
|
74
|
-
|
|
75
|
-
type="radio"
|
|
76
|
-
name={name}
|
|
77
|
-
value={key}
|
|
78
|
-
checked={value === o || (!isNil(key) && valueKey === key)}
|
|
79
|
-
onChange={() => onChange?.(o)}
|
|
80
|
-
disabled={isDisabled?.(o)}
|
|
81
|
-
/>
|
|
97
|
+
{radio}
|
|
82
98
|
{renderLabel(o)}
|
|
83
99
|
</CitricComponent>
|
|
84
100
|
)
|