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

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

@@ -3,19 +3,12 @@ import PropTypes from "prop-types";
 import { CSSTransition } from "react-transition-group";
 import AnimateHeight from "react-animate-height";
 import ResizeObserver from "resize-observer-polyfill";
-import {
-    disableBodyScroll,
-    enableBodyScroll,
-    clearAllBodyScrollLocks,
-} from "body-scroll-lock";
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";
 import animateScrollTo from "animated-scroll-to";
 
 import { useReferredState } from "../../hooks/useReferredState";
 import { logErrorOrOutputToConsole } from "../../../common/errorUtils";
-import {
-    DIALOG_TRANSITION_STEP_DURATION,
-    DIALOG_SIZES,
-} from "../../../constants/organisms/dialog/dialog";
+import { DIALOG_TRANSITION_STEP_DURATION, DIALOG_SIZES } from "../../../constants/organisms/dialog/dialog";
 
 import s from "./dialog.module.scss";
 import { Close } from "../../atoms/buttons/Close/Close";
@@ -76,16 +69,12 @@ export const Dialog = ({
         dialogContainerOverflowDisabled: false,
         hideMobileBottomButtonSection: false,
     });
-    const [stepAnimationFinishedTrigger, setStepAnimationFinishedTrigger] =
-        useState(0);
+    const [stepAnimationFinishedTrigger, setStepAnimationFinishedTrigger] = useState(0);
     const [dialogVerticalHeight, setDialogVerticalHeight] = useState(300);
     const [currentStepRef, setCurrentStepRef] = useState({});
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-    const [buttonsConfiguration, updateButtonsConfigurationState] = useState(
-        buttonsConfigurationDefault
-    );
-    const [buttonControllingStep, updateButtonControllingStep] =
-        useReferredState("");
+    const [buttonsConfiguration, updateButtonsConfigurationState] = useState(buttonsConfigurationDefault);
+    const [buttonControllingStep, updateButtonControllingStep] = useReferredState("");
     const [isMultiStep, setIsMultiStep] = useState(false);
 
     const dialogWrapperRef = useRef();
