@artsy/palette-mobile 11.0.9 → 11.0.10

package/dist/elements/Checkbox/Checkbox.d.ts

@@ -1,12 +1,18 @@
 /// <reference types="react" />
-import { TouchableProps } from "../../elements";
+import { TouchableWithoutFeedbackProps } from "react-native";
 import { FlexProps } from "../Flex";
-export interface CheckboxProps extends FlexProps {
+export interface CheckboxProps extends TouchableWithoutFeedbackProps, FlexProps {
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
-    onPress?: TouchableProps["onPress"];
     text?: React.ReactElement | string;
     subtitle?: React.ReactElement | string;
+    children?: React.ReactElement | string;
 }
 export declare const Checkbox: React.FC<CheckboxProps>;
+interface CheckMarkProps {
+    size: number;
+}
+export declare const CheckMark: ({ size }: CheckMarkProps) => JSX.Element;
+export declare const DisabledMark: import("styled-components").StyledComponent<({ size }: CheckMarkProps) => JSX.Element, any, {}, never>;
+export {};

package/dist/elements/Checkbox/Checkbox.js

@@ -1,105 +1,85 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
+exports.DisabledMark = exports.CheckMark = exports.Checkbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_get_1 = require("@styled-system/theme-get");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const elements_1 = require("../../elements");
-const hooks_1 = require("../../utils/hooks");
+const native_1 = __importDefault(require("styled-components/native"));
+const CssTransition_1 = require("../../animation/CssTransition");
 const useTheme_1 = require("../../utils/hooks/useTheme");
+const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
 const Text_1 = require("../Text");
-const CHECKBOX_SIZEx1 = 20;
-const ANIMATION_DURATION = 250;
-const Checkbox = ({ children, checked: checkedProp, disabled = false, error = false, onPress, text, subtitle, ...flexProps }) => {
+const CHECKBOX_SIZE = 20;
+const DURATION = 250;
+const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, children, ...restProps }) => {
     const { color, space } = (0, useTheme_1.useTheme)();
     const fontScale = react_native_1.PixelRatio.getFontScale();
-    const checkboxSize = CHECKBOX_SIZEx1 * fontScale;
-    const [checked, setChecked] = (0, react_1.useState)(checkedProp ?? false);
-    const [displayState, setDisplayState] = (0, react_1.useState)("unpressed");
-    const containerColor = {
-        unchecked: { border: color("black100"), background: color("white100") },
-        error: { border: color("red100"), background: color("white100") },
-        checked: { border: color("black100"), background: color("black100") },
-        disabled: { border: color("black30"), background: color("black30") },
+    const checkboxSize = CHECKBOX_SIZE * fontScale;
+    const [checked, setChecked] = (0, react_1.useState)(checkedProp);
+    const isChecked = checkedProp ?? checked;
+    const defaultCheckboxStyle = {
+        backgroundColor: color("white100"),
+        borderColor: color("black60"),
+    };
+    const checkedCheckboxStyle = {
+        backgroundColor: color("black100"),
+        borderColor: color("black100"),
+    };
+    const disabledCheckboxStyle = {
+        backgroundColor: color("black5"),
+        borderColor: color("black10"),
     };
-    const toggleProgress = (0, react_native_reanimated_1.useDerivedValue)(() => (0, react_native_reanimated_1.withTiming)(checked ? 1 : 0, { duration: ANIMATION_DURATION }));
-    const toggleAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(toggleProgress.value, [0, 1], [
-            containerColor.unchecked.background,
-            disabled ? containerColor.disabled.background : containerColor.checked.background,
-        ]),
-        borderColor: (0, react_native_reanimated_1.interpolateColor)(toggleProgress.value, [0, 1], [
-            error
-                ? containerColor.error.border
-                : disabled
-                    ? containerColor.disabled.border
-                    : containerColor.unchecked.border,
-            disabled ? containerColor.disabled.border : containerColor.checked.border,
-        ]),
-    }), [toggleProgress]);
-    const pressedStateProgress = (0, react_native_reanimated_1.useDerivedValue)(() => (0, react_native_reanimated_1.withTiming)(displayState === "pressed" ? 1 : 0, { duration: ANIMATION_DURATION }));
-    const textColor = color(error ? "red100" : disabled ? "onBackgroundLow" : "onBackgroundHigh");
-    const pressedTextColor = color("brand");
-    const pressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
-        color: (0, react_native_reanimated_1.interpolateColor)(pressedStateProgress.value, [0, 1], [textColor, pressedTextColor]),
-    }), [pressedStateProgress]);
-    const subtitleColor = error
-        ? "red100"
-        : disabled
-            ? "onBackgroundLow"
-            : "onBackgroundMedium";
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...flexProps, children: (0, jsx_runtime_1.jsx)(elements_1.Touchable, { noFeedback: true, disabled: disabled, onPressIn: () => setDisplayState("pressed"), onPressOut: () => setDisplayState("unpressed"), onPress: (event) => {
-                if (disabled)
-                    return;
-                setChecked(!checked);
-                onPress?.(event);
-            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
-                                    {
-                                        width: checkboxSize,
-                                        height: checkboxSize,
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        borderWidth: 1,
-                                    },
-                                    toggleAnim,
-                                ], children: checked && (0, jsx_runtime_1.jsx)(Checkmark, { size: checkboxSize }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ml: 1, flex: 1, children: [text !== undefined && ((0, jsx_runtime_1.jsxs)(AnimatedText, { variant: "sm-display", color: textColor, numberOfLines: 2, underline: displayState === "pressed", style: pressAnim, children: [text, " ", displayState] })), children] })] }), subtitle !== undefined && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(checkboxSize + space(1)) * fontScale}px`, mt: 0.5, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }) }));
+    const checkboxStyles = {
+        default: {
+            unchecked: defaultCheckboxStyle,
+            checked: checkedCheckboxStyle,
+        },
+        error: {
+            unchecked: { backgroundColor: color("white100"), borderColor: color("red100") },
+            checked: checkedCheckboxStyle,
+        },
+    };
+    const checkboxStyle = disabled
+        ? disabledCheckboxStyle
+        : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
+    const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
+    const subtitleColor = error ? color("red100") : color("black30");
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: (event) => {
+            if (disabled) {
+                return;
+            }
+            setChecked(!checked);
+            onPress?.(event);
+        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { mt: "2px", children: (0, jsx_runtime_1.jsx)(CssTransition_1.CssTransition, { style: [
+                                    styles(fontScale).container,
+                                    text || subtitle || children ? { marginRight: space(1) * fontScale } : {},
+                                    checkboxStyle,
+                                ], animate: ["backgroundColor", "borderColor"], duration: DURATION, children: !!isChecked &&
+                                    (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledMark, { size: checkboxSize })) : ((0, jsx_runtime_1.jsx)(exports.CheckMark, { size: checkboxSize }))) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "center", flex: 1, children: [!!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", color: textColor, children: text })), children] })] }), !!subtitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(CHECKBOX_SIZE + space(1)) * fontScale}px`, mt: "6px", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }));
 };
 exports.Checkbox = Checkbox;
