@zohodesk/dot/lib/v1/FlipCard/FlipCard.js

In this Library, we Provide Some Basic Components to Build Your Application

"use strict";

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

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

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

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

var _CheckBox = _interopRequireDefault(require("@zohodesk/components/es/v1/CheckBox/CheckBox"));

var _Layout = require("@zohodesk/components/es/v1/Layout");

var _AvatarSize = _interopRequireDefault(require("@zohodesk/components/es/Provider/AvatarSize"));

var _ChannelIcon = _interopRequireDefault(require("../ChannelIcon/ChannelIcon"));

var _AvatarIcon = _interopRequireDefault(require("../avatar/AvatarIcon/AvatarIcon"));

var _AvatarUser = _interopRequireDefault(require("../avatar/AvatarUser/AvatarUser"));

var _General = require("../../utils/General");

var _FlipCardModule = _interopRequireDefault(require("../../FlipCard/FlipCard.module.css"));

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function FlipCard(props) {
  var id = props.id,
      action = props.action,
      name = props.name,
      initial = props.initial,
      isChecked = props.isChecked,
      noNeedFlip = props.noNeedFlip,
      size = props.size,
      channel = props.channel,
      isPaidUser = props.isPaidUser,
      isPortalUser = props.isPortalUser,
      src = props.src,
      icon = props.icon,
      iconSize = props.iconSize,
      iconClass = props.iconClass,
      ticListContainer = props.ticListContainer,
      ticList = props.ticList,
      dataId = props.dataId,
      className = props.className,
      palette = props.palette,
      textPalette = props.textPalette,
      customTextClass = props.customTextClass,
      frontClass = props.frontClass,
      needTitle = props.needTitle,
      iconColor = props.iconColor,
      tourId = props.tourId,
      isFilledCheckbox = props.isFilledCheckbox,
      channelTitle = props.channelTitle,
      customProps = props.customProps;
  var _customProps$CheckBox = customProps.CheckBoxProps,
      CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
      _customProps$ChannelI = customProps.ChannelIconProps,
      ChannelIconProps = _customProps$ChannelI === void 0 ? {} : _customProps$ChannelI,
      _customProps$AvatarIc = customProps.AvatarIconProps,
      AvatarIconProps = _customProps$AvatarIc === void 0 ? {} : _customProps$AvatarIc,
      _customProps$AvatarUs = customProps.AvatarUserProps,
      AvatarUserProps = _customProps$AvatarUs === void 0 ? {} : _customProps$AvatarUs;

  var onClick = function onClick(e) {
    if (!noNeedFlip) {
      (0, _General.stopBubbling)(e);
    }
  };

  var onChange = function onChange(isChecked, e) {
    var onChange = props.onChange;
    (0, _General.stopBubbling)(e);
    onChange(id, isChecked, e);
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat((0, _AvatarSize["default"])(size), "  ").concat(noNeedFlip ? _FlipCardModule["default"].flipNone : isChecked ? _FlipCardModule["default"].notFlip : _FlipCardModule["default"].flip),
    onClick: onClick,
    "data-id": ticListContainer,
    "data-test-id": ticListContainer,
    "data-tour": tourId
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _FlipCardModule["default"].container,
    "data-id": ticList,
    "data-test-id": ticList
  }, !noNeedFlip ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
    align: "both",
    className: "".concat(_FlipCardModule["default"].front, " ").concat(frontClass ? frontClass : '')
  }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], _extends({
    isFilled: isFilledCheckbox,
    checked: isChecked,
    onChange: onChange,
    id: "checkbox_".concat(id),
    dataId: "listViewCheckBox_".concat(id)
  }, CheckBoxProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
    align: "both",
    className: _FlipCardModule["default"].back
  }, channel && action ? /*#__PURE__*/_react["default"].createElement(_ChannelIcon["default"], _extends({
    name: channel,
    action: action,
    size: size,
    iconSize: iconSize,
    iconClass: iconClass,
    dataId: channel,
    className: className,
    palette: palette,
    textPalette: textPalette,
    customTextClass: customTextClass,
    iconColor: iconColor,
    title: channelTitle,
    iconTitle: channelTitle
  }, ChannelIconProps)) : icon ? /*#__PURE__*/_react["default"].createElement(_AvatarIcon["default"], _extends({
    name: icon,
    iconSize: iconSize,
    size: size,
    iconClass: iconClass,
    dataId: icon,
    className: className,
    iconColor: iconColor,
    title: needTitle ? name : ''
  }, AvatarIconProps)) : /*#__PURE__*/_react["default"].createElement(_AvatarUser["default"], _extends({
    name: name,
    initial: initial,
    size: size,
    isPaid: isPaidUser,
    isPortal: isPortalUser,
    src: src,
    dataId: dataId,
    needTitle: needTitle,
    palette: palette,
    textPalette: textPalette,
    customTextClass: customTextClass
  }, AvatarUserProps)))));
}

FlipCard.propTypes = _propTypes.propTypes;
FlipCard.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
//   FlipCard.docs = {
//     componentGroup: 'Molecule'
//   };
// }