Fix scrollview demo (#3040)

DevExpress · Nov 27, 2023 · fde89fd · fde89fd
1 parent 7282ae0
commit fde89fd
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 48 deletions.
diff --git a/JSDemos/Demos/ScrollView/Overview/React/App.tsx b/JSDemos/Demos/ScrollView/Overview/React/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ScrollView, { ScrollViewTypes } from 'devextreme-react/scroll-view';
-import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
+import SelectBox from 'devextreme-react/select-box';
 import CheckBox, { CheckBoxTypes } from 'devextreme-react/check-box';
 import service from './data.ts';
 
@@ -17,10 +17,6 @@ const App = () => {
 
   const scrollViewRef = React.useRef(null);
 
-  const getInstance = (ref: { instance: any; }) => {
-    scrollViewRef.current = ref.instance;
-  };
-
   const updateContent = React.useCallback((args: UpdateContentArgs, eventName: string) => {
     const updateContentText = `\n Content has been updated on the ${eventName} event.\n\n`;
     if (updateContentTimer) {
@@ -45,26 +41,14 @@ const App = () => {
   }, [setPullDown]);
 
   const reachBottomValueChanged = React.useCallback((args: CheckBoxTypes.ValueChangedEvent) => {
-    scrollViewRef.current.option('onReachBottom', args.value ? updateBottomContent : null);
+    scrollViewRef.current.instance.option('onReachBottom', args.value ? updateBottomContent : null);
   }, [updateBottomContent]);
 
-  const scrollbarModelValueChanged = React.useCallback((args: SelectBoxTypes.ValueChangedEvent) => {
-    setShowScrollBarMode(args.value);
-  }, [setShowScrollBarMode]);
-
-  const scrollByContentValueChanged = React.useCallback((args: CheckBoxTypes.ValueChangedEvent) => {
-    setScrollByContent(args.value);
-  }, [setScrollByContent]);
-
-  const scrollByThumbValueChanged = React.useCallback((args: CheckBoxTypes.ValueChangedEvent) => {
-    setScrollByThumb(args.value);
-  }, [setScrollByThumb]);
-
   return (
     <div id="scrollview-demo">
       <ScrollView
         id="scrollview"
-        ref={getInstance}
+        ref={scrollViewRef}
         reachBottomText="Updating..."
         scrollByContent={scrollByContent}
         bounceEnabled={pullDown}
@@ -85,7 +69,7 @@ const App = () => {
             inputAttr={showScrollBarModeLabel}
             displayExpr="text"
             value={showScrollBarMode}
-            onValueChanged={scrollbarModelValueChanged}
+            onValueChange={setShowScrollBarMode}
           />
         </div>
         <div className="option">
@@ -106,14 +90,14 @@ const App = () => {
           <CheckBox
             text="Scroll by content"
             value={scrollByContent}
-            onValueChanged={scrollByContentValueChanged}
+            onValueChange={setScrollByContent}
           />
         </div>
         <div className="option">
           <CheckBox
             text="Scroll by thumb"
             value={scrollByThumb}
-            onValueChanged={scrollByThumbValueChanged}
+            onValueChange={setScrollByThumb}
           />
         </div>
       </div>

diff --git a/JSDemos/Demos/ScrollView/Overview/ReactJs/App.js b/JSDemos/Demos/ScrollView/Overview/ReactJs/App.js
@@ -13,9 +13,6 @@ const App = () => {
   const [scrollByThumb, setScrollByThumb] = React.useState(true);
   const [content, setContent] = React.useState(service.getContent());
   const scrollViewRef = React.useRef(null);
-  const getInstance = (ref) => {
-    scrollViewRef.current = ref.instance;
-  };
   const updateContent = React.useCallback(
     (args, eventName) => {
       const updateContentText = `\n Content has been updated on the ${eventName} event.\n\n`;
@@ -51,33 +48,18 @@ const App = () => {
   );
   const reachBottomValueChanged = React.useCallback(
     (args) => {
-      scrollViewRef.current.option('onReachBottom', args.value ? updateBottomContent : null);
+      scrollViewRef.current.instance.option(
+        'onReachBottom',
+        args.value ? updateBottomContent : null,
+      );
     },
     [updateBottomContent],
   );
-  const scrollbarModelValueChanged = React.useCallback(
-    (args) => {
-      setShowScrollBarMode(args.value);
-    },
-    [setShowScrollBarMode],
-  );
-  const scrollByContentValueChanged = React.useCallback(
-    (args) => {
-      setScrollByContent(args.value);
-    },
-    [setScrollByContent],
-  );
-  const scrollByThumbValueChanged = React.useCallback(
-    (args) => {
-      setScrollByThumb(args.value);
-    },
-    [setScrollByThumb],
-  );
   return (
     <div id="scrollview-demo">
       <ScrollView
         id="scrollview"
-        ref={getInstance}
+        ref={scrollViewRef}
         reachBottomText="Updating..."
         scrollByContent={scrollByContent}
         bounceEnabled={pullDown}
@@ -98,7 +80,7 @@ const App = () => {
             inputAttr={showScrollBarModeLabel}
             displayExpr="text"
             value={showScrollBarMode}
-            onValueChanged={scrollbarModelValueChanged}
+            onValueChange={setShowScrollBarMode}
           />
         </div>
         <div className="option">
@@ -119,14 +101,14 @@ const App = () => {
           <CheckBox
             text="Scroll by content"
             value={scrollByContent}
-            onValueChanged={scrollByContentValueChanged}
+            onValueChange={setScrollByContent}
           />
         </div>
         <div className="option">
           <CheckBox
             text="Scroll by thumb"
             value={scrollByThumb}
-            onValueChanged={scrollByThumbValueChanged}
+            onValueChange={setScrollByThumb}
           />
         </div>
       </div>