@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
277 lines (268 loc) • 8.63 kB
JavaScript
/**
* MSKCC 2021, 2024
*/
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import '@carbon/icons-react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React__default, { useContext } from 'react';
import { usePrefix } from '../../internal/usePrefix.js';
import '../FluidForm/FluidForm.js';
import { FormContext } from '../FluidForm/FormContext.js';
import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
var _span, _span2;
const getInstanceId = setupGetInstanceId();
const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
const {
// datePickerType,
autoComplete = 'off',
disableWarningIcon,
disabled = false,
helperText,
hideLabel,
id,
invalid = false,
invalidText,
labelText,
onClick = () => {},
onChange = () => {},
pattern = '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
placeholder,
size = 'md',
type = 'text',
warn,
warnText,
...rest
} = props;
const prefix = usePrefix();
const {
isFluid
} = useContext(FormContext);
const datePickerInputInstanceId = getInstanceId();
const [date, setDate] = React__default.useState('');
const handleDateChange = event => {
// Get the input value
let inputDate = event.target.value;
// Remove non-numeric characters
inputDate = inputDate.replace(/\D/g, '');
// Format the date with slashes
let formattedDate = '';
if (inputDate.length <= 2) {
// Format as mm
formattedDate = inputDate;
} else if (inputDate.length <= 4) {
// Format as mm/dd
formattedDate = `${inputDate.slice(0, 2)}/${inputDate.slice(2)}`;
} else {
// Format as mm/dd/yyyy
formattedDate = `${inputDate.slice(0, 2)}/${inputDate.slice(2, 4)}/${inputDate.slice(4, 8)}`;
}
// Call the provided onChange prop
if (onChange) {
onChange({
...event,
target: {
...event.target,
value: formattedDate
}
});
}
// Update the internal state
setDate(formattedDate);
};
const datePickerInputProps = {
id,
name: id,
onChange: event => {
if (!disabled) {
handleDateChange(event);
}
},
onClick: event => {
if (!disabled) {
onClick(event);
}
},
pattern,
placeholder,
type
};
const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
[`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
[`${prefix}--date-picker-input__wrapper--warn`]: warn
});
const labelClasses = cx(`${prefix}--label`, {
[`${prefix}--visually-hidden`]: hideLabel,
[`${prefix}--label--disabled`]: disabled,
[`${prefix}--label--readonly`]: rest.readOnly
});
const helperTextClasses = cx(`${prefix}--form__helper-text`, {
[`${prefix}--form__helper-text--disabled`]: disabled
});
const inputClasses = cx(`${prefix}--date-picker__input`, {
[`${prefix}--date-picker__input--${size}`]: size,
[`${prefix}--date-picker__input--invalid`]: invalid,
[`${prefix}--date-picker__input--warn`]: warn
});
const containerClasses = cx(`${prefix}--date-picker-container`, {
[`${prefix}--date-picker--nolabel`]: !labelText,
[`${prefix}--date-picker--fluid--invalid`]: isFluid && invalid,
[`${prefix}--date-picker--fluid--warn`]: isFluid && warn
});
const datePickerInputHelperId = !helperText ? undefined : `detepicker-input-helper-text-${datePickerInputInstanceId}`;
const inputProps = {
...rest,
...datePickerInputProps,
className: inputClasses,
disabled,
ref,
value: date,
['aria-describedby']: helperText ? datePickerInputHelperId : undefined
};
if (invalid) {
inputProps['data-invalid'] = true;
}
const input = /*#__PURE__*/React__default.createElement("input", _extends({
autoComplete: autoComplete
}, autoComplete !== 'off' && {
'aria-autocomplete': 'list'
}, inputProps));
return /*#__PURE__*/React__default.createElement("div", {
className: containerClasses
}, labelText && /*#__PURE__*/React__default.createElement("label", {
htmlFor: id,
className: labelClasses
}, labelText), /*#__PURE__*/React__default.createElement("div", {
className: wrapperClasses
}, input), invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
className: `${prefix}--date-picker__divider`
}), /*#__PURE__*/React__default.createElement("div", {
className: `msk-validation-msg`
}, _span || (_span = /*#__PURE__*/React__default.createElement("span", {
className: `msk-validation-msg--icon msk-icon`
}, "error")), /*#__PURE__*/React__default.createElement("div", {
className: `${prefix}--form-requirement`
}, invalidText))), warn && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
className: `${prefix}--date-picker__divider`
}), /*#__PURE__*/React__default.createElement("div", {
className: `msk-validation-msg`
}, !disableWarningIcon && (_span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", {
className: `msk-validation-msg--icon msk-validation-msg--icon--warning msk-icon`
}, "warning"))), /*#__PURE__*/React__default.createElement("div", {
className: `${prefix}--form-requirement`
}, warnText))), helperText && /*#__PURE__*/React__default.createElement("div", {
id: datePickerInputHelperId,
className: helperTextClasses
}, helperText));
});
DatePickerInput.propTypes = {
/**
* value of the autoComplete
*/
autoComplete: PropTypes.string,
/**
* disable warning icon*/
disableWarningIcon: PropTypes.bool,
/**
* The type of the date picker:
*
* * `simple` - Without calendar dropdown.
* * `single` - With calendar dropdown and single date.
* * `range` - With calendar dropdown and a date range.
*/
// datePickerType: PropTypes.oneOf(['simple', 'single', 'range']),
/**
* Specify whether or not the input should be disabled
*/
disabled: PropTypes.bool,
/**
* Provide text that is used alongside the control label for additional help
*/
helperText: PropTypes.node,
/**
* Specify if the label should be hidden
*/
hideLabel: PropTypes.bool,
/**
* Specify an id that uniquely identifies the `<input>`
*/
id: PropTypes.string.isRequired,
/**
* Specify whether or not the input should be invalid
*/
invalid: PropTypes.bool,
/**
* Specify the text to be rendered when the input is invalid
*/
invalidText: PropTypes.node,
/**
* Provide the text that will be read by a screen reader when visiting this
* control
*/
labelText: PropTypes.node.isRequired,
/**
* Specify an `onChange` handler that is called whenever a change in the
* input field has occurred
*/
onChange: PropTypes.func,
/**
* Provide a function to be called when the input field is clicked
*/
onClick: PropTypes.func,
/**
* Provide a regular expression that the input value must match
*/
pattern: (props, propName, componentName) => {
if (props[propName] === undefined) {
return;
}
try {
new RegExp(props[propName]);
} catch (e) {
return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
}
},
/**
* Specify the placeholder text
*/
placeholder: PropTypes.string,
/**
* whether the DatePicker is to be readOnly
*/
readOnly: PropTypes.bool,
/**
* Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
*/
size: PropTypes.oneOf(['sm', 'md', 'lg']),
/**
* Specify the type of the `<input>`
*/
type: PropTypes.string,
/**
* Specify whether the control is currently in warning state
*/
warn: PropTypes.bool,
/**
* Provide the text that is displayed when the control is in warning state
*/
warnText: PropTypes.node
};
({
/**
* The type of the date picker:
*
* * `simple` - Without calendar dropdown.
* * `single` - With calendar dropdown and single date.
* * `range` - With calendar dropdown and a date range.
*/
datePickerType: PropTypes.oneOf(['simple', 'single', 'range']),
/**
* Specify whether or not the input should be invalid
*/
invalid: PropTypes.bool,
/**
* Specify whether the control is currently in warning state
*/
warn: PropTypes.bool
});
export { DatePickerInput as default };