react-native-exp-fig 0.1.26 → 0.1.27

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

@@ -1,137 +1,137 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Modal, TouchableOpacity, FlatList } from "react-native";
-
-// components
-
-import Box from "../box";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-import { getIconModalActivities } from "../../common/icons-svg/modal-activities";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-import { Typography } from "../typography";
-import { Button } from "../button";
-
-//typing
-import { IModalActivities, IActivity } from "./interface";
-
-// atividades
-import { activities } from "./data-activities";
-
-export const ModalActivities: React.FC<IModalActivities> = ({
-  onClose,
-  handleActivity,
-  activityType,
-  isLoading,
-  style,
-}) => {
-  return (
-    <Modal animationType="fade" transparent={true} onRequestClose={onClose}>
-      <Box
-        backgroundColor={"rgba(0, 0, 0, 0.7)"}
-        flexStyle={{ flex: 1, justifyContent: "center", alignItems: "center" }}
-      >
-        <Box
-          height={310}
-          width={"92%"}
-          backgroundColor={theme.colors.neutral[25]}
-          borderStyled={{
-            borderColor: theme.colors.blue[500],
-            borderWidth: theme.borderWidths.thick,
-            borderRadius: theme.borderWidths.thick_medium,
-          }}
-          paddingStyle={{
-            padding: theme.paddings.md,
-          }}
-          style={{ position: "relative" }}
-        >
-          <Box
-            width={"100%"}
-            flexStyle={{
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <Typography
-              text="Atividades"
-              size={theme.fontSizes.md}
-              color={theme.colors.blue[500]}
-              fontFamily={theme.fonts.inter_bold_700}
-              lineHeight={theme.fontSizes.xl}
-            />
-
-            <TouchableOpacity activeOpacity={0.7} onPress={onClose} style={{}}>
-              <Icons icon="CLOSED" color={theme.colors.blue[500]} />
-            </TouchableOpacity>
-          </Box>
-          {/* as atividades  */}
-          <Box marginStyle={{ marginTop: theme.margins["2xl"] }}>
-            <FlatList
-              data={activities[activityType]}
-              numColumns={3}
-              keyExtractor={(item) => item.id.toString()}
-              scrollEnabled={false}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={{
-                    alignItems: "center",
-                    width: 110,
-                    marginBottom: theme.margins["2xl"], // espaço entre as linhas
-                  }}
-                  onPress={() => handleActivity(item as IActivity)}
-                >
-                  {getIconModalActivities(item.referencia)}
-
-                  <Typography
-                    text={item.descricao}
-                    size={theme.fontSizes.xs}
-                    color={theme.colors.blue[500]}
-                    lineHeight={theme.fontSizes.md}
-                    fontFamily={theme.fonts.inter_medium_500}
-                    fontWeight="500"
-                    align="center"
-                    marginTop={5}
-                  />
-                </TouchableOpacity>
-              )}
-            />
-          </Box>
-
-          <Button
-            title={"CANCELAR ATIVIDADE"}
-            width="100%"
-            height={40}
-            activeOpacity={0.7}
-            onPress={onClose}
-            backgroundColor={theme.colors.blue[500]}
-            buttonTextStyle={{
-              color: theme.colors.neutral[25],
-              fontFamily: theme.fonts.inter_medium_500,
-              fontSize: theme.fontSizes.md,
-              fontWeight: "500",
-            }}
-            flexStyle={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-            borderStyled={{
-              borderWidth: theme.borderWidths.thin,
-              borderColor: theme.colors.blue[500],
-              borderRadius: theme.borderWidths.thick_medium,
-            }}
-            marginStyle={{ marginLeft: theme.margins.md }}
-            isLoading={isLoading ?? false}
-            style={[style, { position: "absolute", bottom: 10, left: 0 }]}
-          />
-        </Box>
-      </Box>
-    </Modal>
-  );
-};
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Modal, TouchableOpacity, FlatList } from "react-native";
+
+// components
+
+import Box from "../../box";
+
+// commons / icons
+import { Icons } from "../../../common/icons-svg";
+import { getIconModalActivities } from "../../../common/icons-svg/modal-activities";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+import { Typography } from "../../typography";
+import { Button } from "../../button";
+
+//typing
+import { IModalActivities, IActivity } from "./interface";
+
+// atividades
+import { activities } from "./data-activities";
+
+export const ModalActivities: React.FC<IModalActivities> = ({
+  onClose,
+  handleActivity,
+  activityType,
+  isLoading,
+  style,
+}) => {
+  return (
+    <Modal animationType="fade" transparent={true} onRequestClose={onClose}>
+      <Box
+        backgroundColor={"rgba(0, 0, 0, 0.7)"}
+        flexStyle={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+      >
+        <Box
+          height={310}
+          width={"92%"}
+          backgroundColor={theme.colors.neutral[25]}
+          borderStyled={{
+            borderColor: theme.colors.blue[500],
+            borderWidth: theme.borderWidths.thick,
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            padding: theme.paddings.md,
+          }}
+          style={{ position: "relative" }}
+        >
+          <Box
+            width={"100%"}
+            flexStyle={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              text="Atividades"
+              size={theme.fontSizes.md}
+              color={theme.colors.blue[500]}
+              fontFamily={theme.fonts.inter_bold_700}
+              lineHeight={theme.fontSizes.xl}
+            />
+
+            <TouchableOpacity activeOpacity={0.7} onPress={onClose} style={{}}>
+              <Icons icon="CLOSED" color={theme.colors.blue[500]} />
+            </TouchableOpacity>
+          </Box>
+          {/* as atividades  */}
+          <Box marginStyle={{ marginTop: theme.margins["2xl"] }}>
+            <FlatList
+              data={activities[activityType]}
+              numColumns={3}
+              keyExtractor={(item) => item.id.toString()}
+              scrollEnabled={false}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={{
+                    alignItems: "center",
+                    width: 110,
+                    marginBottom: theme.margins["2xl"], // espaço entre as linhas
+                  }}
+                  onPress={() => handleActivity(item as IActivity)}
+                >
+                  {getIconModalActivities(item.referencia)}
+
+                  <Typography
+                    text={item.descricao}
+                    size={theme.fontSizes.xs}
+                    color={theme.colors.blue[500]}
+                    lineHeight={theme.fontSizes.md}
+                    fontFamily={theme.fonts.inter_medium_500}
+                    fontWeight="500"
+                    align="center"
+                    marginTop={5}
+                  />
+                </TouchableOpacity>
+              )}
+            />
+          </Box>
+
+          <Button
+            title={"CANCELAR ATIVIDADE"}
+            width="100%"
+            height={40}
+            activeOpacity={0.7}
+            onPress={onClose}
+            backgroundColor={theme.colors.blue[500]}
+            buttonTextStyle={{
+              color: theme.colors.neutral[25],
+              fontFamily: theme.fonts.inter_medium_500,
+              fontSize: theme.fontSizes.md,
+              fontWeight: "500",
+            }}
+            flexStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+            borderStyled={{
+              borderWidth: theme.borderWidths.thin,
+              borderColor: theme.colors.blue[500],
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+            marginStyle={{ marginLeft: theme.margins.md }}
+            isLoading={isLoading ?? false}
+            style={[style, { position: "absolute", bottom: 10, left: 0 }]}
+          />
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

package/src/components/{modal-activities → modals/modal-activities}/interface.d.ts

@@ -1,32 +1,32 @@
-/**
- * IMPORTS
- */
-import { ModalProps } from "react-native";
-
-// typing
-import { IGlobalCss } from "../../styles/global/interface";
-
-interface IActivity {
-  id: number;
-  referencia: string;
-  cor_hex: string;
-  descricao: string;
-  tipo: "trabalho" | "descanso";
-}
-
-interface IModalActivities extends ModalProps, IGlobalCss {
-  /** função que fecha modal */
-  onClose: () => void;
-
-  /** tipo de atividades */
-  activityType: IActivity["tipo"];
-
-  /** função que manda atividade selecionada */
-  // eslint-disable-next-line no-unused-vars
-  handleActivity: (activity: IActivity) => void;
-}
-
-/**
- * EXPORTS
- */
-export { IModalActivities, IActivity };
+/**
+ * IMPORTS
+ */
+import { ModalProps } from "react-native";
+
+// typing
+import { IGlobalCss } from "../../../styles/global/interface";
+
+interface IActivity {
+  id: number;
+  referencia: string;
+  cor_hex: string;
+  descricao: string;
+  tipo: "trabalho" | "descanso";
+}
+
+interface IModalActivities extends ModalProps, IGlobalCss {
+  /** função que fecha modal */
+  onClose: () => void;
+
+  /** tipo de atividades */
+  activityType: IActivity["tipo"];
+
+  /** função que manda atividade selecionada */
+  // eslint-disable-next-line no-unused-vars
+  handleActivity: (activity: IActivity) => void;
+}
+
+/**
+ * EXPORTS
+ */
+export { IModalActivities, IActivity };

package/src/components/modals/modal-activity-reason/index.tsx

@@ -0,0 +1,162 @@
+/**
+ * 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 InputTextCounter from "../../input-text-counter";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IModalActivityReasonProps } from "./interface";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+
+const ModalActivityReason: React.FC<IModalActivityReasonProps> = ({
+  visible,
+  onClose,
+  modalConfirm,
+  textTitle,
+  testID,
+}) => {
+  const [isLoading] = useState(false);
+
+  return (
+    <Modal testID={testID} 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 ?? "Motivo da exclusão"}`}
+              color={theme.colors.neutral[25]}
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={theme.fontSizes.md}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.neutral[300]}
+            paddingStyle={{
+              padding: theme.paddings.xs,
+            }}
+            borderStyled={{
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+          >
+            <Box width="100%">
+              <InputTextCounter
+                label={`${textTitle || "Motivo da exclusão"}`}
+                placeholderTextColor="#9B9B9B"
+                placeholder="Motivo da exclusão"
+              />
+            </Box>
+            <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={() => {
+                  modalConfirm(true);
+                  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>
+  );
+};
+
+ModalActivityReason.displayName = "ModalActivityReason";
+
+export default ModalActivityReason;

package/src/components/modals/modal-activity-reason/interface.d.ts

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

package/src/components/{modal-change-activity → modals/modal-change-activity}/index.tsx

@@ -7,16 +7,16 @@ import React from "react";
 import { Modal, View } from "react-native";
 
 // componentes internos
-import Box from "../box";
-import { Typography } from "../typography";
-import { SelectOption } from "../selects/select-option";
-import { Button } from "../button";
+import Box from "../../box";
+import { Typography } from "../../typography";
+import { Button } from "../../button";
+import SelectOption from "../../selects/select-option";
 
 // styles / theme
-import { theme } from "../../styles/theme/theme";
+import { theme } from "../../../styles/theme/theme";
 
 // assets / icons
-import { Icons } from "../../common/icons-svg";
+import { Icons } from "../../../common/icons-svg";
 
 /**
  * TYPES

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

@@ -0,0 +1,97 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+
+import { View, TouchableOpacity } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
+
+// 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";
+import { formatDate, formHoursMinute } from "../../../utils/format-data";
+
+const ActivityFields = forwardRef<any, IActivityFieldsProps<any>>(
+  ({ value, icon, onPressConfirm, disabled = false }, ref): React.ReactElement => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const [pickerDate, setPickerDate] = useState<Date>(new Date());
+
+    const isCalendar = (icon ?? "CALENDAR") === "CALENDAR";
+
+    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={() => setModalVisible(true)}
+          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>
+
+        {modalVisible && (
+          <DateTimePicker
+            value={pickerDate}
+            mode={isCalendar ? "date" : "time"}
+            is24Hour
+            onChange={(event: any, date?: Date) => {
+              if (event?.type === "set" && date) {
+                setPickerDate(date);
+                const seconds = date.getHours() * 3600 + date.getMinutes() * 60;
+                const nextValue = isCalendar ? formatDate(date) : formHoursMinute(String(seconds));
+                // @ts-ignore genérico aceita string
+                onPressConfirm(nextValue);
+              }
+              setModalVisible(false);
+            }}
+          />
+        )}
+      </>
+    );
+  }
+);
+
+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 };