@os1-platform/dispatch-mobile 2.1.1 → 2.1.2

package/src/components/widgets/Card.tsx

@@ -1,99 +0,0 @@
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import React from 'react';
-import { Checkbox } from 'react-native-paper';
-import { Feather } from '@expo/vector-icons';
-
-interface CardProps {
-  title: string;
-  renderAdditionalHeader?: () => JSX.Element;
-  Body: JSX.Element;
-  editConfig?: {
-    props: any;
-    onEdit: (props: any) => void;
-  };
-  selectConfig?: {
-    isSelected: boolean;
-    props: any;
-    onSelect: (props: any) => void;
-  };
-}
-
-const Card = (props: CardProps) => {
-  const isSelected = props.selectConfig?.isSelected ? 'checked' : 'unchecked';
-
-  return (
-    <View style={styles.container}>
-      {props.selectConfig ? (
-        <View>
-          <Checkbox
-            status={isSelected}
-            onPress={() => {
-              props.selectConfig?.onSelect(props.selectConfig?.props);
-            }}
-            theme={{ roundness: 5 }}
-          />
-        </View>
-      ) : null}
-      <View style={styles.body}>
-        <View style={styles.header}>
-          <Text style={styles.title}>{props.title}</Text>
-          {props.renderAdditionalHeader?.()}
-        </View>
-        {props.Body}
-      </View>
-      {props.editConfig ? (
-        <>
-          <View style={styles.divider} />
-          <TouchableOpacity
-            onPress={() => props.editConfig?.onEdit(props.editConfig?.props)}
-            style={styles.icon}
-          >
-            <Feather name="edit" size={24} color="#5B80F7" />
-          </TouchableOpacity>
-        </>
-      ) : null}
-    </View>
-  );
-};
-
-export default Card;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    marginVertical: 10,
-    marginHorizontal: 16,
-    borderWidth: 1,
-    borderColor: '#E0E3EB',
-    borderRadius: 8,
-    // height: 150,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  body: {
-    flex: 1,
-  },
-  title: {
-    fontSize: 16,
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: 24,
-    marginRight: 8,
-  },
-  divider: {
-    height: '90%',
-    width: 2,
-    backgroundColor: '#E0E3EB',
-    alignSelf: 'center',
-  },
-  icon: {
-    alignSelf: 'center',
-    margin: 10,
-  },
-});

