@carbon/ibm-products
Version:
Carbon for IBM Products
101 lines (99 loc) • 4.17 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* 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 { blockClass, checkForMultiSelectOperator, focusThisField } from "../../utils/util.js";
import { ConditionBuilderContext } from "../../ConditionBuilderContext/ConditionBuilderProvider.js";
import { useTranslations } from "../../utils/useTranslations.js";
import React, { useContext, useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { DatePicker, DatePickerInput } from "@carbon/react";
//#region src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.tsx
/**
* Copyright IBM Corp. 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const ConditionBuilderItemDate = ({ conditionState, onChange, parentRef, config }) => {
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) ?? void 0);
}, []);
const getParsedDate = (dateToParse) => {
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");
};
const onKeyPressHandler = (evt) => {
if (evt.key === "Enter") {
const calendarInstance = DatePickerInputRef?.current?.calendar;
if (calendarInstance) onCloseHandler(calendarInstance.selectedDates, evt.target.value, calendarInstance);
focusThisField(evt, conditionBuilderRef);
}
};
return /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__item-date ` }, datePickerType == "single" && /* @__PURE__ */ React.createElement(DatePicker, {
...config,
locale: { locale: config.locale ?? "en" },
ref: DatePickerInputRef,
datePickerType: "single",
value: conditionState.value,
onClose: onCloseHandler,
onKeyPress: onKeyPressHandler,
appendTo: parentRef?.current
}, /* @__PURE__ */ React.createElement(DatePickerInput, {
id: "datePicker",
placeholder: "dd/mm/yyyy",
labelText: conditionState.property
})), datePickerType == "range" && /* @__PURE__ */ React.createElement(DatePicker, {
...config,
locale: { locale: config.locale ?? "en" },
ref: DatePickerInputRef,
datePickerType,
onClose: onCloseHandler,
onKeyPress: onKeyPressHandler,
value: dateFromState,
appendTo: parentRef?.current
}, /* @__PURE__ */ React.createElement(DatePickerInput, {
id: "datePickerStart",
placeholder: "dd/mm/yyyy",
labelText: startText
}), /* @__PURE__ */ React.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
};
//#endregion
export { ConditionBuilderItemDate };