@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
183 lines (178 loc) • 6.46 kB
JavaScript
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); }
import React from 'react';
import { propTypes } from "./props/propTypes";
import { defaultProps } from "./props/defaultProps";
import Label from "../Label/Label";
import Typography from "../Typography/Typography";
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,
secondaryText
} = this.props;
let {
CheckBoxProps = {},
LabelProps = {},
secondaryTextProps = {}
} = customProps;
let {
customCheckBox = '',
customLabel = '',
customCBoxSize = '',
customTickSize = '',
customSecondaryText = ''
} = 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, _extends({
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} ${secondaryText ? style.withSecondaryText : ''} ${style[size]} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''} ${customCBoxSize}`,
align: secondaryText ? "start" : undefined
}, /*#__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`]} ${disabled ? CssProvider('isDisabled') : ''} ${customTickSize}`
}, /*#__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 || secondaryText) && /*#__PURE__*/React.createElement(Box, {
flexible: true,
className: style.labelContainer
}, text && /*#__PURE__*/React.createElement(Label, _extends({
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)), secondaryText ? /*#__PURE__*/React.createElement(Typography, _extends({
$ui_size: "12",
$ui_lineHeight: "1.2"
}, secondaryTextProps, {
$i18n_dataTitle: toolTip ? null : secondaryText,
$ui_className: `${style.secondaryText} ${customSecondaryText}`
}), secondaryText) : null), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
}
}
CheckBox.defaultProps = defaultProps;
CheckBox.propTypes = propTypes; // if (__DOCS__) {
// CheckBox.docs = {
// componentGroup: 'Form Elements',
// folderName: 'Style Guide'
// };
// }