package/src/components/widgets/GoBackModal.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import ModalWidget from './ModalWidget';
-import { StyleSheet } from 'react-native';
-
-interface GoBackModalProps {
-  showModal: boolean;
-  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
-  onSuccess: () => any;
-  onFailure: () => any;
-}
-
-const GoBackModal = (props: GoBackModalProps) => {
-  return (
-    <ModalWidget
-      dismissable={true}
-      showModal={props.showModal}
-      title={{ label: 'Are you sure you want to go back?' }}
-      primaryButton={{
-        label: 'Yes',
-        onPress: props.onSuccess,
-        styles: modalStyles.primaryButtonStyles,
-      }}
-      secondaryButton={{
-        label: 'No',
-        onPress: props.onFailure,
-        styles: modalStyles.secondaryButtonStyles,
-      }}
-    />
-  );
-};
-
-export default GoBackModal;
-
-const modalStyles = StyleSheet.create({
-  primaryButtonStyles: {
-    marginTop: 16,
-    height: 40,
-    borderRadius: 6,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  secondaryButtonStyles: {
-    marginVertical: 16,
-    height: 40,
-    borderRadius: 6,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/src/components/widgets/IconButton.tsx

@@ -1,32 +0,0 @@
-import { Text, TouchableOpacity, View } from 'react-native';
-import React from 'react';
-
-const IconButton = ({
-  title,
-  onPress,
-  icon,
-  style,
-  textStyles,
-}: {
-  title: string;
-  onPress: (e: any) => void;
-  icon?: any;
-  style?: any;
-  textStyles?: any;
-}) => (
-  <TouchableOpacity style={style} onPress={onPress}>
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'space-between',
-        flexDirection: 'row',
-        alignItems: 'center',
-      }}
-    >
-      <Text style={textStyles}>{title}</Text>
-      {icon}
-    </View>
-  </TouchableOpacity>
-);
-
-export default IconButton;

package/src/components/widgets/ModalWidget.tsx

@@ -1,157 +0,0 @@
-import { View, Text, StyleSheet, ViewStyle, TextStyle, Platform } from 'react-native';
-import React from 'react';
-import { Portal, Modal } from 'react-native-paper';
-import { CommonStyles, Fonts } from '../../styles/executionTasks/CommonStyles';
-import { TouchableOpacity } from 'react-native';
-
-interface ButtonProps {
-  label: string;
-  disabled?: boolean;
-  onPress: (() => void) | (() => Promise<any>);
-  styles?: ViewStyle;
-  labelStyles?: TextStyle;
-}
-
-interface TitleProps {
-  label: string;
-  styles?: TextStyle;
-}
-
-export interface ModalProps {
-  showModal: boolean;
-  dismissable?: boolean;
-  title: TitleProps;
-  subTitle?: TitleProps;
-  contentContainerStyle?: ViewStyle;
-  modalStyle?: ViewStyle;
-  bodyStyle?: ViewStyle;
-  renderChildren?: () => JSX.Element;
-  buttonStyle?: ViewStyle;
-  primaryButton: ButtonProps;
-  secondaryButton: ButtonProps;
-  renderAdditionalButtons?: () => JSX.Element;
-  renderAdditionalHeader?: () => JSX.Element;
-}
-
-const ModalWidget = (props: ModalProps) => {
-  const {
-    dismissable = true,
-    contentContainerStyle = {},
-    modalStyle = {},
-    title: { styles: titleStyle = {} },
-    subTitle: { styles: subTitleStyle = {} } = {},
-    bodyStyle = {},
-    buttonStyle = {},
-    primaryButton: {
-      disabled: primaryButtonDisabled = false,
-      styles: primaryBtnStyles = {},
-      labelStyles: primaryBtnLabelStyles = {},
-    },
-    secondaryButton: {
-      disabled: secondaryButtonDisabled = false,
-      styles: secondaryBtnStyles = {},
-      labelStyles: secondaryBtnLabelStyles = {},
-    },
-  } = props;
-  return (
-    <Portal>
-      <Modal
-        visible={props.showModal}
-        dismissable={dismissable}
-        contentContainerStyle={[styles.modalContent, contentContainerStyle]}
-      >
-        <View style={[styles.modalView, modalStyle]}>
-          <View style={bodyStyle}>
-            {props.renderAdditionalHeader?.()}
-            <Text style={[styles.titleText, titleStyle]}>
-              {props.title.label}
-            </Text>
-            {props.subTitle ? (
-              <Text style={[styles.subTitleText, subTitleStyle]}>
-                {props.subTitle.label}
-              </Text>
-            ) : null}
-            {props.renderChildren?.()}
-          </View>
-
-          <View style={buttonStyle}>
-            <TouchableOpacity
-              style={[CommonStyles.nextButton, primaryBtnStyles]}
-              onPress={props.primaryButton.onPress}
-              disabled={primaryButtonDisabled}
-            >
-              <Text
-                style={[CommonStyles.nextButtonLabel, primaryBtnLabelStyles]}
-              >
-                {props.primaryButton.label}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[CommonStyles.cancelButton, secondaryBtnStyles]}
-              onPress={props.secondaryButton.onPress}
-              disabled={secondaryButtonDisabled}
-            >
-              <Text
-                style={[
-                  CommonStyles.cancelButtonLabel,
-                  secondaryBtnLabelStyles,
-                ]}
-              >
-                {props.secondaryButton.label}
-              </Text>
-            </TouchableOpacity>
-            {props.renderAdditionalButtons?.()}
-          </View>
-        </View>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default ModalWidget;
-
-interface StyleSheetType {
-  modalContent: ViewStyle;
-  modalView: ViewStyle;
-  titleText: TextStyle;
-  subTitleText: TextStyle;
-}
-
-const styles = StyleSheet.create<StyleSheetType>({
-  modalContent: {
-    marginStart: 60,
-    marginEnd: 60,
-    marginBottom: 60,
-    flex: 1,
-  },
-  modalView: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderRadius: 9,
-  },
-  titleText: {
-    justifyContent: 'center',
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_600SemiBold
-        : 'IBMPlexSans-SemiBold',
-    fontStyle: 'normal',
-    fontSize: 14,
-    lineHeight: 20,
-    textAlign: 'center',
-    color: '#111111',
-    marginBottom: 10,
-  },
-  subTitleText: {
-    justifyContent: 'center',
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_400Regular
-        : 'IBMPlexSans-Regular',
-    fontStyle: 'normal',
-    fontSize: 14,
-    lineHeight: 20,
-    color: '#000000',
-    marginBottom: 10,
-  },
-});

package/src/components/widgets/ProgressDialog.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { ActivityIndicator, Modal, Platform, StyleSheet, Text, View } from 'react-native';
-import { Fonts } from '../../styles/executionTasks/CommonStyles';
-
-const ProgressDialog = (props: ProgressDialogProps) => {
-  return (
-    <Modal
-      animationType="none"
-      transparent={true}
-      visible={props.visible}
-      onRequestClose={() => {}}
-    >
-      <View style={styles.wrapper}>
-        <View style={styles.content}>
-          <ActivityIndicator size="large" color="rgba(107, 142, 255, 1)" />
-          <Text style={[styles.label]}>{props.label}</Text>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  label: {
-    color: 'black',
-    textAlign: 'center',
-    fontStyle: 'normal',
-    fontSize: 15,
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_600SemiBold
-        : 'IBMPlexSans-SemiBold',
-  },
-  content: {
-    backgroundColor: 'white',
-    padding: 10,
-    borderRadius: 5,
-    width: '80%',
-    alignItems: 'center',
-  },
-  wrapper: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0,0,0,0.7)',
-  },
-});
-
-export default ProgressDialog;
-
-export interface ProgressDialogProps {
-  visible: boolean;
-  label: string;
-}

