@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
369 lines (368 loc) • 11.4 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 a from "react";
import l from "prop-types";
import { validatePackage as te, getLicenseMessage as le, Navigation as ne, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as oe, focusFirstFocusableChild as ie, enableNavigatableContainer as re, getTabIndex as ce, classNames as M, kendoThemeMaps as se, WatermarkOverlay as de } from "@progress/kendo-react-common";
import { ButtonGroup as L, Button as d } from "@progress/kendo-react-buttons";
import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as ve } from "@progress/kendo-svg-icons";
import { ColorPalette as ue } from "./ColorPalette.mjs";
import { ColorGradient as ge } from "./ColorGradient.mjs";
import { packageMetadata as O } from "../package-metadata.mjs";
import { useLocalization as me } from "@progress/kendo-react-intl";
import { flatColorPickerColorGradientBtn as k, messages as v, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as T, flatColorPickerApplyBtn as ke, flatColorPickerCancelBtn as Ce } from "../messages/index.mjs";
const D = a.forwardRef((e, H) => {
const W = !te(O, { component: "FlatColorPicker" }), q = le(O), f = a.useRef(null), y = a.useRef(null), $ = a.useRef(null), {
defaultValue: b,
showButtons: w = !0,
showPreview: j = !0,
showClearButton: J = !0,
view: h = e.views ? void 0 : "ColorGradient",
views: r = h ? void 0 : ["gradient", "palette"],
activeView: P = "gradient",
size: o = "medium"
} = e, [u, Q] = a.useState(
(h || "ColorGradient") === "ColorGradient"
), [s, x] = a.useState(
(r != null ? r : [])[0] === "gradient" && P === "gradient"
), [i, E] = a.useState(e.value || b || void 0), [g, I] = a.useState(e.value || b || void 0), B = e.value !== void 0 ? e.value : void 0;
a.useEffect(() => {
E(e.value);
}, [e.value]);
const m = me(), R = a.useCallback(() => {
f.current && f.current.focus();
}, [f]);
a.useImperativeHandle(
f,
() => ({
element: y.current,
focus: R,
props: e,
value: B
}),
[B, R, e]
), a.useImperativeHandle(H, () => f.current);
const A = a.useCallback(
(t) => {
(t === "ColorGradient" && !u || t === "ColorPalette" && u) && Q(!u);
},
[u]
), N = a.useCallback(
(t) => {
t === "gradient" && !s || t === "palette" && s || t === "palette" && P === "gradient" ? x(!s) : t === "gradient" && P === "palette" && x(!0);
},
[P, s]
), U = a.useCallback(
(t) => {
var c;
const n = b || void 0;
if (E(n), I(n), (c = e._gradientSettings) != null && c._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(n), e.onPreviewChange) {
const S = {
value: n,
nativeEvent: t.nativeEvent,
syntheticEvent: t
};
e.onPreviewChange.call(void 0, S);
}
},
[b, e.onPreviewChange]
), F = a.useCallback(
(t) => {
var n;
if (E(t.value), e.onPreviewChange) {
const c = {
value: t.value,
nativeEvent: t.nativeEvent,
syntheticEvent: t.syntheticEvent
};
e.onPreviewChange.call(void 0, c);
}
(n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
},
[e.onPreviewChange]
), X = a.useCallback(
(t) => {
if (i !== void 0 && I(i), e.onChange) {
const n = {
value: i,
nativeEvent: t.nativeEvent,
syntheticEvent: t
};
e.onChange.call(void 0, n);
}
},
[i, e.onChange]
), Y = a.useCallback(() => {
E(g), e.setOpen && e.setOpen(!1);
}, [g]), Z = a.useCallback(
(t) => {
if (E(g), e.onPreviewChange) {
const n = {
value: g,
nativeEvent: t.nativeEvent,
syntheticEvent: t
};
e.onPreviewChange.call(void 0, n);
}
},
[g, e.onPreviewChange]
), p = a.useCallback(
(t) => {
var c, S;
if ((!t.relatedTarget || !((c = y.current) != null && c.contains(t.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
const ae = {
value: i,
nativeEvent: t.nativeEvent,
syntheticEvent: t
};
e.onChange.call(void 0, ae);
}
},
[i, w, e.onChange]
), z = a.useMemo(
() => new ne({
root: y,
selectors: [".k-coloreditor"],
tabIndex: 0,
keyboardEvents: {
keydown: {
Tab: (t, n, c) => {
_(document) === t ? K(t) : oe(c, t);
},
Enter: (t, n, c) => {
_(document) === t && (ie(t), re(t));
},
Escape: (t, n, c) => {
_(document) !== t && (t.focus(), K(t));
}
}
}
}),
[]
), ee = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
return /* @__PURE__ */ a.createElement(
"div",
{
id: e.id,
role: "textbox",
"aria-label": e.ariaLabel,
"aria-labelledby": e.ariaLabelledBy,
"aria-disabled": e.disabled ? "true" : void 0,
style: { position: "relative", ...e.style },
ref: y,
tabIndex: ce(e.tabIndex, e.disabled),
className: M(
"k-flatcolorpicker k-coloreditor",
{
[`k-coloreditor-${se.sizeMap[o] || o}`]: o,
"k-disabled": e.disabled
},
e.className
),
onBlur: p,
onKeyDown: ee
},
e.header || /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
d,
{
type: "button",
"aria-label": m.toLanguageString(
k,
v[k]
),
togglable: !0,
fillMode: "flat",
size: o,
svgIcon: V,
selected: s,
onClick: () => N("gradient")
}
), /* @__PURE__ */ a.createElement(
d,
{
type: "button",
"aria-label": m.toLanguageString(
C,
v[C]
),
togglable: !0,
fillMode: "flat",
size: o,
svgIcon: G,
selected: !s,
onClick: () => N("palette")
}
)), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
d,
{
type: "button",
"aria-label": m.toLanguageString(
C,
v[C]
),
togglable: !0,
fillMode: "flat",
size: o,
svgIcon: G,
selected: !s,
onClick: () => N("palette")
}
), /* @__PURE__ */ a.createElement(
d,
{
type: "button",
"aria-label": m.toLanguageString(
k,
v[k]
),
togglable: !0,
fillMode: "flat",
size: o,
svgIcon: V,
selected: s,
onClick: () => N("gradient")
}
)), h && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
d,
{
type: "button",
"aria-label": m.toLanguageString(
k,
v[k]
),
togglable: !0,
fillMode: "flat",
size: o,
selected: u,
onClick: () => A("ColorGradient"),
icon: "droplet-slider",
svgIcon: V
}
), /* @__PURE__ */ a.createElement(
d,
{
type: "button",
"aria-label": m.toLanguageString(
C,
v[C]
),
togglable: !0,
fillMode: "flat",
size: o,
selected: !u,
onClick: () => A("ColorPalette"),
icon: "palette",
svgIcon: G
}
))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, J && /* @__PURE__ */ a.createElement(
d,
{
type: "button",
fillMode: "flat",
size: o,
onClick: U,
"aria-label": m.toLanguageString(
T,
v[T]
),
icon: "droplet-slash",
svgIcon: ve
}
), j && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
"span",
{
className: M("k-coloreditor-preview-color", "k-color-preview", {
"k-no-color": B === void 0
})
},
/* @__PURE__ */ a.createElement(
"span",
{
className: "k-color-preview-mask",
style: { background: i || void 0 }
}
)
), /* @__PURE__ */ a.createElement(
"span",
{
className: M("k-coloreditor-current-color", "k-color-preview", {
"k-no-color": g === void 0
}),
onClick: Z
},
/* @__PURE__ */ a.createElement(
"span",
{
className: "k-color-preview-mask",
style: { background: g || void 0 }
}
)
))), W && /* @__PURE__ */ a.createElement(de, { message: q })),
/* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && u || r && s) && /* @__PURE__ */ a.createElement(
ge,
{
ref: $,
role: "none",
ariaLabel: void 0,
value: i,
onChange: F,
opacity: e.opacity,
format: e.format,
size: o,
_adaptive: e._gradientSettings ? e._gradientSettings._adaptive : void 0,
...e._gradientSettings
}
), (h && !u || r && !s) && /* @__PURE__ */ a.createElement(
ue,
{
ariaDisabled: !0,
ariaLabelledBy: "required_label",
value: i,
onChange: F,
size: o,
...e._paletteSettings
}
)),
w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ a.createElement(
d,
{
type: "button",
themeColor: "primary",
className: "k-coloreditor-apply",
size: o,
onClick: X
},
v[ke]
), /* @__PURE__ */ a.createElement(d, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: Y }, v[Ce]))
);
}), fe = {
id: l.string,
style: l.any,
className: l.string,
value: l.string,
defaultValue: l.string,
onPreviewChange: l.func,
onChange: l.func,
opacity: l.bool,
format: l.any,
tabIndex: l.number,
ariaLabel: l.string,
ariaLabelledBy: l.string,
disabled: l.bool,
view: l.any,
header: l.any,
showClearButton: l.bool,
showPreview: l.bool,
showButtons: l.bool,
views: l.array,
size: l.oneOf([null, "small", "medium", "large"])
};
D.displayName = "KendoFlatColorPicker";
D.propTypes = fe;
export {
D as FlatColorPicker
};