From 7702cee317569a18c88791ce03fd0072e6ea0f11 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Wed, 10 Sep 2025 22:58:04 +0800 Subject: [PATCH 1/2] fix dragging --- src/components/sortable-picker/index.js | 7 +++- src/components/sortable-picker/util.js | 5 +++ .../global-settings/colors/color-picker.js | 32 +++++++++++-------- 3 files changed, 29 insertions(+), 15 deletions(-) create mode 100644 src/components/sortable-picker/util.js diff --git a/src/components/sortable-picker/index.js b/src/components/sortable-picker/index.js index b52d7182f8..466e678a28 100644 --- a/src/components/sortable-picker/index.js +++ b/src/components/sortable-picker/index.js @@ -20,6 +20,7 @@ import { import { useState, useEffect } from '@wordpress/element' import { __ } from '@wordpress/i18n' import { ResetButton } from '../base-control2/reset-button' +import { ITEM_PICKER } from './util' const addItemPopoverProps = { placement: 'left-start', @@ -259,7 +260,11 @@ const LabeledItemIndicator = props => { ) } } renderContent={ ( { onClose } ) => { - return <> { ItemPicker && } + const ItemPicker_ = typeof ItemPicker === 'string' ? ITEM_PICKER[ ItemPicker ] : null + + return typeof ItemPicker === 'string' && ItemPicker_ + ? + : } } /> { sortable && diff --git a/src/components/sortable-picker/util.js b/src/components/sortable-picker/util.js new file mode 100644 index 0000000000..4853e251ab --- /dev/null +++ b/src/components/sortable-picker/util.js @@ -0,0 +1,5 @@ +import { ItemPickerColor } from '~stackable/plugins/global-settings/colors/color-picker' + +export const ITEM_PICKER = { + ColorPicker: ItemPickerColor, +} diff --git a/src/plugins/global-settings/colors/color-picker.js b/src/plugins/global-settings/colors/color-picker.js index 73ef4e6033..11157b3535 100644 --- a/src/plugins/global-settings/colors/color-picker.js +++ b/src/plugins/global-settings/colors/color-picker.js @@ -24,6 +24,21 @@ import { ColorIndicator, ColorPicker } from '@wordpress/components' let saveTimeout = null +// Dev note: Passing this component as a prop breaks dragging functionality in ColorPicker. +// Exporting it directly ensures dragging works as expected. +export const ItemPickerColor = ( { item, onChange } ) => { + return
+ onChange( { + ...item, + color: value, + } ) } + color={ item.color } + enableAlpha={ true } + /> +
+} + const ColorPickers = props => { const ref = useRef() const { @@ -134,19 +149,6 @@ const ColorPickers = props => { /> } - const ItemPicker = ( { item, onChange } ) => { - return
- onChange( { - ...item, - color: value, - } ) } - color={ item.color } - enableAlpha={ true } - /> -
- } - return ( { handleAddItem={ handleAddIcon } onSortEnd={ onSortEnd } ItemPreview={ ItemPreview } - ItemPicker={ ItemPicker } + ItemPicker="ColorPicker" + wrapItemPicker={ true } + wrapperClassName="stk-color-palette-control__popover-content" { ...props } /> ) From 646a6d48fa2ab2ea972fde01bd8a4a1d6fc6737a Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Tue, 16 Sep 2025 08:10:26 +0800 Subject: [PATCH 2/2] fix Coderabbit's QA --- src/components/sortable-picker/index.js | 16 ++++++---------- src/components/sortable-picker/util.js | 5 ----- .../global-settings/colors/color-picker.js | 8 ++------ 3 files changed, 8 insertions(+), 21 deletions(-) delete mode 100644 src/components/sortable-picker/util.js diff --git a/src/components/sortable-picker/index.js b/src/components/sortable-picker/index.js index 466e678a28..44a958c819 100644 --- a/src/components/sortable-picker/index.js +++ b/src/components/sortable-picker/index.js @@ -17,10 +17,11 @@ import { Dashicon, Dropdown, } from '@wordpress/components' -import { useState, useEffect } from '@wordpress/element' +import { + useState, useEffect, forwardRef, +} from '@wordpress/element' import { __ } from '@wordpress/i18n' import { ResetButton } from '../base-control2/reset-button' -import { ITEM_PICKER } from './util' const addItemPopoverProps = { placement: 'left-start', @@ -44,7 +45,7 @@ const DRAG_KEYCODES = { down: [ 40, 39 ], } -const SortablePicker = props => { +const SortablePicker = forwardRef( ( props, ref ) => { const { nonSortableItems = [], editableName = true, @@ -55,7 +56,6 @@ const SortablePicker = props => { handleAddItem, onSortEnd, AddItemPopover = null, - ref, enableAddItem = true, } = props const [ isSorting, setIsSorting ] = useState( false ) @@ -134,7 +134,7 @@ const SortablePicker = props => { ) -} +} ) SortablePicker.defaultProps = { className: '', @@ -260,11 +260,7 @@ const LabeledItemIndicator = props => { ) } } renderContent={ ( { onClose } ) => { - const ItemPicker_ = typeof ItemPicker === 'string' ? ITEM_PICKER[ ItemPicker ] : null - - return typeof ItemPicker === 'string' && ItemPicker_ - ? - : + return <> { ItemPicker && } } } /> { sortable && diff --git a/src/components/sortable-picker/util.js b/src/components/sortable-picker/util.js deleted file mode 100644 index 4853e251ab..0000000000 --- a/src/components/sortable-picker/util.js +++ /dev/null @@ -1,5 +0,0 @@ -import { ItemPickerColor } from '~stackable/plugins/global-settings/colors/color-picker' - -export const ITEM_PICKER = { - ColorPicker: ItemPickerColor, -} diff --git a/src/plugins/global-settings/colors/color-picker.js b/src/plugins/global-settings/colors/color-picker.js index 11157b3535..2f7dbfc075 100644 --- a/src/plugins/global-settings/colors/color-picker.js +++ b/src/plugins/global-settings/colors/color-picker.js @@ -24,9 +24,7 @@ import { ColorIndicator, ColorPicker } from '@wordpress/components' let saveTimeout = null -// Dev note: Passing this component as a prop breaks dragging functionality in ColorPicker. -// Exporting it directly ensures dragging works as expected. -export const ItemPickerColor = ( { item, onChange } ) => { +const ItemPickerColor = ( { item, onChange } ) => { return
onChange( { @@ -159,9 +157,7 @@ const ColorPickers = props => { handleAddItem={ handleAddIcon } onSortEnd={ onSortEnd } ItemPreview={ ItemPreview } - ItemPicker="ColorPicker" - wrapItemPicker={ true } - wrapperClassName="stk-color-palette-control__popover-content" + ItemPicker={ ItemPickerColor } { ...props } /> )