@@ -94,10 +83,7 @@ export const Dialog = ({
     const resizeObserverRef = useRef(null);
 
     const updateButtonsConfiguration = (newConfiguration, stepName) => {
-        if (
-            buttonControllingStep.current === stepName ||
-            buttonControllingStep.current === ""
-        )
+        if (buttonControllingStep.current === stepName || buttonControllingStep.current === "")
             updateButtonsConfigurationState(newConfiguration);
     };
 
@@ -110,20 +96,17 @@ export const Dialog = ({
 
     const showCornerButtonForStep = (stepName, stepButtonShowParam) => {
         if (stepName !== "") {
-            let stepNameId = steps.findIndex((step) => step.name === stepName);
-            return stepButtonShowParam !== null &&
-                typeof stepButtonShowParam === "boolean"
+            let stepNameId = steps.findIndex(step => step.name === stepName);
+            return stepButtonShowParam !== null && typeof stepButtonShowParam === "boolean"
                 ? stepButtonShowParam
-                : stepNameId > steps.findIndex((step) => step.hidden === false);
+                : stepNameId > steps.findIndex(step => step.hidden === false);
         } else {
             return false;
         }
     };
 
     const nextStep = (animationControlEnabled = true) => {
-        const nextStep = steps.find(
-            (step, index) => index > currentStep && step.hidden === false
-        );
+        const nextStep = steps.find((step, index) => index > currentStep && step.hidden === false);
         if (nextStep) {
             goToStep(nextStep.name, animationControlEnabled);
             return true;
@@ -135,11 +118,9 @@ export const Dialog = ({
     const previousStep = (animationControlEnabled = true) => {
         const prevSteps = steps
             .map((step, index) => {
-                return index < currentStep && step.hidden === false
-                    ? step.name
-                    : undefined;
+                return index < currentStep && step.hidden === false ? step.name : undefined;
             })
-            .filter((item) => typeof item !== "undefined");
+            .filter(item => typeof item !== "undefined");
 
         if (prevSteps.length > 0) {
             goToStep(prevSteps[prevSteps.length - 1], animationControlEnabled);
@@ -149,46 +130,41 @@ export const Dialog = ({
         }
     };
 
-    const getStepClass = (stepName) => {
+    const getStepClass = stepName => {
         if (steps.length > 1) {
-            let stepNameId = steps.findIndex((step) => step.name === stepName);
-            let stepClass =
-                currentStep > stepNameId
-                    ? "prev"
-                    : currentStep === stepNameId
-                      ? "current"
-                      : "next";
+            let stepNameId = steps.findIndex(step => step.name === stepName);
+            let stepClass = currentStep > stepNameId ? "prev" : currentStep === stepNameId ? "current" : "next";
             return stepClass;
         } else {
             return "current";
         }
     };
 
-    const isCurrentStep = (stepName) => {
+    const isCurrentStep = stepName => {
         return steps[currentStep].name === stepName;
     };
 
     const toFirstStep = (animationControlEnabled = true) => {
         if (animationControlEnabled) enableAnimation();
-        setCurrentStep(steps.findIndex((step) => step.hidden === false));
+        setCurrentStep(steps.findIndex(step => step.hidden === false));
     };
 
     const goToStep = (stepName, animationControlEnabled = true) => {
         if (animationControlEnabled) enableAnimation();
         try {
-            let stepNameId = steps.findIndex((step) => step.name === stepName);
+            let stepNameId = steps.findIndex(step => step.name === stepName);
             setCurrentStep(stepNameId);
         } catch (e) {
             logErrorOrOutputToConsole(e);
         }
     };
 
-    const provideCurrentStepRef = (ref) => {
+    const provideCurrentStepRef = ref => {
         setCurrentStepRef(ref);
     };
 
     const disableAnimation = (dispatch = false) => {
-        updateAnimationConfiguration((prev) => {
+        updateAnimationConfiguration(prev => {
             return {
                 ...prev,
                 animateHeightTransitionEnabled: false,
@@ -200,7 +176,7 @@ export const Dialog = ({
             };
         });
         if (dispatch) {
-            updateAnimationConfiguration((prev) => {
+            updateAnimationConfiguration(prev => {
                 return {
                     ...prev,
                     triggerAnimationFinishedDispatcher: true,
@@ -211,8 +187,8 @@ export const Dialog = ({
 
     useEffect(() => {
         if (animationConfiguration.triggerAnimationFinishedDispatcher) {
-            setStepAnimationFinishedTrigger((prev) => prev + 1);
-            updateAnimationConfiguration((prev) => {
+            setStepAnimationFinishedTrigger(prev => prev + 1);
+            updateAnimationConfiguration(prev => {
                 return {
                     ...prev,
                     triggerAnimationFinishedDispatcher: false,
@@ -223,7 +199,7 @@ export const Dialog = ({
     }, [animationConfiguration]);
 
     const enableAnimation = () => {
-        updateAnimationConfiguration((prev) => {
+        updateAnimationConfiguration(prev => {
             return {
                 ...prev,
                 animateHeightTransitionEnabled: true,
@@ -255,7 +231,7 @@ export const Dialog = ({
 
     useEffect(() => {
         initControls &&
-            initControls((prev) => {
+            initControls(prev => {
                 return {
                     ...prev,
                     stepAnimationFinishedTrigger: stepAnimationFinishedTrigger,
@@ -266,7 +242,7 @@ export const Dialog = ({
 
     useEffect(() => {
         initControls &&
-            initControls((prev) => {
+            initControls(prev => {
                 return {
                     ...prev,
                     animationConfiguration: animationConfiguration,
@@ -278,32 +254,28 @@ export const Dialog = ({
     useEffect(() => {
         if (currentStepRef.current) {
             resizeObserverRef.current = new ResizeObserver((entries = []) => {
-                entries.forEach((entry) => {
+                entries.forEach(entry => {
                     const { width, height } = entry.contentRect;
                     setDimensions({ width, height });
                 });
             });
-            if (currentStepRef.current)
-                resizeObserverRef.current.observe(currentStepRef.current);
+            if (currentStepRef.current) resizeObserverRef.current.observe(currentStepRef.current);
             return () => {
-                if (resizeObserverRef.current)
-                    resizeObserverRef.current.disconnect();
+                if (resizeObserverRef.current) resizeObserverRef.current.disconnect();
             };
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentStepRef]);
 
     useEffect(() => {
-        setDialogVerticalHeight((prev) =>
-            prev !== 0 && dimensions.height === 0 ? prev : dimensions.height
-        );
+        setDialogVerticalHeight(prev => (prev !== 0 && dimensions.height === 0 ? prev : dimensions.height));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dimensions]);
 
     useEffect(() => {
         const childrenFormatted = children.length > 1 ? children : [children];
 
-        let stepsArr = childrenFormatted.map((child) => {
+        let stepsArr = childrenFormatted.map(child => {
             return {
                 name: child.props.stepName,
                 hidden: !!child.props.hidden,
@@ -392,9 +364,7 @@ export const Dialog = ({
                 className={
                     s["dialog"] +
                     " " +
-                    (dialogVerticalHeight > 1 || !isMultiStep
-                        ? ""
-                        : " " + s["hidden"]) +
+                    (dialogVerticalHeight > 1 || !isMultiStep ? "" : " " + s["hidden"]) +
                     (animationConfiguration.dialogContainerOverflowDisabled
                         ? " " + s["vertical-overflow-disabled"]
                         : "") +
@@ -402,18 +372,11 @@ export const Dialog = ({
                 }
                 ref={dialogRef}
             >
-                <div
-                    className={
-                        s["scrollable"] + (inline ? " " + s["inline"] : "")
-                    }
-                    ref={scrollableRef}
-                >
+                <div className={s["scrollable"] + (inline ? " " + s["inline"] : "")} ref={scrollableRef}>
                     <div
                         className={
                             s["dialog-wrapper"] +
-                            (animationConfiguration.wrapperWidthAnimationEnabled
-                                ? ""
-                                : " " + s["animation-disabled"]) +
+                            (animationConfiguration.wrapperWidthAnimationEnabled ? "" : " " + s["animation-disabled"]) +
                             (inline ? " " + s["inline"] : "")
                         }
                         ref={dialogWrapperRef}
@@ -443,11 +406,7 @@ export const Dialog = ({
                                 ""
                             ) : (
                                 <div className={s["dialog-wrapper-close"]}>
-                                    <Close
-                                        color="dark"
-                                        onClick={(e) => onClose()}
-                                        large
-                                    />
+                                    <Close color="dark" onClick={e => onClose()} large />
                                 </div>
                             )}
                             {children}
@@ -466,12 +425,10 @@ export const Dialog = ({
                         // classNames={s["fixed-buttons-container"]}
                         classNames={{
                             enter: s["fixed-buttons-container-enter"],
-                            enterActive:
-                                s["fixed-buttons-container-enter-active"],
+                            enterActive: s["fixed-buttons-container-enter-active"],
                             enterDone: s["fixed-buttons-container-enter-done"],
                             exit: s["fixed-buttons-container-exit"],
-                            exitActive:
-                                s["fixed-buttons-container-exit-active"],
+                            exitActive: s["fixed-buttons-container-exit-active"],
                             exitDone: s["fixed-buttons-container-exit-done"],
                         }}
                         unmountOnExit
@@ -491,14 +448,7 @@ Dialog.propTypes = {
     onClose: PropTypes.func.isRequired,
     initControls: PropTypes.func,
     children: PropTypes.node,
-    width: PropTypes.oneOf([
-        "550px",
-        "600px",
-        "700px",
-        "750px",
-        "800px",
-        "1000px",
-    ]),
+    width: PropTypes.oneOf(["550px", "600px", "700px", "750px", "800px", "1000px"]),
     dispatchDialogOpened: PropTypes.func,
     dispatchDialogClosed: PropTypes.func,
     inline: PropTypes.bool,