@artsy/palette-mobile 8.7.5 → 9.0.0

package/dist/elements/Button/Button.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { PressableProps } from "react-native";
 import { HapticFeedbackTypes } from "react-native-haptic-feedback";
-import { BoxProps } from "../..";
+import { BoxProps } from "../../atoms/Box";
 type ButtonSize = "small" | "large";
 type ButtonVariant = "fillDark" | "fillLight" | "fillGray" | "fillSuccess" | "outline" | "outlineGray" | "outlineLight" | "text";
 export interface ButtonProps extends BoxProps {

package/dist/elements/Button/Button.js

@@ -32,20 +32,23 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const react_native_haptic_feedback_1 = __importDefault(require("react-native-haptic-feedback"));
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const __1 = require("../..");
+const Spacer_1 = require("../../atoms/Spacer");
+const Box_1 = require("../../atoms/Box");
+const Flex_1 = require("../../atoms/Flex");
 const MeasuredView_1 = require("../../utils/MeasuredView");
+const Text_1 = require("../Text");
 const colors_1 = require("./colors");
+const Spinner_1 = require("../Spinner");
+const ANIMATION_DURATION = 150;
 const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition = "left", loading: loadingProp, block, longestText, onPress, size = "large", variant = "fillDark", testOnly_pressed, testID, ...restProps }) => {
-    // these are basically booleans
-    const disabled = (0, react_native_reanimated_1.useSharedValue)(!!disabledProp ? 1 : 0);
-    const loading = (0, react_native_reanimated_1.useSharedValue)(!!loadingProp ? 1 : 0);
-    const pressed = (0, react_native_reanimated_1.useSharedValue)(!!testOnly_pressed ? 1 : 0);
-    (0, react_1.useEffect)(() => {
-        disabled.value = disabledProp ? 1 : 0;
-        loading.value = loadingProp ? 1 : 0;
-        pressed.value = testOnly_pressed ? 1 : 0;
-    }, [disabledProp, loadingProp, testOnly_pressed]);
-    const textStyle = (0, __1.useTextStyleForPalette)(size === "small" ? "xs" : "sm");
+    const [disabled, setDisabled, disabledV] = useStateWithProp(!!disabledProp);
+    const [loading, setLoading, loadingV] = useStateWithProp(!!loadingProp);
+    const [pressed, setPressed, pressedV] = useStateWithProp(!!testOnly_pressed);
+    const pressAnimationProgress = (0, react_native_reanimated_1.useSharedValue)(0);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => pressedV.value, (pressedVal) => {
+        pressAnimationProgress.value = (0, react_native_reanimated_1.withTiming)(pressedVal, { duration: ANIMATION_DURATION });
+    });
+    const textStyle = (0, Text_1.useTextStyleForPalette)(size === "small" ? "xs" : "sm");
     const [longestTextMeasurements, setLongestTextMeasurements] = (0, react_1.useState)({
         width: 0,
         height: 0,
@@ -63,7 +66,7 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
         if (onPress === undefined || onPress === null) {
             return;
         }
-        if (disabled.value === 1 || loading.value === 1) {
+        if (disabled || loading) {
             return;
         }
         if (haptic !== undefined) {
@@ -71,40 +74,50 @@ const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition =
         }
         onPress(event);
     };
-    const bgColor = (0, react_native_reanimated_1.useSharedValue)("black");
-    const borderColor = (0, react_native_reanimated_1.useSharedValue)("black");
-    const containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        backgroundColor: bgColor.value,
-        borderColor: borderColor.value,
-    }));
-    const textColor = (0, react_native_reanimated_1.useSharedValue)("black");
-    const underline = (0, react_native_reanimated_1.useSharedValue)(0);
-    const textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        color: textColor.value,
-        textDecorationLine: underline.value === 1 ? "underline" : "none",
-    }));
     const colorsForVariantAndState = (0, colors_1.useColorsForVariantAndState)();
