import { default as React } from 'react'; import { TabProps } from '@m4l/components'; import { NetworkProps } from '@m4l/core'; /** * Props obligatorias que deben tener todos los componentes de tab * * Estas props serán inyectadas automáticamente por ModuleDetailTabs a cada * componente de tab. No es necesario pasarlas manualmente al definir los tabs. * @template T - Tipo de los datos del registro seleccionado en el master * @template K - Tipo de los datos adicionales obtenidos desde un endpoint (opcional) */ export interface ModuleDetailTabContent = Record, K extends Record = Record> { /** * Datos del registro seleccionado en el master (lista principal) * * Esta prop contiene toda la información del registro que el usuario * seleccionó en la lista principal. Es OBLIGATORIA y siempre estará disponible. * * Ejemplo: Si el usuario selecciona un inventario con id: 1001, name: "Inventario A", * entonces data contendrá { id: 1001, name: "Inventario A", ... } */ data: T; /** * Datos adicionales obtenidos desde un endpoint de detalle (opcional) * * Solo estará disponible si se configuró la prop `getEndPoint` en ModuleDetailTabsProps. * Contiene información complementaria que se obtiene mediante una petición HTTP * adicional al seleccionar un registro en el master. * * Ejemplo: Información detallada como descripción, ubicación, historial, etc. */ endPointData?: K; /** * Indica si el usuario tiene privilegios para ver el detalle * * Se establece automáticamente basándose en la respuesta del endpoint. * Si el endpoint retorna un error 403 (Forbidden), este valor será false. */ hasPrivilegeDetail?: boolean; /** * Función para refrescar los datos del detalle * * Al llamar a esta función, se volverá a ejecutar la petición al endpoint * configurado en `getEndPoint` para obtener los datos actualizados. * * Útil cuando se necesita actualizar la información después de una acción * (por ejemplo, después de editar o eliminar un registro). */ refreshDetail: () => void; } /** * Interfaz base para las propiedades comunes de todos los tabs * * Extiende TabProps de @m4l/components pero omite 'label' ya que * se genera automáticamente desde el dictionaryId o se puede personalizar. */ interface ModuleDetailBaseTab extends Omit { /** * ID del diccionario para obtener la etiqueta traducida del tab * * Si se proporciona, el label del tab se obtendrá automáticamente * del diccionario usando este ID. Si no se proporciona, el tab no * tendrá label visible (aunque puede tener icono). * * Ejemplo: 'general', 'secondary', 'details', etc. */ dictionaryId?: string; /** * Indica si el componente del tab se desmonta cuando no está seleccionado * * - true (default): El componente se desmonta completamente cuando se cambia de tab. * Útil para mejorar el rendimiento y resetear el estado del componente. * * - false: El componente permanece montado pero oculto. Útil cuando se necesita * mantener el estado del componente al cambiar entre tabs. */ unmountable?: boolean; } type ComponentWithData = Record, K extends Record = Record, C extends React.ElementType = React.ElementType> = React.FunctionComponent & React.ComponentProps>; /** * Interfaz para definir un tab en ModuleDetailTabs * * Cada tab representa una sección de información que se muestra cuando * el usuario selecciona un registro en el master (lista principal). * @template T - Tipo de los datos del registro seleccionado en el master * @template K - Tipo de los datos adicionales obtenidos desde un endpoint * @template C - Tipo del componente React que renderiza el contenido del tab */ export interface ModuleDatailTab = Record, K extends Record = Record, C extends React.ElementType = React.ElementType> extends ModuleDetailBaseTab { /** * Identificador único del tab (valor o key) * * Debe ser único entre todos los tabs. Se usa para identificar * qué tab está activo y para cambiar entre tabs. * * Ejemplo: 'main', 'secondary', 'details', 'logs', etc. */ value: string; /** * Componente React que renderiza el contenido del tab * * IMPORTANTE: Debe ser el componente sin instanciar (la función/clase), * NO una instancia del componente (). * * El componente debe aceptar las props definidas en ModuleDetailTabContent, * que serán inyectadas automáticamente: * - data: Datos del registro seleccionado * - endPointData: Datos adicionales del endpoint (opcional) * - hasPrivilegeDetail: Si tiene privilegios * - refreshDetail: Función para refrescar * * Ejemplo: tabContent: MainTab (no ) */ tabContent: ComponentWithData; /** * Propiedades adicionales que se pasarán al componente del tab * * Estas props se combinarán con las props automáticas (data, endPointData, etc.) * que inyecta ModuleDetailTabs. * * IMPORTANTE: No se puede sobrescribir ninguna prop de ModuleDetailTabContent * (data, endPointData, hasPrivilegeDetail, refreshDetail) ya que estas son * inyectadas automáticamente y tienen prioridad. * * Ejemplo: { customProp: 'value', onCustomAction: () => {} } */ componentProps?: Omit, keyof ModuleDetailTabContent>; /** * Indica si el contenido del tab debe tener un fondo visual * * - true: El contenido tendrá un fondo (generalmente blanco o gris claro) * - false (default): El contenido no tendrá fondo, será transparente * * Útil para diferenciar visualmente el contenido del tab del fondo de la aplicación. */ hasBackground?: boolean; /** * Función opcional que determina si el tab debe mostrarse u ocultarse * * Esta función se evalúa cada vez que cambian los datos del detalle o del endpoint. * Permite mostrar u ocultar tabs dinámicamente según las condiciones del negocio. * @param detailData - Datos del registro seleccionado en el master * @param endPointData - Datos adicionales del endpoint (puede ser undefined) * @returns true si el tab debe mostrarse, false si debe ocultarse * * Ejemplo: * ```typescript * visibilityCondition: (detailData, endPointData) => { * // Solo mostrar si el inventario está activo * return detailData?.status === 'activo'; * } * ``` * * Si no se proporciona, el tab siempre se mostrará (siempre que haya una selección en el master). */ visibilityCondition?: (detailData: T, endPointData?: K) => boolean; } /** * Interfaz para las props del tab de logs */ export interface ModuleDetailBaseObjectLogs extends ModuleDetailBaseTab { type?: 'm4l' | 'other'; } /** * Interfaz para las props del tab de logs */ export interface ModuleDetailM4LObjectLogs extends ModuleDetailBaseObjectLogs { type?: 'm4l'; /** * "resourceId" Id del recurso para el logs. */ resourceId: string | number; /** * "getObjectId" Función para obtener el id del objeto. */ getObjectId: (detailData: T) => number; } /** * Interfaz para las props del tab de logs */ export interface ModuleDetailOtherObjectLogs extends ModuleDetailBaseObjectLogs { type: 'other'; /** * "resourceTypeId" Id del tipo de recurso para el logs. */ resourceTypeId: string; /** * "getObjectSerialId" retorna el uuid del objeto. */ getObjectSerialId: (detailData: T) => string; } export type ModuleDetailObjectLogs> = ModuleDetailM4LObjectLogs | ModuleDetailOtherObjectLogs; /** * Props principales del componente ModuleDetailTabs * * Define la configuración completa de los tabs que se mostrarán cuando * el usuario seleccione un registro en el master (lista principal). * @template T - Tipo de los datos del registro seleccionado en el master * @template K - Tipo de los datos adicionales obtenidos desde un endpoint */ export interface ModuleDetailTabsProps = Record, K extends Record = Record> { /** * Identificador del tab que se mostrará por defecto al seleccionar un registro * * Debe coincidir con el 'value' de uno de los tabs definidos en la lista 'tabs'. * Si no se proporciona o el tab especificado no está disponible, se mostrará * el primer tab de la lista. * * Ejemplo: 'main', 'general', 'details' */ defaultTab: string; /** * Prefijo de la URL base para cargar los iconos de los tabs * * Se concatena con la ruta del icono definida en cada tab para formar * la URL completa del icono. * * Ejemplos comunes: * - host_api_remote * - host_static_asset/environment_assets * - https://cdn.example.com/assets * * Ejemplo de uso: * Si urlAssetsPrefix = 'https://api.example.com' y el icono es '/icons/tab-icon.svg', * la URL final será: 'https://api.example.com/icons/tab-icon.svg' */ urlAssetsPrefix: string; /** * Lista de tabs que se mostrarán en el componente * * Cada tab define su contenido, icono, etiqueta, condiciones de visibilidad, etc. * Los tabs se mostrarán en el orden en que aparecen en este array. * * Ver ModuleDatailTab para más detalles sobre la estructura de cada tab. */ tabs: ModuleDatailTab[]; /** * Configuración opcional para agregar un tab de logs automáticamente * * Si se proporciona, se agregará un tab adicional al final de la lista * que muestra los logs/auditoría del objeto seleccionado. * * Soporta dos tipos: * - 'm4l': Para objetos del sistema M4L (requiere resourceId y getObjectId) * - 'other': Para objetos externos (requiere resourceTypeId y getObjectSerialId) * * Ver ModuleDetailObjectLogs para más detalles. */ objectLogsProps?: ModuleDetailObjectLogs; /** * Función opcional para obtener los datos adicionales desde un endpoint * * Si se proporciona, se ejecutará una petición HTTP al seleccionar un registro * en el master. Los datos obtenidos se pasarán a todos los componentes de tab * a través de la prop 'endPointData'. * @param masterSelection - El registro seleccionado en el master * @returns Configuración de la petición HTTP (NetworkProps) * * Ejemplo: * ```typescript * getEndPoint: (inventory) => ({ * method: 'GET', * endPoint: `/api/inventories/${inventory.id}/details` * }) * ``` * * Los datos retornados por el endpoint estarán disponibles en todos los tabs * a través de la prop 'endPointData' de ModuleDetailTabContent. */ getEndPoint?: (masterSelection: T) => NetworkProps; } export {}; //# sourceMappingURL=types.d.ts.map