@kiwicom/orbit-components/lib/Modal/ModalFooter/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _ModalContext = require("../ModalContext");
var _useModalContextFunctions = _interopRequireDefault(require("../helpers/useModalContextFunctions"));
const getChildFlex = (flex, key) => {
  if (Array.isArray(flex)) {
    return flex.length !== 1 ? flex[key] || flex[0] : flex[0];
  }
  return flex;
};
const wrappedChildren = (children, flex) => {
  if (!Array.isArray(children)) return children;
  return React.Children.map(children, (child, key) => {
    if (! /*#__PURE__*/React.isValidElement(child)) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: "orbit-modal-footer-child pe-xs box-border p-0",
      style: {
        flex: getChildFlex(flex, key)
      },
      "data-test": "footer-el-wrapper"
    }, /*#__PURE__*/React.cloneElement(child, {
      // @ts-expect-error React.cloneElement  issue
      ref: child.ref ? node => {
        // Call the original ref, if any
        // @ts-expect-error React.cloneElement  issue
        const {
          ref
        } = child;
        if (typeof ref === "function") {
          ref(node);
        } else if (ref !== null) {
          ref.current = node;
        }
      } : null
    }));
  });
};
const ModalFooter = ({
  dataTest,
  children,
  flex = "0 1 auto"
}) => {
  const {
    isMobileFullPage,
    setFooterHeight
  } = React.useContext(_ModalContext.ModalContext);
  const containerRef = React.useRef(null);
  const childrenLength = React.Children.toArray(children).length;
  (0, _useModalContextFunctions.default)();
  React.useEffect(() => {
    function transitionEndHandler() {
      if (setFooterHeight && containerRef.current) {
        setFooterHeight(containerRef.current.clientHeight);
      }
    }
    const containerEl = containerRef.current;
    containerEl?.addEventListener("transitionend", transitionEndHandler);
    return () => {
      containerEl?.removeEventListener("transitionend", transitionEndHandler);
    };
  }, [setFooterHeight]);
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-modal-footer", "z-overlay bg-white-normal px-md pb-md box-border flex w-full pt-0", "duration-fast transition-shadow ease-in-out", "sm-lm:[&_.orbit-button-primitive]:h-form-box-normal sm-lm:[&_.orbit-button-primitive]:text-button-normal", childrenLength > 1 ? "lm:justify-between" : "lm:justify-end", !isMobileFullPage && "lm:rounded-b-modal", "[&_.orbit-modal-footer-child:last-of-type]:p-0"),
    ref: containerRef,
    "data-test": dataTest
  }, flex && wrappedChildren(children, flex));
};
var _default = ModalFooter;
exports.default = _default;