@carbon/ibm-products
Version:
Carbon for IBM Products
123 lines (116 loc) • 4.61 kB
JavaScript
/**
* 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.
*/
import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useRef, useState, useContext, useEffect } from 'react';
import { DatePicker, DatePickerInput } from '@carbon/react';
import PropTypes from '../../../../_virtual/index.js';
import { useTranslations } from '../../utils/useTranslations.js';
import { checkForMultiSelectOperator, blockClass, focusThisField } from '../../utils/util.js';
import { ConditionBuilderContext } from '../../ConditionBuilderContext/ConditionBuilderProvider.js';
const ConditionBuilderItemDate = _ref => {
let {
conditionState,
onChange,
parentRef,
config
} = _ref;
const DatePickerInputRef = useRef(null);
const [startText, endText] = useTranslations(['startText', 'endText']);
const [dateFromState, setDateFromState] = useState();
const dateFormat = config.dateFormat || 'm/d/Y';
const {
conditionBuilderRef
} = useContext(ConditionBuilderContext);
const datePickerType = conditionState.operator == 'between' || checkForMultiSelectOperator(conditionState, config) ? 'range' : 'single';
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);
}
focusThisField(evt, conditionBuilderRef);
}
};
return /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__item-date `
}, datePickerType == 'single' && /*#__PURE__*/React__default.createElement(DatePicker, _extends({}, config, {
ref: DatePickerInputRef,
datePickerType: "single",
value: conditionState.value,
onClose: onCloseHandler,
onKeyPress: onKeyPressHandler,
appendTo: parentRef?.current
}), /*#__PURE__*/React__default.createElement(DatePickerInput, {
id: "datePicker",
placeholder: "dd/mm/yyyy",
labelText: conditionState.property
})), datePickerType == 'range' && /*#__PURE__*/React__default.createElement(DatePicker, _extends({}, config, {
ref: DatePickerInputRef,
datePickerType: datePickerType,
onClose: onCloseHandler,
onKeyPress: onKeyPressHandler,
value: dateFromState,
appendTo: parentRef?.current
}), /*#__PURE__*/React__default.createElement(DatePickerInput, {
id: "datePickerStart",
placeholder: "dd/mm/yyyy",
labelText: startText
}), /*#__PURE__*/React__default.createElement(DatePickerInput, {
id: "datePickerEnd",
placeholder: "dd/mm/yyyy",
labelText: endText
})));
};
ConditionBuilderItemDate.propTypes = {
/**
* current condition object
*/
conditionState: PropTypes.object,
config: PropTypes.object,
/**
* callback to update state oin date change
*/
onChange: PropTypes.func,
/**
* reference to the popover node
*/
parentRef: PropTypes.object
};
export { ConditionBuilderItemDate };