pagamio-frontend-commons-lib/lib/components/ui/DetailsPage.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo } from 'react';
import { useAppBreadcrumbs } from '../../context';
import FormEngineDrawer from '../../pagamio-drawer/index';
import { AppPageHeader } from '../layout';
import DetailsCard from './DetailsCard';
import HoverableValue from './HoverableValue';
const formatId = (value) => (_jsx(HoverableValue, { value: value.toString(), truncatedValue: `${value.toString().slice(0, 4)}…${value.toString().slice(-4)}` }));
const DetailsPage = ({ id, parentId, title, loading, detailsData, canEdit, onEdit, editButtonText = 'Edit', actionContent, entityName, parentEntityName, formEngineConfig, tabComponent, tabProps, }) => {
    const { updateBreadcrumb } = useAppBreadcrumbs();
    // Format IDs in details data
    const formattedDetailsData = useMemo(() => detailsData.map((item) => ({
        ...item,
        value: item.label.toLowerCase() === 'id' ? formatId(item.value?.toString() ?? '') : item.value,
    })), [detailsData]);
    // Handle breadcrumb updates
    useEffect(() => {
        if (parentId && parentEntityName) {
            updateBreadcrumb(parentId, parentEntityName);
        }
        if (id && entityName) {
            updateBreadcrumb(id, entityName);
        }
    }, [id, parentId, entityName, parentEntityName, updateBreadcrumb]);
    // Capitalize the component for JSX usage
    const TabComponent = tabComponent;
    return (_jsxs("div", { children: [_jsx(AppPageHeader, { title: title }), _jsx(DetailsCard, { loading: loading, data: formattedDetailsData, buttonText: editButtonText, showButton: canEdit, onClickButton: onEdit || (() => { }), actionContent: actionContent }), TabComponent && _jsx(TabComponent, { ...tabProps }), formEngineConfig && (_jsx(FormEngineDrawer, { title: formEngineConfig.title, isOpen: formEngineConfig.isOpen, onClose: formEngineConfig.onClose, onSubmit: formEngineConfig.onSubmit, fields: formEngineConfig.fields, initialValues: formEngineConfig.initialValues, submitButtonText: formEngineConfig.submitButtonText, marginTop: formEngineConfig.marginTop }, formEngineConfig.drawerKey))] }));
};
export default DetailsPage;