@talend/react-components
Version:
Set of react components.
61 lines • 2.03 kB
JavaScript
import classNames from 'classnames';
import { format } from 'date-fns/format';
import { setMonth } from 'date-fns/setMonth';
import { setYear } from 'date-fns/setYear';
import PropTypes from 'prop-types';
import { Action, ActionDropdown } from '../../../../Actions';
import { getPickerLocale } from '../../generator';
import YearPicker from '../../pickers/YearPicker';
import theme from './HeaderTitle.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function HeaderTitle(props) {
const isButton = !!props.button;
const className = classNames(theme.common, {
[theme.button]: isButton
}, {
'btn-tertiary btn-info': isButton
}, props.className);
const propsToSpread = {
className,
...(isButton ? props.button : {})
};
const pickerLocale = getPickerLocale();
const date = setYear(setMonth(new Date(0), props.monthIndex), props.year);
const label = format(date, 'MMMM yyyy', pickerLocale);
const yearLabel = format(date, 'yyyy', pickerLocale);
const monthLabel = format(date, 'MMMM', pickerLocale);
if (isButton) {
return /*#__PURE__*/_jsx(Action, {
...propsToSpread,
label: label
});
}
return /*#__PURE__*/_jsxs("div", {
className: theme.common,
children: [/*#__PURE__*/_jsx("div", {
className: theme.month,
children: /*#__PURE__*/_jsx("span", {
...propsToSpread,
children: monthLabel
})
}), /*#__PURE__*/_jsx(ActionDropdown, {
className: "btn-tertiary btn-info",
label: yearLabel,
children: /*#__PURE__*/_jsx(YearPicker, {
id: "year-picker-in-datetime-header",
"data-feature": "actiondropdown.items",
onSelect: props.onSelectYear
})
})]
});
}
HeaderTitle.propTypes = {
monthIndex: PropTypes.number.isRequired,
year: PropTypes.number.isRequired,
button: PropTypes.object,
className: PropTypes.string,
onSelectYear: PropTypes.func,
t: PropTypes.func
};
export default HeaderTitle;
//# sourceMappingURL=HeaderTitle.component.js.map