@grafana/ui/dist/cjs/components/DateTimePickers/DatePicker/DatePicker.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var Calendar = require('react-calendar');
var ThemeContext = require('../../../themes/ThemeContext.cjs');
var ClickOutsideWrapper = require('../../ClickOutsideWrapper/ClickOutsideWrapper.cjs');
var Icon = require('../../Icon/Icon.cjs');
var CalendarBody = require('../TimeRangePicker/CalendarBody.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var Calendar__default = /*#__PURE__*/_interopDefaultCompat(Calendar);

"use strict";
const DatePicker = React.memo((props) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const { isOpen, onClose } = props;
  if (!isOpen) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsx(ClickOutsideWrapper.ClickOutsideWrapper, { useCapture: true, includeButtonPress: false, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.modal, "data-testid": "date-picker", children: /* @__PURE__ */ jsxRuntime.jsx(Body, { ...props }) }) });
});
DatePicker.displayName = "DatePicker";
const Body = React.memo(({ value, minDate, maxDate, onChange }) => {
  const styles = ThemeContext.useStyles2(CalendarBody.getBodyStyles);
  return /* @__PURE__ */ jsxRuntime.jsx(
    Calendar__default.default,
    {
      className: styles.body,
      tileClassName: styles.title,
      value: value || /* @__PURE__ */ new Date(),
      minDate,
      maxDate,
      nextLabel: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "angle-right" }),
      prevLabel: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "angle-left" }),
      onChange: (ev) => {
        if (ev && !Array.isArray(ev)) {
          onChange(ev);
        }
      },
      locale: "en"
    }
  );
});
Body.displayName = "Body";
const getStyles = (theme) => {
  return {
    modal: css.css({
      zIndex: theme.zIndex.modal,
      boxShadow: theme.shadows.z3,
      backgroundColor: theme.colors.background.primary,
      border: `1px solid ${theme.colors.border.weak}`,
      borderTopLeftRadius: theme.shape.radius.default,
      borderBottomLeftRadius: theme.shape.radius.default,
      "button:disabled": {
        color: theme.colors.text.disabled
      }
    })
  };
};

exports.DatePicker = DatePicker;
//# sourceMappingURL=DatePicker.cjs.map