wix-style-react
Version:
wix-style-react
110 lines • 6.05 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';
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 { WixStyleReactContext } from '../WixStyleReactProvider/context';
/** 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.checkboxRef.current && this.checkboxRef.current.focus();
};
this._handleKeyDown = (event) => {
if (event.keyCode === 32 && this.inputRef.current) {
const onChangeEvent = {
target: { checked: !this.inputRef.current.checked },
};
this.props.onChange?.(onChangeEvent);
event.preventDefault();
}
};
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, hasError, errorMessage, selectionArea, vAlign, size, onChange, 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(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, {
vAlign,
selectionArea,
selectionAreaSkin,
disabled,
error: hasError && !disabled,
selection: indeterminate
? 'indeterminate'
: checked
? 'checked'
: 'unchecked',
indeterminate,
newColorsBranding,
ellipsis,
}, className), onFocus: focusableOnFocus, onBlur: focusableOnBlur, tabIndex: disabled ? undefined : 0, ...this._getDataAttributes(), role: "checkbox", "aria-checked": checked, ref: this.checkboxRef, onKeyDown: disabled ? undefined : this._handleKeyDown },
React.createElement("input", { ref: this.inputRef, "data-hook": dataHooks.input, type: "checkbox", id: id, tabIndex: disabled ? undefined : 0, checked: checked, disabled: disabled, onChange: disabled ? undefined : onChange, style: { display: 'none' } }),
React.createElement("label", { htmlFor: id, "data-hook": dataHooks.label, className: classes.label },
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: 10000, ...tooltipProps },
React.createElement("div", { className: classes.outer },
React.createElement("div", { "data-hook": dataHooks.box, className: classes.checkbox },
React.createElement("div", { className: classes.inner, onClick: e => e.stopPropagation() }, indeterminate ? (React.createElement(CheckboxIndeterminate, null)) : (React.createElement(CheckboxChecked, null)))))),
children && (React.createElement(Text, { size: size, onClick: e => e.stopPropagation(), 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.node,
disabled: 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.node,
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,
};
// @ts-ignore
export default withFocusable(Checkbox);
//# sourceMappingURL=Checkbox.js.map