@particle-network/ui-native 0.4.2-beta.6 → 0.4.2-beta.7
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.
|
@@ -7,7 +7,7 @@ import { UXPressable } from "../UXPressable/index.js";
|
|
|
7
7
|
import { UXSpinner } from "../UXSpinner/index.js";
|
|
8
8
|
import { useStyles } from "./button.styles.js";
|
|
9
9
|
const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
10
|
-
const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, width, gap, w, h, ph, isIconOnly, children, ...restProps } = props;
|
|
10
|
+
const { style, size, radius, color, variant, onPress, isDisabled, isLoading, isSelected, startContent, endContent, fullWidth, width, gap, w, h, ph, isIconOnly, children, ...restProps } = props;
|
|
11
11
|
const handlePress = (e)=>{
|
|
12
12
|
Keyboard.dismiss();
|
|
13
13
|
triggerHapticFeedback();
|
|
@@ -20,6 +20,7 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
20
20
|
variant,
|
|
21
21
|
isDisabled,
|
|
22
22
|
isLoading,
|
|
23
|
+
isSelected,
|
|
23
24
|
fullWidth,
|
|
24
25
|
isIconOnly,
|
|
25
26
|
width,
|
|
@@ -4,7 +4,7 @@ import { useColors, useComponentConfig, useMs, useRadius, useSpacing } from "../
|
|
|
4
4
|
import { disabledOpacity } from "../../theme/index.js";
|
|
5
5
|
const useStyles = (props)=>{
|
|
6
6
|
const { button: buttonConfig } = useComponentConfig();
|
|
7
|
-
const { size = 'md', radius = buttonConfig.defaultProps?.radius, color = 'default', variant = 'solid', isDisabled, isLoading, width, gap, w, h, ph, fullWidth, isIconOnly } = props;
|
|
7
|
+
const { size = 'md', radius = buttonConfig.defaultProps?.radius, color = 'default', variant = 'solid', isDisabled, isLoading, isSelected, width, gap, w, h, ph, fullWidth, isIconOnly } = props;
|
|
8
8
|
const { getColor } = useColors();
|
|
9
9
|
const { getRadius } = useRadius();
|
|
10
10
|
const { getSpacing } = useSpacing();
|
|
@@ -102,6 +102,9 @@ const useStyles = (props)=>{
|
|
|
102
102
|
]);
|
|
103
103
|
const textColor = useMemo(()=>{
|
|
104
104
|
const customColorConfig = buttonConfig?.color?.[color];
|
|
105
|
+
if (isSelected) {
|
|
106
|
+
if ('secondary' === color) return 'foreground';
|
|
107
|
+
}
|
|
105
108
|
if ('solid' === variant) {
|
|
106
109
|
if (customColorConfig) return customColorConfig.text;
|
|
107
110
|
if ('contrast' === color) return 'bg-default';
|
|
@@ -111,7 +114,8 @@ const useStyles = (props)=>{
|
|
|
111
114
|
}, [
|
|
112
115
|
color,
|
|
113
116
|
variant,
|
|
114
|
-
buttonConfig?.color
|
|
117
|
+
buttonConfig?.color,
|
|
118
|
+
isSelected
|
|
115
119
|
]);
|
|
116
120
|
const textActualColor = useMemo(()=>getColor(textColor), [
|
|
117
121
|
textColor,
|
|
@@ -119,6 +123,9 @@ const useStyles = (props)=>{
|
|
|
119
123
|
]);
|
|
120
124
|
const backgroundColor = useMemo(()=>{
|
|
121
125
|
const customColorConfig = buttonConfig?.color?.[color];
|
|
126
|
+
if (isSelected) {
|
|
127
|
+
if ('secondary' === color && 'solid' === variant) return getColor('tertiary');
|
|
128
|
+
}
|
|
122
129
|
if ('solid' === variant) {
|
|
123
130
|
if (customColorConfig) return getColor(customColorConfig.background);
|
|
124
131
|
if ('contrast' === color) return getColor('foreground');
|
|
@@ -142,7 +149,8 @@ const useStyles = (props)=>{
|
|
|
142
149
|
color,
|
|
143
150
|
getColor,
|
|
144
151
|
variant,
|
|
145
|
-
buttonConfig?.color
|
|
152
|
+
buttonConfig?.color,
|
|
153
|
+
isSelected
|
|
146
154
|
]);
|
|
147
155
|
const borderColor = useMemo(()=>{
|
|
148
156
|
if ('bordered' === variant) {
|
|
@@ -27,6 +27,7 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
|
|
|
27
27
|
variant?: 'solid' | 'bordered' | 'flat' | 'text' | 'light';
|
|
28
28
|
radius?: UXRadius;
|
|
29
29
|
isDisabled?: boolean;
|
|
30
|
+
isSelected?: boolean;
|
|
30
31
|
isLoading?: boolean;
|
|
31
32
|
startContent?: React.ReactNode;
|
|
32
33
|
endContent?: React.ReactNode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@particle-network/ui-native",
|
|
3
|
-
"version": "0.4.2-beta.
|
|
3
|
+
"version": "0.4.2-beta.7",
|
|
4
4
|
"main": "./entry.js",
|
|
5
5
|
"react-native": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"react-native-paper": "^5.14.5",
|
|
45
45
|
"react-native-size-matters": "^0.4.2",
|
|
46
46
|
"react-native-toast-message": "^2.3.3",
|
|
47
|
-
"@particle-network/
|
|
48
|
-
"@particle-network/
|
|
47
|
+
"@particle-network/ui-shared": "0.3.2-beta.2",
|
|
48
|
+
"@particle-network/icons": "0.4.2-beta.5"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@babel/core": "^7.24.0",
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
"unfetch": "^4.2.0",
|
|
89
89
|
"vite": "^6.3.5",
|
|
90
90
|
"zustand": "^5.0.8",
|
|
91
|
-
"@particle-network/eslint-config": "0.3.0",
|
|
92
91
|
"@particle-network/icons": "0.4.2-beta.5",
|
|
92
|
+
"@particle-network/eslint-config": "0.3.0",
|
|
93
93
|
"@particle-network/lintstaged-config": "0.1.0"
|
|
94
94
|
},
|
|
95
95
|
"overrides": {
|