{"version":3,"file":"SelectSort-DkuhPWSM.js","sources":["../../src/scripts/modules/react-modules/Listings/SelectSort.tsx"],"sourcesContent":["import React from 'react';\r\nimport { SortOptions } from './types';\r\nimport {\r\n  Accordion,\r\n  AccordionContent,\r\n  AccordionItem,\r\n  AccordionTrigger\r\n} from '../../../components/react-components/Accordion';\r\ninterface OwnProps {\r\n  options:\r\n    | {\r\n        label: string;\r\n        value: string;\r\n      }[]\r\n    | null;\r\n  sort: string;\r\n  defaultValue: string;\r\n  setSort: (sort: SortOptions) => void;\r\n  isMobile: boolean;\r\n}\r\n\r\nconst SelectSort = ({ options, sort, setSort, isMobile }: OwnProps) => {\r\n  if (!options) {\r\n    return null;\r\n  }\r\n\r\n  if (isMobile) {\r\n    // we return a list of radio buttons withe the same options\r\n    return (\r\n      <div className=\"listing__facet accordion accordion--react\">\r\n        <Accordion type=\"single\" defaultValue={'event-1'} collapsible>\r\n          <AccordionItem value=\"event-1\">\r\n            <AccordionTrigger className={`${isMobile ? 'listing__mobile-facet' : ''}`}>\r\n              Sort By\r\n            </AccordionTrigger>\r\n            <AccordionContent>\r\n              {options.map(({ label, value }) => (\r\n                <div key={value} className=\"listing__sort__radio radio-container\">\r\n                  <input\r\n                    type=\"radio\"\r\n                    id={value}\r\n                    name=\"sort\"\r\n                    value={value}\r\n                    checked={sort === value}\r\n                    onChange={e => setSort(e.target.value as SortOptions)}\r\n                  />\r\n                  <span className=\"checkmark\"></span>\r\n                  <label className={`${sort === value ? 'label-selected' : ''}`} htmlFor={value}>\r\n                    {label}\r\n                  </label>\r\n                </div>\r\n              ))}\r\n            </AccordionContent>\r\n          </AccordionItem>\r\n        </Accordion>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"listing__facet listing__facet--borderless listing__sort\">\r\n      <label htmlFor=\"sort\" hidden>\r\n        {`Sort by`}\r\n      </label>\r\n      <select\r\n        id=\"sort\"\r\n        className=\"listing-input\"\r\n        onChange={e => setSort(e.target.value as SortOptions)}\r\n        value={sort}\r\n      >\r\n        {options.map(({ label, value }) => (\r\n          <option key={value} value={value}>\r\n            {label}\r\n          </option>\r\n        ))}\r\n      </select>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default SelectSort;\r\n"],"names":["SelectSort","options","sort","setSort","isMobile","React","Accordion","AccordionItem","AccordionTrigger","AccordionContent","label","value","e"],"mappings":"sGAqBA,MAAMA,EAAa,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,QAAAC,EAAS,SAAAC,KACvCH,EAIDG,kBAGC,MAAI,CAAA,UAAU,6CACZC,EAAA,cAAAC,EAAA,CAAU,KAAK,SAAS,aAAc,UAAW,YAAW,IAC1DD,EAAA,cAAAE,EAAA,CAAc,MAAM,SACnB,EAAAF,EAAA,cAACG,GAAiB,UAAW,GAAGJ,EAAW,wBAA0B,EAAE,EAAI,EAAA,SAE3E,EACCC,EAAA,cAAAI,EAAA,KACER,EAAQ,IAAI,CAAC,CAAE,MAAAS,EAAO,MAAAC,KACrBN,EAAA,cAAC,OAAI,IAAKM,EAAO,UAAU,sCACzB,EAAAN,EAAA,cAAC,QAAA,CACC,KAAK,QACL,GAAIM,EACJ,KAAK,OACL,MAAAA,EACA,QAAST,IAASS,EAClB,SAAUC,GAAKT,EAAQS,EAAE,OAAO,KAAoB,CAAA,CACtD,kBACC,OAAK,CAAA,UAAU,WAAY,CAAA,EAC5BP,EAAA,cAAC,QAAM,CAAA,UAAW,GAAGH,IAASS,EAAQ,iBAAmB,EAAE,GAAI,QAASA,CACrE,EAAAD,CACH,CACF,CACD,CACH,CACF,CACF,CACF,EAKFL,EAAA,cAAC,MAAI,CAAA,UAAU,yDACb,EAAAA,EAAA,cAAC,QAAM,CAAA,QAAQ,OAAO,OAAM,EACzB,EAAA,SACH,EACAA,EAAA,cAAC,SAAA,CACC,GAAG,OACH,UAAU,gBACV,SAAUO,GAAKT,EAAQS,EAAE,OAAO,KAAoB,EACpD,MAAOV,CAAA,EAEND,EAAQ,IAAI,CAAC,CAAE,MAAAS,EAAO,MAAAC,CACrB,IAAAN,EAAA,cAAC,SAAO,CAAA,IAAKM,EAAO,MAAAA,CAAA,EACjBD,CACH,CACD,CAAA,CAEL,EArDO"}