From 4771218ed38bc518649fe04d7ea5f6f9aaf84c77 Mon Sep 17 00:00:00 2001 From: Eryk Mika <eryk.mika@wpdesk.eu> Date: Thu, 27 Feb 2025 10:51:40 +0100 Subject: [PATCH] refactor: export default, removed console logs --- src/AlignButtons/AlignButtons.jsx | 9 ++--- src/BlockPlaceholders/BlockPlaceholders.jsx | 9 ++--- src/BlockPlaceholders/Placeholder.jsx | 7 +--- src/ColorSelector/ColorSelector.jsx | 7 +--- src/DuoInput/DuoInput.jsx | 37 +++++++++------------ src/FlexibleTable/FlexibleTable.jsx | 4 +-- src/FontStyles/FontStyles.jsx | 8 +---- src/NumberWithUnit/NumberWithUnit.jsx | 8 +---- src/QuatroInput/QuatroInput.jsx | 7 +--- 9 files changed, 26 insertions(+), 70 deletions(-) diff --git a/src/AlignButtons/AlignButtons.jsx b/src/AlignButtons/AlignButtons.jsx index 8a6ea95..03bebea 100644 --- a/src/AlignButtons/AlignButtons.jsx +++ b/src/AlignButtons/AlignButtons.jsx @@ -1,9 +1,8 @@ import {Button} from "@wordpress/components"; -function AlignButtons(props) { +export default function AlignButtons ({label, onChange}) { - const {label, onChange} = props; - const handleChange = function (newAlignment) { + const handleChange = (newAlignment) => { if (onChange) { onChange(newAlignment); } @@ -34,7 +33,3 @@ function AlignButtons(props) { </div> ); } - -export default AlignButtons; - - diff --git a/src/BlockPlaceholders/BlockPlaceholders.jsx b/src/BlockPlaceholders/BlockPlaceholders.jsx index e47a239..9728205 100644 --- a/src/BlockPlaceholders/BlockPlaceholders.jsx +++ b/src/BlockPlaceholders/BlockPlaceholders.jsx @@ -2,11 +2,10 @@ import {__} from "@wordpress/i18n"; import {PanelBody} from "@wordpress/components"; import Placeholder from "./Placeholder"; -function BlockPlaceholders(props) { - const {placeholders,children} = props; +export default function BlockPlaceholders({placeholders, children}) { return ( <PanelBody title={__('Placeholders', 'flexible-invoices-core')}> - { children && <p className='fi-placeholders-list-description'>{children}</p> } + {children && <p className='fi-placeholders-list-description'>{children}</p>} { placeholders.map((placeholder) => { return <Placeholder label={placeholder.label}>{placeholder.description}</Placeholder> @@ -15,7 +14,3 @@ function BlockPlaceholders(props) { </PanelBody> ); } - -export default BlockPlaceholders; - - diff --git a/src/BlockPlaceholders/Placeholder.jsx b/src/BlockPlaceholders/Placeholder.jsx index ca2e902..0062dd5 100644 --- a/src/BlockPlaceholders/Placeholder.jsx +++ b/src/BlockPlaceholders/Placeholder.jsx @@ -1,5 +1,4 @@ -function Placeholder(props) { - const {label, children} = props; +export default function Placeholder({label, children}) { return ( <div> <input type='text' disabled value={label}/> @@ -8,7 +7,3 @@ function Placeholder(props) { </div> ); } - -export default Placeholder; - - diff --git a/src/ColorSelector/ColorSelector.jsx b/src/ColorSelector/ColorSelector.jsx index 021c497..018f477 100644 --- a/src/ColorSelector/ColorSelector.jsx +++ b/src/ColorSelector/ColorSelector.jsx @@ -1,9 +1,8 @@ import {ColorPicker} from "@wordpress/components"; import {useState} from "react"; -function ColorSelector(props) { +export default function ColorSelector({label, onChange, value, enableAlpha = true, returnFormat = 'rgb'}) { - const {label, onChange, value, enableAlpha = true, returnFormat = 'rgb'} = props; const [isPopupActive, setIsPopupActive] = useState(false); const handleColorChange = function (newColor) { @@ -57,7 +56,3 @@ function ColorSelector(props) { </div> ); } - -export default ColorSelector; - - diff --git a/src/DuoInput/DuoInput.jsx b/src/DuoInput/DuoInput.jsx index a497004..97150fa 100644 --- a/src/DuoInput/DuoInput.jsx +++ b/src/DuoInput/DuoInput.jsx @@ -1,9 +1,6 @@ import NumberWithUnit from "../NumberWithUnit/NumberWithUnit"; -function DuoInput(props) { - - const {label, onChange, values, layout = 'column'} = props; - +export default function DuoInput({label, onChange, values, layout = 'column'}) { const keys = Object.keys(values); const valuesArray = Object.values(values); @@ -20,24 +17,22 @@ function DuoInput(props) { <div className='fi-field-label-wrapper'> <span className='fi-field-label'>{label}</span> </div> - <div className='fi-field-buttons-wrapper fi-duo-fields-wrapper' style={{flexDirection: layout }}> - <div className='fi-duo-fields'> - <NumberWithUnit - className='fi-duo-field fi-duo-field-input' - value={valuesArray[0]} - onChange={(e) => { - handleChange(0, e) - }} - /> - <NumberWithUnit - className='fi-duo-field fi-duo-field-input' - value={valuesArray[1]} - onChange={(e) => handleChange(1, e)} - /> - </div> + <div className='fi-field-buttons-wrapper fi-duo-fields-wrapper' style={{flexDirection: layout}}> + <div className='fi-duo-fields'> + <NumberWithUnit + className='fi-duo-field fi-duo-field-input' + value={valuesArray[0]} + onChange={(e) => { + handleChange(0, e) + }} + /> + <NumberWithUnit + className='fi-duo-field fi-duo-field-input' + value={valuesArray[1]} + onChange={(e) => handleChange(1, e)} + /> </div> + </div> </div> ); } - -export default DuoInput; diff --git a/src/FlexibleTable/FlexibleTable.jsx b/src/FlexibleTable/FlexibleTable.jsx index 40f6937..1ff228c 100644 --- a/src/FlexibleTable/FlexibleTable.jsx +++ b/src/FlexibleTable/FlexibleTable.jsx @@ -16,7 +16,7 @@ import FontStyles from "../FontStyles/FontStyles"; import QuatroInput from "../QuatroInput/QuatroInput"; import BlockPlaceholders from "../BlockPlaceholders/BlockPlaceholders"; -function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) { +export default function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) { const { headers, rows, @@ -424,5 +424,3 @@ function FlexibleTable({attributes, setAttributes, placeholders, footer, additio </> ); } - -export default FlexibleTable; diff --git a/src/FontStyles/FontStyles.jsx b/src/FontStyles/FontStyles.jsx index a3dc1ba..897f720 100644 --- a/src/FontStyles/FontStyles.jsx +++ b/src/FontStyles/FontStyles.jsx @@ -1,9 +1,7 @@ import {Button} from "@wordpress/components"; import {useState} from "react"; -function FontStyles(props) { - - const {label, onChange, values} = props; +export default function FontStyles({label, onChange, values} ) { const [isItalic, setIsItalic] = useState(values.fontStyle === 'italic'); const [isBold, setIsBold] = useState(values.fontWeight === 'bold'); @@ -15,7 +13,6 @@ function FontStyles(props) { const textDecoration = isUnderline ? 'underline' : isLineThrough ? 'line-through' : 'none'; const handleChange = function (updatedValues) { - console.log([updatedValues, textDecoration]); const newStyles = { fontStyle: updatedValues.fontStyle || fontStyle, fontWeight: updatedValues.fontWeight || fontWeight, @@ -25,7 +22,6 @@ function FontStyles(props) { setIsBold( newStyles.fontWeight === 'bold'); setIsUnderline( newStyles.textDecoration.includes('underline')); setIsLineThrough( newStyles.textDecoration.includes('line-through')); - console.log(newStyles); if (onChange) { onChange(newStyles); @@ -99,5 +95,3 @@ function FontStyles(props) { </div> ); } - -export default FontStyles; diff --git a/src/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx index 79524bc..2745f92 100644 --- a/src/NumberWithUnit/NumberWithUnit.jsx +++ b/src/NumberWithUnit/NumberWithUnit.jsx @@ -1,9 +1,7 @@ import {SelectControl, TextControl} from "@wordpress/components"; import {useState} from "react"; -function NumberWithUnit(props) { - - const {label, onChange, value, className} = props; +export default function NumberWithUnit({label, onChange, value, className}) { const splitValues = function (fontSize) { const match = fontSize.match(/^(\d+)([a-z%]+)$/i); @@ -63,7 +61,3 @@ function NumberWithUnit(props) { </div> ); } - -export default NumberWithUnit; - - diff --git a/src/QuatroInput/QuatroInput.jsx b/src/QuatroInput/QuatroInput.jsx index 545d3e3..15e2795 100644 --- a/src/QuatroInput/QuatroInput.jsx +++ b/src/QuatroInput/QuatroInput.jsx @@ -1,9 +1,6 @@ import NumberWithUnit from "../NumberWithUnit/NumberWithUnit"; -function QuatroInput(props) { - - const {label, onChange, values, layout = 'cross'} = props; - +export default function QuatroInput({label, onChange, values, layout = 'cross'}) { const keys = Object.keys(values); const valuesArray = Object.values(values); @@ -83,5 +80,3 @@ function QuatroInput(props) { </div> ); } - -export default QuatroInput; -- GitLab