jornada-ui 0.4.12 → 0.4.14

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,102 +1,71 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
-
-// components
-import Box from "../box";
-
-// icons
-import { Icons } from "../../common/icons-svg";
-
-// 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.
- */
-const ListDevices = forwardRef<any, IListDevices>(
-  (
-    { data, textColorDescription, titleColor, selectedId, onSelect, defaultSelectedId, disabled },
-    ref
-  ): React.ReactElement => {
-    const isControlled = selectedId !== undefined;
-    const [internalSelected, setInternalSelected] = React.useState<number | null>(
-      defaultSelectedId!
-    );
-
-    const currentSelected = isControlled ? (selectedId ?? null) : internalSelected;
-
-    const handlePress = (device: IData) => {
-      if (disabled) return;
-      if (!isControlled) setInternalSelected(device.id);
-      onSelect?.(device);
-    };
-
-    if (!data?.length) return <Box />;
-
-    return (
-      <>
-        {data.map((history, index) => {
-          const isLast = index === data.length - 1;
-          const isSelected = currentSelected === history.id;
-
-          const s = makeStyles({
-            titleColor,
-            textColorDescription,
-            disabled,
-            isSelected,
-          });
-
-          return (
-            <TouchableOpacity
-              ref={ref}
-              activeOpacity={0.7}
-              testID="list-devices"
-              key={history.id}
-              onPress={() => handlePress(history)}
-              disabled={disabled}
-              accessibilityRole="button"
-              accessibilityState={{ selected: isSelected, disabled }}
-              accessibilityLabel={`Dispositivo ${history.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]}>{history.nameDevice}</Text>
-                {!!history.macDevice && (
-                  <Text style={[s.titleDescription, isSelected && s.descSelected]}>
-                    {history.macDevice}
-                  </Text>
-                )}
-              </View>
-            </TouchableOpacity>
-          );
-        })}
-      </>
-    );
-  }
-);
-
-ListDevices.displayName = "ListDevices";
-
-/**
- * EXPORTS
- */
-export default asBaseComponent(ListDevices);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useCallback } from "react";
+import { FlatList, type ListRenderItem } from "react-native";
+
+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";
+
+/**
+ * Componente ListDevices para a interação da ui.
+ */
+const ListDevices = forwardRef<any, IListDevices>(
+  (
+    { data, textColorDescription, titleColor, selectedId, onSelect, defaultSelectedId, disabled },
+    ref
+  ): React.ReactElement => {
+    const isControlled = selectedId !== undefined;
+    const [internalSelected, setInternalSelected] = React.useState<number | null>(
+      defaultSelectedId ?? null
+    );
+
+    const currentSelected = isControlled ? (selectedId ?? null) : internalSelected;
+
+    const handlePress = (device: IData) => {
+      if (disabled) return;
+      if (!isControlled) setInternalSelected(device.id);
+      onSelect?.(device);
+    };
+
+    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={renderItem}
+        ListEmptyComponent={ListDeviceEmpty}
+      />
+    );
+  }
+);
+
+ListDevices.displayName = "ListDevices";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ListDevices);

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 };

package/src/components/list-devices/styles.ts

@@ -1,68 +1,73 @@
-import { StyleSheet } from "react-native";
-import { type IListDevices } from "./interface";
-import { theme } from "../../styles/theme/theme";
-
-type Extra = { disabled?: boolean; isSelected?: boolean };
-
-const styles = (props: Partial<IListDevices & Extra> = {}) =>
-  StyleSheet.create({
-    containerIndicator: {
-      width: "100%",
-      flexDirection: "row",
-      justifyContent: "flex-start",
-      alignItems: "center",
-      marginTop: 8,
-      paddingVertical: 8,
-      paddingHorizontal: 8,
-      opacity: props.disabled ? 0.6 : 1,
-    },
-
-    containerIndicatorSelected: {
-      backgroundColor: theme.colors.green[250],
-      borderRadius: 30,
-    },
-
-    separator: {
-      borderBottomWidth: 1,
-      borderBottomColor: props.isSelected
-        ? "transparent"
-        : theme.colors.gray[700],
-    },
-
-    title: {
-      color: props.titleColor ?? theme.colors.black[10],
-      textAlign: "center",
-      lineHeight: 20,
-      fontSize: theme.fontSizes.sm,
-      fontWeight: "500",
-      marginLeft: theme.margins.xs,
-    },
-
-    titleSelected: {
-      color: theme.colors.neutral[25],
-      fontWeight: "600",
-    },
-
-    titleDescription: {
-      color: props.textColorDescription ?? theme.colors.gray[600],
-      textAlign: "center",
-      lineHeight: 16,
-      fontSize: 18,
-      fontFamily: theme.fonts.inter_light_300,
-      marginLeft: theme.margins.xs,
-    },
-    
-    descSelected: {
-      color: theme.colors.neutral[25],
-    },
-
-    containerMain: {
-      width: "100%",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      marginLeft: 2,
-      justifyContent: "center",
-    },
-  });
-
-export { styles };
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { type IListDevices, type Extra } from "./interface";
+
+const styles = (props: Partial<IListDevices & Extra> = {}) =>
+  StyleSheet.create({
+    containerIndicator: {
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      marginTop: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 8,
+      opacity: props.disabled ? 0.6 : 1,
+    },
+
+    containerIndicatorSelected: {
+      backgroundColor: theme.colors.green[250],
+      borderRadius: 30,
+    },
+
+    separator: {
+      borderBottomWidth: 1,
+      borderBottomColor: props.isSelected ? "transparent" : theme.colors.gray[700],
+    },
+
+    title: {
+      color: props.titleColor ?? theme.colors.black[10],
+      textAlign: "center",
+      lineHeight: 20,
+      fontSize: theme.fontSizes.lg,
+      fontWeight: "500",
+      marginLeft: theme.margins.xs,
+      marginBottom: 8,
+    },
+
+    titleSelected: {
+      color: theme.colors.neutral[25],
+      fontWeight: "600",
+    },
+
+    titleDescription: {
+      color: props.textColorDescription ?? theme.colors.gray[600],
+      textAlign: "center",
+      lineHeight: 16,
+      fontSize: theme.fontSizes.md,
+      fontFamily: theme.fonts.inter_light_300,
+      marginLeft: theme.margins.xs,
+    },
+
+    descSelected: {
+      color: theme.colors.neutral[25],
+    },
+
+    containerMain: {
+      width: "100%",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      marginLeft: 2,
+      justifyContent: "center",
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -101,7 +101,7 @@ const ModalToConfirmations: React.FC<IModalToConfirmationsProps> = ({
                   lineHeight={24}
                   letterSpacing={"regular"}
                 />
-                {text2 ?? "Alterar?"}
+                {text2}
               </Text>
             </Box>