@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

package/src/foundations/Input/InputDropDown.tsx

@@ -0,0 +1,161 @@
+import React, { useContext } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useComponentId } from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
+import { Icon } from '../Icon';
+import {
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+} from './common';
+import { InputDropDownProps } from './index';
+import { Text, useScaleSize } from '../Text';
+import styles from './styles';
+import { Spacing } from '../Consts';
+
+const InputDropDown = ({
+  value,
+  floatingValue,
+  floatingIcon,
+  onPressFloatingIcon,
+  size = 'small',
+  placeholder,
+  errorMessage,
+  disabled = false,
+  floatingIconColor,
+  required = false,
+  errorSpacing,
+  leadingIcon,
+  leadingIconColor,
+  style,
+  params,
+  hintText,
+  multiline,
+  ...props
+}: InputDropDownProps) => {
+  const { theme } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
+  const componentName = 'InputDropDown';
+
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+  const { componentId } = useComponentId(
+    `${componentName}/${placeholder}`,
+    props.accessibilityLabel,
+  );
+
+  /**
+   * Render the input view
+   */
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+    }
+
+    return (
+      <View
+        style={[
+          styles.inputDropDownWrapper,
+          { backgroundColor: theme.colors.background.surface },
+          getSizeStyle(size, multiline, scaleHeight),
+          getBorderColor(theme, false, errorMessage, disabled as boolean),
+        ]}
+      >
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled as boolean}
+          required={required}
+          floatingIcon={floatingIcon}
+          onPress={onPressFloatingIcon}
+          componentId={componentId}
+        />
+        <View style={styles.inputDropDownView}>
+          {!!leadingIcon && (
+            <View
+              style={[
+                styles.leadingIconContainerDropDown,
+                {
+                  marginRight: Spacing.S,
+                },
+              ]}
+            >
+              <Icon
+                color={leadingIconColor}
+                source={leadingIcon}
+                size={size === 'small' ? 24 : 32}
+                accessibilityLabel={`${componentId}|leading-icon`}
+              />
+            </View>
+          )}
+          <View style={styles.textViewDropDown}>
+            <Text
+              numberOfLines={multiline ? undefined : 1}
+              typography={'body_default_regular'}
+              color={value ? textColor : placeholderColor}
+              accessibilityState={{ disabled: disabled as boolean }}
+              accessibilityLabel={`${componentId}`}
+            >
+              {value || placeholder}
+            </Text>
+          </View>
+        </View>
+        <View
+          style={[
+            styles.iconViewDropDown,
+            {
+              alignItems: multiline ? 'flex-start' : 'center',
+              paddingTop: multiline ? Spacing.M : 0,
+            },
+          ]}
+        >
+          <Icon source={'arrow_chevron_down_small'} />
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <ComponentContext.Provider
+      value={{
+        componentName,
+        componentId,
+        params,
+        state: 'enabled',
+      }}
+    >
+      <TouchableOpacity
+        {...props}
+        accessibilityLabel={`${componentId}|touch`}
+        accessibilityState={{ disabled: disabled as boolean }}
+        activeOpacity={0.6}
+        style={[
+          style,
+          styles.wrapper,
+          showBaseLineDebug && styles.debugBaseLine,
+        ]}
+      >
+        {renderInputView()}
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+          componentId={componentId}
+        />
+      </TouchableOpacity>
+    </ComponentContext.Provider>
+  );
+};
+
+export default InputDropDown;

package/src/foundations/Input/InputMoney.tsx

