@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 t from "react";
import l from "prop-types";
import { validatePackage as ee, Navigation as te, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as ae, 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, flatColorPickerApplyBtn as ge, flatColorPickerCancelBtn as me } from "../messages/index.mjs";
const T = t.forwardRef((e, D) => {
const H = !ee(ue, { component: "FlatColorPicker" }), f = t.useRef(null), y = t.useRef(null), W = t.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] = t.useState(
(h || "ColorGradient") === "ColorGradient"
), [d, x] = t.useState(
(r != null ? r : [])[0] === "gradient" && P === "gradient"
), [i, E] = t.useState(e.value || b || void 0), [g, I] = t.useState(e.value || b || void 0), B = e.value !== void 0 ? e.value : void 0;
t.useEffect(() => {
E(e.value);
}, [e.value]);
const m = ve(), R = t.useCallback(() => {
f.current && f.current.focus();
}, [f]);
t.useImperativeHandle(
f,
() => ({
element: y.current,
focus: R,
props: e,
value: B
}),
[B, R, e]
), t.useImperativeHandle(D, () => f.current);
const A = t.useCallback(
(a) => {
(a === "ColorGradient" && !v || a === "ColorPalette" && v) && j(!v);
},
[v]
), N = t.useCallback(
(a) => {
a === "gradient" && !d || a === "palette" && d || a === "palette" && P === "gradient" ? x(!d) : a === "gradient" && P === "palette" && x(!0);
},
[P, d]
), J = t.useCallback(
(a) => {
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: a.nativeEvent,
syntheticEvent: a
};
e.onPreviewChange.call(void 0, S);
}
},
[b, e.onPreviewChange]
), F = t.useCallback(
(a) => {
var n;
if (E(a.value), e.onPreviewChange) {
const c = {
value: a.value,
nativeEvent: a.nativeEvent,
syntheticEvent: a.syntheticEvent
};
e.onPreviewChange.call(void 0, c);
}
(n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(a.value);
},
[e.onPreviewChange]
), Q = t.useCallback(
(a) => {
if (i !== void 0 && I(i), e.onChange) {
const n = {
value: i,
nativeEvent: a.nativeEvent,
syntheticEvent: a
};
e.onChange.call(void 0, n);
}
},
[i, e.onChange]
), U = t.useCallback(() => {
E(g), e.setOpen && e.setOpen(!1);
}, [g]), X = t.useCallback(
(a) => {
if (E(g), e.onPreviewChange) {
const n = {
value: g,
nativeEvent: a.nativeEvent,
syntheticEvent: a
};
e.onPreviewChange.call(void 0, n);
}
},
[g, e.onPreviewChange]
), Y = t.useCallback(
(a) => {
var c, S;
if ((!a.relatedTarget || !((c = y.current) != null && c.contains(a.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
const p = {
value: i,
nativeEvent: a.nativeEvent,
syntheticEvent: a
};
e.onChange.call(void 0, p);
}
},
[i, w, e.onChange]
), z = t.useMemo(
() => new te({
root: y,
selectors: [".k-coloreditor"],
tabIndex: 0,
keyboardEvents: {
keydown: {
Tab: (a, n, c) => {
_(document) === a ? K(a) : ae(c, a);
},
Enter: (a, n, c) => {
_(document) === a && (le(a), ne(a));
},
Escape: (a, n, c) => {
_(document) !== a && (a.focus(), K(a));
}
}
}
}),
[]
), Z = t.useCallback(z.triggerKeyboardEvent.bind(z), []);
return /* @__PURE__ */ t.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__ */ t.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.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__ */ t.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__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.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__ */ t.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__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.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__ */ t.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__ */ t.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, $ && /* @__PURE__ */ t.createElement(
s,
{
type: "button",
fillMode: "flat",
size: o,
onClick: J,
"aria-label": m.toLanguageString(
O,
u[O]
),
icon: "droplet-slash",
svgIcon: ce
}
), q && /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ t.createElement(
"span",
{
className: V("k-coloreditor-preview-color", "k-color-preview", {
"k-no-color": B === void 0
})
},
/* @__PURE__ */ t.createElement(
"span",
{
className: "k-color-preview-mask",
style: { background: i || void 0 }
}
)
), /* @__PURE__ */ t.createElement(
"span",
{
className: V("k-coloreditor-current-color", "k-color-preview", {
"k-no-color": g === void 0
}),
onClick: X
},
/* @__PURE__ */ t.createElement(
"span",
{
className: "k-color-preview-mask",
style: { background: g || void 0 }
}
)
))), H && /* @__PURE__ */ t.createElement(re, null)),
/* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && v || r && d) && /* @__PURE__ */ t.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__ */ t.createElement(
de,
{
ariaDisabled: !0,
ariaLabelledBy: "required_label",
value: i,
onChange: F,
size: o,
...e._paletteSettings
}
)),
w && /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ t.createElement(
s,
{
type: "button",
themeColor: "primary",
className: "k-coloreditor-apply",
size: o,
onClick: Q
},
u[ge]
), /* @__PURE__ */ t.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, 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
};