@korsolutions/ui 0.0.36 → 0.0.37
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/module/components/checkbox/checkbox.js +4 -4
- package/dist/module/components/checkbox/checkbox.js.map +1 -1
- package/dist/module/primitives/checkbox/checkbox-indicator.js +3 -3
- package/dist/module/primitives/checkbox/checkbox-indicator.js.map +1 -1
- package/dist/module/primitives/checkbox/checkbox-root.js +12 -12
- package/dist/module/primitives/checkbox/checkbox-root.js.map +1 -1
- package/dist/typescript/src/components/checkbox/checkbox.d.ts +3 -3
- package/dist/typescript/src/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/typescript/src/primitives/checkbox/checkbox-context.d.ts +3 -3
- package/dist/typescript/src/primitives/checkbox/checkbox-context.d.ts.map +1 -1
- package/dist/typescript/src/primitives/checkbox/checkbox-root.d.ts +3 -3
- package/dist/typescript/src/primitives/checkbox/checkbox-root.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/checkbox/checkbox.tsx +5 -5
- package/src/primitives/checkbox/checkbox-context.tsx +3 -3
- package/src/primitives/checkbox/checkbox-indicator.tsx +3 -3
- package/src/primitives/checkbox/checkbox-root.tsx +14 -15
|
@@ -7,19 +7,19 @@ import { CheckboxVariants } from "./variants/index.js";
|
|
|
7
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
8
|
export function Checkbox(props) {
|
|
9
9
|
const {
|
|
10
|
-
|
|
10
|
+
value,
|
|
11
11
|
onChange,
|
|
12
12
|
title,
|
|
13
13
|
description,
|
|
14
|
-
|
|
14
|
+
isDisabled,
|
|
15
15
|
variant = "default"
|
|
16
16
|
} = props;
|
|
17
17
|
const useVariantStyles = CheckboxVariants[variant];
|
|
18
18
|
const variantStyles = useVariantStyles();
|
|
19
19
|
return /*#__PURE__*/_jsxs(CheckboxPrimitive.Root, {
|
|
20
|
-
|
|
20
|
+
value: value,
|
|
21
21
|
onChange: onChange,
|
|
22
|
-
|
|
22
|
+
isDisabled: isDisabled,
|
|
23
23
|
styles: variantStyles,
|
|
24
24
|
children: [/*#__PURE__*/_jsx(CheckboxPrimitive.Indicator, {}), (title || description) && /*#__PURE__*/_jsxs(View, {
|
|
25
25
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["CheckboxPrimitive","React","View","CheckboxVariants","jsx","_jsx","jsxs","_jsxs","Checkbox","props","
|
|
1
|
+
{"version":3,"names":["CheckboxPrimitive","React","View","CheckboxVariants","jsx","_jsx","jsxs","_jsxs","Checkbox","props","value","onChange","title","description","isDisabled","variant","useVariantStyles","variantStyles","Root","styles","children","Indicator","style","flex","Title","Description"],"sourceRoot":"../../../../src","sources":["components/checkbox/checkbox.tsx"],"mappings":";;AAAA,SAASA,iBAAiB;AAC1B,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,gBAAgB;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW9C,OAAO,SAASC,QAAQA,CAACC,KAAoB,EAAE;EAC7C,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,WAAW;IAAEC,UAAU;IAAEC,OAAO,GAAG;EAAU,CAAC,GAAGN,KAAK;EAEtF,MAAMO,gBAAgB,GAAGb,gBAAgB,CAACY,OAAO,CAAC;EAClD,MAAME,aAAa,GAAGD,gBAAgB,CAAC,CAAC;EAExC,oBACET,KAAA,CAACP,iBAAiB,CAACkB,IAAI;IAACR,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEA,QAAS;IAACG,UAAU,EAAEA,UAAW;IAACK,MAAM,EAAEF,aAAc;IAAAG,QAAA,gBACtGf,IAAA,CAACL,iBAAiB,CAACqB,SAAS,IAAE,CAAC,EAC9B,CAACT,KAAK,IAAIC,WAAW,kBACpBN,KAAA,CAACL,IAAI;MAACoB,KAAK,EAAE;QAAEC,IAAI,EAAE;MAAE,CAAE;MAAAH,QAAA,GACtBR,KAAK,iBAAIP,IAAA,CAACL,iBAAiB,CAACwB,KAAK;QAAAJ,QAAA,EAAER;MAAK,CAA0B,CAAC,EACnEC,WAAW,iBAAIR,IAAA,CAACL,iBAAiB,CAACyB,WAAW;QAAAL,QAAA,EAAEP;MAAW,CAAgC,CAAC;IAAA,CACxF,CACP;EAAA,CACqB,CAAC;AAE7B","ignoreList":[]}
|
|
@@ -19,17 +19,17 @@ export function CheckboxIndicator(props) {
|
|
|
19
19
|
...viewProps
|
|
20
20
|
} = props;
|
|
21
21
|
const {
|
|
22
|
-
|
|
22
|
+
value,
|
|
23
23
|
state,
|
|
24
24
|
styles
|
|
25
25
|
} = useCheckboxContext();
|
|
26
|
-
const indicatorState = calculateState(state,
|
|
26
|
+
const indicatorState = calculateState(state, value);
|
|
27
27
|
const calculatedStyle = [styles?.indicator?.default, styles?.indicator?.[indicatorState], style];
|
|
28
28
|
const checkmarkStyle = [styles?.checkmark?.default, styles?.checkmark?.[indicatorState]];
|
|
29
29
|
return /*#__PURE__*/_jsx(View, {
|
|
30
30
|
...viewProps,
|
|
31
31
|
style: calculatedStyle,
|
|
32
|
-
children:
|
|
32
|
+
children: value && /*#__PURE__*/_jsx(Text, {
|
|
33
33
|
style: checkmarkStyle,
|
|
34
34
|
children: "\u2713"
|
|
35
35
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","View","useCheckboxContext","jsx","_jsx","calculateState","rootState","checked","CheckboxIndicator","props","style","viewProps","state","styles","indicatorState","calculatedStyle","indicator","default","checkmarkStyle","checkmark","children"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/checkbox-indicator.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACzF,SAASC,kBAAkB;AAA6B,SAAAC,GAAA,IAAAC,IAAA;AAOxD,MAAMC,cAAc,GAAGA,CAACC,SAAwB,EAAEC,OAAgB,KAAoB;EACpF,IAAID,SAAS,KAAK,UAAU,EAAE;IAC5B,OAAO,UAAU;EACnB;EACA,IAAIC,OAAO,EAAE;IACX,OAAO,SAAS;EAClB;EACA,OAAOD,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,iBAAiBA,CAACC,KAAsC,EAAE;EACxE,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EACrC,MAAM;
|
|
1
|
+
{"version":3,"names":["React","Text","View","useCheckboxContext","jsx","_jsx","calculateState","rootState","checked","CheckboxIndicator","props","style","viewProps","value","state","styles","indicatorState","calculatedStyle","indicator","default","checkmarkStyle","checkmark","children"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/checkbox-indicator.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACzF,SAASC,kBAAkB;AAA6B,SAAAC,GAAA,IAAAC,IAAA;AAOxD,MAAMC,cAAc,GAAGA,CAACC,SAAwB,EAAEC,OAAgB,KAAoB;EACpF,IAAID,SAAS,KAAK,UAAU,EAAE;IAC5B,OAAO,UAAU;EACnB;EACA,IAAIC,OAAO,EAAE;IACX,OAAO,SAAS;EAClB;EACA,OAAOD,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,iBAAiBA,CAACC,KAAsC,EAAE;EACxE,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EACrC,MAAM;IAAEG,KAAK;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGZ,kBAAkB,CAAC,CAAC;EAErD,MAAMa,cAAc,GAAGV,cAAc,CAACQ,KAAK,EAAED,KAAK,CAAC;EAEnD,MAAMI,eAAe,GAAG,CAACF,MAAM,EAAEG,SAAS,EAAEC,OAAO,EAAEJ,MAAM,EAAEG,SAAS,GAAGF,cAAc,CAAC,EAAEL,KAAK,CAAC;EAChG,MAAMS,cAAc,GAAG,CAACL,MAAM,EAAEM,SAAS,EAAEF,OAAO,EAAEJ,MAAM,EAAEM,SAAS,GAAGL,cAAc,CAAC,CAAC;EAExF,oBACEX,IAAA,CAACH,IAAI;IAAA,GAAKU,SAAS;IAAED,KAAK,EAAEM,eAAgB;IAAAK,QAAA,EACzCT,KAAK,iBAAIR,IAAA,CAACJ,IAAI;MAACU,KAAK,EAAES,cAAe;MAAAE,QAAA,EAAC;IAAC,CAAM;EAAC,CAC3C,CAAC;AAEX","ignoreList":[]}
|
|
@@ -4,14 +4,14 @@ import React, { useState } from "react";
|
|
|
4
4
|
import { Pressable } from "react-native";
|
|
5
5
|
import { CheckboxPrimitiveContext } from "./checkbox-context.js";
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
const calculateState = (
|
|
8
|
-
if (
|
|
7
|
+
const calculateState = (value, isDisabled, isHovered) => {
|
|
8
|
+
if (isDisabled) {
|
|
9
9
|
return "disabled";
|
|
10
10
|
}
|
|
11
11
|
if (isHovered) {
|
|
12
12
|
return "hovered";
|
|
13
13
|
}
|
|
14
|
-
if (
|
|
14
|
+
if (value) {
|
|
15
15
|
return "checked";
|
|
16
16
|
}
|
|
17
17
|
return "default";
|
|
@@ -19,32 +19,32 @@ const calculateState = (checked, disabled, isHovered) => {
|
|
|
19
19
|
export function CheckboxRoot(props) {
|
|
20
20
|
const {
|
|
21
21
|
children,
|
|
22
|
-
|
|
22
|
+
value,
|
|
23
23
|
onChange,
|
|
24
|
-
|
|
24
|
+
isDisabled,
|
|
25
25
|
style,
|
|
26
26
|
styles,
|
|
27
27
|
...pressableProps
|
|
28
28
|
} = props;
|
|
29
29
|
const [isHovered, setIsHovered] = useState(false);
|
|
30
|
-
const state = calculateState(
|
|
30
|
+
const state = calculateState(value, isDisabled, isHovered);
|
|
31
31
|
const handlePress = () => {
|
|
32
|
-
if (!
|
|
33
|
-
onChange(!
|
|
32
|
+
if (!isDisabled) {
|
|
33
|
+
onChange(!value);
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
const calculatedStyle = [styles?.root?.default, styles?.root?.[state], style];
|
|
37
37
|
const contextValue = React.useMemo(() => ({
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
value,
|
|
39
|
+
isDisabled,
|
|
40
40
|
state,
|
|
41
41
|
styles
|
|
42
|
-
}), [
|
|
42
|
+
}), [value, isDisabled, state, styles]);
|
|
43
43
|
return /*#__PURE__*/_jsx(CheckboxPrimitiveContext.Provider, {
|
|
44
44
|
value: contextValue,
|
|
45
45
|
children: /*#__PURE__*/_jsx(Pressable, {
|
|
46
46
|
...pressableProps,
|
|
47
|
-
disabled:
|
|
47
|
+
disabled: isDisabled,
|
|
48
48
|
onPress: handlePress,
|
|
49
49
|
onHoverIn: () => setIsHovered(true),
|
|
50
50
|
onHoverOut: () => setIsHovered(false),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Pressable","CheckboxPrimitiveContext","jsx","_jsx","calculateState","
|
|
1
|
+
{"version":3,"names":["React","useState","Pressable","CheckboxPrimitiveContext","jsx","_jsx","calculateState","value","isDisabled","isHovered","CheckboxRoot","props","children","onChange","style","styles","pressableProps","setIsHovered","state","handlePress","calculatedStyle","root","default","contextValue","useMemo","Provider","disabled","onPress","onHoverIn","onHoverOut"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/checkbox-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA6D,cAAc;AAC7F,SAASC,wBAAwB;AAA6B,SAAAC,GAAA,IAAAC,IAAA;AAY9D,MAAMC,cAAc,GAAGA,CAACC,KAAc,EAAEC,UAA+B,EAAEC,SAAkB,KAAoB;EAC7G,IAAID,UAAU,EAAE;IACd,OAAO,UAAU;EACnB;EACA,IAAIC,SAAS,EAAE;IACb,OAAO,SAAS;EAClB;EACA,IAAIF,KAAK,EAAE;IACT,OAAO,SAAS;EAClB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASG,YAAYA,CAACC,KAAiC,EAAE;EAC9D,MAAM;IAAEC,QAAQ;IAAEL,KAAK;IAAEM,QAAQ;IAAEL,UAAU;IAAEM,KAAK;IAAEC,MAAM;IAAE,GAAGC;EAAe,CAAC,GAAGL,KAAK;EACzF,MAAM,CAACF,SAAS,EAAEQ,YAAY,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMiB,KAAK,GAAGZ,cAAc,CAACC,KAAK,EAAEC,UAAU,EAAEC,SAAS,CAAC;EAC1D,MAAMU,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAI,CAACX,UAAU,EAAE;MACfK,QAAQ,CAAC,CAACN,KAAK,CAAC;IAClB;EACF,CAAC;EAED,MAAMa,eAAe,GAAG,CAACL,MAAM,EAAEM,IAAI,EAAEC,OAAO,EAAEP,MAAM,EAAEM,IAAI,GAAGH,KAAK,CAAC,EAAEJ,KAAK,CAAC;EAE7E,MAAMS,YAAY,GAAGvB,KAAK,CAACwB,OAAO,CAChC,OAAO;IACLjB,KAAK;IACLC,UAAU;IACVU,KAAK;IACLH;EACF,CAAC,CAAC,EACF,CAACR,KAAK,EAAEC,UAAU,EAAEU,KAAK,EAAEH,MAAM,CACnC,CAAC;EAED,oBACEV,IAAA,CAACF,wBAAwB,CAACsB,QAAQ;IAAClB,KAAK,EAAEgB,YAAa;IAAAX,QAAA,eACrDP,IAAA,CAACH,SAAS;MAAA,GACJc,cAAc;MAClBU,QAAQ,EAAElB,UAAW;MACrBmB,OAAO,EAAER,WAAY;MACrBS,SAAS,EAAEA,CAAA,KAAMX,YAAY,CAAC,IAAI,CAAE;MACpCY,UAAU,EAAEA,CAAA,KAAMZ,YAAY,CAAC,KAAK,CAAE;MACtCH,KAAK,EAAEM,eAAgB;MAAAR,QAAA,EAEtBA;IAAQ,CACA;EAAC,CACqB,CAAC;AAExC","ignoreList":[]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { CheckboxVariants } from "./variants";
|
|
3
3
|
interface CheckboxProps {
|
|
4
|
-
|
|
5
|
-
onChange: (
|
|
4
|
+
value: boolean;
|
|
5
|
+
onChange: (value: boolean) => void;
|
|
6
6
|
title?: string;
|
|
7
7
|
description?: string;
|
|
8
|
-
|
|
8
|
+
isDisabled?: boolean;
|
|
9
9
|
variant?: keyof typeof CheckboxVariants;
|
|
10
10
|
}
|
|
11
11
|
export declare function Checkbox(props: CheckboxProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,UAAU,aAAa;IACrB,
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,UAAU,aAAa;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;CACzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAiB5C"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type {
|
|
2
|
+
import type { CheckboxState, CheckboxStyles } from "./types";
|
|
3
3
|
export interface CheckboxPrimitiveContextValue {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
value: boolean;
|
|
5
|
+
isDisabled?: boolean;
|
|
6
6
|
state: CheckboxState;
|
|
7
7
|
styles?: CheckboxStyles;
|
|
8
8
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-context.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"checkbox-context.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,eAAO,MAAM,wBAAwB,qDAAkE,CAAC;AAExG,eAAO,MAAM,kBAAkB,qCAM9B,CAAC"}
|
|
@@ -3,9 +3,9 @@ import { type PressableProps, type StyleProp, type ViewStyle } from "react-nativ
|
|
|
3
3
|
import type { CheckboxStyles } from "./types";
|
|
4
4
|
export interface CheckboxPrimitiveRootProps extends Omit<PressableProps, "children"> {
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
-
|
|
7
|
-
onChange: (
|
|
8
|
-
|
|
6
|
+
value: boolean;
|
|
7
|
+
onChange: (value: boolean) => void;
|
|
8
|
+
isDisabled?: boolean;
|
|
9
9
|
style?: StyleProp<ViewStyle>;
|
|
10
10
|
styles?: CheckboxStyles;
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9F,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,
|
|
1
|
+
{"version":3,"file":"checkbox-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9F,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAeD,wBAAgB,YAAY,CAAC,KAAK,EAAE,0BAA0B,qBAqC7D"}
|
package/package.json
CHANGED
|
@@ -4,22 +4,22 @@ import { View } from "react-native";
|
|
|
4
4
|
import { CheckboxVariants } from "./variants";
|
|
5
5
|
|
|
6
6
|
interface CheckboxProps {
|
|
7
|
-
|
|
8
|
-
onChange: (
|
|
7
|
+
value: boolean;
|
|
8
|
+
onChange: (value: boolean) => void;
|
|
9
9
|
title?: string;
|
|
10
10
|
description?: string;
|
|
11
|
-
|
|
11
|
+
isDisabled?: boolean;
|
|
12
12
|
variant?: keyof typeof CheckboxVariants;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export function Checkbox(props: CheckboxProps) {
|
|
16
|
-
const {
|
|
16
|
+
const { value, onChange, title, description, isDisabled, variant = "default" } = props;
|
|
17
17
|
|
|
18
18
|
const useVariantStyles = CheckboxVariants[variant];
|
|
19
19
|
const variantStyles = useVariantStyles();
|
|
20
20
|
|
|
21
21
|
return (
|
|
22
|
-
<CheckboxPrimitive.Root
|
|
22
|
+
<CheckboxPrimitive.Root value={value} onChange={onChange} isDisabled={isDisabled} styles={variantStyles}>
|
|
23
23
|
<CheckboxPrimitive.Indicator />
|
|
24
24
|
{(title || description) && (
|
|
25
25
|
<View style={{ flex: 1 }}>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type {
|
|
2
|
+
import type { CheckboxState, CheckboxStyles } from "./types";
|
|
3
3
|
|
|
4
4
|
export interface CheckboxPrimitiveContextValue {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
value: boolean;
|
|
6
|
+
isDisabled?: boolean;
|
|
7
7
|
state: CheckboxState;
|
|
8
8
|
styles?: CheckboxStyles;
|
|
9
9
|
}
|
|
@@ -19,16 +19,16 @@ const calculateState = (rootState: CheckboxState, checked: boolean): CheckboxSta
|
|
|
19
19
|
|
|
20
20
|
export function CheckboxIndicator(props: CheckboxPrimitiveIndicatorProps) {
|
|
21
21
|
const { style, ...viewProps } = props;
|
|
22
|
-
const {
|
|
22
|
+
const { value, state, styles } = useCheckboxContext();
|
|
23
23
|
|
|
24
|
-
const indicatorState = calculateState(state,
|
|
24
|
+
const indicatorState = calculateState(state, value);
|
|
25
25
|
|
|
26
26
|
const calculatedStyle = [styles?.indicator?.default, styles?.indicator?.[indicatorState], style];
|
|
27
27
|
const checkmarkStyle = [styles?.checkmark?.default, styles?.checkmark?.[indicatorState]];
|
|
28
28
|
|
|
29
29
|
return (
|
|
30
30
|
<View {...viewProps} style={calculatedStyle}>
|
|
31
|
-
{
|
|
31
|
+
{value && <Text style={checkmarkStyle}>✓</Text>}
|
|
32
32
|
</View>
|
|
33
33
|
);
|
|
34
34
|
}
|
|
@@ -5,35 +5,34 @@ import type { CheckboxState, CheckboxStyles } from "./types";
|
|
|
5
5
|
|
|
6
6
|
export interface CheckboxPrimitiveRootProps extends Omit<PressableProps, "children"> {
|
|
7
7
|
children: React.ReactNode;
|
|
8
|
-
|
|
9
|
-
onChange: (
|
|
10
|
-
|
|
8
|
+
value: boolean;
|
|
9
|
+
onChange: (value: boolean) => void;
|
|
10
|
+
isDisabled?: boolean;
|
|
11
11
|
style?: StyleProp<ViewStyle>;
|
|
12
12
|
styles?: CheckboxStyles;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
const calculateState = (
|
|
16
|
-
if (
|
|
15
|
+
const calculateState = (value: boolean, isDisabled: boolean | undefined, isHovered: boolean): CheckboxState => {
|
|
16
|
+
if (isDisabled) {
|
|
17
17
|
return "disabled";
|
|
18
18
|
}
|
|
19
19
|
if (isHovered) {
|
|
20
20
|
return "hovered";
|
|
21
21
|
}
|
|
22
|
-
if (
|
|
22
|
+
if (value) {
|
|
23
23
|
return "checked";
|
|
24
24
|
}
|
|
25
25
|
return "default";
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
export function CheckboxRoot(props: CheckboxPrimitiveRootProps) {
|
|
29
|
-
const { children,
|
|
29
|
+
const { children, value, onChange, isDisabled, style, styles, ...pressableProps } = props;
|
|
30
30
|
const [isHovered, setIsHovered] = useState(false);
|
|
31
31
|
|
|
32
|
-
const state = calculateState(
|
|
33
|
-
|
|
32
|
+
const state = calculateState(value, isDisabled, isHovered);
|
|
34
33
|
const handlePress = () => {
|
|
35
|
-
if (!
|
|
36
|
-
onChange(!
|
|
34
|
+
if (!isDisabled) {
|
|
35
|
+
onChange(!value);
|
|
37
36
|
}
|
|
38
37
|
};
|
|
39
38
|
|
|
@@ -41,19 +40,19 @@ export function CheckboxRoot(props: CheckboxPrimitiveRootProps) {
|
|
|
41
40
|
|
|
42
41
|
const contextValue = React.useMemo(
|
|
43
42
|
() => ({
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
value,
|
|
44
|
+
isDisabled,
|
|
46
45
|
state,
|
|
47
46
|
styles,
|
|
48
47
|
}),
|
|
49
|
-
[
|
|
48
|
+
[value, isDisabled, state, styles]
|
|
50
49
|
);
|
|
51
50
|
|
|
52
51
|
return (
|
|
53
52
|
<CheckboxPrimitiveContext.Provider value={contextValue}>
|
|
54
53
|
<Pressable
|
|
55
54
|
{...pressableProps}
|
|
56
|
-
disabled={
|
|
55
|
+
disabled={isDisabled}
|
|
57
56
|
onPress={handlePress}
|
|
58
57
|
onHoverIn={() => setIsHovered(true)}
|
|
59
58
|
onHoverOut={() => setIsHovered(false)}
|