@rocapine/react-native-onboarding-ui 1.19.0 → 1.20.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/ButtonElement.d.ts +21 -0
- package/dist/UI/Pages/ComposableScreen/elements/ButtonElement.d.ts.map +1 -1
- package/dist/UI/Pages/ComposableScreen/elements/ButtonElement.js +45 -24
- package/dist/UI/Pages/ComposableScreen/elements/ButtonElement.js.map +1 -1
- package/package.json +1 -1
- package/src/UI/Pages/ComposableScreen/elements/ButtonElement.tsx +51 -12
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { z } from "zod";
|
|
3
|
+
import { type LeafCondition, type ConditionGroup } from "@rocapine/react-native-onboarding";
|
|
3
4
|
import { BaseBoxProps } from "./BaseBoxProps";
|
|
4
5
|
import { UIElement } from "../types";
|
|
5
6
|
import { RenderContext } from "./shared";
|
|
@@ -53,6 +54,9 @@ export type ButtonElementProps = BaseBoxProps & {
|
|
|
53
54
|
fontFamily?: string | "inherit";
|
|
54
55
|
fontStyle?: "normal" | "italic";
|
|
55
56
|
textAlign?: "left" | "center" | "right";
|
|
57
|
+
disabledWhen?: LeafCondition | ConditionGroup;
|
|
58
|
+
disabledBackgroundColor?: string;
|
|
59
|
+
disabledColor?: string;
|
|
56
60
|
};
|
|
57
61
|
export declare const ButtonElementPropsSchema: z.ZodObject<{
|
|
58
62
|
width: z.ZodOptional<z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>>;
|
|
@@ -147,6 +151,23 @@ export declare const ButtonElementPropsSchema: z.ZodObject<{
|
|
|
147
151
|
right: "right";
|
|
148
152
|
center: "center";
|
|
149
153
|
}>>;
|
|
154
|
+
disabledWhen: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
|
|
155
|
+
variable: z.ZodString;
|
|
156
|
+
operator: z.ZodEnum<{
|
|
157
|
+
eq: "eq";
|
|
158
|
+
neq: "neq";
|
|
159
|
+
gt: "gt";
|
|
160
|
+
lt: "lt";
|
|
161
|
+
gte: "gte";
|
|
162
|
+
lte: "lte";
|
|
163
|
+
contains: "contains";
|
|
164
|
+
in: "in";
|
|
165
|
+
not_in: "not_in";
|
|
166
|
+
}>;
|
|
167
|
+
value: z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodArray<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean]>>]>;
|
|
168
|
+
}, z.core.$strip>, z.ZodType<ConditionGroup, unknown, z.core.$ZodTypeInternals<ConditionGroup, unknown>>]>>;
|
|
169
|
+
disabledBackgroundColor: z.ZodOptional<z.ZodString>;
|
|
170
|
+
disabledColor: z.ZodOptional<z.ZodString>;
|
|
150
171
|
}, z.core.$strip>;
|
|
151
172
|
type ButtonUIElement = Extract<UIElement, {
|
|
152
173
|
type: "Button";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/ButtonElement.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/ButtonElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,cAAc,EAGpB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAmC,MAAM,UAAU,CAAC;AAI1E,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;iBAInC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;;;iBAKxC,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,kBAAkB,GAAG,uBAAuB,CAAC;AAErF,eAAO,MAAM,kBAAkB;;;;;;;;;mBAI7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,yCAAyC;IACzC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,YAAY,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IAC9C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAenC,CAAC;AAEH,KAAK,eAAe,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC,CAAC;AAE9D,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,eAAe,CAAC;IACzB,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,kBAAkB,KAAK,KAAG,KAAK,CAAC,YAmKtE,CAAC"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ButtonElementComponent = exports.ButtonElementPropsSchema = exports.ButtonActionSchema = exports.SetVariableButtonActionSchema = exports.CustomButtonActionSchema = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
5
6
|
const zod_1 = require("zod");
|
|
6
7
|
const react_native_1 = require("react-native");
|
|
7
8
|
const react_native_onboarding_1 = require("@rocapine/react-native-onboarding");
|
|
@@ -36,12 +37,21 @@ exports.ButtonElementPropsSchema = BaseBoxProps_1.BaseBoxPropsSchema.extend({
|
|
|
36
37
|
fontFamily: zod_1.z.string().optional(),
|
|
37
38
|
fontStyle: zod_1.z.enum(["normal", "italic"]).optional(),
|
|
38
39
|
textAlign: zod_1.z.enum(["left", "center", "right"]).optional(),
|
|
40
|
+
disabledWhen: zod_1.z.union([react_native_onboarding_1.LeafConditionSchema, react_native_onboarding_1.ConditionGroupSchema]).optional(),
|
|
41
|
+
disabledBackgroundColor: zod_1.z.string().optional(),
|
|
42
|
+
disabledColor: zod_1.z.string().optional(),
|
|
39
43
|
});
|
|
40
44
|
const ButtonElementComponent = ({ element, ctx }) => {
|
|
41
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
45
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
42
46
|
const { theme, onContinue, customActions, variables, setVariable } = ctx;
|
|
47
|
+
const flatVariables = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(variables).map(([k, v]) => [k, v === null || v === void 0 ? void 0 : v.value])), [variables]);
|
|
48
|
+
const isDisabled = element.props.disabledWhen
|
|
49
|
+
? (0, react_native_onboarding_1.evaluateCondition)(element.props.disabledWhen, flatVariables)
|
|
50
|
+
: false;
|
|
43
51
|
const handlePress = async () => {
|
|
44
52
|
var _a;
|
|
53
|
+
if (isDisabled)
|
|
54
|
+
return;
|
|
45
55
|
const { actions, action } = element.props;
|
|
46
56
|
const effective = actions !== null && actions !== void 0 ? actions : (action === "continue" ? ["continue"] : []);
|
|
47
57
|
for (const act of effective) {
|
|
@@ -74,63 +84,74 @@ const ButtonElementComponent = ({ element, ctx }) => {
|
|
|
74
84
|
const variant = (_a = element.props.variant) !== null && _a !== void 0 ? _a : "filled";
|
|
75
85
|
const isFilled = variant === "filled";
|
|
76
86
|
const isOutlined = variant === "outlined";
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
87
|
+
const disabledBg = (_b = element.props.disabledBackgroundColor) !== null && _b !== void 0 ? _b : theme.colors.disable;
|
|
88
|
+
const disabledText = (_c = element.props.disabledColor) !== null && _c !== void 0 ? _c : theme.colors.text.disable;
|
|
89
|
+
const bgColor = isDisabled
|
|
90
|
+
? isFilled
|
|
91
|
+
? disabledBg
|
|
92
|
+
: "transparent"
|
|
93
|
+
: isFilled
|
|
94
|
+
? ((_d = element.props.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.primary)
|
|
95
|
+
: "transparent";
|
|
96
|
+
const textColor = isDisabled
|
|
97
|
+
? disabledText
|
|
98
|
+
: isFilled
|
|
99
|
+
? ((_e = element.props.color) !== null && _e !== void 0 ? _e : theme.colors.text.opposite)
|
|
100
|
+
: ((_f = element.props.color) !== null && _f !== void 0 ? _f : theme.colors.primary);
|
|
101
|
+
const outlinedBorderColor = isDisabled
|
|
102
|
+
? disabledBg
|
|
103
|
+
: ((_g = element.props.borderColor) !== null && _g !== void 0 ? _g : theme.colors.primary);
|
|
104
|
+
const hasGradient = isFilled && !isDisabled && !!element.props.backgroundGradient;
|
|
105
|
+
const borderRadius = (_h = element.props.borderRadius) !== null && _h !== void 0 ? _h : 90;
|
|
85
106
|
const inheritedFontFamily = (0, shared_1.resolveInheritedFontFamily)(element.props.fontFamily, theme.typography.defaultFontFamily);
|
|
86
107
|
const resolvedFont = (0, react_native_onboarding_1.useResolvedFontStyle)(inheritedFontFamily, element.props.fontWeight);
|
|
87
108
|
const labelNode = ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
|
|
88
109
|
color: textColor,
|
|
89
|
-
fontSize: (
|
|
110
|
+
fontSize: (_j = element.props.fontSize) !== null && _j !== void 0 ? _j : theme.typography.textStyles.button.fontSize,
|
|
90
111
|
fontWeight: resolvedFont.resolvedToVariant
|
|
91
112
|
? undefined
|
|
92
|
-
: ((
|
|
113
|
+
: ((_k = resolvedFont.fontWeight) !== null && _k !== void 0 ? _k : theme.typography.textStyles.button.fontWeight),
|
|
93
114
|
fontFamily: resolvedFont.fontFamily,
|
|
94
115
|
fontStyle: element.props.fontStyle,
|
|
95
|
-
textAlign: (
|
|
116
|
+
textAlign: (_l = element.props.textAlign) !== null && _l !== void 0 ? _l : "center",
|
|
96
117
|
}, children: element.props.label }));
|
|
97
118
|
if (hasGradient) {
|
|
98
119
|
return ((0, jsx_runtime_1.jsx)(GradientBox_1.GradientBox, { gradient: element.props.backgroundGradient, style: {
|
|
99
120
|
borderRadius,
|
|
100
|
-
borderWidth: isOutlined ? ((
|
|
101
|
-
borderColor: isOutlined ?
|
|
121
|
+
borderWidth: isOutlined ? ((_m = element.props.borderWidth) !== null && _m !== void 0 ? _m : 1) : ((_o = element.props.borderWidth) !== null && _o !== void 0 ? _o : 0),
|
|
122
|
+
borderColor: isOutlined ? outlinedBorderColor : element.props.borderColor,
|
|
102
123
|
width: (0, shared_1.dim)(element.props.width),
|
|
103
124
|
height: (0, shared_1.dim)(element.props.height),
|
|
104
125
|
margin: element.props.margin,
|
|
105
126
|
marginHorizontal: element.props.marginHorizontal,
|
|
106
127
|
marginVertical: element.props.marginVertical,
|
|
107
128
|
opacity: element.props.opacity,
|
|
108
|
-
alignSelf: (
|
|
129
|
+
alignSelf: (_p = element.props.alignSelf) !== null && _p !== void 0 ? _p : (element.props.width ? undefined : "stretch"),
|
|
109
130
|
overflow: "hidden",
|
|
110
|
-
}, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: 0.8, onPress: handlePress, style: {
|
|
131
|
+
}, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: 0.8, onPress: handlePress, disabled: isDisabled, style: {
|
|
111
132
|
flex: 1,
|
|
112
133
|
padding: element.props.padding,
|
|
113
|
-
paddingVertical: (
|
|
114
|
-
paddingHorizontal: (
|
|
134
|
+
paddingVertical: (_q = element.props.paddingVertical) !== null && _q !== void 0 ? _q : 14,
|
|
135
|
+
paddingHorizontal: (_r = element.props.paddingHorizontal) !== null && _r !== void 0 ? _r : 24,
|
|
115
136
|
alignItems: "center",
|
|
116
137
|
justifyContent: "center",
|
|
117
138
|
}, children: labelNode }) }));
|
|
118
139
|
}
|
|
119
|
-
return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: 0.8, onPress: handlePress, style: {
|
|
140
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: 0.8, onPress: handlePress, disabled: isDisabled, style: {
|
|
120
141
|
backgroundColor: bgColor,
|
|
121
142
|
borderRadius,
|
|
122
|
-
borderWidth: isOutlined ? ((
|
|
123
|
-
borderColor: isOutlined ?
|
|
143
|
+
borderWidth: isOutlined ? ((_s = element.props.borderWidth) !== null && _s !== void 0 ? _s : 1) : ((_t = element.props.borderWidth) !== null && _t !== void 0 ? _t : 0),
|
|
144
|
+
borderColor: isOutlined ? outlinedBorderColor : element.props.borderColor,
|
|
124
145
|
padding: element.props.padding,
|
|
125
|
-
paddingVertical: (
|
|
126
|
-
paddingHorizontal: (
|
|
146
|
+
paddingVertical: (_u = element.props.paddingVertical) !== null && _u !== void 0 ? _u : 14,
|
|
147
|
+
paddingHorizontal: (_v = element.props.paddingHorizontal) !== null && _v !== void 0 ? _v : 24,
|
|
127
148
|
width: (0, shared_1.dim)(element.props.width),
|
|
128
149
|
height: (0, shared_1.dim)(element.props.height),
|
|
129
150
|
margin: element.props.margin,
|
|
130
151
|
marginHorizontal: element.props.marginHorizontal,
|
|
131
152
|
marginVertical: element.props.marginVertical,
|
|
132
153
|
opacity: element.props.opacity,
|
|
133
|
-
alignSelf: (
|
|
154
|
+
alignSelf: (_w = element.props.alignSelf) !== null && _w !== void 0 ? _w : (element.props.width ? undefined : "stretch"),
|
|
134
155
|
alignItems: "center",
|
|
135
156
|
justifyContent: "center",
|
|
136
157
|
}, children: labelNode }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/ButtonElement.tsx"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"ButtonElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/ButtonElement.tsx"],"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.20.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",
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useMemo } from "react";
|
|
2
2
|
import { z } from "zod";
|
|
3
3
|
import { Text, TouchableOpacity } from "react-native";
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
useResolvedFontStyle,
|
|
6
|
+
evaluateCondition,
|
|
7
|
+
type LeafCondition,
|
|
8
|
+
type ConditionGroup,
|
|
9
|
+
LeafConditionSchema,
|
|
10
|
+
ConditionGroupSchema,
|
|
11
|
+
} from "@rocapine/react-native-onboarding";
|
|
5
12
|
import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
|
|
6
13
|
import { UIElement } from "../types";
|
|
7
14
|
import { RenderContext, dim, resolveInheritedFontFamily } from "./shared";
|
|
@@ -59,6 +66,9 @@ export type ButtonElementProps = BaseBoxProps & {
|
|
|
59
66
|
fontFamily?: string | "inherit";
|
|
60
67
|
fontStyle?: "normal" | "italic";
|
|
61
68
|
textAlign?: "left" | "center" | "right";
|
|
69
|
+
disabledWhen?: LeafCondition | ConditionGroup;
|
|
70
|
+
disabledBackgroundColor?: string;
|
|
71
|
+
disabledColor?: string;
|
|
62
72
|
};
|
|
63
73
|
|
|
64
74
|
export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
@@ -73,6 +83,9 @@ export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
|
73
83
|
fontFamily: z.string().optional(),
|
|
74
84
|
fontStyle: z.enum(["normal", "italic"]).optional(),
|
|
75
85
|
textAlign: z.enum(["left", "center", "right"]).optional(),
|
|
86
|
+
disabledWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
|
|
87
|
+
disabledBackgroundColor: z.string().optional(),
|
|
88
|
+
disabledColor: z.string().optional(),
|
|
76
89
|
});
|
|
77
90
|
|
|
78
91
|
type ButtonUIElement = Extract<UIElement, { type: "Button" }>;
|
|
@@ -84,7 +97,18 @@ type Props = {
|
|
|
84
97
|
|
|
85
98
|
export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElement => {
|
|
86
99
|
const { theme, onContinue, customActions, variables, setVariable } = ctx;
|
|
100
|
+
const flatVariables = useMemo(
|
|
101
|
+
() =>
|
|
102
|
+
Object.fromEntries(
|
|
103
|
+
Object.entries(variables).map(([k, v]) => [k, v?.value])
|
|
104
|
+
),
|
|
105
|
+
[variables]
|
|
106
|
+
);
|
|
107
|
+
const isDisabled = element.props.disabledWhen
|
|
108
|
+
? evaluateCondition(element.props.disabledWhen, flatVariables)
|
|
109
|
+
: false;
|
|
87
110
|
const handlePress = async () => {
|
|
111
|
+
if (isDisabled) return;
|
|
88
112
|
const { actions, action } = element.props;
|
|
89
113
|
const effective: ButtonAction[] =
|
|
90
114
|
actions ?? (action === "continue" ? ["continue"] : []);
|
|
@@ -122,14 +146,27 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
|
|
|
122
146
|
const variant = element.props.variant ?? "filled";
|
|
123
147
|
const isFilled = variant === "filled";
|
|
124
148
|
const isOutlined = variant === "outlined";
|
|
125
|
-
const
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
149
|
+
const disabledBg =
|
|
150
|
+
element.props.disabledBackgroundColor ?? theme.colors.disable;
|
|
151
|
+
const disabledText =
|
|
152
|
+
element.props.disabledColor ?? theme.colors.text.disable;
|
|
153
|
+
const bgColor = isDisabled
|
|
154
|
+
? isFilled
|
|
155
|
+
? disabledBg
|
|
156
|
+
: "transparent"
|
|
157
|
+
: isFilled
|
|
158
|
+
? (element.props.backgroundColor ?? theme.colors.primary)
|
|
159
|
+
: "transparent";
|
|
160
|
+
const textColor = isDisabled
|
|
161
|
+
? disabledText
|
|
162
|
+
: isFilled
|
|
163
|
+
? (element.props.color ?? theme.colors.text.opposite)
|
|
164
|
+
: (element.props.color ?? theme.colors.primary);
|
|
165
|
+
const outlinedBorderColor = isDisabled
|
|
166
|
+
? disabledBg
|
|
167
|
+
: (element.props.borderColor ?? theme.colors.primary);
|
|
168
|
+
|
|
169
|
+
const hasGradient = isFilled && !isDisabled && !!element.props.backgroundGradient;
|
|
133
170
|
const borderRadius = element.props.borderRadius ?? 90;
|
|
134
171
|
const inheritedFontFamily = resolveInheritedFontFamily(
|
|
135
172
|
element.props.fontFamily,
|
|
@@ -164,7 +201,7 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
|
|
|
164
201
|
style={{
|
|
165
202
|
borderRadius,
|
|
166
203
|
borderWidth: isOutlined ? (element.props.borderWidth ?? 1) : (element.props.borderWidth ?? 0),
|
|
167
|
-
borderColor: isOutlined ?
|
|
204
|
+
borderColor: isOutlined ? outlinedBorderColor : element.props.borderColor,
|
|
168
205
|
width: dim(element.props.width),
|
|
169
206
|
height: dim(element.props.height),
|
|
170
207
|
margin: element.props.margin,
|
|
@@ -178,6 +215,7 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
|
|
|
178
215
|
<TouchableOpacity
|
|
179
216
|
activeOpacity={0.8}
|
|
180
217
|
onPress={handlePress}
|
|
218
|
+
disabled={isDisabled}
|
|
181
219
|
style={{
|
|
182
220
|
flex: 1,
|
|
183
221
|
padding: element.props.padding,
|
|
@@ -197,11 +235,12 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
|
|
|
197
235
|
<TouchableOpacity
|
|
198
236
|
activeOpacity={0.8}
|
|
199
237
|
onPress={handlePress}
|
|
238
|
+
disabled={isDisabled}
|
|
200
239
|
style={{
|
|
201
240
|
backgroundColor: bgColor,
|
|
202
241
|
borderRadius,
|
|
203
242
|
borderWidth: isOutlined ? (element.props.borderWidth ?? 1) : (element.props.borderWidth ?? 0),
|
|
204
|
-
borderColor: isOutlined ?
|
|
243
|
+
borderColor: isOutlined ? outlinedBorderColor : element.props.borderColor,
|
|
205
244
|
padding: element.props.padding,
|
|
206
245
|
paddingVertical: element.props.paddingVertical ?? 14,
|
|
207
246
|
paddingHorizontal: element.props.paddingHorizontal ?? 24,
|