@alveole/components 0.38.0 → 0.38.2
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const ALVEOLE_COMPONENTS_VERSION: "0.38.
|
|
1
|
+
export declare const ALVEOLE_COMPONENTS_VERSION: "0.38.2";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const ALVEOLE_COMPONENTS_VERSION = "0.38.
|
|
1
|
+
export const ALVEOLE_COMPONENTS_VERSION = "0.38.2";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAgC,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClE,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAhBV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM;gBACrD,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;eAChB,OAAO;qBACD,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;aACjB,OAAO;gBACJ,OAAO;8BA6OnB,CAAC"}
|
package/dist/ui/Button/Button.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { ActivityIndicator,
|
|
3
|
+
import { ActivityIndicator, Pressable } from 'react-native';
|
|
4
4
|
import { Box, Typography } from '../../core';
|
|
5
5
|
import { LucideIcon } from '../LucideIcon';
|
|
6
6
|
import { useStyles } from './Button.styles';
|
|
@@ -76,10 +76,11 @@ export const Button = React.forwardRef(function Button(props, ref) {
|
|
|
76
76
|
return {
|
|
77
77
|
...applicableStyles,
|
|
78
78
|
...containerSize,
|
|
79
|
-
...(fullWidth ? { width: '100%' } : {}),
|
|
80
79
|
...(noPadding ? noPaddingStyle : {}),
|
|
81
|
-
...(borderNone ? { borderRadius: 0 } : {}),
|
|
82
80
|
...(leftAlign ? { justifyContent: 'left' } : {}),
|
|
81
|
+
borderWidth: 0,
|
|
82
|
+
borderColor: undefined,
|
|
83
|
+
borderStyle: undefined,
|
|
83
84
|
};
|
|
84
85
|
};
|
|
85
86
|
const buttonContainerHoverStyle = () => {
|
|
@@ -184,19 +185,49 @@ export const Button = React.forwardRef(function Button(props, ref) {
|
|
|
184
185
|
}
|
|
185
186
|
return { size: iconSize };
|
|
186
187
|
};
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
...(Platform.OS === 'ios' && variant === 'secondary'
|
|
188
|
+
const getPressableStyle = (state) => {
|
|
189
|
+
const sizeRadii = size === 'xs' || size === 'sm'
|
|
190
190
|
? {
|
|
191
|
-
|
|
192
|
-
|
|
191
|
+
borderTopLeftRadius: styles.xsContainer.borderTopLeftRadius,
|
|
192
|
+
borderBottomLeftRadius: styles.xsContainer.borderBottomLeftRadius,
|
|
193
|
+
borderTopRightRadius: styles.xsContainer.borderTopRightRadius,
|
|
194
|
+
borderBottomRightRadius: styles.xsContainer.borderBottomRightRadius,
|
|
195
|
+
}
|
|
196
|
+
: {
|
|
193
197
|
borderTopLeftRadius: styles.container.borderTopLeftRadius,
|
|
194
198
|
borderBottomLeftRadius: styles.container.borderBottomLeftRadius,
|
|
195
199
|
borderTopRightRadius: styles.container.borderTopRightRadius,
|
|
196
200
|
borderBottomRightRadius: styles.container.borderBottomRightRadius,
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
|
|
201
|
+
};
|
|
202
|
+
const radiusStyle = borderNone
|
|
203
|
+
? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 0, borderBottomRightRadius: 0 }
|
|
204
|
+
: sizeRadii;
|
|
205
|
+
let borderProps = {};
|
|
206
|
+
if (selected) {
|
|
207
|
+
borderProps = { borderWidth: 1, borderStyle: 'solid', borderColor: styles.selectedContainer.borderColor };
|
|
208
|
+
}
|
|
209
|
+
else if (variant === 'secondary') {
|
|
210
|
+
const borderColor = disabled
|
|
211
|
+
? styles.secondaryContainerDisabled.borderColor
|
|
212
|
+
: state.hovered
|
|
213
|
+
? styles.secondaryContainerHover.borderColor
|
|
214
|
+
: styles.secondaryContainer.borderColor;
|
|
215
|
+
borderProps = { borderWidth: disabled ? 0 : 1, borderStyle: 'solid', borderColor };
|
|
216
|
+
}
|
|
217
|
+
else if (variant === 'danger') {
|
|
218
|
+
const borderColor = disabled
|
|
219
|
+
? styles.dangerContainerDisabled.borderColor
|
|
220
|
+
: state.hovered
|
|
221
|
+
? styles.dangerContainerHover.borderColor
|
|
222
|
+
: styles.dangerContainer.borderColor;
|
|
223
|
+
borderProps = { borderWidth: disabled ? 0 : 1, borderStyle: 'solid', borderColor };
|
|
224
|
+
}
|
|
225
|
+
return {
|
|
226
|
+
...radiusStyle,
|
|
227
|
+
...borderProps,
|
|
228
|
+
alignSelf: fullWidth ? 'auto' : 'flex-start',
|
|
229
|
+
...(fullWidth ? { width: '100%' } : {}),
|
|
230
|
+
};
|
|
200
231
|
};
|
|
201
|
-
return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...
|
|
232
|
+
return (_jsx(Pressable, { ref: ref, disabled: disabled, accessibilityRole: "button", ...(type === 'submit' ? { 'aria-selected': true } : {}), ...buttonProps, style: (state) => getPressableStyle(state), children: (state) => (_jsxs(Box, { style: [buttonContainerStyle({ pressed: state.pressed }), style], hoverStyle: { ...buttonContainerHoverStyle(), ...hoverStyle }, ...containerProps, children: [startIcon && _jsx(LucideIcon, { name: startIcon, ...iconStyle({ hovered: !!state.hovered }) }), _jsx(Typography, { "user-select": "false", style: textStyle({ hovered: !!state.hovered, pressed: !!state.pressed }), children: title }), isLoading ? (_jsx(ActivityIndicator, { size: "small", style: styles.buttonLoader })) : (endIcon && _jsx(LucideIcon, { name: endIcon, ...iconStyle({ hovered: !!state.hovered }) }))] })) }));
|
|
202
233
|
});
|
|
@@ -35,7 +35,7 @@ export const ButtonIcon = (props) => {
|
|
|
35
35
|
else if (!!state.hovered)
|
|
36
36
|
applicableStyles = { ...applicableStyles, ...styles.tertiaryContainerHover };
|
|
37
37
|
}
|
|
38
|
-
return { ...applicableStyles, ...containerSize, ...(style ?? {}) };
|
|
38
|
+
return { ...applicableStyles, ...containerSize, alignSelf: 'flex-start', ...(style ?? {}) };
|
|
39
39
|
};
|
|
40
40
|
const iconStyle = (state) => {
|
|
41
41
|
if (!iconSize) {
|