jornada-ui 0.4.13 → 0.4.15

package/src/components/card-work-session/interface.d.ts

@@ -1,150 +1,151 @@
-/*
- * IMPORTS
- */
-import type React from "react";
-import { ViewProps, type DimensionValue } from "react-native";
-
-/**
- * INTERFACE
- */
-type ICardWorkSession = ViewProps & {
-  /**
-   * props que mostra o nome do usuário
-   */
-  name: string;
-
-  /**
-   * props que mostra a data
-   */
-  workDate: string;
-
-  /**
-   * props que mostra o tempo de jornada
-   */
-  timeWork?: string;
-
-  /**
-   * props que mostra o horário inicial
-   */
-  initialTime?: string;
-
-  /**
-   * props que mostra a duração
-   */
-  duration?: string;
-
-  /**
-   * props que mostra o avatar do usuário
-   */
-  avatar: string;
-
-  handleNavigation: () => void;
-
-  children?: React.ReactNode;
-
-  /**
-   * TestID para testes automático e identificação
-   */
-  testID?: string;
-
-  /**
-   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
-   */
-  borderStyled?: {
-    borderStyle?: "solid" | "dotted" | "dashed";
-
-    borderRadius?: number | DimensionValue;
-    borderTopRightRadius?: number | DimensionValue;
-    borderTopLeftRadius?: number | DimensionValue;
-    borderBottomRightRadius?: number | DimensionValue;
-    borderBottomLeftRadius?: number | DimensionValue;
-
-    borderWidth?: number | DimensionValue;
-    borderLeftWidth?: number | DimensionValue;
-    borderRightWidth?: number | DimensionValue;
-    borderTopWidth?: number | DimensionValue;
-    borderBottomWidth?: number | DimensionValue;
-
-    borderColor?: string;
-    borderBottomColor?: string;
-    borderLeftColor?: string;
-    borderRightColor?: string;
-    borderTopColor?: string;
-  };
-
-  /**
-   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
-   */
-  flexStyle?: {
-    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
-    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
-    flex?: string | number;
-    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
-    textAlign?: "auto" | "center" | "left" | "right" | "justify";
-    justifyContent?:
-      | "flex-start"
-      | "flex-end"
-      | "center"
-      | "space-between"
-      | "space-around"
-      | "space-evenly";
-  };
-
-  /**
-   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
-   */
-  marginStyle?: {
-    margin?: number | DimensionValue;
-    marginLeft?: number | DimensionValue;
-    marginRight?: number | DimensionValue;
-    marginTop?: number | DimensionValue;
-    marginBottom?: number | DimensionValue;
-  };
-
-  /**
-   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
-   */
-  paddingStyle?: {
-    padding?: number | DimensionValue;
-    paddingLeft?: number | DimensionValue;
-    paddingRight?: number | DimensionValue;
-    paddingTop?: number | DimensionValue;
-    paddingBottom?: number | DimensionValue;
-  };
-
-  /**
-   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
-   */
-  height?: number | DimensionValue;
-
-  /**
-   * A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
-   */
-  width?: number | DimensionValue;
-
-  /**
-   * O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
-   */
-  backgroundColor?: string;
-
-  /**
-   * Propriedade texto que sera renderizado pro usuário final
-   */
-  text?: string;
-
-  /**
-   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
-   */
-  color?: {
-    colorSvg?: string;
-    colorText?: string;
-    colorTextBold?: string;
-    colorTextData?: string;
-  };
-};
-
-/**
- * EXPORTS
- */
-export type { ICardWorkSession };
+/*
+ * IMPORTS
+ */
+import type React from "react";
+import { ViewProps, type DimensionValue } from "react-native";
+
+/**
+ * INTERFACE
+ */
+type ICardWorkSession = ViewProps & {
+  /**
+   * props que mostra o nome do usuário
+   */
+  name: string;
+
+  /**
+   * props que mostra a data
+   */
+  workDate: string;
+
+  /**
+   * props que mostra o horário inicial
+   */
+  initialTime?: string;
+
+  /**
+   * props que mostra a duração
+   */
+  duration?: string;
+
+  /**
+   * props que mostra o avatar do usuário
+   */
+  avatar: string;
+
+  handleNavigation: () => void;
+  handleNavigationNotification: () => void;
+
+  /**
+   * props que mostra a quantidade de notificações
+   */
+  counterBadge: number;
+
+  children?: React.ReactNode;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+
+  /**
+   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
+   */
+  flexStyle?: {
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    flex?: string | number;
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    textAlign?: "auto" | "center" | "left" | "right" | "justify";
+    justifyContent?:
+      | "flex-start"
+      | "flex-end"
+      | "center"
+      | "space-between"
+      | "space-around"
+      | "space-evenly";
+  };
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  marginStyle?: {
+    margin?: number | DimensionValue;
+    marginLeft?: number | DimensionValue;
+    marginRight?: number | DimensionValue;
+    marginTop?: number | DimensionValue;
+    marginBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  paddingStyle?: {
+    padding?: number | DimensionValue;
+    paddingLeft?: number | DimensionValue;
+    paddingRight?: number | DimensionValue;
+    paddingTop?: number | DimensionValue;
+    paddingBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
+   */
+  height?: number | DimensionValue;
+
+  /**
+   * A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
+   */
+  width?: number | DimensionValue;
+
+  /**
+   * O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
+   */
+  backgroundColor?: string;
+
+  /**
+   * Propriedade texto que sera renderizado pro usuário final
+   */
+  text?: string;
+
+  /**
+   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
+   */
+  color?: {
+    colorSvg?: string;
+    colorText?: string;
+    colorTextBold?: string;
+    colorTextData?: string;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export type { ICardWorkSession };

package/src/components/list-devices/components/list-device-empty/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+
+// components
+import Box from "../../../box";
+import Typography from "../../../typography";
+
+// typings
+import { asBaseComponent } from "../../../../@types/as-base-component";
+
+// styles
+import { Icons } from "../../../../common/icons-svg";
+import { theme } from "../../../../styles/theme/theme";
+
+/**
+ * Componente ListDeviceEmpty para a exibição de messagens
+ */
+const ListDeviceEmpty = forwardRef<any, any>((_prop, ref): React.ReactElement => {
+  return (
+    <Box
+      ref={ref}
+      width={"100%"}
+      flexStyle={{
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Box
+        width={"100%"}
+        height={60}
+        flexStyle={{
+          flex: 1,
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Icons icon={"FILES"} size={28} color={theme.colors.gray[800]} />
+        <Typography
+          text={"Sem Relações de dispositivos."}
+          align={"center"}
+          size={theme.fontSizes.md}
+          fontFamily={theme.fonts.inter_regular_400}
+          color={theme.colors.gray[800]}
+          lineHeight={24}
+          letterSpacing={"regular"}
+        />
+      </Box>
+    </Box>
+  );
+});
+
+/**
+ * Componente ListDeviceEmpty para a interação da  ui.
+ */
+export default asBaseComponent(ListDeviceEmpty);

package/src/components/list-devices/components/list-device-render-item/index.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable no-unused-vars */
+
+/**
+ * IMPORTS
+ */
+import React, { useMemo } from "react";
+
+import { Text, TouchableOpacity, View } from "react-native";
+
+// commons / svg
+import { Icons } from "../../../../common/icons-svg";
+
+// typings
+import type { IData } from "../../interface";
+
+// styles
+import { theme } from "../../../../styles/theme/theme";
+import { styles as makeStyles } from "../../styles";
+
+/**
+ * Componente DeviceRow para a exibição de um item da lista de dispositivos
+ */
+const DeviceRow = React.memo(function DeviceRow({
+  device,
+  isSelected,
+  isLast,
+  disabled,
+  onPress,
+  titleColor,
+  textColorDescription,
+}: {
+  device: IData;
+  isSelected: boolean;
+  isLast: boolean;
+  disabled?: boolean;
+  onPress: (d: IData) => void;
+  titleColor?: string;
+  textColorDescription?: string;
+}) {
+  // estilos base/memoizados (evite recriar objetos grandes)
+  const s = useMemo(
+    () =>
+      makeStyles({
+        titleColor,
+        textColorDescription,
+        disabled,
+        isSelected,
+      }),
+    [titleColor, textColorDescription, disabled, isSelected]
+  );
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      testID="list-devices"
+      onPress={() => onPress(device)}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected, disabled }}
+      accessibilityLabel={`Dispositivo ${device.nameDevice}`}
+      style={[
+        s.containerIndicator,
+        !isLast && s.separator,
+        isSelected && s.containerIndicatorSelected,
+      ]}
+    >
+      <Icons
+        icon="BLUETOOTH"
+        size={26}
+        background={theme.colors.gray[600]}
+        color={theme.colors.gray[300]}
+      />
+      <View style={s.containerMain}>
+        <Text style={[s.title, isSelected && s.titleSelected]}>{device.nameDevice}</Text>
+        {!!device.macDevice && (
+          <Text style={[s.titleDescription, isSelected && s.descSelected]}>{device.macDevice}</Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+/**
+ * EXPORTS
+ */
+export { DeviceRow };

package/src/components/list-devices/index.tsx

@@ -1,23 +1,16 @@
 /**
  * IMPORTS
  */
-import React, { forwardRef } from "react";
-import { View, Text, TouchableOpacity, FlatList } from "react-native";
+import React, { forwardRef, useCallback } from "react";
+import { FlatList, type ListRenderItem } from "react-native";
 
-// components
-import Box from "../box";
-
-// icons
-import { Icons } from "../../common/icons-svg";
+import { DeviceRow } from "./components/list-device-render-item";
+import ListDeviceEmpty from "./components/list-device-empty";
 
 // typings
 import type { IListDevices, IData } from "./interface";
 import { asBaseComponent } from "../../@types/as-base-component";
 
-// styles
-import { styles as makeStyles } from "./styles";
-import { theme } from "../../styles/theme/theme";
-
 /**
  * Componente ListDevices para a interação da ui.
  */
@@ -28,7 +21,7 @@ const ListDevices = forwardRef<any, IListDevices>(
   ): React.ReactElement => {
     const isControlled = selectedId !== undefined;
     const [internalSelected, setInternalSelected] = React.useState<number | null>(
-      defaultSelectedId!
+      defaultSelectedId ?? null
     );
 
     const currentSelected = isControlled ? (selectedId ?? null) : internalSelected;
@@ -39,57 +32,32 @@ const ListDevices = forwardRef<any, IListDevices>(
       onSelect?.(device);
     };
 
-    if (!data?.length) return <Box />;
+    const renderItem: ListRenderItem<IData> = useCallback(
+      ({ item: device, index }) => {
+        const isLast = index === data?.length! - 1;
+        const isSelected = currentSelected === device.id;
+        return (
+          <DeviceRow
+            device={device}
+            isSelected={isSelected}
+            isLast={isLast}
+            disabled={disabled}
+            onPress={handlePress}
+            titleColor={titleColor}
+            textColorDescription={textColorDescription}
+          />
+        );
+      },
+      [currentSelected, disabled, handlePress, titleColor, textColorDescription]
+    );
 
     return (
       <FlatList
+        ref={ref}
         data={data}
         keyExtractor={({ id }) => String(id)}
-        renderItem={({ item: device, index }) => {
-          const isLast = index === data.length - 1;
-          const isSelected = currentSelected === device.id;
-
-          const s = makeStyles({
-            titleColor,
-            textColorDescription,
-            disabled,
-            isSelected,
-          });
-          return (
-            <TouchableOpacity
-              ref={ref}
-              activeOpacity={0.7}
-              testID="list-devices"
-              key={device.id}
-              onPress={() => handlePress(device)}
-              disabled={disabled}
-              accessibilityRole="button"
-              accessibilityState={{ selected: isSelected, disabled }}
-              accessibilityLabel={`Dispositivo ${device.nameDevice}`}
-              style={[
-                s.containerIndicator,
-                !isLast && s.separator,
-                isSelected && s.containerIndicatorSelected,
-              ]}
-            >
-              <Icons
-                icon={"BLUETOOTH"}
-                size={26}
-                background={theme.colors.gray[600]}
-                color={theme.colors.gray[300]}
-              />
-
-              <View style={s.containerMain}>
-                <Text style={[s.title, isSelected && s.titleSelected]}>{device.nameDevice}</Text>
-                {!!device.macDevice && (
-                  <Text style={[s.titleDescription, isSelected && s.descSelected]}>
-                    {device.macDevice}
-                  </Text>
-                )}
-              </View>
-            </TouchableOpacity>
-          );
-        }}
+        renderItem={renderItem}
+        ListEmptyComponent={ListDeviceEmpty}
       />
     );
   }

package/src/components/list-devices/{interface.d.ts → interface.ts}

@@ -1,36 +1,36 @@
-/* eslint-disable no-unused-vars */
-/**
- * IMPORTS
- */
-
-export type IData = {
-  id: number;
-  macDevice: string;
-  nameDevice: string;
-};
-
-export interface IListDevices {
-  /** dados que vão ser renderizados */
-  data?: IData[];
-
-  /** cor do texto */
-  titleColor?: string;
-
-  /** cor do titulo (não está sendo usada no componente atual, mantida por compat) */
-  titleNumberColor?: string;
-
-  /** cor do texto da descrição */
-  textColorDescription?: string;
-
-  /** (opcional) id selecionado - modo controlado */
-  selectedId?: number | null;
-
-  /** (opcional) seleção inicial - modo não-controlado */
-  defaultSelectedId?: number | null;
-
-  /** callback ao selecionar um item */
-  onSelect?: (device: IData) => void;
-
-  /** desabilita interação */
-  disabled?: boolean;
-}
+/* eslint-disable no-unused-vars */
+interface IData {
+  id: number;
+  macDevice: string;
+  nameDevice: string;
+}
+
+type Extra = { disabled?: boolean; isSelected?: boolean };
+
+interface IListDevices {
+  /** dados que vão ser renderizados */
+  data?: IData[];
+
+  /** cor do texto */
+  titleColor?: string;
+
+  /** cor do titulo (não está sendo usada no componente atual, mantida por compat) */
+  titleNumberColor?: string;
+
+  /** cor do texto da descrição */
+  textColorDescription?: string;
+
+  /** (opcional) id selecionado - modo controlado */
+  selectedId?: number | null;
+
+  /** (opcional) seleção inicial - modo não-controlado */
+  defaultSelectedId?: number | null;
+
+  /** callback ao selecionar um item */
+  onSelect?: (device: IData) => void;
+
+  /** desabilita interação */
+  disabled?: boolean;
+}
+
+export type { IData, IListDevices, Extra };