cometchat-react-ui-kit2/dist/Shared/UtilityComponents/CometChatPopover/style.js

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.toolTipWrapperStyle = exports.toolTipStyles = exports.toolTipContentStyle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _constants = require("./constants");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var toolTipWrapperStyle = function toolTipWrapperStyle(props) {
  var axis = _constants.tipPositionMapping[props.position];
  var x = props !== null && props !== void 0 && props.x ? props.x : "0";
  var y = props !== null && props !== void 0 && props.y ? props.y : "0";
  var width = parseInt(props.style.width);
  var height = parseInt(props.style.height);
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var percent = 0;
  if (axis === "x") {
    percent = 100 * x / windowWidth;
  } else {
    percent = 100 * y / windowHeight;
  }
  var axisPosition = {};
  if (axis === "x") {
    axisPosition = {
      left: "".concat(x - width * (percent / 100), "px")
    };
  } else {
    axisPosition = {
      top: "".concat(y - height * (percent / 100), "px")
    };
  }
  var positionStyle = {};
  if (props.position === _constants.positions.top) {
    positionStyle = {
      top: "".concat(y - parseInt(height) - 20, "px")
    };
  } else if (props.position === _constants.positions.bottom) {
    positionStyle = {
      top: "".concat(y + 20, "px")
    };
  } else if (props.position === _constants.positions.left) {
    positionStyle = {
      left: "".concat(x - parseInt(width) - 30, "px")
    };
  } else if (props.position === _constants.positions.right) {
    positionStyle = {
      left: "".concat(x + 25, "px")
    };
  }
  var styles = {};
  if (props.x || props.y) {
    var _props$theme, _props$theme$palette;
    styles = _objectSpread(_objectSpread({
      boxShadow: props.style.boxShadow,
      borderRadius: props.style.borderRadius,
      zIndex: 4,
      width: "".concat(width, "px"),
      height: "".concat(height, "px"),
      position: "fixed",
      background: "".concat(props.style.background || ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$palette = _props$theme.palette) === null || _props$theme$palette === void 0 ? void 0 : _props$theme$palette.getColor("accent900")))
    }, positionStyle), axisPosition);
  } else {
    styles = {
      width: props.style.width,
      height: props.style.height,
      border: props.style.border,
      background: props.style.background,
      borderRadius: props.style.borderRadius,
      boxShadow: props.style.boxShadow,
      top: props.style.top,
      left: props.style.left,
      transform: props.style.transform,
      position: props.style.position,
      zIndex: "4"
    };
  }
  return styles;
};
exports.toolTipWrapperStyle = toolTipWrapperStyle;
var toolTipContentStyle = function toolTipContentStyle(props) {
  return {
    zIndex: 10,
    position: "absolute",
    top: 0,
    left: 0,
    width: props.style.width,
    height: props.style.height
  };
};
exports.toolTipContentStyle = toolTipContentStyle;
var toolTipStyles = function toolTipStyles(props) {
  var axis = _constants.tipPositionMapping[props.position];
  var x = props !== null && props !== void 0 && props.x ? props.x : "0";
  var y = props !== null && props !== void 0 && props.y ? props.y : "0";
  var width = parseInt(props.style.width);
  var height = parseInt(props.style.height);
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var percent = 0;
  if (axis === "x") {
    percent = 100 * x / windowWidth;
  } else {
    percent = 100 * y / windowHeight;
  }
  var positionStyle = {};
  if (axis === "x") {
    if (props.position === _constants.positions.top) {
      positionStyle = {
        left: "".concat(width * (percent / 100) - 10, "px"),
        top: height
      };
    } else if (props.position === _constants.positions.bottom) {
      positionStyle = {
        left: "".concat(width * (percent / 100) - 10, "px"),
        top: -10
      };
    }
  } else {
    if (props.position === _constants.positions.left) {
      positionStyle = {
        left: "calc(".concat(width, " - 5px)"),
        top: "".concat(height * (percent / 100) - 10, "px")
      };
    } else if (props.position === _constants.positions.right) {
      positionStyle = {
        left: -15,
        top: "".concat(height * (percent / 100) - 10, "px")
      };
    }
  }
  return _objectSpread(_objectSpread({
    zIndex: 11,
    width: "0",
    height: "0",
    borderLeft: "10px solid transparent",
    borderRight: "10px solid transparent",
    borderBottom: "10px solid ".concat(props.style.background),
    position: "relative",
    display: "none"
  }, positionStyle), {}, {
    transform: "rotate(".concat(_constants.deg[props.position], "deg)")
  });
};
exports.toolTipStyles = toolTipStyles;