@wix/design-system
Version:
@wix/design-system
106 lines • 5.71 kB
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { CheckboxChecked, CheckboxIndeterminate, } from '@wix/wix-ui-icons-common/system';
import { st, classes } from './Checkbox.st.css.js';
import Text from '../Text';
import { withFocusable } from '../common/Focusable';
import { generateID } from '../utils/generateId';
import Tooltip from '../Tooltip';
import * as DATA_ATTR from './DataAttr';
import { dataHooks, LABEL_TEXT_SIZE, SELECTION_AREA, V_ALIGN, SELECTION_AREA_SKIN, } from './constants';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { ZIndex } from '../common/ZIndex';
import semanticClassNames from './Checkbox.semanticClassNames';
import { classes as commonClasses } from '../common/styles/visuallyHidden.st.css.js';
/** a simple WixStyle checkbox */
export class Checkbox extends PureComponent {
constructor() {
super(...arguments);
// TODO fix me please. We need to get away from ids.
this._id = `${Checkbox.displayName}-${generateID()}`;
this.checkboxRef = React.createRef();
this.inputRef = React.createRef();
this.focus = () => {
this.inputRef.current && this.inputRef.current.focus();
};
this._handleChange = (event) => {
this.props.onChange?.(event);
};
this._getDataAttributes = () => {
const { checked, indeterminate, disabled, hasError } = this.props;
return {
[DATA_ATTR.DATA_CHECK_TYPE]: indeterminate
? DATA_ATTR.CHECK_TYPES.INDETERMINATE
: checked
? DATA_ATTR.CHECK_TYPES.CHECKED
: DATA_ATTR.CHECK_TYPES.UNCHECKED,
[DATA_ATTR.DATA_HAS_ERROR]: hasError && !disabled,
[DATA_ATTR.DATA_DISABLED]: disabled,
};
};
}
render() {
const { id = this._id, checked, indeterminate, disabled, required, hasError, errorMessage, onChange, selectionArea, vAlign, size, children, dataHook, focusableOnFocus, focusableOnBlur, className, tooltipProps, tooltipContent, selectionAreaSkin, selectionAreaPadding, ellipsis, maxLines, } = this.props;
const isTooltipDisabled = (tooltipProps && tooltipProps.disabled) ||
disabled ||
(!tooltipContent && (!hasError || !errorMessage));
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, {
vAlign,
selectionArea,
selectionAreaSkin,
disabled,
size,
error: hasError && !disabled,
selection: indeterminate
? 'indeterminate'
: checked
? 'checked'
: 'unchecked',
indeterminate,
ellipsis,
}, className), ...this._getDataAttributes() },
React.createElement("input", { ref: this.inputRef, className: commonClasses.visuallyHidden, "data-hook": dataHooks.input, type: "checkbox", id: id, checked: checked, disabled: disabled, required: required, "aria-checked": indeterminate ? 'mixed' : checked, onChange: onChange, onFocus: focusableOnFocus, onBlur: focusableOnBlur }),
React.createElement("label", { htmlFor: id, "data-hook": dataHooks.label, className: classes.label, onClick: e => e.stopPropagation() },
React.createElement("div", { className: classes.labelInner, style: { padding: selectionAreaPadding } },
React.createElement(Tooltip, { dataHook: dataHooks.boxTooltip, disabled: isTooltipDisabled, content: tooltipContent || errorMessage || ' ', textAlign: "center", maxWidth: 230, exitDelay: 150, zIndex: ZIndex.checkbox, ...tooltipProps },
React.createElement("div", { className: classes.outer },
React.createElement("div", { "data-hook": dataHooks.box, className: st(classes.checkbox, semanticClassNames.inputContainer) },
React.createElement("div", { className: classes.inner }, indeterminate ? (React.createElement(CheckboxIndeterminate, null)) : (React.createElement(CheckboxChecked, null)))))),
children && (React.createElement(Text, { size: size, weight: "thin", dataHook: dataHooks.children, className: classes.children, ellipsis: ellipsis, maxLines: maxLines }, children))))));
}
}
Checkbox.displayName = 'Checkbox';
Checkbox.propTypes = {
dataHook: PropTypes.string,
checked: PropTypes.bool,
children: PropTypes.any,
disabled: PropTypes.bool,
required: PropTypes.bool,
hasError: PropTypes.bool,
id: PropTypes.string,
indeterminate: PropTypes.bool,
errorMessage: PropTypes.string,
selectionArea: PropTypes.oneOf(Object.values(SELECTION_AREA)),
vAlign: PropTypes.oneOf(Object.values(V_ALIGN)),
size: PropTypes.oneOf(Object.values(LABEL_TEXT_SIZE)),
onChange: PropTypes.func,
className: PropTypes.string,
selectionAreaSkin: PropTypes.oneOf(Object.values(SELECTION_AREA_SKIN)),
selectionAreaPadding: PropTypes.string,
tooltipContent: PropTypes.any,
tooltipProps: PropTypes.shape(TooltipCommonProps),
maxLines: PropTypes.number,
};
Checkbox.defaultProps = {
checked: false,
size: LABEL_TEXT_SIZE.MEDIUM,
selectionArea: SELECTION_AREA.NONE,
vAlign: V_ALIGN.CENTER,
onChange: (e) => e.stopPropagation(),
hasError: false,
disabled: false,
indeterminate: false,
selectionAreaSkin: SELECTION_AREA_SKIN.FILLED,
};
export default withFocusable(Checkbox);
//# sourceMappingURL=Checkbox.js.map