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

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

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import CheckBox from '@zohodesk/components/es/v1/CheckBox/CheckBox';
import { Container } from '@zohodesk/components/es/v1/Layout';
import AvatarSize from '@zohodesk/components/es/Provider/AvatarSize';
import ChannelIcon from "../ChannelIcon/ChannelIcon";
import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
import AvatarUser from "../avatar/AvatarUser/AvatarUser";
import { stopBubbling } from "../../utils/General";
import style from "../../FlipCard/FlipCard.module.css";
export default function FlipCard(props) {
  let {
    id,
    action,
    name,
    initial,
    isChecked,
    noNeedFlip,
    size,
    channel,
    isPaidUser,
    isPortalUser,
    src,
    icon,
    iconSize,
    iconClass,
    ticListContainer,
    ticList,
    dataId,
    className,
    palette,
    textPalette,
    customTextClass,
    frontClass,
    needTitle,
    iconColor,
    tourId,
    isFilledCheckbox,
    channelTitle,
    customProps
  } = props;
  const {
    CheckBoxProps = {},
    ChannelIconProps = {},
    AvatarIconProps = {},
    AvatarUserProps = {}
  } = customProps;

  const onClick = e => {
    if (!noNeedFlip) {
      stopBubbling(e);
    }
  };

  const onChange = (isChecked, e) => {
    let {
      onChange
    } = props;
    stopBubbling(e);
    onChange(id, isChecked, e);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
    onClick: onClick,
    "data-id": ticListContainer,
    "data-test-id": ticListContainer,
    "data-tour": tourId
  }, /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "data-id": ticList,
    "data-test-id": ticList
  }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
    align: "both",
    className: `${style.front} ${frontClass ? frontClass : ''}`
  }, /*#__PURE__*/React.createElement(CheckBox, {
    isFilled: isFilledCheckbox,
    checked: isChecked,
    onChange: onChange,
    id: `checkbox_${id}`,
    dataId: `listViewCheckBox_${id}`,
    ...CheckBoxProps
  })) : null, /*#__PURE__*/React.createElement(Container, {
    align: "both",
    className: style.back
  }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, {
    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.createElement(AvatarIcon, {
    name: icon,
    iconSize: iconSize,
    size: size,
    iconClass: iconClass,
    dataId: icon,
    className: className,
    iconColor: iconColor,
    title: needTitle ? name : '',
    ...AvatarIconProps
  }) : /*#__PURE__*/React.createElement(AvatarUser, {
    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;
FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
//   FlipCard.docs = {
//     componentGroup: 'Molecule'
//   };
// }