@os1-platform/dispatch-mobile 2.0.8 → 2.1.0

package/src/components/widgets/Card.tsx

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

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

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

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

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

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

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