package/src/components/widgets/SearchBar.tsx

@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
-import { EvilIcons, MaterialIcons } from '@expo/vector-icons';
-
-interface SearchBarProps {
-  searchText: string;
-  setSearchText: (searchText: string) => void;
-  onChangeSearch: (searchText: string) => any;
-  placeholder: string;
-  onClear: () => any;
-}
-
-const SearchBar = (props: SearchBarProps) => {
-  const { searchText, setSearchText } = props;
-  const handleSearch = (text: string) => {
-    props.onChangeSearch(text);
-  };
-  const handleClear = () => {
-    props.onClear();
-    setSearchText('');
-  };
-
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity style={styles.iconContainer}>
-        <EvilIcons name="search" size={24} color="#525B7A" />
-      </TouchableOpacity>
-      <View style={styles.inputContainer}>
-        <TextInput
-          style={styles.input}
-          placeholder={props.placeholder}
-          onChangeText={(text) => {
-            handleSearch(text);
-            setSearchText(text);
-          }}
-          value={searchText}
-        />
-      </View>
-      {searchText ? (
-        <TouchableOpacity style={styles.iconContainer} onPress={handleClear}>
-          <MaterialIcons name="clear" size={24} color="#525B7A" />
-        </TouchableOpacity>
-      ) : null}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#ffffff',
-    borderRadius: 6,
-    paddingHorizontal: 12,
-    borderWidth: 1,
-    borderColor: '#DDDDDD',
-    marginHorizontal: 16,
-  },
-  inputContainer: {
-    flex: 1,
-  },
-  input: {
-    height: 40,
-  },
-  iconContainer: {
-    paddingLeft: 4,
-    paddingRight: 8,
-  },
-});
-
-export default SearchBar;

package/src/components/widgets/SnackBarCustom.tsx

