@gpa-gemstone/react-forms 1.1.59 → 1.1.61

package/lib/DateTimeUI/Calender.js

@@ -1,180 +1,180 @@
-"use strict";
-// ******************************************************************************************************
-//  Calender.tsx - Gbtc
-//
-//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  05/15/2023 - C. Lackner
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var moment = require("moment");
-function Calender(props) {
-    var _a, _b, _c, _d;
-    var _e = React.useState([]), weeks = _e[0], setWeeks = _e[1];
-    var _f = React.useState((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.month()) !== null && _b !== void 0 ? _b : 0), month = _f[0], setMonth = _f[1];
-    var _g = React.useState((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.year()) !== null && _d !== void 0 ? _d : moment.utc().year()), year = _g[0], setYear = _g[1];
-    var _h = React.useState('month'), mode = _h[0], setMode = _h[1];
-    var _j = React.useState('None'), hover = _j[0], setHover = _j[1];
-    React.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        setMonth(isNaN((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.month()) !== null && _b !== void 0 ? _b : NaN) ? 0 : ((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.month()) !== null && _d !== void 0 ? _d : 0));
-        setYear(isNaN((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.year()) !== null && _f !== void 0 ? _f : NaN) ? moment.utc().year() : ((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.year()) !== null && _h !== void 0 ? _h : moment.utc().year()));
-    }, [props.DateTime]);
-    React.useEffect(function () {
-        var d1 = moment([year, month, 1]).startOf('week');
-        var w = [];
-        while ((d1.month() <= month && d1.year() === year) || (d1.year() < year)) {
-            w.push({
-                sunday: moment(d1),
-                monday: moment(d1).add(1, 'day'),
-                tuesday: moment(d1).add(2, 'day'),
-                wednesday: moment(d1).add(3, 'day'),
-                thursday: moment(d1).add(4, 'day'),
-                friday: moment(d1).add(5, 'day'),
-                saturday: moment(d1).add(6, 'day')
-            });
-            d1.add(1, 'week');
-            d1 = moment(d1).startOf('week');
-        }
-        setWeeks(w);
-    }, [month, year]);
-    function toNext() {
-        if (mode === 'month' && month === 11) {
-            setMonth(0);
-            setYear(function (y) { return y + 1; });
-        }
-        else if (mode === 'month') {
-            setMonth(function (m) { return m + 1; });
-        }
-        else if (mode === 'year') {
-            setYear(function (y) { return y + 1; });
-        }
-        else {
-            setYear(function (y) { return y + 12; });
-        }
-    }
-    function toPrev() {
-        if (mode === 'month' && month === 0) {
-            setMonth(11);
-            setYear(function (y) { return y - 1; });
-        }
-        else if (mode === 'month') {
-            setMonth(function (m) { return m - 1; });
-        }
-        else if (mode === 'year') {
-            setYear(function (y) { return y - 1; });
-        }
-        else {
-            setYear(function (y) { return y - 12; });
-        }
-    }
-    function setDate(d) {
-        var ud = moment(props.DateTime);
-        if (!ud.isValid())
-            ud = moment.utc().startOf('d');
-        ud.year(d.year()).month(d.month()).date(d.date());
-        props.Setter(ud);
-    }
-    var headerWidth = (mode === 'month' ? 5 : 2);
-    return (React.createElement("div", { style: { background: '#f0f0f0', opacity: 1 } },
-        React.createElement("table", { style: { textAlign: 'center' } },
-            React.createElement("thead", { style: { verticalAlign: 'middle', fontWeight: 'bold' } },
-                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
-                    React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onMouseEnter: function () { return setHover('Previous'); }, onMouseLeave: function () { return setHover('None'); }, onClick: toPrev }, '<'),
-                    React.createElement("th", { style: { width: 145, padding: 5, cursor: 'pointer' }, colSpan: headerWidth, onClick: function (evt) {
-                            evt.stopPropagation();
-                            if (mode === 'month')
-                                setMode('year');
-                        }, onMouseEnter: function () { return setHover('Center'); }, onMouseLeave: function () { return setHover('None'); } },
-                        mode === 'month' ? moment([year, month, 1]).format('MMMM YYYY') : '',
-                        mode === 'year' ? year : '',
-                        mode === 'dozenYear' ? year - 6 + "-" + (year + 5) : ''),
-                    React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onClick: toNext, onMouseEnter: function () { return setHover('Next'); }, onMouseLeave: function () { return setHover('None'); } }, '>')),
-                mode === 'month' ? React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
-                    React.createElement("td", { style: { width: 20, padding: 5 } }, "SU"),
-                    React.createElement("td", { style: { width: 20, padding: 5 } }, "MO"),
-                    React.createElement("td", { style: { width: 20, padding: 5 } }, "TU"),
-                    React.createElement("td", { style: { width: 20, padding: 5 } }, "WE"),
-                    React.createElement("td", { style: { width: 20, padding: 5 } }, "TH"),
-                    React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
-                    React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
-            React.createElement("tbody", null,
-                mode === 'month' ? weeks.map(function (w) {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                    return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
-                        React.createElement(DayCell, { date: w.sunday, month: month, day: (_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.date()) !== null && _b !== void 0 ? _b : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
-                        React.createElement(DayCell, { date: w.monday, month: month, day: (_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.date()) !== null && _d !== void 0 ? _d : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
-                        React.createElement(DayCell, { date: w.tuesday, month: month, day: (_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.date()) !== null && _f !== void 0 ? _f : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
-                        React.createElement(DayCell, { date: w.wednesday, month: month, day: (_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.date()) !== null && _h !== void 0 ? _h : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
-                        React.createElement(DayCell, { date: w.thursday, month: month, day: (_k = (_j = props.DateTime) === null || _j === void 0 ? void 0 : _j.date()) !== null && _k !== void 0 ? _k : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
-                        React.createElement(DayCell, { date: w.friday, month: month, day: (_m = (_l = props.DateTime) === null || _l === void 0 ? void 0 : _l.date()) !== null && _m !== void 0 ? _m : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
-                        React.createElement(DayCell, { date: w.saturday, month: month, day: (_p = (_o = props.DateTime) === null || _o === void 0 ? void 0 : _o.date()) !== null && _p !== void 0 ? _p : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } }));
-                }) : null,
-                mode === 'year' ? React.createElement(React.Fragment, null,
-                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
-                        React.createElement(MonthCell, { date: moment([year, 0, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(0); } }),
-                        React.createElement(MonthCell, { date: moment([year, 1, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(1); } }),
-                        React.createElement(MonthCell, { date: moment([year, 2, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(2); } }),
-                        React.createElement(MonthCell, { date: moment([year, 3, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(3); } })),
-                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
-                        React.createElement(MonthCell, { date: moment([year, 4, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(4); } }),
-                        React.createElement(MonthCell, { date: moment([year, 5, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(5); } }),
-                        React.createElement(MonthCell, { date: moment([year, 6, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(6); } }),
-                        React.createElement(MonthCell, { date: moment([year, 7, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(7); } })),
-                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
-                        React.createElement(MonthCell, { date: moment([year, 8, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(8); } }),
-                        React.createElement(MonthCell, { date: moment([year, 9, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(9); } }),
-                        React.createElement(MonthCell, { date: moment([year, 10, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(10); } }),
-                        React.createElement(MonthCell, { date: moment([year, 11, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(11); } }))) : null))));
-}
-exports.default = Calender;
-var DayCell = function (props) {
-    var _a = React.useState(false), active = _a[0], setActive = _a[1];
-    var _b = React.useState(false), hover = _b[0], setHover = _b[1];
-    var _c = React.useState(false), disabled = _c[0], setDisabled = _c[1];
-    React.useEffect(function () {
-        setActive(props.date.date() === props.day && props.month === props.date.month());
-        setDisabled(props.date.month() !== props.month);
-    }, [props.month, props.date, props.day]);
-    var color = (disabled ? '#777' : (active ? '#fff' : undefined));
-    var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
-    return React.createElement("td", { style: {
-            width: 20,
-            padding: 5,
-            color: color,
-            backgroundColor: bg,
-            cursor: (!active ? 'pointer' : 'default')
-        }, onClick: props.onClick, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } }, props.date.format("DD"));
-};
-var MonthCell = function (props) {
-    var _a = React.useState(false), active = _a[0], setActive = _a[1];
-    var _b = React.useState(false), hover = _b[0], setHover = _b[1];
-    React.useEffect(function () {
-        setActive(props.date.month() === props.month);
-    }, [props.month, props.date]);
-    var color = (active ? '#fff' : undefined);
-    var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
-    return React.createElement("td", { style: {
-            width: 54,
-            padding: 5,
-            color: color,
-            backgroundColor: bg,
-            cursor: (!active ? 'pointer' : 'default')
-        }, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, onClick: props.onClick }, props.date.format("MMM"));
-};
+"use strict";
+// ******************************************************************************************************
+//  Calender.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  05/15/2023 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Calender;
+var React = require("react");
+var moment = require("moment");
+function Calender(props) {
+    var _a, _b, _c, _d;
+    var _e = React.useState([]), weeks = _e[0], setWeeks = _e[1];
+    var _f = React.useState((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.month()) !== null && _b !== void 0 ? _b : 0), month = _f[0], setMonth = _f[1];
+    var _g = React.useState((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.year()) !== null && _d !== void 0 ? _d : moment.utc().year()), year = _g[0], setYear = _g[1];
+    var _h = React.useState('month'), mode = _h[0], setMode = _h[1];
+    var _j = React.useState('None'), hover = _j[0], setHover = _j[1];
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        setMonth(isNaN((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.month()) !== null && _b !== void 0 ? _b : NaN) ? 0 : ((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.month()) !== null && _d !== void 0 ? _d : 0));
+        setYear(isNaN((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.year()) !== null && _f !== void 0 ? _f : NaN) ? moment.utc().year() : ((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.year()) !== null && _h !== void 0 ? _h : moment.utc().year()));
+    }, [props.DateTime]);
+    React.useEffect(function () {
+        var d1 = moment([year, month, 1]).startOf('week');
+        var w = [];
+        while ((d1.month() <= month && d1.year() === year) || (d1.year() < year)) {
+            w.push({
+                sunday: moment(d1),
+                monday: moment(d1).add(1, 'day'),
+                tuesday: moment(d1).add(2, 'day'),
+                wednesday: moment(d1).add(3, 'day'),
+                thursday: moment(d1).add(4, 'day'),
+                friday: moment(d1).add(5, 'day'),
+                saturday: moment(d1).add(6, 'day')
+            });
+            d1.add(1, 'week');
+            d1 = moment(d1).startOf('week');
+        }
+        setWeeks(w);
+    }, [month, year]);
+    function toNext() {
+        if (mode === 'month' && month === 11) {
+            setMonth(0);
+            setYear(function (y) { return y + 1; });
+        }
+        else if (mode === 'month') {
+            setMonth(function (m) { return m + 1; });
+        }
+        else if (mode === 'year') {
+            setYear(function (y) { return y + 1; });
+        }
+        else {
+            setYear(function (y) { return y + 12; });
+        }
+    }
+    function toPrev() {
+        if (mode === 'month' && month === 0) {
+            setMonth(11);
+            setYear(function (y) { return y - 1; });
+        }
+        else if (mode === 'month') {
+            setMonth(function (m) { return m - 1; });
+        }
+        else if (mode === 'year') {
+            setYear(function (y) { return y - 1; });
+        }
+        else {
+            setYear(function (y) { return y - 12; });
+        }
+    }
+    function setDate(d) {
+        var ud = moment(props.DateTime);
+        if (!ud.isValid())
+            ud = moment.utc().startOf('d');
+        ud.year(d.year()).month(d.month()).date(d.date());
+        props.Setter(ud);
+    }
+    var headerWidth = (mode === 'month' ? 5 : 2);
+    return (React.createElement("div", { style: { background: '#f0f0f0', opacity: 1 } },
+        React.createElement("table", { style: { textAlign: 'center' } },
+            React.createElement("thead", { style: { verticalAlign: 'middle', fontWeight: 'bold' } },
+                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onMouseEnter: function () { return setHover('Previous'); }, onMouseLeave: function () { return setHover('None'); }, onClick: toPrev }, '<'),
+                    React.createElement("th", { style: { width: 145, padding: 5, cursor: 'pointer' }, colSpan: headerWidth, onClick: function (evt) {
+                            evt.stopPropagation();
+                            if (mode === 'month')
+                                setMode('year');
+                        }, onMouseEnter: function () { return setHover('Center'); }, onMouseLeave: function () { return setHover('None'); } },
+                        mode === 'month' ? moment([year, month, 1]).format('MMMM YYYY') : '',
+                        mode === 'year' ? year : '',
+                        mode === 'dozenYear' ? "".concat(year - 6, "-").concat(year + 5) : ''),
+                    React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onClick: toNext, onMouseEnter: function () { return setHover('Next'); }, onMouseLeave: function () { return setHover('None'); } }, '>')),
+                mode === 'month' ? React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "SU"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "MO"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "TU"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "WE"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "TH"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
+            React.createElement("tbody", null,
+                mode === 'month' ? weeks.map(function (w) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                    return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
+                        React.createElement(DayCell, { date: w.sunday, month: month, day: (_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.date()) !== null && _b !== void 0 ? _b : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
+                        React.createElement(DayCell, { date: w.monday, month: month, day: (_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.date()) !== null && _d !== void 0 ? _d : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
+                        React.createElement(DayCell, { date: w.tuesday, month: month, day: (_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.date()) !== null && _f !== void 0 ? _f : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
+                        React.createElement(DayCell, { date: w.wednesday, month: month, day: (_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.date()) !== null && _h !== void 0 ? _h : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
+                        React.createElement(DayCell, { date: w.thursday, month: month, day: (_k = (_j = props.DateTime) === null || _j === void 0 ? void 0 : _j.date()) !== null && _k !== void 0 ? _k : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
+                        React.createElement(DayCell, { date: w.friday, month: month, day: (_m = (_l = props.DateTime) === null || _l === void 0 ? void 0 : _l.date()) !== null && _m !== void 0 ? _m : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
+                        React.createElement(DayCell, { date: w.saturday, month: month, day: (_p = (_o = props.DateTime) === null || _o === void 0 ? void 0 : _o.date()) !== null && _p !== void 0 ? _p : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } }));
+                }) : null,
+                mode === 'year' ? React.createElement(React.Fragment, null,
+                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
+                        React.createElement(MonthCell, { date: moment([year, 0, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(0); } }),
+                        React.createElement(MonthCell, { date: moment([year, 1, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(1); } }),
+                        React.createElement(MonthCell, { date: moment([year, 2, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(2); } }),
+                        React.createElement(MonthCell, { date: moment([year, 3, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(3); } })),
+                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
+                        React.createElement(MonthCell, { date: moment([year, 4, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(4); } }),
+                        React.createElement(MonthCell, { date: moment([year, 5, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(5); } }),
+                        React.createElement(MonthCell, { date: moment([year, 6, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(6); } }),
+                        React.createElement(MonthCell, { date: moment([year, 7, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(7); } })),
+                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
+                        React.createElement(MonthCell, { date: moment([year, 8, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(8); } }),
+                        React.createElement(MonthCell, { date: moment([year, 9, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(9); } }),
+                        React.createElement(MonthCell, { date: moment([year, 10, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(10); } }),
+                        React.createElement(MonthCell, { date: moment([year, 11, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(11); } }))) : null))));
+}
+var DayCell = function (props) {
+    var _a = React.useState(false), active = _a[0], setActive = _a[1];
+    var _b = React.useState(false), hover = _b[0], setHover = _b[1];
+    var _c = React.useState(false), disabled = _c[0], setDisabled = _c[1];
+    React.useEffect(function () {
+        setActive(props.date.date() === props.day && props.month === props.date.month());
+        setDisabled(props.date.month() !== props.month);
+    }, [props.month, props.date, props.day]);
+    var color = (disabled ? '#777' : (active ? '#fff' : undefined));
+    var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
+    return React.createElement("td", { style: {
+            width: 20,
+            padding: 5,
+            color: color,
+            backgroundColor: bg,
+            cursor: (!active ? 'pointer' : 'default')
+        }, onClick: props.onClick, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } }, props.date.format("DD"));
+};
+var MonthCell = function (props) {
+    var _a = React.useState(false), active = _a[0], setActive = _a[1];
+    var _b = React.useState(false), hover = _b[0], setHover = _b[1];
+    React.useEffect(function () {
+        setActive(props.date.month() === props.month);
+    }, [props.month, props.date]);
+    var color = (active ? '#fff' : undefined);
+    var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
+    return React.createElement("td", { style: {
+            width: 54,
+            padding: 5,
+            color: color,
+            backgroundColor: bg,
+            cursor: (!active ? 'pointer' : 'default')
+        }, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, onClick: props.onClick }, props.date.format("MMM"));
+};

package/lib/DateTimeUI/Clock.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import * as moment from 'moment';
-interface IProps {
-    DateTime: moment.Moment | undefined;
-    Setter: (record: moment.Moment) => void;
-    Accuracy?: Accuracy;
-}
-export declare type Accuracy = ('minute' | 'second' | 'millisecond');
-export default function Clock(props: IProps): JSX.Element;
-export {};
+import * as moment from 'moment';
+interface IProps {
+    DateTime: moment.Moment | undefined;
+    Setter: (record: moment.Moment) => void;
+    Accuracy?: Accuracy;
+}
+export type Accuracy = ('minute' | 'second' | 'millisecond');
+export default function Clock(props: IProps): JSX.Element;
+export {};