@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
51 lines (50 loc) • 3.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useMemo } from 'react';
import { useAppBreadcrumbs } from '../../context';
import { truncateId } from '../../dashboard-visuals/utils/formatUtil';
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: truncateId(value, { startChars: 4, endChars: 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) => {
// Only format ID fields specially
if (item.label.toLowerCase() === 'id') {
let displayValue = '';
if (typeof item.value === 'string' || typeof item.value === 'number') {
displayValue = item.value.toString();
}
else if (React.isValidElement(item.value)) {
displayValue = 'React Component';
}
else if (typeof item.value === 'object' && item.value !== null) {
displayValue = 'Object';
}
else if (item.value != null) {
displayValue = String(item.value);
}
return {
...item,
value: formatId(displayValue),
};
}
// For non-ID fields, return as-is (React components are fine)
return item;
}), [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, onFieldChange: formEngineConfig.onFieldChange, onFieldUpdate: formEngineConfig.onFieldUpdate, persistenceKey: formEngineConfig.persistenceKey, children: formEngineConfig.children }, formEngineConfig.drawerKey))] }));
};
export default DetailsPage;