@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
172 lines (157 loc) • 7.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = require("./props/propTypes");
var _defaultProps = require("./props/defaultProps");
var _Label = _interopRequireDefault(require("../Label/Label"));
var _Layout = require("../Layout");
var _CssProvider = _interopRequireDefault(require("../../Provider/CssProvider"));
var _CheckBoxModule = _interopRequireDefault(require("../../CheckBox/CheckBox.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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); }
var CheckBox = function CheckBox(props) {
var id = props.id,
checked = props.checked,
disabled = props.disabled,
isReadOnly = props.isReadOnly,
disabledTitle = props.disabledTitle,
title = props.title,
palette = props.palette,
text = props.text,
size = props.size,
labelPalette = props.labelPalette,
labelSize = props.labelSize,
isFilled = props.isFilled,
isClipped = props.isClipped,
getRef = props.getRef,
getContainerRef = props.getContainerRef,
variant = props.variant,
active = props.active,
dataId = props.dataId,
name = props.name,
activeStyle = props.activeStyle,
a11y = props.a11y,
customClass = props.customClass,
customProps = props.customProps,
dataSelectorId = props.dataSelectorId;
function onChange(e) {
var onChange = props.onChange;
onChange && onChange(!checked, e);
}
function handleGetContainerRef(ele) {
getContainerRef && getContainerRef(ele, id);
}
var _customProps$CheckBox = customProps.CheckBoxProps,
CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
_customProps$LabelPro = customProps.LabelProps,
LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
var _customClass$customCh = customClass.customCheckBox,
customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
_customClass$customLa = customClass.customLabel,
customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa,
_customClass$customCB = customClass.customCBoxSize,
customCBoxSize = _customClass$customCB === void 0 ? '' : _customClass$customCB,
_customClass$customTi = customClass.customTickSize,
customTickSize = _customClass$customTi === void 0 ? '' : _customClass$customTi;
var accessMode = isReadOnly ? _CheckBoxModule["default"].readonly : disabled ? (0, _CssProvider["default"])('isDisabled') : _CheckBoxModule["default"].pointer;
var toolTip = disabled ? disabledTitle : title ? title : null;
var ariaLabel = a11y.ariaLabel,
ariaLabelledby = a11y.ariaLabelledby,
ariaHidden = a11y.ariaHidden,
_a11y$role = a11y.role,
role = _a11y$role === void 0 ? 'checkbox' : _a11y$role,
_a11y$ariaChecked = a11y.ariaChecked,
ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked;
return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
dataId: dataId,
isCover: false,
isInline: text ? false : true,
alignBox: "row",
align: "vertical",
className: "".concat(_CheckBoxModule["default"].container, " ").concat(accessMode, " ").concat(isReadOnly || disabled ? '' : "".concat(_CheckBoxModule["default"][palette]), "\n ").concat(checked ? "".concat(_CheckBoxModule["default"]["checked".concat(palette)]) : '', " ").concat(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["default"].createElement(_Layout.Box, {
className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '')
}, /*#__PURE__*/_react["default"].createElement("input", {
type: "hidden",
id: id,
ref: getRef,
name: name
}), /*#__PURE__*/_react["default"].createElement("label", {
className: "".concat(_CheckBoxModule["default"].checkbox, " ").concat(accessMode, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize)
}, activeStyle == 'tick' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 40 40"
}, checked ? /*#__PURE__*/_react["default"].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: "".concat(_CheckBoxModule["default"].cbBox)
}) : /*#__PURE__*/_react["default"].createElement("rect", {
xmlns: "http://www.w3.org/2000/svg",
x: "1",
y: "1",
width: "38",
height: "38",
rx: "4",
className: "".concat(_CheckBoxModule["default"].cbBox)
})), checked ? /*#__PURE__*/_react["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 44 44",
className: "".concat(_CheckBoxModule["default"].tick, " ").concat(_CheckBoxModule["default"]["".concat(size, "tick")], " ").concat(customTickSize, " ").concat(disabled ? (0, _CssProvider["default"])('isDisabled') : '')
}, /*#__PURE__*/_react["default"].createElement("polyline", {
points: "12.56 19 19.61 26.06 40.39 5.28",
className: "".concat(_CheckBoxModule["default"].tickPath, " ").concat(_CheckBoxModule["default"].checkedtickPath)
})) : null) : /*#__PURE__*/_react["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 40 40"
}, /*#__PURE__*/_react["default"].createElement("rect", {
xmlns: "http://www.w3.org/2000/svg",
x: "1",
y: "1",
width: "38",
height: "38",
rx: "4",
className: "".concat(_CheckBoxModule["default"].cbBox)
}), checked ? /*#__PURE__*/_react["default"].createElement("line", {
xmlns: "http://www.w3.org/2000/svg",
className: "".concat(_CheckBoxModule["default"].linePath, " ").concat(_CheckBoxModule["default"].cbBox),
x1: "11.47",
y1: "20",
x2: "28.53",
y2: "20"
}) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
flexible: true,
className: _CheckBoxModule["default"].text
}, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
text: text,
palette: disabled ? 'disable' : labelPalette,
id: id,
size: labelSize,
type: "title",
clipped: isClipped,
variant: variant,
customClass: "".concat(active && !disabled ? "".concat(_CheckBoxModule["default"]["active".concat(palette, "Label")]) : '', "\n ").concat(checked && active ? "".concat(_CheckBoxModule["default"]["checked".concat(palette, "Label")]) : '', "\n ").concat(accessMode, " ").concat(customLabel),
title: toolTip ? toolTip : text
}, LabelProps))));
};
var _default = CheckBox;
exports["default"] = _default;
CheckBox.defaultProps = _defaultProps.defaultProps;
CheckBox.propTypes = _propTypes.propTypes; // if (__DOCS__) {
// CheckBox.docs = {
// componentGroup: 'Form Elements',
// folderName: 'Style Guide'
// };
// }