@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
372 lines (371 loc) • 13.9 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 r from "react";
import o from "prop-types";
import { validatePackage as F, getLicenseMessage as G, canUseDOM as M, Navigation as f, getActiveElement as b, disableNavigatableContainer as C, keepFocusInContainer as A, TABBABLE_ELEMENTS as N, focusFirstFocusableChild as I, enableNavigatableContainer as _, getTabIndex as k, classNames as T, kendoThemeMaps as O, Draggable as z, WatermarkOverlay as B, createPropsContext as P, withIdHOC as V, withPropsContext as K } from "@progress/kendo-react-common";
import { packageMetadata as R } from "../package-metadata.mjs";
import { Slider as S } from "../slider/Slider.mjs";
import { isPresent as y, fitIntoBounds as E } from "./utils/misc.mjs";
import { getHSV as u, getColorFromHue as p, getRGBA as c, getColorFromRGBA as U, parseColor as d, getColorFromHSV as W } from "./utils/color-parser.mjs";
import { cacheHex as $, cacheRgba as j, removeCachedColor as X, cacheHsva as Y, getCachedHsva as q, getCachedRgba as J, getCachedHex as Q } from "./utils/color-cache.mjs";
import Z from "./ColorInput.mjs";
import { ColorContrastLabels as ee } from "./ColorContrastLabels.mjs";
import { ColorContrastSvg as te } from "./ColorContrastSvg.mjs";
import { provideLocalizationService as se } from "@progress/kendo-react-intl";
import { colorGradientHueSliderLabel as w, messages as x, colorGradientAlphaSliderLabel as H } from "../messages/index.mjs";
const ae = "rgba", L = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
constructor(t) {
super(t), this.wrapperRef = r.createRef(), this.hsvGradientRef = r.createRef(), this.showLicenseWatermark = !1, this.focus = () => {
this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
}, this.onHexChange = (e, s, i) => {
if (this.isUncontrolled) {
const n = u(s);
this.setState({ hsva: n, backgroundColor: p(n.h), rgba: c(s), hex: e });
} else
$(this.state.guid, s, e);
this.dispatchChangeEvent(s, i, i.nativeEvent);
}, this.onRgbaChange = (e, s) => {
const i = U(e);
if (this.isUncontrolled) {
const n = u(i), l = d(i, "hex");
this.setState({ hsva: n, backgroundColor: p(n.h), rgba: e, hex: l });
} else
j(this.state.guid, i, e);
this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
}, this.onAlphaSliderChange = (e) => {
this.handleHsvaChange(
Object.assign({}, this.state.hsva, { a: e.value / 100 }),
e.syntheticEvent,
e.nativeEvent
);
}, this.onHueSliderChange = (e) => {
this.handleHsvaChange(
Object.assign({}, this.state.hsva, { h: e.value }),
e.syntheticEvent,
e.nativeEvent
);
}, this.onDrag = (e) => {
this.gradientWrapper.classList.add("k-dragging"), this.changePosition(e.event);
}, this.onRelease = () => {
this.gradientWrapper.classList.remove("k-dragging");
}, this.onGradientWrapperClick = (e) => {
this.changePosition(e);
}, this.onHsvGradientKeyDown = (e) => {
var s;
(s = this.hsvNavigation) == null || s.triggerKeyboardEvent(e);
}, this.onHsvGradientValueChange = (e, s, i) => {
const n = parseInt(e.style.top, 10) + i, l = parseInt(e.style.left, 10) + s;
e.style.top = `${n}px`, e.style.left = `${l}px`, this.moveDragHandle(l, n);
}, this.changePosition = (e) => {
const s = this.getGradientRectMetrics(), i = e.clientX - s.left, n = e.clientY - s.top;
this.moveDragHandle(i, n);
}, this.onFocus = (e) => {
this.props.onFocus && this.props.onFocus.call(void 0, { nativeEvent: e, target: this });
}, this.onKeyDown = (e) => {
var s;
(s = this.navigation) == null || s.triggerKeyboardEvent(e);
}, this.showLicenseWatermark = !F(R, { component: "ColorGradient" }), this.licenseMessage = G(R);
const a = t.value || t.defaultValue || d(L, ae);
this.state = Object.assign({}, h.getStateFromValue(a), {
isFirstRender: !0,
guid: this.props.id
});
}
/**
* @hidden
*/
static getDerivedStateFromProps(t, a) {
return t.value && !a.isFirstRender ? h.getStateFromValue(t.value, a.guid) : null;
}
/**
* @hidden
*/
componentDidMount() {
if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = M && window.ResizeObserver && new window.ResizeObserver(() => {
this.forceUpdate();
}), this.resizeObserver && this.resizeObserver.observe(this.gradientWrapper)), this.wrapperRef && this.hsvGradientRef) {
let t = 0, a = 0;
this.hsvNavigation = new f({
tabIndex: 0,
root: this.hsvGradientRef,
selectors: [".k-hsv-rectangle .k-hsv-draghandle"],
keyboardEvents: {
keydown: {
ArrowDown: (e, s, i) => {
a = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, 0, a);
},
ArrowUp: (e, s, i) => {
a = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, 0, a);
},
ArrowLeft: (e, s, i) => {
t = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, t, 0);
},
ArrowRight: (e, s, i) => {
t = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, t, 0);
}
}
}
});
}
this.wrapperRef && this.wrapperRef.current && (this.props.isInsidePopup ? this.hsvGradientRef.current && this.hsvGradientRef.current.focus() : this.navigation = new f({
tabIndex: 0,
root: this.wrapperRef,
selectors: [".k-colorgradient"],
keyboardEvents: {
keydown: {
Tab: (t, a, e) => {
b(document) === t ? C(t) : A(e, t, N);
},
Enter: (t, a, e) => {
b(document) === t && (I(t), _(t));
},
Escape: (t, a, e) => {
b(document) !== t && (t.focus(), C(t));
}
}
}
}));
}
/**
* @hidden
*/
componentWillUnmount() {
X(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
}
/**
* @hidden
*/
componentDidUpdate(t, a) {
a.backgroundColor !== this.state.backgroundColor && this.setAlphaSliderBackground(this.state.backgroundColor);
}
/**
* @hidden
*/
renderRectangleDragHandle() {
const t = {};
if (!this.state.isFirstRender) {
const a = this.getGradientRectMetrics(), e = (1 - this.state.hsva.v) * a.height, s = this.state.hsva.s * a.width;
t.top = `${e}px`, t.left = `${s}px`;
}
return /* @__PURE__ */ r.createElement(
"div",
{
ref: this.hsvGradientRef,
role: "slider",
tabIndex: k(this.props.tabIndex, this.props.disabled),
"aria-valuetext": this.props.ariaValueText,
"aria-valuenow": parseInt(this.state.hex.substring(1), 16),
"aria-label": this.props.ariaLabelHSV,
"aria-orientation": void 0,
"aria-disabled": this.props.disabled ? "true" : void 0,
className: "k-hsv-draghandle k-draghandle",
style: t,
onKeyDown: this.onHsvGradientKeyDown
}
);
}
/**
* @hidden
*/
moveDragHandle(t, a) {
const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = E(a, 0, i), l = E(t, 0, s), D = Object.assign({}, this.state.hsva, {
s: l / s,
v: 1 - n / i
});
this.handleHsvaChange(D, {}, {});
}
/**
* @hidden
*/
handleHsvaChange(t, a, e) {
const s = W(t), i = d(s, "hex");
this.isUncontrolled || Y(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: p(t.h), rgba: c(s), hex: i }), this.dispatchChangeEvent(s, a, e);
}
/**
* @hidden
*/
dispatchChangeEvent(t, a, e) {
this.props.onChange && this.props.onChange.call(void 0, {
syntheticEvent: a,
nativeEvent: e,
target: this,
value: t
});
}
/**
* @hidden
*/
static getStateFromValue(t, a) {
y(d(t, "hex")) || (t = L);
const e = q(a, t) || u(t), s = J(a, t) || c(t), i = Q(a, t) || d(t, "hex"), n = p(e.h);
return { hsva: e, backgroundColor: n, rgba: s, hex: i };
}
/**
* @hidden
*/
setAlphaSliderBackground(t) {
this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack && (this.alphaSlider.sliderTrack.style.background = `linear-gradient(to ${this.props._adaptive ? "right" : "top"}, transparent, ${t})`);
}
/**
* @hidden
*/
get isUncontrolled() {
return this.props.value === void 0;
}
/**
* @hidden
*/
getGradientRectMetrics() {
return this.gradientWrapper.getBoundingClientRect();
}
/**
* @hidden
*/
render() {
const t = se(this);
return /* @__PURE__ */ r.createElement(
"div",
{
id: this.props.id,
role: this.props.role,
className: T(
"k-colorgradient",
{
[`k-colorgradient-${O.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
"k-disabled": this.props.disabled
},
this.props.className
),
"aria-disabled": this.props.disabled ? "true" : void 0,
style: { position: "relative", ...this.props.style },
ref: this.wrapperRef,
tabIndex: k(this.props.tabIndex, this.props.disabled),
"aria-label": this.props.ariaLabel,
"aria-labelledby": this.props.ariaLabelledBy,
"aria-describedby": this.props.ariaDescribedBy,
onFocus: this.onFocus,
onKeyDown: this.onKeyDown
},
/* @__PURE__ */ r.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
z,
{
onDrag: this.onDrag,
onRelease: this.onRelease,
ref: (a) => {
this.gradientWrapper = a ? a.element : void 0;
}
},
/* @__PURE__ */ r.createElement(
"div",
{
className: "k-hsv-gradient",
style: { touchAction: "none" },
onClick: this.onGradientWrapperClick
},
this.renderRectangleDragHandle()
)
), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
te,
{
metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
hsva: this.state.hsva,
backgroundColor: this.props.backgroundColor
}
)), /* @__PURE__ */ r.createElement("div", { className: `k-hsv-controls ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement(
S,
{
value: this.state.hsva.h,
buttons: !1,
vertical: !this.props._adaptive,
min: 0,
max: 360,
step: 5,
onChange: this.onHueSliderChange,
className: "k-hue-slider k-colorgradient-slider",
disabled: this.props.disabled,
ariaLabel: t.toLanguageString(
w,
x[w]
)
}
), this.props.opacity && /* @__PURE__ */ r.createElement(
S,
{
value: y(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
buttons: !1,
vertical: !this.props._adaptive,
min: 0,
max: 100,
step: 1,
ariaLabel: t.toLanguageString(
H,
x[H]
),
onChange: this.onAlphaSliderChange,
className: "k-alpha-slider k-colorgradient-slider",
disabled: this.props.disabled,
ref: (a) => {
this.alphaSlider = a;
}
}
))),
/* @__PURE__ */ r.createElement(
Z,
{
rgba: this.state.rgba,
onRgbaChange: this.onRgbaChange,
hex: this.state.hex,
onHexChange: this.onHexChange,
opacity: this.props.opacity,
disabled: this.props.disabled,
defaultInputMode: this.props.format,
size: this.props.size,
fillMode: this.props.fillMode
}
),
this.props.backgroundColor && /* @__PURE__ */ r.createElement(ee, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba }),
this.showLicenseWatermark && /* @__PURE__ */ r.createElement(B, { message: this.licenseMessage })
);
}
};
h.displayName = "ColorGradient", h.propTypes = {
defaultValue: o.string,
value: o.string,
onChange: o.func,
onFocus: o.func,
opacity: o.bool,
backgroundColor: o.string,
format: o.any,
disabled: o.bool,
style: o.any,
id: o.string,
role: o.string,
ariaLabel: o.string,
ariaLabelledBy: o.string,
ariaDescribedBy: o.string,
className: o.string,
size: o.oneOf(["small", "medium", "large", null])
}, h.defaultProps = {
opacity: !0,
role: "textbox",
format: "rgb",
size: "medium"
};
let m = h;
const ie = P(), re = V(
K(
ie,
m
)
);
re.displayName = "KendoReactColorGradient";
export {
re as ColorGradient,
ie as ColorGradientPropsContext,
m as ColorGradientWithoutContext
};