@mantine/dates/cjs/components/TimePicker/TimeControlsList/TimeControlsList.cjs.map

Calendars, date and time pickers based on Mantine components

{"version":3,"file":"TimeControlsList.cjs","names":["useTimePickerContext","TimeControl","ScrollArea"],"sources":["../../../../src/components/TimePicker/TimeControlsList/TimeControlsList.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { ScrollArea } from '@mantine/core';\nimport { useTimePickerContext } from '../TimePicker.context';\nimport { TimeControl } from './TimeControl';\n\nfunction isElementVisibleInScrollContainer(\n  element: HTMLElement | null | undefined,\n  container: HTMLElement | null | undefined\n) {\n  if (!element || !container) {\n    return false;\n  }\n\n  const elementRect = element.getBoundingClientRect();\n  const containerRect = container.getBoundingClientRect();\n\n  // Check if element is within container's visible bounds\n  const isVisible =\n    elementRect.top >= containerRect.top &&\n    elementRect.bottom <= containerRect.bottom &&\n    elementRect.left >= containerRect.left &&\n    elementRect.right <= containerRect.right;\n\n  return isVisible;\n}\n\nfunction getValuesRange(min: number, max: number, step: number) {\n  const range = [];\n  for (let i = min; i <= max; i += step) {\n    range.push(i);\n  }\n  return range;\n}\n\ninterface TimeControlsListProps {\n  min: number;\n  max: number;\n  step: number;\n  value: number | null;\n  onSelect: (value: number) => void;\n  reversed: boolean | undefined;\n}\n\nexport function TimeControlsList({\n  min,\n  max,\n  step,\n  value,\n  onSelect,\n  reversed,\n}: TimeControlsListProps) {\n  const ctx = useTimePickerContext();\n  const ref = useRef<HTMLDivElement>(null);\n  const range = getValuesRange(min, max, step);\n  const controls = (reversed ? range.reverse() : range).map((control) => (\n    <TimeControl key={control} value={control} active={value === control} onSelect={onSelect} />\n  ));\n\n  useEffect(() => {\n    if (value !== null) {\n      const scrollToValue = () => {\n        const target = ref.current?.querySelector<HTMLButtonElement>(`[data-value=\"${value}\"]`);\n        if (!isElementVisibleInScrollContainer(target, ref.current)) {\n          target?.scrollIntoView({ block: 'nearest' });\n        }\n      };\n      requestAnimationFrame(scrollToValue);\n    }\n  }, [value]);\n\n  return (\n    <ScrollArea\n      h={ctx.maxDropdownContentHeight}\n      type=\"never\"\n      viewportRef={ref}\n      {...ctx.getStyles('scrollarea')}\n      {...ctx.scrollAreaProps}\n    >\n      <div {...ctx.getStyles('controlsList')}>{controls}</div>\n    </ScrollArea>\n  );\n}\n\nTimeControlsList.displayName = '@mantine/dates/TimeControlsList';\n"],"mappings":";;;;;;;AAKA,SAAS,kCACP,SACA,WACA;CACA,IAAI,CAAC,WAAW,CAAC,WACf,OAAO;CAGT,MAAM,cAAc,QAAQ,sBAAsB;CAClD,MAAM,gBAAgB,UAAU,sBAAsB;CAStD,OALE,YAAY,OAAO,cAAc,OACjC,YAAY,UAAU,cAAc,UACpC,YAAY,QAAQ,cAAc,QAClC,YAAY,SAAS,cAAc;AAGvC;AAEA,SAAS,eAAe,KAAa,KAAa,MAAc;CAC9D,MAAM,QAAQ,CAAC;CACf,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,KAAK,MAC/B,MAAM,KAAK,CAAC;CAEd,OAAO;AACT;AAWA,SAAgB,iBAAiB,EAC/B,KACA,KACA,MACA,OACA,UACA,YACwB;CACxB,MAAM,MAAMA,2BAAAA,qBAAqB;CACjC,MAAM,OAAA,GAAA,MAAA,OAAA,CAA6B,IAAI;CACvC,MAAM,QAAQ,eAAe,KAAK,KAAK,IAAI;CAC3C,MAAM,YAAY,WAAW,MAAM,QAAQ,IAAI,MAAA,CAAO,KAAK,YACzD,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;EAA2B,OAAO;EAAS,QAAQ,UAAU;EAAmB;CAAW,GAAzE,OAAyE,CAC5F;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,UAAU,MAAM;GAClB,MAAM,sBAAsB;IAC1B,MAAM,SAAS,IAAI,SAAS,cAAiC,gBAAgB,MAAM,GAAG;IACtF,IAAI,CAAC,kCAAkC,QAAQ,IAAI,OAAO,GACxD,QAAQ,eAAe,EAAE,OAAO,UAAU,CAAC;GAE/C;GACA,sBAAsB,aAAa;EACrC;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,YAAD;EACE,GAAG,IAAI;EACP,MAAK;EACL,aAAa;EACb,GAAI,IAAI,UAAU,YAAY;EAC9B,GAAI,IAAI;YAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,IAAI,UAAU,cAAc;aAAI;EAAc,CAAA;CAC7C,CAAA;AAEhB;AAEA,iBAAiB,cAAc"}