@gpa-gemstone/react-forms
Version:
React Form modules for gpa webapps
179 lines (178 loc) • 12.8 kB
JavaScript
"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];
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', width: '100%' } },
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' }, onClick: toPrev }, '<'),
React.createElement("th", { style: { width: 145, padding: 5, cursor: 'pointer' }, colSpan: headerWidth, onClick: function (evt) {
evt.stopPropagation();
if (mode === 'month')
setMode('year');
} },
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 }, '>')),
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) { return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
React.createElement(DayCell, { date: w.sunday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
React.createElement(DayCell, { date: w.monday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
React.createElement(DayCell, { date: w.tuesday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
React.createElement(DayCell, { date: w.wednesday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
React.createElement(DayCell, { date: w.thursday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
React.createElement(DayCell, { date: w.friday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
React.createElement(DayCell, { date: w.saturday, month: month, dateTime: props.DateTime, 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]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(0); } }),
React.createElement(MonthCell, { date: moment([year, 1, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(1); } }),
React.createElement(MonthCell, { date: moment([year, 2, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(2); } }),
React.createElement(MonthCell, { date: moment([year, 3, 1]), dateTime: props.DateTime, 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]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(4); } }),
React.createElement(MonthCell, { date: moment([year, 5, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(5); } }),
React.createElement(MonthCell, { date: moment([year, 6, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(6); } }),
React.createElement(MonthCell, { date: moment([year, 7, 1]), dateTime: props.DateTime, 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]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(8); } }),
React.createElement(MonthCell, { date: moment([year, 9, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(9); } }),
React.createElement(MonthCell, { date: moment([year, 10, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(10); } }),
React.createElement(MonthCell, { date: moment([year, 11, 1]), dateTime: props.DateTime, 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 () {
var _a;
setActive(props.date.date() === ((_a = props.dateTime) === null || _a === void 0 ? void 0 : _a.date()) && props.dateTime.month() === props.date.month() && props.date.year() === props.dateTime.year());
setDisabled(props.date.month() !== props.month);
}, [props.month, props.date, props.dateTime]);
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 () {
var _a, _b;
setActive(props.date.month() === ((_a = props.dateTime) === null || _a === void 0 ? void 0 : _a.month()) && props.date.year() === ((_b = props.dateTime) === null || _b === void 0 ? void 0 : _b.year()));
}, [props.date, props.dateTime]);
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"));
};