@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
205 lines (204 loc) • 7.29 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 i from "react";
import s from "prop-types";
import { ColorPaletteService as w } from "./utils/color-palette.service.mjs";
import { KEYS as l, classNames as f, kendoThemeMaps as y, getTabIndex as E, dispatchEvent as k, createPropsContext as R, withIdHOC as F, withPropsContext as N } from "@progress/kendo-react-common";
import { PALETTEPRESETS as z } from "./models/palette-presets.mjs";
import { isPresent as T } from "./utils/misc.mjs";
import { parseColor as P } from "./utils/color-parser.mjs";
const I = 24, C = 10, D = "office", a = class a extends i.Component {
constructor(t) {
super(t), this.wrapperRef = i.createRef(), this.paletteService = null, this.focus = () => {
this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
}, this.onKeyDown = (e) => {
switch (e.key) {
case l.down:
this.handleCellNavigation(0, 1);
break;
case l.up:
this.handleCellNavigation(0, -1);
break;
case l.right:
this.handleCellNavigation(1, 0);
break;
case l.left:
this.handleCellNavigation(-1, 0);
break;
case l.enter:
this.handleEnter(e);
break;
default:
return;
}
e.preventDefault();
}, this.onColorClick = (e, o) => {
this.isUncontrolled ? this.setState({ selectedColor: e, focusedColor: e }) : this.setState({ focusedColor: e }), this.dispatchChangeEvent(e, o);
}, this.onFocus = (e) => {
this.paletteService && (this.setState({ focusedColor: this.state.selectedColor || this.paletteService.colorRows[0][0] }), this.props.onFocus && this.props.onFocus.call(void 0, e));
}, this.onBlur = () => {
this.setState({ focusedColor: void 0 });
}, this.state = {
selectedColor: this.props.value !== void 0 ? this.props.value : this.props.defaultValue ? this.props.defaultValue : void 0,
isFirstRender: !0
};
}
get guid() {
return this.props.id;
}
/**
* @hidden
*/
render() {
const t = this.getPaletteInfo(), e = this.paletteService = new w();
e.setColorMatrix(t.colors, t.columns);
const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor);
return t.colors.length ? /* @__PURE__ */ i.createElement(
"div",
{
id: this.props.id,
role: "grid",
className: f(
"k-colorpalette",
{
[`k-colorpalette-${y.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
"k-disabled": this.props.disabled
},
this.props.className
),
onFocus: this.onFocus,
onBlur: this.onBlur,
onKeyDown: this.onKeyDown,
"aria-disabled": this.props.ariaDisabled || (this.props.disabled ? "true" : void 0),
"aria-labelledby": this.props.ariaLabelledBy,
"aria-describedby": this.props.ariaDescribedBy,
tabIndex: E(this.props.tabIndex, this.props.disabled),
ref: this.wrapperRef
},
/* @__PURE__ */ i.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ i.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
) : "";
}
/**
* @hidden
*/
static getDerivedStateFromProps(t, e) {
if (!e.isFirstRender && t.value !== void 0) {
if (t.value === "" && e.selectedColor !== void 0)
return { selectedColor: void 0 };
if (t.value !== "" && t.value !== e.selectedColor)
return { selectedColor: t.value };
} else if (e.isFirstRender)
return { isFirstRender: !1 };
return null;
}
handleCellNavigation(t, e) {
if (this.paletteService)
if (this.focusedColorCooridanates) {
const o = this.paletteService.getNextCell(
this.focusedColorCooridanates,
t,
e
);
this.setState({ focusedColor: this.paletteService.getColorAt(o) });
} else
this.setState({ focusedColor: this.paletteService.colorRows[0][0] });
}
handleEnter(t) {
this.isUncontrolled && this.setState({ selectedColor: this.state.focusedColor }), this.dispatchChangeEvent(this.state.focusedColor, t);
}
dispatchChangeEvent(t, e) {
k(this.props.onChange, e, this, { value: t, rgbaValue: P(t, "rgba") });
}
get focusedColorCooridanates() {
return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : void 0;
}
get isUncontrolled() {
return this.props.value === void 0;
}
getPaletteInfo() {
if (typeof this.props.palette == "string") {
const t = z[this.props.palette];
return T(t) ? {
colors: t.colors,
columns: this.props.columns || t.columns || C
} : { colors: [], columns: 0 };
}
return { colors: this.props.palette || [], columns: this.props.columns || C };
}
renderRows(t, e, o) {
return t.map((r, n) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: n }, this.renderColumns(r, n, e, o)));
}
renderColumns(t, e, o, r) {
const n = o !== void 0 && o.row === e, m = o && o.col, g = r !== void 0 && r.row === e, v = r && r.col;
return t.map((p, c) => {
const h = n && m === c, b = f("k-colorpalette-tile", {
"k-selected": h,
"k-focus": g && v === c
});
let u = {
width: this.props.tileSize,
height: this.props.tileSize
};
return typeof this.props.tileSize == "object" && (u = {
width: this.props.tileSize.width,
height: this.props.tileSize.height
}), /* @__PURE__ */ i.createElement(
"td",
{
role: "gridcell",
className: b,
"aria-label": p,
"aria-selected": h ? !0 : this.props.disabled ? void 0 : !1,
style: { backgroundColor: p, ...u },
onClick: (S) => this.onColorClick(p, S),
id: this.createCellId({ row: e, col: c }),
key: c
}
);
});
}
createCellId(t) {
return `${this.guid}_${t.row}_${t.col}`;
}
};
a.displayName = "ColorPalette", a.propTypes = {
palette: s.oneOfType([s.arrayOf(s.string.isRequired), s.string]),
columns: s.number,
tileSize: s.any,
defaultValue: s.string,
value: s.string,
disabled: s.bool,
tabIndex: s.number,
onChange: s.func,
onFocus: s.func,
id: s.string,
ariaLabelledBy: s.string,
ariaDescribedBy: s.string,
className: s.string,
size: s.oneOf(["small", "medium", "large", null])
}, a.defaultProps = {
palette: D,
tileSize: I,
size: "medium"
};
let d = a;
const L = R(), U = F(
N(
L,
d
)
);
U.displayName = "KendoReactColorPalette";
export {
U as ColorPalette,
L as ColorPalettePropsContext,
d as ColorPaletteWithoutContext,
C as DEFAULT_COLUMNS_COUNT,
D as DEFAULT_PRESET,
I as DEFAULT_TILE_SIZE
};