tf-checkout-react-native 1.0.37 → 1.0.40

package/src/components/datePicker/DatePicker.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import DateTimePickerModal from 'react-native-modal-datetime-picker'
+
+import Input from '../input/Input'
+import s from './styles'
+import { IDatePickerProps } from './types'
+
+const DatePicker = ({
+  onSelectDate,
+  onCancel,
+  styles,
+  text = 'Select date',
+  selectedDate,
+  placeholder = 'Select date',
+  error,
+}: IDatePickerProps) => {
+  const [isVisible, setIsVisible] = useState(false)
+  const onButtonPress = () => {
+    setIsVisible(true)
+  }
+
+  const handleOnSelectDate = (date: Date) => {
+    if (onSelectDate) {
+      onSelectDate(date)
+    }
+    setIsVisible(false)
+  }
+
+  const handleOnCancel = () => {
+    if (onCancel) {
+      onCancel()
+    }
+    setIsVisible(false)
+  }
+
+  // Format date in a more readable way
+  const formatDate = (date: Date) => {
+    if (!date) return ''
+    // Format as MM/DD/YYYY
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const year = date.getFullYear()
+    return `${month}/${day}/${year}`
+  }
+
+  return (
+    <View style={[styles?.container, s.container]}>
+      <Input
+        label={text}
+        value={selectedDate ? formatDate(selectedDate) : ''}
+        placeholder={placeholder}
+        pointerEvents="none"
+        editable={false} // Prevent keyboard from showing
+        error={error}
+        styles={{
+          container: styles?.inputContainer,
+          input: styles?.input,
+          fieldWrapper: styles?.fieldWrapper,
+          baseColor: styles?.baseColor,
+          errorColor: styles?.errorColor,
+        }}
+      />
+      <Pressable
+        style={StyleSheet.absoluteFill} // covers the whole field
+        onPress={onButtonPress}
+      />
+      <DateTimePickerModal
+        isVisible={isVisible}
+        mode="date"
+        onConfirm={handleOnSelectDate}
+        onCancel={handleOnCancel}
+        date={selectedDate || new Date()}
+        maximumDate={new Date()}
+        pickerComponentStyleIOS={{ height: 200 }}
+      />
+    </View>
+  )
+}
+
+export default DatePicker

package/src/components/datePicker/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+const FONT_SIZE = 16
+
+export default StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+  },
+  label: {
+    fontSize: 12,
+    color: R.colors.primary,
+    marginBottom: 4,
+    fontWeight: '400',
+  },
+  button: {
+    width: '100%',
+    borderWidth: 1,
+    height: 56,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    borderColor: '#bdbdbd',
+    borderRadius: 4,
+    backgroundColor: 'transparent',
+  },
+  text: {
+    fontSize: FONT_SIZE,
+    paddingVertical: 8,
+    color: '#000000',
+  },
+  error: {
+    color: R.colors.danger,
+    fontSize: 12,
+    marginTop: 4,
+  },
+})

package/src/components/datePicker/types.ts

