@artsy/palette-mobile 13.2.2 → 13.2.3

package/dist/elements/Input/Input.d.ts

@@ -4,7 +4,7 @@ import { EventEmitter } from "events";
 import { TextInput, TextInputProps } from "react-native";
 export declare const inputEvents: EventEmitter;
 export declare const emitInputClearEvent: () => void;
-export interface InputProps extends TextInputProps {
+export interface InputProps extends Omit<TextInputProps, "placeholder"> {
     addClearListener?: boolean;
     /**
      * We are applying some optimisations to make sure the UX is smooth
@@ -22,6 +22,27 @@ export interface InputProps extends TextInputProps {
     onHintPress?: () => void;
     onSelectTap?: () => void;
     optional?: boolean;
+    /**
+     * The placeholder can be an array of string, specifically for android, because of a bug.
+     * On ios, the longest string will always be picked, as ios can add ellipsis.
+     * On android, the longest string **that fits** will be picked, as android doesn't use ellipsis.
+     * The way to use it is to put the longest string first, and the shortest string last.
+     *
+     * Check `HACKS.md` for more info.
+     *
+     * @example
+     * const placeholders = [
+     *   "Wow this is a great and very long placeholder",
+     *   "Wow this is a great and long placeholder",
+     *   "Wow this is a great placeholder",
+     *   "Wow",
+     * ]
+     * ...
+     * <Input
+     *   placeholder={placeholders}
+     * />
+     */
+    placeholder?: string | string[];
     required?: boolean;
     selectComponentWidth?: number;
     selectDisplayLabel?: string | undefined | null;

package/dist/elements/Input/Input.js

@@ -31,6 +31,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const events_1 = require("events");
 const palette_tokens_1 = require("@artsy/palette-tokens");
 const theme_get_1 = __importDefault(require("@styled-system/theme-get"));
+const isArray_1 = __importDefault(require("lodash/isArray"));
+const isString_1 = __importDefault(require("lodash/isString"));
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
@@ -62,6 +64,8 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
     const [delayedFocused, setDelayedFocused] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(propValue ?? defaultValue);
     const [showPassword, setShowPassword] = (0, react_1.useState)(!secureTextEntry);
+    const [inputWidth, setInputWidth] = (0, react_1.useState)(0);
+    const placeholderWidths = (0, react_1.useRef)([]);
     const rightComponentRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)();
     const variant = (0, helpers_1.getInputVariant)({
@@ -136,17 +140,19 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         }
         return leftComponentWidth;
     }, [hasLeftComponent, leftComponentWidth, onSelectTap, selectComponentWidth]);
-    const styles = {
-        fontFamily: fontFamily,
-        fontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
-        minHeight: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : exports.INPUT_MIN_HEIGHT,
-        maxHeight: props.multiline ? exports.MULTILINE_INPUT_MAX_HEIGHT : undefined,
-        height: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : undefined,
-        borderWidth: 1,
-        paddingRight: rightComponentWidth + exports.HORIZONTAL_PADDING,
-        paddingLeft: textInputPaddingLeft,
-        ...styleProp,
-    };
+    const styles = (0, react_1.useMemo)(() => {
+        return {
+            fontFamily: fontFamily,
+            fontSize: parseInt(palette_tokens_1.THEME.textVariants["sm-display"].fontSize, 10),
+            minHeight: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : exports.INPUT_MIN_HEIGHT,
+            maxHeight: props.multiline ? exports.MULTILINE_INPUT_MAX_HEIGHT : undefined,
+            height: props.multiline ? exports.MULTILINE_INPUT_MIN_HEIGHT : undefined,
+            borderWidth: 1,
+            paddingRight: rightComponentWidth + exports.HORIZONTAL_PADDING,
+            paddingLeft: textInputPaddingLeft,
+            ...styleProp,
+        };
+    }, [fontFamily, styleProp, props.multiline, rightComponentWidth, textInputPaddingLeft]);
     const labelStyles = (0, react_1.useMemo)(() => {
         return {
             // this is neeeded too make sure the label is on top of the input
@@ -210,9 +216,16 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
                 }, children: [unit && ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: disabled ? "black30" : "black60", variant: "sm-display", children: unit })), icon] }));
         }
         if (onSelectTap) {
-            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onSelectTap, style: { position: "absolute" }, hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: (0, jsx_runtime_1.jsxs)(AnimatedFlex, { style: [
+            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onSelectTap, style: [
+                    leftComponentSharedStyles,
+                    {
+                        width: selectComponentWidth,
+                    },
+                ], hitSlop: { top: 10, right: 10, bottom: 10, left: 10 }, children: (0, jsx_runtime_1.jsxs)(AnimatedFlex, { style: [
                         {
-                            ...leftComponentSharedStyles,
+                            paddingHorizontal: exports.HORIZONTAL_PADDING,
+                            height: exports.INPUT_MIN_HEIGHT,
+                            alignItems: "center",
                             width: selectComponentWidth,
                             flexDirection: "row",
                             borderRightWidth: 1,
@@ -291,26 +304,68 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
                     left: 10,
                 }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { underline: true, variant: "xs", color: "black60", children: hintText }) }) }));
     }, [hintText, props.onHintPress, space]);
