@rocapine/react-native-onboarding-ui 1.8.1 → 1.9.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/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.d.ts +86 -0
- package/dist/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.d.ts.map +1 -0
- package/dist/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.js +143 -0
- package/dist/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.js.map +1 -0
- package/dist/UI/Pages/ComposableScreen/elements/renderElement.d.ts.map +1 -1
- package/dist/UI/Pages/ComposableScreen/elements/renderElement.js +4 -0
- package/dist/UI/Pages/ComposableScreen/elements/renderElement.js.map +1 -1
- package/dist/UI/Pages/ComposableScreen/types.d.ts +7 -0
- package/dist/UI/Pages/ComposableScreen/types.d.ts.map +1 -1
- package/dist/UI/Pages/ComposableScreen/types.js +7 -0
- package/dist/UI/Pages/ComposableScreen/types.js.map +1 -1
- package/package.json +2 -2
- package/src/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.tsx +200 -0
- package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx +5 -0
- package/src/UI/Pages/ComposableScreen/types.ts +14 -0
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { z } from "zod";
|
|
3
|
+
import { BaseBoxProps } from "./BaseBoxProps";
|
|
4
|
+
import type { UIElement } from "../types";
|
|
5
|
+
import type { RenderContext } from "./shared";
|
|
6
|
+
export type CheckboxGroupElementProps = BaseBoxProps & {
|
|
7
|
+
variableName?: string;
|
|
8
|
+
defaultValues?: string[];
|
|
9
|
+
gap?: number;
|
|
10
|
+
direction?: "vertical" | "horizontal";
|
|
11
|
+
items: Array<{
|
|
12
|
+
label: string;
|
|
13
|
+
value: string;
|
|
14
|
+
}>;
|
|
15
|
+
itemBackgroundColor?: string;
|
|
16
|
+
itemSelectedBackgroundColor?: string;
|
|
17
|
+
itemBorderColor?: string;
|
|
18
|
+
itemSelectedBorderColor?: string;
|
|
19
|
+
itemBorderRadius?: number;
|
|
20
|
+
itemBorderWidth?: number;
|
|
21
|
+
itemColor?: string;
|
|
22
|
+
itemSelectedColor?: string;
|
|
23
|
+
itemFontSize?: number;
|
|
24
|
+
itemFontWeight?: string;
|
|
25
|
+
itemFontFamily?: string;
|
|
26
|
+
itemPadding?: number;
|
|
27
|
+
itemPaddingHorizontal?: number;
|
|
28
|
+
itemPaddingVertical?: number;
|
|
29
|
+
};
|
|
30
|
+
export declare const CheckboxGroupElementPropsSchema: z.ZodObject<{
|
|
31
|
+
width: z.ZodOptional<z.ZodNumber>;
|
|
32
|
+
height: z.ZodOptional<z.ZodNumber>;
|
|
33
|
+
alignSelf: z.ZodOptional<z.ZodEnum<{
|
|
34
|
+
auto: "auto";
|
|
35
|
+
center: "center";
|
|
36
|
+
"flex-start": "flex-start";
|
|
37
|
+
"flex-end": "flex-end";
|
|
38
|
+
stretch: "stretch";
|
|
39
|
+
baseline: "baseline";
|
|
40
|
+
}>>;
|
|
41
|
+
opacity: z.ZodOptional<z.ZodNumber>;
|
|
42
|
+
margin: z.ZodOptional<z.ZodNumber>;
|
|
43
|
+
marginHorizontal: z.ZodOptional<z.ZodNumber>;
|
|
44
|
+
marginVertical: z.ZodOptional<z.ZodNumber>;
|
|
45
|
+
padding: z.ZodOptional<z.ZodNumber>;
|
|
46
|
+
paddingHorizontal: z.ZodOptional<z.ZodNumber>;
|
|
47
|
+
paddingVertical: z.ZodOptional<z.ZodNumber>;
|
|
48
|
+
borderWidth: z.ZodOptional<z.ZodNumber>;
|
|
49
|
+
borderRadius: z.ZodOptional<z.ZodNumber>;
|
|
50
|
+
borderColor: z.ZodOptional<z.ZodString>;
|
|
51
|
+
variableName: z.ZodOptional<z.ZodString>;
|
|
52
|
+
defaultValues: z.ZodOptional<z.ZodArray<z.ZodString>>;
|
|
53
|
+
gap: z.ZodOptional<z.ZodNumber>;
|
|
54
|
+
direction: z.ZodOptional<z.ZodEnum<{
|
|
55
|
+
horizontal: "horizontal";
|
|
56
|
+
vertical: "vertical";
|
|
57
|
+
}>>;
|
|
58
|
+
items: z.ZodArray<z.ZodObject<{
|
|
59
|
+
label: z.ZodString;
|
|
60
|
+
value: z.ZodString;
|
|
61
|
+
}, z.core.$strip>>;
|
|
62
|
+
itemBackgroundColor: z.ZodOptional<z.ZodString>;
|
|
63
|
+
itemSelectedBackgroundColor: z.ZodOptional<z.ZodString>;
|
|
64
|
+
itemBorderColor: z.ZodOptional<z.ZodString>;
|
|
65
|
+
itemSelectedBorderColor: z.ZodOptional<z.ZodString>;
|
|
66
|
+
itemBorderRadius: z.ZodOptional<z.ZodNumber>;
|
|
67
|
+
itemBorderWidth: z.ZodOptional<z.ZodNumber>;
|
|
68
|
+
itemColor: z.ZodOptional<z.ZodString>;
|
|
69
|
+
itemSelectedColor: z.ZodOptional<z.ZodString>;
|
|
70
|
+
itemFontSize: z.ZodOptional<z.ZodNumber>;
|
|
71
|
+
itemFontWeight: z.ZodOptional<z.ZodString>;
|
|
72
|
+
itemFontFamily: z.ZodOptional<z.ZodString>;
|
|
73
|
+
itemPadding: z.ZodOptional<z.ZodNumber>;
|
|
74
|
+
itemPaddingHorizontal: z.ZodOptional<z.ZodNumber>;
|
|
75
|
+
itemPaddingVertical: z.ZodOptional<z.ZodNumber>;
|
|
76
|
+
}, z.core.$strip>;
|
|
77
|
+
type CheckboxGroupUIElement = Extract<UIElement, {
|
|
78
|
+
type: "CheckboxGroup";
|
|
79
|
+
}>;
|
|
80
|
+
type Props = {
|
|
81
|
+
element: CheckboxGroupUIElement;
|
|
82
|
+
ctx: RenderContext;
|
|
83
|
+
};
|
|
84
|
+
export declare const CheckboxGroupComponent: ({ element, ctx }: Props) => React.ReactElement;
|
|
85
|
+
export {};
|
|
86
|
+
//# sourceMappingURL=CheckboxGroupElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxGroupElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,MAAM,yBAAyB,GAAG,YAAY,GAAG;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiC1C,CAAC;AAEH,KAAK,sBAAsB,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,CAAC,CAAC;AAE5E,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,sBAAsB,CAAC;IAChC,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,kBAAkB,KAAK,KAAG,KAAK,CAAC,YAgItE,CAAC"}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CheckboxGroupComponent = exports.CheckboxGroupElementPropsSchema = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const zod_1 = require("zod");
|
|
7
|
+
const react_native_1 = require("react-native");
|
|
8
|
+
const BaseBoxProps_1 = require("./BaseBoxProps");
|
|
9
|
+
exports.CheckboxGroupElementPropsSchema = BaseBoxProps_1.BaseBoxPropsSchema.extend({
|
|
10
|
+
variableName: zod_1.z.string().optional(),
|
|
11
|
+
defaultValues: zod_1.z.array(zod_1.z.string()).optional(),
|
|
12
|
+
gap: zod_1.z.number().optional(),
|
|
13
|
+
direction: zod_1.z.enum(["vertical", "horizontal"]).optional(),
|
|
14
|
+
items: zod_1.z.array(zod_1.z.object({ label: zod_1.z.string().trim().min(1, "item label must not be empty"), value: zod_1.z.string().trim().min(1, "item value must not be empty") })).min(1, "items must not be empty"),
|
|
15
|
+
itemBackgroundColor: zod_1.z.string().optional(),
|
|
16
|
+
itemSelectedBackgroundColor: zod_1.z.string().optional(),
|
|
17
|
+
itemBorderColor: zod_1.z.string().optional(),
|
|
18
|
+
itemSelectedBorderColor: zod_1.z.string().optional(),
|
|
19
|
+
itemBorderRadius: zod_1.z.number().optional(),
|
|
20
|
+
itemBorderWidth: zod_1.z.number().optional(),
|
|
21
|
+
itemColor: zod_1.z.string().optional(),
|
|
22
|
+
itemSelectedColor: zod_1.z.string().optional(),
|
|
23
|
+
itemFontSize: zod_1.z.number().optional(),
|
|
24
|
+
itemFontWeight: zod_1.z.string().optional(),
|
|
25
|
+
itemFontFamily: zod_1.z.string().optional(),
|
|
26
|
+
itemPadding: zod_1.z.number().optional(),
|
|
27
|
+
itemPaddingHorizontal: zod_1.z.number().optional(),
|
|
28
|
+
itemPaddingVertical: zod_1.z.number().optional(),
|
|
29
|
+
}).superRefine((data, ctx) => {
|
|
30
|
+
const values = data.items.map((i) => i.value);
|
|
31
|
+
const unique = new Set(values);
|
|
32
|
+
if (unique.size !== values.length) {
|
|
33
|
+
ctx.addIssue({ code: zod_1.z.ZodIssueCode.custom, message: "item values must be unique", path: ["items"] });
|
|
34
|
+
}
|
|
35
|
+
if (data.defaultValues !== undefined) {
|
|
36
|
+
data.defaultValues.forEach((dv, i) => {
|
|
37
|
+
if (!unique.has(dv)) {
|
|
38
|
+
ctx.addIssue({ code: zod_1.z.ZodIssueCode.custom, message: `defaultValues entry "${dv}" must match one of the item values`, path: ["defaultValues", i] });
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
const CheckboxGroupComponent = ({ element, ctx }) => {
|
|
44
|
+
var _a, _b;
|
|
45
|
+
const { theme, variables, setVariable } = ctx;
|
|
46
|
+
// The variable stores a JSON-serialised string[] to stay compatible with the string-based variable system.
|
|
47
|
+
const rawValue = element.props.variableName ? (_a = variables[element.props.variableName]) === null || _a === void 0 ? void 0 : _a.value : undefined;
|
|
48
|
+
const selectedValues = (() => {
|
|
49
|
+
if (typeof rawValue !== "string")
|
|
50
|
+
return undefined;
|
|
51
|
+
try {
|
|
52
|
+
return JSON.parse(rawValue);
|
|
53
|
+
}
|
|
54
|
+
catch (_a) {
|
|
55
|
+
return undefined;
|
|
56
|
+
}
|
|
57
|
+
})();
|
|
58
|
+
(0, react_1.useEffect)(() => {
|
|
59
|
+
if (element.props.variableName && element.props.defaultValues && selectedValues === undefined) {
|
|
60
|
+
const defaultLabels = element.props.defaultValues.map((dv) => { var _a, _b; return (_b = (_a = element.props.items.find((i) => i.value === dv)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : dv; });
|
|
61
|
+
setVariable(element.props.variableName, {
|
|
62
|
+
value: JSON.stringify(element.props.defaultValues),
|
|
63
|
+
label: defaultLabels.join(", "),
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
}, [element.props.variableName, element.props.defaultValues, element.props.items, selectedValues]);
|
|
67
|
+
const handleToggle = (value, label) => {
|
|
68
|
+
if (!element.props.variableName)
|
|
69
|
+
return;
|
|
70
|
+
const current = selectedValues !== null && selectedValues !== void 0 ? selectedValues : [];
|
|
71
|
+
const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
|
|
72
|
+
const nextLabels = next.map((v) => { var _a, _b; return (_b = (_a = element.props.items.find((i) => i.value === v)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : v; });
|
|
73
|
+
setVariable(element.props.variableName, {
|
|
74
|
+
value: JSON.stringify(next),
|
|
75
|
+
label: nextLabels.join(", "),
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
const isHorizontal = element.props.direction === "horizontal";
|
|
79
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "list", style: {
|
|
80
|
+
flexDirection: isHorizontal ? "row" : "column",
|
|
81
|
+
flexWrap: isHorizontal ? "wrap" : undefined,
|
|
82
|
+
alignSelf: element.props.alignSelf,
|
|
83
|
+
gap: (_b = element.props.gap) !== null && _b !== void 0 ? _b : 8,
|
|
84
|
+
width: element.props.width,
|
|
85
|
+
height: element.props.height,
|
|
86
|
+
margin: element.props.margin,
|
|
87
|
+
marginHorizontal: element.props.marginHorizontal,
|
|
88
|
+
marginVertical: element.props.marginVertical,
|
|
89
|
+
padding: element.props.padding,
|
|
90
|
+
paddingHorizontal: element.props.paddingHorizontal,
|
|
91
|
+
paddingVertical: element.props.paddingVertical,
|
|
92
|
+
borderWidth: element.props.borderWidth,
|
|
93
|
+
borderRadius: element.props.borderRadius,
|
|
94
|
+
borderColor: element.props.borderColor,
|
|
95
|
+
opacity: element.props.opacity,
|
|
96
|
+
}, children: element.props.items.map((item) => {
|
|
97
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
98
|
+
const isSelected = (selectedValues !== null && selectedValues !== void 0 ? selectedValues : []).includes(item.value);
|
|
99
|
+
const bgColor = isSelected
|
|
100
|
+
? ((_a = element.props.itemSelectedBackgroundColor) !== null && _a !== void 0 ? _a : (theme.colors.primary.startsWith("#") ? theme.colors.primary + "1A" : theme.colors.primary))
|
|
101
|
+
: ((_b = element.props.itemBackgroundColor) !== null && _b !== void 0 ? _b : "transparent");
|
|
102
|
+
const textColor = isSelected
|
|
103
|
+
? ((_c = element.props.itemSelectedColor) !== null && _c !== void 0 ? _c : theme.colors.primary)
|
|
104
|
+
: ((_d = element.props.itemColor) !== null && _d !== void 0 ? _d : theme.colors.text.primary);
|
|
105
|
+
const borderColor = isSelected
|
|
106
|
+
? ((_e = element.props.itemSelectedBorderColor) !== null && _e !== void 0 ? _e : theme.colors.primary)
|
|
107
|
+
: ((_f = element.props.itemBorderColor) !== null && _f !== void 0 ? _f : theme.colors.neutral.low);
|
|
108
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { activeOpacity: 0.7, onPress: () => handleToggle(item.value, item.label), accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: item.label, style: {
|
|
109
|
+
flexDirection: "row",
|
|
110
|
+
alignItems: "center",
|
|
111
|
+
gap: 12,
|
|
112
|
+
backgroundColor: bgColor,
|
|
113
|
+
borderRadius: (_g = element.props.itemBorderRadius) !== null && _g !== void 0 ? _g : 8,
|
|
114
|
+
borderWidth: (_h = element.props.itemBorderWidth) !== null && _h !== void 0 ? _h : 1,
|
|
115
|
+
borderColor: borderColor,
|
|
116
|
+
padding: (_j = element.props.itemPadding) !== null && _j !== void 0 ? _j : (element.props.itemPaddingHorizontal === undefined && element.props.itemPaddingVertical === undefined ? 12 : undefined),
|
|
117
|
+
paddingHorizontal: element.props.itemPaddingHorizontal,
|
|
118
|
+
paddingVertical: element.props.itemPaddingVertical,
|
|
119
|
+
}, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
120
|
+
width: 20,
|
|
121
|
+
height: 20,
|
|
122
|
+
borderRadius: 4,
|
|
123
|
+
borderWidth: 2,
|
|
124
|
+
borderColor: isSelected ? theme.colors.primary : theme.colors.neutral.medium,
|
|
125
|
+
alignItems: "center",
|
|
126
|
+
justifyContent: "center",
|
|
127
|
+
backgroundColor: isSelected ? theme.colors.primary : "transparent",
|
|
128
|
+
}, children: isSelected && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
129
|
+
color: "#fff",
|
|
130
|
+
fontSize: 12,
|
|
131
|
+
fontWeight: "700",
|
|
132
|
+
lineHeight: 14,
|
|
133
|
+
}, children: "\u2713" })) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
134
|
+
flexShrink: 1,
|
|
135
|
+
color: textColor,
|
|
136
|
+
fontSize: (_k = element.props.itemFontSize) !== null && _k !== void 0 ? _k : theme.typography.textStyles.body.fontSize,
|
|
137
|
+
fontWeight: (_l = element.props.itemFontWeight) !== null && _l !== void 0 ? _l : theme.typography.textStyles.body.fontWeight,
|
|
138
|
+
fontFamily: element.props.itemFontFamily,
|
|
139
|
+
}, children: item.label })] }, item.value));
|
|
140
|
+
}) }));
|
|
141
|
+
};
|
|
142
|
+
exports.CheckboxGroupComponent = CheckboxGroupComponent;
|
|
143
|
+
//# sourceMappingURL=CheckboxGroupElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxGroupElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/renderElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"renderElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/renderElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAazC,eAAO,MAAM,aAAa,GACxB,SAAS,SAAS,EAClB,KAAK,aAAa,EAClB,aAAa,QAAQ,GAAG,QAAQ,KAC/B,KAAK,CAAC,SA8CR,CAAC"}
|
|
@@ -11,6 +11,7 @@ const IconElement_1 = require("./IconElement");
|
|
|
11
11
|
const VideoElement_1 = require("./VideoElement");
|
|
12
12
|
const InputElement_1 = require("./InputElement");
|
|
13
13
|
const RadioGroupElement_1 = require("./RadioGroupElement");
|
|
14
|
+
const CheckboxGroupElement_1 = require("./CheckboxGroupElement");
|
|
14
15
|
const ButtonElement_1 = require("./ButtonElement");
|
|
15
16
|
const renderElement = (element, ctx, parentType) => {
|
|
16
17
|
if (element.type === "YStack" || element.type === "XStack") {
|
|
@@ -40,6 +41,9 @@ const renderElement = (element, ctx, parentType) => {
|
|
|
40
41
|
if (element.type === "RadioGroup") {
|
|
41
42
|
return (0, jsx_runtime_1.jsx)(RadioGroupElement_1.RadioGroupComponent, { element: element, ctx: ctx }, element.id);
|
|
42
43
|
}
|
|
44
|
+
if (element.type === "CheckboxGroup") {
|
|
45
|
+
return (0, jsx_runtime_1.jsx)(CheckboxGroupElement_1.CheckboxGroupComponent, { element: element, ctx: ctx }, element.id);
|
|
46
|
+
}
|
|
43
47
|
if (element.type === "Button") {
|
|
44
48
|
return (0, jsx_runtime_1.jsx)(ButtonElement_1.ButtonElementComponent, { element: element, ctx: ctx }, element.id);
|
|
45
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/renderElement.tsx"],"names":[],"mappings":";;;;AAGA,iDAAuD;AACvD,+CAAqD;AACrD,iDAAuD;AACvD,mDAAyD;AACzD,+CAAoD;AACpD,+CAAqD;AACrD,iDAAsD;AACtD,iDAAuD;AACvD,2DAA0D;AAC1D,mDAAyD;AAElD,MAAM,aAAa,GAAG,CAC3B,OAAkB,EAClB,GAAkB,EAClB,UAAgC,EACf,EAAE;IACnB,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAA9D,OAAO,CAAC,EAAE,CAAwD,CAAC;IACxG,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,kCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAA9D,OAAO,CAAC,EAAE,CAAwD,CAAC;IACvG,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAChF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,uBAAC,sCAAsB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IACjF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,iCAAmB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC9E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,kCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC/E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,mCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC/E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAChF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;QAClC,OAAO,uBAAC,uCAAmB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC9E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,uBAAC,sCAAsB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IACjF,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"renderElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/renderElement.tsx"],"names":[],"mappings":";;;;AAGA,iDAAuD;AACvD,+CAAqD;AACrD,iDAAuD;AACvD,mDAAyD;AACzD,+CAAoD;AACpD,+CAAqD;AACrD,iDAAsD;AACtD,iDAAuD;AACvD,2DAA0D;AAC1D,iEAAgE;AAChE,mDAAyD;AAElD,MAAM,aAAa,GAAG,CAC3B,OAAkB,EAClB,GAAkB,EAClB,UAAgC,EACf,EAAE;IACnB,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAA9D,OAAO,CAAC,EAAE,CAAwD,CAAC;IACxG,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,kCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAA9D,OAAO,CAAC,EAAE,CAAwD,CAAC;IACvG,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAChF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,uBAAC,sCAAsB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IACjF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,iCAAmB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC9E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,kCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC/E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,mCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC/E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAChF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;QAClC,OAAO,uBAAC,uCAAmB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC9E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,eAAe,EAAE,CAAC;QACrC,OAAO,uBAAC,6CAAsB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IACjF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,uBAAC,sCAAsB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IACjF,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAlDW,QAAA,aAAa,iBAkDxB"}
|
|
@@ -9,6 +9,7 @@ import { type VideoElementProps } from "./elements/VideoElement";
|
|
|
9
9
|
import { type InputElementProps } from "./elements/InputElement";
|
|
10
10
|
import { type ButtonElementProps } from "./elements/ButtonElement";
|
|
11
11
|
import { type RadioGroupElementProps } from "./elements/RadioGroupElement";
|
|
12
|
+
import { type CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
|
|
12
13
|
export type { BaseBoxProps } from "./elements/BaseBoxProps";
|
|
13
14
|
export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
|
|
14
15
|
export type { StackElementProps } from "./elements/StackElement";
|
|
@@ -21,6 +22,7 @@ export type { VideoElementProps } from "./elements/VideoElement";
|
|
|
21
22
|
export type { InputElementProps } from "./elements/InputElement";
|
|
22
23
|
export type { ButtonElementProps } from "./elements/ButtonElement";
|
|
23
24
|
export type { RadioGroupElementProps } from "./elements/RadioGroupElement";
|
|
25
|
+
export type { CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
|
|
24
26
|
export type UIElement = {
|
|
25
27
|
id: string;
|
|
26
28
|
name?: string;
|
|
@@ -72,6 +74,11 @@ export type UIElement = {
|
|
|
72
74
|
name?: string;
|
|
73
75
|
type: "RadioGroup";
|
|
74
76
|
props: RadioGroupElementProps;
|
|
77
|
+
} | {
|
|
78
|
+
id: string;
|
|
79
|
+
name?: string;
|
|
80
|
+
type: "CheckboxGroup";
|
|
81
|
+
props: CheckboxGroupElementProps;
|
|
75
82
|
};
|
|
76
83
|
export declare const UIElementSchema: z.ZodType<UIElement>;
|
|
77
84
|
export declare const ComposableScreenStepPayloadSchema: z.ZodObject<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,wBAAwB,CAAC;AACvF,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,KAAK,kBAAkB,EAA4B,MAAM,0BAA0B,CAAC;AAC7F,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,wBAAwB,CAAC;AACvF,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,wBAAwB,CAAC;AACvF,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,KAAK,iBAAiB,EAA2B,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,KAAK,kBAAkB,EAA4B,MAAM,0BAA0B,CAAC;AAC7F,OAAO,EAAE,KAAK,sBAAsB,EAAgC,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,7 @@ const VideoElement_1 = require("./elements/VideoElement");
|
|
|
13
13
|
const InputElement_1 = require("./elements/InputElement");
|
|
14
14
|
const ButtonElement_1 = require("./elements/ButtonElement");
|
|
15
15
|
const RadioGroupElement_1 = require("./elements/RadioGroupElement");
|
|
16
|
+
const CheckboxGroupElement_1 = require("./elements/CheckboxGroupElement");
|
|
16
17
|
var BaseBoxProps_1 = require("./elements/BaseBoxProps");
|
|
17
18
|
Object.defineProperty(exports, "BaseBoxPropsSchema", { enumerable: true, get: function () { return BaseBoxProps_1.BaseBoxPropsSchema; } });
|
|
18
19
|
exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
|
|
@@ -77,6 +78,12 @@ exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
|
|
|
77
78
|
type: zod_1.z.literal("RadioGroup"),
|
|
78
79
|
props: RadioGroupElement_1.RadioGroupElementPropsSchema,
|
|
79
80
|
}),
|
|
81
|
+
zod_1.z.object({
|
|
82
|
+
id: zod_1.z.string(),
|
|
83
|
+
name: zod_1.z.string().optional(),
|
|
84
|
+
type: zod_1.z.literal("CheckboxGroup"),
|
|
85
|
+
props: CheckboxGroupElement_1.CheckboxGroupElementPropsSchema,
|
|
86
|
+
}),
|
|
80
87
|
]));
|
|
81
88
|
exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
|
|
82
89
|
elements: zod_1.z.array(exports.UIElementSchema),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":";;;AAAA,6BAAwB;AACxB,oCAA+C;AAC/C,0DAA0F;AAC1F,wDAAuF;AACvF,0DAA0F;AAC1F,4DAA6F;AAC7F,wDAAuF;AACvF,wDAAuF;AACvF,0DAA0F;AAC1F,0DAA0F;AAC1F,4DAA6F;AAC7F,oEAAyG;
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rocapine/react-native-onboarding-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.0",
|
|
4
4
|
"description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@react-native-picker/picker": "*",
|
|
46
|
-
"@rocapine/react-native-onboarding": "^1.
|
|
46
|
+
"@rocapine/react-native-onboarding": "^1.9.0",
|
|
47
47
|
"@shopify/react-native-skia": ">=1.0.0",
|
|
48
48
|
"@tanstack/react-query": ">=5.0.0",
|
|
49
49
|
"@types/react": "*",
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import React, { useEffect } from "react";
|
|
2
|
+
import { z } from "zod";
|
|
3
|
+
import { View, Text, TouchableOpacity } from "react-native";
|
|
4
|
+
import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
|
|
5
|
+
import type { UIElement } from "../types";
|
|
6
|
+
import type { RenderContext } from "./shared";
|
|
7
|
+
|
|
8
|
+
export type CheckboxGroupElementProps = BaseBoxProps & {
|
|
9
|
+
variableName?: string;
|
|
10
|
+
defaultValues?: string[];
|
|
11
|
+
gap?: number;
|
|
12
|
+
direction?: "vertical" | "horizontal";
|
|
13
|
+
items: Array<{ label: string; value: string }>;
|
|
14
|
+
itemBackgroundColor?: string;
|
|
15
|
+
itemSelectedBackgroundColor?: string;
|
|
16
|
+
itemBorderColor?: string;
|
|
17
|
+
itemSelectedBorderColor?: string;
|
|
18
|
+
itemBorderRadius?: number;
|
|
19
|
+
itemBorderWidth?: number;
|
|
20
|
+
itemColor?: string;
|
|
21
|
+
itemSelectedColor?: string;
|
|
22
|
+
itemFontSize?: number;
|
|
23
|
+
itemFontWeight?: string;
|
|
24
|
+
itemFontFamily?: string;
|
|
25
|
+
itemPadding?: number;
|
|
26
|
+
itemPaddingHorizontal?: number;
|
|
27
|
+
itemPaddingVertical?: number;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export const CheckboxGroupElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
31
|
+
variableName: z.string().optional(),
|
|
32
|
+
defaultValues: z.array(z.string()).optional(),
|
|
33
|
+
gap: z.number().optional(),
|
|
34
|
+
direction: z.enum(["vertical", "horizontal"]).optional(),
|
|
35
|
+
items: z.array(z.object({ label: z.string().trim().min(1, "item label must not be empty"), value: z.string().trim().min(1, "item value must not be empty") })).min(1, "items must not be empty"),
|
|
36
|
+
itemBackgroundColor: z.string().optional(),
|
|
37
|
+
itemSelectedBackgroundColor: z.string().optional(),
|
|
38
|
+
itemBorderColor: z.string().optional(),
|
|
39
|
+
itemSelectedBorderColor: z.string().optional(),
|
|
40
|
+
itemBorderRadius: z.number().optional(),
|
|
41
|
+
itemBorderWidth: z.number().optional(),
|
|
42
|
+
itemColor: z.string().optional(),
|
|
43
|
+
itemSelectedColor: z.string().optional(),
|
|
44
|
+
itemFontSize: z.number().optional(),
|
|
45
|
+
itemFontWeight: z.string().optional(),
|
|
46
|
+
itemFontFamily: z.string().optional(),
|
|
47
|
+
itemPadding: z.number().optional(),
|
|
48
|
+
itemPaddingHorizontal: z.number().optional(),
|
|
49
|
+
itemPaddingVertical: z.number().optional(),
|
|
50
|
+
}).superRefine((data, ctx) => {
|
|
51
|
+
const values = data.items.map((i) => i.value);
|
|
52
|
+
const unique = new Set(values);
|
|
53
|
+
if (unique.size !== values.length) {
|
|
54
|
+
ctx.addIssue({ code: z.ZodIssueCode.custom, message: "item values must be unique", path: ["items"] });
|
|
55
|
+
}
|
|
56
|
+
if (data.defaultValues !== undefined) {
|
|
57
|
+
data.defaultValues.forEach((dv, i) => {
|
|
58
|
+
if (!unique.has(dv)) {
|
|
59
|
+
ctx.addIssue({ code: z.ZodIssueCode.custom, message: `defaultValues entry "${dv}" must match one of the item values`, path: ["defaultValues", i] });
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
type CheckboxGroupUIElement = Extract<UIElement, { type: "CheckboxGroup" }>;
|
|
66
|
+
|
|
67
|
+
type Props = {
|
|
68
|
+
element: CheckboxGroupUIElement;
|
|
69
|
+
ctx: RenderContext;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export const CheckboxGroupComponent = ({ element, ctx }: Props): React.ReactElement => {
|
|
73
|
+
const { theme, variables, setVariable } = ctx;
|
|
74
|
+
// The variable stores a JSON-serialised string[] to stay compatible with the string-based variable system.
|
|
75
|
+
const rawValue = element.props.variableName ? variables[element.props.variableName]?.value : undefined;
|
|
76
|
+
const selectedValues: string[] | undefined = (() => {
|
|
77
|
+
if (typeof rawValue !== "string") return undefined;
|
|
78
|
+
try { return JSON.parse(rawValue) as string[]; } catch { return undefined; }
|
|
79
|
+
})();
|
|
80
|
+
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
if (element.props.variableName && element.props.defaultValues && selectedValues === undefined) {
|
|
83
|
+
const defaultLabels = element.props.defaultValues.map((dv) => element.props.items.find((i) => i.value === dv)?.label ?? dv);
|
|
84
|
+
setVariable(element.props.variableName, {
|
|
85
|
+
value: JSON.stringify(element.props.defaultValues),
|
|
86
|
+
label: defaultLabels.join(", "),
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
}, [element.props.variableName, element.props.defaultValues, element.props.items, selectedValues]);
|
|
90
|
+
|
|
91
|
+
const handleToggle = (value: string, label: string) => {
|
|
92
|
+
if (!element.props.variableName) return;
|
|
93
|
+
const current: string[] = selectedValues ?? [];
|
|
94
|
+
const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
|
|
95
|
+
const nextLabels = next.map((v) => element.props.items.find((i) => i.value === v)?.label ?? v);
|
|
96
|
+
setVariable(element.props.variableName, {
|
|
97
|
+
value: JSON.stringify(next),
|
|
98
|
+
label: nextLabels.join(", "),
|
|
99
|
+
});
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
const isHorizontal = element.props.direction === "horizontal";
|
|
103
|
+
|
|
104
|
+
return (
|
|
105
|
+
<View
|
|
106
|
+
accessibilityRole="list"
|
|
107
|
+
style={{
|
|
108
|
+
flexDirection: isHorizontal ? "row" : "column",
|
|
109
|
+
flexWrap: isHorizontal ? "wrap" : undefined,
|
|
110
|
+
alignSelf: element.props.alignSelf,
|
|
111
|
+
gap: element.props.gap ?? 8,
|
|
112
|
+
width: element.props.width,
|
|
113
|
+
height: element.props.height,
|
|
114
|
+
margin: element.props.margin,
|
|
115
|
+
marginHorizontal: element.props.marginHorizontal,
|
|
116
|
+
marginVertical: element.props.marginVertical,
|
|
117
|
+
padding: element.props.padding,
|
|
118
|
+
paddingHorizontal: element.props.paddingHorizontal,
|
|
119
|
+
paddingVertical: element.props.paddingVertical,
|
|
120
|
+
borderWidth: element.props.borderWidth,
|
|
121
|
+
borderRadius: element.props.borderRadius,
|
|
122
|
+
borderColor: element.props.borderColor,
|
|
123
|
+
opacity: element.props.opacity,
|
|
124
|
+
}}
|
|
125
|
+
>
|
|
126
|
+
{element.props.items.map((item) => {
|
|
127
|
+
const isSelected = (selectedValues ?? []).includes(item.value);
|
|
128
|
+
const bgColor = isSelected
|
|
129
|
+
? (element.props.itemSelectedBackgroundColor ?? (theme.colors.primary.startsWith("#") ? theme.colors.primary + "1A" : theme.colors.primary))
|
|
130
|
+
: (element.props.itemBackgroundColor ?? "transparent");
|
|
131
|
+
const textColor = isSelected
|
|
132
|
+
? (element.props.itemSelectedColor ?? theme.colors.primary)
|
|
133
|
+
: (element.props.itemColor ?? theme.colors.text.primary);
|
|
134
|
+
const borderColor = isSelected
|
|
135
|
+
? (element.props.itemSelectedBorderColor ?? theme.colors.primary)
|
|
136
|
+
: (element.props.itemBorderColor ?? theme.colors.neutral.low);
|
|
137
|
+
|
|
138
|
+
return (
|
|
139
|
+
<TouchableOpacity
|
|
140
|
+
key={item.value}
|
|
141
|
+
activeOpacity={0.7}
|
|
142
|
+
onPress={() => handleToggle(item.value, item.label)}
|
|
143
|
+
accessibilityRole="checkbox"
|
|
144
|
+
accessibilityState={{ checked: isSelected }}
|
|
145
|
+
accessibilityLabel={item.label}
|
|
146
|
+
style={{
|
|
147
|
+
flexDirection: "row",
|
|
148
|
+
alignItems: "center",
|
|
149
|
+
gap: 12,
|
|
150
|
+
backgroundColor: bgColor,
|
|
151
|
+
borderRadius: element.props.itemBorderRadius ?? 8,
|
|
152
|
+
borderWidth: element.props.itemBorderWidth ?? 1,
|
|
153
|
+
borderColor: borderColor,
|
|
154
|
+
padding: element.props.itemPadding ?? (element.props.itemPaddingHorizontal === undefined && element.props.itemPaddingVertical === undefined ? 12 : undefined),
|
|
155
|
+
paddingHorizontal: element.props.itemPaddingHorizontal,
|
|
156
|
+
paddingVertical: element.props.itemPaddingVertical,
|
|
157
|
+
}}
|
|
158
|
+
>
|
|
159
|
+
<View
|
|
160
|
+
style={{
|
|
161
|
+
width: 20,
|
|
162
|
+
height: 20,
|
|
163
|
+
borderRadius: 4,
|
|
164
|
+
borderWidth: 2,
|
|
165
|
+
borderColor: isSelected ? theme.colors.primary : theme.colors.neutral.medium,
|
|
166
|
+
alignItems: "center",
|
|
167
|
+
justifyContent: "center",
|
|
168
|
+
backgroundColor: isSelected ? theme.colors.primary : "transparent",
|
|
169
|
+
}}
|
|
170
|
+
>
|
|
171
|
+
{isSelected && (
|
|
172
|
+
<Text
|
|
173
|
+
style={{
|
|
174
|
+
color: "#fff",
|
|
175
|
+
fontSize: 12,
|
|
176
|
+
fontWeight: "700",
|
|
177
|
+
lineHeight: 14,
|
|
178
|
+
}}
|
|
179
|
+
>
|
|
180
|
+
✓
|
|
181
|
+
</Text>
|
|
182
|
+
)}
|
|
183
|
+
</View>
|
|
184
|
+
<Text
|
|
185
|
+
style={{
|
|
186
|
+
flexShrink: 1,
|
|
187
|
+
color: textColor,
|
|
188
|
+
fontSize: element.props.itemFontSize ?? theme.typography.textStyles.body.fontSize,
|
|
189
|
+
fontWeight: (element.props.itemFontWeight as any) ?? theme.typography.textStyles.body.fontWeight,
|
|
190
|
+
fontFamily: element.props.itemFontFamily,
|
|
191
|
+
}}
|
|
192
|
+
>
|
|
193
|
+
{item.label}
|
|
194
|
+
</Text>
|
|
195
|
+
</TouchableOpacity>
|
|
196
|
+
);
|
|
197
|
+
})}
|
|
198
|
+
</View>
|
|
199
|
+
);
|
|
200
|
+
};
|
|
@@ -10,6 +10,7 @@ import { IconElementComponent } from "./IconElement";
|
|
|
10
10
|
import { VideoElementRenderer } from "./VideoElement";
|
|
11
11
|
import { InputElementComponent } from "./InputElement";
|
|
12
12
|
import { RadioGroupComponent } from "./RadioGroupElement";
|
|
13
|
+
import { CheckboxGroupComponent } from "./CheckboxGroupElement";
|
|
13
14
|
import { ButtonElementComponent } from "./ButtonElement";
|
|
14
15
|
|
|
15
16
|
export const renderElement = (
|
|
@@ -53,6 +54,10 @@ export const renderElement = (
|
|
|
53
54
|
return <RadioGroupComponent key={element.id} element={element} ctx={ctx} />;
|
|
54
55
|
}
|
|
55
56
|
|
|
57
|
+
if (element.type === "CheckboxGroup") {
|
|
58
|
+
return <CheckboxGroupComponent key={element.id} element={element} ctx={ctx} />;
|
|
59
|
+
}
|
|
60
|
+
|
|
56
61
|
if (element.type === "Button") {
|
|
57
62
|
return <ButtonElementComponent key={element.id} element={element} ctx={ctx} />;
|
|
58
63
|
}
|
|
@@ -10,6 +10,7 @@ import { type VideoElementProps, VideoElementPropsSchema } from "./elements/Vide
|
|
|
10
10
|
import { type InputElementProps, InputElementPropsSchema } from "./elements/InputElement";
|
|
11
11
|
import { type ButtonElementProps, ButtonElementPropsSchema } from "./elements/ButtonElement";
|
|
12
12
|
import { type RadioGroupElementProps, RadioGroupElementPropsSchema } from "./elements/RadioGroupElement";
|
|
13
|
+
import { type CheckboxGroupElementProps, CheckboxGroupElementPropsSchema } from "./elements/CheckboxGroupElement";
|
|
13
14
|
|
|
14
15
|
export type { BaseBoxProps } from "./elements/BaseBoxProps";
|
|
15
16
|
export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
|
|
@@ -23,6 +24,7 @@ export type { VideoElementProps } from "./elements/VideoElement";
|
|
|
23
24
|
export type { InputElementProps } from "./elements/InputElement";
|
|
24
25
|
export type { ButtonElementProps } from "./elements/ButtonElement";
|
|
25
26
|
export type { RadioGroupElementProps } from "./elements/RadioGroupElement";
|
|
27
|
+
export type { CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
|
|
26
28
|
|
|
27
29
|
// UIElement union — must live here (not in elements/) to avoid circular deps
|
|
28
30
|
// because the Stack variant's children: UIElement[] references itself.
|
|
@@ -87,6 +89,12 @@ export type UIElement =
|
|
|
87
89
|
name?: string;
|
|
88
90
|
type: "RadioGroup";
|
|
89
91
|
props: RadioGroupElementProps;
|
|
92
|
+
}
|
|
93
|
+
| {
|
|
94
|
+
id: string;
|
|
95
|
+
name?: string;
|
|
96
|
+
type: "CheckboxGroup";
|
|
97
|
+
props: CheckboxGroupElementProps;
|
|
90
98
|
};
|
|
91
99
|
|
|
92
100
|
export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
|
|
@@ -152,6 +160,12 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
|
|
|
152
160
|
type: z.literal("RadioGroup"),
|
|
153
161
|
props: RadioGroupElementPropsSchema,
|
|
154
162
|
}),
|
|
163
|
+
z.object({
|
|
164
|
+
id: z.string(),
|
|
165
|
+
name: z.string().optional(),
|
|
166
|
+
type: z.literal("CheckboxGroup"),
|
|
167
|
+
props: CheckboxGroupElementPropsSchema,
|
|
168
|
+
}),
|
|
155
169
|
])
|
|
156
170
|
);
|
|
157
171
|
|