create-react-native-starter-kit 0.0.0-stage → 1.0.1

package/template/src/components/shared/form-input/variants/CountryPhoneVariant.tsx

@@ -0,0 +1,289 @@
+import React, { forwardRef, memo } from 'react';
+import { StyleSheet } from 'react-native';
+import PhoneInput, {
+  IPhoneInputRef,
+} from 'rn-international-phone-number';
+import { useAppTheme } from '@/context/ThemeContext';
+import { CountryPhoneVariantProps } from '../type';
+import { FORM_FIELD } from '../formFieldStyles';
+import { FontFamily } from '@/theme';
+import { normalize } from '@/utils/normalize';
+
+type RHFPhoneField = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+type FormModeProps = {
+  mode: 'form';
+  field: RHFPhoneField;
+};
+
+type StandaloneModeProps = {
+  mode: 'standalone';
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export type CountryPhoneVisualProps =
+  | (FormModeProps & CountryPhoneVariantProps)
+  | (StandaloneModeProps & CountryPhoneVariantProps);
+
+const CountryPhoneVariant = forwardRef<IPhoneInputRef, CountryPhoneVisualProps>(
+  (props, ref) => {
+    const { color } = useAppTheme();
+    const {
+      mode,
+      appearance = 'login',
+      countryContainerStyle,
+      defaultCountry = 'IN',
+      showFlag = true,
+      disabled,
+      modalDisabled = false,
+      onChangeSelectedCountry,
+      phoneInputProps,
+      placeholder = 'Enter phone number',
+    } = props;
+
+    const resolvedValue = mode === 'form' ? props.field.value : props.value;
+    const handleChange =
+      mode === 'form' ? props.field.onChange : props.onChange;
+    const showCountryCaret = showFlag && !modalDisabled;
+    const isFieldAppearance = appearance === 'field';
+    const chrome = isFieldAppearance ? fieldChrome : loginChrome;
+    const fillColor = disabled
+      ? color.disabled
+      : isFieldAppearance
+        ? color.background_primary
+        : color.background_secondary;
+    const prefixFillColor = disabled
+      ? color.disabled
+      : color.background_primary;
+    const placeholderColor = isFieldAppearance
+      ? color.text_placeholder
+      : color.placeholder;
+
+    return (
+      <PhoneInput
+        ref={ref ?? null}
+        value={resolvedValue ?? ''}
+        defaultCountry={defaultCountry}
+        onChangePhoneNumber={handleChange}
+        onChangeCountry={onChangeSelectedCountry}
+        allowFontScaling={false}
+        disabled={disabled}
+        modalDisabled={modalDisabled}
+        customFlag={isFieldAppearance ? () => null : undefined}
+        customCaret={
+          isFieldAppearance ? (() => null as unknown as React.ReactElement) : undefined
+        }
+        phoneInputStyles={{
+          flag: showFlag
+            ? { display: 'flex' }
+            : {
+                display: 'none',
+                width: 0,
+                height: 0,
+                margin: 0,
+                padding: 0,
+              },
+          caret: showCountryCaret
+            ? { display: 'flex', color: color.text_primary }
+            : {
+                display: 'none',
+                width: 0,
+                height: 0,
+                margin: 0,
+                padding: 0,
+                color: color.text_primary,
+              },
+          divider: isFieldAppearance
+            ? {
+                display: 'none',
+                width: 0,
+                height: 0,
+                marginHorizontal: 0,
+                marginLeft: 0,
+                marginRight: 0,
+              }
+            : {
+                display: showCountryCaret ? 'flex' : 'none',
+                width: showCountryCaret ? undefined : 0,
+                height: showCountryCaret ? undefined : 0,
+                opacity: showCountryCaret ? 1 : 0,
+                margin: showCountryCaret ? undefined : 0,
+                padding: showCountryCaret ? undefined : 0,
+                backgroundColor: showCountryCaret
+                  ? color.border
+                  : 'transparent',
+              },
+          container: [
+            chrome.container,
+            {
+              backgroundColor: fillColor,
+              borderColor: color.border,
+            },
+            countryContainerStyle,
+          ],
+          callingCode: [
+            chrome.callingCode,
+            {
+              color: color.text_primary,
+            },
+          ],
+          input: [
+            chrome.input,
+            { color: color.text_primary },
+          ],
+          flagContainer: isFieldAppearance
+            ? {
+                ...fieldChrome.flagContainer,
+                backgroundColor: prefixFillColor,
+              }
+            : [
+                chrome.flagContainer,
+                {
+                  backgroundColor: prefixFillColor,
+                },
+                !showFlag && chrome.flagContainerNoFlag,
+              ],
+        }}
+        placeholder={placeholder}
+        cursorColor={color.text_primary}
+        modalStyles={{
+          countryItem: { backgroundColor: color.background_primary },
+          content: { backgroundColor: color.background_secondary },
+          countryName: { color: color.text_primary },
+          callingCode: { color: color.text_primary },
+          searchInput: [
+            styles.searchInput,
+            {
+              backgroundColor: color.background_primary,
+              color: color.text_primary,
+            },
+          ],
+          countryNotFoundMessage: {
+            color: color.text_primary,
+          },
+          alphabetLetterText: { color: color.text_primary },
+          alphabetLetterTextActive: { color: color.text_primary },
+        }}
+        modalSearchInputPlaceholderTextColor={placeholderColor}
+        placeholderTextColor={placeholderColor}
+        keyboardType="number-pad"
+        {...phoneInputProps}
+      />
+    );
+  },
+);
+
+export default memo(CountryPhoneVariant);
+
+const loginChrome = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingRight: 12,
+    minHeight: normalize(52),
+    borderTopWidth: 1.5,
+  },
+  callingCode: {
+    paddingRight: 18,
+    fontSize: normalize(16),
+    lineHeight: normalize(20),
+    fontFamily: FontFamily.InterTightMedium,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  input: {
+    flex: 1,
+    height: '100%',
+    fontSize: normalize(16),
+    fontFamily: FontFamily.InterTightRegular,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingVertical: 0,
+    margin: 0,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  flagContainer: {
+    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 12,
+    paddingLeft: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingRight: 0,
+    alignSelf: 'stretch',
+  },
+  flagContainerNoFlag: {
+    paddingLeft: 14,
+  },
+});
+
+const fieldChrome = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: FORM_FIELD.radius,
+    height: FORM_FIELD.height,
+    minHeight: FORM_FIELD.height,
+    paddingLeft: FORM_FIELD.paddingH,
+    paddingRight: FORM_FIELD.paddingH,
+  },
+  callingCode: {
+    paddingLeft: 0,
+    paddingRight: 6,
+    margin: 0,
+    fontSize: FORM_FIELD.fontSize,
+    lineHeight: FORM_FIELD.lineHeight,
+    fontFamily: FontFamily.InterTightRegular,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  input: {
+    flex: 1,
+    width: 'auto',
+    height: '100%',
+    fontSize: FORM_FIELD.fontSize,
+    fontFamily: FontFamily.InterTightRegular,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingVertical: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    margin: 0,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  flagContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderTopLeftRadius: FORM_FIELD.radius,
+    borderBottomLeftRadius: FORM_FIELD.radius,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    margin: 0,
+    gap: 0,
+    minWidth: 0,
+    height: '100%',
+  },
+  flagContainerNoFlag: {
+    paddingHorizontal: 0,
+    paddingLeft: 0,
+    gap: 0,
+    minWidth: 0,
+  },
+});
+
+const styles = StyleSheet.create({
+  searchInput: {
+    paddingLeft: 10,
+  },
+});

