Item drag

Item UI drag, xuất hiện khi cần drag item có chứa ảnh , title và action (xuất hiện để reorder item trong collection_list, product_list...)

Ví dụ

import { ItemDragEdit } from '@xobuilder/ui';
import { Editor } from '@xobuilder/editor';
import { DeleteMajor } from '@shopify/polaris-icons';

const { Dnd } = Editor;

const Demo: FC = () => {
  const onRemoveItem = () => {};

  return (
    <ItemDragEdit
      title={'Item content'}
      image={'item image'}
      renderPrimaryContent={children => (
        <Dnd.Item id={'id'} groupId={'groupId'} outsideOnly>
          {children}
        </Dnd.Item>
      )}
      action={{
        icon: DeleteMajor,
        onAction: onRemoveItem,
      }}
    />
  );
};

Props

ItemDragEditProps

Name	Type	Default	Description
title	string	-	Item content
renderPrimaryContent	(children: ReactNode) => ReactNode	-	Function to render primary content inside Dnd.Item
image	string	-	Image of the item
action	DragItemAction	-	Action of the item.

DragItemAction

Name	Type	Description
icon	React.ReactElement | IconSource	Icon displayed as a button. Can use Shopify icon
onAction	() => void	Action handler function