@zohodesk/components/es/CheckBox/CheckBox.js

In this Package, we Provide Some Basic Components to Build Web App

import React from 'react';
import { propTypes } from "./props/propTypes";
import { defaultProps } from "./props/defaultProps";
import Label from "../Label/Label";
import { Container, Box } from "../Layout";
import CssProvider from "../Provider/CssProvider";
import style from "./CheckBox.module.css";
export default class CheckBox extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.handleGetContainerRef = this.handleGetContainerRef.bind(this);
  }

  onChange(e) {
    let {
      onChange,
      checked
    } = this.props;
    onChange && onChange(!checked, e);
  }

  handleGetContainerRef(ele) {
    let {
      getContainerRef,
      id
    } = this.props;
    getContainerRef && getContainerRef(ele, id);
  }

  render() {
    let {
      id,
      checked,
      disabled,
      isReadOnly,
      disabledTitle,
      title,
      palette,
      text,
      size,
      labelPalette,
      labelSize,
      isFilled,
      isClipped,
      getRef,
      variant,
      active,
      dataId,
      name,
      activeStyle,
      a11y,
      customClass,
      customProps,
      dataSelectorId,
      renderRightPlaceholderNode
    } = this.props;
    let {
      CheckBoxProps = {},
      LabelProps = {}
    } = customProps;
    let {
      customCheckBox = '',
      customLabel = '',
      customCBoxSize = '',
      customTickSize = ''
    } = customClass;
    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
    let toolTip = disabled ? disabledTitle : title ? title : null;
    let {
      ariaLabel,
      ariaLabelledby,
      ariaHidden,
      role = 'checkbox',
      ariaChecked = checked
    } = a11y;
    const isEditable = !(isReadOnly || disabled);
    return /*#__PURE__*/React.createElement(Container, {
      dataId: dataId,
      isCover: false,
      isInline: text ? false : true,
      alignBox: "row",
      align: "vertical",
      className: `${style.container} ${accessMode} ${!isEditable ? '' : `${style[palette]}`} 
        ${checked ? `${style[`checked${palette}`]}` : ''}  ${customCheckBox}`,
      "data-title": toolTip,
      onClick: !isEditable ? null : this.onChange,
      tabIndex: !isEditable || ariaHidden ? '-1' : '0',
      "aria-checked": ariaChecked,
      eleRef: this.handleGetContainerRef,
      role: role,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledby,
      "aria-hidden": ariaHidden,
      dataSelectorId: dataSelectorId || id,
      ...CheckBoxProps
    }, /*#__PURE__*/React.createElement(Box, {
      className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`
    }, /*#__PURE__*/React.createElement("input", {
      type: "hidden",
      id: id,
      ref: getRef,
      name: name
    }), /*#__PURE__*/React.createElement("label", {
      className: `${style.checkbox} ${accessMode} ${style[size]} ${customCBoxSize}`
    }, activeStyle == 'tick' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 40 40"
    }, checked ? /*#__PURE__*/React.createElement("path", {
      xmlns: "http://www.w3.org/2000/svg",
      d: "M39,20V35a4,4,0,0,1-4,4H5a4,4,0,0,1-4-4V5A4,4,0,0,1,5,1H28.44",
      className: `${style.cbBox}`
    }) : /*#__PURE__*/React.createElement("rect", {
      xmlns: "http://www.w3.org/2000/svg",
      x: "1",
      y: "1",
      width: "38",
      height: "38",
      rx: "4",
      className: `${style.cbBox}`
    })), checked ? /*#__PURE__*/React.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 44 44",
      className: `${style.tick} ${style[`${size}tick`]} ${customTickSize} ${disabled ? CssProvider('isDisabled') : ''}`
    }, /*#__PURE__*/React.createElement("polyline", {
      points: "12.56 19 19.61 26.06 40.39 5.28",
      className: `${style.tickPath} ${style.checkedtickPath}`
    })) : null) : /*#__PURE__*/React.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 40 40"
    }, /*#__PURE__*/React.createElement("rect", {
      xmlns: "http://www.w3.org/2000/svg",
      x: "1",
      y: "1",
      width: "38",
      height: "38",
      rx: "4",
      className: `${style.cbBox}`
    }), checked ? /*#__PURE__*/React.createElement("line", {
      xmlns: "http://www.w3.org/2000/svg",
      className: `${style.linePath} ${style.cbBox}`,
      x1: "11.47",
      y1: "20",
      x2: "28.53",
      y2: "20"
    }) : null))), text && /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      className: style.text
    }, /*#__PURE__*/React.createElement(Label, {
      text: text,
      palette: disabled ? 'disable' : labelPalette,
      id: id,
      size: labelSize,
      type: "title",
      clipped: isClipped,
      variant: variant,
      customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
                            ${checked && active ? `${style[`checked${palette}Label`]}` : ''} 
                            ${accessMode} ${customLabel}`,
      title: toolTip ? toolTip : text,
      ...LabelProps
    })), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
  }

}
CheckBox.defaultProps = defaultProps;
CheckBox.propTypes = propTypes; // if (__DOCS__) {
//   CheckBox.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }