@adoptaunabuelo/react-components 0.1.18 → 0.1.19

package/dist/cjs/components/Filter/Filter.d.ts

@@ -8,7 +8,7 @@ export interface Props {
     disabled?: boolean;
     type?: 'single' | 'multiple' | 'date';
     position?: 'bottom-right' | 'bottom-left';
-    options: Array<{
+    options?: Array<{
         id: string;
         label: string;
         sublabel?: string;

package/dist/cjs/index.js

@@ -834,6 +834,7 @@ n.version="2.29.4",a(Yr),n.fn=so,n.min=Qr,n.max=Jr,n.now=en,n.utc=f,n.unix=uo,n.
     justify-content: space-between;
     padding-top: 8px;
     border-top: 1px solid ${Color.line.soft};
+    margin-top: 8px;
 `,BadgeView=Ye.div`
     display: flex;
     align-items: center;
@@ -842,5 +843,5 @@ n.version="2.29.4",a(Yr),n.fn=so,n.min=Qr,n.max=Jr,n.now=en,n.utc=f,n.unix=uo,n.
     height: 18px;
     width: 18px;
     background-color: ${Color.background.full};
-`,Filter=e=>{const[t,r]=React.useState(!1),[n,a]=React.useState([]),[o,i]=React.useState([]),[l,s]=React.useState(e.options),[u,d]=React.useState(void 0);React.useEffect((()=>{e.options&&(d(new Fuse(e.options,{keys:["label","id"]})),s(e.options))}),[e.options]),React.useEffect((()=>{e.selectedOptions&&(i(e.selectedOptions),a(e.selectedOptions))}),[e.selectedOptions]),React.useEffect((()=>(document.addEventListener("mousedown",(t=>{const n=document.getElementById(e.id);null!==n&&(n.contains(t.target)||(r(!1),s(e.options),console.log("selectedOptions",o),a(o)))})),document.removeEventListener("mousedown",c))),[]);const c=n=>{n.stopPropagation(),a(o),t?(r(!1),s(e.options)):r(!0)};return"date"===e.type?jsxRuntime.jsx(Filter$1,Object.assign({},e)):e.options&&e.options.length>0?jsxRuntime.jsxs(Container,Object.assign({id:e.id,role:"filter",style:e.style},{children:[jsxRuntime.jsxs(ButtonFilter,Object.assign({role:"filter-button",selected:o.length>0,disabled:e.disabled,onClick:c},{children:[jsxRuntime.jsx(Text$1,Object.assign({type:"p",style:{color:e.disabled?Color.text.low:o.length>0?Color.text.full:Color.text.high,fontSize:14,marginRight:4}},{children:e.label})),o.length>0?jsxRuntime.jsx(BadgeView,{children:jsxRuntime.jsx(Text$1,Object.assign({type:"p",style:{color:"white",fontSize:12,fontWeight:600}},{children:o.length}))}):jsxRuntime.jsx(ChevronDown$1,{height:18,width:18,color:e.disabled?Color.text.low:Color.text.high})]})),t&&jsxRuntime.jsxs(FilterView,Object.assign({role:"filter-menu",position:e.position},{children:[!e.hideSearchBar&&jsxRuntime.jsx(SearchBar,{style:{borderBottom:"1px solid "+Color.line.soft},placeholder:"Buscar",design:"secondary",onChange:t=>{const r=t.target.value;if(r){const e=u.search(r).map((e=>e.item));s(e)}else s(e.options)}}),jsxRuntime.jsx(ContentView,{children:jsxRuntime.jsx(CheckboxList,{style:{paddingTop:16},options:l,selectedOptions:n,type:"multiple"===e.type?"multiple":"single",height:18,width:18,onChange:e=>{a(e)}})}),jsxRuntime.jsxs(BottomBar,{children:["multiple"===e.type&&jsxRuntime.jsx(Button,Object.assign({design:"text",size:"small",style:{marginRight:4},onClick:()=>{a(e.options)}},{children:"Seleccionar todo"})),jsxRuntime.jsx(Button,Object.assign({design:"text",size:"small",style:{marginRight:4},onClick:()=>{a([])}},{children:"Borrar"})),jsxRuntime.jsx(Button,Object.assign({design:"primary",size:"small",onClick:()=>{r(!1),i(n),e.onChange&&e.onChange(n)}},{children:"Aplicar"}))]})]}))]})):null};exports.Avatar=Avatar,exports.BreadCrumb=BreadCrumb,exports.Button=Button,exports.Checkbox=CheckboxList,exports.Color=Color,exports.Feedback=FeedBack,exports.Filter=Filter,exports.Input=Input,exports.Label=Label,exports.Menu=MenuList,exports.Modal=ModalComponent,exports.ProgressBar=ProgressBar,exports.SearchBar=SearchBar,exports.Select=Select,exports.Text=Text$1;
+`,Filter=e=>{const[t,r]=React.useState(!1),[n,a]=React.useState([]),[o,i]=React.useState(e.options),[l,s]=React.useState(void 0),u=React.useRef(n),d=e=>{u.current=e,a(e)},c=React.useRef(n),h=e=>{c.current=e,r(e)};React.useEffect((()=>{e.options&&(s(new Fuse(e.options,{keys:["label","id"]})),i(e.options))}),[e.options]),React.useEffect((()=>{e.selectedOptions&&d(e.selectedOptions)}),[e.selectedOptions]),React.useEffect((()=>(document.addEventListener("mousedown",(t=>{const r=document.getElementById(e.id);null!==r&&(r.contains(t.target)||!0!==c.current||(h(!1),i(e.options),e.onChange&&e.onChange(u.current)))})),document.removeEventListener("mousedown",p))),[]);const p=r=>{r.stopPropagation(),t?(h(!1),i(e.options),e.onChange&&e.onChange(n)):h(!0)};return"date"===e.type?jsxRuntime.jsx(Filter$1,Object.assign({},e)):e.options&&e.options.length>0?jsxRuntime.jsxs(Container,Object.assign({id:e.id,role:"filter",style:e.style},{children:[jsxRuntime.jsxs(ButtonFilter,Object.assign({role:"filter-button",selected:n.length>0,disabled:e.disabled,onClick:p},{children:[jsxRuntime.jsx(Text$1,Object.assign({type:"p",style:{color:e.disabled?Color.text.low:n.length>0?Color.text.full:Color.text.high,fontSize:14,marginRight:4}},{children:e.label})),n.length>0?jsxRuntime.jsx(BadgeView,{children:jsxRuntime.jsx(Text$1,Object.assign({type:"p",style:{color:"white",fontSize:12,fontWeight:600}},{children:n.length}))}):jsxRuntime.jsx(ChevronDown$1,{height:18,width:18,color:e.disabled?Color.text.low:Color.text.high})]})),t&&jsxRuntime.jsxs(FilterView,Object.assign({role:"filter-menu",position:e.position},{children:[!e.hideSearchBar&&jsxRuntime.jsx(SearchBar,{style:{borderBottom:"1px solid "+Color.line.soft},placeholder:"Buscar",design:"secondary",onChange:t=>{const r=t.target.value;if(r){const e=l.search(r).map((e=>e.item));i(e)}else i(e.options)}}),jsxRuntime.jsx(ContentView,{children:o&&o.length>0&&jsxRuntime.jsx(CheckboxList,{style:{paddingTop:16},options:o,selectedOptions:n,type:"multiple"===e.type?"multiple":"single",height:18,width:18,onChange:e=>{const t=[...e];d(t)}})}),jsxRuntime.jsxs(BottomBar,{children:["multiple"===e.type&&jsxRuntime.jsx(Button,Object.assign({design:"text",size:"small",style:{marginRight:4},onClick:()=>{d(e.options)}},{children:"Seleccionar todo"})),jsxRuntime.jsx(Button,Object.assign({design:"text",size:"small",style:{marginRight:4},onClick:()=>{d([])}},{children:"Borrar"})),jsxRuntime.jsx(Button,Object.assign({design:"primary",size:"small",onClick:()=>{h(!1),e.onChange&&e.onChange(n)}},{children:"Aplicar"}))]})]}))]})):null};exports.Avatar=Avatar,exports.BreadCrumb=BreadCrumb,exports.Button=Button,exports.Checkbox=CheckboxList,exports.Color=Color,exports.Feedback=FeedBack,exports.Filter=Filter,exports.Input=Input,exports.Label=Label,exports.Menu=MenuList,exports.Modal=ModalComponent,exports.ProgressBar=ProgressBar,exports.SearchBar=SearchBar,exports.Select=Select,exports.Text=Text$1;
 //# sourceMappingURL=index.js.map