@progress/kendo-react-conversational-ui/components/AttachmentGroup.js

React Chat component allows the user to participate in chat sessions with users or chat bots. KendoReact Conversational UI components

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";const c=require("react"),l=require("@progress/kendo-react-common"),a=require("@progress/kendo-svg-icons"),u=require("./Attachment.js"),h=require("./base/SelectableItemsContainer.js"),i=require("@progress/kendo-react-buttons");function m(s){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const e in s)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(s,e);Object.defineProperty(t,e,r.get?r:{enumerable:!0,get:()=>s[e]})}}return t.default=s,Object.freeze(t)}const o=m(c);class p extends h.SelectableItemsContainer{render(){const t=this.isCardDeckLayout(this.props),e=o.createElement("div",{className:this.getClassNames(),onKeyDown:t?void 0:this.onKeyDown},this.props.group.attachments.map((r,n)=>o.createElement(u,{item:r,template:this.props.itemTemplate,selected:n===this.state.selectedItemIndex,tabbable:this.props.isLastGroup&&n===this.state.selectedItemIndex,isFirstItemInGroup:n===0,isLastItemInGroup:n===this.getLastItemIndex(),onClick:()=>this.onAttachmentClick(n),key:n})));return t?o.createElement("div",{className:"k-card-deck-scrollwrap",onKeyDown:this.onKeyDown},this.getLeftScrollBtn(),e,this.getRightScrollBtn()):e}get isKeyboardNavigationLeftRight(){return this.isCardDeckLayout(this.props)}getLastItemIndex(){return this.props.group.attachments.length-1}getLeftScrollBtn(){let t=null;return this.isCardDeckLayout(this.props)&&this.state.selectedItemIndex&&(t=o.createElement(i.Button,{icon:"chevron-left",onClick:()=>this.onNavigateBtnClick(!1),svgIcon:a.chevronLeftIcon})),t}getRightScrollBtn(){let t=null;return this.isCardDeckLayout(this.props)&&this.state.selectedItemIndex!==this.getLastItemIndex()&&(t=o.createElement(i.Button,{icon:"chevron-right",onClick:()=>this.onNavigateBtnClick(!0),svgIcon:a.chevronRightIcon})),t}onAttachmentClick(t){this.onRequestContainerSelection(),this.setState({selectedItemIndex:t})}onNavigateBtnClick(t){this.onRequestContainerSelection(),this.navigate(t,1)}isCardDeckLayout(t){return t.group.attachmentLayout!=="list"}getClassNames(){return l.classNames({"k-card-list":this.props.group.attachmentLayout,"k-card-deck":this.isCardDeckLayout(this.props)})}}module.exports=p;