devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
215 lines (213 loc) • 8.89 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/check_box/editor_base/editor.js)
* Version: 24.2.6
* Build date: Mon Mar 17 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", "children", "className", "classes", "defaultValue", "disabled", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isDirty", "isValid", "name", "onClick", "onFocusIn", "onKeyDown", "readOnly", "rtlEnabled", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChange", "visible", "width"];
import {
createFragment,
createComponentVNode,
normalizeProps
} from "inferno";
import {
createReRenderEffect,
InfernoEffect,
InfernoWrapperComponent
} from "@devextreme/runtime/inferno";
import Guid from "../../../../core/guid";
import {
convertRulesToOptions
} from "../../../../core/options/utils";
import {
Widget,
WidgetDefaultProps
} from "../../../core/r1/widget";
import {
combineClasses
} from "../../../core/utils/combine_classes";
import {
createRef as infernoCreateRef,
Fragment
} from "inferno";
import {
ValidationMessage
} from "../wrappers/validation_message";
const getCssClasses = model => {
const {
classes: classes,
isValid: isValid,
readOnly: readOnly
} = model;
const classesMap = {
"dx-state-readonly": !!readOnly,
"dx-invalid": !isValid,
[String(classes)]: !!classes
};
return combineClasses(classesMap)
};
export const defaultEditorProps = _extends({}, WidgetDefaultProps, {
readOnly: false,
name: "",
validationError: null,
validationErrors: null,
validationMessageMode: "auto",
validationMessagePosition: "bottom",
validationStatus: "valid",
isValid: true,
isDirty: false,
inputAttr: {},
defaultValue: null,
valueChange: () => {}
});
export class Editor extends InfernoWrapperComponent {
constructor(props) {
super(props);
this.state = {};
this.widgetRef = infernoCreateRef();
this.rootElementRef = infernoCreateRef();
this.__getterCache = {};
this.state = {
validationMessageGuid: `dx-${new Guid}`,
isValidationMessageVisible: false,
value: void 0 !== this.props.value ? this.props.value : this.props.defaultValue
};
this.updateValidationMessageVisibility = this.updateValidationMessageVisibility.bind(this);
this.focus = this.focus.bind(this);
this.blur = this.blur.bind(this);
this.onFocusIn = this.onFocusIn.bind(this)
}
createEffects() {
return [new InfernoEffect(this.updateValidationMessageVisibility, [this.props.isValid, this.props.validationStatus, this.props.validationError, this.props.validationErrors]), createReRenderEffect()]
}
updateEffects() {
var _this$_effects;
null === (_this$_effects = this._effects) || void 0 === _this$_effects || null === (_this$_effects = _this$_effects[0]) || void 0 === _this$_effects || _this$_effects.update([this.props.isValid, this.props.validationStatus, this.props.validationError, this.props.validationErrors])
}
updateValidationMessageVisibility() {
this.setState((() => ({
isValidationMessageVisible: this.shouldShowValidationMessage
})))
}
onFocusIn(event) {
const {
onFocusIn: onFocusIn
} = this.props;
null === onFocusIn || void 0 === onFocusIn || onFocusIn(event)
}
get cssClasses() {
return `${getCssClasses(_extends({},this.props,{value:void 0!==this.props.value?this.props.value:this.state.value}))}`
}
get shouldShowValidationMessage() {
const {
isValid: isValid,
validationStatus: validationStatus
} = this.props;
const validationErrors = this.validationErrors ?? [];
const isEditorValid = isValid && "invalid" !== validationStatus;
return !isEditorValid && validationErrors.length > 0
}
get aria() {
const {
isValid: isValid,
readOnly: readOnly
} = this.props;
const result = {
readonly: readOnly ? "true" : "false",
invalid: !isValid ? "true" : "false"
};
if (this.shouldShowValidationMessage) {
result.describedBy = this.state.validationMessageGuid
}
return _extends({}, result, this.props.aria)
}
get validationErrors() {
if (void 0 !== this.__getterCache.validationErrors) {
return this.__getterCache.validationErrors
}
return this.__getterCache.validationErrors = (() => {
const {
validationError: validationError,
validationErrors: validationErrors
} = this.props;
let allValidationErrors = validationErrors && [...validationErrors];
if (!allValidationErrors && validationError) {
allValidationErrors = [_extends({}, validationError)]
}
return allValidationErrors
})()
}
get validationMessageTarget() {
var _this$rootElementRef;
return null === (_this$rootElementRef = this.rootElementRef) || void 0 === _this$rootElementRef ? void 0 : _this$rootElementRef.current
}
get restAttributes() {
const _this$props = this.props,
restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
return restProps
}
focus() {
this.widgetRef.current.focus()
}
blur() {
this.widgetRef.current.blur()
}
componentWillUpdate(nextProps) {
super.componentWillUpdate();
if (this.props.validationError !== nextProps.validationError || this.props.validationErrors !== nextProps.validationErrors) {
this.__getterCache.validationErrors = void 0
}
}
render() {
return normalizeProps(createComponentVNode(2, Widget, _extends({
rootElementRef: this.rootElementRef,
aria: this.aria,
classes: this.cssClasses,
activeStateEnabled: this.props.activeStateEnabled,
focusStateEnabled: this.props.focusStateEnabled,
hoverStateEnabled: this.props.hoverStateEnabled,
accessKey: this.props.accessKey,
className: this.props.className,
rtlEnabled: this.props.rtlEnabled,
hint: this.props.hint,
disabled: this.props.disabled,
height: this.props.height,
width: this.props.width,
onFocusIn: this.props.onFocusIn,
onClick: this.props.onClick,
onKeyDown: this.props.onKeyDown,
tabIndex: this.props.tabIndex,
visible: this.props.visible
}, this.restAttributes, {
children: createFragment([this.props.children, this.state.isValidationMessageVisible && createComponentVNode(2, ValidationMessage, {
validationErrors: this.validationErrors,
mode: this.props.validationMessageMode,
positionSide: this.props.validationMessagePosition,
rtlEnabled: this.props.rtlEnabled,
target: this.validationMessageTarget,
boundary: this.validationMessageTarget,
visualContainer: this.validationMessageTarget,
contentId: this.state.validationMessageGuid
})], 0)
}), null, this.widgetRef))
}
}
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
}), {})
}
Editor.defaultProps = defaultEditorProps;
const __defaultOptionRules = [];
export function defaultOptions(rule) {
__defaultOptionRules.push(rule);
Editor.defaultProps = Object.create(Object.prototype, Object.assign(Object.getOwnPropertyDescriptors(Editor.defaultProps), Object.getOwnPropertyDescriptors(__processTwoWayProps(convertRulesToOptions(__defaultOptionRules)))))
}