ordering-ui-react-native 0.12.18 → 0.12.19

package/themes/business/src/components 2/shared/ODropDown.tsx

@@ -1,195 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import styled, { css, useTheme } from 'styled-components/native'
-import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
-import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View } from 'react-native'
-import FeatherIcon from 'react-native-vector-icons/Feather';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { Text } from 'react-native-paper';
-
-interface Props {
-  secondary?: boolean,
-  options?: any;
-  defaultValue?: any,
-  placeholder?: string,
-  onSelect?: any,
-  style?: any,
-  dropViewMaxHeight?: any,
-  isModal?: any,
-  bgcolor?: string,
-  textcolor?: string
-}
-
-const Wrapper = styled.View`
-  position: relative;
-`
-const Selected = styled.TouchableOpacity`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  padding: 15px;
-  border-radius: 10px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.bgcolor || (props.secondary ? props.theme.colors.lightGray : props.theme.colors.primary)};
-  background-color: ${(props: any) => props.bgcolor || (props.secondary ? props.theme.colors.white : props.theme.colors.primary)};
-`
-const SelectedLabel = styled.Text`
-  font-size: 16px;
-  color: ${(props: any) => props.textcolor || (props.secondary ? props.theme.colors.black : props.theme.colors.white)};
-`
-
-const DropView = styled.View`
-  position: absolute;
-  z-index: 9999;
-  top: 65px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.inputChat};
-  shadow-color: 'rgba(0.0, 0.0, 0.0, 0.5)';
-  shadow-opacity: 0.21;
-  elevation: 7;
-  background-color: ${(props: any) => props.theme.colors.white};
-  border-radius: 7.6px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 100%;
-`
-const DropOption = styled.View`
-  padding: 15px;
-  font-size: 16px;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
-  flex-direction: row;
-  align-items: center;
-`
-
-const ODropDown = (props: Props) => {
-  const {
-    secondary,
-    options,
-    defaultValue,
-    placeholder,
-    onSelect,
-    dropViewMaxHeight,
-    isModal
-  } = props
-
-  const theme = useTheme();
-
-  const [isOpen, setIsOpen] = useState(false)
-  const defaultOption = options?.find((option: any) => option.value === defaultValue)
-  const [selectedOption, setSelectedOption] = useState<any>(defaultOption)
-  const [value, setValue] = useState(defaultValue)
-
-  const onToggle = () => {
-    setIsOpen(!isOpen)
-  }
-
-  const onSelectOption = (option: any) => {
-    setSelectedOption(option)
-    setValue(option.value)
-    onSelect(option.name || option.value)
-    setIsOpen(false)
-  }
-
-  useEffect(() => {
-    const _defaultOption = options?.find((option: any) => option.value === defaultValue)
-    setSelectedOption(_defaultOption)
-    setValue(defaultValue)
-  }, [defaultValue, options])
-
-  return (
-    <Wrapper style={props.style}>
-      <Selected
-        secondary={secondary}
-        bgcolor={props.bgcolor}
-        onPress={() => onToggle()}
-      >
-        <SelectedLabel
-          secondary={secondary}
-          textcolor={props.textcolor}
-        >
-          {selectedOption?.content || selectedOption?.name || placeholder}
-        </SelectedLabel>
-        <FeatherIcon
-          name='chevron-down'
-          color={props.textcolor}
-          size={24}
-        />
-      </Selected>
-      {isOpen && options && (
-        <DropView
-          secondary={secondary}
-        >
-          {!isModal ? (
-            <ScrollView style={{
-              maxHeight: dropViewMaxHeight || null
-            }}
-            >
-              {options.map((option: any, index: number) => (
-                <TouchableOpacity
-                  key={index}
-                  onPress={() => onSelectOption(option)}
-                >
-                  <View style={{ marginRight: 10 }}>
-                    {value === option.value ? (
-                      <MaterialCommunityIcons
-                        name='radiobox-marked'
-                        size={24}
-                        color={theme.colors.primary}
-                      />
-                    ) : (
-                      <MaterialCommunityIcons
-                        name='radiobox-blank'
-                        size={24}
-                        color={theme.colors.primary}
-                      />
-                    )}
-                  </View>
-                  <Text>{option.content || option.name}</Text>
-                </TouchableOpacity>
-              ))}
-            </ScrollView>
-          ) : (
-            <CustomScrollView style={{
-              maxHeight: dropViewMaxHeight || null,
-              paddingBottom: 15
-            }}
-            nestedScrollEnabled={true}
-            >
-              {options.map((option: any, index: number) => (
-                <CustomTouchableOpacity
-                  key={index}
-                  onPress={() => onSelectOption(option)}
-                >
-                  <DropOption
-                    numberOfLines={1}
-                    selected={value === option.value}
-                  >
-                    <View style={{ marginRight: 10 }}>
-                      {value === option.value ? (
-                        <MaterialCommunityIcons
-                          name='radiobox-marked'
-                          size={24}
-                          color={theme.colors.primary}
-                        />
-                      ) : (
-                        <MaterialCommunityIcons
-                          name='radiobox-blank'
-                          size={24}
-                          color={theme.colors.arrowColor}
-                        />
-                      )}
-                    </View>
-                    <Text>{option.content || option.name}</Text>
-                  </DropOption>
-                </CustomTouchableOpacity>
-              ))}
-            </CustomScrollView>
-          )}
-        </DropView>
-      )}
-    </Wrapper>
-  )
-}
-
-export default ODropDown

