react-antd-admin-panel/dist/section/Section.js

Modern TypeScript-first React admin panel builder with Ant Design 6

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Row, Col, Card, Modal, Drawer } from 'antd';
import { BaseBuilder } from '../base/BaseBuilder';
/**
 * Section - Layout and composition component
 * Manages grid layout, child components, and form integration
 *
 * @example
 * const section = new Section()
 *   .card(true)
 *   .col(12)
 *   .add(new Input().key('name').label('Name'))
 *   .add(new Input().key('email').label('Email'));
 */
export class Section extends BaseBuilder {
    _children = [];
    _rowChildren = [];
    /**
     * Set column span (24-grid system)
     */
    col(span) {
        this._config.col = span;
        return this;
    }
    /**
     * Set responsive breakpoints for column span
     */
    responsive(breakpoints) {
        this._config.responsive = breakpoints;
        return this;
    }
    /**
     * Enable row layout (horizontal)
     */
    row(value = true) {
        this._config.row = value;
        return this;
    }
    /**
     * Wrap in Card component
     */
    card(value = true) {
        if (typeof value === 'boolean') {
            this._config.card = value;
        }
        else {
            this._config.card = true;
            this._config.cardProps = value;
        }
        return this;
    }
    /**
     * Render in Modal
     */
    modal(value = true) {
        if (typeof value === 'boolean') {
            this._config.modal = value;
        }
        else {
            this._config.modal = true;
            this._config.modalProps = value;
        }
        return this;
    }
    /**
     * Render in Drawer
     */
    drawer(value = true) {
        if (typeof value === 'boolean') {
            this._config.drawer = value;
        }
        else {
            this._config.drawer = true;
            this._config.drawerProps = value;
        }
        return this;
    }
    /**
     * Set row justify alignment
     */
    justify(value) {
        this._config.justify = value;
        return this;
    }
    /**
     * Set row align
     */
    align(value) {
        this._config.align = value;
        return this;
    }
    /**
     * Set gutter (spacing between columns)
     */
    gutter(value) {
        this._config.gutter = value;
        return this;
    }
    /**
     * Set custom styles
     */
    style(value) {
        this._config.style = value;
        return this;
    }
    /**
     * Add a child component
     */
    add(child) {
        // Store the builder itself, not the rendered result
        this._children.push(child);
        return this;
    }
    /**
     * Add multiple children
     */
    addMore(children) {
        children.forEach(child => this.add(child));
        return this;
    }
    /**
     * Add child to row-end position
     */
    addRowEnd(child) {
        // Store the builder itself, not the rendered result
        this._rowChildren.push(child);
        return this;
    }
    /**
     * Clear all children
     */
    clear() {
        this._children = [];
        this._rowChildren = [];
        return this;
    }
    /**
     * Get all children
     */
    getChildren() {
        return [...this._children];
    }
    /**
     * Render method for compatibility - returns a SectionComponent
     */
    render() {
        if (this._config.hidden) {
            return null;
        }
        return _jsx(SectionComponent, { section: this });
    }
}
/**
 * SectionComponent - React component that renders a Section builder
 * Wrapped with React.memo to prevent unnecessary re-renders
 */
const SectionComponent = React.memo(({ section }) => {
    if (section._config.hidden) {
        return null;
    }
    const children = [...section._children, ...section._rowChildren];
    // Render each child dynamically
    const renderedChildren = children.map((child, index) => {
        if (child && typeof child === 'object' && 'render' in child && typeof child.render === 'function') {
            return _jsx(React.Fragment, { children: child.render() }, index);
        }
        return _jsx(React.Fragment, { children: child }, index);
    });
    let content;
    if (section._config.row) {
        // Row layout
        const rowProps = {
            justify: section._config.justify,
            align: section._config.align,
            gutter: section._config.gutter,
            style: section._config.style,
        };
        content = _jsx(Row, { ...rowProps, children: renderedChildren });
    }
    else {
        // Column layout (default)
        content = _jsx("div", { style: section._config.style, children: renderedChildren });
    }
    // Apply wrappers
    if (section._config.card) {
        content = _jsx(Card, { ...section._config.cardProps, children: content });
    }
    if (section._config.col || section._config.responsive) {
        const colProps = {
            span: section._config.col,
            ...section._config.responsive,
        };
        content = _jsx(Col, { ...colProps, children: content });
    }
    if (section._config.modal) {
        content = (_jsx(Modal, { open: true, ...section._config.modalProps, children: content }));
    }
    if (section._config.drawer) {
        content = (_jsx(Drawer, { open: true, ...section._config.drawerProps, children: content }));
    }
    return _jsx(_Fragment, { children: content });
});
//# sourceMappingURL=Section.js.map