@carbon/ibm-products
Version:
Carbon for IBM Products
104 lines (102 loc) • 4.58 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.
*/
const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_util = require("../../utils/util.js");
const require_ConditionBuilderProvider = require("../../ConditionBuilderContext/ConditionBuilderProvider.js");
const require_useTranslations = require("../../utils/useTranslations.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@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 = (0, react.useRef)(null);
const [startText, endText] = require_useTranslations.useTranslations(["startText", "endText"]);
const [dateFromState, setDateFromState] = (0, react.useState)();
const dateFormat = config?.dateFormat || "m/d/Y";
const { conditionBuilderRef } = (0, react.useContext)(require_ConditionBuilderProvider.ConditionBuilderContext);
const datePickerType = conditionState.operator == "between" || require_util.checkForMultiSelectOperator(conditionState, config) ? "range" : "single";
(0, react.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);
require_util.focusThisField(evt, conditionBuilderRef);
}
};
return /* @__PURE__ */ react.default.createElement("div", { className: `${require_util.blockClass}__item-date ` }, datePickerType == "single" && /* @__PURE__ */ react.default.createElement(_carbon_react.DatePicker, {
...config,
locale: { locale: config.locale ?? "en" },
ref: DatePickerInputRef,
datePickerType: "single",
value: conditionState.value,
onClose: onCloseHandler,
onKeyPress: onKeyPressHandler,
appendTo: parentRef?.current
}, /* @__PURE__ */ react.default.createElement(_carbon_react.DatePickerInput, {
id: "datePicker",
placeholder: "dd/mm/yyyy",
labelText: conditionState.property
})), datePickerType == "range" && /* @__PURE__ */ react.default.createElement(_carbon_react.DatePicker, {
...config,
locale: { locale: config.locale ?? "en" },
ref: DatePickerInputRef,
datePickerType,
onClose: onCloseHandler,
onKeyPress: onKeyPressHandler,
value: dateFromState,
appendTo: parentRef?.current
}, /* @__PURE__ */ react.default.createElement(_carbon_react.DatePickerInput, {
id: "datePickerStart",
placeholder: "dd/mm/yyyy",
labelText: startText
}), /* @__PURE__ */ react.default.createElement(_carbon_react.DatePickerInput, {
id: "datePickerEnd",
placeholder: "dd/mm/yyyy",
labelText: endText
})));
};
ConditionBuilderItemDate.propTypes = {
/**
* current condition object
*/
conditionState: prop_types.default.object,
config: prop_types.default.object,
/**
* callback to update state oin date change
*/
onChange: prop_types.default.func,
/**
* reference to the popover node
*/
parentRef: prop_types.default.object
};
//#endregion
exports.ConditionBuilderItemDate = ConditionBuilderItemDate;