package/themes/business/src/components 2/shared/ODropDownCalendar.tsx

@@ -1,328 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import styled, { css, useTheme } from 'styled-components/native'
-import { useLanguage } from 'ordering-components/native';
-import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
-import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View, useWindowDimensions } from 'react-native'
-import FeatherIcon from 'react-native-vector-icons/Feather';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { Text } from 'react-native-paper';
-import CalendarPicker from 'react-native-calendar-picker';
-
-interface Props {
-  secondary?: boolean,
-  options?: any;
-  defaultValue?: any,
-  placeholder?: string,
-  onSelect?: any,
-  style?: any,
-  dropViewMaxHeight?: any,
-  isModal?: any,
-  bgcolor?: string,
-  textcolor?: string,
-  isCalendar?: boolean,
-  handleChangeDate?: any,
-  rangeDate?: any
-}
-
-const Wrapper = styled.View`
-  position: relative;
-`
-const Selected = styled.TouchableOpacity`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  padding: 15px;
-  border-radius: 10px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.bgcolor || (props.secondary ? props.theme.colors.lightGray : props.theme.colors.primary)};
-  background-color: ${(props: any) => props.bgcolor || (props.secondary ? props.theme.colors.white : props.theme.colors.primary)};
-`
-const SelectedLabel = styled.Text`
-  font-size: 16px;
-  color: ${(props: any) => props.textcolor || (props.secondary ? props.theme.colors.black : props.theme.colors.white)};
-`
-
-const DropView = styled.View`
-  position: absolute;
-  z-index: 9999;
-  top: 65px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.inputChat};
-  shadow-color: 'rgba(0.0, 0.0, 0.0, 0.5)';
-  shadow-opacity: 0.21;
-  elevation: 7;
-  background-color: ${(props: any) => props.theme.colors.white};
-  border-radius: 7.6px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 100%;
-`
-const DropOption = styled.View`
-  padding: 15px;
-  font-size: 16px;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.lightGray};
-  flex-direction: row;
-  align-items: center;
-`
-
-const DateInput = styled.TextInput`
-  flex-grow: 1;
-  flex: 1;
-  min-height: 36px;
-  font-size: 12px;
-  font-family: 'Poppins-Regular';
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.tabBar};
-  padding: 7px 14px;
-  color: ${(props: any) => props.theme.colors.backArrow};
-  ${({ active }: { active: boolean }) => active && css`
-    border-color: ${(props: any) => props.theme.colors.primary};
-  `}
-`;
-
-const ODropDownCalendar = (props: Props) => {
-  const {
-    secondary,
-    options,
-    defaultValue,
-    placeholder,
-    onSelect,
-    dropViewMaxHeight,
-    isModal,
-    isCalendar,
-    handleChangeDate,
-    rangeDate
-  } = props
-
-  const theme = useTheme();
-  const { width } = useWindowDimensions();
-  const [, t] = useLanguage();
-
-  const [isOpen, setIsOpen] = useState(false)
-  const defaultOption = options?.find((option: any) => option.value === defaultValue)
-  const [selectedOption, setSelectedOption] = useState<any>(defaultOption)
-  const [value, setValue] = useState(defaultValue)
-
-  const onToggle = () => {
-    setIsOpen(!isOpen)
-  }
-
-  const onSelectOption = (option: any) => {
-    setSelectedOption(option)
-    setValue(option.value)
-    onSelect(option.name || option.value)
-    setIsOpen(false)
-  }
-
-  const onDateChange = (date: any, type: any) => {
-    if (!date) return
-    if (type === 'END_DATE') {
-      handleChangeDate(rangeDate.from, date.format('MM/DD/YY'))
-    } else {
-      handleChangeDate(date.format('MM/DD/YY'), '')
-    }
-  }
-
-  const customDayHeaderStylesCallback = () => {
-		return {
-			textStyle: {
-				color: theme.colors.unselectText,
-				fontSize: 12,
-			},
-		};
-	};
-
-  const calendarText = (from: any, to: any, placeholder: any) => {
-    const end = ` ~ ${to}`
-    return (from || to) ? (from + (to ? end : '')) : placeholder
-  }
-
-  useEffect(() => {
-    const _defaultOption = options?.find((option: any) => option.value === defaultValue)
-    setSelectedOption(_defaultOption)
-    setValue(defaultValue)
-  }, [defaultValue, options])
-
-  return (
-    <Wrapper style={props.style}>
-      <Selected
-        secondary={secondary}
-        bgcolor={props.bgcolor}
-        onPress={() => onToggle()}
-      >
-        <SelectedLabel
-          secondary={secondary}
-          textcolor={props.textcolor}
-        >
-          {
-            defaultValue === 'calendar'
-              ? `${calendarText(rangeDate.from, rangeDate.to, placeholder)}`
-              : `${selectedOption?.content || selectedOption?.name || placeholder}`
-          }
-        </SelectedLabel>
-        <FeatherIcon
-          name='calendar'
-          color={theme.colors.backArrow}
-          size={24}
-        />
-      </Selected>
-      {isOpen && options && (
-        <DropView
-          secondary={secondary}
-        >
-          {!isModal ? (
-            <ScrollView style={{
-              maxHeight: dropViewMaxHeight || null
-            }}
-            >
-              {options.map((option: any, index: number) => (
-                <TouchableOpacity
-                  key={index}
-                  onPress={() => onSelectOption(option)}
-                >
-                  <View style={{ marginRight: 10 }}>
-                    {value === option.value ? (
-                      <MaterialCommunityIcons
-                        name='radiobox-marked'
-                        size={24}
-                        color={theme.colors.primary}
-                      />
-                    ) : (
-                      <MaterialCommunityIcons
-                        name='radiobox-blank'
-                        size={24}
-                        color={theme.colors.primary}
-                      />
-                    )}
-                  </View>
-                  <Text>{option.content || option.name}</Text>
-                </TouchableOpacity>
-              ))}
-            </ScrollView>
-          ) : (
-            <CustomScrollView style={{
-              maxHeight: dropViewMaxHeight || null
-            }}
-            nestedScrollEnabled={true}
-            >
-              {options.map((option: any, index: number) => (
-                <CustomTouchableOpacity
-                  key={index}
-                  onPress={() => onSelectOption(option)}
-                >
-                  <DropOption
-                    numberOfLines={1}
-                    selected={value === option.value}
-                  >
-                    <View style={{ marginRight: 10 }}>
-                      {value === option.value ? (
-                        <MaterialCommunityIcons
-                          name='radiobox-marked'
-                          size={24}
-                          color={theme.colors.primary}
-                        />
-                      ) : (
-                        <MaterialCommunityIcons
-                          name='radiobox-blank'
-                          size={24}
-                          color={theme.colors.arrowColor}
-                        />
-                      )}
-                    </View>
-                    <Text>{option.content || option.name}</Text>
-                  </DropOption>
-                </CustomTouchableOpacity>
-              ))}
-              {isCalendar && (
-                <>
-                  <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    marginTop: 10
-                  }}>
-                    <View style={{marginRight: 10, flex: 1, marginBottom: 15}}>
-                      <Text style={{marginBottom: 5}}>{t('FROM', 'From')}</Text>
-                      <DateInput
-                        value={rangeDate.from}
-                        placeholder={t('FROM', 'From')}
-                        autoCorrect={false}
-                        style={{
-                          borderRadius: 7.6
-                        }}
-                        active={defaultValue === 'calendar'}
-                        onFocus={() => onSelect('calendar')}
-                      />
-                      <AntDesign
-                        name='close'
-                        color={theme.colors.disabled}
-                        size={20}
-                        style={{position: 'absolute', bottom: 13, right: 10}}
-                        onPress={() => handleChangeDate('', rangeDate.to)}
-                      />
-                    </View>
-                    <View style={{marginLeft: 10, flex: 1, marginBottom: 15}}>
-                      <Text style={{marginBottom: 5}}>{t('TO', 'To')}</Text>
-                      <DateInput
-                        value={rangeDate.to}
-                        placeholder={t('TO', 'To')}
-                        autoCorrect={false}
-                        style={{
-                          borderRadius: 7.6
-                        }}
-                        active={defaultValue === 'calendar'}
-                        onFocus={() => onSelect('calendar')}
-                      />
-                      <AntDesign
-                        name='close'
-                        color={theme.colors.disabled}
-                        size={20}
-                        style={{position: 'absolute', bottom: 13, right: 10}}
-                        onPress={() => handleChangeDate(rangeDate.from, '')}
-                      />
-                    </View>
-                  </View>
-                  {
-                    defaultValue === 'calendar' && (
-                      <CalendarPicker
-                        previousComponent={
-                          <FeatherIcon
-                            name='chevron-left'
-                            color={theme.colors.disabled}
-                            size={24}
-                            style={{ marginHorizontal: 4 }}
-                          />
-                        }
-                        nextComponent={
-                          <FeatherIcon
-                            name='chevron-right'
-                            color={theme.colors.disabled}
-                            size={24}
-                            style={{ marginHorizontal: 4 }}
-                          />
-                        }
-                        width={width - 80}
-                        startFromMonday={true}
-                        allowRangeSelection={true}
-                        selectedDayTextColor={theme.colors.textGray}
-                        selectedDayColor={theme.colors.forgotText}
-                        todayBackgroundColor={theme.colors.border}
-                        dayLabelsWrapper={{ borderColor: theme.colors.clear }}
-                        onDateChange={onDateChange}
-                        customDayHeaderStyles={customDayHeaderStylesCallback}
-                      />
-                    )
-                  }
-                </>
-              )}
-            </CustomScrollView>
-          )}
-        </DropView>
-      )}
-    </Wrapper>
-  )
-}
-
-export default ODropDownCalendar

