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

CometChat UI Kit for React App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.sheetItemListStyle = exports.listItemStyle = exports.actionSheetWrapperStyle = exports.actionSheetTitleStyle = exports.actionSheetLayoutIconStyle = exports.actionSheetHeaderStyle = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _layoutType = require("./layoutType");
var _Shared = require("../../../Shared");
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 actionSheetWrapperStyle = function actionSheetWrapperStyle(props) {
  return _objectSpread({
    background: "transparent",
    borderRadius: props.style.borderRadius,
    border: props.style.border,
    width: props.style.width,
    height: props.style.height,
    transform: "scale(1)",
    transformOrigin: "left bottom",
    overflowY: "auto",
    overflowX: "hidden",
    display: "flex",
    padding: "12px",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    flexWrap: "wrap"
  }, props.style);
};
exports.actionSheetWrapperStyle = actionSheetWrapperStyle;
var actionSheetHeaderStyle = function actionSheetHeaderStyle() {
  return {
    width: "100%",
    display: "flex",
    flexDirection: "row",
    marginBottom: "10px"
  };
};
exports.actionSheetHeaderStyle = actionSheetHeaderStyle;
var actionSheetTitleStyle = function actionSheetTitleStyle(props) {
  return {
    font: props.style.titleFont,
    color: props.style.titleColor,
    lineHeight: "22px",
    width: "calc(100% - 24px)"
  };
};
exports.actionSheetTitleStyle = actionSheetTitleStyle;
var actionSheetLayoutIconStyle = function actionSheetLayoutIconStyle(props, mode) {
  return {
    WebkitMask: "url(".concat(props.layoutModeIconURL, ") no-repeat center center"),
    background: "rgb(51,153,255)",
    height: "24px",
    width: "24px",
    cursor: "pointer"
  };
};
exports.actionSheetLayoutIconStyle = actionSheetLayoutIconStyle;
var sheetItemListStyle = function sheetItemListStyle(mode) {
  var flexDirection = {
      flexDirection: "row"
    },
    flexWrap = {
      flexWrap: "wrap"
    };
  if (mode === _layoutType.layoutType.list) {
    flexDirection = {
      flexDirection: "column"
    };
    flexWrap = {
      flexWrap: "nowrap"
    };
  }
  return _objectSpread(_objectSpread({
    width: "100%",
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "center",
    overflowY: "auto",
    overflowX: "hidden"
  }, flexDirection), flexWrap);
};
exports.sheetItemListStyle = sheetItemListStyle;
var listItemStyle = function listItemStyle(props, mode, index, theme) {
  var _theme$palette;
  var height = "auto",
    width = "100%",
    cornerRadius = "10px",
    borderBottom = {},
    sheetItemStyle = {
      display: "flex",
      flexDirection: "row",
      justifyContent: "flex-start",
      alignItems: "center",
      margin: "0",
      cursor: "pointer",
      padding: "8px 16px",
      overflow: "hidden"
    };
  if (mode === _layoutType.layoutType.grid) {
    width = "122px";
    height = "100px";
    sheetItemStyle = {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      margin: "4px 4px",
      borderRadius: "10px",
      textAlign: "center",
      flexWrap: "wrap",
      cursor: "pointer"
    };
  }
  if (mode === _layoutType.layoutType.list) {
    var borderRadius = {
      borderRadius: "0"
    };
    var _borderBottom = {
      borderBottom: "1px solid ".concat(theme.palette.accent100[theme.palette.mode])
    };
    if (index === 0) {
      borderRadius = {
        borderRadius: "10px 10px 0 0"
      };
    } else if (index === props.actions.length - 1) {
      borderRadius = {
        borderRadius: "0 0 10px 10px"
      };
      _borderBottom = {
        borderBottom: "0 none"
      };
    }
    sheetItemStyle = _objectSpread(_objectSpread(_objectSpread({}, sheetItemStyle), borderRadius), _borderBottom);
  }
  return _objectSpread({
    iconTint: "#6929CA",
    background: theme.palette.accent100[theme.palette.mode],
    textFont: (0, _Shared.fontHelper)(theme.typography.subtitle2),
    textColor: theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.accent[theme.palette.mode],
    width: width,
    height: height,
    iconWidth: "24px",
    iconHeight: "24px"
  }, sheetItemStyle);
};
exports.listItemStyle = listItemStyle;