@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
38 lines • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectMonth = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_icons_1 = require("@fluentui/react-icons");
var react_components_1 = require("@fluentui/react-components");
var CalendarMonth_1 = require("./CalendarMonth");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var date_fns_1 = require("date-fns");
var SelectMonth = function (props) {
var onSelected = props.onSelected, value = props.value;
var Calendar = (0, react_icons_1.bundleIcon)(react_icons_1.CalendarMonthFilled, react_icons_1.CalendarMonthRegular);
var _a = React.useState(value !== null && value !== void 0 ? value : new Date()), selectedDate = _a[0], setSelectedDate = _a[1];
React.useEffect(function () {
onSelected(value !== null && value !== void 0 ? value : new Date());
setSelectedDate(value !== null && value !== void 0 ? value : new Date());
}, [value]);
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
var onOpenChange = function (_e, data) {
setOpen(data.open);
};
var onDateChange = React.useCallback(function (date) {
onSelected(date);
setSelectedDate(date);
}, []);
return (React.createElement(React.Fragment, null,
React.createElement(react_components_1.Menu, { open: open, onOpenChange: onOpenChange },
React.createElement(react_components_1.MenuTrigger, { disableButtonEnhancement: true },
React.createElement(react_components_1.MenuButton, { shape: "circular", icon: React.createElement(Calendar, null), style: { minWidth: "200px" }, "aria-label": "".concat(ControlStrings_1.default.CalendarControlSelectMonthLabel, ": ").concat((0, date_fns_1.format)(selectedDate, "MMMM yyyy")) }, (0, date_fns_1.format)(selectedDate, "MMMM yyyy"))),
React.createElement(react_components_1.MenuPopover, null,
React.createElement(react_components_1.MenuList, null,
React.createElement(CalendarMonth_1.CalendarMonth, { onDateChange: onDateChange, defaultSelectedDate: selectedDate, onDismiss: function () {
setOpen(false);
} }))))));
};
exports.SelectMonth = SelectMonth;
//# sourceMappingURL=SelectMonth.js.map