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

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

/**** Libraries ****/
import React, { memo } 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/v1/CheckBox/CheckBox';
import ValidationMessage from "../ValidationMessage/ValidationMessage";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import FieldContainer from "../FieldContainer/FieldContainer";
/**** CSS ****/

import style from "../../../../form/fields/Fields.module.css";

function CheckBoxField(props) {
  let {
    labelName,
    id,
    isMandatory,
    validationMessage,
    validationPalette,
    isReadOnly,
    checked,
    errorType,
    isDisabled,
    title,
    dataId,
    dataSelectorId,
    validationRuleMessage,
    validationRulePalette,
    infoText,
    fieldSize,
    labelPalette,
    labelCustomClass,
    direction,
    lineClamp,
    isLocked,
    lockedInfoText,
    customProps,
    renderLabelProps,
    getRef,
    getContainerRef,
    onChange,
    children
  } = 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, {
    text: labelName,
    id: id,
    size: fieldSize === 'small' ? 'small' : 'medium',
    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
    infoText: infoText,
    customClass: `${!isDirectCol ? style.checkboxText : ''} ${!isDirectCol ? style[`lineClamp_${lineClamp}`] : ''} ${isReadOnly || isDisabled ? style.cbTextReadonly : style.cbTextPointer} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
    title: labelName,
    onClick: !removeEvent ? handleLabelClick : null,
    variant: isDirectCol ? 'default' : 'primary',
    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
    ...LabelProps
  }));

  function handleChange(value) {
    onChange && onChange(id, value);
  }

  function handleGetRef(el) {
    getRef && getRef(el, id);
  }

  function handleLabelClick() {
    handleChange(!checked);
  }

  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, {
    id: id,
    onChange: handleChange,
    disabled: removeEvent,
    checked: checked,
    getRef: handleGetRef,
    dataId: dataId,
    getContainerRef: getContainerRef,
    ...CheckBoxProps
  })), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, labelElement)), children, validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
    text: validationMessage,
    palette: validationPalette,
    type: errorType,
    dataId: `${dataId}_ValidationMessage`,
    ...ValidationMessageProps1
  }), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
    text: validationRuleMessage,
    palette: validationRulePalette,
    type: errorType,
    dataId: `${dataId}_ValidationRuleMessage`,
    ...ValidationMessageProps2
  })));
}

CheckBoxField.propTypes = propTypes;
CheckBoxField.defaultProps = defaultProps;
const MemoizedCheckBoxField = /*#__PURE__*/memo(CheckBoxField);
MemoizedCheckBoxField.propTypes = propTypes;
MemoizedCheckBoxField.defaultProps = defaultProps;
MemoizedCheckBoxField.displayName = 'CheckBoxField';
export default MemoizedCheckBoxField;