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

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

import React, { Component } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import AvatarUser from "../avatar/AvatarUser/AvatarUser";
import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
import { Container } from '@zohodesk/components/lib/Layout';
import ChannelIcon from "../ChannelIcon/ChannelIcon";
import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
import style from "./FlipCard.module.css";
import { stopBubbling } from "../utils/General";
export default class FlipCard extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onClick = this.onClick.bind(this);
  }

  onClick(e) {
    let {
      noNeedFlip
    } = this.props;

    if (!noNeedFlip) {
      stopBubbling(e);
    }
  }

  onChange(isChecked, e) {
    let {
      onChange
    } = this.props;
    stopBubbling(e);
    let {
      id
    } = this.props;
    onChange(id, isChecked, e);
  }

  render() {
    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
    } = this.props;
    const {
      CheckBoxProps = {},
      ChannelIconProps = {},
      AvatarIconProps = {},
      AvatarUserProps = {}
    } = customProps;
    return /*#__PURE__*/React.createElement("div", {
      className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
      onClick: this.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: this.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'
//   };
// }