@anker-in/headless-ui 1.0.19-temp-092902 → 1.0.19-temp-092903
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/cjs/biz-components/CollectionsFilters/FilterList.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/FilterList.js.map +3 -3
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterList.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterList.js.map +2 -2
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as d}from"react/jsx-runtime";import H from"./component/AnimatedUL";import{cn as
|
|
1
|
+
import{jsx as t,jsxs as d}from"react/jsx-runtime";import H from"./component/AnimatedUL";import{cn as s}from"../../helpers/utils";import{remove as _,cloneDeep as R}from"es-toolkit";import{useEffect as D,useRef as z,useMemo as k}from"react";import{useMediaQuery as U}from"react-responsive";import{handleFilterOptions as V}from"./component/filtersFun";import{Button as F,Drawer as j,DrawerContent as q,DrawerHeader as I,DrawerTitle as Q,DrawerFooter as Z}from"../../components/index.js";function G(O){const p=U({query:"(max-width: 768px)"}),y=z(!1),{closeFilter:w,filtered:u,result:g,shopifyData:L,filterPrice:x,openOptions:b,metafields:E,mobileDrawerVisible:B,onCloseDrawer:m,onFilteredChange:$,onOpenOptions:C,onClearFiltered:M}=O,{drawerText:f}=L,{shop_filters_pair:h}=E,v=k(()=>V(g,x,h),[x,g?.filters,h?.filter_txt?.offers?.name,h?.filter_txt?.offers?.onsale]),c=k(()=>v?.length?v?.map?.(e=>({...e,options:e?.options?.map?.(l=>({...l,checked:u?.[e?.value]?.indexOf?.(l?.value)>-1}))})):[],[u,v]),P=(e,l,n,a)=>{const o=e.target,r=R(u);let i=r?.[o?.name]||[];o.checked?a==="checkbox"?i.push(o?.value):i=[o?.value]:_(i,A=>A===o.value),r[o.name]=i,i.length<=0&&Reflect.deleteProperty(r,o.name),$?.({...r},l,n)},T=e=>{let l=b.concat();l.map(n=>n.label===e?n.show=!n.show:n),C?.(l)},N=()=>c?.length>0&&t("div",{className:"filter-list",children:c.map((e,l)=>{const n=b?.find?.(a=>a.label==e.label);return d("div",{className:s("mb-4 overflow-hidden duration-300 ease-in-out"),children:[d("div",{onClick:()=>T(e.label),className:"relative flex items-center justify-between md-tablet:justify-center text-base font-semibold cursor-pointer leading-none",children:[t("button",{className:"w-full whitespace-nowrap text-left font-medium overflow-hidden box-border",children:t("span",{className:"pr-2 font-semibold truncate",children:e.label})}),t("div",{className:`duration-300 ease-in-out ${n?.show&&"rotate-180"}`,children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"7",viewBox:"0 0 12 7",fill:"none",children:t("path",{d:"M5.5268 0.668525C5.82138 0.428262 6.25563 0.445208 6.53022 0.719795L11.0302 5.2198C11.3231 5.51269 11.3231 5.98745 11.0302 6.28034C10.7373 6.57324 10.2626 6.57324 9.96967 6.28034L5.99994 2.31062L2.03022 6.28034C1.73732 6.57324 1.26256 6.57324 0.96967 6.28034C0.676777 5.98745 0.676777 5.51269 0.96967 5.2198L5.46967 0.719795L5.5268 0.668525Z",fill:"#1D1D1F"})})})]}),t("div",{className:"transition-all duration-400 ease-in-out overflow-hidden",children:t(H,{className:"!pt-4 transition-all duration-400 ease-in-out","data-label":e.label,isOpen:!!n?.show,children:e?.options?.map?.((a,o)=>{const r=e.type?e.type==="checkbox"?"checkbox":"radio":"checkbox";return t("li",{className:s("w-full mb-4 box-border",{disabled:a?.count<=0,"mb-0":o>=e?.options?.length-1}),children:d("label",{className:"flex items-center overflow-hidden box-border",htmlFor:`${e.value}-${o}`,children:[t("input",{type:r,name:e.value,value:a.value,id:`${e.value}-${o}`,disabled:a?.count<=0,checked:a.checked,className:s("size-4 cursor-pointer",a.checked?"accent-[#000000]":`appearance-none bg-transparent border border-[#000000] ${r==="radio"?"rounded-full":"rounded-[2px]"}`),onChange:i=>P(i,e,a,r)}),t("p",{className:s("pt-0.5 pl-0.5 inline-block cursor-pointer font-semibold leading-none text-base"),children:a.label})]})},a.value)})})})]},`${e.label}${l}`)})});return D(()=>{if(c?.length&&!b?.length&&!y.current){y.current=!0;let e=[];const l=document?.getElementsByClassName("!pt-4 transition-all duration-400 ease-in-out");for(let n=0;n<l.length;n++){let a={};a.label=l[n]?.getAttribute("data-label"),a.show=p?!1:n<6,a.height=document?.getElementsByClassName("!pt-4 transition-all duration-400 ease-in-out")?.[n]?.clientHeight,e.push(a)}C?.(e)}},[c]),D(()=>{!p&&m?.(!1)},[p]),d("div",{className:s("transition-all duration-400 ease-in-out","desktop:w-60 tablet:w-48 laptop:w-[210px] md-tablet:hidden tablet:pt-4 tablet:border-t tablet:border-[#E4E5E6]","md-tablet:fixed md-tablet:bottom-0 md-tablet:left-0 md-tablet:right-0 md-tablet:top-0 md-tablet:z-[99]",w?"md-tablet:pointer-events-auto md-tablet:opacity-100":"md-tablet:pointer-events-none md-tablet:opacity-0"),children:[t("div",{className:s("transition-all duration-400 ease-in-out md-tablet:absolute md-tablet:bottom-0 md-tablet:h-[90vh] md-tablet:w-full",w?"md-tablet:translate-y-0":"md-tablet:translate-y-[100%]"),children:N()}),t(j,{open:B,onOpenChange:()=>m(!1),children:d(q,{className:"px-4 pb-4 max-h-[94.5vh] flex flex-col",children:[t(I,{className:"sticky top-0 inset-x-0 py-0 mb-6",children:t(Q,{children:f?.drawerTitle||"Mobile Filter"})}),t("div",{className:"flex-1 overflow-y-auto",children:N()}),t(Z,{className:"py-0 pt-4",children:d("div",{className:s("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2"),children:[t(F,{variant:"secondary",className:"m-tablet:w-full",onClick:()=>{M?.(),m(!1)},children:f?.secondaryButton||"Clear"}),t(F,{variant:"primary",className:"m-tablet:w-full",onClick:()=>{m(!1)},children:f?.primaryButton||"Apply"})]})})]})})]})}export{G as default};
|
|
2
2
|
//# sourceMappingURL=FilterList.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionsFilters/FilterList.tsx"],
|
|
4
|
-
"sourcesContent": ["import AnimatedUL from './component/AnimatedUL'\nimport { cn } from '../../helpers/utils'\nimport type { ChangeEvent } from 'react'\nimport { remove, cloneDeep } from 'es-toolkit'\nimport { useEffect, useRef, useMemo } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { handleFilterOptions } from './component/filtersFun'\nimport { Button, Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerFooter } from '../../components/index.js'\n\ninterface FilterListProps {\n onFilteredChange: (filtered: any, filter: any, opt: any) => void\n onOpenOptions: (openOpt: any[]) => void\n closeFilter: boolean // \u662F\u5426\u5173\u95ED\u7B5B\u9009\u9879\u5C55\u793A\n result: any\n filterPrice: any\n shopifyData?: any\n metafields: any\n filtered: any // \u9009\u62E9\u7684\u7B5B\u9009\u9009\u9879\n openOptions: any[] // \u5C55\u5F00\u7B5B\u9009\u9879\n mobileDrawerVisible: boolean\n onClearFiltered: () => void\n onCloseDrawer: (closeDrawer: boolean) => void\n}\n\nexport default function FilterList(props: FilterListProps) {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const onceRef = useRef<boolean>(false)\n\n const {\n closeFilter,\n filtered,\n result,\n shopifyData,\n filterPrice,\n openOptions,\n metafields,\n mobileDrawerVisible,\n onCloseDrawer,\n onFilteredChange,\n onOpenOptions,\n onClearFiltered,\n } = props\n\n const { drawerText } = shopifyData\n\n const { shop_filters_pair: shopFiltersPair } = metafields\n\n // \u5904\u7406\u7B5B\u9009\u9879\u6570\u636E\n const filtersOptions = useMemo(() => {\n return handleFilterOptions(result, filterPrice, shopFiltersPair)\n }, [\n filterPrice,\n result?.filters,\n shopFiltersPair?.filter_txt?.offers?.name,\n shopFiltersPair?.filter_txt?.offers?.onsale,\n ])\n\n const filtersPair = useMemo(() => {\n if (!filtersOptions?.length) return []\n return filtersOptions?.map?.((filter: any) => {\n return {\n ...filter,\n options: filter?.options?.map?.((opt: any) => {\n return {\n ...opt,\n checked: filtered?.[filter?.value]?.indexOf?.(opt?.value) > -1,\n }\n }),\n }\n })\n }, [filtered, filtersOptions])\n\n const filterChange = (event: ChangeEvent<HTMLInputElement>, filter: any, opt: any, type: string) => {\n const target = event.target\n const clonefiltered = cloneDeep(filtered)\n let current = clonefiltered?.[target?.name] || []\n if (target.checked) {\n type === 'checkbox' ? current.push(target?.value) : (current = [target?.value])\n } else {\n remove(current, (v: string) => v === target.value)\n }\n clonefiltered[target.name] = current\n if (current.length <= 0) {\n Reflect.deleteProperty(clonefiltered, target.name)\n }\n onFilteredChange?.({ ...clonefiltered }, filter, opt)\n }\n\n const handleFilterOpt = (label: string) => {\n let res = openOptions.concat()\n res.map((item: any) => {\n if (item.label === label) return (item.show = !item.show)\n return item\n })\n onOpenOptions?.(res)\n }\n\n const MobileFilterList = () => {\n return (\n filtersPair?.length > 0 && (\n <div className=\"filter-list\">\n {filtersPair.map((filter: any, i: number) => {\n const openOption = openOptions?.find?.((item: any) => item.label == filter.label) as any\n return (\n <div key={`${filter.label}${i}`} className={cn('mb-4 overflow-hidden duration-300 ease-in-out')}>\n <div\n onClick={() => handleFilterOpt(filter.label)}\n className={\n 'relative flex items-center justify-between md-tablet:justify-center text-base font-semibold cursor-pointer leading-none'\n }\n >\n <button className=\"w-full whitespace-nowrap text-left font-medium overflow-hidden box-border\">\n <span className=\"pr-2 font-semibold truncate\">{filter.label}</span>\n </button>\n <div className={`duration-300 ease-in-out ${openOption?.show && 'rotate-180'}`}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\n <path\n d=\"M5.5268 0.668525C5.82138 0.428262 6.25563 0.445208 6.53022 0.719795L11.0302 5.2198C11.3231 5.51269 11.3231 5.98745 11.0302 6.28034C10.7373 6.57324 10.2626 6.57324 9.96967 6.28034L5.99994 2.31062L2.03022 6.28034C1.73732 6.57324 1.26256 6.57324 0.96967 6.28034C0.676777 5.98745 0.676777 5.51269 0.96967 5.2198L5.46967 0.719795L5.5268 0.668525Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n <div className={'transition-all duration-400 ease-in-out overflow-hidden'}>\n {!!openOption?.show ?\n <AnimatedUL\n className={'!pt-4 transition-all duration-400 ease-in-out'}\n data-label={filter.label}\n isOpen={!!openOption?.show}\n >\n {filter?.options?.map?.((opt: any, p: number) => {\n const type = filter.type ? (filter.type === 'checkbox' ? 'checkbox' : 'radio') : 'checkbox'\n return (\n <li\n key={opt.value}\n className={cn('w-full mb-4 box-border', {\n ['disabled']: opt?.count <= 0,\n 'mb-0': p >= filter?.options?.length - 1,\n })}\n >\n <label\n className=\"flex items-center overflow-hidden box-border\"\n htmlFor={`${filter.value}-${p}`}\n >\n <input\n type={type}\n name={filter.value}\n value={opt.value}\n id={`${filter.value}-${p}`}\n disabled={opt?.count <= 0}\n checked={opt.checked}\n className=\"size-4 cursor-pointer bg-transparent checked:bg-[#000000] accent-[#000000]\"\n onChange={e => filterChange(e, filter, opt, type)}\n />\n <p\n className={cn(\n 'pt-0.5 pl-0.5 inline-block cursor-pointer font-semibold leading-none text-base'\n )}\n >\n {opt.label}\n </p>\n </label>\n </li>\n )\n })}\n </AnimatedUL> : null}\n </div>\n </div>\n )\n })}\n </div>\n )\n )\n }\n\n useEffect(() => {\n if (filtersPair?.length && !openOptions?.length && !onceRef.current) {\n onceRef.current = true\n let res = []\n const domList = document?.getElementsByClassName('pt-4 transition-all duration-400 ease-in-out')\n for (let index = 0; index < domList.length; index++) {\n let data = {} as any\n data.label = domList[index]?.getAttribute('data-label')\n data.show = isMobile ? false : index < 6 ? true : false\n data.height = document?.getElementsByClassName('pt-4 transition-all duration-400 ease-in-out')?.[\n index\n ]?.clientHeight\n res.push(data)\n }\n onOpenOptions?.(res)\n }\n }, [filtersPair])\n\n useEffect(() => {\n !isMobile && onCloseDrawer?.(false)\n }, [isMobile])\n\n return (\n <div\n className={cn(\n 'transition-all duration-400 ease-in-out',\n 'desktop:w-60 tablet:w-48 laptop:w-[210px] md-tablet:hidden tablet:pt-4 tablet:border-t tablet:border-[#E4E5E6]',\n 'md-tablet:fixed md-tablet:bottom-0 md-tablet:left-0 md-tablet:right-0 md-tablet:top-0 md-tablet:z-[99]',\n closeFilter\n ? 'md-tablet:pointer-events-auto md-tablet:opacity-100'\n : 'md-tablet:pointer-events-none md-tablet:opacity-0'\n )}\n >\n <div\n className={cn(\n 'transition-all duration-400 ease-in-out md-tablet:absolute md-tablet:bottom-0 md-tablet:h-[90vh] md-tablet:w-full',\n closeFilter ? 'md-tablet:translate-y-0' : 'md-tablet:translate-y-[100%]'\n )}\n >\n {MobileFilterList()}\n </div>\n <Drawer open={mobileDrawerVisible} onOpenChange={() => onCloseDrawer(false)}>\n <DrawerContent className=\"px-4 pb-4 max-h-[94.5vh] flex flex-col\">\n <DrawerHeader className=\"sticky top-0 inset-x-0 py-0 mb-6\">\n <DrawerTitle>{drawerText?.drawerTitle || 'Mobile Filter'}</DrawerTitle>\n </DrawerHeader>\n <div className=\"flex-1 overflow-y-auto\">{MobileFilterList()}</div>\n <DrawerFooter className=\"py-0 pt-4\">\n <div className={cn('shelf-flex-button-group', 'lg-desktop:gap-3 flex items-center gap-2')}>\n <Button\n variant=\"secondary\"\n className=\"m-tablet:w-full\"\n onClick={() => {\n onClearFiltered?.()\n onCloseDrawer(false)\n }}\n >\n {drawerText?.secondaryButton || 'Clear'}\n </Button>\n <Button\n variant=\"primary\"\n className=\"m-tablet:w-full\"\n onClick={() => {\n onCloseDrawer(false)\n }}\n >\n {drawerText?.primaryButton || 'Apply'}\n </Button>\n </div>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import AnimatedUL from './component/AnimatedUL'\nimport { cn } from '../../helpers/utils'\nimport type { ChangeEvent } from 'react'\nimport { remove, cloneDeep } from 'es-toolkit'\nimport { useEffect, useRef, useMemo } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { handleFilterOptions } from './component/filtersFun'\nimport { Button, Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerFooter } from '../../components/index.js'\n\ninterface FilterListProps {\n onFilteredChange: (filtered: any, filter: any, opt: any) => void\n onOpenOptions: (openOpt: any[]) => void\n closeFilter: boolean // \u662F\u5426\u5173\u95ED\u7B5B\u9009\u9879\u5C55\u793A\n result: any\n filterPrice: any\n shopifyData?: any\n metafields: any\n filtered: any // \u9009\u62E9\u7684\u7B5B\u9009\u9009\u9879\n openOptions: any[] // \u5C55\u5F00\u7B5B\u9009\u9879\n mobileDrawerVisible: boolean\n onClearFiltered: () => void\n onCloseDrawer: (closeDrawer: boolean) => void\n}\n\nexport default function FilterList(props: FilterListProps) {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const onceRef = useRef<boolean>(false)\n\n const {\n closeFilter,\n filtered,\n result,\n shopifyData,\n filterPrice,\n openOptions,\n metafields,\n mobileDrawerVisible,\n onCloseDrawer,\n onFilteredChange,\n onOpenOptions,\n onClearFiltered,\n } = props\n\n const { drawerText } = shopifyData\n\n const { shop_filters_pair: shopFiltersPair } = metafields\n\n // \u5904\u7406\u7B5B\u9009\u9879\u6570\u636E\n const filtersOptions = useMemo(() => {\n return handleFilterOptions(result, filterPrice, shopFiltersPair)\n }, [\n filterPrice,\n result?.filters,\n shopFiltersPair?.filter_txt?.offers?.name,\n shopFiltersPair?.filter_txt?.offers?.onsale,\n ])\n\n const filtersPair = useMemo(() => {\n if (!filtersOptions?.length) return []\n return filtersOptions?.map?.((filter: any) => {\n return {\n ...filter,\n options: filter?.options?.map?.((opt: any) => {\n return {\n ...opt,\n checked: filtered?.[filter?.value]?.indexOf?.(opt?.value) > -1,\n }\n }),\n }\n })\n }, [filtered, filtersOptions])\n\n const filterChange = (event: ChangeEvent<HTMLInputElement>, filter: any, opt: any, type: string) => {\n const target = event.target\n const clonefiltered = cloneDeep(filtered)\n let current = clonefiltered?.[target?.name] || []\n if (target.checked) {\n type === 'checkbox' ? current.push(target?.value) : (current = [target?.value])\n } else {\n remove(current, (v: string) => v === target.value)\n }\n clonefiltered[target.name] = current\n if (current.length <= 0) {\n Reflect.deleteProperty(clonefiltered, target.name)\n }\n onFilteredChange?.({ ...clonefiltered }, filter, opt)\n }\n\n const handleFilterOpt = (label: string) => {\n let res = openOptions.concat()\n res.map((item: any) => {\n if (item.label === label) return (item.show = !item.show)\n return item\n })\n onOpenOptions?.(res)\n }\n\n const MobileFilterList = () => {\n return (\n filtersPair?.length > 0 && (\n <div className=\"filter-list\">\n {filtersPair.map((filter: any, i: number) => {\n const openOption = openOptions?.find?.((item: any) => item.label == filter.label) as any\n return (\n <div key={`${filter.label}${i}`} className={cn('mb-4 overflow-hidden duration-300 ease-in-out')}>\n <div\n onClick={() => handleFilterOpt(filter.label)}\n className={\n 'relative flex items-center justify-between md-tablet:justify-center text-base font-semibold cursor-pointer leading-none'\n }\n >\n <button className=\"w-full whitespace-nowrap text-left font-medium overflow-hidden box-border\">\n <span className=\"pr-2 font-semibold truncate\">{filter.label}</span>\n </button>\n <div className={`duration-300 ease-in-out ${openOption?.show && 'rotate-180'}`}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" fill=\"none\">\n <path\n d=\"M5.5268 0.668525C5.82138 0.428262 6.25563 0.445208 6.53022 0.719795L11.0302 5.2198C11.3231 5.51269 11.3231 5.98745 11.0302 6.28034C10.7373 6.57324 10.2626 6.57324 9.96967 6.28034L5.99994 2.31062L2.03022 6.28034C1.73732 6.57324 1.26256 6.57324 0.96967 6.28034C0.676777 5.98745 0.676777 5.51269 0.96967 5.2198L5.46967 0.719795L5.5268 0.668525Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n <div className={'transition-all duration-400 ease-in-out overflow-hidden'}>\n <AnimatedUL\n className={'!pt-4 transition-all duration-400 ease-in-out'}\n data-label={filter.label}\n isOpen={!!openOption?.show}\n >\n {filter?.options?.map?.((opt: any, p: number) => {\n const type = filter.type ? (filter.type === 'checkbox' ? 'checkbox' : 'radio') : 'checkbox'\n return (\n <li\n key={opt.value}\n className={cn('w-full mb-4 box-border', {\n ['disabled']: opt?.count <= 0,\n 'mb-0': p >= filter?.options?.length - 1,\n })}\n >\n <label\n className=\"flex items-center overflow-hidden box-border\"\n htmlFor={`${filter.value}-${p}`}\n >\n <input\n type={type}\n name={filter.value}\n value={opt.value}\n id={`${filter.value}-${p}`}\n disabled={opt?.count <= 0}\n checked={opt.checked}\n className={cn(\n 'size-4 cursor-pointer',\n opt.checked\n ? 'accent-[#000000]'\n : `appearance-none bg-transparent border border-[#000000] ${type === 'radio' ? 'rounded-full' : 'rounded-[2px]'}`\n )}\n onChange={e => filterChange(e, filter, opt, type)}\n />\n <p\n className={cn(\n 'pt-0.5 pl-0.5 inline-block cursor-pointer font-semibold leading-none text-base'\n )}\n >\n {opt.label}\n </p>\n </label>\n </li>\n )\n })}\n </AnimatedUL>\n </div>\n </div>\n )\n })}\n </div>\n )\n )\n }\n\n useEffect(() => {\n if (filtersPair?.length && !openOptions?.length && !onceRef.current) {\n onceRef.current = true\n let res = []\n const domList = document?.getElementsByClassName('!pt-4 transition-all duration-400 ease-in-out')\n for (let index = 0; index < domList.length; index++) {\n let data = {} as any\n data.label = domList[index]?.getAttribute('data-label')\n data.show = isMobile ? false : index < 6 ? true : false\n data.height = document?.getElementsByClassName('!pt-4 transition-all duration-400 ease-in-out')?.[\n index\n ]?.clientHeight\n res.push(data)\n }\n onOpenOptions?.(res)\n }\n }, [filtersPair])\n\n useEffect(() => {\n !isMobile && onCloseDrawer?.(false)\n }, [isMobile])\n\n return (\n <div\n className={cn(\n 'transition-all duration-400 ease-in-out',\n 'desktop:w-60 tablet:w-48 laptop:w-[210px] md-tablet:hidden tablet:pt-4 tablet:border-t tablet:border-[#E4E5E6]',\n 'md-tablet:fixed md-tablet:bottom-0 md-tablet:left-0 md-tablet:right-0 md-tablet:top-0 md-tablet:z-[99]',\n closeFilter\n ? 'md-tablet:pointer-events-auto md-tablet:opacity-100'\n : 'md-tablet:pointer-events-none md-tablet:opacity-0'\n )}\n >\n <div\n className={cn(\n 'transition-all duration-400 ease-in-out md-tablet:absolute md-tablet:bottom-0 md-tablet:h-[90vh] md-tablet:w-full',\n closeFilter ? 'md-tablet:translate-y-0' : 'md-tablet:translate-y-[100%]'\n )}\n >\n {MobileFilterList()}\n </div>\n <Drawer open={mobileDrawerVisible} onOpenChange={() => onCloseDrawer(false)}>\n <DrawerContent className=\"px-4 pb-4 max-h-[94.5vh] flex flex-col\">\n <DrawerHeader className=\"sticky top-0 inset-x-0 py-0 mb-6\">\n <DrawerTitle>{drawerText?.drawerTitle || 'Mobile Filter'}</DrawerTitle>\n </DrawerHeader>\n <div className=\"flex-1 overflow-y-auto\">{MobileFilterList()}</div>\n <DrawerFooter className=\"py-0 pt-4\">\n <div className={cn('shelf-flex-button-group', 'lg-desktop:gap-3 flex items-center gap-2')}>\n <Button\n variant=\"secondary\"\n className=\"m-tablet:w-full\"\n onClick={() => {\n onClearFiltered?.()\n onCloseDrawer(false)\n }}\n >\n {drawerText?.secondaryButton || 'Clear'}\n </Button>\n <Button\n variant=\"primary\"\n className=\"m-tablet:w-full\"\n onClick={() => {\n onCloseDrawer(false)\n }}\n >\n {drawerText?.primaryButton || 'Apply'}\n </Button>\n </div>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "AnimatedUL", "cn", "remove", "cloneDeep", "useEffect", "useRef", "useMemo", "useMediaQuery", "handleFilterOptions", "Button", "Drawer", "DrawerContent", "DrawerHeader", "DrawerTitle", "DrawerFooter", "FilterList", "props", "isMobile", "onceRef", "closeFilter", "filtered", "result", "shopifyData", "filterPrice", "openOptions", "metafields", "mobileDrawerVisible", "onCloseDrawer", "onFilteredChange", "onOpenOptions", "onClearFiltered", "drawerText", "shopFiltersPair", "filtersOptions", "filtersPair", "filter", "opt", "filterChange", "event", "type", "target", "clonefiltered", "current", "v", "handleFilterOpt", "label", "res", "item", "MobileFilterList", "i", "openOption", "p", "e", "domList", "index", "data"]
|
|
7
7
|
}
|