@grafana/ui/dist/esm/components/DateTimePickers/TimeRangePicker/TimeRangeOption.mjs.map

Grafana Components Library

{"version":3,"file":"TimeRangeOption.mjs","sources":["../../../../../src/components/DateTimePickers/TimeRangePicker/TimeRangeOption.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { memo } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { GrafanaTheme2, TimeOption } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { getFocusStyles } from '../../../themes/mixins';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css({\n      display: 'flex',\n      alignItems: 'center',\n      flexDirection: 'row-reverse',\n      justifyContent: 'space-between',\n      position: 'relative',\n    }),\n    radio: css({\n      opacity: 0,\n      width: '0 !important',\n      '&:focus-visible + label': getFocusStyles(theme),\n    }),\n    label: css({\n      cursor: 'pointer',\n      flex: 1,\n      padding: theme.spacing(1),\n      borderRadius: theme.shape.radius.default,\n\n      '&:hover': {\n        background: theme.colors.action.hover,\n        cursor: 'pointer',\n      },\n    }),\n    labelSelected: css({\n      background: theme.colors.action.selected,\n\n      '&::before': {\n        backgroundImage: theme.colors.gradients.brandVertical,\n        borderRadius: theme.shape.radius.default,\n        content: '\" \"',\n        display: 'block',\n        height: '100%',\n        position: 'absolute',\n        width: theme.spacing(0.5),\n        left: 0,\n        top: 0,\n      },\n    }),\n  };\n};\n\ninterface Props {\n  value: TimeOption;\n  selected?: boolean;\n  onSelect: (option: TimeOption) => void;\n  /**\n   *  Input identifier. This should be the same for all options in a group.\n   */\n  name: string;\n}\n\nexport const TimeRangeOption = memo<Props>(({ value, onSelect, selected = false, name }) => {\n  const styles = useStyles2(getStyles);\n  // In case there are more of the same timerange in the list\n  const id = uuidv4();\n\n  return (\n    <li className={styles.container}>\n      <input\n        className={styles.radio}\n        checked={selected}\n        name={name}\n        type=\"checkbox\"\n        data-role=\"item\"\n        tabIndex={-1}\n        id={id}\n        onChange={() => onSelect(value)}\n      />\n      <label className={cx(styles.label, selected && styles.labelSelected)} htmlFor={id}>\n        {value.display}\n      </label>\n    </li>\n  );\n});\n\nTimeRangeOption.displayName = 'TimeRangeOption';\n"],"names":["uuidv4"],"mappings":";;;;;;;;AASA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,EAAA,OAAO;AAAA,IACL,WAAW,GAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,aAAA,EAAe,aAAA;AAAA,MACf,cAAA,EAAgB,eAAA;AAAA,MAChB,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,OAAA,EAAS,CAAA;AAAA,MACT,KAAA,EAAO,cAAA;AAAA,MACP,yBAAA,EAA2B,eAAe,KAAK;AAAA,KAChD,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAM,CAAA;AAAA,MACN,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAA;AAAA,MAEjC,SAAA,EAAW;AAAA,QACT,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,KAAA;AAAA,QAChC,MAAA,EAAQ;AAAA;AACV,KACD,CAAA;AAAA,IACD,eAAe,GAAA,CAAI;AAAA,MACjB,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,QAAA;AAAA,MAEhC,WAAA,EAAa;AAAA,QACX,eAAA,EAAiB,KAAA,CAAM,MAAA,CAAO,SAAA,CAAU,aAAA;AAAA,QACxC,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,OAAA;AAAA,QACjC,OAAA,EAAS,KAAA;AAAA,QACT,OAAA,EAAS,OAAA;AAAA,QACT,MAAA,EAAQ,MAAA;AAAA,QACR,QAAA,EAAU,UAAA;AAAA,QACV,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,QACxB,IAAA,EAAM,CAAA;AAAA,QACN,GAAA,EAAK;AAAA;AACP,KACD;AAAA,GACH;AACF,CAAA;AAYO,MAAM,eAAA,GAAkB,KAAY,CAAC,EAAE,OAAO,QAAA,EAAU,QAAA,GAAW,KAAA,EAAO,IAAA,EAAK,KAAM;AAC1F,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,KAAKA,EAAA,EAAO;AAElB,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,MAAA,CAAO,SAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAA,CAAO,KAAA;AAAA,QAClB,OAAA,EAAS,QAAA;AAAA,QACT,IAAA;AAAA,QACA,IAAA,EAAK,UAAA;AAAA,QACL,WAAA,EAAU,MAAA;AAAA,QACV,QAAA,EAAU,CAAA,CAAA;AAAA,QACV,EAAA;AAAA,QACA,QAAA,EAAU,MAAM,QAAA,CAAS,KAAK;AAAA;AAAA,KAChC;AAAA,oBACA,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,KAAA,EAAO,QAAA,IAAY,MAAA,CAAO,aAAa,CAAA,EAAG,OAAA,EAAS,EAAA,EAC5E,gBAAM,OAAA,EACT;AAAA,GAAA,EACF,CAAA;AAEJ,CAAC;AAED,eAAA,CAAgB,WAAA,GAAc,iBAAA;;;;"}