@progress/kendo-react-chart-wizard
Version:
React Chart Wizard lets you create a chart using data from a Grid, another data-bound component, or an external source
190 lines (189 loc) • 6.48 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 t from "react";
import { ExpansionPanel as K, ExpansionPanelContent as A } from "@progress/kendo-react-layout";
import { FormElement as B } from "@progress/kendo-react-form";
import { Label as D } from "@progress/kendo-react-labels";
import { FormField as s } from "../FormField.mjs";
import { ComboBox as P, DropDownList as V } from "@progress/kendo-react-dropdowns";
import { Switch as _, ColorPicker as M } from "@progress/kendo-react-inputs";
import { useLocalization as W } from "@progress/kendo-react-intl";
import { formatLegendPositionTop as j, messages as l, formatLegendPositionBottom as q, formatLegendPositionLeft as G, formatLegendPositionRight as H, formatLegend as J, formatLegendShowLegend as O, formatLegendFont as Q, formatLegendFontPlaceholder as U, formatLegendSize as X, formatLegendSizePlaceholder as Y, formatLegendColor as Z, formatLegendPosition as $ } from "../../messages.mjs";
import { stopPropagation as ee, fontNames as E, parseFont as F, nullItem as L, itemRender as te, dropdownlistCommonProps as f, fontSizes as z, updateState as r, ActionTypes as m, ensureValue as ne } from "../../utils.mjs";
import { Reveal as oe } from "@progress/kendo-react-animation";
const ue = (i) => {
var S, h, v, b, p, C, x;
const a = W(), o = i.state, [c, w] = t.useState(!1), I = t.useCallback((e) => {
w(!e.expanded);
}, []), u = [
{
value: "top",
text: a.toLanguageString(j, l.formatLegendPositionTop)
},
{
value: "bottom",
text: a.toLanguageString(q, l.formatLegendPositionBottom)
},
{
value: "left",
text: a.toLanguageString(G, l.formatLegendPositionLeft)
},
{
value: "right",
text: a.toLanguageString(H, l.formatLegendPositionRight)
}
], k = (e) => {
i.onStateChange(r(o, m.legendVisible, e.value));
}, y = (e) => {
const n = e.target.value || L;
ne(n) && i.onStateChange(r(o, m.legendFontSize, n.value));
}, N = (e) => {
const n = e.target.value || L;
i.onStateChange(r(o, m.legendFontName, n.value));
}, T = (e) => {
i.onStateChange(r(o, m.legendColor, e.value));
}, R = (e) => {
const n = e.target.value;
i.onStateChange(r(o, m.legendPosition, n.value));
};
return /* @__PURE__ */ t.createElement(
K,
{
style: { maxWidth: "576px" },
title: a.toLanguageString(J, l.formatLegend),
expanded: c,
tabIndex: 0,
onAction: I
},
/* @__PURE__ */ t.createElement(oe, null, c && /* @__PURE__ */ t.createElement(A, null, /* @__PURE__ */ t.createElement(B, { onKeyDown: ee }, /* @__PURE__ */ t.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ t.createElement(D, { editorId: "show-legend" }, a.toLanguageString(
O,
l.formatLegendShowLegend
)), /* @__PURE__ */ t.createElement(
_,
{
id: "show-legend",
checked: (S = o.legend) == null ? void 0 : S.visible,
onChange: k
}
), /* @__PURE__ */ t.createElement(
s,
{
className: "k-col-span-2",
editorId: "legendLabelsFont",
labelText: a.toLanguageString(
Q,
l.formatLegendFont
)
},
/* @__PURE__ */ t.createElement(
P,
{
id: "legendLabelsFont",
data: E,
textField: "text",
dataItemKey: "value",
placeholder: a.toLanguageString(
U,
l.formatLegendFontPlaceholder
),
value: E.find(
(e) => {
var n, d, g;
return e.value === ((g = F(((d = (n = o.legend) == null ? void 0 : n.labels) == null ? void 0 : d.font) || "")) == null ? void 0 : g.name);
}
) || L,
onChange: N,
itemRender: te,
disabled: ((h = o.legend) == null ? void 0 : h.visible) === !1,
...f
}
)
), /* @__PURE__ */ t.createElement(
s,
{
editorId: "legendLabelsSize",
labelText: a.toLanguageString(
X,
l.formatLegendSize
)
},
/* @__PURE__ */ t.createElement(
P,
{
id: "legendLabelsSize",
data: z,
textField: "text",
dataItemKey: "value",
placeholder: a.toLanguageString(
Y,
l.formatLegendSizePlaceholder
),
value: z.find(
(e) => {
var n, d, g;
return e.value === ((g = F(((d = (n = o.legend) == null ? void 0 : n.labels) == null ? void 0 : d.font) || "")) == null ? void 0 : g.size);
}
) || L,
onChange: y,
disabled: ((v = o.legend) == null ? void 0 : v.visible) === !1,
allowCustom: !0,
...f
}
)
), /* @__PURE__ */ t.createElement(
s,
{
editorId: "legendLabelsColor",
labelText: a.toLanguageString(
Z,
l.formatLegendColor
)
},
/* @__PURE__ */ t.createElement(
M,
{
id: "legendLabelsColor",
value: ((p = (b = o.legend) == null ? void 0 : b.labels) == null ? void 0 : p.color) || "",
onChange: T,
disabled: ((C = o.legend) == null ? void 0 : C.visible) === !1,
view: "gradient",
fillMode: "outline"
}
)
), /* @__PURE__ */ t.createElement(
s,
{
className: "k-col-span-2",
editorId: "legendPosition",
labelText: a.toLanguageString(
$,
l.formatLegendPosition
)
},
/* @__PURE__ */ t.createElement(
V,
{
id: "legendPosition",
data: u,
textField: "text",
dataItemKey: "value",
value: u.find((e) => {
var n;
return e.value === ((n = o.legend) == null ? void 0 : n.position);
}),
onChange: R,
disabled: ((x = o.legend) == null ? void 0 : x.visible) === !1,
...f
}
)
)))))
);
};
export {
ue as LegendPanel
};