diff --git a/src/__block-container-template/style.js b/src/__block-container-template/style.js index fb73880fc9..0fa081f899 100644 --- a/src/__block-container-template/style.js +++ b/src/__block-container-template/style.js @@ -19,12 +19,14 @@ import { BlockCssCompiler } from '~stackable/components' */ import { memo } from '@wordpress/element' import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../util/props' const alignmentOptions = { editorSelectorCallback: getAttribute => `.stk--block-align-${ getAttribute( 'uniqueId' ) } > .block-editor-inner-blocks > .block-editor-block-list__layout`, } -const BlockStyles = memo( props => { +const BlockStyles = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_STYLES_DEFAULT_PROPS ) const columnArrangement = useBlockAttributesContext( attributes => attributes.columnArrangementMobile || attributes.columnArrangementTablet ) const numColumns = ( columnArrangement || '' ).split( ',' ).length @@ -45,11 +47,12 @@ const BlockStyles = memo( props => { ) } ) -BlockStyles.defaultProps = { +const BLOCK_STYLES_DEFAULT_PROPS = { version: '', } -BlockStyles.Content = props => { +BlockStyles.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_STYLES_CONTENT_DEFAULT_PROPS ) if ( props.attributes.generatedCss ) { return } @@ -72,7 +75,7 @@ BlockStyles.Content = props => { ) } -BlockStyles.Content.defaultProps = { +const BLOCK_STYLES_CONTENT_DEFAULT_PROPS = { version: '', attributes: {}, } diff --git a/src/__block-template/style.js b/src/__block-template/style.js index 0a69c60351..38aec265b5 100644 --- a/src/__block-template/style.js +++ b/src/__block-template/style.js @@ -19,6 +19,7 @@ import { * WordPress dependencies */ import { memo } from '@wordpress/element' +import { getPropsWithDefaults } from '../util/props' const typographyOptions = { selector: '.stk-block-text__text', @@ -48,7 +49,8 @@ const Styles = () => { ) } -export const BlockStyles = memo( props => { +export const BlockStyles = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_STYLES_DEFAULT_PROPS ) return ( <> @@ -62,11 +64,12 @@ export const BlockStyles = memo( props => { ) } ) -BlockStyles.defaultProps = { +const BLOCK_STYLES_DEFAULT_PROPS = { version: '', } -BlockStyles.Content = props => { +BlockStyles.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_STYLES_CONTENT_DEFAULT_PROPS ) if ( props.attributes.generatedCss ) { return } @@ -85,7 +88,7 @@ BlockStyles.Content = props => { ) } -BlockStyles.Content.defaultProps = { +const BLOCK_STYLES_CONTENT_DEFAULT_PROPS = { version: '', attributes: {}, } diff --git a/src/block-components/alignment/edit.js b/src/block-components/alignment/edit.js index 33a4c87690..e105c4b866 100644 --- a/src/block-components/alignment/edit.js +++ b/src/block-components/alignment/edit.js @@ -27,6 +27,7 @@ import { memo } from '@wordpress/element' import { sprintf, __ } from '@wordpress/i18n' import { addFilter } from '@wordpress/hooks' import { useSelect } from '@wordpress/data' +import { getPropsWithDefaults } from '../../util/props' const ALIGN_OPTIONS = [ { @@ -53,7 +54,8 @@ const ALIGN_OPTIONS = [ const ALIGN_OPTIONS_NO_JUSTIFY = ALIGN_OPTIONS.filter( option => option.align !== 'justify' ) -export const Edit = memo( props => { +export const Edit = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const { contentAlign, columnJustify, @@ -382,7 +384,7 @@ if ( userAgent && userAgent.indexOf( 'Firefox' ) !== -1 ) { } ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { hasColumnJustify: false, hasRowAlignment: false, hasColumnAlignment: false, diff --git a/src/block-components/block-div/edit.js b/src/block-components/block-div/edit.js index 0c87b233bc..fa4c2bbd42 100644 --- a/src/block-components/block-div/edit.js +++ b/src/block-components/block-div/edit.js @@ -30,8 +30,10 @@ import { */ import { __ } from '@wordpress/i18n' import { memo } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -export const Edit = memo( props => { +export const Edit = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const { hasSizeSpacing, initialOpen, @@ -126,7 +128,7 @@ export const Edit = memo( props => { ) } ) -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { hasSizeSpacing: true, initialOpen: false, sizeControlLayoutProps: {}, diff --git a/src/block-components/block-div/index.js b/src/block-components/block-div/index.js index 84e1a1e4e0..54852ba5bc 100644 --- a/src/block-components/block-div/index.js +++ b/src/block-components/block-div/index.js @@ -9,6 +9,7 @@ import classnames from 'classnames/dedupe' import { Div } from '~stackable/components' import { useVariationPicker } from '~stackable/hooks' import { getUniqueBlockClass, useQueryLoopInstanceId } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { memo } from '@wordpress/element' import { useBlockProps } from '@wordpress/block-editor' @@ -22,7 +23,8 @@ export { deprecateBlockBackgroundColorOpacity, deprecateBlockShadowColor, deprecateBlockHeight, } from './deprecated' -export const BlockDiv = memo( props => { +export const BlockDiv = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_DIV_DEFAULT_PROPS ) const { className, applyCustomAttributes, @@ -103,7 +105,7 @@ export const BlockDiv = memo( props => { } ) -BlockDiv.defaultProps = { +const BLOCK_DIV_DEFAULT_PROPS = { className: '', applyCustomAttributes: true, renderHtmlTag: true, // If true, this renders the HTML Tag based from the block attributes. @@ -113,7 +115,8 @@ BlockDiv.defaultProps = { blockTag: 'div', } -BlockDiv.Content = props => { +BlockDiv.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_DIV_CONTENT_DEFAULT_PROPS ) const { className, attributes, @@ -169,7 +172,7 @@ BlockDiv.Content = props => { /> } -BlockDiv.Content.defaultProps = { +const BLOCK_DIV_CONTENT_DEFAULT_PROPS = { version: VERSION, className: '', attributes: {}, diff --git a/src/block-components/block-link/edit.js b/src/block-components/block-link/edit.js index b5493e5529..94de0b9c40 100644 --- a/src/block-components/block-link/edit.js +++ b/src/block-components/block-link/edit.js @@ -12,8 +12,10 @@ import { */ import { __ } from '@wordpress/i18n' import { LinkControls } from '../helpers/link' +import { getPropsWithDefaults } from '../../util/props' -export const Edit = props => { +export const Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const { hasLink, hasTitle, @@ -41,7 +43,7 @@ export const Edit = props => { ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { hasLink: true, hasTitle: true, hasLightbox: true, diff --git a/src/block-components/block-link/index.js b/src/block-components/block-link/index.js index da8d354dc8..3d62196e88 100644 --- a/src/block-components/block-link/index.js +++ b/src/block-components/block-link/index.js @@ -8,12 +8,14 @@ import { Edit } from './edit' * External dependencies */ import { Link } from '~stackable/components' +import { getPropsWithDefaults } from '../../util/props' export const BlockLink = () => { return null } -BlockLink.Content = props => { +BlockLink.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_LINK_CONTENT_DEFAULT_PROPS ) const { href, attributes, isHidden, } = props @@ -35,7 +37,7 @@ BlockLink.Content = props => { ) } -BlockLink.Content.defaultProps = { +const BLOCK_LINK_CONTENT_DEFAULT_PROPS = { className: '', attributes: {}, href: '', diff --git a/src/block-components/block-style/edit.js b/src/block-components/block-style/edit.js index 9c0f4379d4..3ee8d6cde5 100644 --- a/src/block-components/block-style/edit.js +++ b/src/block-components/block-style/edit.js @@ -17,8 +17,10 @@ import { */ import { __ } from '@wordpress/i18n' import { memo } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -export const Edit = memo( props => { +export const Edit = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) return ( { ) } ) -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { initialOpen: true, styles: [], } diff --git a/src/block-components/button/edit.js b/src/block-components/button/edit.js index 0609d7133f..4ef0498b30 100644 --- a/src/block-components/button/edit.js +++ b/src/block-components/button/edit.js @@ -31,9 +31,11 @@ import { applyFilters } from '@wordpress/hooks' import { useSelect } from '@wordpress/data' import { useBlockEditContext } from '@wordpress/block-editor' import { getAttributeNameFunc } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' -export const Icon = props => ( - <_Icon.InspectorControls +export const Icon = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ICON_DEFAULT_PROPS ) + return <_Icon.InspectorControls hasColor={ props.hasColor } hasGradient={ false } hasShape={ false } @@ -44,9 +46,9 @@ export const Icon = props => ( iconSizePlaceholderName="button-icon-size" iconGapPlaceholderName={ props.iconGapPlaceholderName } /> -) +} -Icon.defaultProps = { +const ICON_DEFAULT_PROPS = { hasIconGap: true, hasIconPosition: true, hasColor: true, @@ -159,7 +161,8 @@ export const ColorsControls = props => { ) } -export const Colors = props => { +export const Colors = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLORS_DEFAULT_PROPS ) return ( { ) } -Colors.defaultProps = { +const COLORS_DEFAULT_PROPS = { hasTextColor: true, hasIconColor: false, } @@ -239,7 +242,8 @@ const SizeControls = props => { ) } -export const Size = props => { +export const Size = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SIZE_DEFAULT_PROPS ) return ( { ) } -Size.defaultProps = { +const SIZE_DEFAULT_PROPS = { hasWidth: false, } @@ -277,7 +281,8 @@ const BorderControls = props => { ) } -export const Borders = props => { +export const Borders = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BORDERS_DEFAULT_PROPS ) return ( { ) } -Borders.defaultProps = { +const BORDERS_DEFAULT_PROPS = { borderSelector: '', } -export const Edit = props => { +export const Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const { borderSelector, hasTextColor, @@ -347,7 +353,7 @@ export const Edit = props => { ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { hasIcon: true, hasLink: true, borderSelector: '', diff --git a/src/block-components/button/index.js b/src/block-components/button/index.js index a789c658fa..89817cd3fe 100644 --- a/src/block-components/button/index.js +++ b/src/block-components/button/index.js @@ -13,11 +13,13 @@ import { Edit } from './edit' import { Link } from '../link' import { Icon } from '../icon' import { getButtonClasses } from './get-button-classes' +import { getPropsWithDefaults } from '../../util/props' export { getButtonClasses } export { deprecateButtonGradientColor } from './deprecated' -export const Button = props => { +export const Button = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BUTTON_DEFAULT_PROPS ) const { className, buttonProps, @@ -44,12 +46,13 @@ export const Button = props => { ) } -Button.defaultProps = { +const BUTTON_DEFAULT_PROPS = { className: '', buttonProps: {}, } -Button.Content = props => { +Button.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BUTTON_CONTENT_DEFAULT_PROPS ) const { className, attributes, @@ -72,7 +75,7 @@ Button.Content = props => { ) } -Button.Content.defaultProps = { +const BUTTON_CONTENT_DEFAULT_PROPS = { className: '', buttonProps: {}, } diff --git a/src/block-components/column/index.js b/src/block-components/column/index.js index 99b8519092..ecd10a942b 100644 --- a/src/block-components/column/index.js +++ b/src/block-components/column/index.js @@ -5,8 +5,10 @@ export { getColumnClasses } from './use-column' import { ResizableColumn } from '~stackable/components' import { memo } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -export const Column = memo( props => { +export const Column = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMN_DEFAULT_PROPS ) const { isHovered, clientId, @@ -27,7 +29,7 @@ export const Column = memo( props => { /> } ) -Column.defaultProps = { +const COLUMN_DEFAULT_PROPS = { isHovered: true, } diff --git a/src/block-components/columns/column-settings-button.js b/src/block-components/columns/column-settings-button.js index c88d5c2e59..6e9e150253 100644 --- a/src/block-components/columns/column-settings-button.js +++ b/src/block-components/columns/column-settings-button.js @@ -10,10 +10,12 @@ import { dispatch, select, useSelect, } from '@wordpress/data' import { useLocalStorage } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' const PASSTHRU = ( func, numColumns ) => func( numColumns ) -export const ColumnsControl = props => { +export const ColumnsControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMNS_CONTROL_DEFAULT_PROPS ) const { label, sliderMax = 6, @@ -153,7 +155,8 @@ export const ColumnsControl = props => { ) } -export const CloneButton = props => { +export const CloneButton = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CLONE_BUTTON_DEFAULT_PROPS ) return ( { ) } -ColumnsControl.defaultProps = { +const COLUMNS_CONTROL_DEFAULT_PROPS = { label: __( 'Columns', i18n ), rootClientId: null, onChangeCallback: PASSTHRU, newColumnAttributes: {}, } -CloneButton.defaultProps = { +const CLONE_BUTTON_DEFAULT_PROPS = { isPressed: false, onClick: null, } diff --git a/src/block-components/columns/edit.js b/src/block-components/columns/edit.js index 2646598fdd..05727c6e65 100644 --- a/src/block-components/columns/edit.js +++ b/src/block-components/columns/edit.js @@ -18,6 +18,7 @@ import { SortControl, } from '~stackable/components' import { getAttributeName } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { useBlockAttributesContext, useBlockSetAttributesContext, @@ -309,7 +310,8 @@ export const Controls = props => { ) } -export const Edit = props => { +export const Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) return ( @@ -317,7 +319,7 @@ export const Edit = props => { ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { hasColumnsControl: true, hasGap: true, } diff --git a/src/block-components/conditional-display/edit.js b/src/block-components/conditional-display/edit.js index adc33f81d9..ddcf16bbf7 100644 --- a/src/block-components/conditional-display/edit.js +++ b/src/block-components/conditional-display/edit.js @@ -40,7 +40,3 @@ export const Edit = () => { ) } - -Edit.defaultProps = { - mainBlockClass: '', -} diff --git a/src/block-components/container-div/index.js b/src/block-components/container-div/index.js index cc96fd94bb..044af084fc 100644 --- a/src/block-components/container-div/index.js +++ b/src/block-components/container-div/index.js @@ -5,12 +5,14 @@ import { Edit } from './edit' import classnames from 'classnames' import { Div } from '~stackable/components' import { getUniqueBlockClass, useQueryLoopInstanceId } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { useBlockAttributesContext } from '~stackable/hooks' import { applyFilters } from '@wordpress/hooks' export { deprecateContainerBackgroundColorOpacity, deprecateContainerShadowColor } from './deprecated' -export const ContainerDiv = props => { +export const ContainerDiv = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CONTAINER_DIV_DEFAULT_PROPS ) const attributes = useBlockAttributesContext( attributes => { return { uniqueId: attributes.uniqueId, @@ -53,11 +55,12 @@ export const ContainerDiv = props => { /> } -ContainerDiv.defaultProps = { +const CONTAINER_DIV_DEFAULT_PROPS = { className: '', } -ContainerDiv.Content = props => { +ContainerDiv.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CONTAINER_DIV_CONTENT_DEFAULT_PROPS ) const { attributes, ...propsToPass @@ -87,7 +90,7 @@ ContainerDiv.Content = props => { /> } -ContainerDiv.Content.defaultProps = { +const CONTAINER_DIV_CONTENT_DEFAULT_PROPS = { className: '', attributes: {}, } diff --git a/src/block-components/custom-css/edit.js b/src/block-components/custom-css/edit.js index 532c145d70..b500cabba4 100644 --- a/src/block-components/custom-css/edit.js +++ b/src/block-components/custom-css/edit.js @@ -17,8 +17,10 @@ import { Fragment } from '@wordpress/element' import { __ } from '@wordpress/i18n' import { applyFilters } from '@wordpress/hooks' import { useBlockAttributesContext } from '~stackable/hooks' +import { getPropsWithDefaults } from '../../util/props' -export const Edit = props => { +export const Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const customCSSMinified = useBlockAttributesContext( attributes => attributes.customCSSMinified ) if ( ! showProNotice && ! isPro ) { @@ -47,6 +49,6 @@ export const Edit = props => { ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { mainBlockClass: '', } diff --git a/src/block-components/custom-css/index.js b/src/block-components/custom-css/index.js index 17a0d63dc3..be898ec01f 100644 --- a/src/block-components/custom-css/index.js +++ b/src/block-components/custom-css/index.js @@ -3,20 +3,23 @@ import { Edit } from './edit' import { useBlockAttributesContext } from '~stackable/hooks' import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../util/props' // Keep existing Premium Custom CSS working when Premium is deactivated. -const CustomCSSStyle = props => { +const CustomCSSStyle = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CUSTOM_CSSSTYLE_DEFAULT_PROPS ) const { css, isSaveContent } = props return !! css && } -CustomCSSStyle.defaultProps = { +const CUSTOM_CSSSTYLE_DEFAULT_PROPS = { css: '', isSaveContent: false, } -export const CustomCSS = props => { +export const CustomCSS = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CUSTOM_CSS_DEFAULT_PROPS ) const customCSSMinified = useBlockAttributesContext( attributes => attributes.customCSSMinified ) return applyFilters( @@ -26,11 +29,12 @@ export const CustomCSS = props => { ) } -CustomCSS.defaultProps = { +const CUSTOM_CSS_DEFAULT_PROPS = { mainBlockClass: '', } -CustomCSS.Content = props => { +CustomCSS.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CUSTOM_CSS_CONTENT_DEFAULT_PROPS ) return applyFilters( 'stackable.block-component.custom-css.content', , @@ -38,7 +42,7 @@ CustomCSS.Content = props => { ) } -CustomCSS.Content.defaultProps = { +const CUSTOM_CSS_CONTENT_DEFAULT_PROPS = { attributes: {}, } diff --git a/src/block-components/effects-animations/edit.js b/src/block-components/effects-animations/edit.js index 373e702df8..20e03d0a61 100644 --- a/src/block-components/effects-animations/edit.js +++ b/src/block-components/effects-animations/edit.js @@ -16,8 +16,10 @@ import { import { Fragment } from '@wordpress/element' import { __ } from '@wordpress/i18n' import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../util/props' -export const Edit = props => { +export const Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) if ( ! showProNotice && ! isPro ) { return null } @@ -43,6 +45,6 @@ export const Edit = props => { ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { mainBlockClass: '', } diff --git a/src/block-components/effects-animations/index.js b/src/block-components/effects-animations/index.js index d8c94ed3b8..124db3319d 100644 --- a/src/block-components/effects-animations/index.js +++ b/src/block-components/effects-animations/index.js @@ -3,20 +3,23 @@ import { Edit } from './edit' import { addStyles } from './style' import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../util/props' -export const EffectsAnimations = props => { +export const EffectsAnimations = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EFFECTS_ANIMATIONS_DEFAULT_PROPS ) return applyFilters( 'stackable.block-component.effects-animations', null, props ) } -EffectsAnimations.defaultProps = { +const EFFECTS_ANIMATIONS_DEFAULT_PROPS = { mainBlockClass: '', } -EffectsAnimations.Content = props => { +EffectsAnimations.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EFFECTS_ANIMATIONS_CONTENT_DEFAULT_PROPS ) return applyFilters( 'stackable.block-component.effects-animations.content', null, props ) } -EffectsAnimations.Content.defaultProps = { +const EFFECTS_ANIMATIONS_CONTENT_DEFAULT_PROPS = { attributes: {}, } diff --git a/src/block-components/helpers/backgrounds/edit.js b/src/block-components/helpers/backgrounds/edit.js index 62780450c1..3156d276b3 100644 --- a/src/block-components/helpers/backgrounds/edit.js +++ b/src/block-components/helpers/backgrounds/edit.js @@ -21,6 +21,7 @@ import { useBlockHoverState, } from '~stackable/hooks' import { getAttributeName, urlIsVideo } from '~stackable/util' +import { getPropsWithDefaults } from '../../../util/props' /** * WordPress dependencies @@ -43,7 +44,8 @@ const IMAGE_AND_VIDEO_TYPES = [ 'image', 'video' ] const IMAGE_TYPES = [ 'image' ] // TODO: Post v3, add option to select the image size for the background (full, large, medium) -export const BackgroundControls = props => { +export const BackgroundControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BACKGROUND_CONTROLS_DEFAULT_PROPS ) const deviceType = useDeviceType() const { @@ -357,7 +359,7 @@ export const BackgroundControls = props => { ) } -BackgroundControls.defaultProps = { +const BACKGROUND_CONTROLS_DEFAULT_PROPS = { attrNameTemplate: '%s', backgroundMediaAllowVideo: true, hasGradient: true, diff --git a/src/block-components/helpers/borders/edit.js b/src/block-components/helpers/borders/edit.js index fcf0699aeb..d892379559 100644 --- a/src/block-components/helpers/borders/edit.js +++ b/src/block-components/helpers/borders/edit.js @@ -18,6 +18,7 @@ import { useAttributeEditHandlers, useAttributeValue, useBlockLayoutDefaults, useBlockSetAttributesContext, usePresetControls, } from '~stackable/hooks' import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../../util/props' export const BORDER_CONTROLS = [ { @@ -57,7 +58,8 @@ const BORDER_CONTROLS_WITH_NONE_VALUE = [ }, ] -export const BorderControls = props => { +export const BorderControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BORDER_CONTROLS_DEFAULT_PROPS ) const { getAttrName, updateAttributes, @@ -161,7 +163,7 @@ export const BorderControls = props => { ) } -BorderControls.defaultProps = { +const BORDER_CONTROLS_DEFAULT_PROPS = { attrNameTemplate: '%s', borderTypeValue: '', // If not supplied, the value from the attribute will be used, otherwise: '' for none, 'solid', 'dashed', 'dotted' hasBorderType: true, diff --git a/src/block-components/helpers/link/edit.js b/src/block-components/helpers/link/edit.js index 4274745cc6..0b34903c3b 100644 --- a/src/block-components/helpers/link/edit.js +++ b/src/block-components/helpers/link/edit.js @@ -11,8 +11,10 @@ import { */ import { __ } from '@wordpress/i18n' import { useAttributeEditHandlers, useAttributeValue } from '~stackable/hooks' +import { getPropsWithDefaults } from '../../../util/props' -export const LinkControls = props => { +export const LinkControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, LINK_CONTROLS_DEFAULT_PROPS ) const { hasLink, hasTitle, @@ -95,7 +97,7 @@ export const LinkControls = props => { ) } -LinkControls.defaultProps = { +const LINK_CONTROLS_DEFAULT_PROPS = { attrNameTemplate: '%s', hasLink: true, hasTitle: false, diff --git a/src/block-components/helpers/size/edit.js b/src/block-components/helpers/size/edit.js index f7179b64e2..6972e6f642 100644 --- a/src/block-components/helpers/size/edit.js +++ b/src/block-components/helpers/size/edit.js @@ -16,8 +16,10 @@ import { */ import { __ } from '@wordpress/i18n' import { getAttributeNameFunc } from '~stackable/util' +import { getPropsWithDefaults } from '../../../util/props' -const Layout = props => { +const Layout = incomingProps => { + const props = getPropsWithDefaults( incomingProps, LAYOUT_DEFAULT_PROPS ) const deviceType = useDeviceType() const { @@ -115,7 +117,7 @@ const Layout = props => { ) } -Layout.defaultProps = { +const LAYOUT_DEFAULT_PROPS = { attrNameTemplate: '%s', hasMinHeight: true, hasContentVerticalAlign: true, @@ -123,7 +125,8 @@ Layout.defaultProps = { labels: {}, } -const Spacing = props => { +const Spacing = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SPACING_DEFAULT_PROPS ) // Don't use the hook form so we don't rerender const getAttrName = getAttributeNameFunc( props.attrNameTemplate ) @@ -188,7 +191,7 @@ const Spacing = props => { ) } -Spacing.defaultProps = { +const SPACING_DEFAULT_PROPS = { attrNameTemplate: '%s', paddingPlaceholder: '', enableMargin: true, diff --git a/src/block-components/icon/edit.js b/src/block-components/icon/edit.js index b4c21a0ed5..9991ecbb4a 100644 --- a/src/block-components/icon/edit.js +++ b/src/block-components/icon/edit.js @@ -21,6 +21,7 @@ import { ProControl, } from '~stackable/components' import { getAttrNameFunction } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { useBlockAttributesContext, useBlockSetAttributesContext, useBlockLayoutDefaults, } from '~stackable/hooks' @@ -33,7 +34,8 @@ import { Fragment, useMemo } from '@wordpress/element' import { applyFilters } from '@wordpress/hooks' import { dispatch } from '@wordpress/data' -export const Edit = props => { +export const Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const { hasShape, hasIconGap, @@ -282,7 +284,7 @@ export const Edit = props => { ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { label: __( 'Icon', i18n ), hasColor: true, hasGradient: true, diff --git a/src/block-components/image/edit.js b/src/block-components/image/edit.js index 24207897b6..597fde2a5b 100644 --- a/src/block-components/image/edit.js +++ b/src/block-components/image/edit.js @@ -30,6 +30,7 @@ import { usePresetControls, } from '~stackable/hooks' import { getAttributeName } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' /** * WordPress dependencies @@ -54,7 +55,8 @@ export const IMAGE_SHADOWS = [ '70px 60px 60px #48497933', ] -const Controls = props => { +const Controls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CONTROLS_DEFAULT_PROPS ) const attributes = useBlockAttributesContext( attributes => { return { imageId: attributes.imageId, @@ -578,7 +580,7 @@ const Controls = props => { ) } -Controls.defaultProps = { +const CONTROLS_DEFAULT_PROPS = { hasAlt: true, hasWidth: true, hasSelector: true, @@ -599,7 +601,8 @@ Controls.defaultProps = { hasShape: true, } -export const Edit = props => { +export const Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const imageShow = useBlockAttributesContext( attributes => attributes.imageShow ) const setAttributes = useBlockSetAttributesContext() @@ -622,7 +625,7 @@ export const Edit = props => { ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { initialOpen: false, label: __( 'Image', i18n ), hasToggle: false, diff --git a/src/block-components/image/image.js b/src/block-components/image/image.js index 233c713ca2..9034c3d487 100644 --- a/src/block-components/image/image.js +++ b/src/block-components/image/image.js @@ -27,6 +27,7 @@ import { } from '@wordpress/element' import { select } from '@wordpress/data' import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../util/props' const formSize = ( size = '', unit = '%', usePx = false, usePct = true ) => { if ( size === 'auto' ) { @@ -67,7 +68,8 @@ const getImageClasses = props => { } ) } -const Image = memo( props => { +const Image = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_DEFAULT_PROPS ) const { isSelected } = useBlockEditContext() const [ neverResized, setNeverResized ] = useState( true ) const [ isResizing, setIsResizing ] = useState( false ) @@ -333,7 +335,7 @@ const Image = memo( props => { ) } ) -Image.defaultProps = { +const IMAGE_DEFAULT_PROPS = { imageId: '', enableClickToEdit: true, showHandles: true, @@ -374,7 +376,8 @@ Image.defaultProps = { } // Support responsive options. -const ImageResponsive = props => { +const ImageResponsive = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_RESPONSIVE_DEFAULT_PROPS ) const deviceType = useDeviceType() const isDesktop = deviceType === 'Desktop' const isMobile = deviceType === 'Mobile' @@ -419,8 +422,8 @@ const ImageResponsive = props => { ) } -ImageResponsive.defaultProps = { - ...Image.defaultProps, +const IMAGE_RESPONSIVE_DEFAULT_PROPS = { + ...IMAGE_DEFAULT_PROPS, widthTablet: '', heightTablet: '', @@ -440,7 +443,8 @@ ImageResponsive.defaultProps = { defaultHeight: '', } -const ImageContent = props => { +const ImageContent = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_CONTENT_DEFAULT_PROPS ) const imageWrapperClasses = getImageWrapperClasses( props ) const imageClasses = getImageClasses( props ) @@ -508,7 +512,7 @@ const ImageContent = props => { ) } -ImageContent.defaultProps = { +const IMAGE_CONTENT_DEFAULT_PROPS = { imageId: '', hasWrapper: false, diff --git a/src/block-components/image/index.js b/src/block-components/image/index.js index 8ef9f64b0e..c19300abfe 100644 --- a/src/block-components/image/index.js +++ b/src/block-components/image/index.js @@ -19,11 +19,13 @@ import { pickBy } from 'lodash' import { useBlockEditContext } from '@wordpress/block-editor' import { applyFilters } from '@wordpress/hooks' import { useSelect } from '@wordpress/data' +import { getPropsWithDefaults } from '../../util/props' export { deprecationImageOverlayOpacity, deprecateImageBorderRadius } from './deprecated' export { IMAGE_SHADOWS } from './edit' -export const Image = props => { +export const Image = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_DEFAULT_PROPS ) const { defaultWidth, defaultHeight: _defaultHeight, @@ -125,14 +127,15 @@ export const Image = props => { /> } -Image.defaultProps = { +const IMAGE_DEFAULT_PROPS = { defaultWidth: 150, defaultHeight: 300, enableHandles: true, showTooltips: false, } -Image.Content = props => { +Image.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_CONTENT_DEFAULT_PROPS ) const { defaultWidth, defaultHeight: _defaultHeight, @@ -175,7 +178,7 @@ Image.Content = props => { /> } -Image.Content.defaultProps = { +const IMAGE_CONTENT_DEFAULT_PROPS = { attributes: {}, defaultWidth: 150, defaultHeight: 300, diff --git a/src/block-components/link/edit.js b/src/block-components/link/edit.js index 2999e6a220..17b09cc1a3 100644 --- a/src/block-components/link/edit.js +++ b/src/block-components/link/edit.js @@ -17,8 +17,10 @@ import { __ } from '@wordpress/i18n' */ import { LinkControls } from '../helpers/link' import { getAttrNameFunction } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' -export const Edit = props => { +export const Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const getAttrName = getAttrNameFunction( 'link%s' ) const attrName = getAttrName( 'hasLink' ) const hasLink = useBlockAttributesContext( attributes => attributes[ attrName ] ) @@ -46,7 +48,7 @@ export const Edit = props => { ) } -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { hasToggle: false, isAdvancedTab: false, hasAnchorId: false, diff --git a/src/block-components/link/index.js b/src/block-components/link/index.js index 8ff56afbcf..9150d87904 100644 --- a/src/block-components/link/index.js +++ b/src/block-components/link/index.js @@ -14,8 +14,10 @@ import { useBlockAttributesContext } from '~stackable/hooks' * WordPress dependencies */ import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../util/props' -export const Link = props => { +export const Link = incomingProps => { + const props = getPropsWithDefaults( incomingProps, LINK_DEFAULT_PROPS ) const linkHasLink = useBlockAttributesContext( attributes => attributes.linkHasLink ) if ( ! linkHasLink ) { @@ -32,7 +34,7 @@ export const Link = props => { ) } -Link.defaultProps = { +const LINK_DEFAULT_PROPS = { className: '', linkProps: {}, } diff --git a/src/block-components/separator/edit.js b/src/block-components/separator/edit.js index b0ab3a2621..bfbdbd9b57 100644 --- a/src/block-components/separator/edit.js +++ b/src/block-components/separator/edit.js @@ -28,6 +28,7 @@ import { __ } from '@wordpress/i18n' import { applyFilters } from '@wordpress/hooks' import { useMemo } from '@wordpress/element' import { getAttributeNameFunc } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' const SEPARATOR_SHADOWS = [ 'none', @@ -43,7 +44,8 @@ const SEPARATOR_SHADOWS = [ '70px 130px -60px #48497961', ] -const SeparatorControls = props => { +const SeparatorControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SEPARATOR_CONTROLS_DEFAULT_PROPS ) const { attrNameTemplate, hasFlipVertically, @@ -127,7 +129,7 @@ const SeparatorControls = props => { ) } -SeparatorControls.defaultProps = { +const SEPARATOR_CONTROLS_DEFAULT_PROPS = { attrNameTemplate: '%s', hasFlipVertically: false, } diff --git a/src/block-components/separator/index.js b/src/block-components/separator/index.js index cd4e60cf02..733e33f09d 100644 --- a/src/block-components/separator/index.js +++ b/src/block-components/separator/index.js @@ -21,6 +21,7 @@ export { * WordPress dependencies */ import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../util/props' export const Separator = ( { children } ) => { const separatorAttributes = useBlockAttributesContext( attributes => { @@ -73,7 +74,9 @@ export const Separator = ( { children } ) => { ) } -Separator.Content = ( { children, attributes } ) => { +Separator.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SEPARATOR_CONTENT_DEFAULT_PROPS ) + const { children, attributes } = props return ( <> { attributes.topSeparatorShow && ( @@ -103,7 +106,7 @@ Separator.Content = ( { children, attributes } ) => { ) } -Separator.Content.defaultProps = { +const SEPARATOR_CONTENT_DEFAULT_PROPS = { attributes: {}, } diff --git a/src/block-components/separator/separator-control.js b/src/block-components/separator/separator-control.js index 8acec12ddf..262d5854ee 100644 --- a/src/block-components/separator/separator-control.js +++ b/src/block-components/separator/separator-control.js @@ -19,6 +19,7 @@ import { applyFilters, addFilter, hasFilter, } from '@wordpress/hooks' import { useMemo } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' /** * Add the default free layouts. @@ -29,7 +30,8 @@ if ( ! hasFilter( 'stackable.block-component.separator.layouts', 'default' ) ) { } ) } -const SeparatorControl = props => { +const SeparatorControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SEPARATOR_CONTROL_DEFAULT_PROPS ) const { attribute, responsive, @@ -69,7 +71,7 @@ const SeparatorControl = props => { ) } -SeparatorControl.defaultProps = { +const SEPARATOR_CONTROL_DEFAULT_PROPS = { excludeDesigns: [], attribute: '', } diff --git a/src/block-components/transform/edit.js b/src/block-components/transform/edit.js index 1f1127731c..b5747552d9 100644 --- a/src/block-components/transform/edit.js +++ b/src/block-components/transform/edit.js @@ -40,6 +40,3 @@ export const Edit = () => { ) } - -Edit.defaultProps = { -} diff --git a/src/block-components/typography/edit.js b/src/block-components/typography/edit.js index 0a8049faff..761b56e9a4 100644 --- a/src/block-components/typography/edit.js +++ b/src/block-components/typography/edit.js @@ -24,6 +24,7 @@ import { ShadowControl, } from '~stackable/components' import { getAttributeName, getAttrNameFunction } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { escapeHTMLIfInvalid } from './util' /** @@ -60,7 +61,8 @@ const GRADIENT_OPTIONS = [ }, ] -export const Controls = props => { +export const Controls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CONTROLS_DEFAULT_PROPS ) const { hasAlign, hasColor, @@ -321,7 +323,7 @@ export const Controls = props => { ) } -Controls.defaultProps = { +const CONTROLS_DEFAULT_PROPS = { hasAlign: false, hasColor: true, hasTextTag: true, @@ -334,7 +336,8 @@ Controls.defaultProps = { blockState: 'normal', } -export const Edit = memo( props => { +export const Edit = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, EDIT_DEFAULT_PROPS ) const { hasAlign, hasColor, @@ -384,7 +387,7 @@ export const Edit = memo( props => { ) } ) -Edit.defaultProps = { +const EDIT_DEFAULT_PROPS = { hasAlign: false, hasColor: true, hasTextTag: true, diff --git a/src/block-components/typography/index.js b/src/block-components/typography/index.js index 990be75354..c4fb6a2204 100644 --- a/src/block-components/typography/index.js +++ b/src/block-components/typography/index.js @@ -15,6 +15,7 @@ import { import { getAttributeName, getAttrName, getAttrNameFunction, } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { useDynamicContent } from '~stackable/components/dynamic-content-control' /** @@ -32,7 +33,8 @@ export { deprecateTypographyGradientColor, deprecateTypographyShadowColor, deprecateTypographyFontSize, } from './deprecated' -export const Typography = memo( forwardRef( ( props, ref ) => { +export const Typography = memo( forwardRef( ( incomingProps, ref ) => { + const props = getPropsWithDefaults( incomingProps, TYPOGRAPHY_DEFAULT_PROPS ) const { className, attrNameTemplate, @@ -121,7 +123,7 @@ export const Typography = memo( forwardRef( ( props, ref ) => { ) } ) ) -Typography.defaultProps = { +const TYPOGRAPHY_DEFAULT_PROPS = { attrNameTemplate: '%s', tagName: null, defaultTag: 'p', @@ -131,7 +133,8 @@ Typography.defaultProps = { identifier: 'text', } -Typography.Content = props => { +Typography.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, TYPOGRAPHY_CONTENT_DEFAULT_PROPS ) const { className, attrNameTemplate, @@ -160,7 +163,7 @@ Typography.Content = props => { ) } -Typography.Content.defaultProps = { +const TYPOGRAPHY_CONTENT_DEFAULT_PROPS = { attrNameTemplate: '%s', attributes: {}, tagName: null, diff --git a/src/block/countdown/countdown-number.js b/src/block/countdown/countdown-number.js index 3edc519c52..bfff53a4c1 100644 --- a/src/block/countdown/countdown-number.js +++ b/src/block/countdown/countdown-number.js @@ -1,4 +1,5 @@ import { useEffect, useState } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' const SECONDS = 1 const SECONDS_IN_MINUTE = SECONDS * 60 @@ -30,7 +31,8 @@ const getDuration = ( days, hours, minutes, seconds ) => { return a + Math.floor( Date.now() / 1000 ) } -export const CountdownNumber = props => { +export const CountdownNumber = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COUNTDOWN_NUMBER_DEFAULT_PROPS ) const [ value, setValue ] = useState( '' ) useEffect( () => { @@ -76,7 +78,7 @@ CountdownNumber.Content = props => { return
} -CountdownNumber.defaultProps = { +const COUNTDOWN_NUMBER_DEFAULT_PROPS = { datetime: '', type: 'seconds', value: 0, diff --git a/src/block/map/location-control.js b/src/block/map/location-control.js index 6b7be3062e..76f5dab194 100644 --- a/src/block/map/location-control.js +++ b/src/block/map/location-control.js @@ -11,13 +11,15 @@ import { __ } from '@wordpress/i18n' import { useState, useEffect, useRef, } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' /** * Location Control * - * @param {Object} props Component props + * @param {Object} incomingProps Component props */ -const LocationControl = props => { +const LocationControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, LOCATION_CONTROL_DEFAULT_PROPS ) const [ waitForGoogle, setWaitForGoogle ] = useState( 0 ) useEffect( () => { @@ -67,7 +69,7 @@ const LocationControl = props => { ) } -LocationControl.defaultProps = { +const LOCATION_CONTROL_DEFAULT_PROPS = { onChange: null, value: '', } diff --git a/src/components/__experimental-multi-post-picker-control/index.js b/src/components/__experimental-multi-post-picker-control/index.js index bbb191b0d6..ec0113f088 100644 --- a/src/components/__experimental-multi-post-picker-control/index.js +++ b/src/components/__experimental-multi-post-picker-control/index.js @@ -9,8 +9,10 @@ import { } from '@wordpress/element' import apiFetch from '@wordpress/api-fetch' import { addQueryArgs } from '@wordpress/url' +import { getPropsWithDefaults } from '../../util/props' -const PostPickerItem = props => { +const PostPickerItem = incomingProps => { + const props = getPropsWithDefaults( incomingProps, POST_PICKER_ITEM_DEFAULT_PROPS ) return (
{ props.value } @@ -27,7 +29,7 @@ const PostPickerItem = props => { ) } -PostPickerItem.defaultProps = { +const POST_PICKER_ITEM_DEFAULT_PROPS = { value: '', url: '', onRemove: () => {}, @@ -43,7 +45,8 @@ const getName = ( { return `${ title || noTitlePost( postId ) } - ${ postType }` } -const PostPickerControl = props => { +const PostPickerControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, POST_PICKER_CONTROL_DEFAULT_PROPS ) const [ inputValue, setInputValue ] = useState( '' ) const [ searchResults, setSearchResults ] = useState( [] ) const [ focused, setFocused ] = useState( false ) @@ -162,7 +165,7 @@ const PostPickerControl = props => { ) } -PostPickerControl.defaultProps = { +const POST_PICKER_CONTROL_DEFAULT_PROPS = { className: '', label: __( 'Pick a post', i18n ), value: [], diff --git a/src/components/admin-base-setting/index.js b/src/components/admin-base-setting/index.js index 3ba23258b9..7eb59de569 100644 --- a/src/components/admin-base-setting/index.js +++ b/src/components/admin-base-setting/index.js @@ -1,9 +1,11 @@ import { useState } from '@wordpress/element' import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' let i = 1 -const AdminBaseSetting = props => { +const AdminBaseSetting = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADMIN_BASE_SETTING_DEFAULT_PROPS ) const { showLabel = true } = props const [ uid ] = useState( `ugb-admin-setting-${ i++ }` ) const isSearched = props.searchedSettings ? props.searchedSettings.includes( props.label ) : true @@ -32,7 +34,7 @@ const AdminBaseSetting = props => { ) } -AdminBaseSetting.defaultProps = { +const ADMIN_BASE_SETTING_DEFAULT_PROPS = { label: '', onClick: () => {}, } diff --git a/src/components/admin-icon-setting/index.js b/src/components/admin-icon-setting/index.js index d27554e708..9da8970543 100644 --- a/src/components/admin-icon-setting/index.js +++ b/src/components/admin-icon-setting/index.js @@ -1,10 +1,12 @@ import AdminBaseSetting from '../admin-base-setting' import IconControl from '../icon-control' import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' const defaultIcon = '' -const AdminIconSetting = props => { +const AdminIconSetting = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADMIN_ICON_SETTING_DEFAULT_PROPS ) return ( { ) } -AdminIconSetting.defaultProps = { +const ADMIN_ICON_SETTING_DEFAULT_PROPS = { value: '', onChange: () => {}, } diff --git a/src/components/admin-select-setting/index.js b/src/components/admin-select-setting/index.js index 05b8fa5147..60945579bf 100644 --- a/src/components/admin-select-setting/index.js +++ b/src/components/admin-select-setting/index.js @@ -1,6 +1,8 @@ import AdminBaseSetting from '../admin-base-setting' +import { getPropsWithDefaults } from '../../util/props' -const AdminSelectSetting = props => { +const AdminSelectSetting = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADMIN_SELECT_SETTING_DEFAULT_PROPS ) return ( { /* eslint-disable-next-line jsx-a11y/no-onchange */ } @@ -23,7 +25,7 @@ const AdminSelectSetting = props => { ) } -AdminSelectSetting.defaultProps = { +const ADMIN_SELECT_SETTING_DEFAULT_PROPS = { label: '', value: '', onChange: () => {}, diff --git a/src/components/admin-text-setting/index.js b/src/components/admin-text-setting/index.js index 0c187b30de..4fa5340e38 100644 --- a/src/components/admin-text-setting/index.js +++ b/src/components/admin-text-setting/index.js @@ -1,8 +1,10 @@ import AdminBaseSetting from '../admin-base-setting' import { useRef, useState } from '@wordpress/element' import { maskSensitiveValue } from '~stackable/util/mask-sensitive-value' +import { getPropsWithDefaults } from '../../util/props' -const AdminTextSetting = props => { +const AdminTextSetting = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADMIN_TEXT_SETTING_DEFAULT_PROPS ) const ref = useRef() const [ isEditing, setIsEditing ] = useState( false ) const value = props.maskValue && ! isEditing ? maskSensitiveValue( props.value ) : props.value @@ -48,7 +50,7 @@ const AdminTextSetting = props => { ) } -AdminTextSetting.defaultProps = { +const ADMIN_TEXT_SETTING_DEFAULT_PROPS = { label: '', type: 'text', value: '', diff --git a/src/components/admin-toggle-setting/index.js b/src/components/admin-toggle-setting/index.js index 0b37e7f71c..dfca5efb1f 100644 --- a/src/components/admin-toggle-setting/index.js +++ b/src/components/admin-toggle-setting/index.js @@ -3,8 +3,10 @@ import AdminBaseSetting from '../admin-base-setting' import { createRef } from '@wordpress/element' import { __ } from '@wordpress/i18n' import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' -const AdminToggleSetting = props => { +const AdminToggleSetting = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADMIN_TOGGLE_SETTING_DEFAULT_PROPS ) const ref = createRef() return ( { ) } -AdminToggleSetting.defaultProps = { +const ADMIN_TOGGLE_SETTING_DEFAULT_PROPS = { label: '', value: false, placeholder: '', diff --git a/src/components/admin-toolbar-setting/index.js b/src/components/admin-toolbar-setting/index.js index cf848dcd22..d343dced60 100644 --- a/src/components/admin-toolbar-setting/index.js +++ b/src/components/admin-toolbar-setting/index.js @@ -3,8 +3,10 @@ import Button from '../button' import { ButtonGroup } from '@wordpress/components' import { __ } from '@wordpress/i18n' import { i18n } from 'stackable' +import { getPropsWithDefaults } from '../../util/props' -const AdminToolbarSetting = props => { +const AdminToolbarSetting = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADMIN_TOOLBAR_SETTING_DEFAULT_PROPS ) return ( { ) } -AdminToolbarSetting.defaultProps = { +const ADMIN_TOOLBAR_SETTING_DEFAULT_PROPS = { controls: [], label: '', value: '', diff --git a/src/components/advanced-focal-point-control/index.js b/src/components/advanced-focal-point-control/index.js index 05c07714b9..b5478dea8d 100644 --- a/src/components/advanced-focal-point-control/index.js +++ b/src/components/advanced-focal-point-control/index.js @@ -16,12 +16,14 @@ import { memo } from '@wordpress/element' * External dependencies */ import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' // This is only used for display purposes in the focal picker because it doesn't // accept blank/empty string/null/undefined. const FOCAL_DEFAULT_VALUE = { x: 0.5, y: 0.5 } -const AdvancedFocalPointControl = props => { +const AdvancedFocalPointControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_FOCAL_POINT_CONTROL_DEFAULT_PROPS ) const [ _value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover ) const [ propsToPass, controlProps ] = extractControlProps( props ) @@ -54,7 +56,7 @@ const AdvancedFocalPointControl = props => { ) } -AdvancedFocalPointControl.defaultProps = { +const ADVANCED_FOCAL_POINT_CONTROL_DEFAULT_PROPS = { className: '', url: '', diff --git a/src/components/advanced-radio-control/index.js b/src/components/advanced-radio-control/index.js index 3a708997ed..c41c9a0f24 100644 --- a/src/components/advanced-radio-control/index.js +++ b/src/components/advanced-radio-control/index.js @@ -9,9 +9,11 @@ import { RadioControl } from '@wordpress/components' import classnames from 'classnames' import { omit } from 'lodash' import { BaseControl } from '..' +import { getPropsWithDefaults } from '../../util/props' // TODO: reset not showing up -const AdvancedRadioControl = props => { +const AdvancedRadioControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_RADIO_CONTROL_DEFAULT_PROPS ) return ( { ) } -AdvancedRadioControl.defaultProps = { +const ADVANCED_RADIO_CONTROL_DEFAULT_PROPS = { onChange: () => {}, onChangeUnit: () => {}, help: '', diff --git a/src/components/advanced-range-control/index.js b/src/components/advanced-range-control/index.js index 340a38e9f6..83cdf8f06e 100644 --- a/src/components/advanced-range-control/index.js +++ b/src/components/advanced-range-control/index.js @@ -20,6 +20,7 @@ import { import { extractNumbersAndUnits, getCSSVarName, convertToPxIfUnsupported, } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { settings as stackableSettings } from 'stackable' /** @@ -32,7 +33,8 @@ import { Button } from '@wordpress/components' import { settings } from '@wordpress/icons' import { dispatch } from '@wordpress/data' -const AdvancedRangeControl = props => { +const AdvancedRangeControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_RANGE_CONTROL_DEFAULT_PROPS ) const [ value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback ) const [ propsToPass, controlProps ] = extractControlProps( props ) @@ -325,7 +327,7 @@ const AdvancedRangeControl = props => { ) } -AdvancedRangeControl.defaultProps = { +const ADVANCED_RANGE_CONTROL_DEFAULT_PROPS = { allowReset: true, onReset: undefined, showReset: undefined, diff --git a/src/components/advanced-range-control/range-control.js b/src/components/advanced-range-control/range-control.js index d14bb6c1e6..2b6638afce 100644 --- a/src/components/advanced-range-control/range-control.js +++ b/src/components/advanced-range-control/range-control.js @@ -27,6 +27,7 @@ import { __ } from '@wordpress/i18n' import classnames from 'classnames' import { clamp } from 'lodash' import { i18n } from 'stackable' +import { getPropsWithDefaults } from '../../util/props' // NumberControl is only supported in WP 5.5 const isNumberControlSupported = !! NumberControl @@ -36,7 +37,8 @@ export const getPercentageValue = ( value, min, max ) => { return `${ clamp( percentageValue, 0, 100 ) }%` } -const StackableRangeControl = memo( props => { +const StackableRangeControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, STACKABLE_RANGE_CONTROL_DEFAULT_PROPS ) const { allowReset, withInputField, @@ -198,7 +200,7 @@ const StackableRangeControl = memo( props => {
} ) -StackableRangeControl.defaultProps = { +const STACKABLE_RANGE_CONTROL_DEFAULT_PROPS = { className: '', allowReset: false, withInputField: true, diff --git a/src/components/advanced-select-control/index.js b/src/components/advanced-select-control/index.js index 9bcd105bd7..a8b5ba2fab 100644 --- a/src/components/advanced-select-control/index.js +++ b/src/components/advanced-select-control/index.js @@ -16,8 +16,10 @@ import { memo } from '@wordpress/element' */ import classnames from 'classnames' import { isEqual } from 'lodash' +import { getPropsWithDefaults } from '../../util/props' -const AdvancedSelectControl = memo( props => { +const AdvancedSelectControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_SELECT_CONTROL_DEFAULT_PROPS ) const [ value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback ) const [ propsToPass, controlProps ] = extractControlProps( props ) const { @@ -48,7 +50,7 @@ const AdvancedSelectControl = memo( props => { ) }, isEqual ) -AdvancedSelectControl.defaultProps = { +const ADVANCED_SELECT_CONTROL_DEFAULT_PROPS = { className: '', url: '', diff --git a/src/components/advanced-text-control/index.js b/src/components/advanced-text-control/index.js index 0a30a83b9a..6bcb62ccd0 100644 --- a/src/components/advanced-text-control/index.js +++ b/src/components/advanced-text-control/index.js @@ -18,8 +18,10 @@ import { memo } from '@wordpress/element' */ import classnames from 'classnames' import { isEqual } from 'lodash' +import { getPropsWithDefaults } from '../../util/props' -const AdvancedTextControl = memo( props => { +const AdvancedTextControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_TEXT_CONTROL_DEFAULT_PROPS ) const [ value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback ) const [ propsToPass, controlProps ] = extractControlProps( props ) const { @@ -81,7 +83,7 @@ const AdvancedTextControl = memo( props => { ) }, isEqual ) -AdvancedTextControl.defaultProps = { +const ADVANCED_TEXT_CONTROL_DEFAULT_PROPS = { className: '', isMultiline: false, allowReset: true, diff --git a/src/components/advanced-toggle-control/index.js b/src/components/advanced-toggle-control/index.js index 7ea26bae50..75af4dc79f 100644 --- a/src/components/advanced-toggle-control/index.js +++ b/src/components/advanced-toggle-control/index.js @@ -18,8 +18,10 @@ import { useInstanceId } from '@wordpress/compose' import { FormToggle } from '@wordpress/components' import { memo } from '@wordpress/element' import { useControlHandlers } from '../base-control2/hooks' +import { getPropsWithDefaults } from '../../util/props' -const AdvancedToggleControl = memo( props => { +const AdvancedToggleControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_TOGGLE_CONTROL_DEFAULT_PROPS ) const { help, } = props @@ -71,7 +73,7 @@ const AdvancedToggleControl = memo( props => { ) } ) -AdvancedToggleControl.defaultProps = { +const ADVANCED_TOGGLE_CONTROL_DEFAULT_PROPS = { className: '', allowReset: true, showReset: null, diff --git a/src/components/advanced-token-field/index.js b/src/components/advanced-token-field/index.js index 28e46aeb19..8d71ab73c1 100644 --- a/src/components/advanced-token-field/index.js +++ b/src/components/advanced-token-field/index.js @@ -14,8 +14,10 @@ import { FormTokenField } from '@wordpress/components' * External dependencies */ import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' -const AdvancedTokenField = props => { +const AdvancedTokenField = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_TOKEN_FIELD_DEFAULT_PROPS ) const [ value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover ) const [ propsToPass, controlProps ] = extractControlProps( props ) const { @@ -45,7 +47,7 @@ const AdvancedTokenField = props => { ) } -AdvancedTokenField.defaultProps = { +const ADVANCED_TOKEN_FIELD_DEFAULT_PROPS = { className: '', allowReset: true, default: '', diff --git a/src/components/advanced-toolbar-control/index.js b/src/components/advanced-toolbar-control/index.js index c0796a7063..80b36699bf 100644 --- a/src/components/advanced-toolbar-control/index.js +++ b/src/components/advanced-toolbar-control/index.js @@ -16,6 +16,7 @@ import Button from '../button' import AdvancedControl, { extractControlProps } from '../base-control2' import { useControlHandlers } from '../base-control2/hooks' import { ResetButton } from '../base-control2/reset-button' +import { getPropsWithDefaults } from '../../util/props' /** * External dependencies @@ -194,7 +195,28 @@ export const CONTROLS = { vertical: VERTICAL_ALIGN_OPTIONS, } -const AdvancedToolbarControl = props => { +const EMPTY_ARR = [] + +const ADVANCED_TOOLBAR_CONTROL_DEFAULT_PROPS = { + controls: EMPTY_ARR, + multiline: false, + fullwidth: true, + isSmall: false, + isToggleOnly: false, + allowReset: true, + default: '', + attribute: '', + responsive: false, + hover: false, + value: undefined, + onChange: undefined, + placeholder: '', + disabled: EMPTY_ARR, + omit: EMPTY_ARR, +} + +const AdvancedToolbarControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_TOOLBAR_CONTROL_DEFAULT_PROPS ) const [ _value, _onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback ) const [ _propsToPass, controlProps ] = extractControlProps( props ) @@ -290,27 +312,4 @@ const AdvancedToolbarControl = props => { ) } -const EMPTY_ARR = [] - -AdvancedToolbarControl.defaultProps = { - controls: EMPTY_ARR, - multiline: false, - fullwidth: true, - isSmall: false, - isToggleOnly: false, - - allowReset: true, - default: '', - - attribute: '', - responsive: false, - hover: false, - - value: undefined, - onChange: undefined, - placeholder: '', - disabled: EMPTY_ARR, - omit: EMPTY_ARR, -} - export default memo( AdvancedToolbarControl, isEqual ) diff --git a/src/components/align-buttons-control/index.js b/src/components/align-buttons-control/index.js index c9a6c71264..1709c40f53 100644 --- a/src/components/align-buttons-control/index.js +++ b/src/components/align-buttons-control/index.js @@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n' import { i18n } from 'stackable' import { AdvancedToolbarControl } from '~stackable/components' import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' const ALIGN_OPTIONS = [ { @@ -35,7 +36,8 @@ const ALIGN_OPTIONS = [ const ALIGN_OPTIONS_NO_JUSTIFY = ALIGN_OPTIONS.filter( option => option.value !== 'justify' ) -const AlignButtonsControl = props => { +const AlignButtonsControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ALIGN_BUTTONS_CONTROL_DEFAULT_PROPS ) const { justified, className, @@ -57,7 +59,7 @@ const AlignButtonsControl = props => { ) } -AlignButtonsControl.defaultProps = { +const ALIGN_BUTTONS_CONTROL_DEFAULT_PROPS = { className: '', label: __( 'Align', i18n ), justified: false, diff --git a/src/components/base-control-multi-label/index.js b/src/components/base-control-multi-label/index.js index b4ae594da9..70d872517d 100644 --- a/src/components/base-control-multi-label/index.js +++ b/src/components/base-control-multi-label/index.js @@ -10,8 +10,10 @@ import LabelTooltip from '../base-control2/label-tooltip' * External dependencies */ import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../util/props' -const BaseControlMultiLabel = props => { +const BaseControlMultiLabel = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BASE_CONTROL_MULTI_LABEL_DEFAULT_PROPS ) const screens = props.screens === 'all' ? [ 'desktop', 'tablet', 'mobile' ] : props.screens const units = props.units?.map( unit => { @@ -42,7 +44,7 @@ const BaseControlMultiLabel = props => { ) } -BaseControlMultiLabel.defaultProps = { +const BASE_CONTROL_MULTI_LABEL_DEFAULT_PROPS = { label: '', units: [ 'px' ], unit: 'px', diff --git a/src/components/base-control/index.js b/src/components/base-control/index.js index f2fcae93f2..be35dde2f3 100644 --- a/src/components/base-control/index.js +++ b/src/components/base-control/index.js @@ -21,8 +21,10 @@ import classnames from 'classnames' import { BaseControl as _BaseControl, Dashicon } from '@wordpress/components' import { i18n } from 'stackable' import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../util/props' -const BaseControl = props => { +const BaseControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BASE_CONTROL_DEFAULT_PROPS ) const isVisible = useResponsiveControlVisibility( props.screens ) // Register even when this control returns null so its parent panel can tell // when responsive filtering has removed every control inside it. @@ -90,7 +92,7 @@ const BaseControl = props => { ) } -BaseControl.defaultProps = { +const BASE_CONTROL_DEFAULT_PROPS = { className: '', help: '', id: '', diff --git a/src/components/base-control2/hover-state-toggle.js b/src/components/base-control2/hover-state-toggle.js index 2f13f75a45..6c9a355a68 100644 --- a/src/components/base-control2/hover-state-toggle.js +++ b/src/components/base-control2/hover-state-toggle.js @@ -22,6 +22,7 @@ import { __, sprintf } from '@wordpress/i18n' import { dispatch } from '@wordpress/data' import { upperFirst, camelCase } from 'lodash' import { isEmptyAttribute } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' const HOVER_OPTIONS = [ { @@ -50,7 +51,8 @@ const ALL_HOVER = [ 'normal', 'hover', 'parent-hover', 'collapsed' ] const _ALL_HOVER = [ 'normal', 'hover', 'parent-hover', 'collapsed' ] const ALL_HOVER_ATTRIBUTE_SUFFIX = ALL_HOVER.map( s => upperFirst( camelCase( s ) ) ) -const HoverStateToggle = props => { +const HoverStateToggle = incomingProps => { + const props = getPropsWithDefaults( incomingProps, HOVER_STATE_TOGGLE_DEFAULT_PROPS ) const [ currentHoverState, _blockHoverClass, hasParentHoverState, hasCollapsedState, isCollapsedBlock ] = useBlockHoverState( { forceUpdateHoverState: props.forceUpdateHoverState } ) const deviceType = useDeviceType() @@ -120,7 +122,7 @@ const HoverStateToggle = props => { ) } -HoverStateToggle.defaultProps = { +const HOVER_STATE_TOGGLE_DEFAULT_PROPS = { hover: false, attribute: '', hasResponsive: false, // Wether the attribute has responsive attributes (where we have hover states per device type) diff --git a/src/components/base-control2/index.js b/src/components/base-control2/index.js index 11c44650e5..0fbca2bf8c 100644 --- a/src/components/base-control2/index.js +++ b/src/components/base-control2/index.js @@ -29,6 +29,7 @@ import { pick, omit } from 'lodash' import { __ } from '@wordpress/i18n' import { Fragment } from '@wordpress/element' import { BaseControl as GutBaseControl } from '@wordpress/components' +import { getPropsWithDefaults } from '../../util/props' // Expose useControlHandlers to our API. export { useControlHandlers } from './hooks' @@ -36,7 +37,8 @@ export { useControlHandlers } from './hooks' const ALL_SCREENS = [ 'desktop', 'tablet', 'mobile' ] const EMPTY_OBJ = {} -export const BaseControl = props => { +export const BaseControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BASE_CONTROL_DEFAULT_PROPS ) const deviceType = useDeviceType() const isVisible = useResponsiveControlVisibility( props.responsive ) // Register even when this control returns null so its parent panel can tell @@ -127,7 +129,7 @@ export const BaseControl = props => { ) } -BaseControl.defaultProps = { +const BASE_CONTROL_DEFAULT_PROPS = { className: '', label: '', help: '', @@ -160,7 +162,8 @@ BaseControl.defaultProps = { hasHoverStateValue: undefined, } -const AdvancedControl = props => { +const AdvancedControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ADVANCED_CONTROL_DEFAULT_PROPS ) // Unit handles const unitAttrName = useAttributeName( `${ props.attribute }Unit`, props.responsive, props.hover ) const unitAttribute = useBlockAttributesContext( attributes => attributes[ unitAttrName ] ) || '' @@ -183,7 +186,7 @@ const AdvancedControl = props => { ) } -AdvancedControl.defaultProps = { +const ADVANCED_CONTROL_DEFAULT_PROPS = { // Control props className: '', label: '', @@ -222,7 +225,7 @@ AdvancedControl.defaultProps = { export default AdvancedControl export const extractControlProps = props => { - const advancedControlProps = [ ...Object.keys( AdvancedControl.defaultProps ), 'allowReset', 'screens' ] + const advancedControlProps = [ ...Object.keys( ADVANCED_CONTROL_DEFAULT_PROPS ), 'allowReset', 'screens' ] const controlProps = pick( props, advancedControlProps ) if ( props.screens ) { controlProps.responsive = props.screens diff --git a/src/components/base-control2/label-tooltip.js b/src/components/base-control2/label-tooltip.js index 939bbba4ef..a343b62c13 100644 --- a/src/components/base-control2/label-tooltip.js +++ b/src/components/base-control2/label-tooltip.js @@ -8,6 +8,7 @@ */ import HelpTooltip from '../help-tooltip' import { fetchSettings } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' /** * WordPress dependencies @@ -18,7 +19,8 @@ import { import { models } from '@wordpress/api' import domReady from '@wordpress/dom-ready' -const LabelTooltip = props => { +const LabelTooltip = incomingProps => { + const props = getPropsWithDefaults( incomingProps, LABEL_TOOLTIP_DEFAULT_PROPS ) const { title, label: controlLabel, @@ -98,7 +100,7 @@ const LabelTooltip = props => { ) } -LabelTooltip.defaultProps = { +const LABEL_TOOLTIP_DEFAULT_PROPS = { label: '', description: '', video: '', diff --git a/src/components/base-control2/reset-button.js b/src/components/base-control2/reset-button.js index 6ca2e43eae..d432d21723 100644 --- a/src/components/base-control2/reset-button.js +++ b/src/components/base-control2/reset-button.js @@ -11,10 +11,12 @@ import { __ } from '@wordpress/i18n' import { Dashicon } from '@wordpress/components' import { memo } from '@wordpress/element' import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' const icon = -export const ResetButton = memo( props => { +export const ResetButton = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESET_BUTTON_DEFAULT_PROPS ) const showReset = props.showReset !== null ? props.showReset : ( typeof props.value !== 'undefined' && props.value !== props.default && props.value !== props.placeholder ) @@ -40,7 +42,7 @@ export const ResetButton = memo( props => { ) } ) -ResetButton.defaultProps = { +const RESET_BUTTON_DEFAULT_PROPS = { allowReset: true, showReset: null, value: '', diff --git a/src/components/blend-mode-control/index.js b/src/components/blend-mode-control/index.js index 1cba2e1082..070d242302 100644 --- a/src/components/blend-mode-control/index.js +++ b/src/components/blend-mode-control/index.js @@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n' * External dependencies */ import { i18n } from 'stackable' +import { getPropsWithDefaults } from '../../util/props' const OPTIONS = [ { value: '', label: __( 'None', i18n ) }, @@ -36,7 +37,8 @@ const OPTIONS = [ { value: 'unset', label: __( 'Unset', i18n ) }, ] -const BlendModeControl = props => { +const BlendModeControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLEND_MODE_CONTROL_DEFAULT_PROPS ) return ( { ) } -BlendModeControl.defaultProps = { +const BLEND_MODE_CONTROL_DEFAULT_PROPS = { className: '', label: __( 'Mix Blend Mode', i18n ), help: '', diff --git a/src/components/block-container/index.js b/src/components/block-container/index.js index 77676e5c9b..b17336fd54 100644 --- a/src/components/block-container/index.js +++ b/src/components/block-container/index.js @@ -7,10 +7,12 @@ import { applyFilters } from '@wordpress/hooks' * External dependencies */ import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' const BlockContainer = {} -BlockContainer.Edit = props => { +BlockContainer.Edit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_CONTAINER_EDIT_DEFAULT_PROPS ) const { blockProps, render, @@ -59,12 +61,13 @@ BlockContainer.Edit = props => { ) } -BlockContainer.Edit.defaultProps = { +const BLOCK_CONTAINER_EDIT_DEFAULT_PROPS = { styles: null, // provided by `withBlockStyles` mainClass: true, } -BlockContainer.Save = props => { +BlockContainer.Save = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_CONTAINER_SAVE_DEFAULT_PROPS ) const { blockProps, render, @@ -113,7 +116,7 @@ BlockContainer.Save = props => { ) } -BlockContainer.Save.defaultProps = { +const BLOCK_CONTAINER_SAVE_DEFAULT_PROPS = { styles: null, // provided by `withBlockStyles` mainClass: true, } diff --git a/src/components/border-controls-helper/index.js b/src/components/border-controls-helper/index.js index 64981e646d..2446a8c57e 100644 --- a/src/components/border-controls-helper/index.js +++ b/src/components/border-controls-helper/index.js @@ -3,6 +3,7 @@ */ import { BorderControls } from '~stackable/components' import { __getValue } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { camelCase } from 'lodash' /** @@ -10,7 +11,8 @@ import { camelCase } from 'lodash' */ import { sprintf } from '@wordpress/i18n' -const BorderControlsHelper = props => { +const BorderControlsHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BORDER_CONTROLS_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getValue = __getValue( props.blockAttributes, getAttrName, '' ) @@ -90,7 +92,7 @@ const BorderControlsHelper = props => { ) } -BorderControlsHelper.defaultProps = { +const BORDER_CONTROLS_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/components/border-controls/index.js b/src/components/border-controls/index.js index 588f83ae7a..712132a09e 100644 --- a/src/components/border-controls/index.js +++ b/src/components/border-controls/index.js @@ -13,8 +13,10 @@ import { i18n } from 'stackable' */ import { __ } from '@wordpress/i18n' import { Fragment } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -const BorderControls = props => { +const BorderControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BORDER_CONTROLS_DEFAULT_PROPS ) return ( { props.onChangeBorderType && @@ -137,7 +139,7 @@ const BorderControls = props => { ) } -BorderControls.defaultProps = { +const BORDER_CONTROLS_DEFAULT_PROPS = { onResetBorder: () => {}, borderType: '', onChangeBorderType: () => {}, diff --git a/src/components/button-icon-popover-control/index.js b/src/components/button-icon-popover-control/index.js index d40214caf0..ed0bfe7299 100644 --- a/src/components/button-icon-popover-control/index.js +++ b/src/components/button-icon-popover-control/index.js @@ -19,8 +19,10 @@ import { __ } from '@wordpress/i18n' */ import classnames from 'classnames' import { i18n } from 'stackable' +import { getPropsWithDefaults } from '../../util/props' -const ButtonIconPopoverControl = memo( props => { +const ButtonIconPopoverControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, BUTTON_ICON_POPOVER_CONTROL_DEFAULT_PROPS ) const [ isOpen, setIsOpen ] = useState( false ) const buttonRef = useRef( null ) @@ -101,7 +103,7 @@ const ButtonIconPopoverControl = memo( props => { ) } ) -ButtonIconPopoverControl.defaultProps = { +const BUTTON_ICON_POPOVER_CONTROL_DEFAULT_PROPS = { help: '', label: '', popoverLabel: undefined, diff --git a/src/components/code-textarea-control/index.js b/src/components/code-textarea-control/index.js index b69b247632..2f520251ef 100644 --- a/src/components/code-textarea-control/index.js +++ b/src/components/code-textarea-control/index.js @@ -12,8 +12,10 @@ import classnames from 'classnames' * WordPress dependencies */ import { BaseControl } from '@wordpress/components' +import { getPropsWithDefaults } from '../../util/props' -const CodeTextareaControl = props => { +const CodeTextareaControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CODE_TEXTAREA_CONTROL_DEFAULT_PROPS ) return ( { ) } -CodeTextareaControl.defaultProps = { +const CODE_TEXTAREA_CONTROL_DEFAULT_PROPS = { help: '', className: '', value: '', diff --git a/src/components/code-textarea/index.js b/src/components/code-textarea/index.js index e0f0972c03..565c5f71a4 100644 --- a/src/components/code-textarea/index.js +++ b/src/components/code-textarea/index.js @@ -12,8 +12,10 @@ import { } from '@wordpress/element' import deepmerge from 'deepmerge' import { useOnScreenOnce } from '~stackable/hooks' +import { getPropsWithDefaults } from '../../util/props' -const CodeTextarea = props => { +const CodeTextarea = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CODE_TEXTAREA_DEFAULT_PROPS ) const [ value, setValue ] = useState( props.value ) const [ codeMirror, setCodeMirror ] = useState( null ) const textAeraRef = useRef() @@ -54,7 +56,7 @@ const CodeTextarea = props => { /> } -CodeTextarea.defaultProps = { +const CODE_TEXTAREA_DEFAULT_PROPS = { value: '', onChange: () => {}, editorSettings: {}, diff --git a/src/components/color-palette-control/color-palette-popup.js b/src/components/color-palette-control/color-palette-popup.js index ad4bce9c8b..461ca09a2f 100644 --- a/src/components/color-palette-control/color-palette-popup.js +++ b/src/components/color-palette-control/color-palette-popup.js @@ -5,6 +5,7 @@ import { AdvancedToolbarControl } from '..' import { i18n } from 'stackable' import { extractColor } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' /** * WordPress dependencies @@ -30,7 +31,8 @@ const COLOR_TYPE_CONTROLS = [ }, ] -export const ColorPalettePopup = memo( props => { +export const ColorPalettePopup = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLOR_PALETTE_POPUP_DEFAULT_PROPS ) const { onChange, preOnChange, @@ -115,7 +117,7 @@ export const ColorPalettePopup = memo( props => { const NOOP = () => {} const PASSTHRU = v => v -ColorPalettePopup.defaultProps = { +const COLOR_PALETTE_POPUP_DEFAULT_PROPS = { value: '', onChange: NOOP, preOnChange: PASSTHRU, diff --git a/src/components/color-palette-control/index.js b/src/components/color-palette-control/index.js index 1e245c6a69..5ed725c1e3 100644 --- a/src/components/color-palette-control/index.js +++ b/src/components/color-palette-control/index.js @@ -32,6 +32,7 @@ import { cloneDeep } from 'lodash' import { i18n } from 'stackable' import classnames from 'classnames' import { useBlockColorSchemes } from '~stackable/hooks' +import { getPropsWithDefaults } from '../../util/props' const popoverProps = { placement: 'left-start', @@ -102,7 +103,8 @@ addFilter( 'stackable.color-palette-control.color-value', 'stackable/color-palet return value } ) -const ColorPaletteControl = memo( props => { +const ColorPaletteControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLOR_PALETTE_CONTROL_DEFAULT_PROPS ) const { label, className = '', @@ -238,7 +240,7 @@ const ColorPaletteControl = memo( props => { ) } ) -ColorPaletteControl.defaultProps = { +const COLOR_PALETTE_CONTROL_DEFAULT_PROPS = { allowReset: true, default: '', diff --git a/src/components/column-inserter/index.js b/src/components/column-inserter/index.js index 477ea7b452..77c9343785 100644 --- a/src/components/column-inserter/index.js +++ b/src/components/column-inserter/index.js @@ -13,6 +13,7 @@ import { select, dispatch } from '@wordpress/data' import { useBlockEditContext } from '@wordpress/block-editor' import { plus } from '@wordpress/icons' import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../util/props' export const insertColumnBlock = ( rootClientId, blockName = '', attributes = {} ) => { const { @@ -39,7 +40,9 @@ export const insertColumnBlock = ( rootClientId, blockName = '', attributes = {} dispatch( 'core/block-editor' ).insertBlock( block, innerBlocks.length, rootClientId ) } -const ColumnInserter = ( { label } ) => { +const ColumnInserter = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMN_INSERTER_DEFAULT_PROPS ) + const { label } = props const { clientId } = useBlockEditContext() return ( @@ -55,7 +58,7 @@ const ColumnInserter = ( { label } ) => { ) } -ColumnInserter.defaultProps = { +const COLUMN_INSERTER_DEFAULT_PROPS = { label: __( 'Add Column', i18n ), } diff --git a/src/components/columns-width-control/column-slider.js b/src/components/columns-width-control/column-slider.js index e98922e615..36785984f1 100644 --- a/src/components/columns-width-control/column-slider.js +++ b/src/components/columns-width-control/column-slider.js @@ -5,6 +5,7 @@ import { SliderRail, Handle } from './slider-components' import { isEqual } from 'lodash' import { fixColumnWidths } from './util' import { useRef, memo } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' const sliderStyle = { position: 'relative', @@ -93,7 +94,8 @@ const fixValues = ( values, changedIndex, direction ) => { return convertColumnsToValues( fixedColumns ) } -const ColumnSlider = memo( props => { +const ColumnSlider = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMN_SLIDER_DEFAULT_PROPS ) const currentValues = useRef( null ) const slidingHandleIndex = useRef( 0 ) const currentSlideValue = useRef( null ) @@ -198,7 +200,7 @@ const ColumnSlider = memo( props => { ) }, isEqual ) -ColumnSlider.defaultProps = { +const COLUMN_SLIDER_DEFAULT_PROPS = { onChange: () => {}, value: [], } diff --git a/src/components/columns-width-control/columns-inputs.js b/src/components/columns-width-control/columns-inputs.js index 4994db7458..4be103674e 100644 --- a/src/components/columns-width-control/columns-inputs.js +++ b/src/components/columns-width-control/columns-inputs.js @@ -1,5 +1,6 @@ import classNames from 'classnames' import { fixColumnWidths, columnWidthSum } from './util' +import { getPropsWithDefaults } from '../../util/props' const gridTemplateColumns = columns => { return columns.map( column => { @@ -9,7 +10,8 @@ const gridTemplateColumns = columns => { const isBlank = columns => columns.every( column => ! column ) -const ColumnsInputs = props => { +const ColumnsInputs = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMNS_INPUTS_DEFAULT_PROPS ) const style = { gridTemplateColumns: gridTemplateColumns( props.value ), gridAutoFlow: isBlank( props.value ) ? 'column' : undefined, @@ -63,7 +65,7 @@ const ColumnsInputs = props => { ) } -ColumnsInputs.defaultProps = { +const COLUMNS_INPUTS_DEFAULT_PROPS = { onChange: () => {}, value: [], } diff --git a/src/components/columns-width-control/index.js b/src/components/columns-width-control/index.js index 56bc56340b..301373d0a4 100644 --- a/src/components/columns-width-control/index.js +++ b/src/components/columns-width-control/index.js @@ -26,6 +26,7 @@ import classnames from 'classnames' import { i18n } from 'stackable' import { DesignControl } from '~stackable/components' import { BaseControl } from '../base-control2' +import { getPropsWithDefaults } from '../../util/props' const COLUMN_PRESETS = { '2-1': [ 50, 50 ], @@ -63,7 +64,8 @@ const COLUMN_PRESET_OPTIONS = { const isBlank = columns => columns.every( column => ! column ) -const ColumnsWidthControl = props => { +const ColumnsWidthControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMNS_WIDTH_CONTROL_DEFAULT_PROPS ) const sliderValues = isBlank( props.values ) && COLUMN_PRESETS[ `${ props.columns }-1` ] ? COLUMN_PRESETS[ `${ props.columns }-1` ] : ( props.values || [] ).every( value => value !== '' ) @@ -105,7 +107,7 @@ const ColumnsWidthControl = props => { ) } -ColumnsWidthControl.defaultProps = { +const COLUMNS_WIDTH_CONTROL_DEFAULT_PROPS = { columns: 2, values: [ '', '' ], onChange: () => {}, diff --git a/src/components/columns-width-multi-control/index.js b/src/components/columns-width-multi-control/index.js index 549a81ec4e..bb7dd28a61 100644 --- a/src/components/columns-width-multi-control/index.js +++ b/src/components/columns-width-multi-control/index.js @@ -16,8 +16,10 @@ import { __ } from '@wordpress/i18n' import classnames from 'classnames' import { i18n } from 'stackable' import { range } from 'lodash' +import { getPropsWithDefaults } from '../../util/props' -const ColumnsWidthMultiControl = props => { +const ColumnsWidthMultiControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMNS_WIDTH_MULTI_CONTROL_DEFAULT_PROPS ) return ( { ) } -ColumnsWidthMultiControl.defaultProps = { +const COLUMNS_WIDTH_MULTI_CONTROL_DEFAULT_PROPS = { columns: 2, values: [ '', '' ], onChange: () => {}, diff --git a/src/components/control-icon-toggle/index.js b/src/components/control-icon-toggle/index.js index 3b285daf58..478a03ebcc 100644 --- a/src/components/control-icon-toggle/index.js +++ b/src/components/control-icon-toggle/index.js @@ -14,8 +14,10 @@ import classnames from 'classnames' import { useState, memo, useMemo, useRef, useEffect, } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -const ControlIconToggle = props => { +const ControlIconToggle = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CONTROL_ICON_TOGGLE_DEFAULT_PROPS ) const { value, options, @@ -138,7 +140,7 @@ const ControlIconToggle = props => { ) } -ControlIconToggle.defaultProps = { +const CONTROL_ICON_TOGGLE_DEFAULT_PROPS = { className: '', value: '', options: [], diff --git a/src/components/custom-attributes-control/index.js b/src/components/custom-attributes-control/index.js index 0682985f67..729ba9b1cd 100644 --- a/src/components/custom-attributes-control/index.js +++ b/src/components/custom-attributes-control/index.js @@ -8,6 +8,7 @@ import { escape as _escape } from 'lodash' * Internal dependencies */ import { createRoot } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' /** * WordPress dependencies @@ -38,7 +39,8 @@ const createAttributeString = attrArray => { : '' } -const CustomAttributesControl = props => { +const CustomAttributesControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CUSTOM_ATTRIBUTES_CONTROL_DEFAULT_PROPS ) const inputRef = useRef() const [ hasError, setHasError ] = useState( false ) @@ -121,7 +123,7 @@ const CustomAttributesControl = props => { ) } -CustomAttributesControl.defaultProps = { +const CUSTOM_ATTRIBUTES_CONTROL_DEFAULT_PROPS = { label: '', value: [], invalidHtmlAttributes: [], diff --git a/src/components/design-control/index.js b/src/components/design-control/index.js index 6cd0f4f71a..291138ed08 100644 --- a/src/components/design-control/index.js +++ b/src/components/design-control/index.js @@ -14,8 +14,10 @@ import LabelTooltip from '../base-control2/label-tooltip' * WordPress dependencies */ import { RadioControl } from '@wordpress/components' +import { getPropsWithDefaults } from '../../util/props' -const DesignControl = props => { +const DesignControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DESIGN_CONTROL_DEFAULT_PROPS ) // Convert the options. const _options = props.options.filter( option => option.premium ? isPro : true ) const fixedOptions = _options.map( option => { @@ -58,7 +60,7 @@ const DesignControl = props => { ) } -DesignControl.defaultProps = { +const DESIGN_CONTROL_DEFAULT_PROPS = { className: '', columns: 2, selected: '', diff --git a/src/components/design-separator-control/index.js b/src/components/design-separator-control/index.js index 84e07b9316..51a168bd8a 100644 --- a/src/components/design-separator-control/index.js +++ b/src/components/design-separator-control/index.js @@ -30,6 +30,7 @@ import { } from '@wordpress/i18n' import { BaseControl } from '@wordpress/components' import { applyFilters, addFilter } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../util/props' const designs = [ { @@ -81,7 +82,8 @@ addFilter( 'stackable.separator.edit.layouts', 'default', layouts => { ], 'value' ) } ) -const DesignSeparatorControl = props => { +const DesignSeparatorControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DESIGN_SEPARATOR_CONTROL_DEFAULT_PROPS ) const { label, help, @@ -110,7 +112,7 @@ const DesignSeparatorControl = props => { ) } -DesignSeparatorControl.defaultProps = { +const DESIGN_SEPARATOR_CONTROL_DEFAULT_PROPS = { label: '', help: '', excludeDesigns: [], diff --git a/src/components/div/index.js b/src/components/div/index.js index b032d8d4d8..902c30d805 100644 --- a/src/components/div/index.js +++ b/src/components/div/index.js @@ -3,8 +3,10 @@ */ import classnames from 'classnames' import VideoBackground from './video-background' +import { getPropsWithDefaults } from '../../util/props' -const Div = props => { +const Div = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DIV_DEFAULT_PROPS ) const { blockTag: BlockTag, className, @@ -40,7 +42,7 @@ const Div = props => { ) } -Div.defaultProps = { +const DIV_DEFAULT_PROPS = { blockTag: 'div', className: '', hasBackground: true, @@ -50,7 +52,8 @@ Div.defaultProps = { backgroundColorType: '', } -Div.Content = props => { +Div.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DIV_CONTENT_DEFAULT_PROPS ) const { blockTag: BlockTag, className, @@ -86,8 +89,8 @@ Div.Content = props => { ) } -Div.Content.defaultProps = { - ...Div.defaultProps, +const DIV_CONTENT_DEFAULT_PROPS = { + ...DIV_DEFAULT_PROPS, } export default Div diff --git a/src/components/div/video-background.js b/src/components/div/video-background.js index 8e2b9956c3..6f1c0a1f04 100644 --- a/src/components/div/video-background.js +++ b/src/components/div/video-background.js @@ -3,6 +3,7 @@ */ import classnames from 'classnames' import { urlIsVideo } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { useDeviceType } from '~stackable/hooks' /** @@ -10,7 +11,8 @@ import { useDeviceType } from '~stackable/hooks' */ import { Fragment } from '@wordpress/element' -const VideoBackground = props => { +const VideoBackground = incomingProps => { + const props = getPropsWithDefaults( incomingProps, VIDEO_BACKGROUND_DEFAULT_PROPS ) let backgroundSrc = props.videoUrl let backgroundThumbnailSrc = props.videoThumbnailUrl const deviceType = useDeviceType() @@ -45,7 +47,7 @@ const VideoBackground = props => { ) } -VideoBackground.defaultProps = { +const VIDEO_BACKGROUND_DEFAULT_PROPS = { videoUrl: '', videoUrlTablet: '', videoUrlMobile: '', @@ -54,7 +56,8 @@ VideoBackground.defaultProps = { videoThumbnailUrlMobile: '', } -VideoBackground.Content = props => { +VideoBackground.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, VIDEO_BACKGROUND_CONTENT_DEFAULT_PROPS ) const desktopClassNames = classnames( [ 'stk-video-background', ], { @@ -113,7 +116,7 @@ VideoBackground.Content = props => { ) } -VideoBackground.Content.defaultProps = { +const VIDEO_BACKGROUND_CONTENT_DEFAULT_PROPS = { videoUrl: '', videoUrlTablet: '', videoUrlMobile: '', diff --git a/src/components/dynamic-content-control/index.js b/src/components/dynamic-content-control/index.js index affa7fc2ef..29d6868148 100644 --- a/src/components/dynamic-content-control/index.js +++ b/src/components/dynamic-content-control/index.js @@ -36,6 +36,7 @@ import ProControl from '../pro-control' import Popover from '../popover' import SVGDatabaseIcon from './icons/database-light.svg' import { ResetButton } from '../base-control2/reset-button' +import { getPropsWithDefaults } from '../../util/props' /** * Custom hook for generating component props @@ -543,9 +544,11 @@ export const DynamicContentButton = memo( props => { ) } ) -const DynamicContentControl = ( { - children, enable, ...otherProps -} ) => { +const DynamicContentControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DYNAMIC_CONTENT_CONTROL_DEFAULT_PROPS ) + const { + children, enable, ...otherProps + } = props if ( ! enable ) { return children } @@ -583,7 +586,7 @@ const DynamicContentControl = ( { ) } -DynamicContentControl.defaultProps = { +const DYNAMIC_CONTENT_CONTROL_DEFAULT_PROPS = { enable: false, controlHasTooltip: false, children: null, diff --git a/src/components/font-awesome-icon/index.js b/src/components/font-awesome-icon/index.js index a731038aa2..5a861eedbc 100644 --- a/src/components/font-awesome-icon/index.js +++ b/src/components/font-awesome-icon/index.js @@ -2,6 +2,7 @@ * External dependencies */ import { faGetIcon, faFetchIcon } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { pick } from 'lodash' /** @@ -116,7 +117,8 @@ const addSVGAttributes = ( svgHTML, attributesToAdd = {}, attributesToRemove = [ return svgHTML.substring( 0, svgTagStart ) + newSvgTag + restOfSvg } -const FontAwesomeIcon = memo( props => { +const FontAwesomeIcon = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, FONT_AWESOME_ICON_DEFAULT_PROPS ) const { svgAttrsToAdd = { width: '32', height: '32' }, svgAttrsToRemove = [ 'id', 'data-name' ], @@ -196,7 +198,7 @@ FontAwesomeIcon.Content = props => { return { prependRenderString + svg } } -FontAwesomeIcon.defaultProps = { +const FONT_AWESOME_ICON_DEFAULT_PROPS = { ariaLabel: '', prefix: '', iconName: '', diff --git a/src/components/font-family-control/index.js b/src/components/font-family-control/index.js index f9e26978ca..1c756208de 100644 --- a/src/components/font-family-control/index.js +++ b/src/components/font-family-control/index.js @@ -11,6 +11,7 @@ import { MODERN_FONT_STACKS, SYSTEM_FONT_STACKS, } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' /** * WordPress dependencies @@ -30,7 +31,8 @@ const loadGoogleFonts = async () => { return fonts.map( font => ( { label: font.family, value: font.family } ) ) } -const FontFamilyControl = props => { +const FontFamilyControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, FONT_FAMILY_CONTROL_DEFAULT_PROPS ) const { loadingThemeFont, themeFonts, themeFontOptions, } = select( 'stackable/theme-fonts' ).getThemeFonts() @@ -100,7 +102,7 @@ const FontFamilyControl = props => { ) } -FontFamilyControl.defaultProps = { +const FONT_FAMILY_CONTROL_DEFAULT_PROPS = { onChange: () => {}, label: __( 'Font Family', i18n ), value: '', diff --git a/src/components/font-pair-picker/index.js b/src/components/font-pair-picker/index.js index 0443c8c703..6404688b0c 100644 --- a/src/components/font-pair-picker/index.js +++ b/src/components/font-pair-picker/index.js @@ -11,6 +11,7 @@ import classNames from 'classnames' import { loadGoogleFont, getFontFamilyLabel, getFontFamily, } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { omit } from 'lodash' /** @@ -18,7 +19,8 @@ import { omit } from 'lodash' */ import { __ } from '@wordpress/i18n' -const FontPairPicker = props => { +const FontPairPicker = incomingProps => { + const props = getPropsWithDefaults( incomingProps, FONT_PAIR_PICKER_DEFAULT_PROPS ) const headingStyles = props.fontPair?.typography?.h1 || {} const paragraphStyles = props.fontPair?.typography?.p || {} if ( headingStyles.fontFamily ) { @@ -86,7 +88,7 @@ const FontPairPicker = props => { ) } -FontPairPicker.defaultProps = { +const FONT_PAIR_PICKER_DEFAULT_PROPS = { key: '', fontPair: {}, isSelected: false, diff --git a/src/components/font-size-control/index.js b/src/components/font-size-control/index.js index afa025d4d0..019a0699b1 100644 --- a/src/components/font-size-control/index.js +++ b/src/components/font-size-control/index.js @@ -8,8 +8,10 @@ import { AdvancedRangeControl } from '~stackable/components' */ import { __ } from '@wordpress/i18n' import { i18n } from 'stackable' +import { getPropsWithDefaults } from '../../util/props' -const FontSizeControl = props => { +const FontSizeControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, FONT_SIZE_CONTROL_DEFAULT_PROPS ) const passedPlaceholder = props.placeholder const pxToEm = ( value = '', baseValue = 21 ) => { @@ -48,7 +50,7 @@ const FontSizeControl = props => { ) } -FontSizeControl.defaultProps = { +const FONT_SIZE_CONTROL_DEFAULT_PROPS = { label: __( 'Font Size', i18n ), value: '', onChange: () => {}, diff --git a/src/components/four-range-control/index.js b/src/components/four-range-control/index.js index ec5bec5dd2..4540f8748e 100644 --- a/src/components/four-range-control/index.js +++ b/src/components/four-range-control/index.js @@ -47,6 +47,7 @@ import { import { extractNumbersAndUnits, getCSSVarName, convertToPxIfUnsupported, } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' const isEqualInitial = ( props, value, firstValue ) => { let isEqual = true @@ -57,7 +58,8 @@ const isEqualInitial = ( props, value, firstValue ) => { return isEqual } -const FourRangeControl = memo( props => { +const FourRangeControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, FOUR_RANGE_CONTROL_DEFAULT_PROPS ) const [ _value, _onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback ) const [ propsToPass, controlProps ] = extractControlProps( props ) const [ currentHoverState ] = useBlockHoverState() @@ -991,7 +993,7 @@ const FourRangeControl = memo( props => { ) }, isEqual ) -FourRangeControl.defaultProps = { +const FOUR_RANGE_CONTROL_DEFAULT_PROPS = { defaultLocked: true, hasLock: true, enableTop: true, diff --git a/src/components/heading-buttons-control/index.js b/src/components/heading-buttons-control/index.js index f4712c7806..e2d616fb47 100644 --- a/src/components/heading-buttons-control/index.js +++ b/src/components/heading-buttons-control/index.js @@ -22,6 +22,7 @@ import { __, _x, sprintf, } from '@wordpress/i18n' import { memo } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' const TAG_OPTIONS = [ { @@ -63,7 +64,8 @@ const TAG_OPTIONS = [ const TAG_OPTIONS_NOP = TAG_OPTIONS.filter( ( { value } ) => value !== 'p' ) -const HeadingButtonsControl = memo( props => { +const HeadingButtonsControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, HEADING_BUTTONS_CONTROL_DEFAULT_PROPS ) return ( { ) } ) -HeadingButtonsControl.defaultProps = { +const HEADING_BUTTONS_CONTROL_DEFAULT_PROPS = { label: sprintf( _x( '%s HTML Tag', 'component', i18n ), __( 'Title', i18n ) ), value: undefined, hasP: true, diff --git a/src/components/help-tooltip/index.js b/src/components/help-tooltip/index.js index 2771d5086d..f4103c88b6 100644 --- a/src/components/help-tooltip/index.js +++ b/src/components/help-tooltip/index.js @@ -16,10 +16,12 @@ import { } from '@wordpress/components' import { __ } from '@wordpress/i18n' import Popover from '../popover' +import { getPropsWithDefaults } from '../../util/props' const NOOP = () => {} -const HelpTooltip = props => { +const HelpTooltip = incomingProps => { + const props = getPropsWithDefaults( incomingProps, HELP_TOOLTIP_DEFAULT_PROPS ) return { } -HelpTooltip.defaultProps = { +const HELP_TOOLTIP_DEFAULT_PROPS = { title: '', video: '', description: '', diff --git a/src/components/icon-control/index.js b/src/components/icon-control/index.js index 94b6cffe2b..d9239c8a2f 100644 --- a/src/components/icon-control/index.js +++ b/src/components/icon-control/index.js @@ -17,6 +17,7 @@ import { IconSearchPopover, SvgIcon, Button, BaseControl, } from '~stackable/components' import { Dropdown } from '@wordpress/components' +import { getPropsWithDefaults } from '../../util/props' const popoverProps = { placement: 'left-start', @@ -24,7 +25,8 @@ const popoverProps = { shift: true, } -const IconControl = props => { +const IconControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ICON_CONTROL_DEFAULT_PROPS ) return ( { ) } -IconControl.defaultProps = { +const ICON_CONTROL_DEFAULT_PROPS = { label: __( 'Icon', i18n ), value: '', returnSVGValue: true, // If true, the value provided in onChange will be the SVG markup of the icon. If false, the value will be a prefix-iconName value. diff --git a/src/components/icon-search-popover/index.js b/src/components/icon-search-popover/index.js index 379f826fd4..6bd8a5e7a4 100644 --- a/src/components/icon-search-popover/index.js +++ b/src/components/icon-search-popover/index.js @@ -25,6 +25,7 @@ import { Button, FontAwesomeIcon, Popover, } from '~stackable/components' import { faGetIcon, faFetchIcon } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { FileDrop } from 'react-file-drop' import classnames from 'classnames' import { applyFilters, doAction } from '@wordpress/hooks' @@ -84,7 +85,8 @@ export const cleanSvgString = svgString => { return newSvg } -const IconSearchPopover = props => { +const IconSearchPopover = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ICON_SEARCH_POPOVER_DEFAULT_PROPS ) const [ value, setValue ] = useState( '' ) const [ results, setResults ] = useState( { faIcons: [], iconLibrary: [] } ) const [ isBusy, setIsBusy ] = useState( false ) @@ -330,7 +332,7 @@ const IconSearchPopover = props => { const noop = () => {} -IconSearchPopover.defaultProps = { +const ICON_SEARCH_POPOVER_DEFAULT_PROPS = { onChange: noop, onClose: noop, returnSVGValue: true, // If true, the value provided in onChange will be the SVG markup of the icon. If false, the value will be a prefix-iconName value. diff --git a/src/components/image-alt-control/index.js b/src/components/image-alt-control/index.js index d31346441d..5ca79f6efc 100644 --- a/src/components/image-alt-control/index.js +++ b/src/components/image-alt-control/index.js @@ -9,8 +9,10 @@ import { i18n } from 'stackable' import { TextareaControl, ExternalLink } from '@wordpress/components' import { __ } from '@wordpress/i18n' import { useInternalValue } from '~stackable/hooks' +import { getPropsWithDefaults } from '../../util/props' -const ImageAltControl = props => { +const ImageAltControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_ALT_CONTROL_DEFAULT_PROPS ) // Keep track of the internal value because we will move the cursor to the // end of the text when the user types. const [ internalValue, setInternalValue ] = useInternalValue( props.value ) @@ -36,7 +38,7 @@ const ImageAltControl = props => { ) } -ImageAltControl.defaultProps = { +const IMAGE_ALT_CONTROL_DEFAULT_PROPS = { label: __( 'Alt Text (Alternative Text)', i18n ), } diff --git a/src/components/image-control/index.js b/src/components/image-control/index.js index 5f37613616..cae46ffac5 100644 --- a/src/components/image-control/index.js +++ b/src/components/image-control/index.js @@ -16,8 +16,10 @@ import { __ } from '@wordpress/i18n' import { Fragment } from '@wordpress/element' import { i18n } from 'stackable' import { MediaUpload } from '@wordpress/block-editor' +import { getPropsWithDefaults } from '../../util/props' -const ImageControl = props => { +const ImageControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_CONTROL_DEFAULT_PROPS ) const type = props.imageURL && props.imageURL.match( /(mp4|webm|ogg)$/i ) ? 'video' : 'image' const onRemove = () => { if ( props.onRemove ) { @@ -107,7 +109,7 @@ const ImageControl = props => { ) } -ImageControl.defaultProps = { +const IMAGE_CONTROL_DEFAULT_PROPS = { label: '', imageID: '', imageURL: '', diff --git a/src/components/image-control2/index.js b/src/components/image-control2/index.js index 16f1c01611..ccb3d1378a 100644 --- a/src/components/image-control2/index.js +++ b/src/components/image-control2/index.js @@ -27,8 +27,10 @@ import { } from '@wordpress/element' import { MediaUpload } from '@wordpress/block-editor' import { currentUserHasCapability } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' -const ImageControl = memo( props => { +const ImageControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_CONTROL_DEFAULT_PROPS ) const attrNameId = useAttributeName( `${ props.attribute }Id`, props.responsive, props.hover ) const attrNameUrl = useAttributeName( `${ props.attribute }Url`, props.responsive, props.hover ) const attrWidthAttribute = useAttributeName( `${ props.attribute }HeightAttribute`, props.responsive, props.hover ) @@ -212,7 +214,7 @@ const ImageControl = memo( props => { ) } ) -ImageControl.defaultProps = { +const IMAGE_CONTROL_DEFAULT_PROPS = { label: '', attribute: '', diff --git a/src/components/image-filter-control/index.js b/src/components/image-filter-control/index.js index 5316f51532..ff826d4fdd 100644 --- a/src/components/image-filter-control/index.js +++ b/src/components/image-filter-control/index.js @@ -17,6 +17,7 @@ import { __, sprintf } from '@wordpress/i18n' import classnames from 'classnames' import { i18n } from 'stackable' import { compact, omit } from 'lodash' +import { getPropsWithDefaults } from '../../util/props' const FILTERS = { blur: { @@ -105,7 +106,8 @@ const filterToValue = filters => { return compact( newFilters ).join( ' ' ) } -export const ImageFilterControl = props => { +export const ImageFilterControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_FILTER_CONTROL_DEFAULT_PROPS ) const [ _value, _onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover ) const [ _propsToPass, controlProps ] = extractControlProps( props ) @@ -151,7 +153,7 @@ export const ImageFilterControl = props => { ) } -ImageFilterControl.defaultProps = { +const IMAGE_FILTER_CONTROL_DEFAULT_PROPS = { // onChange: () => {}, // help: '', // className: '', diff --git a/src/components/image-shape-control/index.js b/src/components/image-shape-control/index.js index f65d0a5b55..543f5dde8d 100644 --- a/src/components/image-shape-control/index.js +++ b/src/components/image-shape-control/index.js @@ -20,8 +20,10 @@ import classnames from 'classnames' import { applyFilters } from '@wordpress/hooks' import { __, sprintf } from '@wordpress/i18n' import { Fragment } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -const ImageShapeControl = props => { +const ImageShapeControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_SHAPE_CONTROL_DEFAULT_PROPS ) const { className, hasDefault, @@ -54,7 +56,7 @@ const ImageShapeControl = props => { ) } -ImageShapeControl.defaultProps = { +const IMAGE_SHAPE_CONTROL_DEFAULT_PROPS = { className: '', label: __( 'Shape', i18n ), selected: '', diff --git a/src/components/image-size-control/index.js b/src/components/image-size-control/index.js index 98663412c4..bf78a9e73d 100644 --- a/src/components/image-size-control/index.js +++ b/src/components/image-size-control/index.js @@ -18,18 +18,21 @@ import { import { __ } from '@wordpress/i18n' import { withSelect } from '@wordpress/data' import { compose } from '@wordpress/compose' +import { getPropsWithDefaults } from '../../util/props' const getImageSizeOptions = imageSizes => { return map( imageSizes, ( { name, slug } ) => ( { value: slug, label: name } ) ) } -const ImageSizeControl = ( { - imageSizes, - value, - className, - defaultValue, - ...propsToPass -} ) => { +const ImageSizeControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_SIZE_CONTROL_DEFAULT_PROPS ) + const { + imageSizes, + value, + className, + defaultValue, + ...propsToPass + } = props const imageSizeOptions = getImageSizeOptions( imageSizes ) if ( isEmpty( imageSizeOptions ) ) { @@ -46,7 +49,7 @@ const ImageSizeControl = ( { /> } -ImageSizeControl.defaultProps = { +const IMAGE_SIZE_CONTROL_DEFAULT_PROPS = { className: '', label: __( 'Image Size', i18n ), value: 'large', diff --git a/src/components/image-upload-placeholder/index.js b/src/components/image-upload-placeholder/index.js index ab45de31c7..486ab0176c 100644 --- a/src/components/image-upload-placeholder/index.js +++ b/src/components/image-upload-placeholder/index.js @@ -13,8 +13,10 @@ import classnames from 'classnames' */ import { Dashicon } from '@wordpress/components' import { MediaUpload } from '@wordpress/block-editor' +import { getPropsWithDefaults } from '../../util/props' -const ImageUploadPlaceholder = props => { +const ImageUploadPlaceholder = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_UPLOAD_PLACEHOLDER_DEFAULT_PROPS ) const { imageID, imageURL, @@ -114,7 +116,7 @@ const ImageUploadPlaceholder = props => { ) } -ImageUploadPlaceholder.defaultProps = { +const IMAGE_UPLOAD_PLACEHOLDER_DEFAULT_PROPS = { imageID: '', imageURL: '', imageSize: 'full', // If supplied, the imageURL that will be returned will be of this size. diff --git a/src/components/inspector-tabs/index.js b/src/components/inspector-tabs/index.js index 7e56f6e01d..9129ae5d10 100644 --- a/src/components/inspector-tabs/index.js +++ b/src/components/inspector-tabs/index.js @@ -21,6 +21,7 @@ import useResponsiveControlVisibility from '~stackable/hooks/use-responsive-cont import useCoreResponsiveStylesCompatibility from './use-core-responsive-styles-compatibility' const { Slot: LayoutPanelSlot, Fill: LayoutPanelFill } = createSlotFill( 'StackableLayoutPanel' ) +const DEFAULT_TABS = [ 'layout', 'style', 'advanced' ] const InspectorLayoutControls = ( { children } ) => { return @@ -87,10 +88,13 @@ const ResponsivePanelTabs = props => { /> } -const InspectorTabs = props => { +const InspectorTabs = ( { + tabs = DEFAULT_TABS, + hasLayoutPanel = true, +} ) => { const { name, clientId } = useBlockEditContext() const defaultTab = getBlockSupport( name, 'stkDefaultTab' ) || 'style' - const [ activeTab, setActiveTab ] = useGlobalState( `tabCache-${ name }`, props.tabs.includes( defaultTab ) ? defaultTab : 'style' ) + const [ activeTab, setActiveTab ] = useGlobalState( `tabCache-${ name }`, tabs.includes( defaultTab ) ? defaultTab : 'style' ) useCoreResponsiveStylesCompatibility( clientId ) @@ -101,7 +105,7 @@ const InspectorTabs = props => { { ( isPro || showProNotice ) && } @@ -109,7 +113,7 @@ const InspectorTabs = props => { { /* Make sure the layout panel is the very first one */ } - { props.hasLayoutPanel && ( + { hasLayoutPanel && ( { ) } -InspectorTabs.defaultProps = { - tabs: [ 'layout', 'style', 'advanced' ], - hasLayoutPanel: true, -} - export default memo( InspectorTabs ) diff --git a/src/components/link-control/index.js b/src/components/link-control/index.js index 3f61d874e9..fbfab1fdc1 100644 --- a/src/components/link-control/index.js +++ b/src/components/link-control/index.js @@ -6,9 +6,8 @@ import classnames from 'classnames' /** * WordPress dependencies */ -import { - __experimentalLinkControl as _LinkControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis -} from '@wordpress/block-editor' +// eslint-disable-next-line @wordpress/no-unsafe-wp-apis +import { __experimentalLinkControl as _LinkControl } from '@wordpress/block-editor' import { BaseControl as _BaseControl } from '@wordpress/components' import { __ } from '@wordpress/i18n' @@ -19,8 +18,10 @@ import DynamicContentControl, { useDynamicContentControlProps } from '../dynamic import AdvancedControl, { extractControlProps } from '../base-control2' import { useControlHandlers } from '../base-control2/hooks' import { ResetButton } from '../base-control2/reset-button' +import { getPropsWithDefaults } from '../../util/props' -const LinkControl = props => { +const LinkControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, LINK_CONTROL_DEFAULT_PROPS ) const [ _value, _onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback ) const [ propsToPass, controlProps ] = extractControlProps( props ) const { @@ -66,7 +67,7 @@ const LinkControl = props => { ) } -LinkControl.defaultProps = { +const LINK_CONTROL_DEFAULT_PROPS = { className: '', label: '', screens: [ 'desktop' ], diff --git a/src/components/link/index.js b/src/components/link/index.js index 884859b5b1..a2480c7229 100644 --- a/src/components/link/index.js +++ b/src/components/link/index.js @@ -8,8 +8,10 @@ import { omit } from 'lodash' * WordPress dependencies */ import { forwardRef } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -const Link = forwardRef( ( props, ref ) => { +const Link = forwardRef( ( incomingProps, ref ) => { + const props = getPropsWithDefaults( incomingProps, LINK_DEFAULT_PROPS ) const { children, className, @@ -35,12 +37,13 @@ const Link = forwardRef( ( props, ref ) => { ) } ) -Link.defaultProps = { +const LINK_DEFAULT_PROPS = { className: '', tagName: 'a', } -Link.Content = props => { +Link.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, LINK_CONTENT_DEFAULT_PROPS ) const className = classnames( [ 'stk-link', props.className, @@ -74,7 +77,7 @@ Link.Content = props => { ) } -Link.Content.defaultProps = { +const LINK_CONTENT_DEFAULT_PROPS = { className: '', target: '', rel: '', diff --git a/src/components/modal-design-library/index.js b/src/components/modal-design-library/index.js index 9f4663928f..9190e87ce6 100644 --- a/src/components/modal-design-library/index.js +++ b/src/components/modal-design-library/index.js @@ -40,7 +40,4 @@ export const Switcher = props => { ) } -Switcher.defaultProps = { -} - export default Switcher diff --git a/src/components/panel-advanced-settings/index.js b/src/components/panel-advanced-settings/index.js index b9bc8d45de..6a83cff716 100644 --- a/src/components/panel-advanced-settings/index.js +++ b/src/components/panel-advanced-settings/index.js @@ -13,14 +13,16 @@ import { i18n } from 'stackable' */ import { memo } from '@wordpress/element' import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../util/props' const noop = () => {} -const PanelAdvancedSettings = memo( props => { +const PanelAdvancedSettings = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, PANEL_ADVANCED_SETTINGS_DEFAULT_PROPS ) return } ) -PanelAdvancedSettings.defaultProps = { +const PANEL_ADVANCED_SETTINGS_DEFAULT_PROPS = { id: '', className: '', title: __( 'Settings', i18n ), diff --git a/src/components/panel-tabs/inspector-panel-controls.js b/src/components/panel-tabs/inspector-panel-controls.js index 06fe1d145c..1321115b2b 100644 --- a/src/components/panel-tabs/inspector-panel-controls.js +++ b/src/components/panel-tabs/inspector-panel-controls.js @@ -2,8 +2,10 @@ * External dependencies */ import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' -const InspectorPanelControls = props => { +const InspectorPanelControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, INSPECTOR_PANEL_CONTROLS_DEFAULT_PROPS ) const mainClasses = classnames( [ 'ugb-inspector-panel-controls', `ugb-panel-${ props.tab }`, @@ -16,7 +18,7 @@ const InspectorPanelControls = props => { ) } -InspectorPanelControls.defaultProps = { +const INSPECTOR_PANEL_CONTROLS_DEFAULT_PROPS = { tab: 'layout', } diff --git a/src/components/popover/index.js b/src/components/popover/index.js index 364fc84195..a6969bfcbf 100644 --- a/src/components/popover/index.js +++ b/src/components/popover/index.js @@ -1,9 +1,11 @@ import { Popover as Popover_ } from '@wordpress/components' import classNames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' const NOOP = () => {} -const Popover = props => { +const Popover = incomingProps => { + const props = getPropsWithDefaults( incomingProps, POPOVER_DEFAULT_PROPS ) return { /> } -Popover.defaultProps = { +const POPOVER_DEFAULT_PROPS = { className: '', onEscape: NOOP, } diff --git a/src/components/pro-control-button/index.js b/src/components/pro-control-button/index.js index df903c76f2..979b4ca0cd 100644 --- a/src/components/pro-control-button/index.js +++ b/src/components/pro-control-button/index.js @@ -8,8 +8,10 @@ import classnames from 'classnames' * WordPress dependencies */ import { useState } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -const ProControlButton = props => { +const ProControlButton = incomingProps => { + const props = getPropsWithDefaults( incomingProps, PRO_CONTROL_BUTTON_DEFAULT_PROPS ) const { initialOpen, ...propsToPass @@ -37,7 +39,7 @@ const ProControlButton = props => { ) } -ProControlButton.defaultProps = { +const PRO_CONTROL_BUTTON_DEFAULT_PROPS = { initialOpen: false, } diff --git a/src/components/pro-control/index.js b/src/components/pro-control/index.js index 13ff11b3f1..92eea0850d 100644 --- a/src/components/pro-control/index.js +++ b/src/components/pro-control/index.js @@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n' */ import { srcUrl, i18n } from 'stackable' import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' const prependBaseUrl = src => `${ srcUrl }/${ src }` @@ -93,7 +94,8 @@ const LABELS = { }, } -const ProControl = props => { +const ProControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, PRO_CONTROL_DEFAULT_PROPS ) const classNames = classnames( [ 'ugb-design-control-pro-note', props.className ] ) const description = props.description || LABELS[ props.type ]?.description @@ -130,7 +132,7 @@ const ProControl = props => { ) } -ProControl.defaultProps = { +const PRO_CONTROL_DEFAULT_PROPS = { className: '', type: '', title: '', diff --git a/src/components/resizable-bottom-margin/index.js b/src/components/resizable-bottom-margin/index.js index 2d29fa6956..9e3c650875 100644 --- a/src/components/resizable-bottom-margin/index.js +++ b/src/components/resizable-bottom-margin/index.js @@ -2,6 +2,7 @@ * Internal dependencies */ import { getAttributeName } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { useBlockSetAttributesContext, useDeviceType, @@ -49,7 +50,8 @@ const ENABLE = { left: false, } -const ResizableBottomMarginSingle = props => { +const ResizableBottomMarginSingle = incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESIZABLE_BOTTOM_MARGIN_SINGLE_DEFAULT_PROPS ) const { deviceType } = props const { name } = useBlockEditContext() const [ currentHeight, setCurrentHeight ] = useState( null ) @@ -152,13 +154,14 @@ const ResizableBottomMarginSingle = props => { ) } -ResizableBottomMarginSingle.defaultProps = { +const RESIZABLE_BOTTOM_MARGIN_SINGLE_DEFAULT_PROPS = { previewSelector: '', value: '', onChange: () => {}, } -const ResizableBottomMargin = props => { +const ResizableBottomMargin = incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESIZABLE_BOTTOM_MARGIN_DEFAULT_PROPS ) const setAttributes = useBlockSetAttributesContext() const deviceType = useDeviceType() const attrName = getAttributeName( props.attribute, deviceType ) @@ -205,7 +208,7 @@ const ResizableBottomMargin = props => { ) } -ResizableBottomMargin.defaultProps = { +const RESIZABLE_BOTTOM_MARGIN_DEFAULT_PROPS = { previewSelector: '', // Selector of the element where the margin is applied e.g. .stk-card-group attribute: '', responsive: false, diff --git a/src/components/resizable-column/index.js b/src/components/resizable-column/index.js index b3261a132c..17ebc2767a 100644 --- a/src/components/resizable-column/index.js +++ b/src/components/resizable-column/index.js @@ -25,6 +25,7 @@ import { Fragment, useState, useEffect, useRef, memo, useContext, } from '@wordpress/element' import { useBlockEditContext } from '@wordpress/block-editor' +import { getPropsWithDefaults } from '../../util/props' const MIN_COLUMN_WIDTH = 30 @@ -39,7 +40,8 @@ const formatLabel = value => { return ( Math.trunc( value * 10 ) / 10 ).toFixed( 1 ) } -const ResizableColumn = props => { +const ResizableColumn = incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESIZABLE_COLUMN_DEFAULT_PROPS ) const { clientId } = useBlockEditContext() const { getEditorDom } = useSelect( 'stackable/editor-dom' ) @@ -536,7 +538,8 @@ const ResizableColumn = props => { ) } -const ResizableTooltip = memo( props => { +const ResizableTooltip = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESIZABLE_TOOLTIP_DEFAULT_PROPS ) const { adjacentBlocks, isOnlyBlock, blockIndex, isLastBlock, isFirstBlock, } = props @@ -687,7 +690,7 @@ const ResizableTooltip = memo( props => { const noobj = {} const noop = () => {} -ResizableTooltip.defaultProps = { +const RESIZABLE_TOOLTIP_DEFAULT_PROPS = { isVisible: true, value: '', onChange: noop, @@ -695,7 +698,7 @@ ResizableTooltip.defaultProps = { onTogglePopup: null, } -ResizableColumn.defaultProps = { +const RESIZABLE_COLUMN_DEFAULT_PROPS = { className: '', context: null, showHandle: true, diff --git a/src/components/resizer-tooltip/index.js b/src/components/resizer-tooltip/index.js index d03bb82ead..b07146b709 100644 --- a/src/components/resizer-tooltip/index.js +++ b/src/components/resizer-tooltip/index.js @@ -19,6 +19,7 @@ import { Fragment, useState, useEffect, useRef, } from '@wordpress/element' import { __, sprintf } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../util/props' const clampSize = ( value, unit = '%' ) => { let ret @@ -45,7 +46,8 @@ const convertSizeByUnit = ( value, toUnit = '%', side = 'height', imgEl ) => { return clamp( Math.round( value / parentSize * 10 ) * 10, 10, 100 ) // Round nearest 10% } -const ResizerTooltip = props => { +const ResizerTooltip = incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESIZER_TOOLTIP_DEFAULT_PROPS ) const [ isEditing, setIsEditing ] = useState( false ) const [ currentWidth, setCurrentWidth ] = useState( '' ) const [ currentHeight, setCurrentHeight ] = useState( '' ) @@ -266,7 +268,7 @@ const ResizerTooltip = props => { ) } -ResizerTooltip.defaultProps = { +const RESIZER_TOOLTIP_DEFAULT_PROPS = { width: '', height: '', widthUnit: '%', diff --git a/src/components/responsive-control2/index.js b/src/components/responsive-control2/index.js index c19025ab00..804f9765a0 100644 --- a/src/components/responsive-control2/index.js +++ b/src/components/responsive-control2/index.js @@ -5,8 +5,10 @@ import { Children, cloneElement, Fragment, } from '@wordpress/element' import { useDeviceType } from '~stackable/hooks' +import { getPropsWithDefaults } from '../../util/props' -const ResponsiveControl2 = props => { +const ResponsiveControl2 = incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESPONSIVE_CONTROL2_DEFAULT_PROPS ) const deviceType = useDeviceType() return ( @@ -21,7 +23,7 @@ const ResponsiveControl2 = props => { ) } -ResponsiveControl2.defaultProps = { +const RESPONSIVE_CONTROL2_DEFAULT_PROPS = { screens: 'all', desktopProps: {}, tabletProps: {}, diff --git a/src/components/responsive-toggle/index.js b/src/components/responsive-toggle/index.js index 159be5a3ee..e26a120e30 100644 --- a/src/components/responsive-toggle/index.js +++ b/src/components/responsive-toggle/index.js @@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n' import { memo } from '@wordpress/element' import { dispatch } from '@wordpress/data' import { isEmptyAttributes } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { upperFirst, camelCase } from 'lodash' const DEVICE_TYPES = { @@ -48,7 +49,8 @@ const DEVICE_OPTIONS = [ const ALL_HOVER = [ 'normal', 'hover', 'parent-hover', 'collapsed' ] const ALL_HOVER_ATTRIBUTE_SUFFIX = ALL_HOVER.filter( s => s !== 'normal' ).map( s => upperFirst( camelCase( s ) ) ) -const ResponsiveToggle = props => { +const ResponsiveToggle = incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESPONSIVE_TOGGLE_DEFAULT_PROPS ) const deviceType = useDeviceType() const changeScreen = screen => { @@ -128,7 +130,7 @@ const ResponsiveToggle = props => { ) } -ResponsiveToggle.defaultProps = { +const RESPONSIVE_TOGGLE_DEFAULT_PROPS = { screens: [ 'desktop' ], attribute: '', suffix: '', diff --git a/src/components/rich-text/index.js b/src/components/rich-text/index.js index 34f7455d79..88b6c6e937 100644 --- a/src/components/rich-text/index.js +++ b/src/components/rich-text/index.js @@ -7,6 +7,7 @@ */ import { useBlockAttributesContext, useFontLoader } from '~stackable/hooks' import { getAttrNameFunction } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' /** * WordPress dependencies */ @@ -16,7 +17,8 @@ import { memo, } from '@wordpress/element' -const RichText = memo( forwardRef( ( props, ref ) => { +const RichText = memo( forwardRef( ( incomingProps, ref ) => { + const props = getPropsWithDefaults( incomingProps, RICH_TEXT_DEFAULT_PROPS ) const { attrNameTemplate, ...propsToPass @@ -41,7 +43,7 @@ const RichText = memo( forwardRef( ( props, ref ) => { ) } ) ) -RichText.defaultProps = { +const RICH_TEXT_DEFAULT_PROPS = { attrNameTemplate: '%s', } diff --git a/src/components/separator/index.js b/src/components/separator/index.js index a4544cc44a..bdc1c083f7 100644 --- a/src/components/separator/index.js +++ b/src/components/separator/index.js @@ -7,8 +7,10 @@ import { separators } from './separators' * External dependencies */ import classnames from 'classnames' +import { getPropsWithDefaults } from '../../util/props' -const Separator = props => { +const Separator = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SEPARATOR_DEFAULT_PROPS ) const { shape: SeparatorComp, shadow: ShadowComp } = separators[ props.design || 'wave-1' ][ ! props.inverted ? 'default' : 'inverted' ] const mainClasses = classnames( [ @@ -35,7 +37,7 @@ const Separator = props => { ) } -Separator.defaultProps = { +const SEPARATOR_DEFAULT_PROPS = { className: '', design: 'wave-1', shadow: false, diff --git a/src/components/separator2/index.js b/src/components/separator2/index.js index c8ce24175e..318a4f45dd 100644 --- a/src/components/separator2/index.js +++ b/src/components/separator2/index.js @@ -2,8 +2,10 @@ * Internal dependencies */ import { separators } from './designs' +import { getPropsWithDefaults } from '../../util/props' -const Separator = props => { +const Separator = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SEPARATOR_DEFAULT_PROPS ) const { design, inverted, @@ -21,7 +23,7 @@ const Separator = props => { ) } -Separator.defaultProps = { +const SEPARATOR_DEFAULT_PROPS = { className: '', design: 'wave-1', inverted: false, diff --git a/src/components/shadow-control/index.js b/src/components/shadow-control/index.js index 5f08a652b8..4b42b21f33 100644 --- a/src/components/shadow-control/index.js +++ b/src/components/shadow-control/index.js @@ -21,6 +21,7 @@ import { } from '@wordpress/element' import { applyFilters } from '@wordpress/hooks' import { Button, Dashicon } from '@wordpress/components' +import { getPropsWithDefaults } from '../../util/props' export const getShadows = () => { return applyFilters( 'stackable.shadows', [ @@ -127,7 +128,8 @@ const filterToValue = ( props, filters ) => { return newValue.join( ' ' ) } -const ShadowFilterControl = props => { +const ShadowFilterControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SHADOW_FILTER_CONTROL_DEFAULT_PROPS ) const [ filters, setFilters ] = useState( {} ) const [ filtersPlaceholder, setFiltersPlaceholder ] = useState( {} ) @@ -241,12 +243,13 @@ const ShadowFilterControl = props => { ) } -ShadowFilterControl.defaultProps = { +const SHADOW_FILTER_CONTROL_DEFAULT_PROPS = { hasInset: true, isFilter: false, } -const ShadowControl = memo( props => { +const ShadowControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, SHADOW_CONTROL_DEFAULT_PROPS ) const { options, label, @@ -340,7 +343,7 @@ const ShadowControl = memo( props => { ) }, isEqual ) -ShadowControl.defaultProps = { +const SHADOW_CONTROL_DEFAULT_PROPS = { attribute: '', label: __( 'Shadow / Outline', i18n ), placeholder: '', diff --git a/src/components/sort-control/index.js b/src/components/sort-control/index.js index 4b98bdd55e..dd59c85db6 100644 --- a/src/components/sort-control/index.js +++ b/src/components/sort-control/index.js @@ -18,6 +18,7 @@ import { range, isEqual } from 'lodash' */ import { __ } from '@wordpress/i18n' import { memo } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' const SortableContainer = sortableContainer( ( { children } ) => { return
{ children }
@@ -39,7 +40,8 @@ const applySort = ( values, oldIndex, newIndex ) => { // when using states. let isSorting = false -const SortControl = memo( props => { +const SortControl = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, SORT_CONTROL_DEFAULT_PROPS ) const [ _value, _onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover ) const [ propsToPass, controlProps ] = extractControlProps( props ) @@ -110,7 +112,7 @@ const SortControl = memo( props => { ) } ) -SortControl.defaultProps = { +const SORT_CONTROL_DEFAULT_PROPS = { className: '', help: '', label: __( 'Column Arrangement', i18n ), diff --git a/src/components/sortable-picker/index.js b/src/components/sortable-picker/index.js index 7f68ccde5e..25a6f787fc 100644 --- a/src/components/sortable-picker/index.js +++ b/src/components/sortable-picker/index.js @@ -22,6 +22,7 @@ import { } from '@wordpress/element' import { __ } from '@wordpress/i18n' import { ResetButton } from '../base-control2/reset-button' +import { getPropsWithDefaults } from '../../util/props' const addItemPopoverProps = { placement: 'left-start', @@ -45,7 +46,8 @@ const DRAG_KEYCODES = { down: [ 40, 39 ], } -const SortablePicker = forwardRef( ( props, ref ) => { +const SortablePicker = forwardRef( ( incomingProps, ref ) => { + const props = getPropsWithDefaults( incomingProps, SORTABLE_PICKER_DEFAULT_PROPS ) const { nonSortableItems = [], editableName = true, @@ -137,7 +139,7 @@ const SortablePicker = forwardRef( ( props, ref ) => { ) } ) -SortablePicker.defaultProps = { +const SORTABLE_PICKER_DEFAULT_PROPS = { className: '', label: '', onReset: () => {}, diff --git a/src/components/spacing-control/index.js b/src/components/spacing-control/index.js index 75e58f5b49..4b3a5df4bf 100644 --- a/src/components/spacing-control/index.js +++ b/src/components/spacing-control/index.js @@ -13,8 +13,10 @@ import { pick } from 'lodash' */ import { __ } from '@wordpress/i18n' import { Fragment } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -const SpacingControl = props => { +const SpacingControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SPACING_CONTROL_DEFAULT_PROPS ) const propsToPass = pick( props, [ 'label', 'units', 'screens', 'defaultLocked', 'enableTop', 'enableRight', 'enableBottom', 'enableLeft', 'className', 'sliderMax', 'sliderMin' ] ) // Allow different sets of min/max/step values per screen size. @@ -114,7 +116,7 @@ const SpacingControl = props => { } -SpacingControl.defaultProps = { +const SPACING_CONTROL_DEFAULT_PROPS = { label: __( 'Spacing', i18n ), defaultLocked: true, units: [ 'px', 'em', '%', 'vw' ], diff --git a/src/components/style-control/index.js b/src/components/style-control/index.js index aa5477c120..13c9620bb3 100644 --- a/src/components/style-control/index.js +++ b/src/components/style-control/index.js @@ -8,8 +8,10 @@ import classnames from 'classnames' */ import { memo } from '@wordpress/element' import { ENTER, SPACE } from '@wordpress/keycodes' +import { getPropsWithDefaults } from '../../util/props' -const StyleControl = props => { +const StyleControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, STYLE_CONTROL_DEFAULT_PROPS ) const { options, value } = props return ( @@ -28,7 +30,7 @@ const StyleControl = props => { ) } -StyleControl.defaultProps = { +const STYLE_CONTROL_DEFAULT_PROPS = { className: '', onSelect: () => {}, // The selected option object is returned options: [], // An option has a value, icon or image, and a label @@ -36,7 +38,8 @@ StyleControl.defaultProps = { activeProperty: 'value', // The property to compare the value with } -export const StyleControlOption = memo( props => { +export const StyleControlOption = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, STYLE_CONTROL_OPTION_DEFAULT_PROPS ) const { option, isActive, @@ -80,7 +83,7 @@ export const StyleControlOption = memo( props => { ) } ) -StyleControlOption.defaultProps = { +const STYLE_CONTROL_OPTION_DEFAULT_PROPS = { option: {}, isActive: false, onSelect: () => {}, diff --git a/src/components/style/index.js b/src/components/style/index.js index aa0b754d6e..185d8ee8eb 100644 --- a/src/components/style/index.js +++ b/src/components/style/index.js @@ -8,6 +8,7 @@ import { useQueryLoopInstanceId, createUniqueClass, } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { Fragment, memo, useMemo, } from '@wordpress/element' @@ -16,7 +17,8 @@ import { useBlockAttributesContext, useDeviceType, useRafMemo, } from '~stackable/hooks' -const Style = memo( props => { +const Style = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, STYLE_DEFAULT_PROPS ) const { version, versionAdded, versionDeprecated, styles, breakTablet, breakMobile, @@ -72,7 +74,7 @@ const Style = memo( props => { return output ? : null } ) -Style.defaultProps = { +const STYLE_DEFAULT_PROPS = { styles: null, blockUniqueClassName: '', breakTablet: 1024, @@ -86,7 +88,8 @@ Style.defaultProps = { versionDeprecated: false, // The version of Stackable when this style wasn't used anymore. } -Style.Content = props => { +Style.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, STYLE_CONTENT_DEFAULT_PROPS ) const { version, versionAdded, versionDeprecated, styles, blockUniqueClassName, breakTablet, breakMobile, } = props @@ -120,7 +123,7 @@ Style.Content = props => { return { minifyCSS( css.join( '' ) ) } } -Style.Content.defaultProps = { +const STYLE_CONTENT_DEFAULT_PROPS = { styles: null, blockUniqueClassName: '', breakTablet: 1024, diff --git a/src/components/tooltip/index.js b/src/components/tooltip/index.js index 27cb1839e7..3be578721d 100644 --- a/src/components/tooltip/index.js +++ b/src/components/tooltip/index.js @@ -1,7 +1,9 @@ import classnames from 'classnames' import { Tooltip as _Tooltip } from '@wordpress/components' +import { getPropsWithDefaults } from '../../util/props' -const Tooltip = props => { +const Tooltip = incomingProps => { + const props = getPropsWithDefaults( incomingProps, TOOLTIP_DEFAULT_PROPS ) return ( <_Tooltip { ...props } @@ -15,7 +17,7 @@ const Tooltip = props => { ) } -Tooltip.defaultProps = { +const TOOLTIP_DEFAULT_PROPS = { className: '', } diff --git a/src/components/typography-control/index.js b/src/components/typography-control/index.js index 7fb941b59d..30724d9c37 100644 --- a/src/components/typography-control/index.js +++ b/src/components/typography-control/index.js @@ -10,6 +10,7 @@ import { WhenResponsiveScreen, } from '~stackable/components' import { getDefaultFontSize } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' /** * WordPress dependencies @@ -18,7 +19,8 @@ import { __ } from '@wordpress/i18n' import { Fragment, useMemo } from '@wordpress/element' import { i18n } from 'stackable' -const TypographyControl = props => { +const TypographyControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, TYPOGRAPHY_CONTROL_DEFAULT_PROPS ) const { isAllowReset = undefined, // Optional prop } = props @@ -348,7 +350,7 @@ const TypographyControl = props => { ) } -TypographyControl.defaultProps = { +const TYPOGRAPHY_CONTROL_DEFAULT_PROPS = { label: __( 'Typography', i18n ), popoverLabel: undefined, showSecondFontSize: true, diff --git a/src/components/url-input-control/index.js b/src/components/url-input-control/index.js index 396cb3f4c6..f26423ece3 100644 --- a/src/components/url-input-control/index.js +++ b/src/components/url-input-control/index.js @@ -14,8 +14,10 @@ import { __ } from '@wordpress/i18n' import { i18n } from 'stackable' import { omit } from 'lodash' import { URLInput } from '@wordpress/block-editor' +import { getPropsWithDefaults } from '../../util/props' -const URLInputControl = props => { +const URLInputControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, URLINPUT_CONTROL_DEFAULT_PROPS ) return ( { ) } -URLInputControl.defaultProps = { +const URLINPUT_CONTROL_DEFAULT_PROPS = { label: __( 'URL', i18n ), help: null, value: '', diff --git a/src/components/url-input-popover/index.js b/src/components/url-input-popover/index.js index 4db95173ea..97cc73ba6b 100644 --- a/src/components/url-input-popover/index.js +++ b/src/components/url-input-popover/index.js @@ -19,6 +19,7 @@ import classnames from 'classnames' import { omit, omitBy, keys, } from 'lodash' +import { getPropsWithDefaults } from '../../util/props' const urlLabels = [ { @@ -39,7 +40,8 @@ const urlLabels = [ }, ] -const UrlInputPopover = props => { +const UrlInputPopover = incomingProps => { + const props = getPropsWithDefaults( incomingProps, URL_INPUT_POPOVER_DEFAULT_PROPS ) const { value, newTab, @@ -119,7 +121,7 @@ const UrlInputPopover = props => { ) } -UrlInputPopover.defaultProps = { +const URL_INPUT_POPOVER_DEFAULT_PROPS = { value: '', disableSuggestions: false, onChange: null, diff --git a/src/components/when-responsive-screen/index.js b/src/components/when-responsive-screen/index.js index 59a00511ff..e5d3e9dbc4 100644 --- a/src/components/when-responsive-screen/index.js +++ b/src/components/when-responsive-screen/index.js @@ -9,8 +9,10 @@ import { useDeviceType } from '~stackable/hooks' import { Children, cloneElement, Fragment, } from '@wordpress/element' +import { getPropsWithDefaults } from '../../util/props' -const WhenResponsiveScreen = props => { +const WhenResponsiveScreen = incomingProps => { + const props = getPropsWithDefaults( incomingProps, WHEN_RESPONSIVE_SCREEN_DEFAULT_PROPS ) const deviceType = useDeviceType() const children = Children.toArray( props.children ).map( child => { @@ -35,7 +37,7 @@ const WhenResponsiveScreen = props => { ) } -WhenResponsiveScreen.defaultProps = { +const WHEN_RESPONSIVE_SCREEN_DEFAULT_PROPS = { screen: 'desktop', screens: [ 'desktop', 'tablet', 'mobile' ], } diff --git a/src/deprecated/v2/components/background-controls-helper/index.js b/src/deprecated/v2/components/background-controls-helper/index.js index d78a0f0b95..5babe13b3e 100644 --- a/src/deprecated/v2/components/background-controls-helper/index.js +++ b/src/deprecated/v2/components/background-controls-helper/index.js @@ -8,8 +8,10 @@ import { camelCase } from 'lodash' * WordPress dependenciess */ import { sprintf } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../../../util/props' -const BackgroundControlsHelper = props => { +const BackgroundControlsHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BACKGROUND_CONTROLS_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getAttrValue = ( attrName, defaultValue = '' ) => { @@ -138,7 +140,7 @@ const BackgroundControlsHelper = props => { ) } -BackgroundControlsHelper.defaultProps = { +const BACKGROUND_CONTROLS_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/background-controls/index.js b/src/deprecated/v2/components/background-controls/index.js index 37bfc433f0..1e8fe15a7a 100644 --- a/src/deprecated/v2/components/background-controls/index.js +++ b/src/deprecated/v2/components/background-controls/index.js @@ -14,6 +14,7 @@ import { ControlSeparator, } from '~stackable/components' import { urlIsVideo } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' /** * WordPress dependencies @@ -25,7 +26,8 @@ import { import { Fragment } from '@wordpress/element' import { i18n } from 'stackable' -const BackgroundControls = props => { +const BackgroundControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BACKGROUND_CONTROLS_DEFAULT_PROPS ) const isBackgroundVideo = () => { return [ props.backgroundMediaURL, props.tabletBackgroundMediaURL, props.mobileBackgroundMediaURL ] .filter( value => value ) @@ -71,19 +73,19 @@ const BackgroundControls = props => { /> ) } { props.onChangeBackgroundColorOpacity && props.backgroundColorType !== 'gradient' && - ( ! props.backgroundMediaURL && ! props.tabletBackgroundMediaURL && ! props.mobileBackgroundMediaURL ) && ( + ( ! props.backgroundMediaURL && ! props.tabletBackgroundMediaURL && ! props.mobileBackgroundMediaURL ) && - ) } + label={ __( 'Background Color Opacity', i18n ) } + value={ props.backgroundColorOpacity } + onChange={ props.onChangeBackgroundColorOpacity } + min={ 0 } + max={ 1 } + step={ 0.1 } + allowReset={ true } + placeholder="1.0" + className="ugb--help-tip-background-color-opacity" + /> + } { props.onChangeBackgroundColor2 && props.backgroundColorType === 'gradient' && ( { ) } { props.onChangeBackgroundTintStrength && props.onChangeBackgroundMedia && - ( props.backgroundMediaURL || props.tabletBackgroundMediaURL || props.mobileBackgroundMediaURL ) && ( - { - const noValue = typeof value === 'undefined' || value === '' - // If the tint is changed, but on background color yet, make it black. Fixes #136. - if ( props.backgroundColor === '' && ! noValue ) { - props.onChangeBackgroundTintStrength( value, '#000000' ) - // If the tint is reset, and the background is black (was set earlier), remove it. - } else if ( props.backgroundColor === '#000000' && noValue ) { - props.onChangeBackgroundTintStrength( value, '' ) - } else { - props.onChangeBackgroundTintStrength( value, props.backgroundColor ) - } - } } + const noValue = typeof value === 'undefined' || value === '' + // If the tint is changed, but on background color yet, make it black. Fixes #136. + if ( props.backgroundColor === '' && ! noValue ) { + props.onChangeBackgroundTintStrength( value, '#000000' ) + // If the tint is reset, and the background is black (was set earlier), remove it. + } else if ( props.backgroundColor === '#000000' && noValue ) { + props.onChangeBackgroundTintStrength( value, '' ) + } else { + props.onChangeBackgroundTintStrength( value, props.backgroundColor ) + } + } } min={ 0 } max={ 10 } step={ 1 } allowReset={ true } placeholder={ props.backgroundColor ? '5' : '0' } className="ugb--help-tip-background-tint" - /> - ) } + /> + } { props.onChangeFixedBackground && props.onChangeBackgroundMedia && ( props.backgroundMediaURL || props.tabletBackgroundMediaURL || props.mobileBackgroundMediaURL ) && - ! isBackgroundVideo() && ( - - ) } + /> + } { props.hasAdvancedBackground && props.onChangeBackgroundMedia && ( props.backgroundMediaURL || props.tabletBackgroundMediaURL || props.mobileBackgroundMediaURL ) && @@ -461,7 +463,7 @@ const BackgroundControls = props => { ) } -BackgroundControls.defaultProps = { +const BACKGROUND_CONTROLS_DEFAULT_PROPS = { backgroundColorType: '', backgroundColor: '', backgroundColorOpacity: '', diff --git a/src/deprecated/v2/components/button-controls-helper/index.js b/src/deprecated/v2/components/button-controls-helper/index.js index 0c3f6c0d63..9a29ef1627 100644 --- a/src/deprecated/v2/components/button-controls-helper/index.js +++ b/src/deprecated/v2/components/button-controls-helper/index.js @@ -3,6 +3,7 @@ */ import { ButtonControls } from '..' import { __getValue } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { camelCase } from 'lodash' import { i18n } from 'stackable' @@ -11,7 +12,8 @@ import { i18n } from 'stackable' */ import { sprintf, __ } from '@wordpress/i18n' -const ButtonControlsHelper = props => { +const ButtonControlsHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BUTTON_CONTROLS_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getValue = __getValue( props.blockAttributes, getAttrName, '' ) @@ -122,7 +124,7 @@ const ButtonControlsHelper = props => { ) } -ButtonControlsHelper.defaultProps = { +const BUTTON_CONTROLS_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/button-controls/index.js b/src/deprecated/v2/components/button-controls/index.js index 2f7608c559..b34ab16770 100644 --- a/src/deprecated/v2/components/button-controls/index.js +++ b/src/deprecated/v2/components/button-controls/index.js @@ -34,8 +34,10 @@ import { import { applyFilters } from '@wordpress/hooks' import { Fragment } from '@wordpress/element' import { i18n } from 'stackable' +import { getPropsWithDefaults } from '../../../../util/props' -const ButtonControls = props => { +const ButtonControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BUTTON_CONTROLS_DEFAULT_PROPS ) const design = props.design ? props.design : 'basic' const size = props.size ? props.size : 'normal' @@ -476,7 +478,7 @@ const ButtonControls = props => { ) } -ButtonControls.defaultProps = { +const BUTTON_CONTROLS_DEFAULT_PROPS = { // Used for typography. hasTypography: true, attrNameTemplate: '%s', diff --git a/src/deprecated/v2/components/button-edit/helper.js b/src/deprecated/v2/components/button-edit/helper.js index 92d99cd0d6..d237b2d0b8 100644 --- a/src/deprecated/v2/components/button-edit/helper.js +++ b/src/deprecated/v2/components/button-edit/helper.js @@ -12,8 +12,10 @@ import { sprintf } from '@wordpress/i18n' * External dependencies */ import { camelCase } from 'lodash' +import { getPropsWithDefaults } from '../../../../util/props' -const ButtonEditHelper = props => { +const ButtonEditHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BUTTON_EDIT_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getAttrValue = ( attrName, defaultValue = '' ) => { @@ -52,14 +54,15 @@ const ButtonEditHelper = props => { ) } -ButtonEditHelper.defaultProps = { +const BUTTON_EDIT_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, designDefault: 'basic', } -ButtonEditHelper.Content = props => { +ButtonEditHelper.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BUTTON_EDIT_HELPER_CONTENT_DEFAULT_PROPS ) const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getAttrValue = ( attrName, defaultValue = '' ) => { const value = props.blockAttributes[ getAttrName( attrName ) ] @@ -86,7 +89,7 @@ ButtonEditHelper.Content = props => { ) } -ButtonEditHelper.Content.defaultProps = { +const BUTTON_EDIT_HELPER_CONTENT_DEFAULT_PROPS = { attrNameTemplate: '%s', blockAttributes: {}, designDefault: 'basic', diff --git a/src/deprecated/v2/components/column-padding-control/index.js b/src/deprecated/v2/components/column-padding-control/index.js index c9fd624f00..028e50faf1 100644 --- a/src/deprecated/v2/components/column-padding-control/index.js +++ b/src/deprecated/v2/components/column-padding-control/index.js @@ -9,8 +9,10 @@ import { i18n } from 'stackable' */ import { __ } from '@wordpress/i18n' import { Fragment } from '@wordpress/element' +import { getPropsWithDefaults } from '../../../../util/props' -const ColumnPaddingControl = props => { +const ColumnPaddingControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMN_PADDING_CONTROL_DEFAULT_PROPS ) const { label, setAttributes, @@ -108,7 +110,7 @@ const ColumnPaddingControl = props => { } -ColumnPaddingControl.defaultProps = { +const COLUMN_PADDING_CONTROL_DEFAULT_PROPS = { setAttributes: () => {}, label: __( 'Column Paddings', i18n ), attributes: {}, diff --git a/src/deprecated/v2/components/columns-width-control/column-slider.js b/src/deprecated/v2/components/columns-width-control/column-slider.js index b06d52825f..5fa0878c86 100644 --- a/src/deprecated/v2/components/columns-width-control/column-slider.js +++ b/src/deprecated/v2/components/columns-width-control/column-slider.js @@ -4,6 +4,7 @@ import { import { SliderRail, Handle } from './slider-components' import { isEqual } from 'lodash' import { fixColumnWidths } from './util' +import { getPropsWithDefaults } from '../../../../util/props' const sliderStyle = { position: 'relative', @@ -71,7 +72,8 @@ const fixValues = ( values, changedIndex, direction ) => { return convertColumnsToValues( fixedColumns ) } -const ColumnSlider = props => { +const ColumnSlider = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMN_SLIDER_DEFAULT_PROPS ) return ( { ) } -ColumnSlider.defaultProps = { +const COLUMN_SLIDER_DEFAULT_PROPS = { onChange: () => {}, value: [], } diff --git a/src/deprecated/v2/components/columns-width-control/columns-inputs.js b/src/deprecated/v2/components/columns-width-control/columns-inputs.js index 3e87715fd5..81de6a5d04 100644 --- a/src/deprecated/v2/components/columns-width-control/columns-inputs.js +++ b/src/deprecated/v2/components/columns-width-control/columns-inputs.js @@ -1,4 +1,5 @@ import { fixColumnWidths, columnWidthSum } from './util' +import { getPropsWithDefaults } from '../../../../util/props' const gridTemplateColumns = columns => { return columns.map( column => { @@ -8,7 +9,8 @@ const gridTemplateColumns = columns => { const isBlank = columns => columns.every( column => ! column ) -const ColumnsInputs = props => { +const ColumnsInputs = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMNS_INPUTS_DEFAULT_PROPS ) const style = { gridTemplateColumns: gridTemplateColumns( props.value ), gridAutoFlow: isBlank( props.value ) ? 'column' : undefined, @@ -56,7 +58,7 @@ const ColumnsInputs = props => { ) } -ColumnsInputs.defaultProps = { +const COLUMNS_INPUTS_DEFAULT_PROPS = { onChange: () => {}, value: [], } diff --git a/src/deprecated/v2/components/columns-width-control/index.js b/src/deprecated/v2/components/columns-width-control/index.js index 535a977371..d64b945740 100644 --- a/src/deprecated/v2/components/columns-width-control/index.js +++ b/src/deprecated/v2/components/columns-width-control/index.js @@ -55,6 +55,7 @@ import { BaseControlMultiLabel, DesignControl, } from '~stackable/components' +import { getPropsWithDefaults } from '../../../../util/props' const MIN = 10 @@ -181,7 +182,8 @@ const adjustColumns = ( newColumnWidth, column, columnWidths, adjustRightFirst = const isBlank = columns => columns.every( column => ! column ) -const ColumnsWidthControl = props => { +const ColumnsWidthControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLUMNS_WIDTH_CONTROL_DEFAULT_PROPS ) const [ lastColumnAdjusted, setLastColumnAdjusted ] = useState( -1 ) const [ adjustRightFirst, setAdjustRightFirst ] = useState( true ) const [ selectedPreset, setSelectedPreset ] = useState( '' ) @@ -287,7 +289,7 @@ const ColumnsWidthControl = props => { ) } -ColumnsWidthControl.defaultProps = { +const COLUMNS_WIDTH_CONTROL_DEFAULT_PROPS = { columns: 2, design: 'plain', values: [ '', '' ], diff --git a/src/deprecated/v2/components/content-align-control/index.js b/src/deprecated/v2/components/content-align-control/index.js index 0729bdf611..27823035ba 100644 --- a/src/deprecated/v2/components/content-align-control/index.js +++ b/src/deprecated/v2/components/content-align-control/index.js @@ -10,8 +10,10 @@ import ResponsiveControl from '../responsive-control' import { __ } from '@wordpress/i18n' import { i18n } from 'stackable' import classnames from 'classnames' +import { getPropsWithDefaults } from '../../../../util/props' -const ContentAlignControl = props => { +const ContentAlignControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, CONTENT_ALIGN_CONTROL_DEFAULT_PROPS ) return ( { ) } -ContentAlignControl.defaultProps = { +const CONTENT_ALIGN_CONTROL_DEFAULT_PROPS = { className: '', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/design-library-control/index.js b/src/deprecated/v2/components/design-library-control/index.js index cb636cb38b..360d0262f1 100644 --- a/src/deprecated/v2/components/design-library-control/index.js +++ b/src/deprecated/v2/components/design-library-control/index.js @@ -20,8 +20,10 @@ import { isPro, i18n } from 'stackable' import { TextControl } from '@wordpress/components' import { useEffect, useState } from '@wordpress/element' import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../../../util/props' -const DesignLibraryControl = props => { +const DesignLibraryControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DESIGN_LIBRARY_CONTROL_DEFAULT_PROPS ) const [ isLibraryOpen, setIsLibraryOpen ] = useState( false ) const [ search, setSearch ] = useState( '' ) const [ designs, setDesigns ] = useState( [] ) @@ -108,7 +110,7 @@ const DesignLibraryControl = props => { ) } -DesignLibraryControl.defaultProps = { +const DESIGN_LIBRARY_CONTROL_DEFAULT_PROPS = { block: '', onSelect: () => {}, } diff --git a/src/deprecated/v2/components/div-background/index.js b/src/deprecated/v2/components/div-background/index.js index b4f17bb897..e2cc1ad522 100644 --- a/src/deprecated/v2/components/div-background/index.js +++ b/src/deprecated/v2/components/div-background/index.js @@ -12,8 +12,10 @@ import { omit } from 'lodash' * WordPress dependencies */ import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../../../util/props' -const DivBackground = props => { +const DivBackground = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DIV_BACKGROUND_DEFAULT_PROPS ) const { blockTag: BlockTag, className, @@ -38,7 +40,7 @@ const DivBackground = props => { ) } -DivBackground.defaultProps = { +const DIV_BACKGROUND_DEFAULT_PROPS = { className: '', backgroundAttrName: '%s', blockProps: {}, diff --git a/src/deprecated/v2/components/font-awesome-icon/index.js b/src/deprecated/v2/components/font-awesome-icon/index.js index c4403d6593..4145f40ba7 100644 --- a/src/deprecated/v2/components/font-awesome-icon/index.js +++ b/src/deprecated/v2/components/font-awesome-icon/index.js @@ -3,6 +3,7 @@ import { faFetchIcon, faGetIcon, } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { RawHTML, useState } from '@wordpress/element' import { pick } from 'lodash' @@ -11,7 +12,8 @@ const Spinner = () => { return } -const FontAwesomeIcon = props => { +const FontAwesomeIcon = incomingProps => { + const props = getPropsWithDefaults( incomingProps, FONT_AWESOME_ICON_DEFAULT_PROPS ) const [ forceUpdateCount, setForceUpdateCount ] = useState( 0 ) const forceUpdate = () => { setForceUpdateCount( forceUpdateCount + 1 ) @@ -69,7 +71,7 @@ FontAwesomeIcon.Content = props => { return { iconHTML } } -FontAwesomeIcon.defaultProps = { +const FONT_AWESOME_ICON_DEFAULT_PROPS = { prefix: '', iconName: '', value: '', // This is the old-style of prefix + iconName e.g. 'fab-apple' diff --git a/src/deprecated/v2/components/icon-controls-helper/index.js b/src/deprecated/v2/components/icon-controls-helper/index.js index 16cbafefad..fb499c44a0 100644 --- a/src/deprecated/v2/components/icon-controls-helper/index.js +++ b/src/deprecated/v2/components/icon-controls-helper/index.js @@ -3,6 +3,7 @@ */ import { IconControls } from '..' import { __getValue } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { camelCase } from 'lodash' /** @@ -10,7 +11,8 @@ import { camelCase } from 'lodash' */ import { sprintf } from '@wordpress/i18n' -const IconControlsHelper = props => { +const IconControlsHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ICON_CONTROLS_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getValue = __getValue( props.blockAttributes, getAttrName, '' ) @@ -119,7 +121,7 @@ const IconControlsHelper = props => { ) } -IconControlsHelper.defaultProps = { +const ICON_CONTROLS_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/icon-controls/index.js b/src/deprecated/v2/components/icon-controls/index.js index 7f272df47d..26a37b77ca 100644 --- a/src/deprecated/v2/components/icon-controls/index.js +++ b/src/deprecated/v2/components/icon-controls/index.js @@ -27,8 +27,10 @@ import { __ } from '@wordpress/i18n' import { applyFilters } from '@wordpress/hooks' import { Fragment } from '@wordpress/element' import { BaseControl } from '@wordpress/components' +import { getPropsWithDefaults } from '../../../../util/props' -const IconControls = props => { +const IconControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, ICON_CONTROLS_DEFAULT_PROPS ) const design = props.design ? props.design : 'basic' const showBackground = design === 'shaped' || design === 'outlined' @@ -282,7 +284,7 @@ const IconControls = props => { ) } -IconControls.defaultProps = { +const ICON_CONTROLS_DEFAULT_PROPS = { icon: '', onChangeIcon: () => {}, design: '', diff --git a/src/deprecated/v2/components/image-background-controls-helper/index.js b/src/deprecated/v2/components/image-background-controls-helper/index.js index a2217f1f99..d5a1dda4d3 100644 --- a/src/deprecated/v2/components/image-background-controls-helper/index.js +++ b/src/deprecated/v2/components/image-background-controls-helper/index.js @@ -3,6 +3,7 @@ */ import { ImageBackgroundControls } from '..' import { __getValue } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { camelCase } from 'lodash' /** @@ -10,7 +11,8 @@ import { camelCase } from 'lodash' */ import { sprintf } from '@wordpress/i18n' -const ImageBackgroundControlsHelper = props => { +const ImageBackgroundControlsHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_BACKGROUND_CONTROLS_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getValue = __getValue( props.blockAttributes, getAttrName, '' ) @@ -54,7 +56,7 @@ const ImageBackgroundControlsHelper = props => { ) } -ImageBackgroundControlsHelper.defaultProps = { +const IMAGE_BACKGROUND_CONTROLS_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/image-background-controls/index.js b/src/deprecated/v2/components/image-background-controls/index.js index a7972d2939..1c3faf6332 100644 --- a/src/deprecated/v2/components/image-background-controls/index.js +++ b/src/deprecated/v2/components/image-background-controls/index.js @@ -8,6 +8,7 @@ import { ImageSizeControl, } from '~stackable/components' import { cacheImageData, getImageUrlFromCache } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { i18n } from 'stackable' /** @@ -18,7 +19,8 @@ import { Fragment } from '@wordpress/element' import { compose } from '@wordpress/compose' import { withSelect } from '@wordpress/data' -const ImageBackgroundControls = props => { +const ImageBackgroundControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_BACKGROUND_CONTROLS_DEFAULT_PROPS ) return ( { props.onChangeImage && @@ -131,7 +133,7 @@ const ImageBackgroundControls = props => { ) } -ImageBackgroundControls.defaultProps = { +const IMAGE_BACKGROUND_CONTROLS_DEFAULT_PROPS = { id: '', url: '', onChangeImage: ( { url, id } ) => {}, // eslint-disable-line diff --git a/src/deprecated/v2/components/image-controls-helper/index.js b/src/deprecated/v2/components/image-controls-helper/index.js index 0cbfa0b8f0..b0481ade94 100644 --- a/src/deprecated/v2/components/image-controls-helper/index.js +++ b/src/deprecated/v2/components/image-controls-helper/index.js @@ -3,6 +3,7 @@ */ import { ImageControls } from '..' import { __getValue } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { camelCase } from 'lodash' /** @@ -10,7 +11,8 @@ import { camelCase } from 'lodash' */ import { sprintf } from '@wordpress/i18n' -const ImageControlsHelper = props => { +const ImageControlsHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_CONTROLS_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getValue = __getValue( props.blockAttributes, getAttrName, '' ) @@ -98,7 +100,7 @@ const ImageControlsHelper = props => { ) } -ImageControlsHelper.defaultProps = { +const IMAGE_CONTROLS_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/image-controls/index.js b/src/deprecated/v2/components/image-controls/index.js index 12f799f820..c49cb14fc0 100644 --- a/src/deprecated/v2/components/image-controls/index.js +++ b/src/deprecated/v2/components/image-controls/index.js @@ -14,6 +14,7 @@ import { import { ImageShapeControls } from '..' import { i18n } from 'stackable' import { getImageSize, cacheImageData } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' /** * WordPress dependencies @@ -23,7 +24,8 @@ import { Fragment } from '@wordpress/element' import { compose } from '@wordpress/compose' import { withSelect } from '@wordpress/data' -const ImageControls = props => { +const ImageControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_CONTROLS_DEFAULT_PROPS ) // Find the maximum width for the width setting. const imageSizeData = getImageSize( props.imageData, props.size || 'full' ) let widthMax = props.widthMax || 1000 @@ -265,7 +267,7 @@ const ImageControls = props => { ) } -ImageControls.defaultProps = { +const IMAGE_CONTROLS_DEFAULT_PROPS = { id: '', url: '', onChangeImage: ( { url, id, width, height } ) => {}, // eslint-disable-line diff --git a/src/deprecated/v2/components/image-shape-controls/index.js b/src/deprecated/v2/components/image-shape-controls/index.js index 1ae90f1a2e..1d79993f18 100644 --- a/src/deprecated/v2/components/image-shape-controls/index.js +++ b/src/deprecated/v2/components/image-shape-controls/index.js @@ -12,8 +12,10 @@ import { i18n } from 'stackable' import { compose } from '@wordpress/compose' import { withSelect } from '@wordpress/data' import { getImageSize } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' -const ImageShapeControls = props => { +const ImageShapeControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_SHAPE_CONTROLS_DEFAULT_PROPS ) const imageSizeData = props.imageData ? getImageSize( props.imageData, props.imageSize || 'full' ) : null const isSquareImage = props.isSquareImage !== null ? props.isSquareImage : imageSizeData ? imageSizeData.width === imageSizeData.height : false @@ -55,7 +57,7 @@ const ImageShapeControls = props => { ) } -ImageShapeControls.defaultProps = { +const IMAGE_SHAPE_CONTROLS_DEFAULT_PROPS = { // For detecting whether the image is square. imageId: '', imageSize: 'full', diff --git a/src/deprecated/v2/components/image/index.js b/src/deprecated/v2/components/image/index.js index 2ff95f2fe2..049eb6e480 100644 --- a/src/deprecated/v2/components/image/index.js +++ b/src/deprecated/v2/components/image/index.js @@ -3,8 +3,10 @@ */ import classnames from 'classnames' import striptags from 'striptags' +import { getPropsWithDefaults } from '../../../../util/props' -const Image = props => { +const Image = incomingProps => { + const props = getPropsWithDefaults( incomingProps, IMAGE_DEFAULT_PROPS ) const imageClasses = classnames( [ props.className, 'ugb-img', @@ -34,7 +36,7 @@ const Image = props => { ) } -Image.defaultProps = { +const IMAGE_DEFAULT_PROPS = { imageId: '', alt: '', diff --git a/src/deprecated/v2/components/modal-design-library/block-list.js b/src/deprecated/v2/components/modal-design-library/block-list.js index fb30767d59..1eeba2a960 100644 --- a/src/deprecated/v2/components/modal-design-library/block-list.js +++ b/src/deprecated/v2/components/modal-design-library/block-list.js @@ -18,8 +18,10 @@ import { } from '@wordpress/element' import { select } from '@wordpress/data' import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../../../util/props' -const BlockList = props => { +const BlockList = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_LIST_DEFAULT_PROPS ) const [ blockDesignList, setBlockDesignList ] = useState( [] ) const [ uiKitList, setUiKitList ] = useState( {} ) const [ blockList, setBlockList ] = useState( {} ) @@ -337,7 +339,7 @@ const BlockList = props => { ) } -BlockList.defaultProps = { +const BLOCK_LIST_DEFAULT_PROPS = { search: '', mood: '', colors: [], diff --git a/src/deprecated/v2/components/modal-design-library/color-list.js b/src/deprecated/v2/components/modal-design-library/color-list.js index 5994bb0536..deefdc87f8 100644 --- a/src/deprecated/v2/components/modal-design-library/color-list.js +++ b/src/deprecated/v2/components/modal-design-library/color-list.js @@ -1,5 +1,6 @@ import { useState } from '@wordpress/element' import { BaseControl, ColorPalette } from '@wordpress/components' +import { getPropsWithDefaults } from '../../../../util/props' const COLORS = { red: { @@ -48,7 +49,8 @@ const COLORS = { }, } -const ColorList = props => { +const ColorList = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLOR_LIST_DEFAULT_PROPS ) const [ selectedColors, setSelectedColors ] = useState( [] ) return ( @@ -79,7 +81,7 @@ const ColorList = props => { ) } -ColorList.defaultProps = { +const COLOR_LIST_DEFAULT_PROPS = { onSelect: () => {}, colors: COLORS, } diff --git a/src/deprecated/v2/components/modal-design-library/index.js b/src/deprecated/v2/components/modal-design-library/index.js index d50cc180a0..e7ebbe47dc 100644 --- a/src/deprecated/v2/components/modal-design-library/index.js +++ b/src/deprecated/v2/components/modal-design-library/index.js @@ -17,6 +17,7 @@ import { i18n, isPro, devMode, } from 'stackable' import { useLocalStorage } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { last } from 'lodash' /** @@ -30,7 +31,8 @@ import { } from '@wordpress/element' import { __ } from '@wordpress/i18n' -const ModalDesignLibrary = props => { +const ModalDesignLibrary = incomingProps => { + const props = getPropsWithDefaults( incomingProps, MODAL_DESIGN_LIBRARY_DEFAULT_PROPS ) const [ search, setSearch ] = useState( props.search ) const [ block, setBlock ] = useState() const [ plan, setPlan ] = useState( '' ) @@ -230,7 +232,7 @@ const ModalDesignLibrary = props => { ) } -ModalDesignLibrary.defaultProps = { +const MODAL_DESIGN_LIBRARY_DEFAULT_PROPS = { search: '', selectedBlock: '', onClose: () => {}, diff --git a/src/deprecated/v2/components/panel-spacing-body/index.js b/src/deprecated/v2/components/panel-spacing-body/index.js index e8242523b9..b0efb8957f 100644 --- a/src/deprecated/v2/components/panel-spacing-body/index.js +++ b/src/deprecated/v2/components/panel-spacing-body/index.js @@ -10,8 +10,10 @@ import { applyFilters } from '@wordpress/hooks' import { i18n } from 'stackable' import classnames from 'classnames' import { PanelAdvancedSettings } from '~stackable/components' +import { getPropsWithDefaults } from '../../../../util/props' -const PanelSpacingBody = props => { +const PanelSpacingBody = incomingProps => { + const props = getPropsWithDefaults( incomingProps, PANEL_SPACING_BODY_DEFAULT_PROPS ) const { blockProps } = props return ( { ) } -PanelSpacingBody.defaultProps = { +const PANEL_SPACING_BODY_DEFAULT_PROPS = { className: '', blockProps: {}, } diff --git a/src/deprecated/v2/components/responsive-control/index.js b/src/deprecated/v2/components/responsive-control/index.js index b7d0c82473..34b533325a 100644 --- a/src/deprecated/v2/components/responsive-control/index.js +++ b/src/deprecated/v2/components/responsive-control/index.js @@ -3,6 +3,7 @@ */ import { WhenResponsiveScreen } from '~stackable/components' import { __getValue } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' /** * WordPress dependencies @@ -13,7 +14,8 @@ import { import { camelCase } from 'lodash' import { sprintf } from '@wordpress/i18n' -const ResponsiveControl = props => { +const ResponsiveControl = incomingProps => { + const props = getPropsWithDefaults( incomingProps, RESPONSIVE_CONTROL_DEFAULT_PROPS ) const getAttrName = ( attrName = '' ) => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getValue = __getValue( props.blockAttributes, getAttrName, '' ) @@ -75,7 +77,7 @@ const ResponsiveControl = props => { ) } -ResponsiveControl.defaultProps = { +const RESPONSIVE_CONTROL_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/social-button-edit/helper.js b/src/deprecated/v2/components/social-button-edit/helper.js index 62e59c5aa1..c90f42e03e 100644 --- a/src/deprecated/v2/components/social-button-edit/helper.js +++ b/src/deprecated/v2/components/social-button-edit/helper.js @@ -8,9 +8,11 @@ import { sprintf } from '@wordpress/i18n' */ import { camelCase, upperFirst } from 'lodash' import { SOCIAL_SITES } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import SocialButtonEdit from './' -const SocialButtonEditHelper = props => { +const SocialButtonEditHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SOCIAL_BUTTON_EDIT_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getAttrValue = ( attrName, defaultValue = '' ) => { @@ -44,14 +46,15 @@ const SocialButtonEditHelper = props => { ) } -SocialButtonEditHelper.defaultProps = { +const SOCIAL_BUTTON_EDIT_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, designDefault: 'basic', } -SocialButtonEditHelper.Content = props => { +SocialButtonEditHelper.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SOCIAL_BUTTON_EDIT_HELPER_CONTENT_DEFAULT_PROPS ) const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getAttrValue = ( attrName, defaultValue = '' ) => { const value = props.blockAttributes[ getAttrName( attrName ) ] @@ -81,7 +84,7 @@ SocialButtonEditHelper.Content = props => { ) } -SocialButtonEditHelper.Content.defaultProps = { +const SOCIAL_BUTTON_EDIT_HELPER_CONTENT_DEFAULT_PROPS = { attrNameTemplate: '%s', blockAttributes: {}, designDefault: 'basic', diff --git a/src/deprecated/v2/components/social-button-edit/index.js b/src/deprecated/v2/components/social-button-edit/index.js index 347f84a93d..0f945a064c 100644 --- a/src/deprecated/v2/components/social-button-edit/index.js +++ b/src/deprecated/v2/components/social-button-edit/index.js @@ -3,6 +3,7 @@ */ import { ButtonEdit } from '../' import { SOCIAL_SITES } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { upperFirst } from 'lodash' import classnames from 'classnames' @@ -12,7 +13,8 @@ import classnames from 'classnames' import { Fragment } from '@wordpress/element' export { default as SocialButtonEditHelper } from './helper' -const SocialButtonEdit = props => { +const SocialButtonEdit = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SOCIAL_BUTTON_EDIT_DEFAULT_PROPS ) return ( { Object.keys( SOCIAL_SITES ).map( socialId => { @@ -62,12 +64,13 @@ const socialDefaultProps = Object.keys( SOCIAL_SITES ).reduce( ( socialUrlProps, } }, {} ) -SocialButtonEdit.defaultProps = { +const SOCIAL_BUTTON_EDIT_DEFAULT_PROPS = { useSocialColors: true, ...socialDefaultProps, } -SocialButtonEdit.Content = props => { +SocialButtonEdit.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SOCIAL_BUTTON_EDIT_CONTENT_DEFAULT_PROPS ) return ( { Object.keys( SOCIAL_SITES ).map( socialId => { @@ -104,7 +107,7 @@ const socialContentDefaultProps = Object.keys( SOCIAL_SITES ).reduce( ( socialUr } }, {} ) -SocialButtonEdit.Content.defaultProps = { +const SOCIAL_BUTTON_EDIT_CONTENT_DEFAULT_PROPS = { useSocialColors: true, ...socialContentDefaultProps, } diff --git a/src/deprecated/v2/components/social-controls-helper/index.js b/src/deprecated/v2/components/social-controls-helper/index.js index e35b69c24e..150e00674f 100644 --- a/src/deprecated/v2/components/social-controls-helper/index.js +++ b/src/deprecated/v2/components/social-controls-helper/index.js @@ -8,8 +8,10 @@ import { camelCase } from 'lodash' * WordPress dependencies */ import { sprintf } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../../../util/props' -const SocialControlsHelper = props => { +const SocialControlsHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SOCIAL_CONTROLS_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) @@ -25,7 +27,7 @@ const SocialControlsHelper = props => { ) } -SocialControlsHelper.defaultProps = { +const SOCIAL_CONTROLS_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/social-controls/index.js b/src/deprecated/v2/components/social-controls/index.js index f054b46091..3d1bdbe182 100644 --- a/src/deprecated/v2/components/social-controls/index.js +++ b/src/deprecated/v2/components/social-controls/index.js @@ -7,6 +7,7 @@ import { } from '~stackable/components' import { ButtonControlsHelper } from '..' import { SOCIAL_SITES } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { upperFirst } from 'lodash' import { i18n } from 'stackable' @@ -19,7 +20,8 @@ import { } from '@wordpress/i18n' import { Fragment } from '@wordpress/element' -const SocialControls = props => { +const SocialControls = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SOCIAL_CONTROLS_DEFAULT_PROPS ) return ( { props.socialUrlFields && @@ -63,7 +65,7 @@ const SocialControls = props => { ) } -SocialControls.defaultProps = { +const SOCIAL_CONTROLS_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/components/svg-icon-helper/index.js b/src/deprecated/v2/components/svg-icon-helper/index.js index e17196b680..4e7c2f5ad5 100644 --- a/src/deprecated/v2/components/svg-icon-helper/index.js +++ b/src/deprecated/v2/components/svg-icon-helper/index.js @@ -2,6 +2,7 @@ * External dependencies */ import { __getValue } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { camelCase } from 'lodash' /** @@ -14,7 +15,8 @@ import { sprintf } from '@wordpress/i18n' */ import SvgIcon from '../svg-icon' -const SvgIconHelper = props => { +const SvgIconHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SVG_ICON_HELPER_DEFAULT_PROPS ) const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getValue = __getValue( props.blockAttributes, getAttrName, '' ) @@ -35,11 +37,6 @@ const SvgIconHelper = props => { ) } -SvgIconHelper.defaultProps = { - attrNameTemplate: '%s', - blockAttributes: {}, -} - SvgIconHelper.Content = props => { const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) const getValue = __getValue( props.blockAttributes, getAttrName, '' ) @@ -61,7 +58,7 @@ SvgIconHelper.Content = props => { ) } -SvgIconHelper.defaultProps = { +const SVG_ICON_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', blockAttributes: {}, } diff --git a/src/deprecated/v2/components/svg-icon-placeholder/index.js b/src/deprecated/v2/components/svg-icon-placeholder/index.js index 461dfd3e76..c1ab71c31b 100644 --- a/src/deprecated/v2/components/svg-icon-placeholder/index.js +++ b/src/deprecated/v2/components/svg-icon-placeholder/index.js @@ -13,8 +13,10 @@ import { Button, IconSearchPopover } from '~stackable/components' * Internal dependencies */ import SvgIconHelper from '../svg-icon-helper' +import { getPropsWithDefaults } from '../../../../util/props' -const SvgIconPlaceholder = withInstanceId( ( props => { +const SvgIconPlaceholder = withInstanceId( ( incomingProps => { + const props = getPropsWithDefaults( incomingProps, SVG_ICON_PLACEHOLDER_DEFAULT_PROPS ) const [ openPopover, setOpenPopover ] = useState( false ) const [ clickedOnButton, setClickedOnButton ] = useState( false ) @@ -70,7 +72,7 @@ const SvgIconPlaceholder = withInstanceId( ( props => { ) } ) ) -SvgIconPlaceholder.defaultProps = { +const SVG_ICON_PLACEHOLDER_DEFAULT_PROPS = { isOpen: null, className: '', value: '', diff --git a/src/deprecated/v2/components/svg-icon/index.js b/src/deprecated/v2/components/svg-icon/index.js index dbb15f0929..aae110c395 100644 --- a/src/deprecated/v2/components/svg-icon/index.js +++ b/src/deprecated/v2/components/svg-icon/index.js @@ -3,6 +3,7 @@ */ import FontAwesomeIcon from '../font-awesome-icon' import { getShapeSVG } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import classnames from 'classnames' /** @@ -39,7 +40,8 @@ const extractSvg = _htmlString => { return htmlString } -const SvgIcon = props => { +const SvgIcon = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SVG_ICON_DEFAULT_PROPS ) const propsToPass = { ...props, value: typeof props.value === 'string' ? extractSvg( props.value ) : props.value, @@ -75,7 +77,7 @@ const SvgIcon = props => { return ret } -SvgIcon.defaultProps = { +const SVG_ICON_DEFAULT_PROPS = { className: '', value: '', // The icon name or icon SVG. @@ -94,7 +96,8 @@ SvgIcon.defaultProps = { gradientDirection: 0, // Only supports every 45 degrees. } -SvgIcon.Content = props => { +SvgIcon.Content = incomingProps => { + const props = getPropsWithDefaults( incomingProps, SVG_ICON_CONTENT_DEFAULT_PROPS ) const propsToPass = { ...props, value: typeof props.value === 'string' ? extractSvg( props.value ) : props.value, @@ -128,8 +131,8 @@ SvgIcon.Content = props => { return ret } -SvgIcon.Content.defaultProps = { - ...SvgIcon.defaultProps, +const SVG_ICON_CONTENT_DEFAULT_PROPS = { + ...SVG_ICON_DEFAULT_PROPS, } export default SvgIcon diff --git a/src/deprecated/v2/components/typography-control-helper/index.js b/src/deprecated/v2/components/typography-control-helper/index.js index 2eddfbc0ee..8c6ca1c018 100644 --- a/src/deprecated/v2/components/typography-control-helper/index.js +++ b/src/deprecated/v2/components/typography-control-helper/index.js @@ -8,8 +8,10 @@ import { camelCase } from 'lodash' * WordPress dependencies */ import { sprintf } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../../../util/props' -const TypographyControlHelper = props => { +const TypographyControlHelper = incomingProps => { + const props = getPropsWithDefaults( incomingProps, TYPOGRAPHY_CONTROL_HELPER_DEFAULT_PROPS ) const { setAttributes } = props const getAttrName = attrName => camelCase( sprintf( props.attrNameTemplate, attrName ) ) @@ -72,7 +74,7 @@ const TypographyControlHelper = props => { ) } -TypographyControlHelper.defaultProps = { +const TYPOGRAPHY_CONTROL_HELPER_DEFAULT_PROPS = { attrNameTemplate: '%s', setAttributes: () => {}, blockAttributes: {}, diff --git a/src/deprecated/v2/higher-order/with-block-styles/index.js b/src/deprecated/v2/higher-order/with-block-styles/index.js index 1cb12493ae..2b6859a67d 100644 --- a/src/deprecated/v2/higher-order/with-block-styles/index.js +++ b/src/deprecated/v2/higher-order/with-block-styles/index.js @@ -8,9 +8,11 @@ import { BlockStyles } from '../../components' */ import { applyFilters } from '@wordpress/hooks' import classnames from 'classnames' +import { getPropsWithDefaults } from '../../../../util/props' const withBlockStyles = ( styleFunction, options = {} ) => WrappedComponent => { - const NewComp = props => { + const NewComp = incomingProps => { + const props = getPropsWithDefaults( incomingProps, NEW_COMP_DEFAULT_PROPS ) const newClassName = classnames( [ props.className, props.attributes.uniqueClass, @@ -34,13 +36,14 @@ const withBlockStyles = ( styleFunction, options = {} ) => WrappedComponent => { return } - NewComp.defaultProps = { - ...( WrappedComponent.defaultProps || {} ), + const NEW_COMP_DEFAULT_PROPS = { + ...( WrappedComponent.stackableDefaultProps || WrappedComponent.defaultProps || {} ), attributes: {}, blockName: '', className: '', mainClassName: '', } + NewComp.stackableDefaultProps = NEW_COMP_DEFAULT_PROPS return NewComp } diff --git a/src/deprecated/v2/higher-order/with-design-layout-selector/design-layout-selector-item.js b/src/deprecated/v2/higher-order/with-design-layout-selector/design-layout-selector-item.js index f4685d9448..2f80cf057c 100644 --- a/src/deprecated/v2/higher-order/with-design-layout-selector/design-layout-selector-item.js +++ b/src/deprecated/v2/higher-order/with-design-layout-selector/design-layout-selector-item.js @@ -11,13 +11,16 @@ import classnames from 'classnames' */ import { Icon } from '@wordpress/components' import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../../../util/props' -const DesignLayoutSelectorItem = ( { - image, - label, - className, - ...otherProps -} ) => { +const DesignLayoutSelectorItem = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DESIGN_LAYOUT_SELECTOR_ITEM_DEFAULT_PROPS ) + const { + image, + label, + className, + ...otherProps + } = props const src = ! image ? '' : image.match( /https?:/i ) ? image : srcUrl ? `${ srcUrl }/${ image }` @@ -64,7 +67,7 @@ const DesignLayoutSelectorItem = ( { ) } -DesignLayoutSelectorItem.defaultProps = { +const DESIGN_LAYOUT_SELECTOR_ITEM_DEFAULT_PROPS = { name: '', label: '', className: '', diff --git a/src/deprecated/v2/higher-order/with-design-layout-selector/design-layout-selector.js b/src/deprecated/v2/higher-order/with-design-layout-selector/design-layout-selector.js index 497550530f..84f5b66220 100644 --- a/src/deprecated/v2/higher-order/with-design-layout-selector/design-layout-selector.js +++ b/src/deprecated/v2/higher-order/with-design-layout-selector/design-layout-selector.js @@ -5,6 +5,7 @@ import { i18n, isPro, showProNotice, } from 'stackable' import { applyBlockDesign } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' import { getDesigns, getDesign } from '~stackable/design-library' import { Button } from '~stackable/components' import classnames from 'classnames' @@ -34,7 +35,8 @@ const basicDesign = { id: 'basic', } -const DesignLayoutSelector = props => { +const DesignLayoutSelector = incomingProps => { + const props = getPropsWithDefaults( incomingProps, DESIGN_LAYOUT_SELECTOR_DEFAULT_PROPS ) const { name, } = props @@ -181,7 +183,7 @@ const DesignLayoutSelector = props => { ) } -DesignLayoutSelector.defaultProps = { +const DESIGN_LAYOUT_SELECTOR_DEFAULT_PROPS = { name: '', } diff --git a/src/deprecated/v2/higher-order/with-design-layout-selector/index.js b/src/deprecated/v2/higher-order/with-design-layout-selector/index.js index 1555e2f459..7fbd4adb7d 100644 --- a/src/deprecated/v2/higher-order/with-design-layout-selector/index.js +++ b/src/deprecated/v2/higher-order/with-design-layout-selector/index.js @@ -12,6 +12,7 @@ import { useMemo } from '@wordpress/element' * Internal dependencies */ import DesignLayoutSelector from './design-layout-selector' +import { getPropsWithDefaults } from '../../../../util/props' // When block is listed, it should not open the selector initially. const blocksShouldNotOpenSelectorInitially = [ @@ -21,7 +22,8 @@ const blocksShouldNotOpenSelectorInitially = [ const withDesignLayoutSelector = createHigherOrderComponent( WrappedComponent => { - const NewComponent = props => { + const NewComponent = incomingProps => { + const props = getPropsWithDefaults( incomingProps, NEW_COMPONENT_DEFAULT_PROPS ) const hasEmptyDesign = typeof props.attributes.design !== 'undefined' && props.attributes.design === '' const hasLayoutPicker = useMemo( () => { return ! blocksShouldNotOpenSelectorInitially.includes( props.name ) @@ -34,10 +36,11 @@ const withDesignLayoutSelector = createHigherOrderComponent( return } - NewComponent.defaultProps = { - ...( WrappedComponent.defaultProps || {} ), + const NEW_COMPONENT_DEFAULT_PROPS = { + ...( WrappedComponent.stackableDefaultProps || WrappedComponent.defaultProps || {} ), attributes: {}, } + NewComponent.stackableDefaultProps = NEW_COMPONENT_DEFAULT_PROPS return NewComponent }, diff --git a/src/deprecated/v2/higher-order/with-google-font/index.js b/src/deprecated/v2/higher-order/with-google-font/index.js index d62d149f36..09c58be11d 100644 --- a/src/deprecated/v2/higher-order/with-google-font/index.js +++ b/src/deprecated/v2/higher-order/with-google-font/index.js @@ -2,6 +2,7 @@ * External dependencies */ import { loadGoogleFontInAttributes } from '~stackable/util' +import { getPropsWithDefaults } from '../../../../util/props' /** * WordPress dependencies @@ -12,7 +13,8 @@ import { useSelect } from '@wordpress/data' const withGoogleFont = createHigherOrderComponent( WrappedComponent => { - const NewComponent = props => { + const NewComponent = incomingProps => { + const props = getPropsWithDefaults( incomingProps, NEW_COMPONENT_DEFAULT_PROPS ) const isEditingTemplate = useSelect( select => select( 'core/editor' )?.getCurrentPostType?.() === 'wp_template' || false ) @@ -25,7 +27,7 @@ const withGoogleFont = createHigherOrderComponent( return } - NewComponent.defaultProps = { + const NEW_COMPONENT_DEFAULT_PROPS = { attributes: {}, } diff --git a/src/deprecated/v2/higher-order/with-tabbed-inspector/index.js b/src/deprecated/v2/higher-order/with-tabbed-inspector/index.js index 1806e48f94..9b30412be0 100644 --- a/src/deprecated/v2/higher-order/with-tabbed-inspector/index.js +++ b/src/deprecated/v2/higher-order/with-tabbed-inspector/index.js @@ -12,12 +12,11 @@ import { i18n } from 'stackable' /** * WordPress dependencies */ -import { - Fragment, useState, -} from '@wordpress/element' +import { Fragment, useState } from '@wordpress/element' import { addFilter, applyFilters } from '@wordpress/hooks' import { InspectorControls } from '@wordpress/block-editor' import { __ } from '@wordpress/i18n' +import { getPropsWithDefaults } from '../../../../util/props' const PanelTabs = withMemory( _PanelTabs ) @@ -38,7 +37,8 @@ addFilter( 'stackable.inspector.tabs', 'stackable/v2', tabs => { } ) const withTabbedInspector = ( tabs = null ) => WrappedComponent => { - const NewComp = props => { + const NewComp = incomingProps => { + const props = getPropsWithDefaults( incomingProps, NEW_COMP_DEFAULT_PROPS ) const { blockName } = props const [ activeTab, setActiveTab ] = useState( null ) const blockStyleControls = applyFilters( `stackable.${ blockName }.edit.inspector.style.block`, null, props ) @@ -84,11 +84,12 @@ const withTabbedInspector = ( tabs = null ) => WrappedComponent => { ) } - NewComp.defaultProps = { - ...( WrappedComponent.defaultProps || {} ), + const NEW_COMP_DEFAULT_PROPS = { + ...( WrappedComponent.stackableDefaultProps || WrappedComponent.defaultProps || {} ), attributes: {}, blockName: '', } + NewComp.stackableDefaultProps = NEW_COMP_DEFAULT_PROPS return NewComp } diff --git a/src/deprecated/v2/higher-order/with-tabbed-inspector/with-memory.js b/src/deprecated/v2/higher-order/with-tabbed-inspector/with-memory.js index 25322c1e98..c9deba64c3 100644 --- a/src/deprecated/v2/higher-order/with-tabbed-inspector/with-memory.js +++ b/src/deprecated/v2/higher-order/with-tabbed-inspector/with-memory.js @@ -14,11 +14,13 @@ import { first } from 'lodash' import { useBlockEditContext } from '@wordpress/block-editor' import { Fragment } from '@wordpress/element' import { doAction } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../../../util/props' const tabCache = {} const withMemory = WrappedComponent => { - const NewComp = props => { + const NewComp = incomingProps => { + const props = getPropsWithDefaults( incomingProps, NEW_COMP_DEFAULT_PROPS ) const { clientId } = useBlockEditContext() const onClick = tab => { @@ -49,9 +51,10 @@ const withMemory = WrappedComponent => { ) } - NewComp.defaultProps = { - ...( WrappedComponent.defaultProps || {} ), + const NEW_COMP_DEFAULT_PROPS = { + ...( WrappedComponent.stackableDefaultProps || WrappedComponent.defaultProps || {} ), } + NewComp.stackableDefaultProps = NEW_COMP_DEFAULT_PROPS return NewComp } diff --git a/src/higher-order/with-visual-guide/visual-guide.js b/src/higher-order/with-visual-guide/visual-guide.js index 7515c5a14e..eb2250e71d 100644 --- a/src/higher-order/with-visual-guide/visual-guide.js +++ b/src/higher-order/with-visual-guide/visual-guide.js @@ -2,8 +2,10 @@ import { useMemo, useState } from '@wordpress/element' import { useSelect } from '@wordpress/data' import { useDeviceType } from '~stackable/hooks' import { first, last } from 'lodash' +import { getPropsWithDefaults } from '../../util/props' -const VisualGuideer = props => { +const VisualGuideer = incomingProps => { + const props = getPropsWithDefaults( incomingProps, VISUAL_GUIDEER_DEFAULT_PROPS ) const { uniqueId, selector = '', @@ -45,7 +47,7 @@ const VisualGuideer = props => { return } -VisualGuideer.defaultProps = { +const VISUAL_GUIDEER_DEFAULT_PROPS = { uniqueId: '', highlightStyles: {}, } diff --git a/src/lazy-components/design-library/block-list.js b/src/lazy-components/design-library/block-list.js index d4ba353e3a..caffb4d613 100644 --- a/src/lazy-components/design-library/block-list.js +++ b/src/lazy-components/design-library/block-list.js @@ -19,8 +19,10 @@ import classnames from 'classnames' import { useEffect, useState } from '@wordpress/element' import { __ } from '@wordpress/i18n' import { Spinner } from '@wordpress/components' +import { getPropsWithDefaults } from '../../util/props' -const BlockList = props => { +const BlockList = incomingProps => { + const props = getPropsWithDefaults( incomingProps, BLOCK_LIST_DEFAULT_PROPS ) const [ categoryList, setCategoryList ] = useState( [] ) const { viewBy, designs, plan, selected, onSelect, @@ -111,7 +113,7 @@ const BlockList = props => { ) } -BlockList.defaultProps = { +const BLOCK_LIST_DEFAULT_PROPS = { select: '', onSelect: () => {}, apiVersion: '', diff --git a/src/lazy-components/design-library/design-library-list/design-library-list-item.js b/src/lazy-components/design-library/design-library-list/design-library-list-item.js index 28a9c13e6b..3104420a88 100644 --- a/src/lazy-components/design-library/design-library-list/design-library-list-item.js +++ b/src/lazy-components/design-library/design-library-list/design-library-list-item.js @@ -25,8 +25,10 @@ import { import { Dashicon, Spinner } from '@wordpress/components' import { __ } from '@wordpress/i18n' import { applyFilters } from '@wordpress/hooks' +import { getPropsWithDefaults } from '../../../util/props' -const DesignLibraryListItem = memo( props => { +const DesignLibraryListItem = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, DESIGN_LIBRARY_LIST_ITEM_DEFAULT_PROPS ) const { shouldRender, presetMarks, @@ -205,7 +207,7 @@ const DesignLibraryListItem = memo( props => { ) } ) -DesignLibraryListItem.defaultProps = { +const DESIGN_LIBRARY_LIST_ITEM_DEFAULT_PROPS = { designId: '', image: '', label: '', diff --git a/src/lazy-components/design-library/design-library-list/index.js b/src/lazy-components/design-library/design-library-list/index.js index c0d7371bf5..cb43b89794 100644 --- a/src/lazy-components/design-library/design-library-list/index.js +++ b/src/lazy-components/design-library/design-library-list/index.js @@ -20,8 +20,10 @@ import { __ } from '@wordpress/i18n' import { useState, useEffect, useRef, memo, useMemo, } from '@wordpress/element' +import { getPropsWithDefaults } from '../../../util/props' -const DesignLibraryList = memo( props => { +const DesignLibraryList = memo( incomingProps => { + const props = getPropsWithDefaults( incomingProps, DESIGN_LIBRARY_LIST_DEFAULT_PROPS ) const { className = '', designs, @@ -91,7 +93,7 @@ const DesignLibraryList = memo( props => { } ) -DesignLibraryList.defaultProps = { +const DESIGN_LIBRARY_LIST_DEFAULT_PROPS = { designs: [], columns: 3, onSelect: () => {}, diff --git a/src/lazy-components/design-library/index.js b/src/lazy-components/design-library/index.js index 45a4377834..b2b35c1a62 100644 --- a/src/lazy-components/design-library/index.js +++ b/src/lazy-components/design-library/index.js @@ -13,6 +13,7 @@ import { DesignLibraryContext } from './context' import { i18n } from 'stackable' import classnames from 'classnames' import { useLocalStorage } from '~stackable/util' +import { getPropsWithDefaults } from '../../util/props' import { useBlockColorSchemes, useCanManageUserPatterns } from '~stackable/hooks' import { GuidedModalTour, Button, ColorSchemePreview, ColorSchemesHelp, Tooltip, @@ -48,7 +49,8 @@ const popoverProps = { // This is to make sure that the design library shows "all" at the start. localStorage?.setItem( 'stk__design_library__block-list__selected', '' ) -const ModalDesignLibrary = props => { +const ModalDesignLibrary = incomingProps => { + const props = getPropsWithDefaults( incomingProps, MODAL_DESIGN_LIBRARY_DEFAULT_PROPS ) const { backgroundModeColorScheme, containerModeColorScheme, colorSchemesCollection, } = useBlockColorSchemes() @@ -484,7 +486,7 @@ const ModalDesignLibrary = props => { ) } -ModalDesignLibrary.defaultProps = { +const MODAL_DESIGN_LIBRARY_DEFAULT_PROPS = { search: '', onClose: () => {}, onSelect: () => {}, diff --git a/src/plugins/global-settings/color-schemes/color-scheme-picker.js b/src/plugins/global-settings/color-schemes/color-scheme-picker.js index 453f94f35a..3e77c60068 100644 --- a/src/plugins/global-settings/color-schemes/color-scheme-picker.js +++ b/src/plugins/global-settings/color-schemes/color-scheme-picker.js @@ -25,6 +25,7 @@ import { } from '~stackable/components' import { useBlockHoverState } from '~stackable/hooks' import { extractColor } from '~stackable/util' +import { getPropsWithDefaults } from '../../../util/props' import { cloneDeep, isEqual } from 'lodash' import { @@ -84,7 +85,8 @@ const COLOR_SETTINGS = [ { property: 'buttonOutlineColor', } ] -const ColorSchemePicker = props => { +const ColorSchemePicker = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLOR_SCHEME_PICKER_DEFAULT_PROPS ) const ref = useRef() const { itemInEdit, @@ -557,7 +559,7 @@ const ColorSchemePicker = props => { ) } -ColorSchemePicker.defaultProps = { +const COLOR_SCHEME_PICKER_DEFAULT_PROPS = { className: '', label: '', onReset: () => {}, diff --git a/src/plugins/global-settings/colors/color-picker.js b/src/plugins/global-settings/colors/color-picker.js index 2f7dbfc075..a42f8264f8 100644 --- a/src/plugins/global-settings/colors/color-picker.js +++ b/src/plugins/global-settings/colors/color-picker.js @@ -21,6 +21,7 @@ import { import { models } from '@wordpress/api' import { __, sprintf } from '@wordpress/i18n' import { ColorIndicator, ColorPicker } from '@wordpress/components' +import { getPropsWithDefaults } from '../../../util/props' let saveTimeout = null @@ -37,7 +38,8 @@ const ItemPickerColor = ( { item, onChange } ) => { } -const ColorPickers = props => { +const ColorPickers = incomingProps => { + const props = getPropsWithDefaults( incomingProps, COLOR_PICKERS_DEFAULT_PROPS ) const ref = useRef() const { colors, @@ -163,7 +165,7 @@ const ColorPickers = props => { ) } -ColorPickers.defaultProps = { +const COLOR_PICKERS_DEFAULT_PROPS = { className: '', label: '', onReset: () => {}, diff --git a/src/plugins/global-settings/typography/typography-picker.js b/src/plugins/global-settings/typography/typography-picker.js index 565ff80d5b..dd8ced31db 100644 --- a/src/plugins/global-settings/typography/typography-picker.js +++ b/src/plugins/global-settings/typography/typography-picker.js @@ -5,6 +5,7 @@ import { Tooltip, TypographyControl } from '~stackable/components' import { createTypographyStyles, loadGoogleFont, createTypographyDescription, } from '~stackable/util' +import { getPropsWithDefaults } from '../../../util/props' import { i18n } from 'stackable' import { omit } from 'lodash' import classnames from 'classnames' @@ -18,7 +19,8 @@ import { __, sprintf } from '@wordpress/i18n' import { useSelect } from '@wordpress/data' import { Dashicon } from '@wordpress/components' -const TypographyPicker = props => { +const TypographyPicker = incomingProps => { + const props = getPropsWithDefaults( incomingProps, TYPOGRAPHY_PICKER_DEFAULT_PROPS ) const { value, help } = props // On style change, only get the new style then trigger the onChange. @@ -115,7 +117,7 @@ const TypographyPicker = props => { ) } -TypographyPicker.defaultProps = { +const TYPOGRAPHY_PICKER_DEFAULT_PROPS = { selector: 'h1', label: sprintf( __( 'Heading %d', i18n ), 1 ), onChange: () => {}, diff --git a/src/plugins/layout-picker-reset/index.js b/src/plugins/layout-picker-reset/index.js index 236a54baf3..2df8993901 100644 --- a/src/plugins/layout-picker-reset/index.js +++ b/src/plugins/layout-picker-reset/index.js @@ -15,8 +15,10 @@ import { __ } from '@wordpress/i18n' import { select, dispatch } from '@wordpress/data' import { addFilter } from '@wordpress/hooks' import { createHigherOrderComponent } from '@wordpress/compose' +import { getPropsWithDefaults } from '../../util/props' -const LayoutPickerButton = props => { +const LayoutPickerButton = incomingProps => { + const props = getPropsWithDefaults( incomingProps, LAYOUT_PICKER_BUTTON_DEFAULT_PROPS ) const { disabled, clientId } = props return ( @@ -36,7 +38,7 @@ const LayoutPickerButton = props => { ) } -LayoutPickerButton.defaultProps = { +const LAYOUT_PICKER_BUTTON_DEFAULT_PROPS = { disabled: false, } diff --git a/src/util/index.js b/src/util/index.js index a693b8347b..9b6a01e510 100644 --- a/src/util/index.js +++ b/src/util/index.js @@ -16,6 +16,7 @@ export * from './fontawesome' export * from './user' export * from './colors' export * from './element' +export * from './props' export * from './on-class-change' export * from './block-styles' export { maskSensitiveValue } from './mask-sensitive-value' diff --git a/src/util/props.js b/src/util/props.js new file mode 100644 index 0000000000..0e34e5c852 --- /dev/null +++ b/src/util/props.js @@ -0,0 +1,11 @@ +export const getPropsWithDefaults = ( props, defaultProps ) => { + const propsWithDefaults = { ...props } + + Object.entries( defaultProps ).forEach( ( [ key, value ] ) => { + if ( typeof propsWithDefaults[ key ] === 'undefined' ) { + propsWithDefaults[ key ] = value + } + } ) + + return propsWithDefaults +}