@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, useState } from 'react';\n\nimport { GrafanaTheme2, dateTime } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes';\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, 'ref' | '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 = ({\n  value,\n  minDate,\n  maxDate,\n  onChange,\n  closeOnSelect,\n  placeholder = 'Date',\n  ...rest\n}: DatePickerWithInputProps) => {\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({\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  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\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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"}