+    const getPlatformSpecificPlaceholder = (0, react_1.useCallback)(() => {
+        if (!placeholder) {
+            return "";
+        }
+        if (react_native_1.Platform.OS === "ios") {
+            return (0, isArray_1.default)(placeholder) ? placeholder[0] : placeholder;
+        }
+        // if it's android and we only have one string, return that string
+        if ((0, isString_1.default)(placeholder)) {
+            return placeholder;
+        }
+        // otherwise, find a placeholder that has longest width that fits in the inputtext
+        const longestFittingStringIndex = placeholderWidths.current.findIndex((placeholderWidth) => {
+            return placeholderWidth <= inputWidth;
+        });
+        if (longestFittingStringIndex > -1) {
+            return placeholder[longestFittingStringIndex];
+        }
+        // otherwise just return the shortest placeholder
+        return placeholder[placeholder.length - 1];
+    }, [inputWidth, placeholder]);
     const getPlaceholder = (0, react_1.useCallback)(() => {
         // Show placeholder always if there is no title
         // This is because we won't have a title animation
         if (!props.title) {
-            return placeholder;
+            return getPlatformSpecificPlaceholder();
         }
         // On blur, we want to show the placeholder immediately
         if (delayedFocused) {
-            return placeholder;
+            return getPlatformSpecificPlaceholder();
         }
         // On focus, we want to show the placeholder after the title animation has finished
         return "";
-    }, [delayedFocused, props.title, placeholder]);
+    }, [delayedFocused, getPlatformSpecificPlaceholder, props.title]);
     const renderAnimatedTitle = (0, react_1.useCallback)(() => {
         if (!props.title) {
             return null;
         }
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", zIndex: 100, pointerEvents: "none", height: exports.LABEL_HEIGHT, children: (0, jsx_runtime_1.jsxs)(AnimatedText, { style: [labelStyles, labelAnimatedStyles], numberOfLines: 1, children: [" ", props.title, " "] }) }));
     }, [labelStyles, labelAnimatedStyles, props.title]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexGrow: 1, children: [renderHint(), renderAnimatedTitle(), (0, jsx_runtime_1.jsx)(AnimatedStyledInput, { value: value, onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, scrollEnabled: false, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("black60"), placeholder: getPlaceholder(), secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
+    const renderAndroidPlaceholderMeasuringHack = (0, react_1.useCallback)(() => {
+        if (react_native_1.Platform.OS === "ios" || !(0, isArray_1.default)(placeholder)) {
+            return null;
+        }
+        // Do not render the hack if we have already measured the placeholder
+        if (placeholderWidths.current.length > 0) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
+                position: "absolute",
+                top: -10000,
+                width: 10000,
+                alignItems: "baseline", // this is to make Texts get the smallest width they can get to fit the text
+            }, children: placeholder.map((placeholderString, index) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { onLayout: (event) => {
+                    placeholderWidths.current[index] = event.nativeEvent.layout.width;
+                }, numberOfLines: 1, style: {
+                    ...styles,
+                }, children: placeholderString }))) }));
+    }, [placeholder, styles]);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexGrow: 1, children: [renderAndroidPlaceholderMeasuringHack(), renderHint(), renderAnimatedTitle(), (0, jsx_runtime_1.jsx)(AnimatedStyledInput, { value: value, onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, onLayout: (event) => {
+                    setInputWidth(event.nativeEvent.layout.width);
+                }, scrollEnabled: false, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("black60"), placeholder: getPlaceholder(), secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
 });
 const StyledInput = (0, styled_components_1.default)(react_native_1.TextInput) `
   padding: ${exports.HORIZONTAL_PADDING}px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.2.2",
+  "version": "13.2.3",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",