@@ -1,212 +0,0 @@
-import React from 'react';
-import {
-  Animated,
-  Platform,
-  SafeAreaView,
-  StyleProp,
-  StyleSheet,
-  Text,
-  View,
-  ViewStyle,
-} from 'react-native';
-import { Surface, withTheme } from 'react-native-paper';
-import { AntDesign } from '@expo/vector-icons';
-import { Fonts } from '../../styles/executionTasks/CommonStyles';
-
-export interface SnackbarProps {
-  visible: boolean;
-  duration?: number;
-  /**
-   * Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called.
-   */
-  onDismiss: () => void;
-  /**
-   * Text content of the Snackbar.
-   */
-  message: string;
-  type?: SnackBarType;
-  theme: ReactNativePaper.Theme;
-  customBottom?: number;
-}
-const DURATION_MEDIUM = 3000;
-
-export enum SnackBarType {
-  SUCCESS,
-  FAILURE,
-  WARNING,
-}
-
-const SnackbarCustom = ({
-  visible,
-  duration = DURATION_MEDIUM,
-  onDismiss,
-  message,
-  theme,
-  type,
-  customBottom = 110,
-}: SnackbarProps) => {
-  const { current: opacity } = React.useRef<Animated.Value>(
-    new Animated.Value(0.0)
-  );
-  const [hidden, setHidden] = React.useState<boolean>(!visible);
-
-  const hideTimeout = React.useRef<NodeJS.Timeout | undefined>(undefined);
-  const { scale } = theme.animation;
-
-  React.useEffect(() => {
-    return () => {
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
-    };
-  }, []);
-
-  React.useLayoutEffect(() => {
-    if (visible) {
-      // show
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
-      setHidden(false);
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 200 * scale,
-        useNativeDriver: true,
-      }).start(({ finished }) => {
-        if (finished) {
-          const isInfinity =
-            duration === Number.POSITIVE_INFINITY ||
-            duration === Number.NEGATIVE_INFINITY;
-
-          if (finished && !isInfinity) {
-            hideTimeout.current = setTimeout(
-              onDismiss,
-              duration
-            ) as unknown as NodeJS.Timeout;
-          }
-        }
-      });
-    } else {
-      // hide
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
-
-      Animated.timing(opacity, {
-        toValue: 0,
-        duration: 100 * scale,
-        useNativeDriver: true,
-      }).start(({ finished }) => {
-        if (finished) setHidden(true);
-      });
-    }
-  }, [visible, duration, opacity, scale, onDismiss]);
-
-  const { colors, roundness } = theme;
-
-  if (hidden) return null;
-
-  if (!message) return null;
-
-  return (
-    <SafeAreaView
-      pointerEvents="box-none"
-      style={[styles.wrapper, { bottom: customBottom }]}
-    >
-      <Surface
-        pointerEvents="box-none"
-        accessibilityLiveRegion="polite"
-        style={
-          [
-            styles.container,
-            {
-              borderRadius: roundness,
-              opacity: opacity,
-              transform: [
-                {
-                  scale: visible
-                    ? opacity.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0.9, 1],
-                      })
-                    : 1,
-                },
-              ],
-            },
-            { backgroundColor: colors.onSurface },
-          ] as StyleProp<ViewStyle>
-        }
-      >
-        <View
-          style={
-            type && type === SnackBarType.FAILURE
-              ? styles.fail
-              : type && type === SnackBarType.WARNING
-              ? styles.warn
-              : styles.main
-          }
-        >
-          {type && type === SnackBarType.FAILURE ? (
-            <AntDesign name="exclamationcircleo" size={20} color="white" />
-          ) : (
-            <AntDesign name="checkcircleo" size={20} color="white" />
-          )}
-          <Text style={styles.messageStyle}>{message}</Text>
-          <AntDesign
-            name="close"
-            size={16}
-            color="white"
-            onPress={() => {
-              setHidden(true);
-            }}
-          />
-        </View>
-      </Surface>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    bottom: 110,
-    width: '100%',
-    zIndex: 1000,
-  },
-  container: {
-    elevation: 6,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    margin: 8,
-    borderRadius: 4,
-  },
-  main: {
-    padding: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#059669',
-    flex: 1,
-  },
-  fail: {
-    padding: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#DC2626',
-    flex: 1,
-  },
-  warn: {
-    padding: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#D97706',
-    flex: 1,
-  },
-  messageStyle: {
-    flex: 1,
-    marginStart: 20,
-    marginEnd: 20,
-    color: '#ffffff',
-    fontWeight: '600',
-    fontFamily:
-      Platform.OS === 'android'
-        ? Fonts.IBMPlexSans_600SemiBold
-        : 'IBMPlexSans-SemiBold',
-  },
-});
-
-export default withTheme(SnackbarCustom);