package/template/src/components/shared/form-input/variants/DateTimeVariant.tsx

@@ -0,0 +1,280 @@
+import { useAppTheme } from '@/context/ThemeContext';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import Icon from '../../Icon';
+import DateTimePicker, {
+  DateTimePickerChangeEvent,
+} from '@react-native-community/datetimepicker';
+import { DateTimeVariantProps } from '../type';
+import moment from 'moment';
+import { useTranslation } from 'react-i18next';
+import { isAndroid, isIOS } from '@/constants/device';
+import { FontFamily } from '@/theme';
+import { normalize } from '@/utils/normalize';
+import { FORM_FIELD } from '../formFieldStyles';
+import CustomText from '../../text/CustomText';
+
+type IOSMode = 'date' | 'time' | 'datetime' | 'countdown';
+type AndroidMode = 'date' | 'time';
+
+type RHFDateTimeField = {
+  value?: Date;
+  onChange?: (date: Date) => void;
+};
+
+type DateTimeFormMode = {
+  mode: 'form';
+  field: RHFDateTimeField;
+  dateTimeMode?: IOSMode | AndroidMode;
+};
+
+type DateTimeIndependentMode = {
+  mode: 'standalone';
+  value?: Date;
+  onChange?: (date: Date) => void;
+  dateTimeMode?: IOSMode | AndroidMode;
+};
+
+type DateTimeVisualProps =
+  | (DateTimeFormMode & DateTimeVariantProps)
+  | (DateTimeIndependentMode & DateTimeVariantProps);
+
+const DateTimeVariant = (props: DateTimeVisualProps) => {
+  const { t } = useTranslation();
+  const { color } = useAppTheme();
+  const [showPicker, setShowPicker] = useState(false);
+  const [draftDate, setDraftDate] = useState<Date>(new Date());
+
+  const {
+    mode,
+    disabled,
+    placeholder = 'Select date',
+    dateTimeMode = 'date',
+    inputStyle,
+    minimumDate,
+    maximumDate,
+    showIcon = true,
+    iconName = 'calendar',
+    placeholderTextColor,
+    dateTimePickerProps,
+    dateTimeContainerStyle,
+  } = props;
+
+  const value =
+    mode === 'form' ? props.field.value ?? null : props.value ?? null;
+
+  const onChange = mode === 'form' ? props.field.onChange : props.onChange;
+
+  useEffect(() => {
+    if (showPicker) {
+      setDraftDate(value ?? new Date());
+    }
+  }, [showPicker, value]);
+
+  const handleAndroidValueChange = useCallback(
+    (_event: DateTimePickerChangeEvent, selectedDate: Date) => {
+      onChange?.(selectedDate);
+      setShowPicker(false);
+    },
+    [onChange],
+  );
+
+  const handleIosValueChange = useCallback(
+    (_event: DateTimePickerChangeEvent, selectedDate: Date) => {
+      setDraftDate(selectedDate);
+    },
+    [],
+  );
+
+  const handleDismiss = useCallback(() => {
+    setShowPicker(false);
+  }, []);
+
+  const handleConfirmIos = useCallback(() => {
+    onChange?.(draftDate);
+    setShowPicker(false);
+  }, [draftDate, onChange]);
+
+  const handlePress = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setShowPicker(true);
+  }, [disabled]);
+
+  const displayValue = value
+    ? moment(value).format(dateTimeMode === 'time' ? 'hh:mm A' : 'DD/MM/YYYY')
+    : '';
+
+  return (
+    <>
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="button"
+        style={[
+          styles.wrapper,
+          {
+            backgroundColor: disabled
+              ? color.disabled
+              : color.background_primary,
+            borderColor: color.border,
+          },
+          dateTimeContainerStyle,
+        ]}
+      >
+        <Text
+          numberOfLines={1}
+          allowFontScaling={false}
+          style={[
+            styles.input,
+            {
+              color: displayValue
+                ? color.text_primary
+                : (placeholderTextColor ?? color.text_placeholder),
+            },
+            inputStyle,
+          ]}
+        >
+          {displayValue || placeholder}
+        </Text>
+
+        {showIcon ? (
+          <View style={styles.rightIconWrap} pointerEvents="none">
+            <Icon
+              name={iconName}
+              width={FORM_FIELD.iconSize}
+              height={FORM_FIELD.iconSize}
+            />
+          </View>
+        ) : null}
+      </Pressable>
+
+      {showPicker && isAndroid ? (
+        <DateTimePicker
+          value={value ?? new Date()}
+          mode={dateTimeMode}
+          minimumDate={minimumDate}
+          maximumDate={maximumDate}
+          {...dateTimePickerProps}
+          onValueChange={handleAndroidValueChange}
+          onDismiss={handleDismiss}
+        />
+      ) : null}
+
+      {isIOS ? (
+        <Modal
+          transparent
+          visible={showPicker}
+          animationType="fade"
+          onRequestClose={handleDismiss}
+        >
+          <View style={styles.iosOverlay}>
+            <Pressable style={StyleSheet.absoluteFill} onPress={handleDismiss} />
+            <View
+              style={[
+                styles.iosSheet,
+                { backgroundColor: color.background_primary },
+              ]}
+            >
+              <View style={styles.iosToolbar}>
+                <Pressable onPress={handleDismiss} hitSlop={12}>
+                  <CustomText
+                    variant="body"
+                    weight="500"
+                    textColor={color.text_secondary}
+                  >
+                    {t('common.cancel')}
+                  </CustomText>
+                </Pressable>
+                <Pressable onPress={handleConfirmIos} hitSlop={12}>
+                  <CustomText
+                    variant="body"
+                    weight="600"
+                    textColor={color.primary}
+                  >
+                    {t('common.done')}
+                  </CustomText>
+                </Pressable>
+              </View>
+
+              <DateTimePicker
+                value={draftDate}
+                mode={dateTimeMode}
+                display="spinner"
+                minimumDate={minimumDate}
+                maximumDate={maximumDate}
+                themeVariant="light"
+                {...dateTimePickerProps}
+                onValueChange={handleIosValueChange}
+                onDismiss={handleDismiss}
+                style={styles.iosPicker}
+              />
+            </View>
+          </View>
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+
+export default memo(DateTimeVariant);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: FORM_FIELD.radius,
+    height: FORM_FIELD.height,
+    minHeight: FORM_FIELD.height,
+    width: '100%',
+    paddingHorizontal: FORM_FIELD.paddingH,
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: FontFamily.InterTightRegular,
+    fontSize: FORM_FIELD.fontSize,
+    paddingTop: 0,
+    paddingBottom: 0,
+    margin: 0,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  rightIconWrap: {
+    marginLeft: normalize(8),
+    width: FORM_FIELD.iconSize,
+    height: FORM_FIELD.iconSize,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iosOverlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+  },
+  iosSheet: {
+    borderTopLeftRadius: normalize(16),
+    borderTopRightRadius: normalize(16),
+    paddingBottom: normalize(24),
+    overflow: 'hidden',
+  },
+  iosToolbar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: normalize(16),
+    paddingVertical: normalize(14),
+  },
+  iosPicker: {
+    alignSelf: 'center',
+    width: '100%',
+  },
+});