@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
131 lines (130 loc) • 5.55 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 t from "react";
import { NumericTextBox as r } from "../numerictextbox/NumericTextBox.mjs";
import M from "./HexInput.mjs";
import { Button as v } from "@progress/kendo-react-buttons";
import { caretAltExpandIcon as x } from "@progress/kendo-svg-icons";
import { provideLocalizationService as C, registerForIntl as k, registerForLocalization as E } from "@progress/kendo-react-intl";
import { colorGradientHex as n, messages as o, colorGradientR as l, colorGradientG as g, colorGradientB as p, colorGradientA as h, colorGradientToggleInputsButton as c } from "../messages/index.mjs";
const i = ["rgba", "rgb", "hex"];
class d extends t.Component {
constructor(e) {
super(e), this.onRgbaRChange = (a) => {
this.dispatchRgbaChange({ r: a.value }, a);
}, this.onRgbaGChange = (a) => {
this.dispatchRgbaChange({ g: a.value }, a);
}, this.onRgbaBChange = (a) => {
this.dispatchRgbaChange({ b: a.value }, a);
}, this.onRgbaAChange = (a) => {
this.dispatchRgbaChange({ a: a.value }, a);
}, this.state = { inputMode: e.defaultInputMode || i[1] };
}
render() {
const e = C(this), a = e.toLanguageString(n, o[n]), s = e.toLanguageString(l, o[l]), m = e.toLanguageString(g, o[g]), b = e.toLanguageString(p, o[p]), f = e.toLanguageString(h, o[h]), u = e.toLanguageString(
c,
o[c]
);
return /* @__PURE__ */ t.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
v,
{
"aria-label": u,
fillMode: "flat",
icon: "caret-alt-expand",
svgIcon: x,
className: "k-colorgradient-toggle-mode",
size: this.props.size,
onClick: this.onToggleModeChange.bind(this)
}
)), this.state.inputMode === "hex" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ t.createElement(
M,
{
hex: this.props.hex,
onHexChange: this.props.onHexChange,
disabled: this.props.disabled,
size: this.props.size,
fillMode: this.props.fillMode
}
), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, a)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
r,
{
value: this.props.rgba.r,
ariaLabel: String(this.props.rgba.r),
min: 0,
max: 255,
spinners: !1,
format: "n",
onChange: this.onRgbaRChange,
disabled: this.props.disabled,
size: this.props.size,
fillMode: this.props.fillMode
}
), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
r,
{
value: this.props.rgba.g,
ariaLabel: String(this.props.rgba.g),
min: 0,
max: 255,
spinners: !1,
format: "n",
onChange: this.onRgbaGChange,
disabled: this.props.disabled,
size: this.props.size,
fillMode: this.props.fillMode
}
), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, m)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
r,
{
value: this.props.rgba.b,
ariaLabel: String(this.props.rgba.b),
min: 0,
max: 255,
spinners: !1,
format: "n",
onChange: this.onRgbaBChange,
disabled: this.props.disabled,
size: this.props.size,
fillMode: this.props.fillMode
}
), /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, b))), this.state.inputMode === "rgba" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ t.createElement(
r,
{
value: this.props.rgba.a,
ariaLabel: String(this.props.rgba.a),
min: 0,
max: 1,
step: 0.01,
spinners: !1,
format: "n2",
onChange: this.onRgbaAChange,
disabled: this.props.disabled,
size: this.props.size,
fillMode: this.props.fillMode
}
), this.props.opacity && /* @__PURE__ */ t.createElement("label", { className: "k-colorgradient-input-label" }, f)));
}
dispatchRgbaChange(e, a) {
const s = { ...this.props.rgba };
e.r !== void 0 && (s.r = e.r), e.g !== void 0 && (s.g = e.g), e.b !== void 0 && (s.b = e.b), e.a !== void 0 && (s.a = e.a), this.props.onRgbaChange(s, a);
}
onToggleModeChange() {
const e = i.length - 1 === i.indexOf(this.state.inputMode) ? 0 : i.indexOf(this.state.inputMode) + 1;
if (this.props.opacity)
this.setState({ inputMode: i[e] });
else {
const a = i[e] === "rgba" ? e + 1 : e;
this.setState({ inputMode: i[a] });
}
}
}
k(d);
E(d);
export {
d as default
};