@core_super_app/ui 0.0.1

package/src/components/input/BasicInput.tsx

@@ -0,0 +1,360 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+  type JSX,
+  type ComponentRef,
+} from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+  Pressable,
+  Image,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  useSharedValue,
+} from 'react-native-reanimated';
+import TextWrapper from '../TextWrapper';
+import type {
+  BlurEvent,
+  FocusEvent,
+  TextInputEndEditingEvent,
+  KeyboardTypeOptions,
+  DimensionValue,
+  SubmitBehavior,
+  TextInputProps,
+  ColorValue,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { Icon } from '../../constants/image';
+import { scaleFont, scaleHeight, scaleWidth } from '@core_super_app/utils/dimension';
+
+type dynamicLabelInputProps = {
+  containerStyle?: StyleProp<ViewStyle>;
+  renderLeftIcon?: JSX.Element;
+  label?: string;
+  value: string;
+  uniqueIdForBasicInput?: string;
+  isFocus?: boolean;
+  onChange?: (text: string) => void;
+  onSubmitEditing?: ((e: TextInputEndEditingEvent) => void) | undefined;
+  onBlur?: ((e: BlurEvent) => void) | undefined;
+  onFocus?: ((e: FocusEvent) => void) | undefined;
+  showClearButton?: boolean;
+  placeholder?: string;
+  contextMenuHidden?: boolean;
+  readOnly?: boolean;
+  renderRightIcon?: JSX.Element;
+  onPressRightIcon?: () => void;
+  onInputPress?: () => void;
+  labelStyle?: StyleProp<TextStyle>;
+  onEndEditing?: (e: TextInputEndEditingEvent) => void;
+  placeholderTextColor?: ColorValue;
+  isError?: boolean;
+  maxLength?: number;
+  submitBehavior?: SubmitBehavior;
+  required?: boolean;
+  disabled?: boolean;
+  showLimitCount?: boolean;
+  inputStyle?: StyleProp<TextStyle>;
+  width?: DimensionValue;
+  autoComplete?: 'off';
+  autoCorrect?: boolean;
+  importantForAutofill?: 'no';
+  keyboardType?: KeyboardTypeOptions;
+  height?: number;
+  labelTopPosition?: number;
+  labelFocusColor?: string;
+  replaceRegex?: RegExp;
+  accessibilityLabel?: string;
+  inputProps?: TextInputProps;
+};
+
+type labellPositionDef = {
+  topBlur: number;
+};
+
+type inputRefDef = {
+  focus: () => void;
+  blur: () => void;
+};
+
+const labelAniConfig = {
+  duration: 100,
+  easing: Easing.linear,
+};
+
+const BasicInput = forwardRef<inputRefDef, dynamicLabelInputProps>(
+  (props, ref) => {
+    const {
+      width = '100%',
+      containerStyle,
+      renderLeftIcon,
+      label,
+      inputProps,
+      value,
+      isFocus,
+      onChange,
+      onSubmitEditing,
+      onBlur,
+      onFocus,
+      showClearButton,
+      placeholder,
+      readOnly = false,
+      renderRightIcon,
+      onPressRightIcon,
+      onInputPress,
+      labelStyle,
+      onEndEditing,
+      placeholderTextColor = '#868F97',
+      isError = false,
+      maxLength,
+      required,
+      disabled,
+      showLimitCount = false,
+      inputStyle,
+      autoComplete = 'off',
+      autoCorrect = false,
+      importantForAutofill = 'no',
+      height = scaleHeight(6.5),
+      labelTopPosition = 0,
+      labelFocusColor,
+      replaceRegex,
+      accessibilityLabel = "input",
+      uniqueIdForBasicInput
+    } = props;
+
+    const [currChar, setCurrChar] = useState<number>(0);
+    const [focus, setFocus] = useState<boolean>(isFocus || false);
+    const calculatedValues = useSharedValue<labellPositionDef>({
+      topBlur: (height - scaleHeight(1.8)) / 2 - scaleFont(16) / 2,
+    });
+
+    useEffect(() => {
+      if (showLimitCount) {
+        setCurrChar(value?.length || 0);
+      }
+    }, [value, showLimitCount]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          setFocus(true);
+          inputRef.current?.focus();
+        },
+        blur: () => {
+          setFocus(false);
+          inputRef.current?.blur();
+        },
+      }),
+      [],
+    );
+
+    const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+
+    const labelAni = useAnimatedStyle(() => {
+      return {
+        top: withTiming(
+          focus || value || (label && placeholder)
+            ? labelTopPosition
+            : calculatedValues!.value.topBlur,
+          labelAniConfig,
+        ),
+        color:
+          focus || value || (label && placeholder)
+            ? labelFocusColor || '#212B36'
+            : '#868F97',
+      };
+    }, [value, focus, label, placeholder, labelFocusColor]);
+
+    const handleBlur = (e: BlurEvent) => {
+      setFocus(false);
+      if (onBlur) {
+        onBlur(e);
+      }
+    };
+
+    const handleFocus = (e: FocusEvent) => {
+      setFocus(true);
+      if (onFocus) {
+        onFocus(e);
+      }
+    };
+
+    const handleChangeText = (text: string) => {
+      let newText = text;
+      if (newText && replaceRegex) {
+        newText = newText.replace(replaceRegex, '');
+      }
+      if (onChange) {
+        onChange(newText);
+      }
+      if (showLimitCount) {
+        setCurrChar(newText?.length);
+      }
+    };
+
+    return (
+      <Pressable
+        style={[
+          styles.inputContainer,
+          containerStyle,
+          isError && styles.borderError,
+          disabled && styles.containerDisabled,
+          { height: height, width },
+        ]}
+        disabled={!onInputPress || disabled}
+        onPress={onInputPress}
+      >
+        {renderLeftIcon && (
+          <View style={styles.iconContainerLeft}>{renderLeftIcon}</View>
+        )}
+        <Pressable
+          style={styles.innerInputContainer}
+          onPress={() => inputRef.current?.focus()}
+          disabled={(!label || readOnly) && !!onInputPress}
+        >
+          <TextInput
+            accessible
+            accessibilityLabel={accessibilityLabel}
+            testID={uniqueIdForBasicInput}
+            autoComplete={autoComplete}
+            autoCorrect={autoCorrect}
+            importantForAutofill={importantForAutofill}
+            allowFontScaling={false}
+            editable={!readOnly}
+            ref={inputRef}
+            value={value}
+            style={[
+              styles.inputStyleCommon,
+              inputStyle,
+              label && styles.inputShrink,
+            ]}
+            onChangeText={handleChangeText}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onSubmitEditing={onSubmitEditing}
+            readOnly={readOnly}
+            onEndEditing={onEndEditing}
+            onPress={() => {
+              if (readOnly && onInputPress) {
+                onInputPress();
+              }
+            }}
+            placeholderTextColor={placeholderTextColor}
+            {...inputProps}
+          />
+          {label && (
+            <Animated.Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              allowFontScaling={false}
+              style={[styles.label, labelAni, labelStyle]}
+            >
+              {label}
+              {required && (
+                <TextWrapper style={styles.requireMark}>{' *'}</TextWrapper>
+              )}
+              {showLimitCount && value && (
+                <TextWrapper>{` (${currChar}/${maxLength})`}</TextWrapper>
+              )}
+            </Animated.Text>
+          )}
+        </Pressable>
+        {showClearButton && value && (
+          <TouchableOpacity
+            style={styles.iconContainerRight}
+            onPress={() => handleChangeText('')}
+            disabled={!value}
+          >
+            <Image
+              style={styles.iconRemove}
+              source={Icon.remove}
+              resizeMode="contain"
+              tintColor="#A1AAB2"
+            />
+          </TouchableOpacity>
+        )}
+        {renderRightIcon && (
+          <TouchableOpacity
+            style={styles.iconContainerRight}
+            onPress={onPressRightIcon}
+            disabled={!!onInputPress}
+          >
+            {renderRightIcon}
+          </TouchableOpacity>
+        )}
+      </Pressable>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    borderRadius: 12,
+    backgroundColor: 'white',
+    paddingHorizontal: scaleWidth(4.3),
+    paddingVertical: scaleHeight(0.9),
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: scaleHeight(1),
+    borderWidth: 1,
+    borderColor: '#DDE4EE',
+  },
+  iconContainerLeft: {
+    height: scaleHeight(6),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: scaleWidth(12),
+  },
+  iconContainerRight: {
+    height: scaleHeight(6),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: scaleWidth(12),
+  },
+  innerInputContainer: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'flex-end',
+    position: 'relative',
+  },
+  inputStyleCommon: {
+    width: '100%',
+    height: '100%',
+    color: '#ffffff',
+    padding: 0,
+    fontSize: scaleFont(14),
+  },
+  label: {
+    color: '#9DA4AE',
+    position: 'absolute',
+    left: 0,
+    fontSize: scaleFont(12),
+    lineHeight: scaleFont(16),
+  },
+  containerDisabled: {
+    borderColor: '#DAE0E7',
+    borderWidth: 0,
+    backgroundColor: '#DAE0E7',
+    opacity: 0.9,
+  },
+  iconRemove: { width: scaleFont(16), height: scaleFont(16) },
+  borderError: { borderColor: '#DA2128' },
+  requireMark: {
+    color: '#DA2128',
+  },
+  inputShrink: { height: '54%' }
+});
+
+export default BasicInput;

package/src/components/input/index.ts

@@ -0,0 +1 @@
+export * from "./BasicInput";

package/src/constants/image.ts

@@ -0,0 +1,5 @@
+import type { ImageSource } from "react-native";
+
+export const Icon: Record<string, ImageSource> = {
+    remove: require('../assets/images/icons/remove.png')
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './components'
+export * as ImageSrc from './constants/image'