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

Grafana Components Library

{"version":3,"file":"DatePickerWithInput.mjs","sources":["../../../../../src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { autoUpdate, flip, shift, useClick, useDismiss, useFloating, useInteractions } from '@floating-ui/react';\nimport { ChangeEvent, forwardRef, useImperativeHandle, useState } from 'react';\n\nimport { GrafanaTheme2, dateTime } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Props as InputProps, Input } from '../../Input/Input';\nimport { DatePicker } from '../DatePicker/DatePicker';\n\nexport const formatDate = (date: Date | string) => dateTime(date).format('L');\n\n/** @public */\nexport interface DatePickerWithInputProps extends Omit<InputProps, 'value' | 'onChange'> {\n  /** Value selected by the DatePicker */\n  value?: Date | string;\n  /** The minimum date the value can be set to */\n  minDate?: Date;\n  /** The maximum date the value can be set to */\n  maxDate?: Date;\n  /** Handles changes when a new date is selected */\n  onChange: (value: Date | string) => void;\n  /** Hide the calendar when date is selected */\n  closeOnSelect?: boolean;\n  /** Text that appears when the input has no text */\n  placeholder?: string;\n}\n\n/** @public */\nexport const DatePickerWithInput = forwardRef<HTMLInputElement, DatePickerWithInputProps>(\n  ({ value, minDate, maxDate, onChange, closeOnSelect, placeholder = 'Date', ...rest }, ref) => {\n    const [open, setOpen] = useState(false);\n    const styles = useStyles2(getStyles);\n\n    // the order of middleware is important!\n    // see https://floating-ui.com/docs/arrow#order\n    const middleware = [\n      flip({\n        // see https://floating-ui.com/docs/flip#combining-with-shift\n        crossAxis: false,\n        boundary: document.body,\n      }),\n      shift(),\n    ];\n\n    const { context, refs, floatingStyles } = useFloating<HTMLInputElement>({\n      open,\n      placement: 'bottom-start',\n      onOpenChange: setOpen,\n      middleware,\n      whileElementsMounted: autoUpdate,\n      strategy: 'fixed',\n    });\n\n    const click = useClick(context);\n    const dismiss = useDismiss(context);\n    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => refs.domReference.current, [\n      refs.domReference,\n    ]);\n\n    return (\n      <div className={styles.container}>\n        <Input\n          ref={refs.setReference}\n          type=\"text\"\n          autoComplete={'off'}\n          placeholder={placeholder}\n          value={value ? formatDate(value) : value}\n          onChange={(ev: ChangeEvent<HTMLInputElement>) => {\n            // Allow resetting the date\n            if (ev.target.value === '') {\n              onChange('');\n            }\n          }}\n          className={styles.input}\n          {...rest}\n          {...getReferenceProps()}\n        />\n        <div className={styles.popover} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n          <DatePicker\n            isOpen={open}\n            value={value && typeof value !== 'string' ? value : dateTime().toDate()}\n            minDate={minDate}\n            maxDate={maxDate}\n            onChange={(ev) => {\n              onChange(ev);\n              if (closeOnSelect) {\n                setOpen(false);\n              }\n            }}\n            onClose={() => setOpen(false)}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nDatePickerWithInput.displayName = 'DatePickerWithInput';\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    container: css({\n      position: 'relative',\n    }),\n    input: css({\n      /* hides the native Calendar picker icon given when using type=date */\n      \"input[type='date']::-webkit-inner-spin-button, input[type='date']::-webkit-calendar-picker-indicator\": {\n        display: 'none',\n        WebkitAppearance: 'none',\n      },\n    }),\n    popover: css({\n      zIndex: theme.zIndex.tooltip,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}