@os1-platform/dispatch-mobile 2.1.2 → 2.1.3

package/src/components/executiontasks/scan/sub_components/ERDropDown.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react';
+import { Fonts } from '../../../../styles/executionTasks/CommonStyles';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+import DropDownPicker from 'react-native-dropdown-picker';
+import FIcon from 'react-native-vector-icons/FontAwesome';
+
+function getDropDownItems(erItem: ercItem[]) {
+  if (!erItem || erItem.length === 0) return [];
+  let items: {
+    label: string;
+    value: string;
+    // icon: () => JSX.Element;
+  }[] = [];
+
+  erItem.forEach((it) => {
+    items.push({
+      label: it.text,
+      value: it.code,
+      // icon: () => (
+      //   <FIcon
+      //     size={10}
+      //     name={'circle'}
+      //     color={it.success ? '#10B981' : '#A5A4A4'}
+      //   />
+      // ),
+    });
+  });
+  return items;
+}
+
+function findERByCode(code: string, ercItems: ercItem[]): ercItem | null {
+  if (!ercItems || ercItems.length === 0) return null;
+  for (let i = 0; i < ercItems.length; i++) {
+    if (ercItems[i].code === code) {
+      return ercItems[i];
+    }
+  }
+  return ercItems[0];
+}
+
+const ERDropDown = (props: DropDownPickerProps) => {
+  const [open, setOpen] = useState(false);
+  const [selectedReason, setSelectedReason] = useState('');
+
+  useEffect(() => {
+    setSelectedReason(props.selectedReason?.code || '');
+  }, [props.selectedReason]);
+
+  // Close dropdown if it's open and the content is changed
+  useEffect(() => {
+    if (!props.items.length) setOpen(false);
+  }, [props.items]);
+
+  const zIndex = props.title.toLowerCase().includes('event') ? 10 : 5;
+
+  return (
+    <View style={props.style}>
+      <Text style={styles.headerText}>{props.title}</Text>
+      <DropDownPicker
+        style={styles.dropdownStyle}
+        dropDownContainerStyle={[styles.dropdownContainerStyle, { zIndex }]}
+        placeholder={selectedReason ?? ''}
+        open={open}
+        value={selectedReason ?? ''}
+        items={getDropDownItems(props.items)}
+        setOpen={() => {
+          if (props.onDropdownSelect) props.onDropdownSelect();
+          setOpen(!open);
+        }}
+        setValue={setSelectedReason}
+        disabled={props.disabled || false}
+        disabledStyle={{ opacity: 0.1, backgroundColor: '#ccc' }}
+        textStyle={styles.labelStyle}
+        labelStyle={styles.labelStyle}
+        onChangeValue={(value) => {
+          if (value) {
+            props.onItemChange(findERByCode(value, props.items));
+          } else {
+            props.onItemChange(null);
+          }
+        }}
+        zIndex={zIndex}
+      />
+    </View>
+  );
+};
+export default React.memo(ERDropDown);
+
+export interface DropDownPickerProps {
+  title: string;
+  style: object;
+  items: ercItem[];
+  selectedReason?: ercItem;
+  disabled?: boolean;
+  onItemChange: (selectedReason: ercItem | null) => void;
+  onDropdownSelect?: () => void;
+}
+
+export interface ercItem {
+  text: string;
+  code: string;
+  success: boolean;
+}
+
+const styles = StyleSheet.create({
+  headerText: {
+    fontSize: 14,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  labelStyle: {
+    fontSize: 16,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    color: '#525B7A',
+  },
+  dropdownStyle: {
+    borderColor: '#E0E3EB',
+    borderRadius: 6,
+    // height: 50,
+  },
+  dropdownContainerStyle: {
+    backgroundColor: '#ffffff',
+    borderColor: '#E0E3EB',
+    borderRadius: 6,
+    // zIndex: 5,
+  },
+});