{"version":3,"file":"gifPreview.mjs","names":[],"sources":["../../../../../../package/common/klipyPicker/components/gifPreview/gifPreview.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement, UIEvent } from 'react';\nimport InteractableDiv from 'components/common/interactableDiv';\nimport type { GifPreviewProps } from './gifPreview.types';\nimport styles from './gifPreview.module.pcss';\n\nexport default function GifPreview({\n  className,\n  previewItems = [],\n  onSelect,\n  onLoadAdditional,\n}: GifPreviewProps): ReactElement {\n  function handleScroll(event: UIEvent<HTMLDivElement>) {\n    const el = event.currentTarget;\n    const loadAdditionalHeight = el.scrollHeight - el.clientHeight * 1.5;\n    if (el.scrollTop >= loadAdditionalHeight) {\n      onLoadAdditional?.();\n    }\n  }\n\n  return (\n    <>\n      {previewItems.length > 0 && (\n        <div className={cx(styles.gifPreview, className)} onScroll={handleScroll}>\n          {previewItems.map((preview, index) => (\n            <InteractableDiv\n              key={`${preview.id}_${index}`}\n              className={styles.gifPreviewImageContainer}\n              onClick={() => onSelect?.(preview)}\n            >\n              <div\n                className={styles.gifPreviewImage}\n                style={{ backgroundImage: `url(${preview.media_formats.tinygif.url})` }}\n              />\n            </InteractableDiv>\n          ))}\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"sLAMA,SAAwB,EAAW,CACjC,YACA,eAAe,CAAC,EAChB,WACA,oBACgC,CAChC,SAAS,EAAa,EAAgC,CACpD,IAAM,EAAK,EAAM,cACX,EAAuB,EAAG,aAAe,EAAG,aAAe,IAC7D,EAAG,WAAa,GAClB,IAAmB,CAEvB,CAEA,OACE,EAAA,EAAA,CAAA,SACG,EAAa,OAAS,GACrB,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,WAAY,CAAS,EAAG,SAAU,EACzD,SAAA,EAAa,KAAK,EAAS,IAC1B,EAAC,EAAD,CAEE,UAAW,EAAO,yBAClB,YAAe,IAAW,CAAO,EAEjC,SAAA,EAAC,MAAD,CACE,UAAW,EAAO,gBAClB,MAAO,CAAE,gBAAiB,OAAO,EAAQ,cAAc,QAAQ,IAAI,EAAG,CACvE,CAAA,CACc,EARV,GAAG,EAAQ,GAAG,GAAG,GAQP,CAClB,CACE,CAAA,CAEP,CAAA,CAEN"}