From 7b845178abdee0eaafecd047d2bfc068d0f47085 Mon Sep 17 00:00:00 2001
From: Eryk Mika <eryk.mika@wpdesk.eu>
Date: Thu, 6 Mar 2025 15:30:14 +0100
Subject: [PATCH] fix: FlexibleTable borders fixed
---
src/FlexibleTable/FlexibleTable.jsx | 125 +++++++++++++---------------
1 file changed, 56 insertions(+), 69 deletions(-)
diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx
index f10770d..d4299a6 100644
--- a/src/FlexibleTable/FlexibleTable.jsx
+++ b/src/FlexibleTable/FlexibleTable.jsx
@@ -1,20 +1,8 @@
import {__} from '@wordpress/i18n';
-import {
- RichText,
- InspectorControls,
- useBlockProps,
-} from '@wordpress/block-editor';
-import {
- PanelBody,
- ToggleControl,
-} from '@wordpress/components';
+import {RichText, InspectorControls, useBlockProps,} from '@wordpress/block-editor';
+import {PanelBody, ToggleControl} from '@wordpress/components';
import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
-import ColorSelector from "../ColorSelector/ColorSelector";
-import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
-import AlignButtons from "../AlignButtons/AlignButtons";
-import FontStyles from "../FontStyles/FontStyles";
-import QuatroInput from "../QuatroInput/QuatroInput";
-import BlockPlaceholders from "../BlockPlaceholders/BlockPlaceholders";
+import {DuoInput, NumberWithUnit, ColorSelector, FontStyles, AlignButtons, BlockPlaceholders} from "../../index";
export default function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) {
const {
@@ -30,16 +18,22 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
headerTextDecoration,
headerFontSize,
+ tableBorderColor,
+ tableBorderWidth,
+
+ bodyBorderColumnColor,
+ bodyBorderColumnWidthLeft,
+ bodyBorderColumnWidthRight,
+ bodyBorderRowColor,
+ bodyBorderRowWidthTop,
+ bodyBorderRowWidthBottom,
+
+ headerBorderColumnColor,
+ headerBorderColumnWidthLeft,
+ headerBorderColumnWidthRight,
+ headerBorderRowColor,
headerBorderRowWidthTop,
- headerBorderRowWidthLeft,
- headerBorderRowWidthRight,
headerBorderRowWidthBottom,
- headerBorderRowColor,
- headerBorderCellWidthTop,
- headerBorderCellWidthLeft,
- headerBorderCellWidthRight,
- headerBorderCellWidthBottom,
- headerBorderCellColor,
bodyBackground,
multipleBodyBackground,
@@ -51,18 +45,6 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
bodyFontStyle,
bodyTextDecoration,
bodyFontSize,
-
- bodyBorderRowWidthTop,
- bodyBorderRowWidthLeft,
- bodyBorderRowWidthRight,
- bodyBorderRowWidthBottom,
- bodyBorderRowColor,
- bodyBorderCellWidthTop,
- bodyBorderCellWidthLeft,
- bodyBorderCellWidthRight,
- bodyBorderCellWidthBottom,
- bodyBorderCellColor,
-
} = attributes;
const blockProps = useBlockProps();
@@ -194,6 +176,21 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
}
}
/>
+
+ <ColorSelector
+ label={__('Table border color', 'flexible-invoices-core')}
+ value={tableBorderColor}
+ enableAlpha={false}
+ returnFormat={'hex'}
+ onChange={(value) => setAttributes({tableBorderColor: value})}
+ />
+
+ <NumberWithUnit
+ label={__('Table border width', 'flexible-invoices-core')}
+ value={tableBorderWidth}
+ onChange={(value) => setAttributes({tableBorderWidth: value})}
+ />
+
<ColorSelector
label={__('Border row color', 'flexible-invoices-core')}
value={headerBorderRowColor}
@@ -201,13 +198,12 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
returnFormat={'hex'}
onChange={(value) => setAttributes({headerBorderRowColor: value})}
/>
- <QuatroInput
+
+ <DuoInput
label={__("Border row width", 'flexible-invoices-core')}
values={
{
headerBorderRowWidthTop,
- headerBorderRowWidthLeft,
- headerBorderRowWidthRight,
headerBorderRowWidthBottom,
}
}
@@ -215,21 +211,20 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
/>
<ColorSelector
label={__('Border cell color', 'flexible-invoices-core')}
- value={headerBorderCellColor}
+ value={headerBorderColumnColor}
enableAlpha={false}
returnFormat={'hex'}
- onChange={(value) => setAttributes({headerBorderCellColor: value})}
+ onChange={(value) => setAttributes({headerBorderColumnColor: value})}
/>
- <QuatroInput
+ <DuoInput
label={__("Border cell width", 'flexible-invoices-core')}
values={
{
- headerBorderCellWidthTop,
- headerBorderCellWidthLeft,
- headerBorderCellWidthRight,
- headerBorderCellWidthBottom,
+ headerBorderColumnWidthLeft,
+ headerBorderColumnWidthRight,
}
}
+ layout={'row'}
onChange={handleMultipleAttributesChange}
/>
@@ -304,13 +299,11 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
returnFormat={'hex'}
onChange={(value) => setAttributes({bodyBorderRowColor: value})}
/>
- <QuatroInput
+ <DuoInput
label={__("Border row width", 'flexible-invoices-core')}
values={
{
bodyBorderRowWidthTop,
- bodyBorderRowWidthLeft,
- bodyBorderRowWidthRight,
bodyBorderRowWidthBottom,
}
}
@@ -318,21 +311,20 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
/>
<ColorSelector
label={__('Border cell color', 'flexible-invoices-core')}
- value={bodyBorderCellColor}
+ value={bodyBorderColumnColor}
enableAlpha={false}
returnFormat={'hex'}
- onChange={(value) => setAttributes({bodyBorderCellColor: value})}
+ onChange={(value) => setAttributes({bodyBorderColumnColor: value})}
/>
- <QuatroInput
+ <DuoInput
label={__("Border cell width", 'flexible-invoices-core')}
values={
{
- bodyBorderCellWidthTop,
- bodyBorderCellWidthLeft,
- bodyBorderCellWidthRight,
- bodyBorderCellWidthBottom,
+ bodyBorderColumnWidthRight,
+ bodyBorderColumnWidthLeft,
}
}
+ layout={'row'}
onChange={handleMultipleAttributesChange}
/>
</PanelBody>
@@ -343,14 +335,15 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
</InspectorControls>
<div {...blockProps}>
<table className="fitb-item-table has-background" style={{
+ borderStyle: "solid",
+ borderColor: tableBorderColor,
+ borderWidth: tableBorderWidth,
borderCollapse: 'collapse'
}}>
<thead className={"fitb-item-table-header"} style={{
borderStyle: "solid",
borderColor: headerBorderRowColor,
borderTopWidth: headerBorderRowWidthTop,
- borderLeftWidth: headerBorderRowWidthLeft,
- borderRightWidth: headerBorderRowWidthRight,
borderBottomWidth: headerBorderRowWidthBottom,
}}>
<tr className={"fitb-item-table-header-row"} style={{
@@ -361,11 +354,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
<th className={"fitb-item-table-header-cell"} key={index}
style={{
borderStyle: "solid",
- borderColor: headerBorderCellColor,
- borderTopWidth: headerBorderCellWidthTop,
- borderLeftWidth: headerBorderCellWidthLeft,
- borderRightWidth: headerBorderCellWidthRight,
- borderBottomWidth: headerBorderCellWidthBottom,
+ borderColor: headerBorderColumnColor,
+ borderLeftWidth: headerBorderColumnWidthLeft,
+ borderRightWidth: headerBorderColumnWidthRight,
}}>
<RichText
tagName="div"
@@ -393,8 +384,6 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
borderStyle: "solid",
borderColor: bodyBorderRowColor,
borderTopWidth: bodyBorderRowWidthTop,
- borderLeftWidth: bodyBorderRowWidthLeft,
- borderRightWidth: bodyBorderRowWidthRight,
borderBottomWidth: bodyBorderRowWidthBottom,
}}>
{rows.map((row, index) => (
@@ -402,11 +391,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
<td className={"fitb-item-table-cell"} key={index}
style={{
borderStyle: "solid",
- borderColor: bodyBorderCellColor,
- borderTopWidth: bodyBorderCellWidthTop,
- borderLeftWidth: bodyBorderCellWidthLeft,
- borderRightWidth: bodyBorderCellWidthRight,
- borderBottomWidth: bodyBorderCellWidthBottom,
+ borderColor: bodyBorderColumnColor,
+ borderLeftWidth: bodyBorderColumnWidthLeft,
+ borderRightWidth: bodyBorderColumnWidthRight,
}}>
<RichText
tagName="div"
--
GitLab