primereact/orderlist/orderlist.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as e from"react";import t,{FilterService as r}from"primereact/api";import{useMountEffect as n,useUpdateEffect as i}from"primereact/hooks";import{ObjectUtils as l,DomHandler as o,classNames as a,UniqueComponentId as u}from"primereact/utils";import{Button as c}from"primereact/button";import{Ripple as s}from"primereact/ripple";function p(){return p=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(this,arguments)}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function d(e){if(Array.isArray(e))return f(e)}function m(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function v(e,t){if(e){if("string"==typeof e)return f(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}function g(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e){return d(e)||m(e)||v(e)||g()}function y(e){if(Array.isArray(e))return e}function b(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,i,l,o,a=[],u=!0,c=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=l.call(r)).done)&&(a.push(n.value),a.length!==t);u=!0);}catch(e){c=!0,i=e}finally{try{if(!u&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(c)throw i}}return a}}function E(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function I(e,t){return y(e)||b(e,t)||v(e,t)||E()}var C={defaultProps:{__TYPE:"OrderList",id:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,dataKey:null,breakpoint:"960px",onChange:null,itemTemplate:null,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,filterPlaceholder:null,filterTemplate:null,onFilter:null,children:void 0},getProps:function(e){return l.getMergedProps(e,C.defaultProps)},getOtherProps:function(e){return l.getDiffProps(e,C.defaultProps)}},w=e.memo((function(t){return e.createElement("div",{className:"p-orderlist-controls"},e.createElement(c,{type:"button",icon:"pi pi-angle-up",onClick:function(e){if(t.selection){for(var r=h(t.value),n=0;n<t.selection.length;n++){var i=l.findIndexInList(t.selection[n],r,t.dataKey);if(0===i)break;var o=r[i-1];r[i-1]=r[i],r[i]=o}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"up"})}}}),e.createElement(c,{type:"button",icon:"pi pi-angle-double-up",onClick:function(e){if(t.selection){for(var r=h(t.value),n=0;n<t.selection.length;n++){var i=l.findIndexInList(t.selection[n],r,t.dataKey);if(0===i)break;var o=r.splice(i,1)[0];r.unshift(o)}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"top"})}}}),e.createElement(c,{type:"button",icon:"pi pi-angle-down",onClick:function(e){if(t.selection){for(var r=h(t.value),n=t.selection.length-1;n>=0;n--){var i=l.findIndexInList(t.selection[n],r,t.dataKey);if(i===r.length-1)break;var o=r[i+1];r[i+1]=r[i],r[i]=o}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"down"})}}}),e.createElement(c,{type:"button",icon:"pi pi-angle-double-down",onClick:function(e){if(t.selection){for(var r=h(t.value),n=t.selection.length-1;n>=0;n--){var i=l.findIndexInList(t.selection[n],r,t.dataKey);if(i===r.length-1)break;var o=r.splice(i,1)[0];r.push(o)}t.onReorder&&t.onReorder({originalEvent:e,value:r,direction:"bottom"})}}}))}));w.displayName="OrderListControls";var x=e.memo((function(t){var r,n=e.useRef(null),i=e.useRef(null),u=e.useRef(null),c=e.useRef(null),p={filter:function(e){return t.onFilterInputChange(e)},reset:function(){return t.resetFilter()}},f=function(e){return-1!==l.findIndexInList(e,t.selection,t.dataKey)},d=function(e,t){i.current!==t&&i.current+1!==t&&(u.current=t,o.addClass(e.target,"p-orderlist-droppoint-highlight"),e.preventDefault())},m=function(e){u.current=null,o.removeClass(e.target,"p-orderlist-droppoint-highlight")},v=function(e){var r=i.current>u.current?u.current:0===u.current?0:u.current-1,n=h(t.value);l.reorderArray(n,i.current,r),u.current=null,o.removeClass(e.target,"p-orderlist-droppoint-highlight"),t.onChange&&t.onChange({originalEvent:e,value:n})},g=function(e){n.current=!1},y=function(e){if(n.current){var t=c.current.getBoundingClientRect().top+o.getWindowScrollTop(),r=t+c.current.clientHeight-e.pageY,i=e.pageY-t;r<25&&r>0?c.current.scrollTop+=15:i<25&&i>0&&(c.current.scrollTop-=15)}},b=function(e){13===e.which&&e.preventDefault()},E=function(t,r){return e.createElement("li",{key:r,className:"p-orderlist-droppoint",onDragOver:function(e){return d(e,t+1)},onDragLeave:m,onDrop:v})},I=t.header?e.createElement("div",{className:"p-orderlist-header"},t.header):null,C=function(){if(t.filter){var r=e.createElement("div",{className:"p-orderlist-filter"},e.createElement("input",{type:"text",value:t.filterValue,onChange:t.onFilter,onKeyDown:b,placeholder:t.placeholder,className:"p-orderlist-filter-input p-inputtext p-component"}),e.createElement("span",{className:"p-orderlist-filter-icon pi pi-search"}));if(t.filterTemplate)r=l.getJSXElement(t.filterTemplate,{className:"p-orderlist-filter",inputProps:{inputClassName:"p-orderlist-filter-input p-inputtext p-component",onChange:t.onFilter,onKeyDown:b},filterOptions:p,iconClassName:"p-orderlist-filter-icon pi pi-search",element:r,props:t});return e.createElement("div",{className:"p-orderlist-filter-container"},r)}return null}(),w=(r=t.value?t.value.map((function(r,l){var o=t.itemTemplate?t.itemTemplate(r):r,u=a("p-orderlist-item",{"p-highlight":f(r)},t.className),c=JSON.stringify(r);if(t.dragdrop){var p=[];return 0===l&&p.push(E(r,l)),p.push(e.createElement("li",{key:c,className:u,onClick:function(e){return t.onItemClick({originalEvent:e,value:r,index:l})},onKeyDown:function(e){return t.onItemKeyDown({originalEvent:e,value:r,index:l})},role:"option","aria-selected":f(r),draggable:"true",onDragStart:function(e){return r=e,o=l,n.current=!0,i.current=o,void(t.dragdropScope&&r.dataTransfer.setData("text","orderlist"));var r,o},onDragEnd:g,tabIndex:t.tabIndex},o,e.createElement(s,null))),p.push(E(l,c+"_droppoint")),p}return e.createElement("li",{key:c,className:u,role:"option","aria-selected":f(r),onClick:function(e){return t.onItemClick({originalEvent:e,value:r,index:l})},onKeyDown:function(e){return t.onItemKeyDown({originalEvent:e,value:r,index:l})},tabIndex:t.tabIndex},o)})):null,e.createElement("ul",{ref:c,className:"p-orderlist-list",style:t.listStyle,onDragOver:y,role:"listbox","aria-multiselectable":!0},r));return e.createElement("div",{className:"p-orderlist-list-container"},I,C,w)}));x.displayName="OrderListSubList";var S=e.memo(e.forwardRef((function(c,s){var f=C.getProps(c),d=I(e.useState([]),2),m=d[0],v=d[1],g=I(e.useState(""),2),y=g[0],b=g[1],E=I(e.useState(null),2),S=E[0],k=E[1],N=l.isNotEmpty(y),T=e.useRef(null),D=e.useRef(null),K=e.useRef(null),L=function(e){var t,r=e.originalEvent.metaKey||e.originalEvent.ctrlKey,n=l.findIndexInList(e.value,m,f.dataKey);t=-1!==n?r?m.filter((function(e,t){return t!==n})):[e.value]:r?[].concat(h(m),[e.value]):[e.value],v(t)},O=function e(t){var r=t.nextElementSibling;return r?o.hasClass(r,"p-orderlist-item")?r:e(r):null},R=function e(t){var r=t.previousElementSibling;return r?o.hasClass(r,"p-orderlist-item")?r:e(r):null},F=function(){var e=o.findSingle(T.current,".p-orderlist-list"),t=o.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(K.current){case"up":o.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":o.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}},P=function(){if(!D.current){D.current=o.createInlineStyle(t.nonce);var e="\n@media screen and (max-width: ".concat(f.breakpoint,") {\n    .p-orderlist[").concat(S,"] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[").concat(S,"] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[").concat(S,"] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[").concat(S,"] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");D.current.innerHTML=e}};e.useImperativeHandle(s,(function(){return{props:f,getElement:function(){return T.current}}})),n((function(){!S&&k(u())})),i((function(){return S&&(T.current.setAttribute(S,""),P()),function(){D.current=o.removeInlineStyle(D.current)}}),[S,f.breakpoint]),i((function(){K.current&&(F(),K.current=null)}));var A=C.getOtherProps(f),j=a("p-orderlist p-component",f.className),M=function(){if(N){var e=y.trim().toLocaleLowerCase(f.filterLocale),t=f.filterBy?f.filterBy.split(","):[];return r.filter(f.value,t,e,f.filterMatchMode,f.filterLocale)}return f.value}();return e.createElement("div",p({ref:T,id:f.id,className:j,style:f.style},A),e.createElement(w,{value:M,selection:m,onReorder:function(e){f.onChange&&f.onChange({event:e.originalEvent,value:e.value}),K.current=e.direction},dataKey:f.dataKey}),e.createElement(x,{value:M,selection:m,onItemClick:L,onItemKeyDown:function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=O(r);n&&n.focus(),t.preventDefault();break;case 38:var i=R(r);i&&i.focus(),t.preventDefault();break;case 13:L(e),t.preventDefault()}},onFilterInputChange:function(e){var t=e.target.value;b(t),f.onFilter&&f.onFilter({originalEvent:e,filter:t})},itemTemplate:f.itemTemplate,filter:f.filter,onFilter:function(e){var t=e.target.value;b(t),f.onFilter&&f.onFilter({originalEvent:e,value:t})},resetFilter:function(){b(""),f.onFilter&&f.onFilter({filter:""})},filterTemplate:f.filterTemplate,header:f.header,listStyle:f.listStyle,dataKey:f.dataKey,dragdrop:f.dragdrop,onChange:f.onChange,tabIndex:f.tabIndex}))})));S.displayName="OrderList";export{S as OrderList};