@@ -0,0 +1,21 @@
+import { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+export interface IDatePickerStyles {
+  container?: StyleProp<ViewStyle>
+  inputContainer?: StyleProp<ViewStyle>
+  fieldWrapper?: StyleProp<ViewStyle>
+  input?: StyleProp<TextStyle>
+  error?: StyleProp<TextStyle>
+  errorColor?: ColorValue
+  baseColor?: string
+}
+
+export interface IDatePickerProps {
+  onSelectDate: (date: Date) => void
+  onCancel?: () => void
+  text: string
+  selectedDate?: Date
+  styles?: IDatePickerStyles
+  error?: string
+  placeholder?: string
+}

package/src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,111 @@
+//@ts-nocheck
+
+import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  FlatList,
+  Image,
+  Modal,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+
+import R from '../../res'
+import Separator from '../separator/Separator'
+import DropdownListItem from './DropdownListItem'
+import { DropdownStyles as s } from './styles'
+import { IDropdownItem, IDropdownProps } from './types'
+
+const Dropdown = ({ items, selectedOption, onSelectItem, styles }: IDropdownProps) => {
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const flatListRef: MutableRefObject<FlatList> = useRef()
+
+  const showModal = () => {
+    requestAnimationFrame(() => {
+      setIsModalVisible(true)
+    })
+  }
+  const hideModal = () => {
+    requestAnimationFrame(() => {
+      setIsModalVisible(false)
+    })
+  }
+
+  const handleOnSelectItem = (item: IDropdownItem) => {
+    onSelectItem(item)
+    hideModal()
+  }
+
+  useEffect(() => {
+    if (flatListRef?.current) {
+      flatListRef.current.flashScrollIndicators()
+    }
+  }, [isModalVisible])
+
+  const renderItem = useCallback(
+    ({ item }) => (
+      <DropdownListItem
+        item={item}
+        onSelectItem={handleOnSelectItem}
+        selectedOption={selectedOption}
+        styles={styles?.listItem}
+      />
+    ),
+
+    [handleOnSelectItem, selectedOption]
+  )
+
+  const keyExtractor = useCallback((item: IDropdownItem) => item.value.toString(), [])
+
+  const renderSeparator = useCallback(() => <Separator />, [])
+
+  const getItemLayout = useCallback(
+    (data, index) => ({
+      length: 45,
+      offset: 45 * index,
+      index,
+    }),
+    []
+  )
+
+  return (
+    <View style={[s.rootContainer, styles?.container]}>
+      <TouchableOpacity onPress={showModal} style={[s.button, styles?.button]}>
+        <Text style={[s.label, styles?.label]}>{selectedOption?.label}</Text>
+        <Image source={R.icons.dropdown} style={[s.icon, styles?.icon]} />
+      </TouchableOpacity>
+      {isModalVisible && items.length > 0 && (
+        <Modal presentationStyle="overFullScreen" transparent={true}>
+          <View style={s.modalContainer}>
+            <TouchableOpacity
+              activeOpacity={1}
+              onPress={hideModal}
+              style={s.modalBackgroundTouchable}
+            >
+              <TouchableWithoutFeedback>
+                <View style={[s.dialog, styles?.dialog]}>
+                  <FlatList
+                    keyExtractor={keyExtractor}
+                    ref={flatListRef}
+                    indicatorStyle="black"
+                    data={items}
+                    extraData={items}
+                    maxToRenderPerBatch={6}
+                    initialNumToRender={6}
+                    renderItem={renderItem}
+                    ItemSeparatorComponent={renderSeparator}
+                    getItemLayout={getItemLayout}
+                    style={[s.flatListContainer, styles?.flatListContainer]}
+                  />
+                </View>
+              </TouchableWithoutFeedback>
+            </TouchableOpacity>
+          </View>
+        </Modal>
+      )}
+    </View>
+  )
+}
+
+export default Dropdown

package/src/components/dropdown/DropdownListItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Text, TouchableOpacity, View } from 'react-native'
+
+import { DropdownListItemStyles as s } from './styles'
+import { IDropdownListItemProps } from './types'
+
+const DropdownListItem = ({
+  item,
+  onSelectItem,
+  selectedOption,
+  styles,
+}: IDropdownListItemProps) => {
+  const handleOnSelectItem = () => onSelectItem(item)
+  const isSelected = !!selectedOption && selectedOption.value === item.value
+  const selectedStyles = [s.buttonSelected, styles?.buttonSelected]
+
+  const buttonStyles = [s.button, styles?.button]
+
+  return (
+    <View style={[s.rootContainer, styles?.container]}>
+      <TouchableOpacity
+        onPress={handleOnSelectItem}
+        style={isSelected ? selectedStyles : buttonStyles}
+      >
+        <Text
+          style={[s.text, isSelected ? styles?.textSelected : styles?.text]}
+          numberOfLines={2}
+        >
+          {item.label}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default DropdownListItem

package/src/components/dropdown/styles.ts

@@ -0,0 +1,97 @@
+import { Dimensions, StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+const { width: sWidth, height: sHeight } = Dimensions.get('window')
+
+const DIALOG = {
+  width: sWidth * 0.8,
+  maxHeight: sHeight * 0.5,
+  minHeight: sHeight * 0.2,
+}
+
+export const DropdownStyles = StyleSheet.create({
+  rootContainer: {
+    width: 50,
+  },
+  button: {
+    width: '100%',
+    borderWidth: 2,
+    height: 45,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    borderColor: R.colors.black,
+  },
+  icon: {
+    height: 14,
+    width: 14,
+    resizeMode: 'contain',
+    tintColor: R.colors.black,
+  },
+  label: {
+    color: R.colors.black,
+    fontSize: 16,
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.8)',
+  },
+  modalBackgroundTouchable: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dialog: {
+    backgroundColor: R.colors.white,
+    paddingVertical: 16,
+    borderRadius: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: DIALOG.width,
+    maxHeight: DIALOG.maxHeight,
+    minHeight: DIALOG.minHeight,
+    shadowColor: R.colors.black,
+    shadowOffset: {
+      width: 3,
+      height: 2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+  },
+  flatListContainer: {
+    width: DIALOG.width,
+  },
+})
+
+export const DropdownListItemStyles = StyleSheet.create({
+  rootContainer: {
+    paddingVertical: 4,
+    minWidth: 100,
+    alignItems: 'center',
+  },
+  button: {
+    width: '100%',
+    minHeight: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.white,
+    paddingHorizontal: 8,
+  },
+  buttonSelected: {
+    width: '100%',
+    minHeight: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.tint,
+    paddingHorizontal: 8,
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    color: R.colors.black,
+  },
+})

package/src/components/dropdown/types.ts

@@ -0,0 +1,38 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+export interface IDropdownItem {
+  label: string
+  value: string | number
+  [key: string]: string | number
+}
+
+export interface IDropdownListItemStyles {
+  container?: StyleProp<ViewStyle>
+  button?: StyleProp<ViewStyle>
+  buttonSelected?: StyleProp<ViewStyle>
+  text?: StyleProp<TextStyle>
+  textSelected?: StyleProp<TextStyle>
+}
+
+export interface IDropdownListItemProps {
+  item: IDropdownItem
+  onSelectItem: (item: IDropdownItem) => void
+  selectedOption?: IDropdownItem
+  styles?: IDropdownListItemStyles
+}
+
+export interface IDropdownStyles {
+  container?: StyleProp<ViewStyle>
+  button?: StyleProp<ViewStyle>
+  icon?: StyleProp<ImageStyle>
+  label?: StyleProp<TextStyle>
+  dialog?: StyleProp<ViewStyle>
+  flatListContainer?: StyleProp<ViewStyle>
+  listItem?: IDropdownListItemStyles
+}
+
+export interface IDropdownProps {
+  items: IDropdownItem[]
+  selectedOption?: IDropdownItem
+  onSelectItem: (item: IDropdownItem) => void
+  styles?: IDropdownStyles
+}

package/src/components/dropdownMaterial/DropdownMaterial.tsx

@@ -0,0 +1,129 @@
+//@ts-nocheck
+
+import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  FlatList,
+  Image,
+  Modal,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+
+import R from '../../res'
+import DropdownListItem from '../dropdown/DropdownListItem'
+import Input from '../input/Input'
+import Separator from '../separator/Separator'
+import { DropdownMaterialStyles as s } from './styles'
+import { IDropdownItem, IDropdownMaterialProps } from './types'
+
+const DropdownMaterial = ({
+  items,
+  selectedOption,
+  onSelectItem,
+  styles,
+  materialInputProps,
+}: IDropdownMaterialProps) => {
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const flatListRef: MutableRefObject<FlatList> = useRef()
+
+  const showModal = () => {
+    requestAnimationFrame(() => {
+      setIsModalVisible(true)
+    })
+  }
+  const hideModal = () => {
+    requestAnimationFrame(() => {
+      setIsModalVisible(false)
+    })
+  }
+
+  const handleOnSelectItem = (item: IDropdownItem) => {
+    onSelectItem(item)
+    hideModal()
+  }
+
+  useEffect(() => {
+    if (flatListRef?.current) {
+      flatListRef.current.flashScrollIndicators()
+    }
+  }, [isModalVisible])
+
+  const renderItem = useCallback(
+    ({ item }) => (
+      <DropdownListItem
+        item={item}
+        onSelectItem={handleOnSelectItem}
+        selectedOption={selectedOption}
+        styles={styles?.listItem}
+      />
+    ),
+
+    [handleOnSelectItem, selectedOption]
+  )
+
+  const keyExtractor = useCallback((item: IDropdownItem) => item.value.toString(), [])
+
+  const renderSeparator = useCallback(() => <Separator />, [])
+
+  const getItemLayout = useCallback(
+    (data, index) => ({
+      length: 45,
+      offset: 45 * index,
+      index,
+    }),
+    []
+  )
+
+  const RightComponent = useCallback(
+    () => <Image source={R.icons.dropdown} style={[s.icon, styles?.icon]} />,
+    [styles?.icon]
+  )
+
+  return (
+    <View style={[s.rootContainer, styles?.container]}>
+      <TouchableOpacity onPress={showModal} style={s.button}>
+        <Input
+          {...materialInputProps}
+          value={selectedOption?.label}
+          styles={styles?.input}
+          disabled={true}
+          pointerEvents="box-none"
+          disabledLineWidth={1}
+          renderRightAccessory={RightComponent}
+        />
+      </TouchableOpacity>
+      {isModalVisible && items.length > 0 && (
+        <Modal presentationStyle="overFullScreen" transparent={true}>
+          <View style={s.modalContainer}>
+            <TouchableOpacity
+              activeOpacity={1}
+              onPress={hideModal}
+              style={s.modalBackgroundTouchable}
+            >
+              <TouchableWithoutFeedback>
+                <View style={[s.dialog, styles?.dialog]}>
+                  <FlatList
+                    keyExtractor={keyExtractor}
+                    ref={flatListRef}
+                    indicatorStyle="black"
+                    data={items}
+                    extraData={items}
+                    maxToRenderPerBatch={6}
+                    initialNumToRender={6}
+                    renderItem={renderItem}
+                    ItemSeparatorComponent={renderSeparator}
+                    getItemLayout={getItemLayout}
+                    style={[s.flatListContainer, styles?.flatListContainer]}
+                  />
+                </View>
+              </TouchableWithoutFeedback>
+            </TouchableOpacity>
+          </View>
+        </Modal>
+      )}
+    </View>
+  )
+}
+
+export default DropdownMaterial

package/src/components/dropdownMaterial/styles.ts

@@ -0,0 +1,91 @@
+import { Dimensions, StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+const { width: sWidth, height: sHeight } = Dimensions.get('window')
+
+const DIALOG = {
+  width: sWidth * 0.8,
+  maxHeight: sHeight * 0.5,
+  minHeight: sHeight * 0.2,
+}
+
+export const DropdownMaterialStyles = StyleSheet.create({
+  rootContainer: {
+    width: '100%',
+    height: 45,
+    marginBottom: 32,
+  },
+  button: {
+    height: '120%',
+  },
+  icon: {
+    height: 14,
+    width: 14,
+    resizeMode: 'contain',
+    tintColor: R.colors.white,
+  },
+  label: {
+    color: R.colors.black,
+    fontSize: 16,
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.8)',
+  },
+  modalBackgroundTouchable: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dialog: {
+    backgroundColor: R.colors.white,
+    paddingVertical: 16,
+    borderRadius: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: DIALOG.width,
+    maxHeight: DIALOG.maxHeight,
+    shadowColor: R.colors.black,
+    shadowOffset: {
+      width: 3,
+      height: 2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+  },
+  flatListContainer: {
+    width: DIALOG.width,
+  },
+})
+
+export const DropdownListItemStyles = StyleSheet.create({
+  rootContainer: {
+    paddingVertical: 4,
+    minWidth: 100,
+    alignItems: 'center',
+  },
+  button: {
+    width: '100%',
+    minHeight: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.white,
+    paddingHorizontal: 8,
+  },
+  buttonSelected: {
+    width: '100%',
+    minHeight: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: R.colors.tint,
+    paddingHorizontal: 8,
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    color: R.colors.black,
+  },
+})

package/src/components/dropdownMaterial/types.ts

@@ -0,0 +1,24 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+import { IDropdownItem, IDropdownListItemStyles } from '../dropdown/types'
+import { IInputProps, IInputStyles } from '../input/types'
+
+export interface IDropdownMaterialStyles {
+  container?: StyleProp<ViewStyle>
+  button?: StyleProp<ViewStyle>
+  icon?: StyleProp<ImageStyle>
+  label?: StyleProp<TextStyle>
+  dialog?: StyleProp<ViewStyle>
+  flatListContainer?: StyleProp<ViewStyle>
+  listItem?: IDropdownListItemStyles
+  input?: IInputStyles
+}
+
+export interface IDropdownMaterialProps {
+  items: IDropdownItem[]
+  selectedOption?: IDropdownItem
+  onSelectItem: (item: IDropdownItem) => void
+  styles?: IDropdownMaterialStyles
+  isMaterial?: boolean
+  materialInputProps?: IInputProps
+}