UNPKG

terra-clinical-onset-picker

Version:

The terra-clinical-onset-picker component provides users a way to enter or select an approximate date for use in onset scenarios.

610 lines (601 loc) 28.7 kB
"use strict"; function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.PrecisionOptions = exports.GranularityOptions = exports.AgeUnits = void 0; var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _moment = _interopRequireDefault(require("moment")); var _bind = _interopRequireDefault(require("classnames/bind")); var _terraDatePicker = _interopRequireDefault(require("terra-date-picker")); var _terraFormField = _interopRequireDefault(require("terra-form-field")); var _terraFormFieldset = _interopRequireDefault(require("terra-form-fieldset")); var _InputField = _interopRequireDefault(require("terra-form-input/lib/InputField")); var _SelectField = _interopRequireDefault(require("terra-form-select/lib/SelectField")); var _reactIntl = require("react-intl"); var _terraThemeContext = _interopRequireDefault(require("terra-theme-context")); var _OnsetUtils = _interopRequireDefault(require("./OnsetUtils")); var _OnsetPickerModule = _interopRequireDefault(require("./OnsetPicker.module.scss")); var _excluded = ["ageUnit", "birthdate", "granularity", "precision", "precisionSet", "onsetDate", "onsetOnChange", "legend", "intl", "isLegendHidden", "required"]; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; } function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } var cx = _bind.default.bind(_OnsetPickerModule.default); var AgeUnits = exports.AgeUnits = { WEEKS: 'weeks', MONTHS: 'months', YEARS: 'years' }; var GranularityOptions = exports.GranularityOptions = { AGE: 'age', YEAR: 'year', MONTH: 'month', DATE: 'date' }; var PrecisionOptions = exports.PrecisionOptions = _OnsetUtils.default.PrecisionOptions; var DATE_FORMAT = 'YYYY-MM-DD'; var propTypes = { /** * The date unit of the age value. One of `weeks`, `months`, or `years`. */ ageUnit: _propTypes.default.oneOf(['weeks', 'months', 'years']), /** * The ISO 8601 **DATE ONLY** string representation of the birth date to calculate an onset date for the `age` precision. * Also limits the earliest possible date that can be selected for an onset date for `year`, `month`, and `date` precision. */ birthdate: _propTypes.default.string.isRequired, /** * The granularity of the onset date. One of `age`, `year`, `month`, or `date` is accepted. */ granularity: _propTypes.default.oneOf(['age', 'year', 'month', 'date']), /** * The id of the onset picker. Used as the base for other required id/name in sub-components. */ id: _propTypes.default.string.isRequired, /** * The precision of the onset date. This should be one of precisions passed to the precisionSet prop. * One of `on/at`, `about`, `before`, `after`, or `unknown`. */ precision: _propTypes.default.oneOf(['on/at', 'about', 'before', 'after', 'unknown']), /** * The set of precisions that can be used with the onset picker. * Combination of `on/at`, `about`, `before`, `after`, and `unknown`. * Order of precisions determines order in precision select. */ precisionSet: _propTypes.default.arrayOf(_propTypes.default.oneOf(['on/at', 'about', 'before', 'after', 'unknown'])), /** * The ISO 8601 **DATE ONLY** string representation of the onset date to view/modify. */ onsetDate: _propTypes.default.string, /** * A callback function to execute when any value of the onsetDate is changed. * The first parameter is a Object that contains `precision`, `granularity`, `onsetDate`, `onsetDateMetadata`, and `ageUnit`. * `ageUnit` is only present if the granularity is 'age'. * `onsetDateMetadata` contains additional properties about the state of the onset date. */ onsetOnChange: _propTypes.default.func, /** * Legend for the Onset Picker field group. */ legend: _propTypes.default.string, /** * Whether or not the legend is visible. Use this props to hide a legend while still creating it on the DOM for accessibility. */ isLegendHidden: _propTypes.default.bool, /** * @private * The intl object containing translations. This is retrieved from the context automatically by injectIntl. */ intl: _propTypes.default.shape({ formatMessage: _propTypes.default.func }).isRequired, /** * Whether the field is required. */ required: _propTypes.default.bool }; var defaultProps = { precisionSet: ['on/at', 'about', 'before', 'after', 'unknown'], isLegendHidden: false, required: false }; var OnsetPicker = /*#__PURE__*/function (_React$Component) { function OnsetPicker(props) { var _this; _classCallCheck(this, OnsetPicker); _this = _callSuper(this, OnsetPicker, [props]); _this.changeGranularity = _this.changeGranularity.bind(_this); _this.changePrecision = _this.changePrecision.bind(_this); _this.changeAge = _this.changeAge.bind(_this); _this.changeAgeUnit = _this.changeAgeUnit.bind(_this); _this.changeYear = _this.changeYear.bind(_this); _this.changeMonth = _this.changeMonth.bind(_this); _this.changeDate = _this.changeDate.bind(_this); _this.handleOnsetUpdate = _this.handleOnsetUpdate.bind(_this); var ageValues = {}; if (_this.props.ageUnit) { ageValues = { age: _this.props.onsetDate ? (0, _moment.default)(_this.props.onsetDate).diff((0, _moment.default)(_this.props.birthdate), _this.props.ageUnit) : undefined, ageUnit: _this.props.ageUnit }; } else if (_this.props.onsetDate) { ageValues = _OnsetUtils.default.onsetToAge(_this.props.birthdate, (0, _moment.default)(_this.props.onsetDate)); } var birthMoment = (0, _moment.default)(props.birthdate).startOf('day'); var currentMoment = (0, _moment.default)().startOf('day'); /* The granularity is added so that if 'age' is passed as granularity with invalid birthdate, then the granularity is set to default i.e 'undefined' */ var granularity = currentMoment.diff(birthMoment, 'weeks') !== 0 || _this.props.granularity !== GranularityOptions.AGE ? _this.props.granularity : undefined; _this.state = { granularity: granularity, precision: _this.props.precision, onsetDate: _this.props.onsetDate ? (0, _moment.default)(_this.props.onsetDate) : undefined, age: ageValues.age, ageUnit: ageValues.ageUnit, year: undefined, month: undefined }; return _this; } _inherits(OnsetPicker, _React$Component); return _createClass(OnsetPicker, [{ key: "componentDidMount", value: function componentDidMount() { if (this.props.onsetDate) { var onsetMoment = (0, _moment.default)(this.props.onsetDate); var onsetYear = (0, _moment.default)().year(onsetMoment.year()); var firstDayOfYear = onsetYear.startOf('year').format(DATE_FORMAT); var firstDayOfMonth = onsetYear.month(onsetMoment.month()).startOf('month').format(DATE_FORMAT); if (this.props.granularity === GranularityOptions.YEAR && this.props.onsetDate === firstDayOfYear) { this.setState({ granularity: GranularityOptions.YEAR }, this.handleOnsetUpdate); } else if (this.props.granularity === GranularityOptions.MONTH && this.props.onsetDate === firstDayOfMonth) { this.setState({ granularity: GranularityOptions.MONTH }, this.handleOnsetUpdate); } else if (this.props.granularity === GranularityOptions.AGE && this.state.age && this.state.ageUnit) { this.setState({ granularity: GranularityOptions.AGE }, this.handleOnsetUpdate); } else { this.setState({ granularity: GranularityOptions.DATE }, this.handleOnsetUpdate); } } } /** * Trigger supplied callback function with an object of the current state data */ }, { key: "handleOnsetUpdate", value: function handleOnsetUpdate() { if (this.props.onsetOnChange === undefined) { return; } var onsetObject = { precision: this.state.precision, onsetDate: this.state.onsetDate ? this.state.onsetDate.format(DATE_FORMAT) : undefined, onsetDateMetadata: this.state.onsetDateMetadata, granularity: this.state.precision !== PrecisionOptions.UNKNOWN ? this.state.granularity : '' }; if (this.state.granularity === GranularityOptions.AGE && this.state.precision !== PrecisionOptions.UNKNOWN) { onsetObject.ageUnit = this.state.ageUnit; } this.props.onsetOnChange(onsetObject); } }, { key: "getYearInput", value: function getYearInput(intl, id) { return /*#__PURE__*/_react.default.createElement(_SelectField.default, { required: this.props.required, className: cx('field-inline', 'year'), value: this.state.onsetDate ? this.state.onsetDate.year().toString() : undefined, label: intl.formatMessage({ id: 'Terra.onsetPicker.year' }), labelAttrs: { id: "".concat(id, "-year-select-label") }, onChange: this.changeYear, placeholder: intl.formatMessage({ id: 'Terra.onsetPicker.year' }), selectId: "".concat(id, "-year-select") }, _OnsetUtils.default.allowedYears(this.state.granularity, this.state.month, this.props.birthdate).map(function (year) { return /*#__PURE__*/_react.default.createElement(_SelectField.default.Option, { value: year.value, display: year.display, key: year.value }); })); } /** * Change state for granularity * * @param {granularity} - New granularity value */ }, { key: "changeGranularity", value: function changeGranularity(granularity) { if (granularity !== this.state.granularity) { // RESET DATA IF GRANULARITY IS CHANGED. this.setState(function (prevState) { return { granularity: granularity, precision: prevState.precision, onsetDate: undefined, age: undefined, ageUnit: undefined, year: undefined, month: undefined }; }, this.handleOnsetUpdate); } } /** * Change state for precision * * @param {precision} - New precision value */ }, { key: "changePrecision", value: function changePrecision(precision) { if (precision === PrecisionOptions.UNKNOWN) { this.setState(function () { return { precision: precision, onsetDate: undefined }; }, this.handleOnsetUpdate); } else { this.setState({ precision: precision }, this.handleOnsetUpdate); } } /** * Change state for the age when using AGE granularity, and update onset date * * @param {event} - Triggered change event */ }, { key: "changeAge", value: function changeAge(event) { var _this2 = this; var age; if (event.target.value) { age = Number(event.target.value); this.setState(function (prevState) { // Check if date can be calculated var momentBirthDate = (0, _moment.default)(_this2.props.birthdate); var ageDate = (0, _moment.default)(momentBirthDate).add(age, prevState.ageUnit); // Add 1 day to onset date if birthdate is a leap day or onset month has less days than birth month. if (Number.isInteger(age) && prevState.ageUnit) { if (ageDate.daysInMonth() < momentBirthDate.daysInMonth() && ageDate.format(DATE_FORMAT) === (0, _moment.default)().year(ageDate.year()).month(ageDate.month()).endOf('month').format(DATE_FORMAT)) { ageDate = ageDate.add('1', 'days'); } } else { ageDate = undefined; } // Check if date is valid var validDate = ageDate && ageDate >= (0, _moment.default)(_this2.props.birthdate) && ageDate <= (0, _moment.default)(); return { age: age, onsetDate: validDate ? ageDate : undefined }; }, this.handleOnsetUpdate); } else { this.setState(function () { return { age: undefined, onsetDate: undefined }; }, this.handleOnsetUpdate); } } /** * Change state for age unit when using AGE granularity, and update onset date * * @param {ageUnit} - New ageUnit */ }, { key: "changeAgeUnit", value: function changeAgeUnit(ageUnit) { var validAge = Number.isInteger(this.state.age); // Check if date can be calculated var momentBirthDate = (0, _moment.default)(this.props.birthdate); var ageDate = (0, _moment.default)(momentBirthDate).add(this.state.age, ageUnit); if (validAge && ageUnit) { if (ageDate.daysInMonth() < momentBirthDate.daysInMonth() && ageDate.format(DATE_FORMAT) === (0, _moment.default)().year(ageDate.year()).month(ageDate.month()).endOf('month').format(DATE_FORMAT)) { ageDate = ageDate.add('1', 'days'); } } else { ageDate = undefined; } // Check if date is valid var validDate = this.state.age !== undefined ? ageDate && ageDate >= (0, _moment.default)(this.props.birthdate) && ageDate <= (0, _moment.default)() : false; this.setState(function () { return { ageUnit: ageUnit, onsetDate: validDate ? ageDate : undefined }; }, this.handleOnsetUpdate); } /** * Update onset date when year changes * * @param {year} - New year value */ }, { key: "changeYear", value: function changeYear(year) { if (this.state.granularity === GranularityOptions.MONTH) { this.setState(function (prevState) { return { year: year, onsetDate: prevState.month ? (0, _moment.default)().month(prevState.month).year(year).startOf('month') : undefined }; }, this.handleOnsetUpdate); } else { this.setState(function () { var newDate = (0, _moment.default)().year(year).startOf('year'); return { onsetDate: newDate }; }, this.handleOnsetUpdate); } } /** * Update onset date when month changes * * @param {month} - New month value */ }, { key: "changeMonth", value: function changeMonth(month) { this.setState(function (prevState) { return { month: month, onsetDate: prevState.year ? (0, _moment.default)().month(month).year(prevState.year).startOf('month') : undefined }; }, this.handleOnsetUpdate); } /** * Update onset date when date changes * * @param {event} - Triggered change event * @param {string} - New date input * @param {object} - Metadata about date */ }, { key: "changeDate", value: function changeDate(event, _, metadata) { if (!metadata.isCompleteValue) { this.setState({ onsetDate: undefined, onsetDateMetadata: metadata }, this.handleOnsetUpdate); } else { this.setState({ onsetDate: (0, _moment.default)(metadata.iSO), onsetDateMetadata: metadata }, this.handleOnsetUpdate); } } }, { key: "render", value: function render() { var _this$props = this.props, ageUnit = _this$props.ageUnit, birthdate = _this$props.birthdate, granularity = _this$props.granularity, precision = _this$props.precision, precisionSet = _this$props.precisionSet, onsetDate = _this$props.onsetDate, onsetOnChange = _this$props.onsetOnChange, legend = _this$props.legend, intl = _this$props.intl, isLegendHidden = _this$props.isLegendHidden, required = _this$props.required, customProps = _objectWithoutProperties(_this$props, _excluded); var granularitySelect = null; var granularityOptions = []; if (this.state.precision !== PrecisionOptions.UNKNOWN) { var birthMoment = (0, _moment.default)(birthdate).startOf('day'); // startOf to clear time from values var currentMoment = (0, _moment.default)().startOf('day'); if (currentMoment.diff(birthMoment, 'weeks') !== 0) { granularityOptions.push( /*#__PURE__*/_react.default.createElement(_SelectField.default.Option, { value: GranularityOptions.AGE, display: intl.formatMessage({ id: 'Terra.onsetPicker.age' }), key: GranularityOptions.AGE })); } if (currentMoment.diff(birthMoment, 'years') === 0 && currentMoment.year() !== birthMoment.year() || currentMoment.diff(birthMoment, 'years') !== 0) { granularityOptions.push( /*#__PURE__*/_react.default.createElement(_SelectField.default.Option, { value: GranularityOptions.YEAR, display: intl.formatMessage({ id: 'Terra.onsetPicker.year' }), key: GranularityOptions.YEAR })); } if (currentMoment.diff(birthMoment, 'months') === 0 && currentMoment.month() !== birthMoment.month() || currentMoment.diff(birthMoment, 'months') !== 0) { granularityOptions.push( /*#__PURE__*/_react.default.createElement(_SelectField.default.Option, { value: GranularityOptions.MONTH, display: intl.formatMessage({ id: 'Terra.onsetPicker.month' }), key: GranularityOptions.MONTH })); } granularitySelect = /*#__PURE__*/_react.default.createElement(_SelectField.default, { className: cx('field-inline', 'granularity'), value: this.state.granularity, label: intl.formatMessage({ id: 'Terra.onsetPicker.granularity' }), labelAttrs: { id: "".concat(this.props.id, "-granularity-select-label") }, onChange: this.changeGranularity, placeholder: intl.formatMessage({ id: 'Terra.onsetPicker.granularity' }), selectId: "".concat(this.props.id, "-granularity-select") }, granularityOptions, /*#__PURE__*/_react.default.createElement(_SelectField.default.Option, { value: GranularityOptions.DATE, display: intl.formatMessage({ id: 'Terra.onsetPicker.date' }), key: GranularityOptions.DATE })); } var ageInput; var ageUnitSelect; if (this.state.granularity === GranularityOptions.AGE) { ageInput = /*#__PURE__*/_react.default.createElement(_InputField.default, { required: required, className: cx('field-inline', 'age'), defaultValue: this.state.age, inputAttrs: { type: 'number', min: 0, max: _OnsetUtils.default.allowedAge(this.props.birthdate, this.state.ageUnit), step: 1 }, inputId: "".concat(this.props.id, "-age-input"), label: intl.formatMessage({ id: 'Terra.onsetPicker.age' }), labelAttrs: { id: "".concat(this.props.id, "-age-input-label") }, onChange: this.changeAge }); ageUnitSelect = /*#__PURE__*/_react.default.createElement(_SelectField.default, { required: required, className: cx('field-inline', 'age-unit'), defaultValue: this.state.ageUnit, label: intl.formatMessage({ id: 'Terra.onsetPicker.agePrecision' }), labelAttrs: { id: "".concat(this.props.id, "-age-unit-select-label") }, onChange: this.changeAgeUnit, placeholder: intl.formatMessage({ id: 'Terra.onsetPicker.agePrecision' }), selectId: "".concat(this.props.id, "-age-unit-select") }, _OnsetUtils.default.allowedAgeUnits(this.props.birthdate, intl).map(function (unit) { return /*#__PURE__*/_react.default.createElement(_SelectField.default.Option, { value: unit.value, display: unit.display, key: unit.value }); })); } var monthSelect; if (this.state.granularity === GranularityOptions.MONTH) { monthSelect = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SelectField.default, { required: required, className: cx('field-inline', 'month'), value: this.state.onsetDate ? this.state.onsetDate.month().toString() : undefined, label: intl.formatMessage({ id: 'Terra.onsetPicker.month' }), labelAttrs: { id: "".concat(this.props.id, "-month-select-label") }, onChange: this.changeMonth, placeholder: intl.formatMessage({ id: 'Terra.onsetPicker.month' }), selectId: "".concat(this.props.id, "-month-select") }, _OnsetUtils.default.allowedMonths(intl, this.props.birthdate, this.state.year).map(function (month) { return /*#__PURE__*/_react.default.createElement(_SelectField.default.Option, { value: month.value, display: month.display, key: month.value }); })), this.getYearInput(intl, this.props.id)); } var yearSelect; if (this.state.granularity === GranularityOptions.YEAR) { yearSelect = this.getYearInput(intl, this.props.id); } var dateSelect; if (this.state.granularity === GranularityOptions.DATE) { dateSelect = /*#__PURE__*/_react.default.createElement(_terraFormField.default, { className: cx('field-inline', 'date'), label: intl.formatMessage({ id: 'Terra.onsetPicker.date' }), labelAttrs: { 'aria-hidden': 'true', id: "".concat(this.props.id, "-date-input-label") } }, /*#__PURE__*/_react.default.createElement(_terraDatePicker.default, { required: required, onChangeRaw: this.changeDate, minDate: this.props.birthdate, maxDate: (0, _moment.default)().format(DATE_FORMAT), selectedDate: this.state.onsetDate ? this.state.onsetDate.format(DATE_FORMAT) : undefined, name: "".concat(this.props.id, "-date-input") })); } var theme = this.context; return /*#__PURE__*/_react.default.createElement("div", _extends({ id: this.props.id }, customProps), /*#__PURE__*/_react.default.createElement(_terraFormFieldset.default, { className: cx('fieldset', theme.className), legend: legend, isLegendHidden: isLegendHidden }, /*#__PURE__*/_react.default.createElement(_SelectField.default, { className: cx('field-inline', 'precision'), defaultValue: this.state.precision, label: intl.formatMessage({ id: 'Terra.onsetPicker.precision' }), labelAttrs: { id: "".concat(this.props.id, "-precision-select-label") }, onChange: this.changePrecision, placeholder: intl.formatMessage({ id: 'Terra.onsetPicker.precision' }), selectId: "".concat(this.props.id, "-precision-select") }, _OnsetUtils.default.allowedPrecisions(intl, this.props.precisionSet).map(function (precisionEntry) { return /*#__PURE__*/_react.default.createElement(_SelectField.default.Option, { value: precisionEntry.value, display: precisionEntry.display, key: precisionEntry.value }); })), granularitySelect, this.state.precision !== PrecisionOptions.UNKNOWN && /*#__PURE__*/_react.default.createElement("div", { id: "dynamic_content" }, ageInput, ageUnitSelect, monthSelect, yearSelect, dateSelect))); } }]); }(_react.default.Component); OnsetPicker.propTypes = propTypes; OnsetPicker.defaultProps = defaultProps; OnsetPicker.contextType = _terraThemeContext.default; var _default = exports.default = (0, _reactIntl.injectIntl)(OnsetPicker);