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

In this Package, we Provide Some Basic Components to Build Web App

"use strict";

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

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

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

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

var _DropBoxPositionMapping = require("../../../DropBox/DropBoxPositionMapping.js");

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

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

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

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

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

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,
      customStyle = props.customStyle,
      animationStyle = props.animationStyle;
  var isAbsolute = isAbsolutePositioningNeeded;

  var FireOnAnimationEnd = function FireOnAnimationEnd() {
    var eleClassList = subContainerRef && subContainerRef.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;
    }
  };

  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 = _DropBoxPositionMapping.positionMapping[boxPosition].direction;

  if (isAbsolute) {
    arrowPosition = arrowPosition ? arrowPosition : _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
    boxPosition = _DropBoxPositionMapping.positionMapping[boxPosition].positionStyle;
  } else {
    arrowPosition = _DropBoxPositionMapping.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,
    id: htmlId,
    role: role,
    "aria-multiselectable": ariaMultiselectable,
    "aria-labelledby": ariaLabelledby,
    tabIndex: tabIndex,
    onAnimationEnd: isAnimate && FireOnAnimationEnd,
    "data-a11y-focus-main-area": true
  }, /*#__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: subContainerRef
  }, 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;