-const AnimatedText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
-const Checkmark = ({ size }) => {
-    const color = (0, hooks_1.useColor)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
-            width: size * 0.625,
-            height: size * 0.3125,
-            borderColor: color("white100"),
-            borderBottomWidth: 2,
-            borderLeftWidth: 2,
-            transform: [{ rotate: "-45deg" }],
-            top: -2,
-        } }));
-};
+// styled-component does not have support for Animated.View
+const styles = (fontScale) => react_native_1.StyleSheet.create({
+    container: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderWidth: 1,
+        borderStyle: "solid",
+        width: CHECKBOX_SIZE * fontScale,
+        height: CHECKBOX_SIZE * fontScale,
+    },
+});
+// This component represents the √ mark in CSS. We are not using styled-system since it's easier to specify raw CSS
+// properties with styled-component.
+const CheckMark = ({ size }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { style: { transform: [{ rotate: "-45deg" }] }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomWidth: "2px", borderBottomColor: "white100", borderLeftWidth: "2px", borderLeftColor: "white100" }));
+exports.CheckMark = CheckMark;
+exports.DisabledMark = (0, native_1.default)(exports.CheckMark) `
+  border-bottom-color: ${(0, theme_get_1.themeGet)("colors.black30")};
+  border-left-color: ${(0, theme_get_1.themeGet)("colors.black30")};
+`;

package/package.json

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