package/themes/business/src/components 2/shared/OFab.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-  TouchableOpacity,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons';
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-interface Props {
-  iconName: string;
-  onPress: () => void;
-  style?: StyleProp<ViewStyle>;
-  materialIcon?: boolean
-}
-const OFab = ({ iconName, materialIcon, onPress, style = {} }: Props) => {
-  return (
-    <View style={{ ...(style as any) }}>
-      <TouchableOpacity
-        activeOpacity={0.8}
-        onPress={onPress}
-        style={styles.blackButton}>
-        {materialIcon ? (
-          <MaterialIcon name={iconName} color="white" size={20} />
-        ) : (
-          <Icon name={iconName} color="white" size={20} />
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  blackButton: {
-    zIndex: 9999,
-    height: 30,
-    width: 30,
-    backgroundColor: 'black',
-    borderRadius: 100,
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 3,
-    },
-    shadowOpacity: 0.27,
-    shadowRadius: 4.65,
-    elevation: 6,
-  },
-});
-
-export default OFab;

package/themes/business/src/components 2/shared/OIcon.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { ImageStyle } from 'react-native';
-import styled from 'styled-components/native';
-import { useTheme } from 'styled-components/native';
-
-const Wrapper = styled.View``;
-
-const SImage = styled.Image`
-  tint-color: ${(props: any) => props.theme.colors.primary};
-`;
-interface Props {
-  src?: any;
-  url?: string;
-  dummy?: any;
-  color?: string;
-  width?: number;
-  height?: number;
-  style?: ImageStyle;
-  isWrap?: boolean;
-  cover?: boolean;
-  children?: any;
-  borderRadius?: number;
-  borderBottomWidth?: number
-}
-
-const OImage = (props: Props): React.ReactElement => {
-  const theme = useTheme();
-  return (
-    <Wrapper
-      style={{
-        borderRadius: props.style?.borderRadius,
-        overflow: 'hidden',
-        marginHorizontal: props.style?.marginHorizontal,
-        borderBottomWidth: props.borderBottomWidth
-      }}>
-      <SImage
-        source={
-          props.src
-            ? props.src
-            : props.url
-            ? { uri: props.url }
-            : props.dummy
-            ? props.dummy
-            : theme.images.logos.logo
-        }
-        style={{
-          tintColor: props.color,
-          flex: props.isWrap ? 1 : 0,
-          width: props.width,
-          height: props.height,
-          marginHorizontal: 0,
-          borderRadius: props.borderRadius,
-          ...props.style,
-        }}
-        resizeMode={props.cover ? 'cover' : 'contain'}>
-        {props.children}
-      </SImage>
-    </Wrapper>
-  );
-};
-
-OImage.defaultProps = {
-  width: 26,
-  height: 26,
-};
-
-export default OImage;