test(react): add reorder-group test

Author: brandyscarney

packages/react/test/base/src/App.tsx

@@ -35,6 +35,7 @@ import IonPopoverNested from './pages/overlay-components/IonPopoverNested';
 import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
 import OverlayComponents from './pages/overlay-components/OverlayComponents';
 import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
+import ReorderGroup from './pages/ReorderGroup';
 
 setupIonicReact();
 
@@ -65,6 +66,7 @@ const App: React.FC = () => (
         <Route path="/tabs-basic" component={TabsBasic} />
         <Route path="/icons" component={Icons} />
         <Route path="/inputs" component={Inputs} />
+        <Route path="/reorder-group" component={ReorderGroup} />
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>

packages/react/test/base/src/pages/Main.tsx

@@ -46,6 +46,9 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/inputs">
             <IonLabel>Inputs</IonLabel>
           </IonItem>
+          <IonItem routerLink="/reorder-group">
+            <IonLabel>Reorder Group</IonLabel>
+          </IonItem>
         </IonList>
       </IonContent>
     </IonPage>

packages/react/test/base/src/pages/ReorderGroup.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonReorder,
+  IonReorderGroup,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import type { ReorderEndCustomEvent } from '@ionic/react';
+
+const ReorderGroup: React.FC = () => {
+  const onReorderEnd = (event: ReorderEndCustomEvent) => {
+    if (event.detail.from !== event.detail.to) {
+      console.log('ionReorderEnd: Dragged from index', event.detail.from, 'to', event.detail.to);
+    } else {
+      console.log('ionReorderEnd: No position change occurred');
+    }
+
+    event.detail.complete();
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Reorder Group</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonReorderGroup disabled={false} onIonReorderEnd={onReorderEnd}>
+          <IonItem>
+            <IonReorder slot="end"></IonReorder>
+            <IonLabel>Item 1</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonReorder slot="end"></IonReorder>
+            <IonLabel>Item 2</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonReorder slot="end"></IonReorder>
+            <IonLabel>Item 3</IonLabel>
+          </IonItem>
+        </IonReorderGroup>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default ReorderGroup;