@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 ee, Navigation as ae, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as te, focusFirstFocusableChild as le, enableNavigatableContainer as ne, getTabIndex as oe, classNames as V, kendoThemeMaps as ie, WatermarkOverlay as re } from "@progress/kendo-react-common";
import { ButtonGroup as L, Button as s } from "@progress/kendo-react-buttons";
import { dropletSliderIcon as M, paletteIcon as G, dropletSlashIcon as ce } from "@progress/kendo-svg-icons";
import { ColorPalette as de } from "./ColorPalette.mjs";
import { ColorGradient as se } from "./ColorGradient.mjs";
import { packageMetadata as ue } from "../package-metadata.mjs";
import { useLocalization as ve } from "@progress/kendo-react-intl";
import { flatColorPickerColorGradientBtn as k, messages as u, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as O, flatColorPickerCancelBtn as ge, flatColorPickerApplyBtn as me } from "../messages/index.mjs";
const T = a.forwardRef((e, D) => {
const H = !ee(ue, { component: "FlatColorPicker" }), f = a.useRef(null), y = a.useRef(null), W = a.useRef(null), {
defaultValue: b,
showButtons: w = !0,
showPreview: q = !0,
showClearButton: $ = !0,
view: h = e.views ? void 0 : "ColorGradient",
views: r = h ? void 0 : ["gradient", "palette"],
activeView: P = "gradient",
size: o = "medium"
} = e, [v, j] = a.useState(
(h || "ColorGradient") === "ColorGradient"
), [d, 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 = ve(), 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(D, () => f.current);
const A = a.useCallback(
(t) => {
(t === "ColorGradient" && !v || t === "ColorPalette" && v) && j(!v);
},
[v]
), N = a.useCallback(
(t) => {
t === "gradient" && !d || t === "palette" && d || t === "palette" && P === "gradient" ? x(!d) : t === "gradient" && P === "palette" && x(!0);
},
[P, d]
), J = 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]
), Q = 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]
), U = a.useCallback(() => {
E(g), e.setOpen && e.setOpen(!1);
}, [g]), X = 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]
), Y = 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 p = {
value: i,
nativeEvent: t.nativeEvent,
syntheticEvent: t
};
e.onChange.call(void 0, p);
}
},
[i, w, e.onChange]
), z = a.useMemo(
() => new ae({
root: y,
selectors: [".k-coloreditor"],
tabIndex: 0,
keyboardEvents: {
keydown: {
Tab: (t, n, c) => {
_(document) === t ? K(t) : te(c, t);
},
Enter: (t, n, c) => {
_(document) === t && (le(t), ne(t));
},
Escape: (t, n, c) => {
_(document) !== t && (t.focus(), K(t));
}
}
}
}),
[]
), Z = 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: oe(e.tabIndex, e.disabled),
className: V(
"k-flatcolorpicker k-coloreditor",
{
[`k-coloreditor-${ie.sizeMap[o] || o}`]: o,
"k-disabled": e.disabled
},
e.className
),
onBlur: Y,
onKeyDown: Z
},
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(
s,
{
type: "button",
"aria-label": m.toLanguageString(
k,
u[k]
),
togglable: !0,
fillMode: "flat",
size: o,
svgIcon: M,
selected: d,
onClick: () => N("gradient")
}
), /* @__PURE__ */ a.createElement(
s,
{
type: "button",
"aria-label": m.toLanguageString(
C,
u[C]
),
togglable: !0,
fillMode: "flat",
size: o,
svgIcon: G,
selected: !d,
onClick: () => N("palette")
}
)), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
s,
{
type: "button",
"aria-label": m.toLanguageString(
C,
u[C]
),
togglable: !0,
fillMode: "flat",
size: o,
svgIcon: G,
selected: !d,
onClick: () => N("palette")
}
), /* @__PURE__ */ a.createElement(
s,
{
type: "button",
"aria-label": m.toLanguageString(
k,
u[k]
),
togglable: !0,
fillMode: "flat",
size: o,
svgIcon: M,
selected: d,
onClick: () => N("gradient")
}
)), h && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
s,
{
type: "button",
"aria-label": m.toLanguageString(
k,
u[k]
),
togglable: !0,
fillMode: "flat",
size: o,
selected: v,
onClick: () => A("ColorGradient"),
icon: "droplet-slider",
svgIcon: M
}
), /* @__PURE__ */ a.createElement(
s,
{
type: "button",
"aria-label": m.toLanguageString(
C,
u[C]
),
togglable: !0,
fillMode: "flat",
size: o,
selected: !v,
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" }, $ && /* @__PURE__ */ a.createElement(
s,
{
type: "button",
fillMode: "flat",
size: o,
onClick: J,
"aria-label": m.toLanguageString(
O,
u[O]
),
icon: "droplet-slash",
svgIcon: ce
}
), q && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
"span",
{
className: V("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: V("k-coloreditor-current-color", "k-color-preview", {
"k-no-color": g === void 0
}),
onClick: X
},
/* @__PURE__ */ a.createElement(
"span",
{
className: "k-color-preview-mask",
style: { background: g || void 0 }
}
)
))), H && /* @__PURE__ */ a.createElement(re, null)),
/* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && v || r && d) && /* @__PURE__ */ a.createElement(
se,
{
ref: W,
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 && !v || r && !d) && /* @__PURE__ */ a.createElement(
de,
{
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-end k-actions-horizontal" }, /* @__PURE__ */ a.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, u[ge]), /* @__PURE__ */ a.createElement(
s,
{
type: "button",
themeColor: "primary",
className: "k-coloreditor-apply",
size: o,
onClick: Q
},
u[me]
))
);
}), ke = {
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"])
};
T.displayName = "KendoFlatColorPicker";
T.propTypes = ke;
export {
T as FlatColorPicker
};