tf-checkout-react-native 1.0.47 → 2.0.0-beta.5

package/src/components/datePicker/DatePicker.tsx

@@ -1,81 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,111 +0,0 @@
-//@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

@@ -1,36 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,129 +0,0 @@
-//@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

@@ -1,91 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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
-}