SIKKA-5598[completed]

sikka-software · Nov 7, 2023 · 83607ef · 83607ef
1 parent 4780dba
commit 83607ef
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git a/components/elements/Dialog.tsx b/components/elements/Dialog.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "../util";
 import { Loading } from "./Loading";
+import { DirectionType } from "../types/commonTypes";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -130,35 +131,33 @@ interface DialogCarouselProps {
   children: React.ReactNode;
   stepsApi?: any;
   stepsRef?: any;
+  direction?: DirectionType;
 }
 
 const DialogCarousel: React.FC<DialogCarouselProps> = ({
   stepsApi,
   stepsRef,
   children,
+  direction,
 }) => {
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const steps = React.Children.toArray(children);
-
   React.useEffect(() => {
     if (stepsApi) {
       stepsApi.reInit();
     }
   }, [stepsApi, children]);
-
   return (
     <div className="hawa-overflow-hidden">
-      <div ref={stepsRef}>
+      <div ref={stepsRef} dir={direction}>
         <div
-          className="hawa-flex first-line:"
+          className="hawa-flex"
           style={{
             transition: "height 0.2s",
           }}
         >
           {React.Children.map(children, (child, index) => (
             <div
               className={cn(
-                " hawa-justify-center hawa-h-fit hawa-flex hawa-items-center hawa-flex-[0_0_100%]"
+                "hawa-justify-center hawa-h-fit hawa-flex hawa-items-center hawa-flex-[0_0_100%]"
               )}
               key={index}
             >

diff --git a/components/hooks/useDialogCarousel.ts b/components/hooks/useDialogCarousel.ts
@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import AutoHeight from "embla-carousel-auto-height";
 
-export const useDialogCarousel = () => {
+export const useDialogCarousel = (options?: any) => {
   const [emblaRef, emblaApi] = useEmblaCarousel(
-    { loop: false, watchDrag: false, startIndex: 0 },
+    { loop: false, watchDrag: false, startIndex: 0, ...options },
     [AutoHeight({ destroyHeight: "fit", active: true })]
   );
   // const [currentStep, setCurrentStep] = useState(initialStepId);

diff --git a/stories/ElementsStories/Dialog.stories.tsx b/stories/ElementsStories/Dialog.stories.tsx
@@ -253,15 +253,24 @@ export const Multistep: Story = {
 
 export const MultistepCarousel: Story = {
   name: "Multistep - Carousel",
-  render: (args: any) => {
-    const { emblaApi, emblaRef, nextStep, prevStep } = useDialogCarousel();
-
+  render: (args: any, globals: any) => {
+    const locale = globals.globals?.locale === "ar" ? "ar" : "en";
+    const direction = locale === "ar" ? "rtl" : "ltr";
+    setLocale(locale);
+    const { emblaApi, emblaRef, nextStep, prevStep } = useDialogCarousel({
+      direction: direction,
+    });
+    const [openDialog, setOpenDialog] = useState(false);
     return (
       <div className="hawa-flex hawa-flex-row hawa-gap-2">
-        <Dialog>
+        <Dialog onOpenChange={setOpenDialog} open={openDialog}>
           <DialogTrigger>Open Dialog</DialogTrigger>
-          <DialogContent persist>
-            <DialogCarousel stepsApi={emblaApi} stepsRef={emblaRef}>
+          <DialogContent persist dir={direction}>
+            <DialogCarousel
+              direction={direction}
+              stepsApi={emblaApi}
+              stepsRef={emblaRef}
+            >
               <DialogStep id={"step-1"}>
                 <DialogHeader>
                   <DialogTitle>Select Payment Method</DialogTitle>
@@ -324,7 +333,7 @@ export const MultistepCarousel: Story = {
                 </DialogHeader>
                 <ResultStep />
                 <DialogFooter>
-                  <Button onClick={() => nextStep()}>Next (Loop)</Button>
+                  <Button onClick={() => setOpenDialog(false)}>Close</Button>
                 </DialogFooter>
               </DialogStep>
             </DialogCarousel>
@@ -354,16 +363,18 @@ const PaymentMethodStep = () => (
 const FormFillStep = () => (
   <DialogBody className="hawa-flex hawa-flex-col hawa-gap-4">
     <Input label="Card number" placeholder="422 422 422 422" />
-    <Input label="Card number" placeholder="422 422 422 422" />
-    <Input label="Card number" placeholder="422 422 422 422" />
-    <Input label="Card number" placeholder="422 422 422 422" />
+    <Input label="Name on card" placeholder="Fulan AlFulani" />
+    <div className="hawa-flex hawa-flex-row hawa-gap-4">
+      <Input label="Expiry date" placeholder="10/25" />
+      <Input label="CVV" placeholder="123" />
+    </div>
   </DialogBody>
 );
 
 const ResultStep = () => (
   <div>
     <DialogBody className="hawa-flex hawa-flex-col hawa-gap-4">
-      You paid for pro plan for 22.50 SAR /month
+      You paid for pro plan for 45 SAR /month
     </DialogBody>
   </div>
 );