mg-library 1.0.700 → 1.0.702
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/components.js +31 -51
- package/package.json +1 -1
package/components.js
CHANGED
|
@@ -29,38 +29,6 @@ export function MGText({ category = 'p1', style, children, ...props }) {
|
|
|
29
29
|
);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
/* export function MGCard({ children, header = null, footer = null, style = {}, ...props }) {
|
|
33
|
-
return (
|
|
34
|
-
<Box
|
|
35
|
-
borderWidth={1}
|
|
36
|
-
rounded="$md"
|
|
37
|
-
borderColor="$borderLight"
|
|
38
|
-
bg="$white"
|
|
39
|
-
shadow="$2"
|
|
40
|
-
overflow="hidden"
|
|
41
|
-
mb="$4"
|
|
42
|
-
mx="$2"
|
|
43
|
-
style={style}
|
|
44
|
-
{...props}
|
|
45
|
-
>
|
|
46
|
-
{header != null && (
|
|
47
|
-
<>
|
|
48
|
-
<Box p="$4">{header}</Box>
|
|
49
|
-
<MGDivider />
|
|
50
|
-
</>
|
|
51
|
-
)}
|
|
52
|
-
<Box p="$4">{children}</Box>
|
|
53
|
-
{footer != null && (
|
|
54
|
-
<>
|
|
55
|
-
<MGDivider />
|
|
56
|
-
<Box p="$4">{footer}</Box>
|
|
57
|
-
</>
|
|
58
|
-
)}
|
|
59
|
-
</Box>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
*/
|
|
63
|
-
|
|
64
32
|
export function MGCard({ children, header = null, footer = null, style = {}, ...props }) {
|
|
65
33
|
return (
|
|
66
34
|
<Box
|
|
@@ -68,12 +36,20 @@ export function MGCard({ children, header = null, footer = null, style = {}, ...
|
|
|
68
36
|
rounded="$md"
|
|
69
37
|
borderColor="$gray300"
|
|
70
38
|
bg="$white"
|
|
71
|
-
shadow="$
|
|
72
|
-
|
|
39
|
+
shadow="$5"
|
|
40
|
+
style={[
|
|
41
|
+
{
|
|
42
|
+
shadowColor: "#000",
|
|
43
|
+
shadowOffset: { width: 0, height: 4 },
|
|
44
|
+
shadowOpacity: 0.25,
|
|
45
|
+
shadowRadius: 6,
|
|
46
|
+
elevation: Platform.OS === "android" ? 8 : 0,
|
|
47
|
+
},
|
|
48
|
+
style,
|
|
49
|
+
]}
|
|
73
50
|
overflow="visible"
|
|
74
51
|
mb="$4"
|
|
75
52
|
mx="$2"
|
|
76
|
-
style={style}
|
|
77
53
|
{...props}
|
|
78
54
|
>
|
|
79
55
|
<Box rounded="$md" overflow="hidden">
|
|
@@ -99,38 +75,39 @@ export function MGButton({
|
|
|
99
75
|
title,
|
|
100
76
|
icon,
|
|
101
77
|
callback,
|
|
102
|
-
variant =
|
|
103
|
-
action =
|
|
78
|
+
variant = "solid",
|
|
79
|
+
action = "primary",
|
|
104
80
|
isDisabled,
|
|
105
81
|
disabled,
|
|
106
82
|
isLoading,
|
|
107
83
|
style,
|
|
108
84
|
textProps = {},
|
|
109
|
-
size =
|
|
85
|
+
size = "lg",
|
|
110
86
|
py,
|
|
111
87
|
minHeight,
|
|
112
|
-
iconSpacing =
|
|
88
|
+
iconSpacing = "$2",
|
|
113
89
|
iconSize,
|
|
114
90
|
iconColor,
|
|
115
91
|
...rest
|
|
116
92
|
}) {
|
|
117
93
|
const effectiveDisabled = !!(isDisabled || disabled || isLoading);
|
|
118
|
-
const isSolid = variant ===
|
|
119
|
-
const gsVariant = variant ===
|
|
120
|
-
const textColor = isSolid ?
|
|
121
|
-
if (iconColor === undefined)
|
|
122
|
-
|
|
123
|
-
const
|
|
124
|
-
|
|
94
|
+
const isSolid = variant === "solid" || variant === "filled";
|
|
95
|
+
const gsVariant = variant === "ghost" ? "link" : variant;
|
|
96
|
+
const textColor = isSolid ? "$white" : "$${action}700";
|
|
97
|
+
if (iconColor === undefined) iconColor = textColor;
|
|
98
|
+
const bgColor = isSolid ? "$${action}500" : "transparent";
|
|
99
|
+
const borderColor = `$${action}500`;
|
|
100
|
+
|
|
125
101
|
const SIZE_MAP = {
|
|
126
|
-
sm: { pyToken:
|
|
127
|
-
md: { pyToken:
|
|
128
|
-
lg: { pyToken:
|
|
129
|
-
xl: { pyToken:
|
|
102
|
+
sm: { pyToken: "$2", icon: 16 },
|
|
103
|
+
md: { pyToken: "$3", icon: 18 },
|
|
104
|
+
lg: { pyToken: "$4", icon: 20 },
|
|
105
|
+
xl: { pyToken: "$5", icon: 22 },
|
|
130
106
|
};
|
|
131
107
|
const { pyToken, icon: defaultIconSize } = SIZE_MAP[size] || SIZE_MAP.lg;
|
|
132
108
|
const resolvedPy = py !== undefined ? py : pyToken;
|
|
133
109
|
const resolvedIconSize = iconSize ?? defaultIconSize;
|
|
110
|
+
|
|
134
111
|
return (
|
|
135
112
|
<Button
|
|
136
113
|
action={action}
|
|
@@ -142,6 +119,10 @@ export function MGButton({
|
|
|
142
119
|
size={size}
|
|
143
120
|
minHeight={minHeight}
|
|
144
121
|
style={[!effectiveDisabled && { opacity: 1 }, style]}
|
|
122
|
+
_pressed={{
|
|
123
|
+
bg: isSolid ? "$${action}600" : "$gray100",
|
|
124
|
+
opacity: 0.9,
|
|
125
|
+
}}
|
|
145
126
|
{...rest}
|
|
146
127
|
>
|
|
147
128
|
{icon ? (
|
|
@@ -153,7 +134,6 @@ export function MGButton({
|
|
|
153
134
|
size={resolvedIconSize}
|
|
154
135
|
/>
|
|
155
136
|
) : null}
|
|
156
|
-
|
|
157
137
|
{title ? (
|
|
158
138
|
<ButtonText
|
|
159
139
|
color={textColor}
|