ordering-ui-react-native 0.12.14 → 0.12.18

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

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

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

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

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