react-native-exp-fig 0.1.38 → 0.1.40

package/src/components/modal-journey-rectification/index.tsx

@@ -1,211 +1,213 @@
-/**
- * IMPORTS
- */
-import React, { useMemo, useState, useCallback } from "react";
-import { Modal, View, Pressable } from "react-native";
-
-// components
-import Box from "..//box";
-import { Button }from "../button";
-
-import { Typography } from "../typography";
-
-import ActivityFields from "../selects/select-date-and-hours";
-
-import SelectOption from "../selects/select-option";
-
-// commons
-import { Icons } from "../../common/icons-svg";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// helpers
-import { OPTIONS } from "../../utils/options-activity";
-
-// typings
-import type { IDateAndHoursProps, IModalJourneyRectificationProps } from "./interface";
-
-// styles / theme
-import { theme } from "../../styles/theme/theme";
-import { styles } from "./styles";
-import { formatDate, formHoursMinute } from "../../utils/format-data";
-
-const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps<any>> = React.memo(
-  ({ visible, onClose, onPressConfirm, textTitle }) => {
-    const [dateAndHours, setDateAndHours] = useState<IDateAndHoursProps>({
-      date: formatDate(new Date()),
-      hours: formHoursMinute(String(new Date().getHours() * 3600 + new Date().getMinutes() * 60)),
-    });
-
-    // estados controlados mínimos
-    const [selectedActivitie, setSelectedActivitie] = useState<string | null>(
-      OPTIONS[0]?.value ?? null
-    );
-
-    // label do motivo derivada com memo
-    const activitieLabel = useMemo(
-      () => OPTIONS.find((activitie) => activitie.value === selectedActivitie)?.label ?? null,
-      [selectedActivitie]
-    );
-
-    // handlers estáveis
-    const handleChangeReason = useCallback((value: string | null) => {
-      setSelectedActivitie(value);
-    }, []);
-
-    const handleCancel = useCallback(() => {
-      onClose?.();
-    }, [onClose]);
-
-    const handleConfirm = useCallback(() => {
-      onPressConfirm?.({
-        reasonValue: selectedActivitie,
-        label: activitieLabel,
-        dateAndHours: dateAndHours,
-      });
-
-      onClose?.();
-    }, [onPressConfirm, onClose, activitieLabel, selectedActivitie, dateAndHours]);
-
-    return (
-      <Modal
-        animationType="fade"
-        transparent
-        visible={visible}
-        onRequestClose={handleCancel}
-        statusBarTranslucent
-      >
-        <Pressable style={styles.overlay} onPress={handleCancel}>
-          <Box
-            width="90%"
-            backgroundColor={theme.colors.orange[500]}
-            borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
-            paddingStyle={{
-              paddingLeft: theme.paddings["2xs"],
-              paddingRight: theme.paddings["2xs"],
-              paddingTop: theme.paddings.sm,
-              paddingBottom: theme.paddings.sm,
-            }}
-          >
-            <View style={styles.headerRow}>
-              <Icons
-                icon="EXCLAMATION_TRIANGLE"
-                color={theme.colors.orange[500]}
-                background={theme.colors.neutral[300]}
-                size={22}
-              />
-              <Typography
-                text={textTitle ?? "Editar atividad"}
-                color={theme.colors.neutral[25]}
-                marginLeft={theme.margins["2xs"]}
-                fontFamily={theme.fonts.inter_bold}
-                fontWeight="700"
-                size={theme.fontSizes.lg}
-              />
-            </View>
-
-            <Box
-              backgroundColor={theme.colors.neutral[300]}
-              paddingStyle={{ padding: theme.paddings.xs }}
-              borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
-            >
-              <Typography
-                text="Confirme as alterações antes de salvar."
-                color={theme.colors.black[100]}
-                fontFamily={theme.fonts.inter_regular_400}
-                fontWeight="400"
-                lineHeight={theme.lineHeight["2xl"]}
-                size={theme.fontSizes.sm}
-                marginBottom={16}
-              />
-
-              <SelectOption
-                titleLabel="Selecione um motivo"
-                sizeTitleLabel={18}
-                dataOption={OPTIONS as any}
-                handleSelectDown={handleChangeReason}
-                backgroundColor={theme.colors.neutral[300]}
-              />
-
-              <ActivityFields
-                disabled={false}
-                icon={"CALENDAR"}
-                value={dateAndHours?.date}
-                onPressConfirm={(value) =>
-                  setDateAndHours({ date: value, hours: dateAndHours?.hours })
-                }
-              />
-
-              <ActivityFields
-                disabled={false}
-                icon={"TIMER"}
-                value={dateAndHours?.hours}
-                onPressConfirm={(value) =>
-                  setDateAndHours({ date: dateAndHours?.date, hours: value })
-                }
-              />
-
-              <View style={styles.actions}>
-                <Button
-                  title="CANCELAR"
-                  onPress={handleCancel}
-                  width="48%"
-                  height={40}
-                  isLoading={false}
-                  disabled={false}
-                  backgroundColor={theme.colors.neutral[300]}
-                  buttonTextStyle={{
-                    color: theme.colors.blue[500],
-                    fontFamily: theme.fonts.inter_medium_500,
-                    fontSize: theme.fontSizes.xs,
-                    fontWeight: "500",
-                  }}
-                  flexStyle={{
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    textAlign: "center",
-                  }}
-                  borderStyled={{
-                    borderWidth: theme.borderWidths.thin,
-                    borderColor: theme.colors.blue[100],
-                    borderRadius: theme.borderWidths.thick_medium,
-                  }}
-                />
-
-                <Button
-                  title="CONFIRMAR"
-                  onPress={handleConfirm}
-                  width="48%"
-                  height={40}
-                  isLoading={false}
-                  disabled={false}
-                  backgroundColor={theme.colors.blue[500]}
-                  buttonTextStyle={{
-                    color: theme.colors.neutral[25],
-                    fontFamily: theme.fonts.inter_medium_500,
-                    fontSize: theme.fontSizes.xs,
-                    fontWeight: "500",
-                  }}
-                  flexStyle={{
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    textAlign: "center",
-                  }}
-                  borderStyled={{
-                    borderWidth: theme.borderWidths.thin,
-                    borderColor: theme.colors.blue[100],
-                    borderRadius: theme.borderWidths.thick_medium,
-                  }}
-                />
-              </View>
-            </Box>
-          </Box>
-        </Pressable>
-      </Modal>
-    );
-  }
-);
-
-ModalJourneyRectification.displayName = "ModalJourneyRectification";
-export default asBaseComponent(ModalJourneyRectification);
+/**
+ * IMPORTS
+ */
+import React, { useMemo, useState, useCallback } from "react";
+import { Modal, View, Pressable } from "react-native";
+
+// components
+import Box from "../box";
+import { Button } from "../button";
+
+import { Typography } from "../typography";
+
+import ActivityFields from "../selects/select-date-and-hours";
+
+import SelectOption from "../selects/select-option";
+
+// commons
+import { Icons } from "../../common/icons-svg";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// helpers
+import { retificacaoActivities } from "../modals/modal-activities/data-activities";
+
+// typings
+import type { IDateAndHoursProps, IModalJourneyRectificationProps } from "./interface";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+import { styles } from "./styles";
+import { formatDate, formHoursMinute } from "../../utils/format-data";
+
+const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps<any>> = React.memo(
+  ({ visible, onClose, onPressConfirm, textTitle }) => {
+    const [dateAndHours, setDateAndHours] = useState<IDateAndHoursProps>({
+      date: formatDate(new Date()),
+      hours: formHoursMinute(String(new Date().getHours() * 3600 + new Date().getMinutes() * 60)),
+    });
+
+    // estados controlados mínimos
+    const [selectedActivitie, setSelectedActivitie] = useState<number | null>(
+      retificacaoActivities[0]?.value ?? null
+    );
+
+    // label do motivo derivada com memo
+    const activitieLabel = useMemo(
+      () =>
+        retificacaoActivities?.find((activitie) => activitie.value === selectedActivitie)?.label ??
+        null,
+      [selectedActivitie]
+    );
+
+    // handlers estáveis
+    const handleChangeReason = useCallback((value: number | null) => {
+      setSelectedActivitie(value);
+    }, []);
+
+    const handleCancel = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+
+    const handleConfirm = useCallback(() => {
+      onPressConfirm?.({
+        value: selectedActivitie,
+        label: activitieLabel,
+        dateAndHours: dateAndHours,
+      });
+
+      onClose?.();
+    }, [onPressConfirm, onClose, activitieLabel, selectedActivitie, dateAndHours]);
+
+    return (
+      <Modal
+        animationType="fade"
+        transparent
+        visible={visible}
+        onRequestClose={handleCancel}
+        statusBarTranslucent
+      >
+        <Pressable style={styles.overlay} onPress={handleCancel}>
+          <Box
+            width="90%"
+            backgroundColor={theme.colors.orange[500]}
+            borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+            paddingStyle={{
+              paddingLeft: theme.paddings["2xs"],
+              paddingRight: theme.paddings["2xs"],
+              paddingTop: theme.paddings.sm,
+              paddingBottom: theme.paddings.sm,
+            }}
+          >
+            <View style={styles.headerRow}>
+              <Icons
+                icon="EXCLAMATION_TRIANGLE"
+                color={theme.colors.orange[500]}
+                background={theme.colors.neutral[300]}
+                size={22}
+              />
+              <Typography
+                text={textTitle ?? "Editar atividad"}
+                color={theme.colors.neutral[25]}
+                marginLeft={theme.margins["2xs"]}
+                fontFamily={theme.fonts.inter_bold}
+                fontWeight="700"
+                size={theme.fontSizes.lg}
+              />
+            </View>
+
+            <Box
+              backgroundColor={theme.colors.neutral[300]}
+              paddingStyle={{ padding: theme.paddings.xs }}
+              borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+            >
+              <Typography
+                text="Confirme as alterações antes de salvar."
+                color={theme.colors.black[100]}
+                fontFamily={theme.fonts.inter_regular_400}
+                fontWeight="400"
+                lineHeight={theme.lineHeight["2xl"]}
+                size={theme.fontSizes.sm}
+                marginBottom={16}
+              />
+
+              <SelectOption
+                titleLabel="Selecione um motivo"
+                sizeTitleLabel={18}
+                dataOption={retificacaoActivities as any}
+                handleSelectDown={handleChangeReason}
+                backgroundColor={theme.colors.neutral[300]}
+              />
+
+              <ActivityFields
+                disabled={false}
+                icon={"CALENDAR"}
+                value={dateAndHours?.date}
+                onPressConfirm={(value) =>
+                  setDateAndHours({ date: value, hours: dateAndHours?.hours })
+                }
+              />
+
+              <ActivityFields
+                disabled={false}
+                icon={"TIMER"}
+                value={dateAndHours?.hours}
+                onPressConfirm={(value) =>
+                  setDateAndHours({ date: dateAndHours?.date, hours: value })
+                }
+              />
+
+              <View style={styles.actions}>
+                <Button
+                  title="CANCELAR"
+                  onPress={handleCancel}
+                  width="48%"
+                  height={40}
+                  isLoading={false}
+                  disabled={false}
+                  backgroundColor={theme.colors.neutral[300]}
+                  buttonTextStyle={{
+                    color: theme.colors.blue[500],
+                    fontFamily: theme.fonts.inter_medium_500,
+                    fontSize: theme.fontSizes.xs,
+                    fontWeight: "500",
+                  }}
+                  flexStyle={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                  }}
+                  borderStyled={{
+                    borderWidth: theme.borderWidths.thin,
+                    borderColor: theme.colors.blue[100],
+                    borderRadius: theme.borderWidths.thick_medium,
+                  }}
+                />
+
+                <Button
+                  title="CONFIRMAR"
+                  onPress={handleConfirm}
+                  width="48%"
+                  height={40}
+                  isLoading={false}
+                  disabled={false}
+                  backgroundColor={theme.colors.blue[500]}
+                  buttonTextStyle={{
+                    color: theme.colors.neutral[25],
+                    fontFamily: theme.fonts.inter_medium_500,
+                    fontSize: theme.fontSizes.xs,
+                    fontWeight: "500",
+                  }}
+                  flexStyle={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                  }}
+                  borderStyled={{
+                    borderWidth: theme.borderWidths.thin,
+                    borderColor: theme.colors.blue[100],
+                    borderRadius: theme.borderWidths.thick_medium,
+                  }}
+                />
+              </View>
+            </Box>
+          </Box>
+        </Pressable>
+      </Modal>
+    );
+  }
+);
+
+ModalJourneyRectification.displayName = "ModalJourneyRectification";
+export default asBaseComponent(ModalJourneyRectification);

package/src/components/modals/modal-activities/data-activities/index.ts

@@ -100,3 +100,34 @@ export const activitiesByDriverType: Record<string, Record<string, IActivity[]>>
     descanso: baseActivities.descanso!,
   },
 };
+
+/**
+ * Atividades para retificação
+ */
+
+export const retificacaoActivities = [
+  {
+    value: 22,
+    label: "Em operação - Carregamento",
+  },
+  {
+    value: 21,
+    label: "Tempo à Disposição",
+  },
+  {
+    value: 5,
+    label: "Repouso Semanal",
+  },
+  {
+    value: 6,
+    label: "Repouso Noturno",
+  },
+  {
+    value: 7,
+    label: "Refeição",
+  },
+  {
+    value: 9,
+    label: "Descanso",
+  },
+];