@estuary-solutions/rn-core-ui 0.0.4 → 0.1.0

package/src/TextFields/TextField.tsx

@@ -0,0 +1,645 @@
+import React from 'react';
+import {
+  View,
+  TextInput,
+  TextInputProps,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  Animated,
+  Easing,
+  TextStyle,
+} from 'react-native';
+
+import type { ThemeValue } from '../theme/types';
+import { useStyles } from '../theme/useStyles';
+import { useTheme } from '../theme/useTheme';
+import Text from '../Texts/Text';
+import { WEB } from '../utils';
+
+type TextAlginVertical = 'auto' | 'center' | 'top' | 'bottom' | undefined;
+
+export interface RenderIconParams {
+  focused: boolean;
+  hasError: boolean;
+  editable: boolean;
+}
+
+export type RenderIcon = (params: RenderIconParams) => React.ReactNode;
+
+/** Visual states shared with the Figma kit contract (figma/kit.json). */
+export const TEXT_FIELD_STATES = [
+  'default',
+  'focused',
+  'error',
+  'disabled',
+] as const;
+export type TextFieldState = (typeof TEXT_FIELD_STATES)[number];
+
+export interface TextFieldProps
+  extends Omit<
+    TextInputProps,
+    'value' | 'defaultValue' | 'onChangeText' | 'placeholder'
+  > {
+  label?: string;
+  labelMinSize?: number;
+  labelSize?: number;
+  applyTopLabel?: boolean;
+  labelBackground?: string;
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (text: string) => void;
+  error?: boolean | string;
+  errorColor?: string;
+  focusedColor?: string;
+  helperText?: string;
+  helperTextColor?: string;
+  helperTextStyle?: StyleProp<TextStyle>;
+  renderStartIcon?: RenderIcon;
+  renderEndIcon?: RenderIcon;
+  multiline?: boolean;
+  rows?: number;
+  maxRows?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_ROWS = 3;
+const DEFAULT_MARGIN_TOP = 6;
+const DEFAULT_PADDING = 12;
+const MIN_HEIGHT = 48;
+
+const TextField: React.FC<TextFieldProps> = ({
+  label,
+  labelMinSize: labelMinSizeProp,
+  labelSize: labelSizeProp,
+  applyTopLabel = true,
+  labelBackground,
+  value,
+  defaultValue,
+  onChangeText,
+  error,
+  errorColor,
+  focusedColor,
+  helperText,
+  helperTextColor,
+  helperTextStyle,
+  renderStartIcon,
+  renderEndIcon,
+  multiline = false,
+  rows = DEFAULT_ROWS,
+  maxRows,
+  editable = true,
+  containerStyle,
+  inputContainerStyle,
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const styles = useStyles(createStyles);
+  const labelMinSize = labelMinSizeProp ?? theme.typography.caption.fontSize;
+  const labelSize = labelSizeProp ?? theme.typography.bodySm.fontSize;
+  const disabledColor = theme.color.border.disabled;
+  const focusBorderColor = theme.color.border.focus;
+  const errorColorDefault = theme.color.danger.default;
+  const borderColorDefault = theme.color.border.strong;
+
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
+  const [focused, setFocused] = React.useState(false);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [containerHeight, setContainerHeight] = React.useState(0);
+  const [labelHeight, setLabelHeight] = React.useState(0);
+  const [helperHeight, setHelperHeight] = React.useState(0);
+  const [contentHeight, setContentHeight] = React.useState<number | null>(null);
+  const [startIconWidth, setStartIconWidth] = React.useState(0);
+  const [endIconWidth, setEndIconWidth] = React.useState(0);
+  const [webInputHeight, setWebInputHeight] = React.useState<
+    number | undefined
+  >();
+  const inputRef = React.useRef<any>(null); //Handling dragging on Web
+
+  const isApplyStartIcon = typeof renderStartIcon === 'function';
+  const isApplyEndIcon = typeof renderEndIcon === 'function';
+
+  const labelMaxWidth =
+    containerWidth -
+    (isApplyStartIcon ? startIconWidth : 0) -
+    (isApplyEndIcon ? endIconWidth : 0) -
+    DEFAULT_PADDING * 2;
+
+  const isControlled = value !== undefined;
+  const textValue = isControlled ? value : internalValue;
+
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === 'string' ? error : undefined;
+
+  const floatAnim = React.useRef(new Animated.Value(textValue ? 1 : 0)).current;
+
+  const handleChange = React.useCallback(
+    (text: string) => {
+      if (!isControlled) {
+        setInternalValue(text);
+      }
+      onChangeText?.(text);
+    },
+    [isControlled, onChangeText],
+  );
+
+  const handleHideTopLabel = () => {
+    if (applyTopLabel) {
+      return undefined;
+    }
+
+    return floatAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [1, 0],
+    });
+  };
+
+  const resolvePaddingSide = (rawStyle: any, isTop: boolean): number => {
+    const style = StyleSheet.flatten(rawStyle);
+    const side = isTop ? 'paddingTop' : 'paddingBottom';
+
+    if (typeof style?.paddingVertical === 'number') {
+      return style.paddingVertical;
+    }
+
+    if (typeof style?.padding === 'number') {
+      return style.padding;
+    }
+
+    if (typeof style?.[side] === 'number') {
+      return style[side];
+    }
+
+    return 0;
+  };
+
+  const resolvePadding = (
+    userStyle: any,
+    fallbackStyle: any,
+    isTop: boolean,
+  ): number => {
+    const userPadding = resolvePaddingSide(userStyle, isTop);
+    if (userPadding !== 0) {
+      return userPadding;
+    }
+
+    return resolvePaddingSide(fallbackStyle, isTop);
+  };
+
+  const calculatePadding = (isTop: boolean) => {
+    const containerPadding = resolvePadding(
+      containerStyle,
+      styles.container,
+      isTop,
+    );
+
+    const inputPadding = resolvePadding(
+      inputContainerStyle,
+      styles.inputContainer,
+      isTop,
+    );
+
+    const textInputPadding = resolvePadding(style, styles.input, isTop);
+
+    return containerPadding + inputPadding + textInputPadding;
+  };
+
+  const getInsetY = (alignVertical: TextAlginVertical) => {
+    switch (alignVertical) {
+      case 'center':
+        return containerHeight / 2 - labelHeight;
+      case 'bottom':
+        return (
+          containerHeight -
+          helperHeight -
+          DEFAULT_MARGIN_TOP -
+          labelHeight -
+          calculatePadding(false)
+        );
+      case 'top':
+      default:
+        return calculatePadding(true);
+    }
+  };
+
+  const resolveTextAlignVertical = () => {
+    const textInputStyle = StyleSheet.flatten(style);
+    if (WEB) {
+      //Web only support textAlignVertical top
+      return 'top';
+    }
+    return textInputStyle?.textAlignVertical ?? 'top';
+  };
+
+  const textAlignVertical = resolveTextAlignVertical();
+
+  const multilineStyle = React.useMemo(() => {
+    if (!multiline || !contentHeight) {
+      return null;
+    }
+
+    const padding =
+      resolvePadding(style, styles.input, true) +
+      resolvePadding(style, styles.input, false);
+
+    return {
+      minHeight: rows
+        ? rows * (contentHeight - (WEB ? padding * 1.9 : padding / 1.3))
+        : undefined,
+      maxHeight: maxRows
+        ? maxRows * (contentHeight - padding / 1.1)
+        : undefined, // maxHeight not work for auto add new line with maxRows on Web. Use height instead.
+    };
+  }, [multiline, rows, maxRows, contentHeight]);
+
+  const multilineWebStyle = React.useMemo(() => {
+    if (!multiline || !WEB || !contentHeight || !webInputHeight) {
+      return null;
+    }
+
+    const padding =
+      resolvePadding(style, styles.input, true) +
+      resolvePadding(style, styles.input, false);
+
+    const minHeight = rows ? rows * (contentHeight - padding * 1.9) : 0;
+    const maxHeight = maxRows ? maxRows * (contentHeight - padding * 1.9) : 0;
+
+    if (webInputHeight > maxHeight) {
+      return {
+        height: maxHeight,
+      };
+    }
+
+    if (webInputHeight > minHeight && webInputHeight <= maxHeight) {
+      return {
+        height: webInputHeight,
+      };
+    }
+
+    return null;
+  }, [multiline, rows, maxRows, contentHeight, webInputHeight]);
+
+  const labelInsetY = React.useMemo(
+    () => getInsetY(textAlignVertical),
+    [
+      textAlignVertical,
+      style,
+      inputContainerStyle,
+      containerStyle,
+      containerHeight,
+      helperHeight,
+      labelHeight,
+    ],
+  );
+
+  const renderBackgroundLabel = () => {
+    if (labelBackground) {
+      return labelBackground;
+    }
+
+    if (!editable) {
+      return disabledColor;
+    }
+
+    return theme.color.surface.default;
+  };
+
+  const renderLabelColor = () => {
+    if (hasError) {
+      if (errorColor) {
+        return errorColor;
+      }
+      return errorColorDefault;
+    }
+
+    if (focused) {
+      if (focusedColor) {
+        return focusedColor;
+      }
+      return focusBorderColor;
+    }
+
+    return borderColorDefault;
+  };
+
+  const renderInputBorderColor = () => {
+    if (hasError) {
+      if (errorColor) {
+        return errorColor;
+      }
+      return errorColorDefault;
+    }
+
+    if (focused) {
+      if (focusedColor) {
+        return focusedColor;
+      }
+      return focusBorderColor;
+    }
+
+    return borderColorDefault;
+  };
+
+  const renderHelperTextColor = () => {
+    if (helperTextColor) {
+      return helperTextColor;
+    }
+
+    if (hasError) {
+      if (errorColor) {
+        return errorColor;
+      }
+      return errorColorDefault;
+    }
+
+    if (!editable) {
+      return borderColorDefault;
+    }
+
+    return theme.color.text.primary;
+  };
+
+  const labelViewStyle = {
+    position: 'absolute' as const,
+    left: isApplyStartIcon ? startIconWidth + DEFAULT_PADDING : DEFAULT_PADDING,
+    top: applyTopLabel
+      ? floatAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [labelInsetY, -labelMinSize / 1.5],
+        })
+      : labelInsetY,
+    maxWidth: labelMaxWidth,
+    overflow: 'hidden' as const,
+    backgroundColor: renderBackgroundLabel(),
+    paddingHorizontal: DEFAULT_PADDING,
+    opacity: handleHideTopLabel(),
+    borderRadius: 5,
+  };
+
+  const labelStyle = {
+    fontSize: applyTopLabel
+      ? floatAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [labelSize, labelMinSize],
+        })
+      : labelSize,
+    color: renderLabelColor(),
+  };
+
+  React.useEffect(() => {
+    Animated.timing(floatAnim, {
+      toValue: focused || textValue ? 1 : 0,
+      duration: 180,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [focused, textValue, floatAnim]);
+
+  React.useEffect(() => {
+    if (!WEB || !multiline) {
+      return;
+    }
+
+    const el = inputRef.current;
+    if (!el) {
+      return;
+    }
+
+    let isDragging = false;
+    let startY = 0;
+    let startScrollTop = 0;
+
+    const onMouseDown = (e: MouseEvent) => {
+      isDragging = true;
+      startY = e.clientY;
+      startScrollTop = el.scrollTop;
+    };
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!isDragging) {
+        return;
+      }
+      el.scrollTop = startScrollTop - (e.clientY - startY);
+    };
+
+    const onMouseUp = () => {
+      isDragging = false;
+    };
+
+    el.addEventListener('mousedown', onMouseDown);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      el.removeEventListener('mousedown', onMouseDown);
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [multiline]);
+
+  const multilineStyleSignature = React.useMemo(() => {
+    if (!style) {
+      return '';
+    }
+
+    const s = Array.isArray(style) ? Object.assign({}, ...style) : style;
+
+    return [
+      s.minHeight,
+      s.maxHeight,
+      s.paddingTop,
+      s.paddingBottom,
+      s.lineHeight,
+      s.fontSize,
+    ].join('|');
+  }, [style]);
+
+  React.useEffect(() => {
+    let timeoutID: NodeJS.Timeout | undefined;
+    if (contentHeight) {
+      handleChange('');
+      timeoutID = setTimeout(() => setContentHeight(null), 1000); //Wait until the text change for onContentSizeChange get the init height before reset multilineStyle
+    }
+    return () => {
+      if (timeoutID) {
+        clearTimeout(timeoutID);
+      }
+    };
+  }, [multilineStyleSignature]);
+
+  return (
+    <View
+      onLayout={e => {
+        setContainerWidth(e?.nativeEvent?.layout?.width);
+        setContainerHeight(e?.nativeEvent?.layout?.height);
+      }}
+      style={[styles.container, containerStyle]}>
+      <View
+        style={[
+          styles.inputContainer,
+          { borderColor: renderInputBorderColor() },
+          !editable && styles.disabled,
+          inputContainerStyle,
+        ]}>
+        {label && (
+          <Animated.View
+            pointerEvents={'none'}
+            onLayout={e => {
+              setLabelHeight(e?.nativeEvent?.layout?.height);
+            }}
+            style={labelViewStyle}>
+            <Animated.Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={labelStyle}>
+              {label}
+            </Animated.Text>
+          </Animated.View>
+        )}
+
+        {isApplyStartIcon && (
+          <View
+            style={styles.iconStart}
+            onLayout={e => {
+              setStartIconWidth(e.nativeEvent.layout.width);
+            }}>
+            {renderStartIcon({
+              focused: focused,
+              hasError: hasError,
+              editable: editable,
+            })}
+          </View>
+        )}
+
+        <TextInput
+          {...rest}
+          ref={inputRef}
+          style={[
+            styles.input,
+            multiline && styles.multiline,
+            multilineStyle,
+            multilineWebStyle,
+            WEB && !editable && styles.webDisabled,
+            !editable && styles.inputDisabled,
+            style,
+          ]}
+          value={textValue}
+          onChangeText={handleChange}
+          editable={editable}
+          multiline={multiline}
+          onFocus={e => {
+            if (!editable) {
+              return;
+            }
+            setFocused(true);
+            onFocus && onFocus(e);
+          }}
+          onBlur={e => {
+            setFocused(false);
+            onBlur && onBlur(e);
+          }}
+          onContentSizeChange={e => {
+            if (multiline && WEB) {
+              setWebInputHeight(e.nativeEvent.contentSize.height);
+            }
+            if (!multiline || contentHeight) {
+              return;
+            }
+            setContentHeight(e.nativeEvent.contentSize.height);
+          }}
+        />
+
+        {isApplyEndIcon && (
+          <View
+            style={styles.iconEnd}
+            onLayout={e => {
+              setEndIconWidth(e.nativeEvent?.layout?.width);
+            }}>
+            {renderEndIcon({
+              focused: focused,
+              hasError: hasError,
+              editable: editable,
+            })}
+          </View>
+        )}
+      </View>
+
+      {(errorMessage || helperText) && (
+        <Text
+          color={renderHelperTextColor()}
+          onLayout={e => {
+            setHelperHeight(e?.nativeEvent?.layout?.height);
+          }}
+          style={[styles.helperText, helperTextStyle]}>
+          {errorMessage ?? helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const createStyles = (t: ThemeValue) => ({
+  container: {
+    width: '100%' as const,
+  },
+  inputContainer: {
+    minHeight: MIN_HEIGHT,
+    borderWidth: 1,
+    borderColor: t.color.border.strong,
+    borderRadius: t.radius.md,
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    paddingHorizontal: DEFAULT_PADDING,
+    backgroundColor: t.color.surface.default,
+  },
+  focusedBorder: {
+    borderColor: t.color.border.focus,
+  },
+  input: {
+    flex: 1,
+    fontFamily: t.typography.bodySm.fontFamily,
+    fontSize: t.typography.bodySm.fontSize,
+    color: t.color.text.primary,
+    paddingVertical: DEFAULT_PADDING,
+    ...(WEB
+      ? ({
+          outlineStyle: 'none',
+          overflow: 'hidden',
+        } as any)
+      : {}),
+  },
+  multiline: {
+    textAlignVertical: 'top' as const,
+    alignItems: 'flex-start' as const,
+  },
+  iconStart: {
+    marginRight: DEFAULT_PADDING,
+  },
+  iconEnd: {
+    marginLeft: DEFAULT_PADDING,
+  },
+  helperText: {
+    marginTop: DEFAULT_MARGIN_TOP,
+    fontSize: t.typography.caption.fontSize,
+    paddingHorizontal: DEFAULT_PADDING,
+  },
+  disabled: {
+    backgroundColor: t.color.border.disabled,
+  },
+  webDisabled: {
+    ...(WEB
+      ? ({
+          cursor: 'not-allowed',
+        } as any)
+      : {}),
+  },
+  inputDisabled: {
+    color: t.color.text.disabled,
+  },
+});
+
+export default TextField;