- {slottedItems.map(({ itemId, slotId, item }, index) => (
-
onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex))}
+ renderList={({ children, props }) => {
+ const { key, ...rest } = props;
+
+ return (
+
- {item && (
-
- {children({
- ...item,
- updateData: (newValue) => {
- onChange(items.map((i) => (i.id === itemId ? { ...i, ...newValue } : i)));
- },
- itemIndex: index,
- deleteItem: () => {
- onChange(items.filter((i) => i.id !== item.id));
-
- if (item.onAfterItemRemove) {
- onAfterItemRemove(item);
- }
- },
- })}
-
+ {children}
+
+ );
+ }}
+ renderItem={({ value, index, isDisabled, isDragged, isSelected, isOutOfBounds, props }) => {
+ const { key, ...rest } = props;
+
+ return (
+
- ))}
-
-
+ key={value?.id ?? key}
+ {...rest}
+ >
+ {children({
+ ...value,
+ updateData: (newValue) => {
+ onChange(items.map((i) => (i.id === value.id ? { ...i, ...newValue } : i)));
+ },
+ itemIndex: index,
+ deleteItem: () => {
+ onChange(items.filter((i) => i.id !== value.id));
+
+ if (value.onAfterItemRemove) {
+ onAfterItemRemove(value);
+ }
+ },
+ })}
+
+ );
+ }}
+ />
);
};
diff --git a/lib/components/draggable/draggable-handle.jsx b/lib/components/draggable/draggable-handle.jsx
new file mode 100644
index 0000000..32923d4
--- /dev/null
+++ b/lib/components/draggable/draggable-handle.jsx
@@ -0,0 +1,43 @@
+import { clsx } from 'clsx/lite';
+import { __ } from '@wordpress/i18n';
+import { DraggableContext } from './draggable-context';
+import { useContext } from 'react';
+import { icons } from '../../icons';
+
+/**
+ * A Draggable item handle.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the handle.
+ *
+ * @returns {JSX.Element} The DraggableHandle component.
+ *
+ * @example
+ *
+ *
+ * @preserve
+ */
+export const DraggableHandle = (props) => {
+ const { className, children, ...rest } = props;
+
+ const { handleRef, status } = useContext(DraggableContext);
+
+ return (
+
svg]:es-uic-size-4 [&>svg]:es-uic-shrink-0',
+ 'active:es-uic-border-teal-500/30 active:es-uic-bg-teal-50 active:es-uic-text-teal-500',
+ 'focus:es-uic-outline-none focus-visible:es-uic-border-teal-500 focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50',
+ 'hover:es-uic-text-teal-500',
+ status === 'dragging' && '!es-uic-border-teal-600 !es-uic-bg-teal-500 !es-uic-text-white es-uic-shadow-sm es-uic-shadow-teal-500/30',
+ className,
+ )}
+ ref={handleRef}
+ {...rest}
+ >
+ {children ?? icons.reorderGrabberV}
+
+ );
+};
diff --git a/lib/components/draggable/draggable-item.jsx b/lib/components/draggable/draggable-item.jsx
deleted file mode 100644
index 9c1fa3a..0000000
--- a/lib/components/draggable/draggable-item.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { clsx } from 'clsx/lite';
-import { __ } from '@wordpress/i18n';
-import { DraggableContext } from './draggable-context';
-import { useContext } from 'react';
-import { icons } from '../../icons';
-
-/**
- * A Draggable item.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {string} [props.className] - Classes to pass to the container.
- *
- * @returns {JSX.Element} The DraggableList component.
- *
- * @see {@link DraggableList} for usage example.
- *
- * @preserve
- */
-export const DraggableItem = (props) => {
- const { children, className, ...rest } = props;
-
- const { itemId } = useContext(DraggableContext);
-
- return (
-
- {children}
-
- );
-};
-
-/**
- * A Draggable item handle.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {string} [props.className] - Classes to pass to the handle.
- *
- * @returns {JSX.Element} The DraggableItemHandle component.
- *
- * @example
- *
- *
- * @preserve
- */
-export const DraggableItemHandle = (props) => {
- const { className, children, ...rest } = props;
-
- return (
-
svg]:es-uic-size-4',
- className,
- )}
- {...rest}
- >
- {children ?? icons.reorderGrabberV}
-
- );
-};
diff --git a/lib/components/draggable/draggable.jsx b/lib/components/draggable/draggable.jsx
index 69390da..624c628 100644
--- a/lib/components/draggable/draggable.jsx
+++ b/lib/components/draggable/draggable.jsx
@@ -1,8 +1,11 @@
-import { useEffect, useId, useRef, useState, useMemo } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
import { __ } from '@wordpress/i18n';
-import { createSwapy } from 'swapy';
import { DraggableContext } from './draggable-context';
-import { clsx } from 'clsx/lite';
+import { useSortable } from '@dnd-kit/react/sortable';
+import { RestrictToHorizontalAxis, RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';
+import { RestrictToElement } from '@dnd-kit/dom/modifiers';
+import { DragDropProvider } from '@dnd-kit/react';
+import { move } from '@dnd-kit/helpers';
const fixIds = (items, itemIdBase) => {
return items.map((item, i) => ({
@@ -11,6 +14,32 @@ const fixIds = (items, itemIdBase) => {
}));
};
+const SortableItem = ({ id, index, disabled, children, axis }) => {
+ const [element, setElement] = useState(null);
+ const handleRef = useRef(null);
+
+ let extraModifiers = [];
+
+ if (axis === 'horizontal') {
+ extraModifiers = [RestrictToHorizontalAxis];
+ } else if (axis === 'vertical') {
+ extraModifiers = [RestrictToVerticalAxis];
+ }
+
+ const { isDragSource, status } = useSortable({
+ id,
+ index,
+ element,
+ type: 'item',
+ modifiers: [RestrictToElement],
+ transition: { idle: true, duration: 400, easing: 'cubic-bezier(0, 0.55, 0.45, 1)' }, // 'easeOutCirc'
+ handle: handleRef,
+ disabled,
+ });
+
+ return
{children(handleRef, isDragSource, status)}
;
+};
+
/**
* A component that allows re-ordering items freely.
*
@@ -20,8 +49,8 @@ const fixIds = (items, itemIdBase) => {
* @param {Function} props.onChange - Function to run when the items change.
* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
* @param {boolean} [props.noReorder] - If `true`, item reordering is disabled.
+ * @param {'both' | 'horizontal' | 'vertical'} [props.axis='both'] - Which axis to allow dragging on.
* @param {string} [props.className] - Classes to pass to the component.
- * @param {string} [props.slotClassName] - Classes to pass to the item container slot.
*
* @returns {JSX.Element} The Draggable component.
*
@@ -34,17 +63,11 @@ const fixIds = (items, itemIdBase) => {
* const { title, updateData } = item;
*
* return (
- *
- * updateData({ title: value })}
- * />
- *
+ *
+ * {title}
+ *
* );
* }}
*
@@ -62,78 +85,20 @@ export const Draggable = (props) => {
noReorder,
+ axis = 'both',
+
className,
- slotClassName,
hidden,
...rest
} = props;
- const items = useMemo(() => fixIds(rawItems, itemIdBase), [rawItems]);
-
- const ref = useRef(null);
- const swapyRef = useRef(null);
-
- const [slotItemsMap, setSlotItemsMap] = useState([
- ...items.map((item) => ({
- slotId: item.id,
- itemId: item.id,
- })),
- ]);
-
- const slottedItems = useMemo(
- () =>
- slotItemsMap.map(({ slotId, itemId }) => ({
- slotId,
- itemId,
- item: items.find((item) => item.id === itemId),
- })),
- [items, slotItemsMap],
- );
-
- // Keep Swapy slots in sync with items.
- useEffect(() => {
- const newItems = items
- .filter((item) => !slotItemsMap.some((slotItem) => slotItem.itemId === item.id))
- .map((item) => ({
- slotId: item.id,
- itemId: item.id,
- }));
-
- // Remove items from slotItemsMap if they no longer exist in items
- const withoutRemovedItems = slotItemsMap.filter((slotItem) => items.some((item) => item.id === slotItem.itemId) || !slotItem.itemId);
-
- const updatedSlotItemsMap = [...withoutRemovedItems, ...newItems];
-
- setSlotItemsMap(updatedSlotItemsMap);
- swapyRef.current?.setData({ array: updatedSlotItemsMap });
- }, [items]);
-
- // Initialize Swapy.
- useEffect(() => {
- const container = ref?.current;
-
- swapyRef.current = createSwapy(container, {
- manualSwap: true,
- });
-
- swapyRef.current.onSwap(({ data }) => {
- const tweakedItems = data.array.filter(({ itemId }) => itemId !== null).map(({ itemId }) => items.find((item) => item?.id === itemId));
- onChange(tweakedItems);
-
- // Set data manually.
- swapyRef.current?.setData({ array: data.array });
- setSlotItemsMap(data.array);
- });
-
- return () => {
- swapyRef.current?.destroy();
- };
- }, []);
+ const [items, setItems] = useState(fixIds(rawItems));
+ // Ensure the internal state is updated if items are updated externally.
useEffect(() => {
- swapyRef?.current?.enable(!noReorder);
- }, [noReorder]);
+ setItems(fixIds(rawItems, itemIdBase));
+ }, [rawItems]);
if (hidden) {
return null;
@@ -142,41 +107,66 @@ export const Draggable = (props) => {
return (
- {slottedItems.map(({ itemId, slotId, item }, index) => (
-
- {item && (
-
- {children({
- ...item,
- updateData: (newValue) => {
- onChange(items.map((i) => (i.id === itemId ? { ...i, ...newValue } : i)));
- },
- itemIndex: index,
- deleteItem: () => {
- onChange(items.filter((i) => i.id !== item.id));
-
- if (item.onAfterItemRemove) {
- onAfterItemRemove(item);
- }
- },
- })}
-
- )}
-
- ))}
+
{
+ if (!source || !target) {
+ return;
+ }
+
+ setItems((items) => move(items, source, target));
+ }}
+ onDragEnd={({ operation: { source, target }, canceled }) => {
+ if (canceled) {
+ return;
+ }
+
+ if (!source || !target) {
+ return;
+ }
+
+ setItems((items) => move(items, source, target));
+ onChange(items);
+ }}
+ >
+ {items.map((item, index) => (
+
+ {(handleRef, isDragSource, status) => (
+
+ {children({
+ ...item,
+ updateData: (newValue) => {
+ const updated = [...items].map((i) => (i.id === item.id ? { ...i, ...newValue } : i));
+
+ onChange(updated);
+ setItems(updated);
+ },
+ itemIndex: index,
+ deleteItem: () => {
+ setItems([...items].filter((i) => i.id !== item.id));
+ onChange([...items].filter((i) => i.id !== item.id));
+
+ if (onAfterItemRemove) {
+ onAfterItemRemove(item);
+ }
+ },
+ })}
+
+ )}
+
+ ))}
+
);
};
diff --git a/lib/components/expandable/expandable.jsx b/lib/components/expandable/expandable.jsx
index 5ab65a4..3f88d92 100644
--- a/lib/components/expandable/expandable.jsx
+++ b/lib/components/expandable/expandable.jsx
@@ -4,7 +4,6 @@ import { AnimatedVisibility } from '../animated-visibility/animated-visibility';
import { Button } from '../button/button';
import { icons } from '../../icons/icons';
import { clsx } from 'clsx/lite';
-
import { __ } from '@wordpress/i18n';
import { Label } from 'react-aria-components';
import { FocusScope } from 'react-aria';
@@ -20,12 +19,14 @@ import { FocusScope } from 'react-aria';
* @param {string} [props.className] - Classes to pass to the container.
* @param {string} [props.contentClassName] - Classes to pass to the inner content wrapper.
* @param {string} [props.labelClassName] - Classes to pass to the label.
+ * @param {string} [props.headerClassName] - Classes to pass to the header (label + trigger).
* @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
* @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are not hidden when the panel is expanded.
* @param {boolean} [props.disabled] - If `true`, the expand button is disabled.
* @param {boolean} [props.noFocusHandling] - If `true`, the focus trapping when the item is expanded is disabled. Useful when part of another component that manages focus itself.
* @param {boolean} [props.open] - Whether the expandable is open.
* @param {Function} [props.onOpenChange] - Function is called when the panel is opened or closed.
+ * @param {object} [props.headerProps] - Props to pass to the header (label + trigger).
* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
*
* @returns {JSX.Element} The Expandable component.
@@ -46,6 +47,7 @@ export const Expandable = (props) => {
className,
labelClassName,
contentClassName,
+ headerClassName,
actions,
@@ -60,6 +62,10 @@ export const Expandable = (props) => {
open = false,
onOpenChange,
+ customOpenButton,
+
+ headerProps,
+
hidden,
...other
@@ -84,7 +90,10 @@ export const Expandable = (props) => {
)}
{...other}
>
-
+
{
{actions && keepActionsOnExpand && {actions}
}
- {
- setIsOpen(!isOpen);
-
- if (onOpenChange) {
- onOpenChange(!isOpen);
- }
- }}
- tooltip={isOpen ? __('Close', 'eightshift-ui-components') : __('Open', 'eightshift-ui-components')}
- disabled={disabled}
- className={clsx('[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform', isOpen && '[&>svg]:-es-uic-scale-y-100')}
- size='small'
- />
+ {customOpenButton &&
+ customOpenButton({
+ open: isOpen,
+ toggleOpen: () => {
+ setIsOpen(!isOpen);
+
+ if (onOpenChange) {
+ onOpenChange(!isOpen);
+ }
+ },
+ tooltip: isOpen ? __('Close', 'eightshift-ui-components') : __('Open', 'eightshift-ui-components'),
+ disabled,
+ })}
+
+ {!customOpenButton && (
+ {
+ setIsOpen(!isOpen);
+
+ if (onOpenChange) {
+ onOpenChange(!isOpen);
+ }
+ }}
+ tooltip={isOpen ? __('Close', 'eightshift-ui-components') : __('Open', 'eightshift-ui-components')}
+ disabled={disabled}
+ className={clsx('[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform', isOpen && '[&>svg]:-es-uic-scale-y-100')}
+ size='small'
+ />
+ )}
{
const { children, className, title, icon, subtitle, help } = props;
return (
-
+
{title && (
{
);
};
+/**
+ * Component that provides a container for grouping related options within the `OptionsPanel` component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the container.
+ *
+ * @returns {JSX.Element} The OptionsPanelSection component.
+ *
+ * @example
+ *
+ * ...
+ *
+ *
+ * @preserve
+ */
export const OptionsPanelSection = ({ children, className }) => {
return (
{
);
};
+
+/**
+ * Component that provides a header for the top of an options page.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.sticky] - If `true`, the header will be sticky (scroll with content). Make sure to pass a background color!
+ * @param {string} [props.title] - Title to show.
+ * @param {Number} [props.level=2] - Heading level of the title.
+ * @param {string} [props.className] - Classes to pass to the container.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Controls to show on the right side of the header.
+ *
+ * @returns {JSX.Element} The OptionsPanelHeader component.
+ *
+ * @example
+ *
+ * ...
+ *
+ *
+ * @preserve
+ */
+export const OptionsPanelHeader = ({ children, sticky, title, className, actions, level = 2 }) => {
+ return (
+
+
+
+ {title}
+
+
{actions}
+
+ {children}
+
handleOpenChange(isOpen)}
- actions={
- <>
- {actions}
+ {
+ return (
+
+
svg]:es-uic-size-5 [&>svg]:es-uic-shrink-0',
+ size: 'small',
+ type: 'ghost',
+ }}
+ tooltip={__('More options', 'eightshift-ui-components')}
+ >
+ {menuOptions}
+
+ {menuOptions && duplicateItem()}
+ >
+ {__('Duplicate', 'eightshift-ui-components')}
+
+
+ deleteItem()}
+ >
+ {__('Remove', 'eightshift-ui-components')}
+
+
deleteItem()}
- className='es-uic-translate-x-px'
+ icon={open ? icons.caretDownFill : icons.caretDown}
+ onPress={toggleOpen}
+ tooltip={tooltip}
+ disabled={disabled}
+ className={clsx('[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform', open && '[&>svg]:-es-uic-scale-y-100')}
+ size='small'
/>
-
- }
- noFocusHandling
- >
- {children}
-
-
+
+ );
+ }}
+ actions={actions}
+ headerProps={{ 'data-movable-handle': true }}
+ noFocusHandling
+ {...rest}
+ >
+ {children}
+
);
};
diff --git a/lib/components/repeater/repeater.jsx b/lib/components/repeater/repeater.jsx
index 41e3b4d..8e230fb 100644
--- a/lib/components/repeater/repeater.jsx
+++ b/lib/components/repeater/repeater.jsx
@@ -1,33 +1,18 @@
import { __ } from '@wordpress/i18n';
import { Button } from '../button/button';
import { icons } from '../../icons/icons';
-import { useId, useState, useEffect, useRef } from 'react';
+import { useId } from 'react';
import { BaseControl } from '../base-control/base-control';
import { AnimatedVisibility } from '../animated-visibility/animated-visibility';
-import { ToggleButton } from '../toggle-button/toggle-button';
-import { useSortable } from '@dnd-kit/react/sortable';
import { RepeaterContext } from './repeater-context';
-import { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';
-import { move } from '@dnd-kit/helpers';
-import { DragDropProvider } from '@dnd-kit/react';
import { clsx } from 'clsx/lite';
+import { List, arrayMove, arrayRemove } from 'react-movable';
-const SortableItem = ({ id, index, disabled, children }) => {
- const [element, setElement] = useState(null);
- const handleRef = useRef(null);
-
- const { isDragSource, status } = useSortable({
- id,
- index,
- element,
- type: 'item',
- modifiers: [RestrictToVerticalAxis],
- transition: { idle: true, duration: 400, easing: 'cubic-bezier(0, 0.55, 0.45, 1)' }, // 'easeOutCirc'
- handle: handleRef,
- disabled,
- });
-
- return {children(handleRef, isDragSource, status)}
;
+const fixIds = (items, itemIdBase) => {
+ return items.map((item, i) => ({
+ ...item,
+ id: item?.id ?? `${itemIdBase}-${i}`,
+ }));
};
/**
@@ -48,6 +33,7 @@ const SortableItem = ({ id, index, disabled, children }) => {
* @param {Function} [props.onAfterItemAdd] - Function to run after an item is added.
* @param {Function} [props.onAfterItemRemove] - Function to run after an item is removed.
* @param {Number} [props.minItems] - The minimum number of items that must be present. If there are less items than this, deleting items will be disabled.
+ * @param {Number} [props.maxItems] - The maximum number of items that can be present. If there are more items than this, adding items will be disabled.
* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
* @param {JSX.Element} [props.addButton] - If provided, overrides the default add button. `(props: { addItem: (additional: Object?) => void, disabled: Boolean }) => JSX.Element`.
* @param {string} [props.className] - Classes to pass to the item wrapper.
@@ -100,6 +86,7 @@ export const Repeater = (props) => {
onAfterItemAdd,
onAfterItemRemove,
minItems,
+ maxItems,
addButton,
className,
emptyState,
@@ -107,29 +94,10 @@ export const Repeater = (props) => {
hidden,
} = props;
- const fixIds = (items) => {
- return items.map((item, i) => ({
- ...item,
- id: item?.id ?? `${itemIdBase}-${i}`,
- }));
- };
-
- const [items, setItems] = useState(fixIds(rawItems));
-
- const [canDelete, setCanDelete] = useState(false);
- const [isPanelOpen, setIsPanelOpen] = useState({});
- const [isDragging, setIsDragging] = useState(false);
+ const items = fixIds(rawItems, itemIdBase);
- const isAnyPanelOpen = Object.keys(isPanelOpen)?.length < 1 ? false : Object.entries(isPanelOpen).some(([_, v]) => v === true);
-
- if (canDelete && items.length < (minItems ?? 1)) {
- setCanDelete(false);
- }
-
- // Ensure the internal state is updated if items are updated externally.
- useEffect(() => {
- setItems(fixIds(rawItems));
- }, [rawItems]);
+ const canDelete = items.length > (minItems ?? 0);
+ const canAdd = items.length < (maxItems ?? Number.MAX_SAFE_INTEGER);
if (hidden) {
return null;
@@ -145,17 +113,6 @@ export const Repeater = (props) => {
<>
{actions}
- 0}>
-
-
{!addButton && (
{
@@ -170,7 +127,7 @@ export const Repeater = (props) => {
icon={icons.add}
className={clsx('[&>svg]:es-uic-size-4', !hideEmptyState && items.length < 1 && 'es-uic-invisible')}
tooltip={__('Add item', 'eightshift-ui-components')}
- disabled={addDisabled || canDelete}
+ disabled={addDisabled || !canAdd}
/>
)}
@@ -185,7 +142,7 @@ export const Repeater = (props) => {
onAfterItemAdd(newItem);
}
},
- disabled: addDisabled || canDelete,
+ disabled: addDisabled,
})}
)}
@@ -193,123 +150,79 @@ export const Repeater = (props) => {
}
className='es-uic-w-full'
>
-
-
{
- if (isAnyPanelOpen) {
- event.preventDefault();
-
- return;
- }
-
- setIsDragging(true);
- }}
- onDragOver={(event) => {
- if (isAnyPanelOpen) {
- event.preventDefault();
-
- return;
- }
-
- const { source, target } = event.operation;
-
- if (!source || !target) {
- return;
- }
-
- setItems((items) => move(items, source, target));
- }}
- onDragEnd={(event) => {
- if (isAnyPanelOpen) {
- event.preventDefault();
-
- return;
- }
-
- const { source, target } = event.operation;
-
- if (!source || !target) {
- return;
- }
-
- if (event.canceled) {
- return;
- }
-
- setIsDragging(false);
-
- setItems((items) => move(items, source, target));
- onChange(items);
- }}
- >
- {items.map((item, index) => (
- onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex))}
+ renderList={({ children, props }) => {
+ const { key, ...rest } = props;
+
+ return (
+
- {(handleRef, isDragSource, status) => {
- return (
- {
- setItems([...items].filter((i) => i.id !== item.id));
- onChange([...items].filter((i) => i.id !== item.id));
-
- if (onAfterItemRemove) {
- onAfterItemRemove(item);
- }
- },
- handleOpenChange: (isOpen) => setIsPanelOpen((data) => ({ ...data, [item.id]: isOpen })),
- isDragSource,
- }}
- >
-
-
-
- );
- }}
-
- ))}
-
-
+ {children}
+
+ );
+ }}
+ renderItem={({ value: item, index, isDragged, isSelected, isOutOfBounds, props }) => {
+ const { key, ...rest } = props;
+
+ return (
+
+ {
+ onChange([...items].filter((i) => i.id !== item.id));
+
+ if (onAfterItemRemove) {
+ onAfterItemRemove(item);
+ }
+ },
+ duplicateItem: () => {
+ const newItem = { ...item, id: `${itemIdBase}${items.length + 1}` };
+ onChange([...items, newItem]);
+
+ if (onAfterItemAdd) {
+ onAfterItemAdd(newItem);
+ }
+ },
+ isDragged,
+ isOutOfBounds,
+ isSelected,
+ canDelete,
+ canAdd,
+ }}
+ >
+ {children({
+ ...item,
+ updateData: (newValue) => {
+ const updated = [...items].map((i) => (i.id === item.id ? { ...i, ...newValue } : i));
+
+ onChange(updated);
+ },
+ itemIndex: index,
+ deleteItem: () => {
+ onChange([...items].filter((i) => i.id !== item.id));
+
+ if (onAfterItemRemove) {
+ onAfterItemRemove(item);
+ }
+ },
+ })}
+
+
+ );
+ }}
+ removableByMove
+ />
{emptyState}
@@ -346,7 +259,7 @@ export const Repeater = (props) => {
onAfterItemAdd(newItem);
}
},
- disabled: addDisabled || canDelete,
+ disabled: addDisabled,
})}
{(item) => {
const { toggle, title, updateData } = item;
return (
-
-
+
{title}
updateData({ toggle: value })}
/>
-
+
+ {(item) => {
+ const { toggle, title, icon, updateData } = item;
+
+ return (
+
+ updateData({ toggle: value })}
+ />
+
+ );
+ }}
+
-
+
+
+ Test
+ Save
+
+ }
+ >
+ Demo
+
+