@artsy/palette-mobile 24.10.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.
|
@@ -28,6 +28,8 @@ export interface ButtonProps extends BoxProps {
|
|
|
28
28
|
/** Used only for tests and stories */
|
|
29
29
|
testOnly_state?: DisplayState;
|
|
30
30
|
textVariant?: TextVariant;
|
|
31
|
+
followText?: string;
|
|
32
|
+
transparent?: boolean;
|
|
31
33
|
}
|
|
32
34
|
declare enum DisplayState {
|
|
33
35
|
Enabled = "enabled",
|
|
@@ -53,14 +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
|
-
var
|
|
60
|
-
var _f = (0, react_1.useState)(
|
|
59
|
+
var space = (0, hooks_1.useSpace)();
|
|
60
|
+
var _f = (0, react_1.useState)(DisplayState.Enabled), innerDisplayState = _f[0], setInnerDisplayState = _f[1];
|
|
61
|
+
var _g = (0, react_1.useState)({
|
|
61
62
|
width: 0,
|
|
62
63
|
height: 0,
|
|
63
|
-
}), longestTextMeasurements =
|
|
64
|
+
}), longestTextMeasurements = _g[0], setLongestTextMeasurements = _g[1];
|
|
64
65
|
var displayState = testOnly_state !== null && testOnly_state !== void 0 ? testOnly_state : (loading // if we have loading or disabled in props, they are used
|
|
65
66
|
? DisplayState.Loading
|
|
66
67
|
: disabled
|
|
@@ -98,36 +99,48 @@ var Button = function (_a) {
|
|
|
98
99
|
onPress(event);
|
|
99
100
|
};
|
|
100
101
|
var containerSize = getSize();
|
|
101
|
-
var to = useStyleForVariantAndState(variant, testOnly_state !== null && testOnly_state !== void 0 ? testOnly_state : displayState);
|
|
102
|
-
|
|
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
|
-
|
|
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
|
+
} }));
|
|
128
141
|
};
|
|
129
142
|
exports.Button = Button;
|
|
130
|
-
var useStyleForVariantAndState = function (variant, state) {
|
|
143
|
+
var useStyleForVariantAndState = function (variant, state, transparent) {
|
|
131
144
|
var color = (0, hooks_1.useColor)();
|
|
132
145
|
var retval = {
|
|
133
146
|
textDecorationLine: "none",
|
|
@@ -247,17 +260,17 @@ var useStyleForVariantAndState = function (variant, state) {
|
|
|
247
260
|
case "outline":
|
|
248
261
|
switch (state) {
|
|
249
262
|
case DisplayState.Enabled:
|
|
250
|
-
retval.backgroundColor = color("background");
|
|
263
|
+
retval.backgroundColor = transparent ? color("transparent") : color("background");
|
|
251
264
|
retval.borderColor = color("mono60");
|
|
252
265
|
retval.textColor = color("mono100");
|
|
253
266
|
break;
|
|
254
267
|
case DisplayState.Disabled:
|
|
255
|
-
retval.backgroundColor = color("background");
|
|
268
|
+
retval.backgroundColor = transparent ? color("transparent") : color("background");
|
|
256
269
|
retval.borderColor = color("mono30");
|
|
257
270
|
retval.textColor = color("mono30");
|
|
258
271
|
break;
|
|
259
272
|
case DisplayState.Loading:
|
|
260
|
-
retval.backgroundColor = color("background");
|
|
273
|
+
retval.backgroundColor = transparent ? color("transparent") : color("background");
|
|
261
274
|
retval.borderColor = color("mono60");
|
|
262
275
|
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
263
276
|
retval.loaderColor = "mono100";
|
|
@@ -4,5 +4,5 @@ type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" |
|
|
|
4
4
|
followCount?: number;
|
|
5
5
|
longestText?: string;
|
|
6
6
|
};
|
|
7
|
-
export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, followText: followTextProp, ...restProps }: FollowButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export {};
|
|
@@ -25,12 +25,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
25
25
|
exports.FollowButton = void 0;
|
|
26
26
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
27
|
var native_1 = require("@artsy/icons/native");
|
|
28
|
+
var react_1 = require("react");
|
|
28
29
|
var constants_1 = require("../../constants");
|
|
29
30
|
var formatLargeNumber_1 = require("../../utils/formatLargeNumber");
|
|
30
31
|
var Button_1 = require("../Button");
|
|
31
32
|
var FollowButton = function (_a) {
|
|
32
|
-
var isFollowed = _a.isFollowed, followCount = _a.followCount, longestText = _a.longestText, loading = _a.loading, restProps = __rest(_a, ["isFollowed", "followCount", "longestText", "loading"]);
|
|
33
|
-
var followText =
|
|
33
|
+
var isFollowed = _a.isFollowed, followCount = _a.followCount, longestText = _a.longestText, loading = _a.loading, followTextProp = _a.followText, restProps = __rest(_a, ["isFollowed", "followCount", "longestText", "loading", "followText"]);
|
|
34
|
+
var followText = (0, react_1.useMemo)(function () {
|
|
35
|
+
if (followTextProp) {
|
|
36
|
+
return followTextProp;
|
|
37
|
+
}
|
|
38
|
+
return isFollowed ? "Following" : "Follow";
|
|
39
|
+
}, [followTextProp, isFollowed]);
|
|
34
40
|
var followCountText = !!followCount && followCount > 1 ? " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) : "";
|
|
35
41
|
var text = followText + followCountText;
|
|
36
42
|
return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed &&
|