@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  id?: string;\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  id,\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      id={id}\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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"}