@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, 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 { getPositioningMiddleware } from '../../../utils/floating';\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/**\n * An input with a calendar view, used to select a date.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-datepickerwithinput--docs\n * @public\n */\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    const placement = 'bottom-start';\n\n    // the order of middleware is important!\n    // see https://floating-ui.com/docs/arrow#order\n    const middleware = getPositioningMiddleware(placement);\n\n    const { context, refs, floatingStyles } = useFloating<HTMLInputElement>({\n      open,\n      placement,\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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"}