@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
47 lines (44 loc) • 4.05 kB
JavaScript
import React from 'react';
import { DatePicker, DatePickerInput } from '@carbon/react';
import { Information } from '@carbon/react/icons';
import cx from 'classnames';
import TooltipHover from '../TooltipHover/TooltipHover.js';
import { DATE_TYPES } from '../../constants/DataDrivenInputTypes.js';
import { prefix } from '../../internal/settings.js';
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
const DateInputComponent = React.forwardRef(function DateInputComponent({ id, dateFormat, datePickerProps = {}, disabled, helperText, invalid, label, labelText, max, min, onCalendarChange, onChange, readOnly, tooltipClassName = `${prefix}--bmrg-date-input__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = DATE_TYPES.DATE, value, ...dateInputProps }, ref) {
const labelValue = label || labelText;
const dateInputHelperId = !helperText ? undefined : `date-input-helper-text-${id}`;
const helperClasses = cx(`${prefix}--form__helper-text`, {
[`${prefix}--form__helper-text--disabled`]: disabled,
});
if (type === DATE_TYPES.DATE_RANGE) {
/** Add support for csv strings */
const finalValue = typeof value === "string" ? value.split(",") : value;
return (React.createElement("div", { className: `${prefix}--bmrg-date-input` },
labelValue && (React.createElement("div", { className: `${prefix}--label ${prefix}--bmrg-date-input__label` },
React.createElement("div", null, labelValue),
tooltipContent && (React.createElement("div", { className: tooltipClassName },
React.createElement(TooltipHover, { tooltipContent: tooltipContent, ...tooltipProps },
React.createElement(Information, { size: 16, fill: "currentColor" })))))),
React.createElement(DatePicker, { key: id, allowInput: !readOnly, className: `${prefix}--bmrg-date-picker`, dateFormat: dateFormat, datePickerType: "range", maxDate: max, minDate: min, onChange: typeof onCalendarChange === "function" ? onCalendarChange : onChange, value: finalValue, ...datePickerProps },
React.createElement(DatePickerInput, { id: `${id}-start`, autoComplete: "off", disabled: disabled || readOnly, invalid: invalid, labelText: "", readOnly: readOnly, ref: ref, style: { width: "100%" }, pattern: ".*", ...dateInputProps }),
React.createElement(DatePickerInput, { id: `${id}-end`, autoComplete: "off", disabled: disabled || readOnly, invalid: invalid, labelText: "", readOnly: readOnly, ref: ref, style: { width: "100%" }, pattern: ".*", ...dateInputProps })),
helperText && !invalid && (React.createElement("div", { id: dateInputHelperId, className: helperClasses }, helperText))));
}
else {
return (React.createElement("div", { className: `${prefix}--bmrg-date-input` },
React.createElement(DatePicker, { key: id, allowInput: !readOnly, className: `${prefix}--bmrg-date-picker`, dateFormat: dateFormat, datePickerType: "single", maxDate: max, minDate: min, onChange: onCalendarChange, value: value, ...datePickerProps },
React.createElement(DatePickerInput, { id: id, disabled: disabled || readOnly, invalid: invalid, onChange: onChange, labelText: labelValue && (React.createElement("div", { className: `${prefix}--bmrg-date-input__label` },
React.createElement("div", null, labelValue),
tooltipContent && (React.createElement("div", { className: tooltipClassName },
React.createElement(TooltipHover, { tooltipContent: tooltipContent, ...tooltipProps },
React.createElement(Information, { size: 16, fill: "currentColor" })))))), readOnly: readOnly, ref: ref, style: { width: "100%" }, pattern: ".*", ...dateInputProps })),
helperText && !invalid && (React.createElement("div", { id: dateInputHelperId, className: helperClasses }, helperText))));
}
});
export { DateInputComponent as default };