@razorpay/blade/build/lib/web/production/components/DatePicker/DateInput.web.js

The Design System that powers Razorpay

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { useDatesContext } from '@mantine/dates';
import { getFormattedDate } from './utils.js';
import '../Box/BaseBox/index.js';
import '../Icons/index.js';
import '../Input/BaseInput/index.js';
import '../../tokens/global/index.js';
import '../../utils/index.js';
import { useIsMobile } from '../../utils/useIsMobile.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { BaseInput } from '../Input/BaseInput/BaseInput.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { size } from '../../tokens/global/size.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import CalendarIcon from '../Icons/CalendarIcon/CalendarIcon.js';
import ArrowRightIcon from '../Icons/ArrowRightIcon/ArrowRightIcon.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';

var _excluded = ["value", "name", "isRequired", "isDisabled"],
  _excluded2 = ["selectionType", "referenceProps", "inputRef", "date", "label", "labelPosition", "autoFocus", "name", "size", "necessityIndicator", "successText", "errorText", "helpText", "format", "placeholder"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _DateInput = function _DateInput(props, ref) {
  var _props$label;
  return /*#__PURE__*/jsx(BaseInput, _objectSpread(_objectSpread({}, props), {}, {
    ref: ref,
    as: "button",
    textAlign: "left",
    hideLabelText: ((_props$label = props.label) === null || _props$label === void 0 ? void 0 : _props$label.length) === 0,
    autoCompleteSuggestionType: "none",
    hasPopup: "dialog",
    onClick: function onClick(e) {
      var _props$onClick;
      if (props.isDisabled) {
        return;
      }
      (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, e);
    },
    onKeyDown: function onKeyDown(_ref) {
      var _props$onKeyDown;
      var event = _ref.event;
      // @ts-expect-error
      (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
    }
  }));
};
var DateInput = /*#__PURE__*/React__default.forwardRef(_DateInput);
var HiddenInput = function HiddenInput(_ref2) {
  var value = _ref2.value,
    name = _ref2.name,
    isRequired = _ref2.isRequired,
    isDisabled = _ref2.isDisabled,
    rest = _objectWithoutProperties(_ref2, _excluded);
  if (isReactNative()) return /*#__PURE__*/jsx(Fragment, {});
  return /*#__PURE__*/jsx("input", _objectSpread({
    hidden: true,
    name: name,
    value: value,
    required: isRequired,
    disabled: isDisabled,
    readOnly: true
  }, makeAnalyticsAttribute(rest)));
};
var iconVerticalMargin = {
  medium: size[14],
  large: size[24]
};
var LEFT_LABEL_WIDTH = 132;
var _DatePickerInput = function _DatePickerInput(_ref3, ref) {
  var selectionType = _ref3.selectionType,
    referenceProps = _ref3.referenceProps,
    inputRef = _ref3.inputRef,
    date = _ref3.date,
    label = _ref3.label,
    labelPosition = _ref3.labelPosition,
    autoFocus = _ref3.autoFocus,
    name = _ref3.name,
    _ref3$size = _ref3.size,
    size$1 = _ref3$size === void 0 ? 'medium' : _ref3$size,
    necessityIndicator = _ref3.necessityIndicator,
    successText = _ref3.successText,
    errorText = _ref3.errorText,
    helpText = _ref3.helpText,
    format = _ref3.format,
    placeholder = _ref3.placeholder,
    props = _objectWithoutProperties(_ref3, _excluded2);
  var isMobile = useIsMobile();
  var isLarge = size$1 === 'large';
  var hasLabel = typeof label === 'string' ? Boolean(label) : Boolean((label === null || label === void 0 ? void 0 : label.start) || (label === null || label === void 0 ? void 0 : label.end));
  var isLabelPositionLeft = labelPosition === 'left';
  var isLabelPositionTop = labelPosition === 'top';
  var isLabelPositionVisuallyTop = hasLabel && (isLabelPositionTop || isMobile);
  var _useDatesContext = useDatesContext(),
    locale = _useDatesContext.locale;
  if (selectionType == 'single') {
    var dateValue = getFormattedDate({
      date: date,
      format: format,
      labelSeparator: '-',
      locale: locale,
      type: 'default'
    });
    return /*#__PURE__*/jsxs(BaseBox, {
      width: "100%",
      children: [/*#__PURE__*/jsx(HiddenInput, {
        value: dateValue,
        name: name,
        isRequired: props.isRequired,
        isDisabled: props.isDisabled
      }), /*#__PURE__*/jsx(DateInput, _objectSpread(_objectSpread({
        ref: ref,
        id: "start-date",
        labelPosition: labelPosition,
        label: label,
        placeholder: placeholder || format,
        popupId: referenceProps['aria-controls'],
        isPopupExpanded: referenceProps['aria-expanded'],
        size: size$1,
        autoFocus: autoFocus,
        value: dateValue,
        componentName: "DatePickerInput",
        necessityIndicator: necessityIndicator,
        successText: successText,
        errorText: errorText,
        helpText: helpText
      }, props), referenceProps))]
    });
  }
  if (selectionType == 'range') {
    var shouldRenderEndLabel = function shouldRenderEndLabel() {
      var finalLabel = '';
      var labelEnd = isLabelPositionLeft ? undefined : label === null || label === void 0 ? void 0 : label.end;
      if (isLabelPositionVisuallyTop && labelEnd === undefined) {
        // Empty space, nbsp;
        finalLabel = "\xA0";
      } else if (isLabelPositionLeft) {
        finalLabel = undefined;
      } else {
        finalLabel = label === null || label === void 0 ? void 0 : label.end;
      }
      return finalLabel;
    };
    var startValue = getFormattedDate({
      type: 'default',
      date: date[0],
      format: format,
      labelSeparator: '-',
      locale: locale
    });
    var endValue = getFormattedDate({
      type: 'default',
      date: date[1],
      format: format,
      labelSeparator: '-',
      locale: locale
    });
    return /*#__PURE__*/jsxs(BaseBox, {
      width: "100%",
      display: "flex",
      flexDirection: "row",
      gap: "spacing.4",
      alignItems: "flex-start",
      ref: ref,
      children: [/*#__PURE__*/jsxs(BaseBox, {
        flex: 1,
        flexBasis: isLabelPositionLeft ? LEFT_LABEL_WIDTH : '0px',
        children: [/*#__PURE__*/jsx(HiddenInput, {
          value: startValue,
          name: name === null || name === void 0 ? void 0 : name.start,
          isRequired: props.isRequired,
          isDisabled: props.isDisabled
        }), /*#__PURE__*/jsx(DateInput, _objectSpread(_objectSpread({
          setInputWrapperRef: function setInputWrapperRef(node) {
            return inputRef.current = node;
          },
          id: "start-date",
          leadingIcon: CalendarIcon,
          label: label === null || label === void 0 ? void 0 : label.start,
          labelPosition: labelPosition,
          placeholder: placeholder,
          popupId: referenceProps['aria-controls'],
          isPopupExpanded: referenceProps['aria-expanded'],
          size: size$1,
          autoFocus: autoFocus,
          value: startValue,
          componentName: "DatePickerInputStart",
          necessityIndicator: necessityIndicator,
          successText: successText === null || successText === void 0 ? void 0 : successText.start,
          errorText: errorText === null || errorText === void 0 ? void 0 : errorText.start,
          helpText: helpText === null || helpText === void 0 ? void 0 : helpText.start
        }, props), referenceProps))]
      }), /*#__PURE__*/jsx(BaseBox, {
        flexShrink: 0,
        alignSelf: "start",
        children: /*#__PURE__*/jsx(ArrowRightIcon, {
          size: "medium",
          marginTop:
          // Hacky layouting because the we cannot put this inside the internal layout of BaseInput.
          hasLabel && (!isLabelPositionLeft || isMobile) ? "calc(".concat(makeSize(iconVerticalMargin[size$1]), " + ").concat(makeSize(isLarge ? size[20] : size[15]), ")") : makeSize(iconVerticalMargin[size$1])
        })
      }), /*#__PURE__*/jsxs(BaseBox, {
        flex: 1,
        children: [/*#__PURE__*/jsx(HiddenInput, _objectSpread({
          value: endValue,
          name: name === null || name === void 0 ? void 0 : name.end,
          isRequired: props.isRequired,
          isDisabled: props.isDisabled
        }, makeAnalyticsAttribute(props))), /*#__PURE__*/jsx(DateInput, _objectSpread(_objectSpread({
          id: "end-date",
          placeholder: placeholder,
          leadingIcon: CalendarIcon,
          label: shouldRenderEndLabel(),
          labelPosition: isLabelPositionLeft ? undefined : labelPosition,
          popupId: referenceProps['aria-controls'],
          isPopupExpanded: referenceProps['aria-expanded'],
          size: size$1,
          value: endValue,
          componentName: "DatePickerInputEnd",
          successText: successText === null || successText === void 0 ? void 0 : successText.end,
          errorText: errorText === null || errorText === void 0 ? void 0 : errorText.end,
          helpText: helpText === null || helpText === void 0 ? void 0 : helpText.end
        }, props), referenceProps))]
      })]
    });
  }
  return /*#__PURE__*/jsx(Fragment, {});
};
var DatePickerInput = /*#__PURE__*/React__default.forwardRef(_DatePickerInput);

export { DatePickerInput };
//# sourceMappingURL=DateInput.web.js.map