devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
212 lines (210 loc) • 8.98 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/check_box/check_box.js)
* Version: 24.2.7
* Build date: Mon Apr 28 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["accessKey", "activeStateEnabled", "aria", "className", "classes", "defaultValue", "disabled", "enableThreeStateBehavior", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "inputAttr", "isDirty", "isValid", "name", "onClick", "onFocusIn", "onKeyDown", "readOnly", "rtlEnabled", "saveValueChangeEvent", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChange", "visible", "width"];
import {
createVNode,
createFragment,
createComponentVNode,
normalizeProps
} from "inferno";
import {
createReRenderEffect,
InfernoWrapperComponent
} from "@devextreme/runtime/inferno";
import devices from "../../../core/devices";
import {
convertRulesToOptions
} from "../../../core/options/utils";
import {
combineClasses
} from "../../core/utils/combine_classes";
import {
createRef as infernoCreateRef,
Fragment
} from "inferno";
import {
CheckBoxIcon
} from "./check_box_icon";
import {
defaultEditorProps,
Editor
} from "./editor_base/editor";
const getCssClasses = model => {
const {
text: text,
value: value
} = model;
const checked = value;
const indeterminate = null === checked;
const classesMap = {
"dx-checkbox": true,
"dx-checkbox-checked": true === checked,
"dx-checkbox-has-text": !!text,
"dx-checkbox-indeterminate": indeterminate
};
return combineClasses(classesMap)
};
export const defaultCheckBoxProps = _extends({}, defaultEditorProps, {
text: "",
enableThreeStateBehavior: false,
activeStateEnabled: true,
hoverStateEnabled: true,
get focusStateEnabled() {
return "desktop" === devices.real().deviceType && !devices.isSimulator()
},
defaultValue: false,
valueChange: () => {}
});
export class CheckBox extends InfernoWrapperComponent {
constructor(props) {
super(props);
this.editorRef = infernoCreateRef();
this.state = {
value: void 0 !== this.props.value ? this.props.value : this.props.defaultValue
};
this.focus = this.focus.bind(this);
this.blur = this.blur.bind(this);
this.onWidgetClick = this.onWidgetClick.bind(this);
this.keyDown = this.keyDown.bind(this)
}
createEffects() {
return [createReRenderEffect()]
}
onWidgetClick(event) {
const {
enableThreeStateBehavior: enableThreeStateBehavior,
readOnly: readOnly,
saveValueChangeEvent: saveValueChangeEvent
} = this.props;
if (!readOnly) {
null === saveValueChangeEvent || void 0 === saveValueChangeEvent || saveValueChangeEvent(event);
if (enableThreeStateBehavior) {
var _this$props$valueChan, _this$props;
let __newValue;
this.setState((__state_argument => {
__newValue = null === (void 0 !== this.props.value ? this.props.value : __state_argument.value) || (!(void 0 !== this.props.value ? this.props.value : __state_argument.value) ? null : false);
return {
value: __newValue
}
}));
null === (_this$props$valueChan = (_this$props = this.props).valueChange) || void 0 === _this$props$valueChan || _this$props$valueChan.call(_this$props, __newValue)
} else {
var _this$props$valueChan2, _this$props2;
let __newValue;
this.setState((__state_argument => {
__newValue = !((void 0 !== this.props.value ? this.props.value : __state_argument.value) ?? false);
return {
value: __newValue
}
}));
null === (_this$props$valueChan2 = (_this$props2 = this.props).valueChange) || void 0 === _this$props$valueChan2 || _this$props$valueChan2.call(_this$props2, __newValue)
}
}
}
keyDown(e) {
const {
onKeyDown: onKeyDown
} = this.props;
const {
keyName: keyName,
originalEvent: originalEvent,
which: which
} = e;
const result = null === onKeyDown || void 0 === onKeyDown ? void 0 : onKeyDown(e);
if (null !== result && void 0 !== result && result.cancel) {
return result
}
if ("space" === keyName || "space" === which) {
originalEvent.preventDefault();
this.onWidgetClick(originalEvent)
}
return
}
get cssClasses() {
return getCssClasses(_extends({}, this.props, {
value: void 0 !== this.props.value ? this.props.value : this.state.value
}))
}
get aria() {
const checked = true === (void 0 !== this.props.value ? this.props.value : this.state.value);
const indeterminate = null === (void 0 !== this.props.value ? this.props.value : this.state.value);
const result = {
role: "checkbox",
checked: indeterminate ? "mixed" : `${checked}`
};
return _extends({}, result, this.props.aria)
}
get restAttributes() {
const _this$props3 = this.props,
restProps = _objectWithoutPropertiesLoose(_this$props3, _excluded);
return restProps
}
focus() {
this.editorRef.current.focus()
}
blur() {
this.editorRef.current.blur()
}
render() {
const value = void 0 !== this.props.value ? this.props.value : this.state.value;
return normalizeProps(createComponentVNode(2, Editor, _extends({
aria: this.aria,
classes: this.cssClasses,
onClick: this.onWidgetClick,
onKeyDown: this.keyDown,
accessKey: this.props.accessKey,
activeStateEnabled: this.props.activeStateEnabled,
focusStateEnabled: this.props.focusStateEnabled,
hoverStateEnabled: this.props.hoverStateEnabled,
className: this.props.className,
disabled: this.props.disabled,
readOnly: this.props.readOnly,
hint: this.props.hint,
height: this.props.height,
width: this.props.width,
rtlEnabled: this.props.rtlEnabled,
tabIndex: this.props.tabIndex,
visible: this.props.visible,
validationError: this.props.validationError,
validationErrors: this.props.validationErrors,
validationMessageMode: this.props.validationMessageMode,
validationMessagePosition: this.props.validationMessagePosition,
validationStatus: this.props.validationStatus,
isValid: this.props.isValid,
onFocusIn: this.props.onFocusIn
}, this.restAttributes, {
children: createFragment([normalizeProps(createVNode(64, "input", null, null, 1, _extends({
type: "hidden",
value: `${value}`
}, this.props.name && {
name: this.props.name
}))), createVNode(1, "div", "dx-checkbox-container", [createComponentVNode(2, CheckBoxIcon, {
size: this.props.iconSize,
isChecked: true === value
}), this.props.text && createVNode(1, "span", "dx-checkbox-text", this.props.text, 0)], 0)], 4)
}), null, this.editorRef))
}
}
function __processTwoWayProps(defaultProps) {
const twoWayProps = ["value"];
return Object.keys(defaultProps).reduce(((props, propName) => {
const propValue = defaultProps[propName];
const defaultPropName = twoWayProps.some((p => p === propName)) ? `default${propName.charAt(0).toUpperCase()}${propName.slice(1)}` : propName;
props[defaultPropName] = propValue;
return props
}), {})
}
CheckBox.defaultProps = defaultCheckBoxProps;
const __defaultOptionRules = [];
export function defaultOptions(rule) {
__defaultOptionRules.push(rule);
CheckBox.defaultProps = Object.create(Object.prototype, Object.assign(Object.getOwnPropertyDescriptors(CheckBox.defaultProps), Object.getOwnPropertyDescriptors(__processTwoWayProps(convertRulesToOptions(__defaultOptionRules)))))
}