jornada-ui 0.4.10 → 0.4.12

package/src/components/modals/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/modals/modal-journey-rectification/index.tsx

@@ -0,0 +1,236 @@
+/**
+ * IMPORTS
+ */
+import React, { useState } from "react";
+import { Modal, View } from "react-native";
+
+// components
+import Box from "../../box";
+import Typography from "../../typography";
+import Button from "../../button";
+import SelectOption from "../../selects/select-option";
+import InputDateTime from "../../inputs/input-date-time";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IModalJourneyRectificationProps } from "./interface";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+
+const options = [
+  { label: "Disp com veículo parado", value: "option1" },
+  { label: "Operação com veículo", value: "option2" },
+  { label: "Em carga", value: "option3" },
+  { label: "Em descarga", value: "option4" },
+];
+
+const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
+  visible,
+  onClose,
+  modalConfirm,
+  textTitle,
+}) => {
+  const [isLoading] = React.useState(false);
+
+  // *** DEFAULTS: já começa com um motivo, data e hora atuais
+  const defaultReason = options[0]?.value ?? null;
+  const [selectedReason, setSelectedReason] = useState<string | null>(defaultReason); // ***
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // ***
+  const [selectedTime, setSelectedTime] = useState<Date>(new Date()); // ***
+
+  // helpers de formatação
+  const fmtDate = (d: Date) =>
+    `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}/${d.getFullYear()}`;
+
+  const fmtTime = (d: Date) =>
+    `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+
+  // junta data + hora
+  const mergeDateTime = (date: Date | null, time: Date | null): Date | null => {
+    if (!date) return null;
+    const out = new Date(date);
+    if (time) {
+      out.setHours(time.getHours());
+      out.setMinutes(time.getMinutes());
+      out.setSeconds(0);
+      out.setMilliseconds(0);
+    }
+    return out;
+  };
+
+  return (
+    <Modal animationType="fade" transparent visible={visible}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0,0,0,0.6)",
+        }}
+      >
+        <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,
+          }}
+        >
+          <Box
+            marginStyle={{ marginBottom: 10, marginLeft: 4 }}
+            flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <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_700}
+              size={theme.fontSizes.lg}
+            />
+          </Box>
+
+          <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[25]}
+              fontFamily={theme.fonts.inter_regular_400}
+              size={theme.fontSizes.md}
+              marginBottom={16}
+            />
+
+            <SelectOption
+              titleLabel="Selecione atividade"
+              sizeTitleLabel={18}
+              dataOption={options}
+              // Onde o motivo é RECEBIDO: aqui no callback
+              handleSelectDown={(value) => setSelectedReason(value)} // ***
+              backgroundColor={theme.colors.neutral[300]}
+            />
+
+            <InputDateTime
+              mode="date"
+              titleLabel="Data"
+              // Onde a data é RECEBIDA: no onChange abaixo
+              value={selectedDate} // *** controlado
+              onChange={(d) => setSelectedDate(d)} // ***
+              backgroundColor="#f5f5f5"
+              colortitleLabel="#333"
+            />
+
+            <InputDateTime
+              mode="time"
+              titleLabel="Horário"
+              // Onde a hora é RECEBIDA: no onChange abaixo
+              value={selectedTime} // *** controlado
+              onChange={(d) => setSelectedTime(d)} // ***
+              backgroundColor="#f5f5f5"
+              colortitleLabel="#333"
+            />
+
+            <Box
+              marginStyle={{ marginTop: 4 }}
+              flexStyle={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+              }}
+            >
+              <Button
+                title="CANCELAR"
+                onPress={onClose}
+                width={"48%"}
+                height={40}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.neutral[300]}
+                buttonTextStyle={{
+                  color: theme.colors.blue[100],
+                  fontFamily: "Inter-Medium",
+                  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={() => {
+                  const merged = mergeDateTime(selectedDate, selectedTime);
+
+                  const payload = {
+                    reasonValue: selectedReason,
+                    reasonLabel: options.find((o) => o.value === selectedReason)?.label ?? null,
+                    date: selectedDate ? fmtDate(selectedDate) : null,
+                    time: selectedTime ? fmtTime(selectedTime) : null,
+                    dateTimeISO: merged ? merged.toISOString() : null,
+                  };
+
+                  modalConfirm(payload);
+                  onClose();
+                }}
+                width={"48%"}
+                height={40}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.blue[500]}
+                buttonTextStyle={{
+                  color: theme.colors.neutral[25],
+                  fontFamily: "Inter-Medium",
+                  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,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};
+
+ModalJourneyRectification.displayName = "ModalJourneyRectification";
+
+export default asBaseComponent(ModalJourneyRectification);

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

@@ -0,0 +1,10 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+interface IModalJourneyRectificationProps {
+  visible: boolean;
+  onClose: () => void;
+  modalConfirm: (value: T) => void;
+  textTitle?: string;
+}
+
+export type { IModalJourneyRectificationProps };

package/src/components/modals/modal-to-confimations/index.tsx

@@ -0,0 +1,182 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Modal, Text, View } from "react-native";
+
+// components
+import Box from "../../box";
+import Button from "../../button";
+import Typography from "../../typography";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IModalToConfirmationsProps } from ".//interface";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+
+/**
+ * Componente ModalToConfirmations para a interação da  ui.
+ */
+const ModalToConfirmations: React.FC<IModalToConfirmationsProps> = ({
+  visible,
+  onClose,
+  onPressConfirm,
+  textTitle,
+  text1,
+  text2,
+  titleButtonCancel,
+  titleButtonConfirm,
+  backgroundColor,
+}) => {
+  return (
+    <Modal animationType="fade" transparent visible={visible}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: theme.shadows.z1,
+        }}
+      >
+        <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,
+          }}
+        >
+          <Box
+            marginStyle={{ marginBottom: 10, marginLeft: 4 }}
+            flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <Icons
+              icon="EXCLAMATION_TRIANGLE"
+              color={theme.colors.orange[500]}
+              background={theme.colors.neutral[300]}
+              size={22}
+            />
+            <Typography
+              text={`${textTitle ?? "TITULO NÃO INFORMADO"}`}
+              color={theme.colors.neutral[25]}
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={theme.fontSizes.lg}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.neutral[300]}
+            paddingStyle={{
+              padding: theme.paddings.xs,
+            }}
+            borderStyled={{
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+          >
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Text
+                style={{
+                  color: theme.colors.orange[150],
+                  fontFamily: theme.fonts.inter_semi_bold_600,
+                  marginBottom: text2 ? 16 : 8,
+                }}
+              >
+                <Typography
+                  text={`${text1} `}
+                  size={theme.fontSizes.sm}
+                  fontFamily={theme.fonts.inter_regular_400}
+                  fontWeight="400"
+                  color={theme.colors.black[180]}
+                  lineHeight={24}
+                  letterSpacing={"regular"}
+                />
+                {text2 ?? "Alterar?"}
+              </Text>
+            </Box>
+
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+              }}
+            >
+              <Button
+                title={titleButtonCancel ?? "CANCELAR"}
+                onPress={onClose}
+                width={text2 ? "48%" : "100%"}
+                height={40}
+                isLoading={false}
+                disabled={false}
+                backgroundColor={backgroundColor ?? theme.colors.neutral[300]}
+                buttonTextStyle={{
+                  color: backgroundColor ? theme.colors.neutral[25] : theme.colors.blue[100],
+                  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,
+                }}
+              />
+
+              {text2 && (
+                <Button
+                  title={titleButtonConfirm ?? "CONFIRMAR"}
+                  onPress={() => {
+                    onPressConfirm();
+                    onClose();
+                  }}
+                  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,
+                  }}
+                />
+              )}
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};
+
+ModalToConfirmations.displayName = "ModalToConfirmations";
+
+export default asBaseComponent(ModalToConfirmations);

package/src/components/modals/modal-to-confimations/interface.ts

@@ -0,0 +1,36 @@
+/**
+ * IMPORTS
+ */
+interface IModalToConfirmationsProps {
+  /**params para informa se o modal estár aberto ou fecahdo */
+  visible: boolean;
+
+  /**params do modal */
+  textTitle?: string;
+
+  /**params que armazena o texto da descrição com cor padrão */
+  text1?: string;
+
+  /**params que armazema o texto da descrição com a cor pintada */
+  text2?: string;
+
+  /**params para o titulo do botão de cancelar */
+  titleButtonCancel?: string;
+
+  /**params para o titulo do botão de confirmar */
+  titleButtonConfirm?: string;
+
+  /**params para colocar cor de fundo no botão */
+  backgroundColor?: string;
+
+  /**params que faz o fechamento do modal */
+  onClose: () => void;
+
+  /**params que faz o fechamento do modal + confirmação */
+  onPressConfirm: () => void;
+}
+
+/**
+ * EXPORTS
+ */
+export type { IModalToConfirmationsProps };

package/src/components/selects/select-date-and-hours/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+
+import { View, TouchableOpacity } from "react-native";
+
+// seus componentes
+import Box from "../../box";
+import Typography from "../../typography";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IActivityFieldsProps } from "./interface";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+import { styles } from "./styles";
+
+const ActivityFields = forwardRef<any, IActivityFieldsProps<any>>(
+  ({ value, icon, onPressConfirm, disabled = false }, ref): React.ReactElement => {
+    return (
+      <TouchableOpacity
+        ref={ref}
+        activeOpacity={0.7}
+        style={[
+          styles.field,
+          {
+            borderColor: theme.colors.gray[700],
+            backgroundColor: theme.colors.neutral[300],
+            opacity: disabled ? 0.7 : 1,
+          },
+        ]}
+        onPress={() => onPressConfirm(value)}
+        disabled={disabled}
+      >
+        <View style={styles.row}>
+          <Box
+            width={"10%"}
+            height={45}
+            flexStyle={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <Icons icon={icon ? icon : "CALENDAR"} color={theme.colors.black[100]} size={18} />
+          </Box>
+
+          <Box
+            width={"90%"}
+            height={45}
+            flexStyle={{ alignItems: "center", justifyContent: "center" }}
+          >
+            <Typography
+              text={String(value)}
+              color={theme.colors.blue[500]}
+              fontFamily={theme.fonts.inter_medium_500}
+              size={theme.fontSizes.md}
+              marginRight={44}
+            />
+          </Box>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+);
+
+ActivityFields.displayName = "ActivityFields";
+
+export default asBaseComponent(ActivityFields);

package/src/components/selects/select-date-and-hours/interface.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+
+import type { TouchableOpacityProps } from "react-native";
+
+// commons / svg
+import type { SVG_NAME } from "../../../common/icons-svg/constants";
+
+type IActivityFieldsProps<T> = TouchableOpacityProps & {
+  /** Valor exibido e retornado no onPressConfirm */
+  value: T | null;
+
+  /** Ícone à esquerda (padrão: 'CALENDAR') */
+  icon: keyof typeof SVG_NAME;
+
+  /** Desabilita interação */
+  disabled?: boolean;
+
+  /** Cor do texto (opcional) */
+  textColor?: string;
+
+  /** Clique confirma e devolve o value */
+  onPressConfirm: (value: T) => void;
+};
+
+/**
+ * EXPORTS
+ */
+export type { IActivityFieldsProps };

package/src/components/selects/select-date-and-hours/styles.ts

@@ -0,0 +1,24 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  field: {
+    width: "100%",
+    height: 45,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    justifyContent: "center",
+    marginTop: 10,
+    marginBottom: 16,
+  },
+  row: { flexDirection: "row", alignItems: "center", gap: 8, justifyContent: "space-around" },
+});
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/selects/select-option/index.tsx

@@ -16,7 +16,7 @@ import { styles } from "./styles";
 import { theme } from "../../../styles/theme/theme";
 
 const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.ReactElement => {
-  const { dataOption, handleSelectDown, titleLabel, sizeTitleLabel, colortitleLabel } = props;
+  const { dataOption, handleSelectDown, titleLabel, sizeTitleLabel, colortitleLabel, backgroundColor } = props;
 
   const [selectedValue, setSelectedValue] = useState(dataOption[0]?.value || "");
   const [modalVisible, setModalVisible] = useState(false);
@@ -33,6 +33,7 @@ const SelectOption = forwardRef<any, ISelectDropDownProps>((props, ref): React.R
     titleLabel,
     sizeTitleLabel,
     colortitleLabel,
+    backgroundColor,
   } as ISelectDropDownProps;
   return (
     <View ref={ref} style={styles(styleProps).container}>

package/src/components/selects/select-option/interface.d.ts

@@ -13,7 +13,7 @@ type ISelectDropDownProps = TextProps & {
   titleLabel: string;
   sizeTitleLabel?: number;
   colortitleLabel?: string;
-
+  backgroundColor?: string;
   /**retorna o valor selecionado              */
   // eslint-disable-next-line no-unused-vars
   handleSelectDown: (value: string) => void;