@rabbitio/ui-kit 1.0.0-beta.43 → 1.0.0-beta.46

package/src/components/molecules/AmountInput/amount-input.module.scss

@@ -0,0 +1,189 @@
+@import "../../../../styles/index";
+
+.amount-input-container {
+    padding: Padding("5");
+    background: SolidColor("lightsmoke");
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: space-between;
+    transition: 0.2s box-shadow ease;
+
+    &.upper-form-position {
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+
+    &.lower-form-position {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+    }
+
+    &.error-encountered {
+        box-shadow: $shadowOutlineError !important;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            &:not(.focus) {
+                box-shadow: $shadowOutlineHover;
+                transition: 0.02s box-shadow ease;
+            }
+        }
+    }
+
+    &.focus {
+        box-shadow: $shadowOutlineActive;
+    }
+
+    &-input-wrapper {
+        width: 100%;
+
+        &.disabled {
+            opacity: 0.15;
+        }
+
+        &.bottom-margin {
+            @media (max-width: $tablet-width) {
+                margin-bottom: Margin("5");
+            }
+        }
+
+        .asset-balance {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            svg {
+                margin-left: -1px;
+                margin-right: 4px;
+
+                path {
+                    transition: stroke 0.2s ease;
+                }
+            }
+
+            &.red {
+                svg path {
+                    stroke: SolidColor("red");
+                }
+
+                p {
+                    color: SolidColor("red");
+                }
+            }
+
+            p {
+                color: SolidColor("grey");
+                transition: color 0.2s ease;
+
+                span {
+                    opacity: 0.5;
+                }
+            }
+        }
+
+        .requested-amount-coin {
+            font-size: 20px;
+            font-weight: $bold;
+            color: SolidColor("dark");
+            width: 100%;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            &::after {
+                content: " ";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                box-shadow: -20px 0px 10px -15px SolidColor(lightsmoke) inset;
+                pointer-events: none;
+                user-select: none;
+            }
+
+            &-currency,
+            &-input {
+                font-size: inherit;
+                font-weight: inherit;
+                font-family: inherit;
+                color: inherit;
+                margin: 0;
+            }
+
+            &-currency {
+                user-select: none;
+                padding-right: 4px;
+                white-space: nowrap;
+            }
+
+            &-input {
+                border: none;
+                background: transparent;
+                padding: 0;
+                width: 100%;
+                flex-grow: 1;
+                margin: 0;
+
+                &::placeholder {
+                    color: rgba(SolidColor("dark"), 0.3);
+                }
+            }
+
+            &-skeleton {
+                height: 24px;
+                width: 40%;
+                display: flex;
+                align-items: center;
+
+                &-content {
+                    @extend %skeleton-big-text;
+                }
+            }
+        }
+
+        .requested-amount-fiat {
+            color: SolidColor("grey");
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+
+            &-currency,
+            &-input,
+            &-placeholder {
+                font-size: inherit;
+                font-weight: inherit;
+                font-family: inherit;
+                color: inherit;
+            }
+
+            &-currency {
+                user-select: none;
+                padding-right: 4px;
+                white-space: nowrap;
+            }
+
+            &-input {
+                background: none;
+                outline: none;
+                border: none;
+                padding: 0;
+                width: 100%;
+                flex-grow: 1;
+                margin: 0;
+
+                &::placeholder {
+                    color: rgba(SolidColor("dark"), 0.3);
+                }
+            }
+
+            &-placeholder {
+                cursor: pointer;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,515 @@
+import React, { useEffect, useRef, useState } from "react";
+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 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 s from "./dialog.module.scss";
+import { Close } from "../../atoms/buttons/Close/Close";
+import { DialogButtons } from "./DialogButtons/DialogButtons";
+
+/**
+ * Flexible modal window component with support for multiple steps. Can be used as an inline component and inserted in regular layouts. Only <DialogStep> components can be passed as children.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} props.showDialog - Step name, specified on the root dialog level, used as an ID for dialog navigation.
+ * @param {string} props.onClose - Handler for when the dialog is closed.
+ * @param {string} props.initControls - State-setting function to initialize the dialog-to-step connection.
+ * @param {string} props.children - Content of the dialog window, supports only dialog step components.
+ * @param {Coin} props.width - Width in pixels, formatted as "1000px" and passed a string. Values should be used from constants.
+ * @param {string} props.dispatchDialogOpened - Dispatch upon the dialog closure.
+ * @param {string} props.dispatchDialogClosed - Dispatch upon the dialog opening.
+ * @param {function} props.inline - If false or not set, dialog will be opened as a modal window above the UI. If true, inline mode will be used, making the dialog a regular block, that can be placed inside a regular layout. Default: false.
+ * @returns {JSX.Element} React component
+ */
+export const Dialog = ({
+    showDialog = false,
+    onClose = () => {},
+    initControls = null,
+    children = [],
+    width = "",
+    dispatchDialogOpened = () => {},
+    dispatchDialogClosed = () => {},
+    inline = false,
+}) => {
+    const buttonsConfigurationDefault = {
+        primaryButtonTitle: null,
+        primaryButtonOnClick: null,
+        primaryButtonLoader: false,
+        primaryButtonTo: null,
+        primaryButtonSetClickTrigger: () => {},
+        secondaryButtonTitle: null,
+        secondaryButtonOnClick: null,
+        secondaryButtonTo: null,
+        fixedButtonsEnabled: false,
+    };
+
+    const [showDialogProcessed, setShowDialogProcessed] = useState(false);
+    const [currentStep, setCurrentStep] = useState(0);
+    const [steps, setSteps] = useState(null);
+    const [dialogConfiguration, updateDialogConfiguration] = useState({
+        cornerBackButtonTitle: "",
+        customWidth: width !== "" ? width : DIALOG_SIZES.small.width,
+    });
+    const [animationConfiguration, updateAnimationConfiguration] = useState({
+        animateHeightDelay: DIALOG_TRANSITION_STEP_DURATION * 2,
+        animateHeightTransitionSpeed: DIALOG_TRANSITION_STEP_DURATION,
+        animateHeightTransitionEnabled: false,
+        wrapperWidthAnimationEnabled: false,
+        currentStepAnimationEnabled: false,
+        cornerBackButtonAnimationEnabled: false,
+        triggerAnimationFinishedDispatcher: false,
+        dialogContainerOverflowDisabled: false,
+        hideMobileBottomButtonSection: false,
+    });
+    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 [isMultiStep, setIsMultiStep] = useState(false);
+
+    const dialogWrapperRef = useRef();
+    const dialogRef = useRef();
+    const scrollableRef = useRef();
+    const resizeObserverRef = useRef(null);
+
+    const updateButtonsConfiguration = (newConfiguration, stepName) => {
+        if (
+            buttonControllingStep.current === stepName ||
+            buttonControllingStep.current === ""
+        )
+            updateButtonsConfigurationState(newConfiguration);
+    };
+
+    useEffect(() => {
+        if (showDialog) disableAnimation();
+        setShowDialogProcessed(showDialog);
+        showDialog ? dispatchDialogOpened() : dispatchDialogClosed();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showDialog]);
+
+    const showCornerButtonForStep = (stepName, stepButtonShowParam) => {
+        if (stepName !== "") {
+            let stepNameId = steps.findIndex((step) => step.name === stepName);
+            return stepButtonShowParam !== null &&
+                typeof stepButtonShowParam === "boolean"
+                ? stepButtonShowParam
+                : 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
+        );
+        if (nextStep) {
+            goToStep(nextStep.name, animationControlEnabled);
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    const previousStep = (animationControlEnabled = true) => {
+        const prevSteps = steps
+            .map((step, index) => {
+                return index < currentStep && step.hidden === false
+                    ? step.name
+                    : undefined;
+            })
+            .filter((item) => typeof item !== "undefined");
+
+        if (prevSteps.length > 0) {
+            goToStep(prevSteps[prevSteps.length - 1], animationControlEnabled);
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    const getStepClass = (stepName) => {
+        if (steps.length > 1) {
+            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) => {
+        return steps[currentStep].name === stepName;
+    };
+
+    const toFirstStep = (animationControlEnabled = true) => {
+        if (animationControlEnabled) enableAnimation();
+        setCurrentStep(steps.findIndex((step) => step.hidden === false));
+    };
+
+    const goToStep = (stepName, animationControlEnabled = true) => {
+        if (animationControlEnabled) enableAnimation();
+        try {
+            let stepNameId = steps.findIndex((step) => step.name === stepName);
+            setCurrentStep(stepNameId);
+        } catch (e) {
+            logErrorOrOutputToConsole(e);
+        }
+    };
+
+    const provideCurrentStepRef = (ref) => {
+        setCurrentStepRef(ref);
+    };
+
+    const disableAnimation = (dispatch = false) => {
+        updateAnimationConfiguration((prev) => {
+            return {
+                ...prev,
+                animateHeightTransitionEnabled: false,
+                wrapperWidthAnimationEnabled: false,
+                currentStepAnimationEnabled: false,
+                cornerBackButtonAnimationEnabled: false,
+                dialogContainerOverflowDisabled: false,
+                hideMobileBottomButtonSection: false,
+            };
+        });
+        if (dispatch) {
+            updateAnimationConfiguration((prev) => {
+                return {
+                    ...prev,
+                    triggerAnimationFinishedDispatcher: true,
+                };
+            });
+        }
+    };
+
+    useEffect(() => {
+        if (animationConfiguration.triggerAnimationFinishedDispatcher) {
+            setStepAnimationFinishedTrigger((prev) => prev + 1);
+            updateAnimationConfiguration((prev) => {
+                return {
+                    ...prev,
+                    triggerAnimationFinishedDispatcher: false,
+                };
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationConfiguration]);
+
+    const enableAnimation = () => {
+        updateAnimationConfiguration((prev) => {
+            return {
+                ...prev,
+                animateHeightTransitionEnabled: true,
+                wrapperWidthAnimationEnabled: true,
+                currentStepAnimationEnabled: true,
+                cornerBackButtonAnimationEnabled: true,
+                dialogContainerOverflowDisabled: true,
+                hideMobileBottomButtonSection: true,
+            };
+        });
+    };
+
+    const scrollDialogToTop = () => {
+        animateScrollTo(0, {
+            elementToScroll: dialogRef?.current,
+            minDuration: DIALOG_TRANSITION_STEP_DURATION,
+            maxDuration: DIALOG_TRANSITION_STEP_DURATION,
+        });
+        animateScrollTo(0, {
+            elementToScroll: scrollableRef?.current,
+            minDuration: DIALOG_TRANSITION_STEP_DURATION,
+            maxDuration: DIALOG_TRANSITION_STEP_DURATION,
+        });
+    };
+
+    const clearButtonsConfiguration = () => {
+        updateButtonsConfigurationState(buttonsConfigurationDefault);
+    };
+
+    useEffect(() => {
+        initControls &&
+            initControls((prev) => {
+                return {
+                    ...prev,
+                    stepAnimationFinishedTrigger: stepAnimationFinishedTrigger,
+                };
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stepAnimationFinishedTrigger]);
+
+    useEffect(() => {
+        initControls &&
+            initControls((prev) => {
+                return {
+                    ...prev,
+                    animationConfiguration: animationConfiguration,
+                };
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationConfiguration]);
+
+    useEffect(() => {
+        if (currentStepRef.current) {
+            resizeObserverRef.current = new ResizeObserver((entries = []) => {
+                entries.forEach((entry) => {
+                    const { width, height } = entry.contentRect;
+                    setDimensions({ width, height });
+                });
+            });
+            if (currentStepRef.current)
+                resizeObserverRef.current.observe(currentStepRef.current);
+            return () => {
+                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
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dimensions]);
+
+    useEffect(() => {
+        const childrenFormatted = children.length > 1 ? children : [children];
+
+        let stepsArr = childrenFormatted.map((child) => {
+            return {
+                name: child.props.stepName,
+                hidden: !!child.props.hidden,
+            };
+        });
+        setSteps(stepsArr);
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        setIsMultiStep(typeof initControls === "function");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initControls]);
+
+    useEffect(() => {
+        if (steps)
+            initControls &&
+                initControls({
+                    nextStep: nextStep,
+                    previousStep: previousStep,
+                    currentStep: currentStep,
+                    isCurrentStep: isCurrentStep,
+                    getStepClass: getStepClass,
+                    updateDialogConfiguration: updateDialogConfiguration,
+                    toFirstStep: toFirstStep,
+                    goToStep: goToStep,
+                    provideCurrentStepRef: provideCurrentStepRef,
+                    animationConfiguration: animationConfiguration,
+                    disableAnimation: disableAnimation,
+                    enableAnimation: enableAnimation,
+                    showCornerButtonForStep: showCornerButtonForStep,
+                    stepAnimationFinishedTrigger: stepAnimationFinishedTrigger,
+                    scrollDialogToTop: scrollDialogToTop,
+                    updateButtonsConfiguration: updateButtonsConfiguration,
+                    clearButtonsConfiguration: clearButtonsConfiguration,
+                    buttonControllingStep: buttonControllingStep.current,
+                    updateButtonControllingStep: updateButtonControllingStep,
+                    updateAnimationConfiguration: updateAnimationConfiguration,
+                    inline: inline,
+                });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentStep, steps]);
+
+    useEffect(() => {
+        return () => {
+            clearAllBodyScrollLocks();
+            updateButtonControllingStep("");
+            clearButtonsConfiguration();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <CSSTransition
+            in={showDialogProcessed}
+            timeout={DIALOG_TRANSITION_STEP_DURATION}
+            classNames={
+                inline
+                    ? undefined
+                    : {
+                          enter: s["dialog-transition-enter"],
+                          enterActive: s["dialog-transition-enter-active"],
+                          exit: s["dialog-transition-exit"],
+                          exitActive: s["dialog-transition-exit-active"],
+                      }
+            }
+            unmountOnExit
+            onExited={() => {
+                disableAnimation(false);
+                clearButtonsConfiguration();
+                updateButtonControllingStep("");
+            }}
+            onExiting={() => {
+                if (inline) return;
+                enableBodyScroll(scrollableRef.current);
+                enableBodyScroll(dialogRef.current);
+            }}
+            onEntered={() => {
+                if (inline) return;
+                disableBodyScroll(scrollableRef.current);
+                disableBodyScroll(dialogRef.current);
+            }}
+        >
+            <div
+                className={
+                    s["dialog"] +
+                    " " +
+                    (dialogVerticalHeight > 1 || !isMultiStep
+                        ? ""
+                        : " " + s["hidden"]) +
+                    (animationConfiguration.dialogContainerOverflowDisabled
+                        ? " " + s["vertical-overflow-disabled"]
+                        : "") +
+                    (inline ? " " + s["inline"] : "")
+                }
+                ref={dialogRef}
+            >
+                <div
+                    className={
+                        s["scrollable"] + (inline ? " " + s["inline"] : "")
+                    }
+                    ref={scrollableRef}
+                >
+                    <div
+                        className={
+                            s["dialog-wrapper"] +
+                            (animationConfiguration.wrapperWidthAnimationEnabled
+                                ? ""
+                                : " " + s["animation-disabled"]) +
+                            (inline ? " " + s["inline"] : "")
+                        }
+                        ref={dialogWrapperRef}
+                        style={
+                            dialogConfiguration.customWidth !== ""
+                                ? { maxWidth: dialogConfiguration.customWidth }
+                                : width !== ""
+                                  ? { maxWidth: width }
+                                  : null
+                        }
+                    >
+                        <AnimateHeight
+                            duration={
+                                animationConfiguration.animateHeightTransitionEnabled
+                                    ? animationConfiguration.animateHeightTransitionSpeed
+                                    : 0
+                            }
+                            delay={
+                                animationConfiguration.animateHeightTransitionEnabled
+                                    ? animationConfiguration.animateHeightDelay
+                                    : 0
+                            }
+                            height={isMultiStep ? dialogVerticalHeight : "auto"}
+                            contentClassName={s["dialog-wrapper-rah-content"]}
+                        >
+                            {inline ? (
+                                ""
+                            ) : (
+                                <div className={s["dialog-wrapper-close"]}>
+                                    <Close
+                                        color="dark"
+                                        onClick={(e) => onClose()}
+                                        large
+                                    />
+                                </div>
+                            )}
+                            {children}
+                        </AnimateHeight>
+                    </div>
+                </div>
+                {
+                    <CSSTransition
+                        in={
+                            (!!buttonsConfiguration.primaryButtonTitle ||
+                                !!buttonsConfiguration.secondaryButtonTitle) &&
+                            !animationConfiguration.hideMobileBottomButtonSection &&
+                            buttonsConfiguration.fixedButtonsEnabled
+                        }
+                        timeout={DIALOG_TRANSITION_STEP_DURATION}
+                        // classNames={s["fixed-buttons-container"]}
+                        classNames={{
+                            enter: s["fixed-buttons-container-enter"],
+                            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"],
+                            exitDone: s["fixed-buttons-container-exit-done"],
+                        }}
+                        unmountOnExit
+                    >
+                        <div className={s["fixed-buttons-container"]}>
+                            <DialogButtons {...buttonsConfiguration} />
+                        </div>
+                    </CSSTransition>
+                }
+            </div>
+        </CSSTransition>
+    );
+};
+
+Dialog.propTypes = {
+    showDialog: PropTypes.bool,
+    onClose: PropTypes.func.isRequired,
+    initControls: PropTypes.func,
+    children: PropTypes.node,
+    width: PropTypes.oneOf([
+        "550px",
+        "600px",
+        "700px",
+        "750px",
+        "800px",
+        "1000px",
+    ]),
+    dispatchDialogOpened: PropTypes.func,
+    dispatchDialogClosed: PropTypes.func,
+    inline: PropTypes.bool,
+};
+
+Dialog.defaultProps = {
+    showDialog: false,
+    onClose: () => {},
+    initControls: null,
+    children: [],
+    dispatchDialogOpened: () => {},
+    dispatchDialogClosed: () => {},
+    inline: false,
+};