@rabbitio/ui-kit 1.0.0-beta.65 → 1.0.0-beta.68

package/src/components/organisms/Dialog/DialogStep/DialogStep.jsx

@@ -116,36 +116,29 @@ export const DialogStep = ({
 
     const [isMultiStep, setIsMultiStep] = useState(false);
     const [stepClass, setStepClass] = useState("");
-    const [wrapperDirectionSubclass, setWrapperDirectionSubclass] =
-        useState("");
-    const [unmountOnAnimationEndTrigger, setUnmountOnAnimationEndTrigger] =
-        useState(0);
+    const [wrapperDirectionSubclass, setWrapperDirectionSubclass] = useState("");
+    const [unmountOnAnimationEndTrigger, setUnmountOnAnimationEndTrigger] = useState(0);
     const [stepMounted, setStepMounted] = useState(false);
     const [isTopImagePassed, setIsTopImagePassed] = useState(false);
 
     const currentStepRef = useRef();
     // const { t } = useTranslation();
 
-    useEffect(
-        () => setIsTopImagePassed(!!image || !!ImageRaw),
-        [image, ImageRaw]
-    );
+    useEffect(() => setIsTopImagePassed(!!image || !!ImageRaw), [image, ImageRaw]);
 
     useEffect(() => {
         if (controls !== {} && stepName !== "") setIsMultiStep(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const handleTransitionEnd = (event) => {
+    const handleTransitionEnd = event => {
         if (
             isMultiStep &&
             isCurrentStep(stepName) &&
             event.propertyName === "opacity" &&
             event.target.classList[0] === s[DIALOG_STEP_CLASS]
         ) {
-            disableAnimation(
-                animationConfiguration.animateHeightTransitionEnabled
-            );
+            disableAnimation(animationConfiguration.animateHeightTransitionEnabled);
         }
 
         if (
@@ -180,11 +173,10 @@ export const DialogStep = ({
             if (getStepClass(stepName) === "current") setStepMounted(true);
 
             if (stepClass === "current" && getStepClass(stepName) !== "current")
-                setUnmountOnAnimationEndTrigger((prev) => prev + 1);
+                setUnmountOnAnimationEndTrigger(prev => prev + 1);
 
             setWrapperDirectionSubclass(
-                getStepClass(stepName) === "current" &&
-                    animationConfiguration.currentStepAnimationEnabled
+                getStepClass(stepName) === "current" && animationConfiguration.currentStepAnimationEnabled
                     ? stepClass === "prev"
                         ? "appear-from-left"
                         : "appear-from-right"
@@ -204,17 +196,14 @@ export const DialogStep = ({
         if (multiStep && isCurrentStep(stepName)) {
             setTimeout(
                 () => updateButtonControllingStep(stepName),
-                buttonControllingStep === ""
-                    ? 0
-                    : DIALOG_TRANSITION_STEP_DURATION
+                buttonControllingStep === "" ? 0 : DIALOG_TRANSITION_STEP_DURATION
             );
 
             setTimeout(() => {
                 updateButtonsConfiguration(
                     {
                         primaryButtonTitle: confirmButtonText,
-                        primaryButtonOnClick: (resetButtonLoader) =>
-                            confirmButtonClick(resetButtonLoader),
+                        primaryButtonOnClick: resetButtonLoader => confirmButtonClick(resetButtonLoader),
                         primaryButtonLoader: primaryButtonLoader,
                         primaryButtonTo: confirmButtonLink,
                         primaryButtonSetClickTrigger: setClickTrigger,
@@ -226,7 +215,7 @@ export const DialogStep = ({
                     stepName
                 );
 
-                updateAnimationConfiguration((prev) => {
+                updateAnimationConfiguration(prev => {
                     return {
                         ...prev,
                         hideMobileBottomButtonSection: false,
@@ -234,7 +223,7 @@ export const DialogStep = ({
                 });
             }, DIALOG_TRANSITION_STEP_DURATION * 3);
 
-            updateDialogConfiguration((prev) => {
+            updateDialogConfiguration(prev => {
                 return {
                     ...prev,
                     cornerBackButtonTitle: cornerBackButtonTitle,
@@ -247,17 +236,11 @@ export const DialogStep = ({
     }, [currentStep]);
 
     useEffect(() => {
-        if (
-            isMultiStep &&
-            isCurrentStep(stepName) &&
-            fixedButtons &&
-            (confirmButtonText || backButtonText)
-        ) {
+        if (isMultiStep && isCurrentStep(stepName) && fixedButtons && (confirmButtonText || backButtonText)) {
             updateButtonsConfiguration(
                 {
                     primaryButtonTitle: confirmButtonText,
-                    primaryButtonOnClick: (resetButtonLoader) =>
-                        confirmButtonClick(resetButtonLoader),
+                    primaryButtonOnClick: resetButtonLoader => confirmButtonClick(resetButtonLoader),
                     primaryButtonLoader: primaryButtonLoader,
                     primaryButtonTo: confirmButtonLink,
                     primaryButtonSetClickTrigger: setClickTrigger,
@@ -291,14 +274,11 @@ export const DialogStep = ({
                 s[DIALOG_STEP_CLASS] +
                 " " +
                 s[stepClass] +
-                (!isMultiStep ||
-                !animationConfiguration?.currentStepAnimationEnabled
+                (!isMultiStep || !animationConfiguration?.currentStepAnimationEnabled
                     ? " " + s["animation-disabled"]
                     : "") +
                 (!isMultiStep ? " " + s["single-step"] : "") +
-                (backgroundImage || backgroundImageMobile
-                    ? " " + s["with-background"]
-                    : "") +
+                (backgroundImage || backgroundImageMobile ? " " + s["with-background"] : "") +
                 (inline ? " " + s["inline"] : "")
             }
             ref={currentStepRef}
@@ -308,25 +288,15 @@ export const DialogStep = ({
             {stepMounted ? (
                 <>
                     {backgroundImage || backgroundImageMobile ? (
-                        <div
-                            className={
-                                s["dialog-step-background-image"] +
-                                " " +
-                                s[stepClass]
-                            }
-                        >
+                        <div className={s["dialog-step-background-image"] + " " + s[stepClass]}>
                             {backgroundImage ? (
                                 <img
                                     src={backgroundImage}
                                     className={
-                                        s[
-                                            "dialog-step-background-image-desktop"
-                                        ] +
+                                        s["dialog-step-background-image-desktop"] +
                                         " " +
                                         stepClass +
-                                        (!backgroundImageMobile
-                                            ? " " + s["primary"]
-                                            : "")
+                                        (!backgroundImageMobile ? " " + s["primary"] : "")
                                     }
                                     alt={"dialog step background"}
                                 />
@@ -335,14 +305,10 @@ export const DialogStep = ({
                                 <img
                                     src={backgroundImageMobile}
                                     className={
-                                        s[
-                                            "dialog-step-background-image-mobile"
-                                        ] +
+                                        s["dialog-step-background-image-mobile"] +
                                         " " +
                                         stepClass +
-                                        (!backgroundImage
-                                            ? " " + s["primary"]
-                                            : "")
+                                        (!backgroundImage ? " " + s["primary"] : "")
                                     }
                                     alt={"dialog step background"}
                                 />
@@ -359,37 +325,19 @@ export const DialogStep = ({
                             (inline ? " " + s["inline"] : "")
                         }
                     >
-                        {isMultiStep &&
-                        showCornerButtonForStep(
-                            stepName,
-                            showCornerBackButton
-                        ) ? (
-                            <div
-                                className={s["dialog-step-wrapper-back-button"]}
-                            >
+                        {isMultiStep && showCornerButtonForStep(stepName, showCornerBackButton) ? (
+                            <div className={s["dialog-step-wrapper-back-button"]}>
                                 <LinkButton
-                                    onClick={
-                                        cornerBackButtonClick
-                                            ? cornerBackButtonClick
-                                            : previousStep
-                                    }
+                                    onClick={cornerBackButtonClick ? cornerBackButtonClick : previousStep}
                                     content={
                                         cornerBackButtonTitle
                                             ? cornerBackButtonTitle
                                             : // : t("organisms.DialogWithSteps.DialogStep.default-back-button-title")
                                               "Back"
                                     }
-                                    IconComponent={
-                                        backgroundImage || backgroundImageMobile
-                                            ? arrowWhite
-                                            : arrowTosca
-                                    }
+                                    IconComponent={backgroundImage || backgroundImageMobile ? arrowWhite : arrowTosca}
                                     iconRotate={ICON_ROTATE_OPTIONS.rotate90}
-                                    isColored={
-                                        backgroundImage || backgroundImageMobile
-                                            ? false
-                                            : undefined
-                                    }
+                                    isColored={backgroundImage || backgroundImageMobile ? false : undefined}
                                 />
                             </div>
                         ) : null}
@@ -398,25 +346,17 @@ export const DialogStep = ({
                             className={
                                 s["dialog-step-wrapper-header"] +
                                 (headerTitleLeft ? " " + s["text-left"] : "") +
-                                (backgroundImage || backgroundImageMobile
-                                    ? " " + s["with-background-image"]
-                                    : "")
+                                (backgroundImage || backgroundImageMobile ? " " + s["with-background-image"] : "")
                             }
                         >
                             {image ? (
                                 <img
                                     src={image}
                                     alt="dialog popup logo"
-                                    className={
-                                        s["dialog-step-wrapper-header-logo"]
-                                    }
+                                    className={s["dialog-step-wrapper-header-logo"]}
                                 />
                             ) : ImageRaw ? (
-                                <div
-                                    className={
-                                        s["dialog-step-wrapper-header-logo"]
-                                    }
-                                >
+                                <div className={s["dialog-step-wrapper-header-logo"]}>
                                     <ImageRaw />
                                 </div>
                             ) : null}
@@ -424,83 +364,38 @@ export const DialogStep = ({
                             <div
                                 className={
                                     s["dialog-step-wrapper-header-title"] +
-                                    (!isTopImagePassed
-                                        ? " " + s["without-logo"]
-                                        : "") +
-                                    (!isTopImagePassed && headerTitleLeft
-                                        ? " " + s["close-button-padding"]
-                                        : "") +
-                                    (inline
-                                        ? " " + s["no-close-button-padding"]
-                                        : "")
+                                    (!isTopImagePassed ? " " + s["without-logo"] : "") +
+                                    (!isTopImagePassed && headerTitleLeft ? " " + s["close-button-padding"] : "") +
+                                    (inline ? " " + s["no-close-button-padding"] : "")
                                 }
                             >
                                 {titleIconCoin ? (
-                                    <div
-                                        className={
-                                            s[
-                                                "dialog-step-wrapper-header-title-coin-icon"
-                                            ]
-                                        }
-                                    >
+                                    <div className={s["dialog-step-wrapper-header-title-coin-icon"]}>
                                         <AssetIcon
                                             assetIconSrc={assetIconSrc}
-                                            assetIconProtocolSrc={
-                                                assetIconProtocolSrc
-                                            }
+                                            assetIconProtocolSrc={assetIconProtocolSrc}
                                             fallbackSrc={fallbackSrc}
                                         />
                                     </div>
                                 ) : titleIcon ? (
-                                    <div
-                                        className={
-                                            s[
-                                                "dialog-step-wrapper-header-title-icon"
-                                            ]
-                                        }
-                                    >
-                                        <img
-                                            src={titleIcon}
-                                            alt="coin icon to send"
-                                        />
+                                    <div className={s["dialog-step-wrapper-header-title-icon"]}>
+                                        <img src={titleIcon} alt="coin icon to send" />
                                     </div>
                                 ) : null}
                                 {titleLoadingDots ? (
-                                    <div
-                                        className={
-                                            s[
-                                                "dialog-step-wrapper-header-title-loading"
-                                            ]
-                                        }
-                                    >
+                                    <div className={s["dialog-step-wrapper-header-title-loading"]}>
                                         <LoadingDots isColored />
                                     </div>
                                 ) : (
                                     ""
                                 )}
-                                <div
-                                    className={
-                                        s[
-                                            "dialog-step-wrapper-header-title-text"
-                                        ]
-                                    }
-                                >
-                                    {!isTopImagePassed &&
-                                    showBackgroundTitle ? (
-                                        <BackgroundTitle text={title} />
-                                    ) : null}
+                                <div className={s["dialog-step-wrapper-header-title-text"]}>
+                                    {!isTopImagePassed && showBackgroundTitle ? <BackgroundTitle text={title} /> : null}
                                     <h5
                                         className={
-                                            s[
-                                                "dialog-step-wrapper-header-title-text-content"
-                                            ] +
-                                            (!isTopImagePassed
-                                                ? " " + s["without-logo"]
-                                                : "") +
-                                            (backgroundImage ||
-                                            backgroundImageMobile
-                                                ? " " + s["white"]
-                                                : "")
+                                            s["dialog-step-wrapper-header-title-text-content"] +
+                                            (!isTopImagePassed ? " " + s["without-logo"] : "") +
+                                            (backgroundImage || backgroundImageMobile ? " " + s["white"] : "")
                                         }
                                     >
                                         {title}
@@ -512,31 +407,12 @@ export const DialogStep = ({
                                 <p
                                     className={
                                         s["dialog-step-wrapper-header-text"] +
-                                        ` ${
-                                            !isTopImagePassed
-                                                ? s["without-logo"]
-                                                : ""
-                                        } ${
-                                            subtitleSmallMargin
-                                                ? s["small-margin"]
-                                                : ""
-                                        }${
-                                            subtitleNoMargin
-                                                ? s["no-margin"]
-                                                : ""
-                                        } ${
-                                            headerTitleLeft
-                                                ? s["text-left"]
-                                                : ""
-                                        } ${
-                                            breakSubtitleWords
-                                                ? s["break-words"]
-                                                : ""
-                                        } ${
-                                            backgroundImage ||
-                                            backgroundImageMobile
-                                                ? s["white"]
-                                                : ""
+                                        ` ${!isTopImagePassed ? s["without-logo"] : ""} ${
+                                            subtitleSmallMargin ? s["small-margin"] : ""
+                                        }${subtitleNoMargin ? s["no-margin"] : ""} ${
+                                            headerTitleLeft ? s["text-left"] : ""
+                                        } ${breakSubtitleWords ? s["break-words"] : ""} ${
+                                            backgroundImage || backgroundImageMobile ? s["white"] : ""
                                         }`
                                     }
                                 >
@@ -544,13 +420,7 @@ export const DialogStep = ({
                                 </p>
                             ) : null}
                         </div>
-                        <div
-                            className={
-                                s["dialog-step-wrapper-content"] +
-                                " " +
-                                s["align-" + contentAlign]
-                            }
-                        >
+                        <div className={s["dialog-step-wrapper-content"] + " " + s["align-" + contentAlign]}>
                             {children}
                         </div>
 
@@ -558,40 +428,23 @@ export const DialogStep = ({
                             <div
                                 className={
                                     s["dialog-step-wrapper-buttons"] +
-                                    ` ${
-                                        bigButtonMargins ? s["big-margin"] : ""
-                                    } ${
+                                    ` ${bigButtonMargins ? s["big-margin"] : ""} ${
                                         noButtonMargins ? s["no-margin"] : ""
-                                    } ${
-                                        isSecondaryButtonBig
-                                            ? s["space-between-layout"]
-                                            : ""
-                                    }`
+                                    } ${isSecondaryButtonBig ? s["space-between-layout"] : ""}`
                                 }
                             >
                                 <DialogButtons
                                     primaryButtonTitle={confirmButtonText}
-                                    primaryButtonOnClick={(resetButtonLoader) =>
-                                        confirmButtonClick(resetButtonLoader)
-                                    }
+                                    primaryButtonOnClick={resetButtonLoader => confirmButtonClick(resetButtonLoader)}
                                     primaryButtonLoader={primaryButtonLoader}
                                     primaryButtonTo={confirmButtonLink}
-                                    primaryButtonSetClickTrigger={
-                                        setClickTrigger
-                                    }
+                                    primaryButtonSetClickTrigger={setClickTrigger}
                                     secondaryButtonTitle={backButtonText}
                                     secondaryButtonOnClick={backButtonClick}
                                     secondaryButtonTo={backButtonTo}
                                     secondaryButtonBig={isSecondaryButtonBig}
-                                    withBackgroundImage={
-                                        !!backgroundImage ||
-                                        !!backgroundImageMobile
-                                    }
-                                    hideOnMobiles={
-                                        isMultiStep &&
-                                        fixedButtons &&
-                                        (backButtonText || confirmButtonText)
-                                    }
+                                    withBackgroundImage={!!backgroundImage || !!backgroundImageMobile}
+                                    hideOnMobiles={isMultiStep && fixedButtons && (backButtonText || confirmButtonText)}
                                 />
                             </div>
                         ) : (
@@ -636,14 +489,7 @@ DialogStep.propTypes = {
     breakSubtitleWords: PropTypes.bool,
     contentAlign: PropTypes.string,
     controls: PropTypes.object,
-    width: PropTypes.oneOf([
-        "550px",
-        "600px",
-        "700px",
-        "750px",
-        "800px",
-        "1000px",
-    ]),
+    width: PropTypes.oneOf(["550px", "600px", "700px", "750px", "800px", "1000px"]),
     height: PropTypes.string,
     backgroundImage: PropTypes.string,
     backgroundImageMobile: PropTypes.string,

package/src/components/organisms/Dialog/DialogStep/dialog-step.module.scss

@@ -150,14 +150,12 @@
 
         &.current {
             &.appear-from-left {
-                animation: slideFromLeft $transitionDuration $transitionEaseOut
-                    $transitionDuration * 4;
+                animation: slideFromLeft $transitionDuration $transitionEaseOut $transitionDuration * 4;
                 animation-fill-mode: both;
             }
 
             &.appear-from-right {
-                animation: slideFromRight $transitionDuration $transitionEaseOut
-                    $transitionDuration * 4;
+                animation: slideFromRight $transitionDuration $transitionEaseOut $transitionDuration * 4;
                 animation-fill-mode: both;
             }
         }