@progress/kendo-react-conversational-ui
Version:
React Chat component allows the user to participate in chat sessions with users or chat bots. KendoReact Conversational UI components
67 lines (66 loc) • 2.83 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 l from "react";
import { Keys as m, classNames as B } from "@progress/kendo-react-common";
import { chevronLeftIcon as D, chevronRightIcon as K } from "@progress/kendo-svg-icons";
import N from "./Attachment.mjs";
import { Button as b } from "@progress/kendo-react-buttons";
const P = (y) => {
const { group: t, itemTemplate: v, selected: f, isLastGroup: L, onRequestSelection: k } = y, [n, r] = l.useState(null);
l.useEffect(() => {
!f && n !== null ? r(null) : f && n === null && r(0);
}, [f, n]);
const c = l.useCallback((e) => e.attachmentLayout !== "list", []), C = l.useCallback(() => t.attachments ? t.attachments.length - 1 : -1, [t.attachments]), h = l.useCallback(() => t.attachments.length - 1, [t.attachments]), o = l.useCallback(
(e, s = 0) => {
let a = null;
return e ? n === null ? a = s : n < C() && (a = n + 1) : n === null ? a = 0 : n > 0 && (a = n - 1), a !== null && r(a), a;
},
[n, C]
), u = l.useCallback(() => {
k(t.selectionIndex);
}, [k, t.selectionIndex]), g = l.useCallback(
(e) => {
let s = null, a, d;
c(t) ? (a = m.left, d = m.right) : (a = m.up, d = m.down), e.keyCode === a ? s = o(!1) : e.keyCode === d && (s = o(!0)), s !== null && (e.preventDefault(), e.stopPropagation());
},
[o, c, t]
), S = l.useCallback(
(e) => {
u(), r(e);
},
[u]
), i = l.useCallback(
(e) => {
u(), o(e, 1);
},
[u, o]
), w = l.useCallback(() => {
let e = null;
return c(t) && n && (e = /* @__PURE__ */ l.createElement(b, { icon: "chevron-left", onClick: () => i(!1), svgIcon: D })), e;
}, [c, t, n, i]), x = l.useCallback(() => {
let e = null;
return c(t) && n !== h() && (e = /* @__PURE__ */ l.createElement(b, { icon: "chevron-right", onClick: () => i(!0), svgIcon: K })), e;
}, [c, t, n, h, i]), E = l.useCallback(() => B({
"k-card-list": t.attachmentLayout,
"k-card-deck": c(t)
}), [t.attachmentLayout, t, c]), p = c(t), I = /* @__PURE__ */ l.createElement("div", { className: E(), onKeyDown: p ? void 0 : g }, t.attachments.map((e, s) => /* @__PURE__ */ l.createElement(
N,
{
item: e,
template: v,
selected: s === n,
tabbable: L && s === n,
onClick: () => S(s),
key: e.content
}
)));
return p ? /* @__PURE__ */ l.createElement("div", { className: "k-card-deck-scrollwrap", onKeyDown: g }, w(), I, x()) : I;
};
export {
P as default
};