@vaadin/hilla-react-crud/autocrud.js

Hilla CRUD utils for React

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button } from '@vaadin/react-components/Button.js';
import { SplitLayout } from '@vaadin/react-components/SplitLayout.js';
import { useId, useRef, useState } from 'react';
import { AutoCrudDialog } from './autocrud-dialog.js';
import css from './autocrud.obj.js';
import { emptyItem, AutoForm } from './autoform.js';
import { AutoGrid } from './autogrid.js';
import { useMediaQuery } from './media-query.js';
import { registerStylesheet } from './util.js';
registerStylesheet(css);
function defaultFormHeaderRenderer(editedItem, disabled) {
    const style = { color: disabled ? 'var(--lumo-disabled-text-color)' : 'var(--lumo-text-color)' };
    return editedItem ? _jsx("h3", { style: style, children: "Edit item" }) : _jsx("h3", { style: style, children: "New item" });
}
export function AutoCrud({ service, model, itemIdProperty, noNewButton, formProps, gridProps, style, id, className, }) {
    const [item, setItem] = useState(undefined);
    const fullScreen = useMediaQuery('(max-width: 600px), (max-height: 600px)');
    const autoGridRef = useRef(null);
    const { headerRenderer: customFormHeaderRenderer, ...autoFormProps } = formProps ?? {};
    const formHeaderRenderer = customFormHeaderRenderer ?? defaultFormHeaderRenderer;
    const autoCrudId = useId();
    function refreshGrid() {
        autoGridRef.current?.refresh();
    }
    function handleCancel() {
        setItem(undefined);
    }
    const formHeader = item && item !== emptyItem ? formHeaderRenderer(item, !item) : formHeaderRenderer(null, !item);
    const mainSection = (_jsxs("div", { className: "auto-crud-main", children: [_jsx(AutoGrid, { ...gridProps, service: service, model: model, itemIdProperty: itemIdProperty, selectedItems: item && item !== emptyItem ? [item] : [], onActiveItemChanged: (e) => {
                    const activeItem = e.detail.value;
                    setItem(activeItem ?? undefined);
                }, ref: autoGridRef, "aria-controls": autoFormProps.id ?? `auto-form-${id ?? autoCrudId}` }), !noNewButton && (_jsx("div", { className: "auto-crud-toolbar", children: _jsx(Button, { theme: "primary", onClick: () => setItem(emptyItem), children: "+ New" }) }))] }));
    const autoForm = (_jsx(AutoForm, { id: autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`, deleteButtonVisible: true, ...autoFormProps, disabled: !item, service: service, model: model, itemIdProperty: itemIdProperty, item: item, onSubmitSuccess: ({ item: submittedItem }) => {
            if (fullScreen) {
                setItem(undefined);
            }
            else {
                setItem(submittedItem);
            }
            refreshGrid();
        }, onDeleteSuccess: () => {
            setItem(undefined);
            refreshGrid();
        } }));
    return (_jsx("div", { className: `auto-crud ${className ?? ''}`, id: id, style: style, children: noNewButton && (!item || item === emptyItem) ? (mainSection) : fullScreen ? (_jsxs(_Fragment, { children: [mainSection, _jsx(AutoCrudDialog, { opened: !!item, header: formHeader, onClose: handleCancel, children: autoForm })] })) : (_jsxs(SplitLayout, { theme: "small", children: [mainSection, _jsxs("div", { className: "auto-crud-form", children: [_jsx("div", { className: "auto-crud-form-header", children: formHeader }), autoForm] })] })) }));
}
//# sourceMappingURL=autocrud.js.map