react-antd-admin-panel/dist/Section-QsEya_jl.cjs.map

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

{"version":3,"file":"Section-QsEya_jl.cjs","sources":["../src/section/Section.tsx"],"sourcesContent":["import React from 'react';\nimport { Row, Col, Card, Modal, Drawer } from 'antd';\nimport type { RowProps, ColProps, CardProps, ModalProps, DrawerProps } from 'antd';\nimport { BaseBuilder } from '../base/BaseBuilder';\nimport type { ComponentConfig } from '../types';\n\nexport interface ResponsiveBreakpoint {\n  xs?: number; // <576px\n  sm?: number; // ≥576px\n  md?: number; // ≥768px\n  lg?: number; // ≥992px\n  xl?: number; // ≥1200px\n  xxl?: number; // ≥1600px\n}\n\nexport interface SectionConfig extends ComponentConfig {\n  col?: number;\n  responsive?: ResponsiveBreakpoint;\n  row?: boolean;\n  card?: boolean;\n  cardProps?: CardProps;\n  modal?: boolean;\n  modalProps?: ModalProps;\n  drawer?: boolean;\n  drawerProps?: DrawerProps;\n  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';\n  align?: 'top' | 'middle' | 'bottom';\n  gutter?: number | [number, number];\n  style?: React.CSSProperties;\n}\n\n/**\n * Section - Layout and composition component\n * Manages grid layout, child components, and form integration\n * \n * @example\n * const section = new Section()\n *   .card(true)\n *   .col(12)\n *   .add(new Input().key('name').label('Name'))\n *   .add(new Input().key('email').label('Email'));\n */\nexport class Section extends BaseBuilder<SectionConfig> {\n  public _children: Array<{ render(): React.ReactNode } | React.ReactNode> = [];\n  public _rowChildren: Array<{ render(): React.ReactNode } | React.ReactNode> = [];\n\n  /**\n   * Set column span (24-grid system)\n   */\n  col(span: number): this {\n    this._config.col = span;\n    return this;\n  }\n\n  /**\n   * Set responsive breakpoints for column span\n   */\n  responsive(breakpoints: ResponsiveBreakpoint): this {\n    this._config.responsive = breakpoints;\n    return this;\n  }\n\n  /**\n   * Enable row layout (horizontal)\n   */\n  row(value: boolean = true): this {\n    this._config.row = value;\n    return this;\n  }\n\n  /**\n   * Wrap in Card component\n   */\n  card(value: boolean | CardProps = true): this {\n    if (typeof value === 'boolean') {\n      this._config.card = value;\n    } else {\n      this._config.card = true;\n      this._config.cardProps = value;\n    }\n    return this;\n  }\n\n  /**\n   * Render in Modal\n   */\n  modal(value: boolean | ModalProps = true): this {\n    if (typeof value === 'boolean') {\n      this._config.modal = value;\n    } else {\n      this._config.modal = true;\n      this._config.modalProps = value;\n    }\n    return this;\n  }\n\n  /**\n   * Render in Drawer\n   */\n  drawer(value: boolean | DrawerProps = true): this {\n    if (typeof value === 'boolean') {\n      this._config.drawer = value;\n    } else {\n      this._config.drawer = true;\n      this._config.drawerProps = value;\n    }\n    return this;\n  }\n\n  /**\n   * Set row justify alignment\n   */\n  justify(value: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'): this {\n    this._config.justify = value;\n    return this;\n  }\n\n  /**\n   * Set row align\n   */\n  align(value: 'top' | 'middle' | 'bottom'): this {\n    this._config.align = value;\n    return this;\n  }\n\n  /**\n   * Set gutter (spacing between columns)\n   */\n  gutter(value: number | [number, number]): this {\n    this._config.gutter = value;\n    return this;\n  }\n\n  /**\n   * Set custom styles\n   */\n  style(value: React.CSSProperties): this {\n    this._config.style = value;\n    return this;\n  }\n\n  /**\n   * Add a child component\n   */\n  add(child: { render(): React.ReactNode } | React.ReactNode): this {\n    // Store the builder itself, not the rendered result\n    this._children.push(child);\n    return this;\n  }\n\n  /**\n   * Add multiple children\n   */\n  addMore(children: Array<{ render(): React.ReactNode } | React.ReactNode>): this {\n    children.forEach(child => this.add(child));\n    return this;\n  }\n\n  /**\n   * Add child to row-end position\n   */\n  addRowEnd(child: { render(): React.ReactNode } | React.ReactNode): this {\n    // Store the builder itself, not the rendered result\n    this._rowChildren.push(child);\n    return this;\n  }\n\n  /**\n   * Clear all children\n   */\n  clear(): this {\n    this._children = [];\n    this._rowChildren = [];\n    return this;\n  }\n\n  /**\n   * Get all children\n   */\n  getChildren(): Array<{ render(): React.ReactNode } | React.ReactNode> {\n    return [...this._children];\n  }\n\n  /**\n   * Render method for compatibility - returns a SectionComponent\n   */\n  render(): React.ReactNode {\n    if (this._config.hidden) {\n      return null;\n    }\n    return <SectionComponent section={this} />;\n  }\n}\n\n/**\n * SectionComponent - React component that renders a Section builder\n * Wrapped with React.memo to prevent unnecessary re-renders\n */\nconst SectionComponent = React.memo<{ section: Section }>(({ section }) => {\n  if (section._config.hidden) {\n    return null;\n  }\n\n  const children: Array<{ render(): React.ReactNode } | React.ReactNode> = [...section._children, ...section._rowChildren];\n\n  // Render each child dynamically\n  const renderedChildren = children.map((child, index) => {\n    if (child && typeof child === 'object' && 'render' in child && typeof (child as any).render === 'function') {\n      return <React.Fragment key={index}>{(child as { render(): React.ReactNode }).render()}</React.Fragment>;\n    }\n    return <React.Fragment key={index}>{child as React.ReactNode}</React.Fragment>;\n  });\n\n  let content: React.ReactNode;\n\n  if (section._config.row) {\n    // Row layout\n    const rowProps: RowProps = {\n      justify: section._config.justify,\n      align: section._config.align,\n      gutter: section._config.gutter,\n      style: section._config.style,\n    };\n    content = <Row {...rowProps}>{renderedChildren}</Row>;\n  } else {\n    // Column layout (default)\n    content = <div style={section._config.style}>{renderedChildren}</div>;\n  }\n\n  // Apply wrappers\n  if (section._config.card) {\n    content = <Card {...section._config.cardProps}>{content}</Card>;\n  }\n\n  if (section._config.col || section._config.responsive) {\n    const colProps: ColProps = {\n      span: section._config.col,\n      ...section._config.responsive,\n    };\n    content = <Col {...colProps}>{content}</Col>;\n  }\n\n  if (section._config.modal) {\n    content = (\n      <Modal open={true} {...section._config.modalProps}>\n        {content}\n      </Modal>\n    );\n  }\n\n  if (section._config.drawer) {\n    content = (\n      <Drawer open={true} {...section._config.drawerProps}>\n        {content}\n      </Drawer>\n    );\n  }\n\n  return <>{content}</>;\n});\n"],"names":["BaseBuilder","jsx","Row","Card","Col","Modal","Drawer"],"mappings":"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"}