@mrmeg/expo-ui 0.1.9 → 0.1.10
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.
|
@@ -164,7 +164,7 @@ export function Button(props) {
|
|
|
164
164
|
loading && restingWidth !== undefined && !fullWidth && { width: restingWidth },
|
|
165
165
|
// Spread array styles from Slot to prevent nested arrays on web
|
|
166
166
|
...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
|
|
167
|
-
], onLayout: handleButtonLayout, children: [loading && (_jsx(View, { style: styles.loaderOverlay, pointerEvents: "none", children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { style: [styles.content, loading && styles.loadingContent
|
|
167
|
+
], onLayout: handleButtonLayout, children: [loading && (_jsx(View, { style: [styles.loaderOverlay, { pointerEvents: "none" }], children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { style: [styles.content, loading && styles.loadingContent, { pointerEvents: loading ? "none" : "auto" }], children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
|
|
168
168
|
styles.text,
|
|
169
169
|
state.pressed && styles.pressedText,
|
|
170
170
|
state.pressed && pressedTextStyleOverride,
|
package/dist/components/Icon.js
CHANGED
|
@@ -32,7 +32,7 @@ export function Icon(props) {
|
|
|
32
32
|
const CustomComponent = "component" in props ? props.component : undefined;
|
|
33
33
|
// Wrap in View with pointerEvents="none" to prevent icons from
|
|
34
34
|
// intercepting touches when used inside TouchableOpacity on iOS
|
|
35
|
-
return (_jsx(View, { pointerEvents: "none"
|
|
35
|
+
return (_jsx(View, { style: [style, { pointerEvents: "none" }], accessible: !decorative, ...(decorative && {
|
|
36
36
|
importantForAccessibility: "no",
|
|
37
37
|
accessibilityElementsHidden: true,
|
|
38
38
|
"aria-hidden": true,
|
|
@@ -160,13 +160,14 @@ export const Notification = () => {
|
|
|
160
160
|
if (!alert?.show) {
|
|
161
161
|
return null;
|
|
162
162
|
}
|
|
163
|
-
return (_jsx(Animated.View, { accessibilityLiveRegion: "polite", accessibilityRole: "alert",
|
|
163
|
+
return (_jsx(Animated.View, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", style: [
|
|
164
164
|
styles.container,
|
|
165
165
|
isBottom
|
|
166
166
|
? { bottom: bottomPosition }
|
|
167
167
|
: { top: topPosition },
|
|
168
168
|
animatedContainerStyle,
|
|
169
169
|
!alert?.show && { opacity: 0 },
|
|
170
|
+
{ pointerEvents: alert?.show ? "auto" : "none" },
|
|
170
171
|
], children: _jsxs(View, { style: [
|
|
171
172
|
styles.alert,
|
|
172
173
|
isBottom && styles.alertBottom,
|
|
@@ -133,7 +133,8 @@ function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, size =
|
|
|
133
133
|
alignItems: "center",
|
|
134
134
|
},
|
|
135
135
|
valueLabelStyle,
|
|
136
|
-
|
|
136
|
+
{ pointerEvents: "none" },
|
|
137
|
+
], children: _jsx(StyledText, { selectable: false, style: {
|
|
137
138
|
fontSize: 11,
|
|
138
139
|
color: theme.colors.textDim,
|
|
139
140
|
userSelect: "none",
|
|
@@ -82,7 +82,8 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
|
|
|
82
82
|
backgroundColor: trackBg,
|
|
83
83
|
borderWidth: 1,
|
|
84
84
|
borderColor: trackBorderColor,
|
|
85
|
-
|
|
85
|
+
pointerEvents: "none",
|
|
86
|
+
} }), labelOn && !isIOS && (_jsx(View, { style: {
|
|
86
87
|
position: "absolute",
|
|
87
88
|
top: 0,
|
|
88
89
|
bottom: 0,
|
|
@@ -91,7 +92,8 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
|
|
|
91
92
|
justifyContent: "center",
|
|
92
93
|
alignItems: "center",
|
|
93
94
|
opacity: props.checked ? 1 : 0,
|
|
94
|
-
|
|
95
|
+
pointerEvents: "none",
|
|
96
|
+
}, children: _jsx(StyledText, { selectable: false, style: {
|
|
95
97
|
fontFamily: fontFamilies.sansSerif.bold,
|
|
96
98
|
fontSize: labelFontSize,
|
|
97
99
|
color: labelOnColor,
|
|
@@ -119,7 +121,8 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
|
|
|
119
121
|
justifyContent: "center",
|
|
120
122
|
alignItems: "center",
|
|
121
123
|
opacity: props.checked ? 0 : 1,
|
|
122
|
-
|
|
124
|
+
pointerEvents: "none",
|
|
125
|
+
}, children: _jsx(StyledText, { selectable: false, style: {
|
|
123
126
|
fontFamily: fontFamilies.sansSerif.bold,
|
|
124
127
|
fontSize: labelFontSize,
|
|
125
128
|
color: theme.colors.text,
|
|
@@ -152,7 +152,7 @@ export const TextInput = React.forwardRef(({ variant = "outline", size = "md", l
|
|
|
152
152
|
}, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) })), showClearButton && rightElement && !hasSecureToggle && (_jsxs(View, { style: styles.rightElements, children: [_jsx(Pressable, { onPress: () => {
|
|
153
153
|
hapticLight();
|
|
154
154
|
onChangeText?.("");
|
|
155
|
-
}, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: styles.errorIcon,
|
|
155
|
+
}, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: [styles.errorIcon, { pointerEvents: "none" }], accessibilityLabel: "Error", children: _jsx(Icon, { name: "alert-circle", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [
|
|
156
156
|
styles.helperText,
|
|
157
157
|
hasError && styles.errorText,
|
|
158
158
|
], children: errorText || helperText }))] }));
|