@grafana/ui/dist/esm/components/DateTimePickers/TimeOfDayPicker.mjs.map

Grafana Components Library

{"version":3,"file":"TimeOfDayPicker.mjs","sources":["../../../../src/components/DateTimePickers/TimeOfDayPicker.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { Moment } from 'moment';\nimport RcPicker, { PickerProps } from 'rc-picker';\nimport generateConfig from 'rc-picker/lib/generate/moment';\nimport locale from 'rc-picker/lib/locale/en_US';\n\nimport { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme2, isDateTimeInput } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { inputSizes } from '../Forms/commonStyles';\nimport { FormInputSize } from '../Forms/types';\nimport { Icon } from '../Icon/Icon';\nimport 'rc-picker/assets/index.css';\n\ninterface BaseProps {\n  onChange: (value: DateTime) => void | ((value?: DateTime) => void);\n  value?: DateTime;\n  showHour?: boolean;\n  showSeconds?: boolean;\n  minuteStep?: PickerProps['minuteStep'];\n  size?: FormInputSize;\n  disabled?: boolean;\n  disabledHours?: () => number[];\n  disabledMinutes?: () => number[];\n  disabledSeconds?: () => number[];\n  placeholder?: string;\n  allowEmpty?: boolean;\n}\n\ninterface AllowEmptyProps extends BaseProps {\n  allowEmpty: true;\n  onChange: (value?: DateTime) => void;\n}\n\ninterface NoAllowEmptyProps extends BaseProps {\n  allowEmpty?: false;\n  onChange: (value: DateTime) => void;\n}\n\nexport type Props = AllowEmptyProps | NoAllowEmptyProps;\n\nexport const POPUP_CLASS_NAME = 'time-of-day-picker-panel';\n\nexport const TimeOfDayPicker = ({\n  minuteStep = 1,\n  showHour = true,\n  showSeconds = false,\n  value,\n  size = 'auto',\n  disabled,\n  disabledHours,\n  disabledMinutes,\n  disabledSeconds,\n  placeholder,\n  // note: we can't destructure allowEmpty/onChange here\n  // in order to discriminate the types properly later in the onChange handler\n  ...restProps\n}: Props) => {\n  const styles = useStyles2(getStyles);\n  const allowClear = restProps.allowEmpty ?? false;\n\n  return (\n    <RcPicker<Moment>\n      generateConfig={generateConfig}\n      locale={locale}\n      allowClear={\n        allowClear && {\n          clearIcon: <Icon name=\"times\" className={styles.clearIcon} />,\n        }\n      }\n      className={cx(inputSizes()[size], styles.input)}\n      classNames={{\n        popup: cx(styles.picker, POPUP_CLASS_NAME),\n      }}\n      defaultValue={restProps.allowEmpty ? undefined : dateTimeAsMoment()}\n      disabled={disabled}\n      disabledTime={() => ({\n        disabledHours,\n        disabledMinutes,\n        disabledSeconds,\n      })}\n      format={generateFormat(showHour, showSeconds)}\n      minuteStep={minuteStep}\n      onChange={(value) => {\n        if (isDateTimeInput(value)) {\n          if (restProps.allowEmpty) {\n            return restProps.onChange(value ? dateTime(value) : undefined);\n          } else {\n            return restProps.onChange(dateTime(value));\n          }\n        }\n      }}\n      picker=\"time\"\n      placeholder={placeholder}\n      showNow={false}\n      needConfirm={false}\n      suffixIcon={<Caret wrapperStyle={styles.caretWrapper} />}\n      value={value ? dateTimeAsMoment(value) : value}\n    />\n  );\n};\n\nfunction generateFormat(showHour = true, showSeconds = false) {\n  const maybeHour = showHour ? 'HH:' : '';\n  const maybeSecond = showSeconds ? ':ss' : '';\n  return maybeHour + 'mm' + maybeSecond;\n}\n\ninterface CaretProps {\n  wrapperStyle?: string;\n}\n\nconst Caret = ({ wrapperStyle = '' }: CaretProps) => {\n  return (\n    <div className={wrapperStyle}>\n      <Icon name=\"angle-down\" />\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  const bgColor = theme.components.input.background;\n  const optionBgHover = theme.colors.action.hover;\n  const borderRadius = theme.shape.radius.default;\n  const borderColor = theme.components.input.borderColor;\n\n  return {\n    caretWrapper: css({\n      position: 'relative',\n      top: '50%',\n      transform: 'translateY(-50%)',\n      display: 'inline-block',\n      color: theme.colors.text.secondary,\n    }),\n    clearIcon: css({\n      color: theme.colors.text.secondary,\n\n      '&:hover': {\n        color: theme.colors.text.maxContrast,\n      },\n    }),\n    picker: css({\n      '&.rc-picker-dropdown': {\n        boxShadow: 'none',\n        zIndex: theme.zIndex.portal,\n      },\n      '.rc-picker-time-panel-column': {\n        fontSize: theme.typography.htmlFontSize,\n        backgroundColor: bgColor,\n        color: theme.colors.text.secondary,\n        padding: 'unset',\n        overflowY: 'auto',\n        scrollbarWidth: 'thin',\n        width: theme.spacing(8),\n        li: {\n          paddingRight: theme.spacing(2),\n          width: 'auto',\n          '&.rc-picker-time-panel-cell-selected': {\n            backgroundColor: 'inherit',\n            border: `1px solid ${theme.colors.action.selectedBorder}`,\n            borderRadius,\n            color: theme.colors.text.primary,\n          },\n\n          '&:hover': {\n            background: optionBgHover,\n            color: theme.colors.text.primary,\n          },\n\n          '&.rc-picker-time-panel-cell-disabled': {\n            color: theme.colors.action.disabledText,\n          },\n        },\n\n        '.rc-picker-time-panel-cell-inner': {\n          color: 'inherit',\n        },\n\n        '&:not(:last-of-type)': {\n          borderRight: `1px solid ${borderColor}`,\n        },\n      },\n\n      '.rc-picker-panel': {\n        boxShadow: theme.shadows.z3,\n        backgroundColor: bgColor,\n        borderColor,\n        borderRadius,\n        overflow: 'hidden',\n      },\n    }),\n    input: css({\n      '&.rc-picker-focused': {\n        border: 'none',\n\n        '.rc-picker-input': getFocusStyles(theme),\n      },\n\n      '&.rc-picker-disabled': {\n        '.rc-picker-input': {\n          backgroundColor: theme.colors.action.disabledBackground,\n          color: theme.colors.action.disabledText,\n          border: `1px solid ${theme.colors.action.disabledBackground}`,\n          '&:focus': {\n            boxShadow: 'none',\n          },\n        },\n      },\n\n      '.rc-picker-input': {\n        backgroundColor: bgColor,\n        borderRadius,\n        borderColor,\n        borderStyle: 'solid',\n        borderWidth: '1px',\n        color: theme.colors.text.primary,\n        height: theme.spacing(4),\n        padding: theme.spacing(0, 1),\n\n        input: {\n          color: 'unset',\n          backgroundColor: 'unset',\n          '&:focus': {\n            outline: 'none',\n          },\n\n          '&::placeholder': {\n            color: theme.colors.text.disabled,\n          },\n        },\n      },\n\n      '.rc-picker-clear': {\n        alignItems: 'center',\n        display: 'flex',\n        insetInlineEnd: 'unset',\n        position: 'relative',\n      },\n    }),\n  };\n};\n"],"names":["value"],"mappings":"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"}