@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
230 lines (229 loc) • 7.35 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as s from "react";
import t from "prop-types";
import { dispatchEvent as C, noop as h, Keys as f, classNames as p, kendoThemeMaps as v, getTabIndex as S, createPropsContext as N, withIdHOC as D, withPropsContext as E } from "@progress/kendo-react-common";
import { provideLocalizationService as L } from "@progress/kendo-react-intl";
import { switchValidation as g, messages as B } from "../messages/index.mjs";
const a = class a extends s.Component {
/**
* @hidden
*/
constructor(r) {
super(r), this.setValidity = () => {
this._input && this._input.setCustomValidity && this._input.setCustomValidity(
this.validity.valid ? "" : this.props.validationMessage || this.defaultValidationMessage.toLanguageString(g, B[g])
);
}, this.limit = (e, i, o) => {
const n = o.offsetWidth, l = i.offsetWidth;
return e < 0 ? 0 : e > n - l ? n - l : e;
}, this.toggle = (e, i) => {
this.setState({ checked: e }), this.valueDuringOnChange = e, C(this.props.onChange, i, this, { value: e }), this.valueDuringOnChange = void 0;
}, this._element = null, this._wrapper = null, this._input = null, this._id = this.props.id, this.defaultValidationMessage = L(this), this.focus = () => {
this.actionElement && this.actionElement.focus();
}, this.dummyInput = (e) => /* @__PURE__ */ s.createElement(
"input",
{
type: "checkbox",
checked: this.props.checked,
ref: (i) => {
this._input = i;
},
tabIndex: -1,
"aria-hidden": !0,
value: e,
style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" },
onChange: h,
name: this.name || void 0
}
), this.handleClick = (e) => {
this.eventTimeStamp !== e.timeStamp && (this.eventTimeStamp = e.timeStamp, this.toggle(!this.value, e));
}, this.handleKeyDown = (e) => {
if (this.props.disabled)
return;
const { keyCode: i } = e;
(i === f.space || i === f.enter) && (this.toggle(!this.value, e), e.preventDefault());
}, this.handleWrapperFocus = (e) => {
if (this.props.disabled)
return;
this.setState({ focused: !0 });
const { onFocus: i } = this.props;
i && i.call(void 0, e);
}, this.handleWrapperBlur = (e) => {
if (this.props.disabled)
return;
this.setState({ focused: !1 });
const { onBlur: i } = this.props;
i && i.call(void 0, e);
}, this.state = {
checked: r.defaultChecked || a.defaultProps.defaultChecked,
focused: !1
};
}
/**
* Gets the value of the Switch.
*/
get value() {
return this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.checked !== void 0 ? this.props.checked : this.state.checked;
}
get element() {
return this._element;
}
get actionElement() {
return this._wrapper;
}
/**
* Gets the `name` property of the Switch.
*/
get name() {
return this.props.name;
}
/**
* Represents the validity state into which the Switch is set.
*/
get validity() {
const r = this.props.validationMessage !== void 0, e = this.props.valid !== void 0 ? this.props.valid : this.props.required ? !!this.value : !0, i = this.props.valid !== void 0 ? this.props.valid : e;
return {
customError: r,
valid: i,
valueMissing: this.value === null
};
}
/**
* @hidden
*/
get validityStyles() {
return this.props.validityStyles !== void 0 ? this.props.validityStyles : a.defaultProps.validityStyles;
}
/**
* @hidden
*/
get required() {
return this.props.required !== void 0 ? this.props.required : !1;
}
/**
* @hidden
*/
componentDidMount() {
this.setValidity(), this.forceUpdate();
}
/**
* @hidden
*/
componentDidUpdate() {
this.setValidity();
}
/**
* @hidden
*/
render() {
const { focused: r } = this.state, { dir: e, disabled: i, trackRounded: o, thumbRounded: n, size: l, offLabel: u, onLabel: m, tabIndex: b } = this.props;
this.dir = e || this.element && getComputedStyle(this.element).direction || void 0;
const y = !this.validityStyles || this.validity.valid, k = p(
"k-switch",
{
[`k-switch-${v.sizeMap[l] || l}`]: l,
"k-switch-on": this.value,
"k-switch-off": !this.value,
"k-focus": r,
"k-disabled": i,
"k-invalid": !y
},
this.props.className
), w = {
"aria-checked": this.value,
"aria-disabled": i || void 0,
"aria-labelledby": this.props.ariaLabelledBy,
"aria-describedby": this.props.ariaDescribedBy,
"aria-label": this.props.ariaLabel,
"aria-required": this.props.required
};
return /* @__PURE__ */ s.createElement(
"span",
{
ref: (d) => {
this._wrapper = d;
},
role: "switch",
...w,
className: k,
dir: this.dir,
onKeyDown: this.handleKeyDown,
onClick: this.handleClick,
onBlur: this.handleWrapperBlur,
onFocus: this.handleWrapperFocus,
tabIndex: S(b, i, void 0),
accessKey: this.props.accessKey,
id: this.props.id || this._id
},
/* @__PURE__ */ s.createElement(
"span",
{
className: p("k-switch-track", {
[`k-rounded-${v.roundedMap[o] || o}`]: o
}),
ref: (d) => {
this._element = d;
}
},
this.dummyInput(this.value),
m ? /* @__PURE__ */ s.createElement("span", { className: "k-switch-label-on" }, m) : "",
u ? /* @__PURE__ */ s.createElement("span", { className: "k-switch-label-off" }, u) : ""
),
/* @__PURE__ */ s.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ s.createElement("span", { className: p("k-switch-thumb", { [`k-rounded-${n}`]: n }) }))
);
}
};
a.displayName = "Switch", a.propTypes = {
accessKey: t.string,
checked: t.bool,
className: t.string,
disabled: t.bool,
defaultChecked: t.bool,
size: t.oneOf([null, "small", "medium", "large"]),
trackRounded: t.oneOf([null, "small", "medium", "large", "full"]),
thumbRounded: t.oneOf([null, "small", "medium", "large", "full"]),
dir: t.string,
id: t.string,
ariaLabelledBy: t.string,
ariaDescribedBy: t.string,
offLabel: t.string,
required: t.bool,
tabIndex: t.number,
valid: t.bool,
validate: t.bool,
validationMessage: t.string,
onBlur: t.any,
onChange: t.any,
onFocus: t.any,
onLabel: t.string
}, a.defaultProps = {
disabled: !1,
defaultChecked: !1,
size: "medium",
trackRounded: "full",
thumbRounded: "full",
offLabel: "OFF",
onBlur: h,
onFocus: h,
onLabel: "ON",
validityStyles: !0
};
let c = a;
const M = N(), O = D(
E(
M,
c
)
);
O.displayName = "KendoReactSwitch";
export {
O as Switch,
M as SwitchPropsContext,
c as SwitchWithoutContext
};