From 76b25497e4ed73adb26a1eae172c7024e51a124b Mon Sep 17 00:00:00 2001 From: Eryk Mika <eryk.mika@wpdesk.eu> Date: Tue, 11 Mar 2025 11:13:02 +0100 Subject: [PATCH] refactor: separated header, body to different files to make the component smaller --- src/FlexibleTable/FlexibleTable.jsx | 165 +++++++++++++--------------- src/FlexibleTable/TableBody.jsx | 69 ++++++++++++ src/FlexibleTable/TableHead.jsx | 58 ++++++++++ 3 files changed, 203 insertions(+), 89 deletions(-) create mode 100644 src/FlexibleTable/TableBody.jsx create mode 100644 src/FlexibleTable/TableHead.jsx diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx index d4299a6..c9ad429 100644 --- a/src/FlexibleTable/FlexibleTable.jsx +++ b/src/FlexibleTable/FlexibleTable.jsx @@ -1,10 +1,20 @@ import {__} from '@wordpress/i18n'; -import {RichText, InspectorControls, useBlockProps,} from '@wordpress/block-editor'; +import {InspectorControls, useBlockProps,} from '@wordpress/block-editor'; import {PanelBody, ToggleControl} from '@wordpress/components'; import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd"; import {DuoInput, NumberWithUnit, ColorSelector, FontStyles, AlignButtons, BlockPlaceholders} from "../../index"; +import TableBody from "./TableBody"; +import TableHead from "./TableHead"; -export default function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) { +export default function FlexibleTable({ + attributes, + setAttributes, + placeholders, + additionalOptions, + tableHeader, + tableBody, + tableFooter, + }) { const { headers, rows, @@ -252,16 +262,16 @@ export default function FlexibleTable({attributes, setAttributes, placeholders, {multipleBodyBackground ? <> <ColorSelector - label={__('Background color (even rows)', 'flexible-invoices-core')} - value={bodyBackgroundEven} - onChange={(value) => setAttributes({bodyBackgroundEven: value})} - /> - <ColorSelector - label={__('Text color (even rows)', 'flexible-invoices-core')} - value={bodyTextColorEven} - enableAlpha={false} - onChange={(value) => setAttributes({bodyTextColorEven: value})} - /> + label={__('Background color (even rows)', 'flexible-invoices-core')} + value={bodyBackgroundEven} + onChange={(value) => setAttributes({bodyBackgroundEven: value})} + /> + <ColorSelector + label={__('Text color (even rows)', 'flexible-invoices-core')} + value={bodyTextColorEven} + enableAlpha={false} + onChange={(value) => setAttributes({bodyTextColorEven: value})} + /> </> : '' @@ -340,85 +350,62 @@ export default function FlexibleTable({attributes, setAttributes, placeholders, borderWidth: tableBorderWidth, borderCollapse: 'collapse' }}> - <thead className={"fitb-item-table-header"} style={{ - borderStyle: "solid", - borderColor: headerBorderRowColor, - borderTopWidth: headerBorderRowWidthTop, - borderBottomWidth: headerBorderRowWidthBottom, - }}> - <tr className={"fitb-item-table-header-row"} style={{ - background: headerBackground, - }}> - {headers.map((header, index) => ( - states[index] ? - <th className={"fitb-item-table-header-cell"} key={index} - style={{ - borderStyle: "solid", - borderColor: headerBorderColumnColor, - borderLeftWidth: headerBorderColumnWidthLeft, - borderRightWidth: headerBorderColumnWidthRight, - }}> - <RichText - tagName="div" - key={index} - value={header} - style={{ - color: headerTextColor, - textAlign: headerTextAlign, - fontStyle: headerFontStyle, - textDecoration: headerTextDecoration, - fontSize: headerFontSize, - fontWeight: headerFontWeight, - }} - onChange={(value) => updateHeader(index, value)} - /> - </th> : '' - ))} - </tr> - </thead> - <tbody className={"fitb-item-table-body"}> + {tableHeader ? tableHeader : + <TableHead + headers={headers} + updateHeader={updateHeader} + tableStyles={{ + headerBackground, + headerTextColor, + headerTextAlign, + headerFontStyle, + headerTextDecoration, + headerFontSize, + headerFontWeight, - {Array.from({length: 2}).map((_, trIndex) => ( - <tr className={"fitb-item-table-row"} style={{ - background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground, - borderStyle: "solid", - borderColor: bodyBorderRowColor, - borderTopWidth: bodyBorderRowWidthTop, - borderBottomWidth: bodyBorderRowWidthBottom, - }}> - {rows.map((row, index) => ( - states[index] ? - <td className={"fitb-item-table-cell"} key={index} - style={{ - borderStyle: "solid", - borderColor: bodyBorderColumnColor, - borderLeftWidth: bodyBorderColumnWidthLeft, - borderRightWidth: bodyBorderColumnWidthRight, - }}> - <RichText - tagName="div" - key={index} - value={row} - style={{ - color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor, - textAlign: bodyTextAlign, - fontStyle: bodyFontStyle, - fontSize: bodyFontSize, - textDecoration: bodyTextDecoration, - fontWeight: bodyFontWeight, - }} - onChange={(value) => - updateCell(index, value) - } - /> - </td> : '' - ))} - </tr> - ))} - </tbody> - {footer && + headerBorderColumnColor, + headerBorderColumnWidthLeft, + headerBorderColumnWidthRight, + headerBorderRowColor, + headerBorderRowWidthTop, + headerBorderRowWidthBottom + }} + states={states} + /> + } + { + tableBody ? tableBody : + <TableBody + rows={rows} + states={states} + updateCell={updateCell} + tableStyles={ + { + bodyBackground, + bodyBackgroundEven, + bodyTextColor, + bodyTextColorEven, + bodyTextDecoration, + bodyTextAlign, + bodyFontStyle, + bodyFontSize, + bodyFontWeight, + + bodyBorderColumnColor, + bodyBorderColumnWidthLeft, + bodyBorderColumnWidthRight, + bodyBorderRowColor, + bodyBorderRowWidthTop, + bodyBorderRowWidthBottom, + + multipleBodyBackground + } + } + /> + } + {tableFooter && <tfoot> - {footer} + {tableFooter} </tfoot> } </table> diff --git a/src/FlexibleTable/TableBody.jsx b/src/FlexibleTable/TableBody.jsx new file mode 100644 index 0000000..24f0a66 --- /dev/null +++ b/src/FlexibleTable/TableBody.jsx @@ -0,0 +1,69 @@ +import {RichText} from "@wordpress/block-editor"; + + +export default function TableBody({tableStyles, updateCell, rows, states}) { + + const { + bodyBackground, + bodyBackgroundEven, + bodyTextColor, + bodyTextColorEven, + bodyTextDecoration, + bodyTextAlign, + bodyFontStyle, + bodyFontSize, + bodyFontWeight, + + bodyBorderColumnColor, + bodyBorderColumnWidthLeft, + bodyBorderColumnWidthRight, + bodyBorderRowColor, + bodyBorderRowWidthTop, + bodyBorderRowWidthBottom, + + multipleBodyBackground + } = tableStyles; + + return ( + <tbody className={"fitb-item-table-body"}> + + {Array.from({length: 2}).map((_, trIndex) => ( + <tr className={"fitb-item-table-row"} style={{ + background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground, + borderStyle: "solid", + borderColor: bodyBorderRowColor, + borderTopWidth: bodyBorderRowWidthTop, + borderBottomWidth: bodyBorderRowWidthBottom, + }}> + {rows.map((row, index) => ( + states[index] ? + <td className={"fitb-item-table-cell"} key={index} + style={{ + borderStyle: "solid", + borderColor: bodyBorderColumnColor, + borderLeftWidth: bodyBorderColumnWidthLeft, + borderRightWidth: bodyBorderColumnWidthRight, + }}> + <RichText + tagName="div" + key={index} + value={row} + style={{ + color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor, + textAlign: bodyTextAlign, + fontStyle: bodyFontStyle, + fontSize: bodyFontSize, + textDecoration: bodyTextDecoration, + fontWeight: bodyFontWeight, + }} + onChange={(value) => + updateCell(index, value) + } + /> + </td> : '' + ))} + </tr> + ))} + </tbody> + ); +} diff --git a/src/FlexibleTable/TableHead.jsx b/src/FlexibleTable/TableHead.jsx new file mode 100644 index 0000000..1b07ee2 --- /dev/null +++ b/src/FlexibleTable/TableHead.jsx @@ -0,0 +1,58 @@ +import {RichText} from "@wordpress/block-editor"; + +export default function TableHead( {headers, updateHeader, tableStyles, states} ) { + const { + headerBackground, + headerTextColor, + headerTextAlign, + headerFontStyle, + headerTextDecoration, + headerFontSize, + headerFontWeight, + + headerBorderColumnColor, + headerBorderColumnWidthLeft, + headerBorderColumnWidthRight, + headerBorderRowColor, + headerBorderRowWidthTop, + headerBorderRowWidthBottom, + } = tableStyles; + + return ( + <thead className={"fitb-item-table-header"} style={{ + borderStyle: "solid", + borderColor: headerBorderRowColor, + borderTopWidth: headerBorderRowWidthTop, + borderBottomWidth: headerBorderRowWidthBottom, + }}> + <tr className={"fitb-item-table-header-row"} style={{ + background: headerBackground, + }}> + {headers.map((header, index) => ( + states[index] ? + <th className={"fitb-item-table-header-cell"} key={index} + style={{ + borderStyle: "solid", + borderColor: headerBorderColumnColor, + borderLeftWidth: headerBorderColumnWidthLeft, + borderRightWidth: headerBorderColumnWidthRight, + }}> + <RichText + tagName="div" + key={index} + value={header} + style={{ + color: headerTextColor, + textAlign: headerTextAlign, + fontStyle: headerFontStyle, + textDecoration: headerTextDecoration, + fontSize: headerFontSize, + fontWeight: headerFontWeight, + }} + onChange={(value) => updateHeader(index, value)} + /> + </th> : '' + ))} + </tr> + </thead>); +} -- GitLab