smart-filtero
Version:
This is an NPM package that filters out the data based on the given conditions
26 lines (25 loc) • 10.3 kB
JavaScript
import e,{forwardRef as t,createElement as l,useState as s,useRef as n,useCallback as r,useEffect as a,Fragment as o}from'react';import{debounce as c}from'lodash';
/**
* @license lucide-react v0.473.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/const i=(...e)=>e.filter(((e,t,l)=>Boolean(e)&&''!==e.trim()&&l.indexOf(e)===t)).join(' ').trim()
/**
* @license lucide-react v0.473.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/;var m={xmlns:'http://www.w3.org/2000/svg',width:24,height:24,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round'};
/**
* @license lucide-react v0.473.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/const d=t((({color:e='currentColor',size:t=24,strokeWidth:s=2,absoluteStrokeWidth:n,className:r='',children:a,iconNode:o,...c},d)=>l('svg',{ref:d,...m,width:t,height:t,stroke:e,strokeWidth:n?24*Number(s)/Number(t):s,className:i('lucide',r),...c},[...o.map((([e,t])=>l(e,t))),...Array.isArray(a)?a:[a]]))),u=(e,s)=>{const n=t((({className:t,...n},r)=>{return l(d,{ref:r,iconNode:s,className:i(`lucide-${a=e,a.replace(/([a-z0-9])([A-Z])/g,'$1-$2').toLowerCase()}`,t),...n});var a}));return n.displayName=`${e}`,n},h=u('Type',[['polyline',{points:'4 7 4 4 20 4 20 7',key:'1nosan'}],['line',{x1:'9',x2:'15',y1:'20',y2:'20',key:'swin9y'}],['line',{x1:'12',x2:'12',y1:'4',y2:'20',key:'1tx1rr'}]]),b=u('X',[['path',{d:'M18 6 6 18',key:'1bl5f8'}],['path',{d:'m6 6 12 12',key:'d8bk6v'}]]),y=({item:t,removeItem:l,validateStyle:s})=>e.createElement('div',{className:s('selectedItem')},e.createElement('span',null,t.item),t.typed&&e.createElement('div',{className:s('removeIcon'),onClick:()=>l(t)},e.createElement(b,{size:16}))),I=({item:t,removeItem:l,validateStyle:s})=>t.subItems.length>0&&t.subItems.map(((n,r)=>e.createElement('div',{key:`${n}-${r}`,className:s('selectedSubItem')},e.createElement('span',null,n.label),e.createElement('div',{className:s('removeIcon'),onClick:()=>l(t,n.label)},e.createElement(b,{size:16})))));
/**
* @license lucide-react v0.473.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/var p={container:'styles-module_container__ueeVi',inputContainer:'styles-module_inputContainer__3o8gx',selectedItems:'styles-module_selectedItems__rTljT',selectedItem:'styles-module_selectedItem__ePNrN',selectedSubItem:'styles-module_selectedSubItem__oJBtz',selectedText:'styles-module_selectedText__ijFPA',removeIcon:'styles-module_removeIcon__KkGuS',searchInput:'styles-module_searchInput__CVYXn',dropdown:'styles-module_dropdown__7P3qa',dropdownItemContainer:'styles-module_dropdownItemContainer__FCz1q',dropdownSubItemContainer:'styles-module_dropdownSubItemContainer__H---M',queryItem:'styles-module_queryItem__84bsf',dropdownItem:'styles-module_dropdownItem__mVXR3',noItemsFound:'styles-module_noItemsFound__h8MwB',loadItems:'styles-module_loadItems__qtdrC',clearFilterButton:'styles-module_clearFilterButton__tATNq',scrollableContainerWithButton:'styles-module_scrollableContainerWithButton__w0nf6',scrollable:'styles-module_scrollable__IUpHG',searchContainer:'styles-module_searchContainer__1NNgn',searchWrapper:'styles-module_searchWrapper__YknG7'};const v=({query:t,showSubItems:l,isFocused:s,children:n})=>t&&!l&&s&&e.createElement('ul',{className:p.dropdownItemContainer},n),_=({isFocused:t,showSubItems:l,fetching:s,filteredItemsLength:n,children:r})=>t&&!l&&!s&&n&&e.createElement('ul',{className:p.dropdownItemContainer},' ',r,' '),w=({label:t,icon:l,query:s,onClick:n,isTyped:r=!1,validateStyle:a})=>e.createElement('li',{className:a(r?'queryItem':'dropdownItem'),onClick:n},l&&(t=>{const l=t;return e.createElement(l,{size:14})})(l),t,' ',r&&e.createElement(e.Fragment,null,s)),f=({showSubItems:t,isFocused:l,children:s})=>t&&l&&!t.typed&&e.createElement('ul',{className:p.dropdownSubItemContainer},s),E=({item:t,removeItem:l,validateStyle:s})=>e.createElement('div',{className:s('selectedText')},e.createElement('span',null,t.item),e.createElement('div',{className:s('removeIcon'),onClick:()=>l(t)},e.createElement(b,{size:16}))),g=e=>e.toLowerCase().replace(/\s+/g,'_'),S=e=>{let t=window.location.search;if(!t){const e=window.location.href,l=e.indexOf('?');t=-1!==l?e.substring(l):''}const l=new URLSearchParams(t);Object.keys(e).forEach((t=>{e[t]?l.set(t,e[t]):l.delete(t)})),window.history.replaceState({},'',`${window.location.pathname}?${l}`)},C=({items:t,subItems:l,fetching:i,fetchFunctions:m,excludeSelected:d=!0,styleTheme:u={},getSelectedItems:C})=>{const{query:N,setQuery:k,filteredItems:x,filteredSubItems:F,selectedItems:L,selectItem:$,selectItemFromUrl:j,removeItem:O,showSubItems:q,handleSelect:T,resetSelectedItems:A,resetSubItems:W}=((e,t,l=!0)=>{var n;const[r,a]=s(''),[o,c]=s([]),[i,m]=s(null),d=e=>o.some((t=>t.subItems.some((t=>t.label===e.label)))),u=e.filter((e=>{var t;return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(r.toLowerCase()))&&(!l||!o.some((t=>t.item===e.label)))})),h=(t[null!==(n=null==i?void 0:i.id)&&void 0!==n?n:'']||[]).filter((e=>e.label.toLowerCase().includes(r.toLowerCase())&&!d(e))),b=(e,t)=>{var l,s,n;if(t)c((l=>l.map((l=>{if(l.item===e.label){const e=[...l.subItems,t];return Object.assign(Object.assign({},l),{subItems:e})}return l}))));else{const t={id:e.id,item:null!==(l=e.label)&&void 0!==l?l:'',subItems:[],isAsync:null!==(s=e.isAsync)&&void 0!==s&&s,typed:null!==(n=e.typed)&&void 0!==n&&n};c((e=>[...e,t])),e.typed&&a('')}m(null)};return{query:r,setQuery:a,filteredItems:u,filteredSubItems:h,selectedItems:o,selectItem:b,selectItemFromUrl:(e,t)=>{c((l=>{var s,n,r;const a=l.findIndex((t=>t.id===e.id));if(-1!==a){const e=Object.assign(Object.assign({},l[a]),{subItems:[...l[a].subItems]}),t=[...l];return t[a]=e,t}{const a={id:e.id,item:null!==(s=e.label)&&void 0!==s?s:'',subItems:t?[t]:[],isAsync:null!==(n=e.isAsync)&&void 0!==n&&n,typed:null!==(r=e.typed)&&void 0!==r&&r};return a?[...l,a]:l}})),e.typed&&a(''),m(null)},removeItem:(e,t)=>{c((l=>l.reduce(((l,s)=>{if(!s)return l;if(s.item===e){if(t){const e=s.subItems.reduce(((e,l)=>(l.label!==t&&e.push(l),e)),[]);(s.typed||e.length>0)&&l.push(Object.assign(Object.assign({},s),{subItems:e}))}}else(s.typed||s.subItems.length>0||!s.subItems)&&l.push(s);return l}),[])))},getSubItems:e=>e.id&&t[e.id]?t[e.id].filter((e=>!d(e))):[],showSubItems:i,handleSelect:e=>{b(e),m(e.typed?null:e)},resetSelectedItems:()=>{a(''),c([]),m(null)},resetSubItems:()=>{m(null)}}})(t,l,d),z=n(null),B=n(null),P=n(L.length),U=n(null),[R,D]=s(!1),[G,M]=s(null),[V,X]=s(!1),H=c(((e,t)=>{e.id&&m[e.id]&&m[e.id](t)}),500),Q=c((e=>{e.id&&m[e.id]&&m[e.id]()}),500),Y=r((()=>new Promise((e=>{if(U.current){const t=U.current;t.scrollTo({left:t.scrollWidth}),setTimeout((()=>e()),0)}else e()}))),[]),J=r((()=>{if(B.current&&U.current){const e=B.current,t=U.current.scrollLeft,l=e.offsetLeft;M({left:l-t})}}),[]),K=e=>{z.current&&!z.current.contains(e.target)&&(D(!1),L.forEach((e=>{0==e.subItems.length&&'search'!==e.id&&(Z(e),W(),Y().then(J))})))},Z=(e,t)=>{const l=g(e.item);t?(O(e.item,t),ee(e.id||l),C({[e.id||l]:null})):(O(e.item),ee(e.id||l),C({[e.id||l]:null}))},ee=e=>{const t=new URLSearchParams(window.location.search);t.delete(e),window.history.replaceState({},'',t.size>0?`${window.location.pathname}?${t}`:window.location.pathname)},te=e=>u[e]||p[e];a((()=>{q&&q.isAsync&&Q(q)}),[q]),a((()=>{(null==q?void 0:q.isAsync)&&N&&H(q,N)}),[q,N,L]),a((()=>{const e=new URLSearchParams(window.location.search),l={},s=e.get('query');s&&k(s),e.forEach(((e,s)=>{l[s]=e;const n=t.find((e=>e.id===s));l.search&&j({id:'search',item:'Search',subItems:[],label:l.search,icon:h,typed:!0}),n&&j(n,{label:e,icon:n.icon||h})}))}),[]),a((()=>{const e=L.length;return e>=P.current&&Y().then(J),P.current=e,document.addEventListener('mousedown',K),()=>{document.removeEventListener('mousedown',K)}}),[L]);const le={query:N,showSubItems:q,fetching:i,isFocused:R,filteredItemsLength:x.length>0},se={validateStyle:te,removeItem:Z};return e.createElement('div',{className:`${te('container')} ${te('inputContainer')}`},e.createElement('div',{className:te('scrollableContainerWithButton')},e.createElement('div',{ref:U,className:te('scrollable')},L.length>0&&e.createElement('div',{className:te('selectedItems')},L.map(((t,l)=>e.createElement(o,{key:`${l}-${t.label}`},'search'===t.id?e.createElement(E,Object.assign({},se,{item:t})):e.createElement(e.Fragment,null,e.createElement(y,Object.assign({},se,{item:t})),e.createElement(I,Object.assign({},se,{item:t}))))))),e.createElement('div',{ref:z,className:te('searchContainer')},e.createElement('div',{className:te('searchWrapper')},e.createElement('input',{ref:B,type:'text',value:N,onFocus:()=>{D(!0),X(!1),Y().then((()=>{J(),X(!0)}))},onChange:e=>{const t=e.target.value;k(t),D(!0)},placeholder:'Search...',className:te('searchInput')})),R&&V&&G&&e.createElement('div',{className:te('dropdown'),style:{left:G.left}},e.createElement(v,Object.assign({},le),e.createElement(w,{label:'Search for this text',icon:h,onClick:e=>(e=>{e.preventDefault(),T({id:'search',item:'Search',subItems:[],label:N,icon:h,typed:!0}),k(''),S({search:N}),C({search:N})})(e),validateStyle:te,isTyped:!0})),e.createElement(_,Object.assign({},le),x.map(((t,l)=>e.createElement(w,{key:`${l}-${t.label}`,label:t.label,icon:t.icon,onClick:e=>((e,t)=>{t.preventDefault(),T(e),k('')})(t,e),validateStyle:te})))),e.createElement(f,Object.assign({},le),i?e.createElement('p',{className:te('loadItems')},'Loading...'):F.length>0?F.map(((t,l)=>e.createElement(w,{key:`${l}-${t.label}`,label:t.label,icon:t.icon,onClick:e=>((e,t)=>{t.preventDefault(),q&&($(q,e),k(''),S({[g(q.id||'')]:e.label}),C({[g(q.id||'')]:e.label}))})(t,e),validateStyle:te}))):e.createElement('p',{className:te('noItemsFound')},'No items found'))))),L.length>0&&e.createElement('button',{type:'button',className:te('clearFilterButton'),onClick:()=>{L.forEach((e=>{Z(e)})),A()}},e.createElement(b,{size:16}))))};export{C as SmartFiltero};