@artsy/palette-mobile 24.11.0 → 24.12.0
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.
|
@@ -53,15 +53,15 @@ var DisplayState;
|
|
|
53
53
|
DisplayState["Pressed"] = "pressed";
|
|
54
54
|
})(DisplayState || (exports._test_DisplayState = DisplayState = {}));
|
|
55
55
|
var Button = function (_a) {
|
|
56
|
-
var children = _a.children, disabled = _a.disabled, haptic = _a.haptic, icon = _a.icon, _b = _a.iconPosition, iconPosition = _b === void 0 ? "left" : _b, loading = _a.loading, longestText = _a.longestText, onPress = _a.onPress, _c = _a.size, size = _c === void 0 ? "large" : _c, _d = _a.variant, variant = _d === void 0 ? "fillDark" : _d, testOnly_state = _a.testOnly_state, testID = _a.testID, textVariant = _a.textVariant, hitSlop = _a.hitSlop, rest = __rest(_a, ["children", "disabled", "haptic", "icon", "iconPosition", "loading", "longestText", "onPress", "size", "variant", "testOnly_state", "testID", "textVariant", "hitSlop"]);
|
|
56
|
+
var children = _a.children, disabled = _a.disabled, haptic = _a.haptic, icon = _a.icon, _b = _a.iconPosition, iconPosition = _b === void 0 ? "left" : _b, loading = _a.loading, longestText = _a.longestText, onPress = _a.onPress, _c = _a.size, size = _c === void 0 ? "large" : _c, _d = _a.variant, variant = _d === void 0 ? "fillDark" : _d, testOnly_state = _a.testOnly_state, testID = _a.testID, textVariant = _a.textVariant, hitSlop = _a.hitSlop, _e = _a.transparent, transparent = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "disabled", "haptic", "icon", "iconPosition", "loading", "longestText", "onPress", "size", "variant", "testOnly_state", "testID", "textVariant", "hitSlop", "transparent"]);
|
|
57
57
|
var textVariantBySize = size === "small" ? "xs" : "sm";
|
|
58
58
|
var textStyle = { fontSize: (0, helpers_1.useTextStyleForPalette)(textVariant !== null && textVariant !== void 0 ? textVariant : textVariantBySize).fontSize };
|
|
59
59
|
var space = (0, hooks_1.useSpace)();
|
|
60
|
-
var
|
|
61
|
-
var
|
|
60
|
+
var _f = (0, react_1.useState)(DisplayState.Enabled), innerDisplayState = _f[0], setInnerDisplayState = _f[1];
|
|
61
|
+
var _g = (0, react_1.useState)({
|
|
62
62
|
width: 0,
|
|
63
63
|
height: 0,
|
|
64
|
-
}), longestTextMeasurements =
|
|
64
|
+
}), longestTextMeasurements = _g[0], setLongestTextMeasurements = _g[1];
|
|
65
65
|
var displayState = testOnly_state !== null && testOnly_state !== void 0 ? testOnly_state : (loading // if we have loading or disabled in props, they are used
|
|
66
66
|
? DisplayState.Loading
|
|
67
67
|
: disabled
|
|
@@ -70,7 +70,7 @@ var Button = function (_a) {
|
|
|
70
70
|
var getSize = function () {
|
|
71
71
|
switch (size) {
|
|
72
72
|
case "small":
|
|
73
|
-
return { height: 30 * react_native_1.PixelRatio.getFontScale(), mx: "
|
|
73
|
+
return { height: 30 * react_native_1.PixelRatio.getFontScale(), mx: "15px" };
|
|
74
74
|
case "large":
|
|
75
75
|
return { height: 50 * react_native_1.PixelRatio.getFontScale(), mx: "30px" };
|
|
76
76
|
}
|
|
@@ -99,39 +99,48 @@ var Button = function (_a) {
|
|
|
99
99
|
onPress(event);
|
|
100
100
|
};
|
|
101
101
|
var containerSize = getSize();
|
|
102
|
-
var to = useStyleForVariantAndState(variant, testOnly_state !== null && testOnly_state !== void 0 ? testOnly_state : displayState);
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
102
|
+
var to = useStyleForVariantAndState(variant, testOnly_state !== null && testOnly_state !== void 0 ? testOnly_state : displayState, transparent);
|
|
103
|
+
// Icons can't be driven by the animated `springProps.textColor` because react-spring's
|
|
104
|
+
// `animated()` only applies live updates via a native ref (setNativeProps), and icon
|
|
105
|
+
// components don't forward refs to a native instance. So we use the plain, per-render
|
|
106
|
+
// target color instead (same approach as `to.loaderColor` for the Spinner below).
|
|
107
|
+
var coloredIcon = icon && (0, react_1.isValidElement)(icon)
|
|
108
|
+
? (0, react_1.cloneElement)(icon, { fill: to.textColor })
|
|
109
|
+
: icon;
|
|
110
|
+
return ((0, jsx_runtime_1.jsx)(native_1.Spring, { to: to, config: native_1.config.stiff, children: function (springProps) {
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: rest.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
|
|
112
|
+
disabled: disabled,
|
|
113
|
+
}, hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: function () {
|
|
114
|
+
if (displayState === DisplayState.Loading) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
setInnerDisplayState(DisplayState.Pressed);
|
|
118
|
+
}, onPressOut: function () {
|
|
119
|
+
if (displayState === DisplayState.Loading) {
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
setInnerDisplayState(DisplayState.Enabled);
|
|
123
|
+
}, onPress: handlePress, testID: testID, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(AnimatedContainer, __assign({}, rest, { style: {
|
|
124
|
+
backgroundColor: springProps.backgroundColor,
|
|
125
|
+
borderColor: springProps.borderColor,
|
|
126
|
+
height: containerSize.height,
|
|
127
|
+
// This is needed to make sure that button doesn't push content around its content changes to longestText
|
|
128
|
+
// Here, we are factoring in the padding from the container
|
|
129
|
+
minWidth: longestTextMeasurements.width + space(2),
|
|
130
|
+
}, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mx: containerSize.mx, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center",
|
|
131
|
+
// Do not show the content when the button is loading
|
|
132
|
+
style: { opacity: displayState === DisplayState.Loading ? 0 : 1 }, children: [iconPosition === "left-start" && !!coloredIcon ? ((0, jsx_runtime_1.jsxs)(Box_1.Box, { position: "absolute", left: 0, children: [coloredIcon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!coloredIcon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [coloredIcon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, !(0, isTestEnvironment_1.isTestEnvironment)() && longestText && longestTextMeasurements.width === 0 && ((0, jsx_runtime_1.jsx)(MeasuredView_1.MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), (0, jsx_runtime_1.jsx)(AnimatedText, { style: [
|
|
133
|
+
{
|
|
134
|
+
width: "auto",
|
|
135
|
+
color: springProps.textColor,
|
|
136
|
+
textDecorationLine: springProps.textDecorationLine,
|
|
137
|
+
},
|
|
138
|
+
textStyle,
|
|
139
|
+
], textAlign: "center", selectable: false, children: children }), iconPosition === "right" && !!coloredIcon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 }), coloredIcon] }))] }), displayState === DisplayState.Loading && ((0, jsx_runtime_1.jsx)(SpinnerContainer, { children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: to.loaderColor }) }))] }) })) }) }));
|
|
140
|
+
} }));
|
|
132
141
|
};
|
|
133
142
|
exports.Button = Button;
|
|
134
|
-
var useStyleForVariantAndState = function (variant, state) {
|
|
143
|
+
var useStyleForVariantAndState = function (variant, state, transparent) {
|
|
135
144
|
var color = (0, hooks_1.useColor)();
|
|
136
145
|
var retval = {
|
|
137
146
|
textDecorationLine: "none",
|
|
@@ -251,17 +260,17 @@ var useStyleForVariantAndState = function (variant, state) {
|
|
|
251
260
|
case "outline":
|
|
252
261
|
switch (state) {
|
|
253
262
|
case DisplayState.Enabled:
|
|
254
|
-
retval.backgroundColor = color("background");
|
|
263
|
+
retval.backgroundColor = transparent ? color("transparent") : color("background");
|
|
255
264
|
retval.borderColor = color("mono60");
|
|
256
265
|
retval.textColor = color("mono100");
|
|
257
266
|
break;
|
|
258
267
|
case DisplayState.Disabled:
|
|
259
|
-
retval.backgroundColor = color("background");
|
|
268
|
+
retval.backgroundColor = transparent ? color("transparent") : color("background");
|
|
260
269
|
retval.borderColor = color("mono30");
|
|
261
270
|
retval.textColor = color("mono30");
|
|
262
271
|
break;
|
|
263
272
|
case DisplayState.Loading:
|
|
264
|
-
retval.backgroundColor = color("background");
|
|
273
|
+
retval.backgroundColor = transparent ? color("transparent") : color("background");
|
|
265
274
|
retval.borderColor = color("mono60");
|
|
266
275
|
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
267
276
|
retval.loaderColor = "mono100";
|