@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,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,WAAW,GAAI,CAAA;AAAA,MACb,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,aAAe,EAAA,aAAA;AAAA,MACf,cAAgB,EAAA,eAAA;AAAA,MAChB,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,OAAS,EAAA,CAAA;AAAA,MACT,KAAO,EAAA,cAAA;AAAA,MACP,yBAAA,EAA2B,eAAe,KAAK;AAAA,KAChD,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,MAAQ,EAAA,SAAA;AAAA,MACR,IAAM,EAAA,CAAA;AAAA,MACN,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MAEjC,SAAW,EAAA;AAAA,QACT,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,KAAA;AAAA,QAChC,MAAQ,EAAA;AAAA;AACV,KACD,CAAA;AAAA,IACD,eAAe,GAAI,CAAA;AAAA,MACjB,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,QAAA;AAAA,MAEhC,WAAa,EAAA;AAAA,QACX,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,SAAU,CAAA,aAAA;AAAA,QACxC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,QACjC,OAAS,EAAA,KAAA;AAAA,QACT,OAAS,EAAA,OAAA;AAAA,QACT,MAAQ,EAAA,MAAA;AAAA,QACR,QAAU,EAAA,UAAA;AAAA,QACV,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,QACxB,IAAM,EAAA,CAAA;AAAA,QACN,GAAK,EAAA;AAAA;AACP,KACD;AAAA,GACH;AACF,CAAA;AAYa,MAAA,eAAA,GAAkB,KAAY,CAAC,EAAE,OAAO,QAAU,EAAA,QAAA,GAAW,KAAO,EAAA,IAAA,EAAW,KAAA;AAC1F,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EAAA,MAAM,KAAKA,EAAO,EAAA;AAElB,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA,EAAG,SAAW,EAAA,MAAA,CAAO,SACpB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,KAAA;AAAA,QAClB,OAAS,EAAA,QAAA;AAAA,QACT,IAAA;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QACL,WAAU,EAAA,MAAA;AAAA,QACV,QAAU,EAAA,CAAA,CAAA;AAAA,QACV,EAAA;AAAA,QACA,QAAA,EAAU,MAAM,QAAA,CAAS,KAAK;AAAA;AAAA,KAChC;AAAA,oBACC,GAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,KAAA,EAAO,QAAY,IAAA,MAAA,CAAO,aAAa,CAAA,EAAG,OAAS,EAAA,EAAA,EAC5E,gBAAM,OACT,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ,CAAC;AAED,eAAA,CAAgB,WAAc,GAAA,iBAAA;;;;"}