@geneui/components
Version:
The Gene UI components library designed for BI tools
233 lines (229 loc) • 7.26 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { forwardRef, useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { c as checkboxRadioSwitcherConfig } from '../configs-00612ce0.js';
import { n as noop, i as interceptValue, s as stopEvent } from '../index-a0e4e333.js';
import { T as Tooltip } from '../index-6d7e99cd.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import { g as guid } from '../guid-8ddf77b3.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../tslib.es6-f211516f.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../GeneUIProvider/index.js';
import '../style-inject.es-746bb8ed.js';
const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
const {
size,
label,
labelPosition,
labelTooltip,
labelAlignment,
description,
indeterminate,
readOnly,
disabled,
required,
isValid,
errorText,
defaultChecked,
onChange,
value,
className,
onKeyPress,
checked,
onWrapperClick,
onMouseEnter,
onMouseLeave,
...restProps
} = props;
const [checkedState, setCheckedState] = useState(defaultChecked);
const isControlled = 'checked' in props && typeof checked !== 'undefined';
const localChecked = isControlled ? checked : checkedState;
const randomId = useMemo(guid, []);
const handleChange = e => {
const {
checked
} = e.target;
!isControlled && setCheckedState(checked);
onChange(interceptValue(e, value));
};
const handleKeyPress = e => {
if (e.which === 13 || e.keyCode === 13) {
// need this for prevent form default submit
stopEvent(e);
const {
checked
} = e.target;
// need this because in event time checkbox value is old.
const changedEvent = {
...e
};
changedEvent.target.checked = !checked;
!isControlled && setCheckedState(checked => !checked);
onChange(interceptValue(changedEvent, value));
}
onKeyPress(e);
};
const hasError = !isValid;
return /*#__PURE__*/React__default.createElement("div", {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
className: classnames('crs-holder', className, "lp-".concat(labelPosition), "la-".concat(labelAlignment), {
disabled,
error: hasError,
'read-only': readOnly
}),
onClick: onWrapperClick
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames('label-holder', {
'has-label': !!label
})
}, label && /*#__PURE__*/React__default.createElement(Tooltip, {
position: "auto",
title: label,
isVisible: labelTooltip
}, /*#__PURE__*/React__default.createElement("div", {
className: "crs-item crs-label"
}, /*#__PURE__*/React__default.createElement("label", {
className: "ellipsis-text",
title: labelTooltip,
htmlFor: randomId
}, required && "* ", label))), /*#__PURE__*/React__default.createElement("div", {
className: "crs-item crs-component"
}, /*#__PURE__*/React__default.createElement("input", _extends({
type: "checkbox",
onKeyPress: handleKeyPress,
onChange: handleChange,
checked: localChecked,
disabled: disabled,
value: value,
ref: ref,
id: randomId
}, restProps)), /*#__PURE__*/React__default.createElement("label", {
className: classnames('checkbox', 'cr-element', "s-".concat(size), {
indeterminate,
active: !indeterminate && localChecked,
'error-color': !indeterminate && !localChecked && !errorText && hasError
}),
htmlFor: randomId
}))), hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
className: "information-message color-danger"
}, errorText), description && /*#__PURE__*/React__default.createElement("div", {
className: "input-description"
}, description));
});
Checkbox.propTypes = {
/**
* At what point an element becomes focusable when a user is interacting with the page via a keyboard
*/
tabIndex: PropTypes.number,
/**
* Use this prop to control Checkbox state. Note that when you specify this prop, the Checkbox will not functionate itself
*/
checked: PropTypes.bool,
/**
* Checkbox size
*/
size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
/**
* Use this prop to add an additional label to Checkbox
*/
label: PropTypes.node,
/**
* Tooltip for label
*/
labelTooltip: PropTypes.string,
/**
* Specify "label" position
*/
labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
/**
* Specify "label" alignment
*/
labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
/**
* Use this prop to add an additional description field to the Checkbox
*/
description: PropTypes.node,
/**
* Use this prop to make checkbox neither checked nor unchecked
*/
indeterminate: PropTypes.bool,
/**
* Makes Checkbox readonly when set to "true"
*/
readOnly: PropTypes.bool,
/**
* Makes Checkbox disabled when set to "true"
*/
disabled: PropTypes.bool,
/**
* Checkbox adds an extra asterisk to the "label". For more info see "ValidatableCheckbox"(integrated Checkbox with "Form" organism).
*/
required: PropTypes.bool,
/**
* Control Checkbox validation. For more info see "ValidatableCheckbox"(integrated Checkbox with "Form" organism).
*/
isValid: PropTypes.bool,
/**
* Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
*/
errorText: PropTypes.node,
/**
* This prop will only applied once as defaultState for "checked" when Checkbox mounts.
* Note that specifying this prop does not mean to control it.
*/
defaultChecked: PropTypes.bool,
/**
* Fires an event when Checkbox is clicked or "enter" key is pressed((event: Event) => void).
*/
onChange: PropTypes.func,
/**
* Fires an event when any key is pressed((event: Event) => void).
*/
onKeyPress: PropTypes.func,
/**
* Fires an event when mouse enter((event: Event) => void).
*/
onMouseEnter: PropTypes.func,
/**
* Fires an event when mouse leave((event: Event) => void).
*/
onMouseLeave: PropTypes.func,
/**
* Fires an event when clicking on parent/wrapper of input ((event: Event) => void).
*/
onWrapperClick: PropTypes.func,
/**
* Use this prop to get specified value when "onChange" is fired
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
/**
* Additional className
*/
className: PropTypes.string
};
Checkbox.defaultProps = {
tabIndex: 0,
size: checkboxRadioSwitcherConfig.size[0],
label: '',
labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0],
description: '',
indeterminate: false,
readOnly: false,
disabled: false,
required: false,
isValid: true,
errorText: '',
defaultChecked: false,
onKeyPress: noop,
onChange: noop,
onWrapperClick: noop
};
export { Checkbox as default };