@artsy/palette-mobile 2.1.2 → 2.1.3

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.
Files changed (2) hide show
  1. package/dist/elements/Input/Input.js +16 -14
  2. package/package.json +1 -1
package/dist/elements/Input/Input.js CHANGED
@@ -27,16 +27,16 @@ const emitInputClearEvent = () => {
27
27
  exports.inputEvents.emit("clear");
28
28
  };
29
29
  exports.emitInputClearEvent = emitInputClearEvent;
30
- exports.Input = (0, react_1.forwardRef)(({ containerStyle, description, descriptionColor, disabled, error, icon, loading, optional, required, enableClearButton, title, renderLeftHandSection, secureTextEntry = false, textContentType, canHidePassword, inputTextStyle, fixedRightPlaceholder, placeholder, multiline, maxLength, showLimit, addClearListener = false, fontSize = DEFAULT_FONT_SIZE, ...rest }, ref) => {
30
+ exports.Input = (0, react_1.forwardRef)(({ containerStyle, description, descriptionColor, disabled, error, icon, loading, optional, required, enableClearButton, title, renderLeftHandSection, secureTextEntry = false, textContentType, canHidePassword, inputTextStyle, fixedRightPlaceholder, placeholder, multiline, maxLength, onFocus, onBlur, onClear, onChangeText, defaultValue, value: propValue, showLimit, addClearListener = false, fontSize = DEFAULT_FONT_SIZE, style, ...restProps }, ref) => {
31
31
  const { color, theme } = (0, Theme_1.useTheme)();
32
32
  const [focused, setFocused] = (0, react_1.useState)(false);
33
33
  const [showPassword, setShowPassword] = (0, react_1.useState)(!secureTextEntry);
34
- const [value, setValue] = (0, react_1.useState)(rest.value ?? rest.defaultValue ?? "");
34
+ const [value, setValue] = (0, react_1.useState)(propValue ?? defaultValue ?? "");
35
35
  const input = (0, react_1.useRef)();
36
36
  const localClear = () => {
37
37
  input.current?.clear();
38
38
  localOnChangeText("");
39
- rest.onClear?.();
39
+ onClear?.();
40
40
  };
41
41
  (0, react_1.useImperativeHandle)(ref, () => input.current);
42
42
  const fontFamily = theme.fonts.sans.regular;
@@ -66,7 +66,7 @@ exports.Input = (0, react_1.forwardRef)(({ containerStyle, description, descript
66
66
  };
67
67
  const localOnChangeText = (text) => {
68
68
  setValue(text);
69
- rest.onChangeText?.(text);
69
+ onChangeText?.(text);
70
70
  };
71
71
  const [placeholderWidths, setPlaceholderWidths] = (0, react_1.useState)([]);
72
72
  const [inputWidth, setInputWidth] = (0, react_1.useState)(0);
@@ -105,7 +105,6 @@ exports.Input = (0, react_1.forwardRef)(({ containerStyle, description, descript
105
105
  return placeholder[placeholder.length - 1];
106
106
  };
107
107
  return ((0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexGrow: 1, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputTitle_1.InputTitle, { optional: optional, required: required, children: title }), !!maxLength && !!showLimit && ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: "black60", variant: "xs", marginLeft: "auto", children: maxLength - value.length }))] }), !!description && ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: descriptionColor ?? "black60", variant: "xs", mb: 0.5, children: description })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPressIn: () => input.current?.focus(), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
108
- rest.style,
109
108
  {
110
109
  flexDirection: "row",
111
110
  borderWidth: 1,
@@ -113,6 +112,7 @@ exports.Input = (0, react_1.forwardRef)(({ containerStyle, description, descript
113
112
  minHeight: multiline ? exports.INPUT_HEIGHT_MULTILINE : exports.INPUT_HEIGHT,
114
113
  backgroundColor: disabled ? color("black5") : color("white100"),
115
114
  },
115
+ style,
116
116
  ], children: [renderLeftHandSection?.(), !!icon && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { pl: "1", justifyContent: "center", flexGrow: 0, backgroundColor: "background", children: icon })), (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flex: 1, children: [placeholderMeasuringHack, (0, jsx_runtime_1.jsx)(StyledInput, { multiline: multiline,
117
117
  // we need this one to make RN focus on the input with the keyboard. https://github.com/facebook/react-native/issues/16826#issuecomment-940126791
118
118
  scrollEnabled: multiline ? false : undefined, maxLength: maxLength, editable: !disabled, onLayout: (event) => {
@@ -123,24 +123,26 @@ exports.Input = (0, react_1.forwardRef)(({ containerStyle, description, descript
123
123
  else {
124
124
  setInputWidth(newWidth);
125
125
  }
126
- }, ref: input, placeholderTextColor: color("black60"), style: {
127
- flex: 1,
128
- fontSize,
129
- ...inputTextStyle,
130
- color: color("onBackgroundHigh"),
131
- backgroundColor: color("background"),
132
- }, numberOfLines: multiline ? undefined : 1, secureTextEntry: !showPassword, textAlignVertical: multiline ? "top" : "center", placeholder: actualPlaceholder(), value: value, ...rest, onChangeText: localOnChangeText, onFocus: (e) => {
126
+ }, ref: input, placeholderTextColor: color("black60"), style: [
127
+ {
128
+ flex: 1,
129
+ fontSize,
130
+ color: color("onBackgroundHigh"),
131
+ backgroundColor: color("background"),
132
+ },
133
+ inputTextStyle,
134
+ ], numberOfLines: multiline ? undefined : 1, secureTextEntry: !showPassword, textAlignVertical: multiline ? "top" : "center", placeholder: actualPlaceholder(), value: value, ...restProps, onChangeText: localOnChangeText, onFocus: (e) => {
133
135
  if (react_native_1.Platform.OS === "android") {
134
136
  react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.create(60, "easeInEaseOut", "opacity"));
135
137
  }
136
138
  setFocused(true);
137
- rest.onFocus?.(e);
139
+ onFocus?.(e);
138
140
  }, onBlur: (e) => {
139
141
  if (react_native_1.Platform.OS === "android") {
140
142
  react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.create(60, "easeInEaseOut", "opacity"));
141
143
  }
142
144
  setFocused(false);
143
- rest.onBlur?.(e);
145
+ onBlur?.(e);
144
146
  } })] }), !!fixedRightPlaceholder && value === "" && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { pr: 1, justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: "black60", children: fixedRightPlaceholder }) })), renderShowPasswordIcon(), loading ? ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { pr: "2", justifyContent: "center", flexGrow: 0, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "medium", style: { marginLeft: 3, width: 15, height: 4, backgroundColor: color("black60") } }) })) : (!!(value !== undefined && value !== "" && enableClearButton) && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { pr: "1", justifyContent: "center", flexGrow: 0, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => {
145
147
  localClear();
146
148
  }, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityLabel: "Clear input button", children: (0, jsx_runtime_1.jsx)(svgs_1.XCircleIcon, { fill: "black30" }) }) })))] }) }), !!error && ((0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red100", mt: 1, variant: "xs", testID: "input-error", children: error }))] }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "2.1.2",
3
+ "version": "2.1.3",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "scripts": {
6
6
  "install:all": "yarn install && yarn bundle-install && yarn pod-install",