All files / blong-browser/src/components/Page Page.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Page — wrapper component for portal tab content.
 *
 * Provides a consistent page header (title, breadcrumb, toolbar)
 * and a scrollable content area.
 */
import {BreadCrumb, Toolbar} from '../../primereact/index.js';

import React from 'react';
import type {IToolbarButton} from '../../index.js';
import {ActionButton} from '../ActionButton/ActionButton.js';

export interface IBreadcrumbItem {
    label: string;
    /** Action name to navigate on click */
    action?: string;
}

export interface IPageProps {
    title?: string;
    breadcrumbs?: IBreadcrumbItem[];
    /** Toolbar buttons (left) */
    toolbar?: IToolbarButton[];
    /** Toolbar buttons (right) */
    toolbarRight?: IToolbarButton[];
    /** Form id to wire submit buttons */
    formId?: string;
    className?: string;
    children?: React.ReactNode;
}

export function Page({
    title,
    breadcrumbs = [],
    toolbar = [],
    toolbarRight = [],
    formId,
    className = '',
    children,
}: IPageProps) {
    const home = {icon: 'pi pi-home'};
    const crumbModel = breadcrumbs.map(c => ({label: c.label}));

    const hasToolbar = toolbar.length > 0 || toolbarRight.length > 0;

    return (
        <div className={`blong-page ${className}`}>
            <div className="blong-page-header">
                {title && <h2 className="blong-page-title">{title}</h2>}
                {breadcrumbs.length > 0 && (
                    <BreadCrumb
                        model={crumbModel}
                        home={home}
                        className="blong-page-breadcrumb"
                    />
                )}
                {hasToolbar && (
                    <Toolbar
                        start={
                            toolbar.length > 0 ? (
                                <div className="blong-toolbar-left">
                                    {toolbar.map((btn, i) => (
                                        <ActionButton
                                            // eslint-disable-next-line @eslint-react/no-array-index-key
                                            key={i}
                                            {...btn}
                                            formId={formId}
                                        />
                                    ))}
                                </div>
                            ) : undefined
                        }
                        end={
                            toolbarRight.length > 0 ? (
                                <div className="blong-toolbar-right">
                                    {toolbarRight.map((btn, i) => (
                                        <ActionButton
                                            // eslint-disable-next-line @eslint-react/no-array-index-key
                                            key={i}
                                            {...btn}
                                            formId={formId}
                                        />
                                    ))}
                                </div>
                            ) : undefined
                        }
                        className="blong-page-toolbar"
                    />
                )}
            </div>
            <div className="blong-page-body">{children}</div>
        </div>
    );
}