@carbon/ibm-products/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var react = require('@carbon/react');
var index = require('../../../../_virtual/index.js');
var useTranslations = require('../../utils/useTranslations.js');
var util = require('../../utils/util.js');
var ConditionBuilderProvider = require('../../ConditionBuilderContext/ConditionBuilderProvider.js');

const ConditionBuilderItemDate = _ref => {
  let {
    conditionState,
    onChange,
    parentRef,
    config
  } = _ref;
  const DatePickerInputRef = React.useRef(null);
  const [startText, endText] = useTranslations.useTranslations(['startText', 'endText']);
  const [dateFromState, setDateFromState] = React.useState();
  const dateFormat = config.dateFormat || 'm/d/Y';
  const {
    conditionBuilderRef
  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
  const datePickerType = conditionState.operator == 'between' || util.checkForMultiSelectOperator(conditionState, config) ? 'range' : 'single';
  React.useEffect(() => {
    if (datePickerType === 'range') {
      setDateFromState(getParsedDate(conditionState.value) ?? undefined);
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  //This method will convert the date string from the condition state to date object based on the dateFormat
  const getParsedDate = dateToParse => {
    // @ts-ignore
    const calendarInstance = DatePickerInputRef?.current?.calendar;
    if (!calendarInstance || !dateToParse) {
      return null;
    }
    const [startDate, endDate] = dateToParse.split(' - ');
    const parsedDates = [];
    if (startDate && startDate !== 'INVALID') {
      parsedDates.push(calendarInstance.parseDate(startDate, dateFormat));
    }
    if (endDate && endDate !== 'INVALID') {
      parsedDates.push(calendarInstance.parseDate(endDate, dateFormat));
    }
    return parsedDates.length ? parsedDates : null;
  };
  const onCloseHandler = (selectedDate, selectedDateStr, instance) => {
    let formattedDate = selectedDateStr;
    if (datePickerType === 'range' && selectedDate.length === 2) {
      formattedDate = `${instance.formatDate(selectedDate[0], dateFormat)} - ${instance.formatDate(selectedDate[1], dateFormat)}`;
    }
    onChange(formattedDate || 'INVALID');
  };

  // this will close the popover on enter key press
  //Note: has to use onKeyPress instead of onKeyDown, since core is stop propagating for onKeydown(fixEventsPlugin.js)
  const onKeyPressHandler = evt => {
    if (evt.key === 'Enter') {
      // @ts-ignore
      const calendarInstance = DatePickerInputRef?.current?.calendar;
      if (calendarInstance) {
        onCloseHandler(calendarInstance.selectedDates, evt.target.value, calendarInstance);
      }
      util.focusThisField(evt, conditionBuilderRef);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: `${util.blockClass}__item-date `
  }, datePickerType == 'single' && /*#__PURE__*/React.createElement(react.DatePicker, _rollupPluginBabelHelpers.extends({}, config, {
    ref: DatePickerInputRef,
    datePickerType: "single",
    value: conditionState.value,
    onClose: onCloseHandler,
    onKeyPress: onKeyPressHandler,
    appendTo: parentRef?.current
  }), /*#__PURE__*/React.createElement(react.DatePickerInput, {
    id: "datePicker",
    placeholder: "dd/mm/yyyy",
    labelText: conditionState.property
  })), datePickerType == 'range' && /*#__PURE__*/React.createElement(react.DatePicker, _rollupPluginBabelHelpers.extends({}, config, {
    ref: DatePickerInputRef,
    datePickerType: datePickerType,
    onClose: onCloseHandler,
    onKeyPress: onKeyPressHandler,
    value: dateFromState,
    appendTo: parentRef?.current
  }), /*#__PURE__*/React.createElement(react.DatePickerInput, {
    id: "datePickerStart",
    placeholder: "dd/mm/yyyy",
    labelText: startText
  }), /*#__PURE__*/React.createElement(react.DatePickerInput, {
    id: "datePickerEnd",
    placeholder: "dd/mm/yyyy",
    labelText: endText
  })));
};
ConditionBuilderItemDate.propTypes = {
  /**
   * current condition object
   */
  conditionState: index.default.object,
  config: index.default.object,
  /**
   * callback to update state oin date change
   */
  onChange: index.default.func,
  /**
   * reference to the popover node
   */
  parentRef: index.default.object
};

exports.ConditionBuilderItemDate = ConditionBuilderItemDate;