@zohodesk/components/lib/DropBox/DropBoxElement/DropBoxElement.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = DropBoxElement;

var _react = _interopRequireWildcard(require("react"));

var _useDropboxPosCalc2 = _interopRequireDefault(require("./useDropboxPosCalc"));

var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));

var _positioning = require("@zohodesk/dotkit/es/react/components/Popup/utils/positioning");

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _utils = require("@zohodesk/utils");

var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/* eslint-disable react/no-unknown-property */
function DropBoxElement(props) {
  var children = props.children,
      isAnimate = props.isAnimate,
      isArrow = props.isArrow,
      arrowPosition = props.arrowPosition,
      boxPosition = props.boxPosition,
      size = props.size,
      onClick = props.onClick,
      isActive = props.isActive,
      dataId = props.dataId,
      dataSelectorId = props.dataSelectorId,
      isModel = props.isModel,
      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
      tourId = props.tourId,
      htmlId = props.htmlId,
      a11y = props.a11y,
      tabIndex = props.tabIndex,
      palette = props.palette,
      subContainerRef = props.subContainerRef,
      getSubContainerRef = props.getSubContainerRef,
      customStyle = props.customStyle,
      animationStyle = props.animationStyle;
  var isAbsolute = isAbsolutePositioningNeeded;
  var internalSubContainerRef = (0, _react.useRef)(null);

  var FireOnAnimationEnd = function FireOnAnimationEnd() {
    var eleClassList = internalSubContainerRef.current && internalSubContainerRef.current.classList;
    var animationStyles = animationStyle == 'default' ? _DropBoxElementModule["default"].fadeInScale : _DropBoxElementModule["default"][animationStyle];
    animationStyles.split(' ').map(function (rmStyle) {
      if (eleClassList && eleClassList.contains(rmStyle)) {
        eleClassList.remove(rmStyle);
      }
    });
  };

  var getRef = function getRef(ele) {
    var getRef = props.getRef,
        forwardRef = props.forwardRef;
    getRef && getRef(ele);

    if (forwardRef) {
      forwardRef.current = ele;
    }
  };

  var setSubContainerRef = (0, _react.useCallback)(function (ele) {
    internalSubContainerRef.current = ele; // Backward compatability: legacy `subContainerRef`.

    if (subContainerRef) {
      subContainerRef.current = ele;
    }

    getSubContainerRef && getSubContainerRef(ele);
  }, [subContainerRef, getSubContainerRef]);

  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
    isAbsolute = true;
  }

  var role = a11y.role,
      ariaMultiselectable = a11y.ariaMultiselectable,
      ariaLabelledby = a11y.ariaLabelledby;
  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
  var boxDirection = _positioning.positionMapping[boxPosition].direction;

  if (isAbsolute) {
    arrowPosition = arrowPosition ? arrowPosition : _positioning.positionMapping[boxPosition].arrowPosition;
    boxPosition = _positioning.positionMapping[boxPosition].positionStyle;
  } else {
    arrowPosition = _positioning.positionMapping[boxPosition].arrowPosition;
  }

  var _useDropboxPosCalc = (0, _useDropboxPosCalc2["default"])(props),
      arrowstyle = _useDropboxPosCalc.arrowstyle,
      boxstyle = _useDropboxPosCalc.boxstyle,
      needBoxStyle = _useDropboxPosCalc.needBoxStyle;

  var mergedStyle = (0, _utils.mergeStyle)(_DropBoxElementModule["default"], customStyle);

  var _cssJSLogic = (0, _cssJSLogic2["default"])({
    props: props,
    style: mergedStyle,
    customState: {
      boxPosition: boxPosition,
      boxDirection: boxDirection,
      boxstyle: boxstyle,
      needBoxStyle: needBoxStyle,
      isAbsolute: isAbsolute
    }
  }),
      boxClassName = _cssJSLogic.boxClassName,
      subContainerClass = _cssJSLogic.subContainerClass,
      inlineStyle = _cssJSLogic.inlineStyle;

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: boxClassName,
    "data-id": "".concat(dataId),
    "data-test-id": "".concat(dataId),
    "data-selector-id": dataSelectorId,
    ref: getRef,
    style: inlineStyle,
    "data-tour": tourId,
    "data-position": boxPosition,
    "data-box-direction": boxDirection,
    "data-arrow-position": arrowPosition,
    id: htmlId,
    role: role,
    "aria-multiselectable": ariaMultiselectable,
    "aria-labelledby": ariaLabelledby,
    tabIndex: tabIndex,
    onAnimationEnd: isAnimate && FireOnAnimationEnd,
    "data-a11y-focus-main-area": true,
    "dot-ui-element": "dropbox"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    tabIndex: "-1",
    className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),
    onClick: onClick,
    "data-id": "".concat(dataId, "_subcontainer"),
    "data-test-id": "".concat(dataId, "_subcontainer"),
    "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
    ref: setSubContainerRef
  }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
    className: _DropBoxElementModule["default"].closeBar
  }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
    className: _DropBoxElementModule["default"].arrowPosition,
    style: arrowstyle,
    "data-id": "".concat(dataId, "_arrow"),
    "data-test-id": "".concat(dataId, "_arrow"),
    "data-selector-id": "".concat(dataSelectorId, "_arrow")
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _DropBoxElementModule["default"].arrowShape
  })), children));
}

DropBoxElement.propTypes = _propTypes.DropBoxElementPropTypes;
DropBoxElement.defaultProps = _defaultProps.DropBoxElementDefaultProps;