-    (0, react_native_reanimated_1.useAnimatedReaction)(() => [disabled.value, loading.value, pressed.value], ([disabledVal, loadingVal, pressedVal]) => {
-        const toColor = (c) => (0, react_native_reanimated_1.withTiming)(c, { duration: 150 });
-        const states = colorsForVariantAndState[variant];
-        const colors = disabledVal === 1 ? states.disabled : pressedVal === 1 ? states.pressed : states.active;
-        const { bg, border, text } = colors;
-        bgColor.value = toColor(bg);
-        borderColor.value = toColor(border);
-        textColor.value = loadingVal === 1 ? "rgba(0, 0, 0, 0)" : text;
-        underline.value = pressedVal;
-    }, [variant]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { disabled: disabled.value === 1, onPressIn: () => {
-            if (loading.value === 1) {
+    const containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const colors = colorsForVariantAndState[variant];
+        if (disabled) {
+            return {
+                backgroundColor: colors.disabled.bg,
+                borderColor: colors.disabled.border,
+            };
+        }
+        return {
+            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.bg, colors.pressed.bg]),
+            borderColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.border, colors.pressed.border]),
+        };
+    });
+    const textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const colors = colorsForVariantAndState[variant];
+        if (loading) {
+            return { color: "rgba(0, 0, 0, 0)" };
+        }
+        return {
+            color: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.text, colors.pressed.text]),
+            textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none",
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { disabled: disabled, onPressIn: () => {
+            if (loading) {
                 return;
             }
-            pressed.value = 1;
+            setPressed(true);
         }, onPressOut: () => {
-            if (loading.value === 1) {
+            if (loading) {
                 return;
             }
-            pressed.value = 0;
-        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, children: (0, jsx_runtime_1.jsx)(__1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [{ borderWidth: 1, borderRadius: 50, overflow: "hidden" }, containerColorsAnim], children: [(0, jsx_runtime_1.jsxs)(__1.Flex, { height: "100%", mx: "25px", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(__1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(__1.Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsx)(__1.Spacer, { x: 0.5 })] })) : null, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), !__TEST__ && ((0, jsx_runtime_1.jsx)(MeasuredView_1.MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: (0, jsx_runtime_1.jsx)(__1.Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), iconPosition === "right" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.Spacer, { x: 0.5 }), icon] })) : null] }), loading.value === 1 ? ((0, jsx_runtime_1.jsx)(__1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(__1.Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }));
+            setPressed(false);
+        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", mx: "25px", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(Box_1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), (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 }) }), iconPosition === "right" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 }), icon] })) : null, loading ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }) }) }));
 };
 exports.Button = Button;
-const AText = react_native_reanimated_1.default.createAnimatedComponent(__1.Text);
+const AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
+const AFlex = react_native_reanimated_1.default.createAnimatedComponent(Flex_1.Flex);
+const useStateWithProp = (prop) => {
+    const [state, setState] = (0, react_1.useState)(!!prop);
+    (0, react_1.useEffect)(() => {
+        setState(!!prop);
+    }, [prop]);
+    const stateV = (0, react_native_reanimated_1.useDerivedValue)(() => (!!state ? 1 : 0), [state]);
+    return [state, setState, stateV];
+};

package/dist/elements/Button/Button.stories.js

@@ -54,7 +54,7 @@ const Playground = () => {
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [disabled, setDisabled] = (0, react_1.useState)(true);
     const [block, setBlock] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "loading", onPress: () => setLoading((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "disabled", onPress: () => setDisabled((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "block", onPress: () => setBlock((v) => !v) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { children: (0, jsx_runtime_1.jsxs)(_1.Button, { loading: loading, disabled: disabled, block: block, children: ["loading ", loading ? "true" : "false", ", disabled ", disabled ? "true" : "false", ", block", " ", block ? "true" : "false"] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "loading", onPress: () => setLoading((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "disabled", onPress: () => setDisabled((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "block", onPress: () => setBlock((v) => !v) }), (0, jsx_runtime_1.jsx)(storybookHelpers_1.List, { children: (0, jsx_runtime_1.jsxs)(_1.Button, { loading: loading, disabled: disabled, block: block, longestText: "loading false, disabled false, block false", children: ["loading ", loading ? "true" : "false", ", disabled ", disabled ? "true" : "false", ", block", " ", block ? "true" : "false"] }) })] }));
 };
 exports.Playground = Playground;
 const SpacingAround = () => ((0, jsx_runtime_1.jsxs)(atoms_1.Box, { children: [(0, jsx_runtime_1.jsx)(_1.Button, { m: 2, children: "wow 1" }), (0, jsx_runtime_1.jsx)(_1.Button, { children: "wow 2" })] }));

package/dist/utils/MeasuredView.d.ts

@@ -12,7 +12,8 @@ interface Props {
 }
 /**
  * A view that renders off-screen, measures the width and height of the view, and reports it back.
+ * Note: it is rendering just null when in test mode.
  */
-export declare const MeasuredView: ({ children, setMeasuredState, show }: Props) => JSX.Element;
+export declare const MeasuredView: ({ children, setMeasuredState, show }: Props) => JSX.Element | null;
 export declare const useOffscreenStyle: (notOffscreen?: boolean) => ViewStyle;
 export {};

package/dist/utils/MeasuredView.js

@@ -7,13 +7,16 @@ const react_native_1 = require("react-native");
 const atoms_1 = require("../atoms");
 /**
  * A view that renders off-screen, measures the width and height of the view, and reports it back.
+ * Note: it is rendering just null when in test mode.
  */
 const MeasuredView = ({ children, setMeasuredState, show }) => {
     const offscreenStyle = (0, exports.useOffscreenStyle)(show);
     const onLayout = (0, react_1.useCallback)((event) => {
         setMeasuredState(event.nativeEvent.layout);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(atoms_1.Box, { style: offscreenStyle, backgroundColor: "pink", onLayout: onLayout, children: children }));
+    if (__TEST__)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(atoms_1.Box, { style: offscreenStyle, backgroundColor: "pink", onLayout: onLayout, accessibilityElementsHidden: true, children: children }));
 };
 exports.MeasuredView = MeasuredView;
 const useOffscreenStyle = (notOffscreen) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "8.7.5",
+  "version": "9.0.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",