fix the Sortable > Customization demo (#3113)

* fix the Sortable > Customization demo * save a flag not a component in the state
DevExpress · Jan 19, 2024 · 594f5c3 · 594f5c3
1 parent 5130d5a
commit 594f5c3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/JSDemos/Demos/Sortable/Customization/React/App.tsx b/JSDemos/Demos/Sortable/Customization/React/App.tsx
@@ -29,7 +29,7 @@ const App = () => {
   const [scrollSpeed, setScrollSpeed] = useState(30);
   const [scrollSensitivity, setScrollSensitivity] = useState(60);
   const [handle, setHandle] = useState('');
-  const [dragComponent, setDragComponent] = useState(null);
+  const [useDragComponent, setUseDragComponent] = useState(false);
   const [cursorOffset, setCursorOffset] = useState(null);
 
   const onDragStart = useCallback((e: SortableTypes.DragStartEvent) => {
@@ -73,9 +73,9 @@ const App = () => {
   }, [setHandle]);
 
   const onDragTemplateChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
-    setDragComponent(e.value ? DragItem : null);
+    setUseDragComponent(!!e.value);
     setCursorOffset(e.value ? { x: 10, y: 20 } : null);
-  }, [setDragComponent, setCursorOffset]);
+  }, [setUseDragComponent, setCursorOffset]);
 
   return (
     <div id="demo-container">
@@ -94,7 +94,7 @@ const App = () => {
             scrollSpeed={scrollSpeed}
             scrollSensitivity={scrollSensitivity}
             handle={handle}
-            dragComponent={dragComponent}
+            dragComponent={useDragComponent ? DragItem : null}
             cursorOffset={cursorOffset}
             onDragStart={onDragStart}
             onReorder={onReorder}

diff --git a/JSDemos/Demos/Sortable/Customization/ReactJs/App.js b/JSDemos/Demos/Sortable/Customization/ReactJs/App.js
@@ -27,7 +27,7 @@ const App = () => {
   const [scrollSpeed, setScrollSpeed] = useState(30);
   const [scrollSensitivity, setScrollSensitivity] = useState(60);
   const [handle, setHandle] = useState('');
-  const [dragComponent, setDragComponent] = useState(null);
+  const [useDragComponent, setUseDragComponent] = useState(false);
   const [cursorOffset, setCursorOffset] = useState(null);
   const onDragStart = useCallback(
     (e) => {
@@ -86,10 +86,10 @@ const App = () => {
   );
   const onDragTemplateChanged = useCallback(
     (e) => {
-      setDragComponent(e.value ? DragItem : null);
+      setUseDragComponent(!!e.value);
       setCursorOffset(e.value ? { x: 10, y: 20 } : null);
     },
-    [setDragComponent, setCursorOffset],
+    [setUseDragComponent, setCursorOffset],
   );
   return (
     <div id="demo-container">
@@ -108,7 +108,7 @@ const App = () => {
             scrollSpeed={scrollSpeed}
             scrollSensitivity={scrollSensitivity}
             handle={handle}
-            dragComponent={dragComponent}
+            dragComponent={useDragComponent ? DragItem : null}
             cursorOffset={cursorOffset}
             onDragStart={onDragStart}
             onReorder={onReorder}