Skip to content
Snippets Groups Projects
Commit 76b25497 authored by Eryk Mika's avatar Eryk Mika
Browse files

refactor: separated header, body to different files to make the component smaller

parent 77f49f8c
Branches
Tags
1 merge request!1Main
Pipeline #483766 failed
import {__} from '@wordpress/i18n'; 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 {PanelBody, ToggleControl} from '@wordpress/components';
import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd"; import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
import {DuoInput, NumberWithUnit, ColorSelector, FontStyles, AlignButtons, BlockPlaceholders} from "../../index"; 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 { const {
headers, headers,
rows, rows,
...@@ -340,85 +350,62 @@ export default function FlexibleTable({attributes, setAttributes, placeholders, ...@@ -340,85 +350,62 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
borderWidth: tableBorderWidth, borderWidth: tableBorderWidth,
borderCollapse: 'collapse' borderCollapse: 'collapse'
}}> }}>
<thead className={"fitb-item-table-header"} style={{ {tableHeader ? tableHeader :
borderStyle: "solid", <TableHead
borderColor: headerBorderRowColor, headers={headers}
borderTopWidth: headerBorderRowWidthTop, updateHeader={updateHeader}
borderBottomWidth: headerBorderRowWidthBottom, tableStyles={{
}}> headerBackground,
<tr className={"fitb-item-table-header-row"} style={{ headerTextColor,
background: headerBackground, headerTextAlign,
}}> headerFontStyle,
{headers.map((header, index) => ( headerTextDecoration,
states[index] ? headerFontSize,
<th className={"fitb-item-table-header-cell"} key={index} headerFontWeight,
style={{
borderStyle: "solid", headerBorderColumnColor,
borderColor: headerBorderColumnColor, headerBorderColumnWidthLeft,
borderLeftWidth: headerBorderColumnWidthLeft, headerBorderColumnWidthRight,
borderRightWidth: headerBorderColumnWidthRight, headerBorderRowColor,
}}> headerBorderRowWidthTop,
<RichText headerBorderRowWidthBottom
tagName="div"
key={index}
value={header}
style={{
color: headerTextColor,
textAlign: headerTextAlign,
fontStyle: headerFontStyle,
textDecoration: headerTextDecoration,
fontSize: headerFontSize,
fontWeight: headerFontWeight,
}} }}
onChange={(value) => updateHeader(index, value)} states={states}
/> />
</th> : '' }
))} {
</tr> tableBody ? tableBody :
</thead> <TableBody
<tbody className={"fitb-item-table-body"}> rows={rows}
states={states}
updateCell={updateCell}
tableStyles={
{
bodyBackground,
bodyBackgroundEven,
bodyTextColor,
bodyTextColorEven,
bodyTextDecoration,
bodyTextAlign,
bodyFontStyle,
bodyFontSize,
bodyFontWeight,
{Array.from({length: 2}).map((_, trIndex) => ( bodyBorderColumnColor,
<tr className={"fitb-item-table-row"} style={{ bodyBorderColumnWidthLeft,
background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground, bodyBorderColumnWidthRight,
borderStyle: "solid", bodyBorderRowColor,
borderColor: bodyBorderRowColor, bodyBorderRowWidthTop,
borderTopWidth: bodyBorderRowWidthTop, bodyBorderRowWidthBottom,
borderBottomWidth: bodyBorderRowWidthBottom,
}}> multipleBodyBackground
{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> : '' }
))} {tableFooter &&
</tr>
))}
</tbody>
{footer &&
<tfoot> <tfoot>
{footer} {tableFooter}
</tfoot> </tfoot>
} }
</table> </table>
......
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>
);
}
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>);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment