UNPKG

@progress/kendo-react-listbox

Version:

React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package

www.telerik.com/kendo-react-ui

telerik/kendo-react

16 lines (15 loc) • 11 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ /** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-buttons"),require("@progress/kendo-react-intl"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-buttons","@progress/kendo-react-intl","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactButtons,e.KendoReactIntl,e.KendoSvgIcons)}(this,(function(e,t,a,o,n,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var i=l(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const d=i.forwardRef(((e,t)=>{const{id:a,style:n,data:r,textField:s,className:l,valueField:d,selectedField:u,onDrop:f,onKeyDown:p,onDragStart:v,onDragLeave:b,onDragOver:g,onItemClick:x,onItemSelect:h,onKeyboardNavigate:D,size:k=m.size,draggable:y=m.draggable,toolbarPosition:I=m.toolbarPosition}=e,E=i.useRef(null),w=i.useRef(null),T=i.useRef(null),N=i.useCallback((()=>({element:T.current,props:e})),[]);i.useImperativeHandle(w,N),i.useImperativeHandle(t,(()=>w.current));const B=a+"-accessibility-id",O=o.kendoThemeMaps.sizeMap[k]||k,K=i.useMemo((()=>new o.Navigation({root:E,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,a)=>{const n=t.elements.indexOf(e);a.metaKey&&o.dispatchEvent(h,a,N(),{dataItem:r[n]}),o.dispatchEvent(h,a,N(),{dataItem:r[n]})},ArrowDown:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(D,a,N(),{actionName:"moveDown"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusNext(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),s=r[n+1];s&&(o.dispatchEvent(h,a,N(),{dataItem:s}),t.focusNext(e))}},ArrowUp:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(D,a,N(),{actionName:"moveUp"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusPrevious(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),s=r[n-1];s&&(o.dispatchEvent(h,a,N(),{dataItem:s}),t.focusPrevious(e))}},ArrowLeft:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(D,a,N(),{actionName:"transferAllFrom"}):a.metaKey&&o.dispatchEvent(D,a,N(),{actionName:"transferFrom"})},ArrowRight:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(D,a,N(),{actionName:"transferAllTo"}):a.metaKey&&o.dispatchEvent(D,a,N(),{actionName:"transferTo"})},Backspace:(e,t,a)=>{o.dispatchEvent(D,a,N(),{actionName:"remove"})}}}})),[r]),A=i.useCallback(K.triggerKeyboardEvent.bind(K),[r]);return i.useEffect((()=>(K.initializeRovingTab(),()=>K.removeFocusListener())),[r]),i.createElement("div",{id:a,ref:T,style:n,unselectable:"on",className:o.classNames(l,"k-listbox",{[`k-listbox-${O}`]:k},I===c.NONE||void 0===e.toolbar?`k-listbox-actions-${m.toolbarPosition}`:`k-listbox-actions-${I}`)},e.toolbar&&i.createElement(e.toolbar,null),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:E,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?o.dispatchEvent(e.onDrop,t,N(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,N(),{dataItem:null}))},onDragLeave:e=>{b&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(b,e,N(),void 0)},onKeyDown:A},i.createElement("div",{className:o.classNames("k-list",{[`k-list-${O}`]:k})},i.createElement("div",{className:"k-list-content"},i.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{p&&o.dispatchEvent(p,e,N(),void 0)}},r.map(((t,a)=>{const n=(e=>{if(u)return!!e[u]})(t),r={className:o.classNames("k-list-item",{"k-selected":n}),role:"option",key:a,id:B+a,"aria-selected":n,"data-uid":B+a,draggable:y,onDragStart:e=>{o.dispatchEvent(v,e,N(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(g,e,N(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(f,e,N(),{dataItem:t})},onClick:e=>{o.dispatchEvent(x,e,N(),{dataItem:t})}};return e.item?i.createElement(e.item,{selected:n,dataItem:t,...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},t.name)):i.createElement("li",{...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},(e=>s?e[s]:e.toString())(t)))})))))),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},r.map(((e,t)=>{const a=e[d||s];return i.createElement("option",{key:t,value:a},a)}))))})),m={toolbarPosition:c.RIGHT,draggable:!0,size:"medium"};d.propTypes={size:a.oneOf([null,"small","medium","large"]),toolbarPosition:a.oneOf(["none","top","bottom","left","right"]),textField:a.string.isRequired,valueField:a.string,selectedField:a.string,data:a.array.isRequired},d.displayName="ListBoxInner";const u={"listbox.moveUp":"Move Up","listbox.moveDown":"Move Down","listbox.transferTo":"Transfer To","listbox.transferFrom":"Transfer From","listbox.transferAllTo":"Transfer All To","listbox.transferAllFrom":"Transfer All From","listbox.remove":"Delete"},f=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:s.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:s.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:s.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:s.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:s.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:s.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],p=i.forwardRef(((e,t)=>{const{tools:a,dir:l,onToolClick:c,size:d=v.size,data:m=v.data,dataConnected:p=v.dataConnected,selectedField:b=v.selectedField}=e,g=r.useLocalization(),x=i.useRef(null),h=i.useRef(null),D=i.useCallback((()=>({onToolClick:c,props:e,context:{},state:{},refs:{}})),[]);i.useImperativeHandle(h,D),i.useImperativeHandle(t,(()=>h.current));const k=(e,t,a)=>{a.preventDefault(),t.focusNext(e)},y=(e,t,a)=>{a.preventDefault(),t.focusPrevious(e)},I=i.useMemo((()=>new o.Navigation({root:x,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:k,ArrowRight:k,ArrowUp:y,ArrowLeft:y,Enter:(e,t,a)=>{e.click(),t.focusElement(t.current,e)}}}})),[]),E=i.useCallback(I.triggerKeyboardEvent.bind(I),[]);i.useEffect((()=>(I.initializeRovingTab(),()=>I.removeFocusListener())),[]);const w=e=>{switch(e.name){case"caret-alt-right":return s.caretAltLeftIcon;case"caret-alt-left":return s.caretAltRightIcon;case"caret-double-alt-right":return s.caretDoubleAltLeftIcon;case"caret-double-alt-left":return s.caretDoubleAltRightIcon}return e},T=e=>{switch(e){case"caret-alt-right":return"caret-alt-left";case"caret-alt-left":return"caret-alt-right";case"caret-double-alt-right":return"caret-double-alt-left";case"caret-double-alt-left":return"caret-double-alt-right"}return e},N="rtl"===l;return i.createElement("div",{className:o.classNames("k-listbox-actions"),ref:x,onKeyDown:E},a&&a.map(((e,t)=>{const a=f.findIndex((t=>t.name===e)),r=f[a],s=(e=>{let t=!0;const a=b||"selected",o=m.length,n=p.length,r=m.findIndex((e=>!0===e[a]))>=0,s=p.findIndex((e=>!0===e[a]))>=0;switch(e){case"moveUp":t=r?!(m.length>0)||m[0].selected:!s||!(p.length>0)||p[0].selected;break;case"moveDown":t=r?!m[o-1]||m[o-1].selected:!s||!(p.length>0)||p[n-1].selected;break;case"transferTo":t=!(p&&r);break;case"transferFrom":t=!p||!(p&&s);break;case"transferAllTo":t=!(p&&m.length>0);break;case"transferAllFrom":t=!(p&&p.length>0);break;case"remove":t=!(r||s)}return t})(r.name),l=`listbox.${r.name}`,v=g.toLanguageString(l,u[l]);return i.createElement(n.Button,{size:d,key:t,disabled:s,"data-command":r.name,title:v,"aria-label":v,icon:N?T(r.iconName):r.iconName,svgIcon:N?w(r.svgIcon):r.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(c,e,D(),{toolName:t})})(e,r.name)}})})))})),v={data:[],dataConnected:[],selectedField:"selected",size:"medium"};p.propTypes={data:a.array.isRequired,dataConnected:a.array.isRequired,tools:a.array,selectedField:a.string,dir:a.string,size:a.oneOf([null,"small","medium","large"])},p.displayName="ListBoxToolbarInner";const b=(e,t,a)=>{const o=a.splice(e,1)[0];return a.splice(t,0,o),a},g=o.withIdHOC(d);g.displayName="KendoReactListBox",e.ListBox=g,e.ListBoxToolbar=p,e.moveItem=b,e.processListBoxData=(e=[],t=[],a,o)=>{let n=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(a){case"moveUp":n=[...e],n.forEach(((e,t)=>{e[o]&&(n=b(t,t-1,n))})),s=[...t],s.forEach(((e,t)=>{e[o]&&(s=b(t,t-1,s))})),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach(((e,t)=>{e[o]&&(n=b(t,t-1,n))})),s=t.reverse(),s.forEach(((e,t)=>{e[o]&&(s=b(t,t-1,s))})),l.listBoxOneData=[...n].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":n=e.filter((e=>!e[o])),r=e.filter((e=>e[o])),s=t.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter((e=>!e[o])),r=t.filter((e=>e[o])),n=e.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":s=t.filter((e=>!e[o])),n=e.filter((e=>!e[o])),l.listBoxOneData=n,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],a,o,n)=>{const r=e.findIndex((e=>e[n]===a[n])),s=t.findIndex((e=>e[n]===a[n])),l=null!==o?e.findIndex((e=>e[n]===o[n])):-1,i=null!==o?t.findIndex((e=>e[n]===o[n])):-1,c=r>=0,d=s>=0,m=l>=0,u=i>=0,f=[...e],p=[...t];return c&&m?{listBoxOneData:b(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:b(s,i,t)}:c&&(u||null===o)?(null===o?p.push(e[r]):p.splice(i+1,0,e[r]),f.splice(r,1),{listBoxOneData:f,listBoxTwoData:p}):d&&(m||null===o)?(null===o?f.push(t[s]):f.splice(l+1,0,t[s]),p.splice(s,1),{listBoxOneData:f,listBoxTwoData:p}):{listBoxOneData:e,listBoxTwoData:t}}}));