@particle-network/ui-native 0.0.16 → 0.0.18
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/components/Text/text.js +1 -1
- package/dist/components/UXButton/button.js +9 -7
- package/dist/components/UXButton/button.styles.d.ts +3 -1
- package/dist/components/UXButton/button.styles.js +15 -7
- package/dist/components/UXSpinner/SpinnerIcon.d.ts +7 -0
- package/dist/components/UXSpinner/SpinnerIcon.js +37 -0
- package/dist/components/UXSpinner/index.d.ts +2 -0
- package/dist/components/UXSpinner/index.js +2 -0
- package/dist/components/UXSpinner/pathData.d.ts +4 -0
- package/dist/components/UXSpinner/pathData.js +51 -0
- package/dist/components/UXSpinner/spinner.d.ts +16 -0
- package/dist/components/UXSpinner/spinner.js +36 -0
- package/dist/components/UXTabs/styles.d.ts +3 -1
- package/dist/components/UXTabs/styles.js +11 -7
- package/dist/components/UXTabs/tab.js +0 -3
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/layout/Box/box.js +1 -1
- package/dist/components/layout/Center.js +1 -1
- package/dist/components/layout/Circle.js +1 -1
- package/dist/components/layout/Flex/flex.js +1 -1
- package/dist/components/layout/HStack.js +1 -1
- package/dist/components/layout/Square.js +1 -1
- package/dist/components/layout/VStack.js +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useMemo } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { Keyboard } from "react-native";
|
|
4
4
|
import { triggerHapticFeedback } from "../../utils/triggerHapticFeedback.js";
|
|
5
5
|
import { Text } from "../Text/index.js";
|
|
6
6
|
import { UXPressable } from "../UXPressable/index.js";
|
|
7
|
+
import { UXSpinner } from "../UXSpinner/index.js";
|
|
7
8
|
import { useStyles } from "./button.styles.js";
|
|
8
9
|
const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
9
10
|
const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, width, w, h, isIconOnly, children, ...restProps } = props;
|
|
@@ -12,7 +13,7 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
12
13
|
triggerHapticFeedback();
|
|
13
14
|
onPress?.(e);
|
|
14
15
|
};
|
|
15
|
-
const { styles, textColor } = useStyles({
|
|
16
|
+
const { styles, textColor, spinnerSize } = useStyles({
|
|
16
17
|
size,
|
|
17
18
|
radius,
|
|
18
19
|
color,
|
|
@@ -36,15 +37,15 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
36
37
|
styles.title
|
|
37
38
|
]);
|
|
38
39
|
const renderChildren = useMemo(()=>{
|
|
39
|
-
if (isLoading && isIconOnly) return /*#__PURE__*/ jsx(
|
|
40
|
+
if (isLoading && isIconOnly) return /*#__PURE__*/ jsx(UXSpinner, {
|
|
40
41
|
color: textColor,
|
|
41
|
-
size:
|
|
42
|
+
size: spinnerSize
|
|
42
43
|
});
|
|
43
44
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
44
45
|
children: [
|
|
45
|
-
isLoading ? /*#__PURE__*/ jsx(
|
|
46
|
+
isLoading ? /*#__PURE__*/ jsx(UXSpinner, {
|
|
46
47
|
color: textColor,
|
|
47
|
-
size:
|
|
48
|
+
size: spinnerSize
|
|
48
49
|
}) : null,
|
|
49
50
|
startContent,
|
|
50
51
|
content,
|
|
@@ -57,7 +58,8 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
57
58
|
textColor,
|
|
58
59
|
startContent,
|
|
59
60
|
endContent,
|
|
60
|
-
isIconOnly
|
|
61
|
+
isIconOnly,
|
|
62
|
+
spinnerSize
|
|
61
63
|
]);
|
|
62
64
|
return /*#__PURE__*/ jsx(UXPressable, {
|
|
63
65
|
ref: ref,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { UXColor } from '@particle-network/ui-shared';
|
|
1
2
|
import type { UXButtonProps } from './button.types';
|
|
2
3
|
export declare const useStyles: (props: UXButtonProps) => {
|
|
3
4
|
styles: {
|
|
@@ -30,5 +31,6 @@ export declare const useStyles: (props: UXButtonProps) => {
|
|
|
30
31
|
color: string | undefined;
|
|
31
32
|
};
|
|
32
33
|
};
|
|
33
|
-
textColor:
|
|
34
|
+
textColor: UXColor;
|
|
35
|
+
spinnerSize: number;
|
|
34
36
|
};
|
|
@@ -66,6 +66,10 @@ const useStyles = (props)=>{
|
|
|
66
66
|
size,
|
|
67
67
|
fontSizeMap
|
|
68
68
|
]);
|
|
69
|
+
const spinnerSize = useMemo(()=>fontSize + ms(4), [
|
|
70
|
+
fontSize,
|
|
71
|
+
ms
|
|
72
|
+
]);
|
|
69
73
|
const borderRadius = useMemo(()=>getRadius(radius ?? radiusMap[size]), [
|
|
70
74
|
radius,
|
|
71
75
|
size,
|
|
@@ -82,19 +86,22 @@ const useStyles = (props)=>{
|
|
|
82
86
|
]);
|
|
83
87
|
const textColor = useMemo(()=>{
|
|
84
88
|
const customColorConfig = buttonConfig?.color?.[color];
|
|
85
|
-
if (customColorConfig) return
|
|
86
|
-
if ('contrast' === color) return
|
|
89
|
+
if (customColorConfig) return customColorConfig.text;
|
|
90
|
+
if ('contrast' === color) return 'bg-default';
|
|
87
91
|
if ('solid' === variant && ![
|
|
88
92
|
'default',
|
|
89
93
|
'secondary'
|
|
90
|
-
].includes(color)) return
|
|
91
|
-
return
|
|
94
|
+
].includes(color)) return 'white';
|
|
95
|
+
return color;
|
|
92
96
|
}, [
|
|
93
97
|
color,
|
|
94
|
-
getColor,
|
|
95
98
|
variant,
|
|
96
99
|
buttonConfig?.color
|
|
97
100
|
]);
|
|
101
|
+
const textActualColor = useMemo(()=>getColor(textColor), [
|
|
102
|
+
textColor,
|
|
103
|
+
getColor
|
|
104
|
+
]);
|
|
98
105
|
const backgroundColor = useMemo(()=>{
|
|
99
106
|
const customColorConfig = buttonConfig?.color?.[color];
|
|
100
107
|
if ('solid' === variant) {
|
|
@@ -172,12 +179,13 @@ const useStyles = (props)=>{
|
|
|
172
179
|
fontWeight,
|
|
173
180
|
fontSize,
|
|
174
181
|
lineHeight: fontSize + ms(4),
|
|
175
|
-
color:
|
|
182
|
+
color: textActualColor
|
|
176
183
|
}
|
|
177
184
|
});
|
|
178
185
|
return {
|
|
179
186
|
styles,
|
|
180
|
-
textColor
|
|
187
|
+
textColor,
|
|
188
|
+
spinnerSize
|
|
181
189
|
};
|
|
182
190
|
};
|
|
183
191
|
export { useStyles };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import react_native_svg, { Path } from "react-native-svg";
|
|
4
|
+
import { pathsData } from "./pathData.js";
|
|
5
|
+
const SpinnerIcon = ({ currentIndex, ...props })=>{
|
|
6
|
+
const opacityValues = [
|
|
7
|
+
1,
|
|
8
|
+
0.9,
|
|
9
|
+
0.85,
|
|
10
|
+
0.8,
|
|
11
|
+
0.75,
|
|
12
|
+
0.7,
|
|
13
|
+
0.65,
|
|
14
|
+
0.6,
|
|
15
|
+
0.5,
|
|
16
|
+
0.4,
|
|
17
|
+
0.3,
|
|
18
|
+
0.2
|
|
19
|
+
];
|
|
20
|
+
const getOpacity = (index)=>{
|
|
21
|
+
const distance = (currentIndex - index + 12) % 12;
|
|
22
|
+
return opacityValues[distance];
|
|
23
|
+
};
|
|
24
|
+
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
25
|
+
width: 18,
|
|
26
|
+
height: 18,
|
|
27
|
+
viewBox: "0 0 18 18",
|
|
28
|
+
fill: "none",
|
|
29
|
+
...props,
|
|
30
|
+
children: pathsData.map((pathInfo, index)=>/*#__PURE__*/ jsx(Path, {
|
|
31
|
+
d: pathInfo.d,
|
|
32
|
+
fill: "currentColor",
|
|
33
|
+
opacity: getOpacity(index)
|
|
34
|
+
}, index))
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
export { SpinnerIcon };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
const pathsData = [
|
|
2
|
+
{
|
|
3
|
+
d: 'M9.00027 1.08008C9.19123 1.08008 9.37436 1.15594 9.50939 1.29096C9.64442 1.42599 9.72027 1.60912 9.72027 1.80008V3.96008C9.72027 4.15103 9.64442 4.33417 9.50939 4.46919C9.37436 4.60422 9.19123 4.68008 9.00027 4.68008C8.80932 4.68008 8.62618 4.60422 8.49116 4.46919C8.35613 4.33417 8.28027 4.15103 8.28027 3.96008V1.80008C8.28027 1.60912 8.35613 1.42599 8.49116 1.29096C8.62618 1.15594 8.80932 1.08008 9.00027 1.08008Z',
|
|
4
|
+
opacity: 1
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
d: 'M12.9593 2.14138C13.1246 2.23686 13.2453 2.39412 13.2947 2.57857C13.3441 2.76301 13.3183 2.95953 13.2228 3.1249L12.1428 4.99582C12.0959 5.07837 12.0331 5.15081 11.958 5.20899C11.883 5.26717 11.7972 5.30993 11.7055 5.3348C11.6139 5.35968 11.5182 5.36619 11.4241 5.35395C11.3299 5.34171 11.2391 5.31097 11.1569 5.26349C11.0746 5.21601 11.0026 5.15274 10.9449 5.07731C10.8873 5.00188 10.8451 4.91579 10.8208 4.82399C10.7965 4.73219 10.7906 4.6365 10.8035 4.54242C10.8164 4.44834 10.8477 4.35774 10.8957 4.27582L11.9757 2.4049C12.0712 2.23954 12.2285 2.11887 12.4129 2.06945C12.5974 2.02004 12.7939 2.04591 12.9593 2.14138Z',
|
|
8
|
+
opacity: 0.9
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
d: 'M15.8587 5.03967C15.9542 5.20504 15.9801 5.40156 15.9307 5.586C15.8813 5.77045 15.7606 5.92771 15.5952 6.02319L13.7243 7.10319C13.559 7.19716 13.3633 7.22194 13.1798 7.17213C12.9963 7.12231 12.84 7.00194 12.7449 6.83729C12.6498 6.67263 12.6238 6.47706 12.6724 6.29325C12.721 6.10943 12.8403 5.9523 13.0043 5.85615L14.8752 4.77615C15.0406 4.68067 15.2371 4.6548 15.4216 4.70422C15.606 4.75364 15.7633 4.8743 15.8587 5.03967Z',
|
|
12
|
+
opacity: 0.85
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
d: 'M16.9203 8.9993C16.9203 9.09385 16.9017 9.18747 16.8655 9.27483C16.8293 9.36218 16.7763 9.44156 16.7094 9.50841C16.6426 9.57527 16.5632 9.62831 16.4758 9.66449C16.3885 9.70067 16.2949 9.7193 16.2003 9.7193H14.0403C13.8494 9.7193 13.6662 9.64344 13.5312 9.50841C13.3962 9.37339 13.3203 9.19025 13.3203 8.9993C13.3203 8.80834 13.3962 8.62521 13.5312 8.49018C13.6662 8.35515 13.8494 8.2793 14.0403 8.2793H16.2003C16.2949 8.2793 16.3885 8.29792 16.4758 8.3341C16.5632 8.37029 16.6426 8.42332 16.7094 8.49018C16.7763 8.55704 16.8293 8.63641 16.8655 8.72376C16.9017 8.81112 16.9203 8.90474 16.9203 8.9993Z',
|
|
16
|
+
opacity: 0.8
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
d: 'M15.8592 12.9612C15.7637 13.1266 15.6065 13.2472 15.422 13.2967C15.2376 13.3461 15.041 13.3202 14.8757 13.2247L13.0048 12.1447C12.9222 12.0978 12.8498 12.035 12.7916 11.96C12.7334 11.8849 12.6907 11.7991 12.6658 11.7075C12.6409 11.6158 12.6344 11.5202 12.6466 11.426C12.6589 11.3319 12.6896 11.2411 12.7371 11.1588C12.7846 11.0766 12.8478 11.0046 12.9233 10.9469C12.9987 10.8892 13.0848 10.847 13.1766 10.8227C13.2684 10.7985 13.3641 10.7926 13.4582 10.8055C13.5522 10.8183 13.6428 10.8497 13.7248 10.8977L15.5957 11.9777C15.761 12.0732 15.8817 12.2304 15.9311 12.4149C15.9805 12.5993 15.9547 12.7958 15.8592 12.9612Z',
|
|
20
|
+
opacity: 0.75
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
d: 'M12.9603 15.8587C12.795 15.9542 12.5985 15.9801 12.414 15.9307C12.2296 15.8813 12.0723 15.7606 11.9768 15.5952L10.8968 13.7243C10.8029 13.559 10.7781 13.3633 10.8279 13.1798C10.8777 12.9963 10.9981 12.84 11.1627 12.7449C11.3274 12.6498 11.523 12.6238 11.7068 12.6724C11.8906 12.721 12.0477 12.8403 12.1439 13.0043L13.2239 14.8752C13.3193 15.0406 13.3452 15.2371 13.2958 15.4216C13.2464 15.606 13.1257 15.7633 12.9603 15.8587Z',
|
|
24
|
+
opacity: 0.7
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
d: 'M9.00027 16.9203C8.90572 16.9203 8.8121 16.9017 8.72474 16.8655C8.63739 16.8293 8.55801 16.7763 8.49116 16.7094C8.4243 16.6426 8.37126 16.5632 8.33508 16.4758C8.2989 16.3885 8.28027 16.2949 8.28027 16.2003V14.0403C8.28027 13.8494 8.35613 13.6662 8.49116 13.5312C8.62618 13.3962 8.80932 13.3203 9.00027 13.3203C9.19123 13.3203 9.37436 13.3962 9.50939 13.5312C9.64442 13.6662 9.72027 13.8494 9.72027 14.0403V16.2003C9.72027 16.2949 9.70165 16.3885 9.66547 16.4758C9.62928 16.5632 9.57625 16.6426 9.50939 16.7094C9.44253 16.7763 9.36316 16.8293 9.27581 16.8655C9.18845 16.9017 9.09483 16.9203 9.00027 16.9203Z',
|
|
28
|
+
opacity: 0.65
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
d: 'M5.03967 15.8592C4.8743 15.7637 4.75364 15.6065 4.70422 15.422C4.6548 15.2376 4.68067 15.041 4.77615 14.8757L5.85615 13.0048C5.90308 12.9222 5.96587 12.8498 6.04092 12.7916C6.11596 12.7334 6.20177 12.6907 6.29341 12.6658C6.38505 12.6409 6.4807 12.6344 6.57486 12.6466C6.66902 12.6589 6.75983 12.6896 6.84206 12.7371C6.9243 12.7846 6.99632 12.8478 7.054 12.9233C7.11168 12.9987 7.15387 13.0848 7.17814 13.1766C7.20241 13.2684 7.20828 13.3641 7.19542 13.4582C7.18256 13.5522 7.15121 13.6428 7.10319 13.7248L6.02319 15.5957C5.92771 15.761 5.77045 15.8817 5.586 15.9311C5.40156 15.9805 5.20504 15.9547 5.03967 15.8592Z',
|
|
32
|
+
opacity: 0.6
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
d: 'M2.14041 12.9584C2.04493 12.793 2.01906 12.5965 2.06848 12.4121C2.1179 12.2276 2.23856 12.0704 2.40393 11.9749L4.27485 10.8949C4.44013 10.8009 4.63587 10.7761 4.81936 10.8259C5.00284 10.8758 5.15918 10.9961 5.25424 11.1608C5.34931 11.3254 5.37539 11.521 5.32679 11.7048C5.2782 11.8886 5.15887 12.0458 4.99485 12.1419L3.12393 13.2219C2.95856 13.3174 2.76203 13.3433 2.57759 13.2938C2.39315 13.2444 2.23589 13.1238 2.14041 12.9584Z',
|
|
36
|
+
opacity: 0.5
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
d: 'M1.08017 8.9993C1.08017 8.80834 1.15603 8.62521 1.29105 8.49018C1.42608 8.35515 1.60921 8.2793 1.80017 8.2793H3.96017C4.15113 8.2793 4.33426 8.35515 4.46929 8.49018C4.60431 8.62521 4.68017 8.80834 4.68017 8.9993C4.68017 9.19025 4.60431 9.37339 4.46929 9.50841C4.33426 9.64344 4.15113 9.7193 3.96017 9.7193H1.80017C1.60921 9.7193 1.42608 9.64344 1.29105 9.50841C1.15603 9.37339 1.08017 9.19025 1.08017 8.9993Z',
|
|
40
|
+
opacity: 0.4
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
d: 'M2.14041 5.03967C2.23589 4.8743 2.39315 4.75364 2.57759 4.70422C2.76203 4.6548 2.95856 4.68067 3.12393 4.77615L4.99485 5.85615C5.07739 5.90308 5.14984 5.96587 5.20801 6.04092C5.26619 6.11596 5.30895 6.20177 5.33383 6.29341C5.35871 6.38505 5.36521 6.4807 5.35298 6.57486C5.34074 6.66902 5.30999 6.75983 5.26252 6.84206C5.21504 6.9243 5.15176 6.99632 5.07633 7.054C5.00091 7.11168 4.91481 7.15387 4.82301 7.17814C4.73122 7.20241 4.63552 7.20828 4.54144 7.19542C4.44736 7.18256 4.35676 7.15121 4.27485 7.10319L2.40393 6.02319C2.23856 5.92771 2.1179 5.77045 2.06848 5.586C2.01906 5.40156 2.04493 5.20504 2.14041 5.03967Z',
|
|
44
|
+
opacity: 0.3
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
d: 'M5.03967 2.14138C5.20504 2.04591 5.40156 2.02004 5.586 2.06945C5.77045 2.11887 5.92771 2.23954 6.02319 2.4049L7.10319 4.27582C7.19716 4.4411 7.22194 4.63685 7.17213 4.82033C7.12231 5.00382 7.00194 5.16015 6.83729 5.25522C6.67263 5.35029 6.47706 5.37637 6.29325 5.32777C6.10943 5.27917 5.9523 5.15984 5.85615 4.99582L4.77615 3.1249C4.68067 2.95953 4.6548 2.76301 4.70422 2.57857C4.75364 2.39412 4.8743 2.23686 5.03967 2.14138Z',
|
|
48
|
+
opacity: 0.2
|
|
49
|
+
}
|
|
50
|
+
];
|
|
51
|
+
export { pathsData };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { UXColor } from '@particle-network/ui-shared';
|
|
3
|
+
import { type SquareProps } from '../layout/Square';
|
|
4
|
+
export interface UXSpinnerProps extends SquareProps {
|
|
5
|
+
/**
|
|
6
|
+
* 颜色
|
|
7
|
+
*/
|
|
8
|
+
color?: UXColor;
|
|
9
|
+
/**
|
|
10
|
+
* 动画持续时间(毫秒)
|
|
11
|
+
* @default 1000
|
|
12
|
+
*/
|
|
13
|
+
duration?: number;
|
|
14
|
+
}
|
|
15
|
+
declare const UXSpinner: React.FC<UXSpinnerProps>;
|
|
16
|
+
export default UXSpinner;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import { useColors } from "../../hooks/index.js";
|
|
4
|
+
import { Square } from "../layout/Square.js";
|
|
5
|
+
import { SpinnerIcon } from "./SpinnerIcon.js";
|
|
6
|
+
const UXSpinner = ({ size = 18, color = 'primary', duration = 1000, ...restProps })=>{
|
|
7
|
+
const { getColor } = useColors();
|
|
8
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
9
|
+
const animationRef = useRef(null);
|
|
10
|
+
const actualColor = getColor(color);
|
|
11
|
+
useEffect(()=>{
|
|
12
|
+
const stepDuration = duration / 12;
|
|
13
|
+
const animate = ()=>{
|
|
14
|
+
setCurrentIndex((prevIndex)=>(prevIndex + 1) % 12);
|
|
15
|
+
animationRef.current = setTimeout(animate, stepDuration);
|
|
16
|
+
};
|
|
17
|
+
animationRef.current = setTimeout(animate, stepDuration);
|
|
18
|
+
return ()=>{
|
|
19
|
+
if (animationRef.current) clearTimeout(animationRef.current);
|
|
20
|
+
};
|
|
21
|
+
}, [
|
|
22
|
+
duration
|
|
23
|
+
]);
|
|
24
|
+
return /*#__PURE__*/ jsx(Square, {
|
|
25
|
+
size: size,
|
|
26
|
+
...restProps,
|
|
27
|
+
children: /*#__PURE__*/ jsx(SpinnerIcon, {
|
|
28
|
+
width: size,
|
|
29
|
+
height: size,
|
|
30
|
+
color: actualColor,
|
|
31
|
+
currentIndex: currentIndex
|
|
32
|
+
})
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
const spinner = UXSpinner;
|
|
36
|
+
export { spinner as default };
|
|
@@ -8,15 +8,17 @@ export declare const useStyles: (props: Partial<UXTabsProps> & {
|
|
|
8
8
|
flex: number;
|
|
9
9
|
justifyContent: "flex-start" | "space-between";
|
|
10
10
|
borderRadius: number | undefined;
|
|
11
|
-
height: number
|
|
11
|
+
height: number;
|
|
12
12
|
padding: number;
|
|
13
13
|
opacity: number;
|
|
14
14
|
};
|
|
15
15
|
tab: {
|
|
16
|
+
flexDirection: "column";
|
|
16
17
|
flexGrow: number;
|
|
17
18
|
height: "100%";
|
|
18
19
|
alignItems: "center";
|
|
19
20
|
justifyContent: "center";
|
|
21
|
+
gap: number;
|
|
20
22
|
paddingHorizontal: number;
|
|
21
23
|
borderRadius: number | undefined;
|
|
22
24
|
backgroundColor: string | undefined;
|
|
@@ -8,8 +8,14 @@ const useStyles = (props)=>{
|
|
|
8
8
|
const { getColor } = useColors();
|
|
9
9
|
const { getRadius } = useRadius();
|
|
10
10
|
const { ms } = useMs();
|
|
11
|
+
const fontSize = useMemo(()=>ms(tabsConfig.fontSize[size]), [
|
|
12
|
+
size,
|
|
13
|
+
ms,
|
|
14
|
+
tabsConfig.fontSize
|
|
15
|
+
]);
|
|
11
16
|
const height = useMemo(()=>{
|
|
12
|
-
if ('text' === variant
|
|
17
|
+
if ('text' === variant) return fontSize + ms(4);
|
|
18
|
+
if ('underlined' === variant) return fontSize + ms(4) + ms(2) + fontSize / 2;
|
|
13
19
|
if ('solid' === variant) switch(size){
|
|
14
20
|
case 'sm':
|
|
15
21
|
return ms(24);
|
|
@@ -27,14 +33,10 @@ const useStyles = (props)=>{
|
|
|
27
33
|
return ms(30);
|
|
28
34
|
}
|
|
29
35
|
}, [
|
|
30
|
-
size,
|
|
31
36
|
variant,
|
|
32
|
-
ms
|
|
33
|
-
]);
|
|
34
|
-
const fontSize = useMemo(()=>ms(tabsConfig.fontSize[size]), [
|
|
35
37
|
size,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
fontSize,
|
|
39
|
+
ms
|
|
38
40
|
]);
|
|
39
41
|
const paddingHorizontal = useMemo(()=>{
|
|
40
42
|
if ('text' === variant || 'underlined' === variant) return 0;
|
|
@@ -151,6 +153,7 @@ const useStyles = (props)=>{
|
|
|
151
153
|
opacity: isDisabled ? disabledOpacity : 1
|
|
152
154
|
},
|
|
153
155
|
tab: {
|
|
156
|
+
flexDirection: 'column',
|
|
154
157
|
flexGrow: [
|
|
155
158
|
'text',
|
|
156
159
|
'light',
|
|
@@ -159,6 +162,7 @@ const useStyles = (props)=>{
|
|
|
159
162
|
height: '100%',
|
|
160
163
|
alignItems: 'center',
|
|
161
164
|
justifyContent: 'center',
|
|
165
|
+
gap: fontSize / 2,
|
|
162
166
|
paddingHorizontal,
|
|
163
167
|
borderRadius: tabBorderRadius,
|
|
164
168
|
backgroundColor: tabBg
|
|
@@ -27,9 +27,6 @@ const UXTab = ({ tabKey = '', title, icon, style, notification })=>{
|
|
|
27
27
|
return /*#__PURE__*/ jsxs(UXTouchableOpacity, {
|
|
28
28
|
activeOpacity: 0.7,
|
|
29
29
|
disabled: isDisabled,
|
|
30
|
-
gap: 8,
|
|
31
|
-
direction: "column",
|
|
32
|
-
items: "center",
|
|
33
30
|
style: [
|
|
34
31
|
styles.tab,
|
|
35
32
|
style
|
package/dist/components/index.js
CHANGED
|
@@ -17,6 +17,7 @@ export * from "./UXListBox/index.js";
|
|
|
17
17
|
export * from "./UXModal/index.js";
|
|
18
18
|
export * from "./UXPressable/index.js";
|
|
19
19
|
export * from "./UXRadio/index.js";
|
|
20
|
+
export * from "./UXSpinner/index.js";
|
|
20
21
|
export * from "./UXSwitch/index.js";
|
|
21
22
|
export * from "./UXTabs/index.js";
|
|
22
23
|
export * from "./UXTooltip/index.js";
|