@progress/kendo-react-listbox 7.0.0-develop.4 → 7.0.0-develop.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-listbox.js +1 -1
- package/index.js +1 -1
- package/index.mjs +65 -65
- package/package.json +4 -4
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
(function(h,b){typeof exports=="object"&&typeof module<"u"?b(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")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-buttons","@progress/kendo-react-intl","@progress/kendo-svg-icons"],b):(h=typeof globalThis<"u"?globalThis:h||self,b(h.KendoReactListbox={},h.React,h.PropTypes,h.KendoReactCommon,h.KendoReactButtons,h.KendoReactIntl,h.KendoSvgIcons))})(this,function(h,b,w,d,F,L,u){"use strict";function N(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const p=N(b),f=N(w);var T=(a=>(a.TOP="top",a.BOTTOM="bottom",a.LEFT="left",a.RIGHT="right",a.NONE="none",a))(T||{});const O={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};class E extends p.PureComponent{constructor(e){super(e),this.setSelected=t=>{if(this.props.selectedField)return!!t[this.props.selectedField]},this.renderItem=t=>this.props.textField?t[this.props.textField]:t.toString(),this.handleKeyDown=t=>{this.props.onKeyDown&&d.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-
|
|
5
|
+
(function(h,b){typeof exports=="object"&&typeof module<"u"?b(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")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-buttons","@progress/kendo-react-intl","@progress/kendo-svg-icons"],b):(h=typeof globalThis<"u"?globalThis:h||self,b(h.KendoReactListbox={},h.React,h.PropTypes,h.KendoReactCommon,h.KendoReactButtons,h.KendoReactIntl,h.KendoSvgIcons))})(this,function(h,b,w,d,F,L,u){"use strict";function N(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const p=N(b),f=N(w);var T=(a=>(a.TOP="top",a.BOTTOM="bottom",a.LEFT="left",a.RIGHT="right",a.NONE="none",a))(T||{});const O={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};class E extends p.PureComponent{constructor(e){super(e),this.setSelected=t=>{if(this.props.selectedField)return!!t[this.props.selectedField]},this.renderItem=t=>this.props.textField?t[this.props.textField]:t.toString(),this.handleKeyDown=t=>{this.props.onKeyDown&&d.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-content")&&(this.props.data.length>0?d.dispatchEvent(this.props.onDrop,t,this,{dataItem:this.props.data[this.props.data.length-1]}):d.dispatchEvent(this.props.onDrop,t,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===T.NONE||this.props.toolbar===void 0?"":`k-listbox-actions-${this.props.toolbarPosition}`,this.handleOnDragLeave=t=>{this.props.onDragLeave&&t.target.classList.contains("k-list-content")&&d.dispatchEvent(this.props.onDragLeave,t,this,void 0)},d.validatePackage(O)}render(){return p.createElement("div",{className:d.classNames(this.props.className,"k-listbox",this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&this.props.toolbarPosition!=="bottom"&&p.createElement(this.props.toolbar,null),p.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},p.createElement("div",{className:d.classNames("k-list",{[`k-list-${d.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},p.createElement("div",{className:"k-list-content"},p.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabIndex:0,onKeyDown:this.handleKeyDown},this.props.data.map((e,t)=>{const r=this.setSelected(e),o=d.guid(),c={className:d.classNames("k-list-item",{"k-selected":r}),role:"option","aria-selected":r,key:t,id:o+t,"data-uid":o+t,draggable:this.props.draggable,onDragStart:s=>d.dispatchEvent(this.props.onDragStart,s,this,{dataItem:e}),onDragOver:s=>{s.preventDefault(),d.dispatchEvent(this.props.onDragOver,s,this,{dataItem:e})},onDrop:s=>d.dispatchEvent(this.props.onDrop,s,this,{dataItem:e}),onClick:s=>d.dispatchEvent(this.props.onItemClick,s,this,{dataItem:e})};return this.props.item?p.createElement(this.props.item,{selected:r,dataItem:e,...c},p.createElement("span",{className:"k-list-item-text"},e.name)):p.createElement("li",{...c},p.createElement("span",{className:"k-list-item-text"},this.renderItem(e)))}))))),this.props.toolbar&&this.props.toolbarPosition==="bottom"&&p.createElement(this.props.toolbar,null),p.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},this.props.data.map((e,t)=>{const r=e[this.props.valueField||this.props.textField];return p.createElement("option",{key:t,value:r},r)})))}}E.propTypes={size:f.oneOf([null,"small","medium","large"]),toolbarPosition:f.oneOf(["none","top","bottom","left","right"]),textField:f.string,valueField:f.string,selectedField:f.string,data:f.array},E.defaultProps={toolbarPosition:T.RIGHT,draggable:!0,size:"medium"};const C="listbox.moveUp",P="listbox.moveDown",K="listbox.transferTo",S="listbox.transferFrom",z="listbox.transferAllTo",U="listbox.transferAllFrom",M="listbox.remove",j={[C]:"Move Up",[P]:"Move Down",[K]:"Transfer To",[S]:"Transfer From",[z]:"Transfer All To",[U]:"Transfer All From",[M]:"Delete"},k=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:u.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:u.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:u.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:u.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:u.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:u.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:u.xIcon}];class D extends p.PureComponent{constructor(){super(...arguments),this.checkSvgIcon=e=>{switch(e.name){case"caret-alt-right":return u.caretAltLeftIcon;case"caret-alt-left":return u.caretAltRightIcon;case"caret-double-alt-right":return u.caretDoubleAltLeftIcon;case"caret-double-alt-left":return u.caretDoubleAltRightIcon}return e},this.checkFontIcon=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},this.handleToolClick=(e,t)=>{d.dispatchEvent(this.props.onToolClick,e,this,{toolName:t})},this.isItemDisabled=e=>{let t=!0;const r=this.props.selectedField||"selected",o=this.props.data.length,c=this.props.dataConnected.length,s=this.props.data.findIndex(n=>n[r]===!0)>=0,i=this.props.dataConnected.findIndex(n=>n[r]===!0)>=0;switch(e){case"moveUp":s?t=this.props.data.length>0?this.props.data[0].selected:!0:i?t=this.props.dataConnected.length>0?this.props.dataConnected[0].selected:!0:t=!0;break;case"moveDown":s?t=this.props.data[o-1]?this.props.data[o-1].selected:!0:i?t=this.props.dataConnected.length>0?this.props.dataConnected[c-1].selected:!0:t=!0;break;case"transferTo":t=!(this.props.dataConnected&&s);break;case"transferFrom":this.props.dataConnected?t=!(this.props.dataConnected&&i):t=!0;break;case"transferAllTo":t=!(this.props.dataConnected&&this.props.data.length>0);break;case"transferAllFrom":t=!(this.props.dataConnected&&this.props.dataConnected.length>0);break;case"remove":t=!(s||i);break}return t}}get isRtl(){return this.props.dir==="rtl"}render(){const e=L.provideLocalizationService(this);return p.createElement("div",{className:d.classNames("k-listbox-actions")},this.props.tools&&this.props.tools.map((t,r)=>{const o=k.findIndex(l=>l.name===t),c=k[o],s=this.isItemDisabled(c.name),i=`listbox.${c.name}`,n=e.toLanguageString(i,j[i]);return p.createElement(F.Button,{key:r,disabled:s,"data-command":c.name,title:n,"aria-label":n,icon:this.isRtl?this.checkFontIcon(c.iconName):c.iconName,svgIcon:this.isRtl?this.checkSvgIcon(c.svgIcon):c.svgIcon,onClick:l=>{l.preventDefault(),this.handleToolClick(l,c.name||null)}})}))}}D.propTypes={data:f.array,dataConnected:f.array,tools:f.array,selectedField:f.string,dir:f.string},D.defaultProps={data:[],dataConnected:[],selectedField:"selected"},L.registerForLocalization(D);const q=(a=[],e=[],t,r)=>{let o=[],c=[],s=[];const i={listBoxOneData:a,listBoxTwoData:e};switch(t){case"moveUp":o=[...a],o.forEach((n,l)=>{n[r]&&(o=m(l,l-1,o))}),s=[...e],s.forEach((n,l)=>{n[r]&&(s=m(l,l-1,s))}),i.listBoxOneData=o,i.listBoxTwoData=s;break;case"moveDown":o=a.reverse(),o.forEach((n,l)=>{n[r]&&(o=m(l,l-1,o))}),s=e.reverse(),s.forEach((n,l)=>{n[r]&&(s=m(l,l-1,s))}),i.listBoxOneData=[...o].reverse(),i.listBoxTwoData=[...s].reverse();break;case"transferTo":o=a.filter(n=>!n[r]),c=a.filter(n=>n[r]),s=e.concat(c),i.listBoxOneData=o,i.listBoxTwoData=s;break;case"transferFrom":s=e.filter(n=>!n[r]),c=e.filter(n=>n[r]),o=a.concat(c),i.listBoxOneData=o,i.listBoxTwoData=s;break;case"transferAllTo":i.listBoxOneData=[],i.listBoxTwoData=e.concat(a);break;case"transferAllFrom":i.listBoxOneData=e.concat(a),i.listBoxTwoData=[];break;case"remove":s=e.filter(n=>!n[r]),o=a.filter(n=>!n[r]),i.listBoxOneData=o,i.listBoxTwoData=s;break}return i},m=(a,e,t)=>{const r=t.splice(a,1)[0];return t.splice(e,0,r),t},_=(a=[],e=[],t,r,o)=>{const c=a.findIndex(g=>g[o]===t[o]),s=e.findIndex(g=>g[o]===t[o]),i=r!==null?a.findIndex(g=>g[o]===r[o]):-1,n=r!==null?e.findIndex(g=>g[o]===r[o]):-1,l=c>=0,y=s>=0,x=i>=0,A=n>=0,v=[...a],I=[...e];return l&&x?{listBoxOneData:m(c,i,a),listBoxTwoData:e}:y&&A?{listBoxOneData:a,listBoxTwoData:m(s,n,e)}:l&&(A||r===null)?(r===null?I.push(a[c]):I.splice(n+1,0,a[c]),v.splice(c,1),{listBoxOneData:v,listBoxTwoData:I}):y&&(x||r===null)?(r===null?v.push(e[s]):v.splice(i+1,0,e[s]),I.splice(s,1),{listBoxOneData:v,listBoxTwoData:I}):{listBoxOneData:a,listBoxTwoData:e}};h.ListBox=E,h.ListBoxToolbar=D,h.moveItem=m,h.processListBoxData=q,h.processListBoxDragAndDrop=_,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|
package/index.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react"),y=require("prop-types"),d=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-buttons"),N=require("@progress/kendo-react-intl"),h=require("@progress/kendo-svg-icons");function C(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const p=C(x),m=C(y);var I=(o=>(o.TOP="top",o.BOTTOM="bottom",o.LEFT="left",o.RIGHT="right",o.NONE="none",o))(I||{});const S={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};class k extends p.PureComponent{constructor(e){super(e),this.setSelected=t=>{if(this.props.selectedField)return!!t[this.props.selectedField]},this.renderItem=t=>this.props.textField?t[this.props.textField]:t.toString(),this.handleKeyDown=t=>{this.props.onKeyDown&&d.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-
|
|
5
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react"),y=require("prop-types"),d=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-buttons"),N=require("@progress/kendo-react-intl"),h=require("@progress/kendo-svg-icons");function C(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const p=C(x),m=C(y);var I=(o=>(o.TOP="top",o.BOTTOM="bottom",o.LEFT="left",o.RIGHT="right",o.NONE="none",o))(I||{});const S={name:"@progress/kendo-react-listbox",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:1607357111,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};class k extends p.PureComponent{constructor(e){super(e),this.setSelected=t=>{if(this.props.selectedField)return!!t[this.props.selectedField]},this.renderItem=t=>this.props.textField?t[this.props.textField]:t.toString(),this.handleKeyDown=t=>{this.props.onKeyDown&&d.dispatchEvent(this.props.onKeyDown,t,this,void 0)},this.handleContainerDrop=t=>{t.target.classList.contains("k-list-content")&&(this.props.data.length>0?d.dispatchEvent(this.props.onDrop,t,this,{dataItem:this.props.data[this.props.data.length-1]}):d.dispatchEvent(this.props.onDrop,t,this,{dataItem:null}))},this.setToolbarPosition=()=>this.props.toolbarPosition===I.NONE||this.props.toolbar===void 0?"":`k-listbox-actions-${this.props.toolbarPosition}`,this.handleOnDragLeave=t=>{this.props.onDragLeave&&t.target.classList.contains("k-list-content")&&d.dispatchEvent(this.props.onDragLeave,t,this,void 0)},d.validatePackage(S)}render(){return p.createElement("div",{className:d.classNames(this.props.className,"k-listbox",this.setToolbarPosition()),style:this.props.style,unselectable:"on"},this.props.toolbar&&this.props.toolbarPosition!=="bottom"&&p.createElement(this.props.toolbar,null),p.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",onDragOver:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragLeave:this.handleOnDragLeave},p.createElement("div",{className:d.classNames("k-list",{[`k-list-${d.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},p.createElement("div",{className:"k-list-content"},p.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabIndex:0,onKeyDown:this.handleKeyDown},this.props.data.map((e,t)=>{const r=this.setSelected(e),a=d.guid(),c={className:d.classNames("k-list-item",{"k-selected":r}),role:"option","aria-selected":r,key:t,id:a+t,"data-uid":a+t,draggable:this.props.draggable,onDragStart:s=>d.dispatchEvent(this.props.onDragStart,s,this,{dataItem:e}),onDragOver:s=>{s.preventDefault(),d.dispatchEvent(this.props.onDragOver,s,this,{dataItem:e})},onDrop:s=>d.dispatchEvent(this.props.onDrop,s,this,{dataItem:e}),onClick:s=>d.dispatchEvent(this.props.onItemClick,s,this,{dataItem:e})};return this.props.item?p.createElement(this.props.item,{selected:r,dataItem:e,...c},p.createElement("span",{className:"k-list-item-text"},e.name)):p.createElement("li",{...c},p.createElement("span",{className:"k-list-item-text"},this.renderItem(e)))}))))),this.props.toolbar&&this.props.toolbarPosition==="bottom"&&p.createElement(this.props.toolbar,null),p.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},this.props.data.map((e,t)=>{const r=e[this.props.valueField||this.props.textField];return p.createElement("option",{key:t,value:r},r)})))}}k.propTypes={size:m.oneOf([null,"small","medium","large"]),toolbarPosition:m.oneOf(["none","top","bottom","left","right"]),textField:m.string,valueField:m.string,selectedField:m.string,data:m.array};k.defaultProps={toolbarPosition:I.RIGHT,draggable:!0,size:"medium"};const w="listbox.moveUp",F="listbox.moveDown",O="listbox.transferTo",P="listbox.transferFrom",R="listbox.transferAllTo",z="listbox.transferAllFrom",U="listbox.remove",K={[w]:"Move Up",[F]:"Move Down",[O]:"Transfer To",[P]:"Transfer From",[R]:"Transfer All To",[z]:"Transfer All From",[U]:"Delete"},L=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:h.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:h.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:h.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:h.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:h.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:h.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:h.xIcon}];class v extends p.PureComponent{constructor(){super(...arguments),this.checkSvgIcon=e=>{switch(e.name){case"caret-alt-right":return h.caretAltLeftIcon;case"caret-alt-left":return h.caretAltRightIcon;case"caret-double-alt-right":return h.caretDoubleAltLeftIcon;case"caret-double-alt-left":return h.caretDoubleAltRightIcon}return e},this.checkFontIcon=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},this.handleToolClick=(e,t)=>{d.dispatchEvent(this.props.onToolClick,e,this,{toolName:t})},this.isItemDisabled=e=>{let t=!0;const r=this.props.selectedField||"selected",a=this.props.data.length,c=this.props.dataConnected.length,s=this.props.data.findIndex(n=>n[r]===!0)>=0,i=this.props.dataConnected.findIndex(n=>n[r]===!0)>=0;switch(e){case"moveUp":s?t=this.props.data.length>0?this.props.data[0].selected:!0:i?t=this.props.dataConnected.length>0?this.props.dataConnected[0].selected:!0:t=!0;break;case"moveDown":s?t=this.props.data[a-1]?this.props.data[a-1].selected:!0:i?t=this.props.dataConnected.length>0?this.props.dataConnected[c-1].selected:!0:t=!0;break;case"transferTo":t=!(this.props.dataConnected&&s);break;case"transferFrom":this.props.dataConnected?t=!(this.props.dataConnected&&i):t=!0;break;case"transferAllTo":t=!(this.props.dataConnected&&this.props.data.length>0);break;case"transferAllFrom":t=!(this.props.dataConnected&&this.props.dataConnected.length>0);break;case"remove":t=!(s||i);break}return t}}get isRtl(){return this.props.dir==="rtl"}render(){const e=N.provideLocalizationService(this);return p.createElement("div",{className:d.classNames("k-listbox-actions")},this.props.tools&&this.props.tools.map((t,r)=>{const a=L.findIndex(l=>l.name===t),c=L[a],s=this.isItemDisabled(c.name),i=`listbox.${c.name}`,n=e.toLanguageString(i,K[i]);return p.createElement(A.Button,{key:r,disabled:s,"data-command":c.name,title:n,"aria-label":n,icon:this.isRtl?this.checkFontIcon(c.iconName):c.iconName,svgIcon:this.isRtl?this.checkSvgIcon(c.svgIcon):c.svgIcon,onClick:l=>{l.preventDefault(),this.handleToolClick(l,c.name||null)}})}))}}v.propTypes={data:m.array,dataConnected:m.array,tools:m.array,selectedField:m.string,dir:m.string};v.defaultProps={data:[],dataConnected:[],selectedField:"selected"};N.registerForLocalization(v);const M=(o=[],e=[],t,r)=>{let a=[],c=[],s=[];const i={listBoxOneData:o,listBoxTwoData:e};switch(t){case"moveUp":a=[...o],a.forEach((n,l)=>{n[r]&&(a=f(l,l-1,a))}),s=[...e],s.forEach((n,l)=>{n[r]&&(s=f(l,l-1,s))}),i.listBoxOneData=a,i.listBoxTwoData=s;break;case"moveDown":a=o.reverse(),a.forEach((n,l)=>{n[r]&&(a=f(l,l-1,a))}),s=e.reverse(),s.forEach((n,l)=>{n[r]&&(s=f(l,l-1,s))}),i.listBoxOneData=[...a].reverse(),i.listBoxTwoData=[...s].reverse();break;case"transferTo":a=o.filter(n=>!n[r]),c=o.filter(n=>n[r]),s=e.concat(c),i.listBoxOneData=a,i.listBoxTwoData=s;break;case"transferFrom":s=e.filter(n=>!n[r]),c=e.filter(n=>n[r]),a=o.concat(c),i.listBoxOneData=a,i.listBoxTwoData=s;break;case"transferAllTo":i.listBoxOneData=[],i.listBoxTwoData=e.concat(o);break;case"transferAllFrom":i.listBoxOneData=e.concat(o),i.listBoxTwoData=[];break;case"remove":s=e.filter(n=>!n[r]),a=o.filter(n=>!n[r]),i.listBoxOneData=a,i.listBoxTwoData=s;break}return i},f=(o,e,t)=>{const r=t.splice(o,1)[0];return t.splice(e,0,r),t},q=(o=[],e=[],t,r,a)=>{const c=o.findIndex(u=>u[a]===t[a]),s=e.findIndex(u=>u[a]===t[a]),i=r!==null?o.findIndex(u=>u[a]===r[a]):-1,n=r!==null?e.findIndex(u=>u[a]===r[a]):-1,l=c>=0,D=s>=0,T=i>=0,E=n>=0,g=[...o],b=[...e];return l&&T?{listBoxOneData:f(c,i,o),listBoxTwoData:e}:D&&E?{listBoxOneData:o,listBoxTwoData:f(s,n,e)}:l&&(E||r===null)?(r===null?b.push(o[c]):b.splice(n+1,0,o[c]),g.splice(c,1),{listBoxOneData:g,listBoxTwoData:b}):D&&(T||r===null)?(r===null?g.push(e[s]):g.splice(i+1,0,e[s]),b.splice(s,1),{listBoxOneData:g,listBoxTwoData:b}):{listBoxOneData:o,listBoxTwoData:e}};exports.ListBox=k;exports.ListBoxToolbar=v;exports.moveItem=f;exports.processListBoxData=M;exports.processListBoxDragAndDrop=q;
|
package/index.mjs
CHANGED
|
@@ -13,21 +13,21 @@ const K = {
|
|
|
13
13
|
name: "@progress/kendo-react-listbox",
|
|
14
14
|
productName: "KendoReact",
|
|
15
15
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
16
|
-
publishDate:
|
|
16
|
+
publishDate: 1700687168,
|
|
17
17
|
version: "",
|
|
18
18
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
19
19
|
};
|
|
20
20
|
class y extends p.PureComponent {
|
|
21
|
-
constructor(
|
|
22
|
-
super(
|
|
21
|
+
constructor(t) {
|
|
22
|
+
super(t), this.setSelected = (e) => {
|
|
23
23
|
if (this.props.selectedField)
|
|
24
|
-
return !!
|
|
25
|
-
}, this.renderItem = (
|
|
26
|
-
this.props.onKeyDown && h(this.props.onKeyDown,
|
|
27
|
-
}, this.handleContainerDrop = (
|
|
28
|
-
|
|
29
|
-
}, this.setToolbarPosition = () => this.props.toolbarPosition === I.NONE || this.props.toolbar === void 0 ? "" : `k-listbox-actions-${this.props.toolbarPosition}`, this.handleOnDragLeave = (
|
|
30
|
-
this.props.onDragLeave &&
|
|
24
|
+
return !!e[this.props.selectedField];
|
|
25
|
+
}, this.renderItem = (e) => this.props.textField ? e[this.props.textField] : e.toString(), this.handleKeyDown = (e) => {
|
|
26
|
+
this.props.onKeyDown && h(this.props.onKeyDown, e, this, void 0);
|
|
27
|
+
}, this.handleContainerDrop = (e) => {
|
|
28
|
+
e.target.classList.contains("k-list-content") && (this.props.data.length > 0 ? h(this.props.onDrop, e, this, { dataItem: this.props.data[this.props.data.length - 1] }) : h(this.props.onDrop, e, this, { dataItem: null }));
|
|
29
|
+
}, this.setToolbarPosition = () => this.props.toolbarPosition === I.NONE || this.props.toolbar === void 0 ? "" : `k-listbox-actions-${this.props.toolbarPosition}`, this.handleOnDragLeave = (e) => {
|
|
30
|
+
this.props.onDragLeave && e.target.classList.contains("k-list-content") && h(this.props.onDragLeave, e, this, void 0);
|
|
31
31
|
}, A(K);
|
|
32
32
|
}
|
|
33
33
|
/**
|
|
@@ -51,14 +51,14 @@ class y extends p.PureComponent {
|
|
|
51
51
|
{
|
|
52
52
|
className: "k-list-scroller k-selectable",
|
|
53
53
|
"data-role": "selectable",
|
|
54
|
-
onDragOver: (
|
|
54
|
+
onDragOver: (t) => t.preventDefault(),
|
|
55
55
|
onDrop: this.handleContainerDrop,
|
|
56
56
|
onDragLeave: this.handleOnDragLeave
|
|
57
57
|
},
|
|
58
58
|
/* @__PURE__ */ p.createElement("div", { className: b("k-list", {
|
|
59
59
|
[`k-list-${F.sizeMap[this.props.size] || this.props.size}`]: this.props.size
|
|
60
|
-
}) }, /* @__PURE__ */ p.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ p.createElement("ul", { className: "k-list-ul", role: "listbox", "aria-label": "listbox-container", tabIndex: 0, onKeyDown: this.handleKeyDown }, this.props.data.map((
|
|
61
|
-
const r = this.setSelected(
|
|
60
|
+
}) }, /* @__PURE__ */ p.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ p.createElement("ul", { className: "k-list-ul", role: "listbox", "aria-label": "listbox-container", tabIndex: 0, onKeyDown: this.handleKeyDown }, this.props.data.map((t, e) => {
|
|
61
|
+
const r = this.setSelected(t), o = S(), l = {
|
|
62
62
|
className: b(
|
|
63
63
|
"k-list-item",
|
|
64
64
|
{
|
|
@@ -67,24 +67,24 @@ class y extends p.PureComponent {
|
|
|
67
67
|
),
|
|
68
68
|
role: "option",
|
|
69
69
|
"aria-selected": r,
|
|
70
|
-
key:
|
|
71
|
-
id: o +
|
|
72
|
-
"data-uid": o +
|
|
70
|
+
key: e,
|
|
71
|
+
id: o + e,
|
|
72
|
+
"data-uid": o + e,
|
|
73
73
|
draggable: this.props.draggable,
|
|
74
|
-
onDragStart: (s) => h(this.props.onDragStart, s, this, { dataItem:
|
|
74
|
+
onDragStart: (s) => h(this.props.onDragStart, s, this, { dataItem: t }),
|
|
75
75
|
onDragOver: (s) => {
|
|
76
|
-
s.preventDefault(), h(this.props.onDragOver, s, this, { dataItem:
|
|
76
|
+
s.preventDefault(), h(this.props.onDragOver, s, this, { dataItem: t });
|
|
77
77
|
},
|
|
78
|
-
onDrop: (s) => h(this.props.onDrop, s, this, { dataItem:
|
|
79
|
-
onClick: (s) => h(this.props.onItemClick, s, this, { dataItem:
|
|
78
|
+
onDrop: (s) => h(this.props.onDrop, s, this, { dataItem: t }),
|
|
79
|
+
onClick: (s) => h(this.props.onItemClick, s, this, { dataItem: t })
|
|
80
80
|
};
|
|
81
|
-
return this.props.item ? /* @__PURE__ */ p.createElement(this.props.item, { selected: r, dataItem:
|
|
81
|
+
return this.props.item ? /* @__PURE__ */ p.createElement(this.props.item, { selected: r, dataItem: t, ...l }, /* @__PURE__ */ p.createElement("span", { className: "k-list-item-text" }, t.name)) : /* @__PURE__ */ p.createElement("li", { ...l }, /* @__PURE__ */ p.createElement("span", { className: "k-list-item-text" }, this.renderItem(t)));
|
|
82
82
|
}))))
|
|
83
83
|
),
|
|
84
84
|
this.props.toolbar && this.props.toolbarPosition === "bottom" && /* @__PURE__ */ p.createElement(this.props.toolbar, null),
|
|
85
|
-
/* @__PURE__ */ p.createElement("select", { style: { display: "none" }, multiple: !0, "data-role": "listbox" }, this.props.data.map((
|
|
86
|
-
const r =
|
|
87
|
-
return /* @__PURE__ */ p.createElement("option", { key:
|
|
85
|
+
/* @__PURE__ */ p.createElement("select", { style: { display: "none" }, multiple: !0, "data-role": "listbox" }, this.props.data.map((t, e) => {
|
|
86
|
+
const r = t[this.props.valueField || this.props.textField];
|
|
87
|
+
return /* @__PURE__ */ p.createElement("option", { key: e, value: r }, r);
|
|
88
88
|
}))
|
|
89
89
|
);
|
|
90
90
|
}
|
|
@@ -121,8 +121,8 @@ const M = "listbox.moveUp", G = "listbox.moveDown", $ = "listbox.transferTo", H
|
|
|
121
121
|
];
|
|
122
122
|
class v extends p.PureComponent {
|
|
123
123
|
constructor() {
|
|
124
|
-
super(...arguments), this.checkSvgIcon = (
|
|
125
|
-
switch (
|
|
124
|
+
super(...arguments), this.checkSvgIcon = (t) => {
|
|
125
|
+
switch (t.name) {
|
|
126
126
|
case "caret-alt-right":
|
|
127
127
|
return x;
|
|
128
128
|
case "caret-alt-left":
|
|
@@ -132,9 +132,9 @@ class v extends p.PureComponent {
|
|
|
132
132
|
case "caret-double-alt-left":
|
|
133
133
|
return E;
|
|
134
134
|
}
|
|
135
|
-
return
|
|
136
|
-
}, this.checkFontIcon = (
|
|
137
|
-
switch (
|
|
135
|
+
return t;
|
|
136
|
+
}, this.checkFontIcon = (t) => {
|
|
137
|
+
switch (t) {
|
|
138
138
|
case "caret-alt-right":
|
|
139
139
|
return "caret-alt-left";
|
|
140
140
|
case "caret-alt-left":
|
|
@@ -144,36 +144,36 @@ class v extends p.PureComponent {
|
|
|
144
144
|
case "caret-double-alt-left":
|
|
145
145
|
return "caret-double-alt-right";
|
|
146
146
|
}
|
|
147
|
-
return
|
|
148
|
-
}, this.handleToolClick = (
|
|
149
|
-
h(this.props.onToolClick,
|
|
150
|
-
}, this.isItemDisabled = (
|
|
151
|
-
let
|
|
147
|
+
return t;
|
|
148
|
+
}, this.handleToolClick = (t, e) => {
|
|
149
|
+
h(this.props.onToolClick, t, this, { toolName: e });
|
|
150
|
+
}, this.isItemDisabled = (t) => {
|
|
151
|
+
let e = !0;
|
|
152
152
|
const r = this.props.selectedField || "selected", o = this.props.data.length, l = this.props.dataConnected.length, s = this.props.data.findIndex((a) => a[r] === !0) >= 0, i = this.props.dataConnected.findIndex((a) => a[r] === !0) >= 0;
|
|
153
|
-
switch (
|
|
153
|
+
switch (t) {
|
|
154
154
|
case "moveUp":
|
|
155
|
-
s ?
|
|
155
|
+
s ? e = this.props.data.length > 0 ? this.props.data[0].selected : !0 : i ? e = this.props.dataConnected.length > 0 ? this.props.dataConnected[0].selected : !0 : e = !0;
|
|
156
156
|
break;
|
|
157
157
|
case "moveDown":
|
|
158
|
-
s ?
|
|
158
|
+
s ? e = this.props.data[o - 1] ? this.props.data[o - 1].selected : !0 : i ? e = this.props.dataConnected.length > 0 ? this.props.dataConnected[l - 1].selected : !0 : e = !0;
|
|
159
159
|
break;
|
|
160
160
|
case "transferTo":
|
|
161
|
-
|
|
161
|
+
e = !(this.props.dataConnected && s);
|
|
162
162
|
break;
|
|
163
163
|
case "transferFrom":
|
|
164
|
-
this.props.dataConnected ?
|
|
164
|
+
this.props.dataConnected ? e = !(this.props.dataConnected && i) : e = !0;
|
|
165
165
|
break;
|
|
166
166
|
case "transferAllTo":
|
|
167
|
-
|
|
167
|
+
e = !(this.props.dataConnected && this.props.data.length > 0);
|
|
168
168
|
break;
|
|
169
169
|
case "transferAllFrom":
|
|
170
|
-
|
|
170
|
+
e = !(this.props.dataConnected && this.props.dataConnected.length > 0);
|
|
171
171
|
break;
|
|
172
172
|
case "remove":
|
|
173
|
-
|
|
173
|
+
e = !(s || i);
|
|
174
174
|
break;
|
|
175
175
|
}
|
|
176
|
-
return
|
|
176
|
+
return e;
|
|
177
177
|
};
|
|
178
178
|
}
|
|
179
179
|
get isRtl() {
|
|
@@ -183,7 +183,7 @@ class v extends p.PureComponent {
|
|
|
183
183
|
* @hidden
|
|
184
184
|
*/
|
|
185
185
|
render() {
|
|
186
|
-
const
|
|
186
|
+
const t = O(this);
|
|
187
187
|
return /* @__PURE__ */ p.createElement(
|
|
188
188
|
"div",
|
|
189
189
|
{
|
|
@@ -191,8 +191,8 @@ class v extends p.PureComponent {
|
|
|
191
191
|
"k-listbox-actions"
|
|
192
192
|
)
|
|
193
193
|
},
|
|
194
|
-
this.props.tools && this.props.tools.map((
|
|
195
|
-
const o = C.findIndex((c) => c.name ===
|
|
194
|
+
this.props.tools && this.props.tools.map((e, r) => {
|
|
195
|
+
const o = C.findIndex((c) => c.name === e), l = C[o], s = this.isItemDisabled(l.name), i = `listbox.${l.name}`, a = t.toLanguageString(i, J[i]);
|
|
196
196
|
return /* @__PURE__ */ p.createElement(
|
|
197
197
|
w,
|
|
198
198
|
{
|
|
@@ -225,64 +225,64 @@ v.defaultProps = {
|
|
|
225
225
|
selectedField: "selected"
|
|
226
226
|
};
|
|
227
227
|
P(v);
|
|
228
|
-
const Z = (n = [],
|
|
228
|
+
const Z = (n = [], t = [], e, r) => {
|
|
229
229
|
let o = [], l = [], s = [];
|
|
230
230
|
const i = {
|
|
231
231
|
listBoxOneData: n,
|
|
232
|
-
listBoxTwoData:
|
|
232
|
+
listBoxTwoData: t
|
|
233
233
|
};
|
|
234
|
-
switch (
|
|
234
|
+
switch (e) {
|
|
235
235
|
case "moveUp":
|
|
236
236
|
o = [...n], o.forEach((a, c) => {
|
|
237
237
|
a[r] && (o = u(c, c - 1, o));
|
|
238
|
-
}), s = [...
|
|
238
|
+
}), s = [...t], s.forEach((a, c) => {
|
|
239
239
|
a[r] && (s = u(c, c - 1, s));
|
|
240
240
|
}), i.listBoxOneData = o, i.listBoxTwoData = s;
|
|
241
241
|
break;
|
|
242
242
|
case "moveDown":
|
|
243
243
|
o = n.reverse(), o.forEach((a, c) => {
|
|
244
244
|
a[r] && (o = u(c, c - 1, o));
|
|
245
|
-
}), s =
|
|
245
|
+
}), s = t.reverse(), s.forEach((a, c) => {
|
|
246
246
|
a[r] && (s = u(c, c - 1, s));
|
|
247
247
|
}), i.listBoxOneData = [...o].reverse(), i.listBoxTwoData = [...s].reverse();
|
|
248
248
|
break;
|
|
249
249
|
case "transferTo":
|
|
250
|
-
o = n.filter((a) => !a[r]), l = n.filter((a) => a[r]), s =
|
|
250
|
+
o = n.filter((a) => !a[r]), l = n.filter((a) => a[r]), s = t.concat(l), i.listBoxOneData = o, i.listBoxTwoData = s;
|
|
251
251
|
break;
|
|
252
252
|
case "transferFrom":
|
|
253
|
-
s =
|
|
253
|
+
s = t.filter((a) => !a[r]), l = t.filter((a) => a[r]), o = n.concat(l), i.listBoxOneData = o, i.listBoxTwoData = s;
|
|
254
254
|
break;
|
|
255
255
|
case "transferAllTo":
|
|
256
|
-
i.listBoxOneData = [], i.listBoxTwoData =
|
|
256
|
+
i.listBoxOneData = [], i.listBoxTwoData = t.concat(n);
|
|
257
257
|
break;
|
|
258
258
|
case "transferAllFrom":
|
|
259
|
-
i.listBoxOneData =
|
|
259
|
+
i.listBoxOneData = t.concat(n), i.listBoxTwoData = [];
|
|
260
260
|
break;
|
|
261
261
|
case "remove":
|
|
262
|
-
s =
|
|
262
|
+
s = t.filter((a) => !a[r]), o = n.filter((a) => !a[r]), i.listBoxOneData = o, i.listBoxTwoData = s;
|
|
263
263
|
break;
|
|
264
264
|
}
|
|
265
265
|
return i;
|
|
266
|
-
}, u = (n,
|
|
267
|
-
const r =
|
|
268
|
-
return
|
|
269
|
-
}, _ = (n = [],
|
|
270
|
-
const l = n.findIndex((m) => m[o] ===
|
|
266
|
+
}, u = (n, t, e) => {
|
|
267
|
+
const r = e.splice(n, 1)[0];
|
|
268
|
+
return e.splice(t, 0, r), e;
|
|
269
|
+
}, _ = (n = [], t = [], e, r, o) => {
|
|
270
|
+
const l = n.findIndex((m) => m[o] === e[o]), s = t.findIndex((m) => m[o] === e[o]), i = r !== null ? n.findIndex((m) => m[o] === r[o]) : -1, a = r !== null ? t.findIndex((m) => m[o] === r[o]) : -1, c = l >= 0, k = s >= 0, D = i >= 0, T = a >= 0, f = [...n], g = [...t];
|
|
271
271
|
return c && D ? {
|
|
272
272
|
listBoxOneData: u(l, i, n),
|
|
273
|
-
listBoxTwoData:
|
|
273
|
+
listBoxTwoData: t
|
|
274
274
|
} : k && T ? {
|
|
275
275
|
listBoxOneData: n,
|
|
276
|
-
listBoxTwoData: u(s, a,
|
|
276
|
+
listBoxTwoData: u(s, a, t)
|
|
277
277
|
} : c && (T || r === null) ? (r === null ? g.push(n[l]) : g.splice(a + 1, 0, n[l]), f.splice(l, 1), {
|
|
278
278
|
listBoxOneData: f,
|
|
279
279
|
listBoxTwoData: g
|
|
280
|
-
}) : k && (D || r === null) ? (r === null ? f.push(
|
|
280
|
+
}) : k && (D || r === null) ? (r === null ? f.push(t[s]) : f.splice(i + 1, 0, t[s]), g.splice(s, 1), {
|
|
281
281
|
listBoxOneData: f,
|
|
282
282
|
listBoxTwoData: g
|
|
283
283
|
}) : {
|
|
284
284
|
listBoxOneData: n,
|
|
285
|
-
listBoxTwoData:
|
|
285
|
+
listBoxTwoData: t
|
|
286
286
|
};
|
|
287
287
|
};
|
|
288
288
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-listbox",
|
|
3
|
-
"version": "7.0.0-develop.
|
|
3
|
+
"version": "7.0.0-develop.6",
|
|
4
4
|
"description": "React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"sideEffects": false,
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"@progress/kendo-licensing": "^1.3.0",
|
|
19
|
-
"@progress/kendo-react-buttons": "7.0.0-develop.
|
|
20
|
-
"@progress/kendo-react-common": "7.0.0-develop.
|
|
21
|
-
"@progress/kendo-react-intl": "7.0.0-develop.
|
|
19
|
+
"@progress/kendo-react-buttons": "7.0.0-develop.6",
|
|
20
|
+
"@progress/kendo-react-common": "7.0.0-develop.6",
|
|
21
|
+
"@progress/kendo-react-intl": "7.0.0-develop.6",
|
|
22
22
|
"@progress/kendo-svg-icons": "^2.0.0",
|
|
23
23
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
24
24
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|