@@ -0,0 +1,325 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useComponentId } from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Context';
+import { Icon } from '../Icon';
+import { useScaleSize } from '../Text';
+import { Spacing } from '../Consts';
+import {
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+  RenderTrailing,
+} from './common';
+import { InputMoneyProps } from './index';
+import styles from './styles';
+import { formatNumberToMoney } from './utils';
+import SystemTextInput from './SystemTextInput';
+
+const InputMoney = forwardRef(
+  (
+    {
+      value,
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size = 'small',
+      loading,
+      onBlur,
+      onFocus,
+      errorMessage,
+      trailing,
+      trailingColor,
+      onPressTrailing,
+      disabled = false,
+      floatingIconColor,
+      required = false,
+      errorSpacing,
+      style,
+      params,
+      hintText,
+      onPressFloatingIcon,
+      placeholder = '0đ',
+      showClearIcon = true,
+      currency = 'đ',
+      ...props
+    }: InputMoneyProps,
+    ref,
+  ) => {
+    const { theme } = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
+    const scaledFontSize = useScaleSize(20);
+    const [focused, setFocused] = useState(false);
+    const [displayValue, setDisplayValue] = useState('');
+    const [numericValue, setNumericValue] = useState('');
+    const [lastDisplayValue, setLastDisplayValue] = useState('');
+    const inputRef = useRef<TextInput>(null);
+    const componentName = 'InputMoney';
+
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+    const { componentId } = useComponentId(
+      `${componentName}/${placeholder}`,
+      props.accessibilityLabel,
+    );
+
+    const digitLimit =
+      typeof (props as any)?.maxLength === 'number'
+        ? (props as any).maxLength
+        : Number.POSITIVE_INFINITY;
+
+    useEffect(() => {
+      if (value !== undefined && typeof value === 'string') {
+        const cleanValue = value.replace(/\D/g, '');
+        if (cleanValue !== numericValue) {
+          setNumericValue(cleanValue);
+          updateDisplayValue(cleanValue);
+        }
+      }
+    }, [value]);
+
+    useEffect(() => {
+      setLastDisplayValue(displayValue);
+    }, [displayValue]);
+
+    const updateDisplayValue = (numeric: string) => {
+      if (!numeric) {
+        setDisplayValue('');
+        return;
+      }
+      const formatted = formatNumberToMoney(Number(numeric));
+      setDisplayValue(formatted ? `${formatted}${currency}` : '');
+    };
+
+    const parseInputText = (text: string): string => {
+      if (!text) return '';
+      const currencyRegex = new RegExp(` ?${currency}$`, 'g');
+      const textWithoutCurrency = text.replace(currencyRegex, '').trim();
+      return textWithoutCurrency.replace(/[^\d]/g, '');
+    };
+
+    const updateNumericValue = (val: string) => {
+      let next = val.replace(/[^\d]/g, '');
+      if (next.length > digitLimit) next = next.slice(0, digitLimit);
+      if (/^\d*$/.test(next)) {
+        setNumericValue(next);
+        updateDisplayValue(next);
+        onChangeText?.(next);
+      }
+    };
+
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      inputRef.current?.setNativeProps({ text: '' });
+      setDisplayValue('');
+      setNumericValue('');
+      onChangeText?.('');
+    };
+
+    const _onChangeText = (text: string) => {
+      if (!text) {
+        setDisplayValue('');
+        setNumericValue('');
+        onChangeText?.('');
+        return;
+      }
+      if (text.length < lastDisplayValue.length) {
+        const lastChar = lastDisplayValue.charAt(lastDisplayValue.length - 1);
+        const isRemovingCurrency =
+          lastDisplayValue.endsWith(currency) || lastChar === ' ';
+        const isRemovingDot = lastChar === '.';
+        if (isRemovingCurrency || isRemovingDot) {
+          const currentNumericValue = numericValue;
+          if (currentNumericValue.length > 0) {
+            const newNumericValue = currentNumericValue.slice(0, -1);
+            updateNumericValue(newNumericValue);
+            return;
+          }
+        }
+      }
+      const newNumericValue = parseInputText(text);
+      updateNumericValue(newNumericValue);
+    };
+
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const _setText = (text: string) => {
+      if (!text) {
+        setDisplayValue('');
+        setNumericValue('');
+        onChangeText?.('');
+        return;
+      }
+      const newNumericValue = parseInputText(text);
+      updateNumericValue(newNumericValue);
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: _setText,
+      };
+    });
+
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
+      let iconTintColor = trailingColor;
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            { backgroundColor: theme.colors.background.surface },
+            getSizeStyle(size, undefined, scaleHeight),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}
+        >
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
+            componentId={componentId}
+          />
+          <View style={styles.inputView}>
+            <SystemTextInput
+              {...props}
+              accessibilityLabel={`${componentId}`}
+              textAlignVertical="center"
+              ref={inputRef}
+              accessibilityState={{
+                disabled: disabled,
+                ...props.accessibilityState,
+              }}
+              style={[
+                {
+                  width: '100%',
+                  paddingLeft: Spacing.M,
+                  height: '100%',
+                  fontSize: scaledFontSize,
+                  paddingVertical: Spacing.S,
+                  fontWeight: 'bold',
+                },
+                {
+                  color: textColor,
+                },
+              ]}
+              allowFontScaling={false}
+              textBreakStrategy="highQuality"
+              value={displayValue}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+              keyboardType={'numeric'}
+              maxLength={undefined}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {showClearIcon && focused && displayValue ? (
+              <TouchableOpacity
+                accessibilityLabel={`${componentId}|clear-icon-touch`}
+                style={styles.iconWrapper}
+                onPress={onClearText}
+              >
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                  accessibilityLabel={`${componentId}|clear-icon`}
+                />
+              </TouchableOpacity>
+            ) : null}
+            <RenderTrailing
+              color={iconTintColor}
+              icon={trailing}
+              onPressIcon={onPressTrailing}
+              loading={loading}
+              componentId={componentId}
+            />
+          </View>
+        </View>
+      );
+    };
+
+    let inputState = 'active';
+    if (displayValue) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
+    return (
+      <ComponentContext.Provider
+        value={{
+          componentName,
+          componentId,
+          params,
+          state: inputState,
+        }}
+      >
+        <View
+          style={[
+            style,
+            styles.wrapper,
+            showBaseLineDebug && styles.debugBaseLine,
+          ]}
+        >
+          {renderInputView()}
+          <ErrorView
+            errorMessage={errorMessage}
+            errorSpacing={errorSpacing}
+            hintText={hintText}
+            componentId={componentId}
+          />
+        </View>
+      </ComponentContext.Provider>
+    );
+  },
+);
+
+export default InputMoney;