@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
287 lines (274 loc) • 9.79 kB
JavaScript
/**
* MSKCC 2021, 2024
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
require('@carbon/icons-react');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var usePrefix = require('../../internal/usePrefix.js');
require('../FluidForm/FluidForm.js');
var FormContext = require('../FluidForm/FormContext.js');
var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var _span, _span2;
const getInstanceId = setupGetInstanceId["default"]();
const DatePickerInput = /*#__PURE__*/React__default["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.usePrefix();
const {
isFluid
} = React.useContext(FormContext.FormContext);
const datePickerInputInstanceId = getInstanceId();
const [date, setDate] = React__default["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__default["default"](`${prefix}--date-picker-input__wrapper`, {
[`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
[`${prefix}--date-picker-input__wrapper--warn`]: warn
});
const labelClasses = cx__default["default"](`${prefix}--label`, {
[`${prefix}--visually-hidden`]: hideLabel,
[`${prefix}--label--disabled`]: disabled,
[`${prefix}--label--readonly`]: rest.readOnly
});
const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
[`${prefix}--form__helper-text--disabled`]: disabled
});
const inputClasses = cx__default["default"](`${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__default["default"](`${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["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
autoComplete: autoComplete
}, autoComplete !== 'off' && {
'aria-autocomplete': 'list'
}, inputProps));
return /*#__PURE__*/React__default["default"].createElement("div", {
className: containerClasses
}, labelText && /*#__PURE__*/React__default["default"].createElement("label", {
htmlFor: id,
className: labelClasses
}, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
className: wrapperClasses
}, input), invalid && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
className: `${prefix}--date-picker__divider`
}), /*#__PURE__*/React__default["default"].createElement("div", {
className: `msk-validation-msg`
}, _span || (_span = /*#__PURE__*/React__default["default"].createElement("span", {
className: `msk-validation-msg--icon msk-icon`
}, "error")), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--form-requirement`
}, invalidText))), warn && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
className: `${prefix}--date-picker__divider`
}), /*#__PURE__*/React__default["default"].createElement("div", {
className: `msk-validation-msg`
}, !disableWarningIcon && (_span2 || (_span2 = /*#__PURE__*/React__default["default"].createElement("span", {
className: `msk-validation-msg--icon msk-validation-msg--icon--warning msk-icon`
}, "warning"))), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--form-requirement`
}, warnText))), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
id: datePickerInputHelperId,
className: helperTextClasses
}, helperText));
});
DatePickerInput.propTypes = {
/**
* value of the autoComplete
*/
autoComplete: PropTypes__default["default"].string,
/**
* disable warning icon*/
disableWarningIcon: PropTypes__default["default"].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__default["default"].bool,
/**
* Provide text that is used alongside the control label for additional help
*/
helperText: PropTypes__default["default"].node,
/**
* Specify if the label should be hidden
*/
hideLabel: PropTypes__default["default"].bool,
/**
* Specify an id that uniquely identifies the `<input>`
*/
id: PropTypes__default["default"].string.isRequired,
/**
* Specify whether or not the input should be invalid
*/
invalid: PropTypes__default["default"].bool,
/**
* Specify the text to be rendered when the input is invalid
*/
invalidText: PropTypes__default["default"].node,
/**
* Provide the text that will be read by a screen reader when visiting this
* control
*/
labelText: PropTypes__default["default"].node.isRequired,
/**
* Specify an `onChange` handler that is called whenever a change in the
* input field has occurred
*/
onChange: PropTypes__default["default"].func,
/**
* Provide a function to be called when the input field is clicked
*/
onClick: PropTypes__default["default"].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__default["default"].string,
/**
* whether the DatePicker is to be readOnly
*/
readOnly: PropTypes__default["default"].bool,
/**
* Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
*/
size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
/**
* Specify the type of the `<input>`
*/
type: PropTypes__default["default"].string,
/**
* Specify whether the control is currently in warning state
*/
warn: PropTypes__default["default"].bool,
/**
* Provide the text that is displayed when the control is in warning state
*/
warnText: PropTypes__default["default"].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__default["default"].oneOf(['simple', 'single', 'range']),
/**
* Specify whether or not the input should be invalid
*/
invalid: PropTypes__default["default"].bool,
/**
* Specify whether the control is currently in warning state
*/
warn: PropTypes__default["default"].bool
});
exports["default"] = DatePickerInput;