diff --git a/src/components/SortableChipsField/SortableChipsField.tsx b/src/components/SortableChipsField/SortableChipsField.tsx index 3cabbb43b..d5acee169 100644 --- a/src/components/SortableChipsField/SortableChipsField.tsx +++ b/src/components/SortableChipsField/SortableChipsField.tsx @@ -1,6 +1,6 @@ import { Typography } from "@material-ui/core"; import { makeStyles } from "@saleor/macaw-ui"; -import { ReorderAction } from "@saleor/types"; +import { ReorderAction, ReorderEvent } from "@saleor/types"; import React from "react"; import { SortableContainerProps } from "react-sortable-hoc"; @@ -15,6 +15,15 @@ const useStyles = makeStyles( color: theme.palette.primary.dark, marginBottom: theme.spacing(1), }, + chipHelper: { + display: "flex", + justifyContent: "center", + alignItems: "center", + padding: 0, + }, + grabbing: { + cursor: "grabbing", + }, errorText: { color: theme.palette.error.light, }, @@ -49,12 +58,23 @@ const SortableChipsField: React.FC = props => { } = props; const classes = useStyles(props); + const handleSortStart = () => { + document.body.classList.add(classes.grabbing); + }; + + const handleSortEnd = (event: ReorderEvent) => { + document.body.classList.remove(classes.grabbing); + onValueReorder(event); + }; + return (
{loading ? (