mg-library 1.0.662 → 1.0.664
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 +25 -26
- package/package.json +1 -1
package/components.js
CHANGED
|
@@ -69,37 +69,54 @@ export function MGButton({
|
|
|
69
69
|
disabled,
|
|
70
70
|
isLoading,
|
|
71
71
|
style,
|
|
72
|
-
textProps = {},
|
|
72
|
+
textProps = {},
|
|
73
|
+
size = 'lg',
|
|
74
|
+
py,
|
|
75
|
+
minHeight,
|
|
76
|
+
iconSpacing = '$2',
|
|
77
|
+
iconSize,
|
|
73
78
|
...rest
|
|
74
79
|
}) {
|
|
75
80
|
const effectiveDisabled = !!(isDisabled || disabled || isLoading);
|
|
76
81
|
const isSolid = variant === 'solid' || variant === 'filled';
|
|
77
|
-
const gsVariant = variant === 'ghost' ? 'link' : variant;
|
|
82
|
+
const gsVariant = variant === 'ghost' ? 'link' : variant;
|
|
78
83
|
const textColor = isSolid ? '$white' : `$${action}700`;
|
|
79
84
|
const iconColor = textColor;
|
|
80
85
|
const bgColor = isSolid ? `$${action}500` : 'transparent';
|
|
81
|
-
const borderColor =
|
|
86
|
+
const borderColor = `$${action}500`;
|
|
87
|
+
const SIZE_MAP = {
|
|
88
|
+
sm: { pyToken: '$2', icon: 16 },
|
|
89
|
+
md: { pyToken: '$3', icon: 18 },
|
|
90
|
+
lg: { pyToken: '$4', icon: 20 },
|
|
91
|
+
xl: { pyToken: '$5', icon: 22 },
|
|
92
|
+
};
|
|
93
|
+
const { pyToken, icon: defaultIconSize } = SIZE_MAP[size] || SIZE_MAP.lg;
|
|
94
|
+
const resolvedPy = py !== undefined ? py : pyToken;
|
|
95
|
+
const resolvedIconSize = iconSize ?? defaultIconSize;
|
|
82
96
|
return (
|
|
83
97
|
<Button
|
|
84
98
|
action={action}
|
|
85
99
|
variant={gsVariant}
|
|
86
100
|
isDisabled={effectiveDisabled}
|
|
87
101
|
onPress={callback}
|
|
88
|
-
py="$1"
|
|
89
102
|
bg={bgColor}
|
|
90
103
|
borderColor={borderColor}
|
|
104
|
+
size={size}
|
|
105
|
+
py={resolvedPy}
|
|
106
|
+
minHeight={minHeight}
|
|
91
107
|
style={[!effectiveDisabled && { opacity: 1 }, style]}
|
|
92
108
|
{...rest}
|
|
93
109
|
>
|
|
94
110
|
{icon ? (
|
|
95
111
|
<ButtonIcon
|
|
96
|
-
as={
|
|
97
|
-
asIcon={MaterialCommunityIcons}
|
|
112
|
+
as={MaterialCommunityIcons}
|
|
98
113
|
name={icon}
|
|
99
|
-
mr="$2"
|
|
100
114
|
color={iconColor}
|
|
115
|
+
mr={title ? iconSpacing : 0}
|
|
116
|
+
size={resolvedIconSize}
|
|
101
117
|
/>
|
|
102
118
|
) : null}
|
|
119
|
+
|
|
103
120
|
{title ? (
|
|
104
121
|
<ButtonText
|
|
105
122
|
color={textColor}
|
|
@@ -113,22 +130,4 @@ export function MGButton({
|
|
|
113
130
|
) : null}
|
|
114
131
|
</Button>
|
|
115
132
|
);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
/* export function MGButton(props) {
|
|
119
|
-
return (
|
|
120
|
-
<>
|
|
121
|
-
<NBButton py={4} colorScheme='primary'
|
|
122
|
-
leftIcon={
|
|
123
|
-
<NBIcon as={MaterialCommunityIcons} name={props.icon} size='lg' color='white' />
|
|
124
|
-
}
|
|
125
|
-
onPress={props.callback}>
|
|
126
|
-
{!mgFunctionsLib.isEmpty(props.title) &&
|
|
127
|
-
<MGText category="p1" color="white">
|
|
128
|
-
{props.title}
|
|
129
|
-
</MGText>
|
|
130
|
-
}
|
|
131
|
-
</NBButton>
|
|
132
|
-
</>
|
|
133
|
-
)
|
|
134
|
-
} */
|
|
133
|
+
}
|