@zohodesk/dot/es/form/fields/CheckBoxField/CheckBoxField.js

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

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); }

/**** Libraries ****/
import React, { PureComponent } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/

import Label from '@zohodesk/components/es/v1/Label/Label';
import CheckBox from '@zohodesk/components/es/CheckBox/CheckBox';
import ValidationMessage from "../ValidationMessage/ValidationMessage";
import { Container, Box } from '@zohodesk/components/es/Layout';
import FieldContainer from "../FieldContainer/FieldContainer";
/**** CSS ****/

import style from "../Fields.module.css";
export default class CheckBoxField extends PureComponent {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleGetRef = this.handleGetRef.bind(this);
    this.handleLabelClick = this.handleLabelClick.bind(this);
  }

  handleChange(value) {
    let {
      id,
      onChange
    } = this.props;
    onChange && onChange(id, value);
  }

  handleGetRef(el) {
    let {
      getRef,
      id
    } = this.props;
    getRef && getRef(el, id);
  }

  handleLabelClick() {
    let {
      checked
    } = this.props;
    this.handleChange(!checked);
  }

  render() {
    let {
      labelName,
      id,
      isMandatory,
      validationMessage,
      validationPalette,
      isReadOnly,
      checked,
      errorType,
      isDisabled,
      title,
      dataId,
      dataSelectorId,
      validationRuleMessage,
      validationRulePalette,
      getContainerRef,
      infoText,
      fieldSize,
      labelPalette,
      labelCustomClass,
      direction,
      lineClamp,
      isLocked,
      lockedInfoText,
      customProps,
      renderLabelProps,
      children
    } = this.props;
    const {
      LabelProps = {},
      CheckBoxProps = {},
      ValidationMessageProps1 = {},
      ValidationMessageProps2 = {}
    } = customProps;
    let removeEvent = isDisabled || isReadOnly;
    let isDirectCol = direction === 'column';
    let labelElement = /*#__PURE__*/React.createElement(FieldContainer, {
      isLocked: isLocked,
      lockedInfoText: lockedInfoText,
      infoText: infoText,
      renderProps: renderLabelProps
    }, /*#__PURE__*/React.createElement(Label, _extends({
      text: labelName,
      isRequired: isMandatory,
      isDisabled: isDisabled,
      isReadOnly: isReadOnly,
      palette: labelPalette,
      customClass: {
        label: labelCustomClass,
        container: !isDirectCol ? style.checkboxText : ''
      },
      size: fieldSize === 'small' ? 'small' : 'medium',
      fontWeight: isDirectCol ? 'regular' : 'semibold',
      testId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
      onClick: !removeEvent ? this.handleLabelClick : null,
      tagAttributes: {
        label: {
          id
        }
      }
    }, LabelProps)));
    return /*#__PURE__*/React.createElement("div", {
      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
      "data-title": isDisabled ? title : null,
      "data-selector-id": dataSelectorId
    }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
      className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
    }, /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      isCover: false,
      align: "top"
    }, /*#__PURE__*/React.createElement(Box, {
      className: isDirectCol ? style.checkbox : style.checkboxRow
    }, /*#__PURE__*/React.createElement(CheckBox, _extends({
      id: id,
      onChange: this.handleChange,
      disabled: removeEvent,
      checked: checked,
      getRef: this.handleGetRef,
      dataId: dataId,
      getContainerRef: getContainerRef
    }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, labelElement)), children, validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
      text: validationMessage,
      palette: validationPalette,
      type: errorType,
      dataId: `${dataId}_ValidationMessage`
    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
      text: validationRuleMessage,
      palette: validationRulePalette,
      type: errorType,
      dataId: `${dataId}_ValidationRuleMessage`
    }, ValidationMessageProps2))));
  }

}
CheckBoxField.propTypes = propTypes;
CheckBoxField.defaultProps = defaultProps; // if (__DOCS__) {
//   CheckBoxField.docs = {
//     componentGroup: 'Form Fields',
//     folderName: 'General'
//   };
// }