@zohodesk/components/es/v1/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/CheckBox.module.css";

const CheckBox = props => {
  let {
    id,
    checked,
    disabled,
    isReadOnly,
    disabledTitle,
    title,
    palette,
    text,
    size,
    labelPalette,
    labelSize,
    isFilled,
    isClipped,
    getRef,
    getContainerRef,
    variant,
    active,
    dataId,
    name,
    activeStyle,
    a11y,
    customClass,
    customProps,
    dataSelectorId
  } = props;

  function onChange(e) {
    const {
      onChange
    } = props;
    onChange && onChange(!checked, e);
  }

  function handleGetContainerRef(ele) {
    getContainerRef && getContainerRef(ele, id);
  }

  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;
  return /*#__PURE__*/React.createElement(Container, {
    dataId: dataId,
    isCover: false,
    isInline: text ? false : true,
    alignBox: "row",
    align: "vertical",
    className: `${style.container} ${accessMode} ${isReadOnly || disabled ? '' : `${style[palette]}`}
      ${checked ? `${style[`checked${palette}`]}` : ''} ${customCheckBox}`,
    "data-title": toolTip,
    onClick: isReadOnly || disabled ? null : onChange,
    tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
    "aria-checked": ariaChecked,
    eleRef: handleGetContainerRef,
    role: role,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby,
    "aria-hidden": ariaHidden,
    "data-selector-id": dataSelectorId || id,
    ...CheckBoxProps
  }, /*#__PURE__*/React.createElement(Box, {
    className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
  }, /*#__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
  })));
};

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