Main

src/FlexibleTable/FlexibleTable.jsx

@@ -43,8 +43,8 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 
 		bodyBackground,
 		multipleBodyBackground,
-		bodyBackgroundOdd,
-		bodyTextColorOdd,
+		bodyBackgroundEven,
+		bodyTextColorEven,
 		bodyTextColor,
 		bodyTextAlign,
 		bodyFontWeight,
@@ -205,10 +205,10 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						label={__("Border row width", 'flexible-invoices-core')}
 						values={
 							{
-								headerBorderRowWidthTop: headerBorderRowWidthTop,
-								headerBorderRowWidthLeft: headerBorderRowWidthLeft,
-								headerBorderRowWidthRight: headerBorderRowWidthRight,
-								headerBorderRowWidthBottom: headerBorderRowWidthBottom,
+								headerBorderRowWidthTop,
+								headerBorderRowWidthLeft,
+								headerBorderRowWidthRight,
+								headerBorderRowWidthBottom,
 							}
 						}
 						onChange={handleMultipleAttributesChange}
@@ -224,10 +224,10 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						label={__("Border cell width", 'flexible-invoices-core')}
 						values={
 							{
-								headerBorderCellWidthTop: headerBorderCellWidthTop,
-								headerBorderCellWidthLeft: headerBorderCellWidthLeft,
-								headerBorderCellWidthRight: headerBorderCellWidthRight,
-								headerBorderCellWidthBottom: headerBorderCellWidthBottom,
+								headerBorderCellWidthTop,
+								headerBorderCellWidthLeft,
+								headerBorderCellWidthRight,
+								headerBorderCellWidthBottom,
 							}
 						}
 						onChange={handleMultipleAttributesChange}
@@ -257,15 +257,15 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 					{multipleBodyBackground ?
 						<>
 							<ColorSelector
-						label={__('Background color (odd rows)', 'flexible-invoices-core')}
-						value={bodyBackgroundOdd}
-						onChange={(value) => setAttributes({bodyBackgroundOdd: value})}
+						label={__('Background color (even rows)', 'flexible-invoices-core')}
+						value={bodyBackgroundEven}
+						onChange={(value) => setAttributes({bodyBackgroundEven: value})}
 					/>
 						<ColorSelector
-							label={__('Text color (odd rows)', 'flexible-invoices-core')}
-							value={bodyTextColorOdd}
+							label={__('Text color (even rows)', 'flexible-invoices-core')}
+							value={bodyTextColorEven}
 							enableAlpha={false}
-							onChange={(value) => setAttributes({bodyTextColorOdd: value})}
+							onChange={(value) => setAttributes({bodyTextColorEven: value})}
 						/>
 						</>
 						: ''
@@ -301,16 +301,17 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						label={__('Border row color', 'flexible-invoices-core')}
 						value={bodyBorderRowColor}
 						enableAlpha={false}
+						returnFormat={'hex'}
 						onChange={(value) => setAttributes({bodyBorderRowColor: value})}
 					/>
 					<QuatroInput
 						label={__("Border row width", 'flexible-invoices-core')}
 						values={
 							{
-								bodyBorderRowWidthTop: bodyBorderRowWidthTop,
-								bodyBorderRowWidthLeft: bodyBorderRowWidthLeft,
-								bodyBorderRowWidthRight: bodyBorderRowWidthRight,
-								bodyBorderRowWidthBottom: bodyBorderRowWidthBottom,
+								bodyBorderRowWidthTop,
+								bodyBorderRowWidthLeft,
+								bodyBorderRowWidthRight,
+								bodyBorderRowWidthBottom,
 							}
 						}
 						onChange={handleMultipleAttributesChange}
@@ -319,16 +320,17 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						label={__('Border cell color', 'flexible-invoices-core')}
 						value={bodyBorderCellColor}
 						enableAlpha={false}
+						returnFormat={'hex'}
 						onChange={(value) => setAttributes({bodyBorderCellColor: value})}
 					/>
 					<QuatroInput
 						label={__("Border cell width", 'flexible-invoices-core')}
 						values={
 							{
-								bodyBorderCellWidthTop: bodyBorderCellWidthTop,
-								bodyBorderCellWidthLeft: bodyBorderCellWidthLeft,
-								bodyBorderCellWidthRight: bodyBorderCellWidthRight,
-								bodyBorderCellWidthBottom: bodyBorderCellWidthBottom,
+								bodyBorderCellWidthTop,
+								bodyBorderCellWidthLeft,
+								bodyBorderCellWidthRight,
+								bodyBorderCellWidthBottom,
 							}
 						}
 						onChange={handleMultipleAttributesChange}
@@ -385,9 +387,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 					</thead>
 					<tbody className={"fitb-item-table-body"}>
 
-					{Array.from({length: 2}).map((_, index) => (
+					{Array.from({length: 2}).map((_, trIndex) => (
 						<tr className={"fitb-item-table-row"} style={{
-							background: (multipleBodyBackground && index === 1) ? bodyBackgroundOdd : bodyBackground,
+							background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
 							borderStyle: "solid",
 							borderColor: bodyBorderRowColor,
 							borderTopWidth: bodyBorderRowWidthTop,
@@ -411,7 +413,7 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 											key={index}
 											value={row}
 											style={{
-												color: (multipleBodyBackground && index === 1) ? bodyTextColorOdd : bodyTextColor,
+												color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor,
 												textAlign: bodyTextAlign,
 												fontStyle: bodyFontStyle,
 												fontSize: bodyFontSize,