react-native-exp-fig 0.1.25 → 0.1.27

package/src/components/modal-create-activitie/index.tsx

@@ -0,0 +1,211 @@
+/**
+ * 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, IModalCreateActivitieProps } from "./interface";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+import { styles } from "./styles";
+import { formatDate, formHoursMinute } from "../../utils/format-data";
+
+const ModalCreteActivitie: React.FC<IModalCreateActivitieProps<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 ?? "Incluir atividade"}
+                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="Preencha os dados da atividade que deseja incluir."
+                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>
+    );
+  }
+);
+
+ModalCreteActivitie.displayName = "ModalCreteActivitie";
+export default asBaseComponent(ModalCreteActivitie);

package/src/components/modal-create-activitie/interface.ts

@@ -0,0 +1,22 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+
+type IModalCreateActivitieProps<T> = {
+  visible: boolean;
+  textTitle?: string;
+  options?: T;
+  onClose: () => void;
+  onPressConfirm: (value: T) => void;
+};
+
+type IDateAndHoursProps = {
+  date: string;
+  hours: string;
+};
+
+/**
+ * EXPORTS
+ */
+export type { IModalCreateActivitieProps, IDateAndHoursProps };

package/src/components/modal-create-activitie/styles.ts

@@ -0,0 +1,24 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme/theme";
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: theme.shadows.z1,
+  },
+  card: { width: "90%" },
+  headerRow: { marginBottom: 10, marginLeft: 4, flexDirection: "row", alignItems: "center" },
+  content: { padding: theme.paddings.xs },
+  actions: { marginTop: 16, flexDirection: "row", justifyContent: "space-between" },
+});
+
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -0,0 +1,211 @@
+/**
+ * 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);

package/src/components/modal-journey-rectification/interface.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+
+type IModalJourneyRectificationProps<T> = {
+  visible: boolean;
+  textTitle?: string;
+  options?: T;
+  onClose: () => void;
+  onPressConfirm: (value: T) => void;
+};
+
+type IDateAndHoursProps = {
+  date: string;
+  hours: string;
+};
+
+/**
+ * EXPORTS
+ */
+export type { IModalJourneyRectificationProps, IDateAndHoursProps };

package/src/components/modal-journey-rectification/styles.ts

@@ -0,0 +1,24 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme/theme";
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: theme.shadows.z1,
+  },
+  card: { width: "90%" },
+  headerRow: { marginBottom: 10, marginLeft: 4, flexDirection: "row", alignItems: "center" },
+  content: { padding: theme.paddings.xs },
+  actions: { marginTop: 16, flexDirection: "row", justifyContent: "space-between" },
+});
+
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -1,65 +1,65 @@
-/**
- * dados para os tipos de atividades selecionado
- */
-export const activities = {
-  trabalho: [
-    {
-      id: 1,
-      referencia: "operacao_veiculo",
-      cor_hex: "000000",
-      descricao: "Operação com Veículo",
-      tipo: "trabalho",
-    },
-    {
-      id: 2,
-      referencia: "aguardando_carga",
-      cor_hex: "000000",
-      descricao: "Em carga",
-      tipo: "trabalho",
-    },
-    {
-      id: 3,
-      referencia: "aguardando_descarga",
-      cor_hex: "000000",
-      descricao: "Em Descarga",
-      tipo: "trabalho",
-    },
-    {
-      id: 8,
-      referencia: "disposicao_veiculo_parado",
-      cor_hex: "000000",
-      descricao: "Disposição com Veículo Parado",
-      tipo: "trabalho",
-    },
-  ],
-  descanso: [
-    {
-      id: 5,
-      referencia: "repouso_semanal",
-      cor_hex: "000000",
-      descricao: "Repouso Semanal",
-      tipo: "descanso",
-    },
-    {
-      id: 6,
-      referencia: "repouso_noturno",
-      cor_hex: "000000",
-      descricao: "Repouso Noturno",
-      tipo: "descanso",
-    },
-    {
-      id: 7,
-      referencia: "refeicao",
-      cor_hex: "000000",
-      descricao: "Refeição",
-      tipo: "descanso",
-    },
-    {
-      id: 9,
-      referencia: "descanso",
-      cor_hex: "000000",
-      descricao: "Descanso",
-      tipo: "descanso",
-    },
-  ],
-};
+/**
+ * dados para os tipos de atividades selecionado
+ */
+export const activities = {
+  trabalho: [
+    {
+      id: 1,
+      referencia: "operacao_veiculo",
+      cor_hex: "000000",
+      descricao: "Operação com Veículo",
+      tipo: "trabalho",
+    },
+    {
+      id: 2,
+      referencia: "aguardando_carga",
+      cor_hex: "000000",
+      descricao: "Em carga",
+      tipo: "trabalho",
+    },
+    {
+      id: 3,
+      referencia: "aguardando_descarga",
+      cor_hex: "000000",
+      descricao: "Em Descarga",
+      tipo: "trabalho",
+    },
+    {
+      id: 8,
+      referencia: "disposicao_veiculo_parado",
+      cor_hex: "000000",
+      descricao: "Disposição com Veículo Parado",
+      tipo: "trabalho",
+    },
+  ],
+  descanso: [
+    {
+      id: 5,
+      referencia: "repouso_semanal",
+      cor_hex: "000000",
+      descricao: "Repouso Semanal",
+      tipo: "descanso",
+    },
+    {
+      id: 6,
+      referencia: "repouso_noturno",
+      cor_hex: "000000",
+      descricao: "Repouso Noturno",
+      tipo: "descanso",
+    },
+    {
+      id: 7,
+      referencia: "refeicao",
+      cor_hex: "000000",
+      descricao: "Refeição",
+      tipo: "descanso",
+    },
+    {
+      id: 9,
+      referencia: "descanso",
+      cor_hex: "000000",
+      descricao: "Descanso",
+      tipo: "descanso",
+    },
+  ],
+};