@gpa-gemstone/react-forms
Version:
React Form modules for gpa webapps
154 lines (153 loc) • 11.6 kB
JavaScript
"use strict";
// ******************************************************************************************************
// Clock.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 = Clock;
var React = require("react");
var moment = require("moment");
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
function Clock(props) {
var _a, _b, _c, _d, _e, _f, _g, _h;
var _j = React.useState((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.format("HH")) !== null && _b !== void 0 ? _b : '00'), hour = _j[0], setHour = _j[1];
var _k = React.useState((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.format("mm")) !== null && _d !== void 0 ? _d : '00'), minute = _k[0], setMinute = _k[1];
var _l = React.useState((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.format("ss")) !== null && _f !== void 0 ? _f : '00'), second = _l[0], setSecond = _l[1];
var _m = React.useState((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.format("SSS")) !== null && _h !== void 0 ? _h : '000'), millisecond = _m[0], setMilliSecond = _m[1];
var _o = React.useState('none'), hover = _o[0], setHover = _o[1];
React.useEffect(function () {
var _a, _b, _c, _d, _e, _f, _g, _h;
setHour((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.format("HH")) !== null && _b !== void 0 ? _b : '00');
setMinute((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.format("mm")) !== null && _d !== void 0 ? _d : '00');
setSecond((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.format("ss")) !== null && _f !== void 0 ? _f : '00');
setMilliSecond((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.format("SSS")) !== null && _h !== void 0 ? _h : '000');
}, [props.DateTime]);
React.useEffect(function () {
var _a, _b, _c, _d;
var h = parseInt(hour, 10);
var m = parseInt(minute, 10);
var s = parseInt(second, 10);
var ms = parseInt(millisecond, 10);
if (isNaN(h) || isNaN(m) || isNaN(s) || isNaN(ms))
return;
if (h !== ((_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.hour()) || m !== ((_b = props.DateTime) === null || _b === void 0 ? void 0 : _b.minute()) || s !== ((_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.second()) || ms !== ((_d = props.DateTime) === null || _d === void 0 ? void 0 : _d.millisecond())) {
var d = moment(props.DateTime);
if (!d.isValid())
d = moment.utc().startOf('d');
d.hour(h).minute(m).second(s).millisecond(ms);
props.Setter(d);
}
}, [hour, minute, second, millisecond]);
function increase(type) {
var d = moment(props.DateTime).add(1, type);
if (type === 'h')
setHour(d.format("HH"));
if (type === 'm')
setMinute(d.format("mm"));
if (type === 's')
setSecond(d.format("ss"));
if (type === 'ms')
setMilliSecond(d.format("SSS"));
}
function decrease(type) {
var d = moment(props.DateTime).subtract(1, type);
if (type === 'h')
setHour(d.format("HH"));
if (type === 'm')
setMinute(d.format("mm"));
if (type === 's')
setSecond(d.format("ss"));
if (type === 'ms')
setMilliSecond(d.format("SSS"));
}
return (React.createElement("div", { style: { background: '#f0f0f0', marginTop: 10, opacity: 1 } },
React.createElement("table", { style: { textAlign: 'center' } },
React.createElement("tbody", null,
React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_h' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('h'); }, onMouseEnter: function () { return setHover('increase_h'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
React.createElement("td", { style: { width: 20, padding: 5 } }),
React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_m' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('m'); }, onMouseEnter: function () { return setHover('increase_m'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
(props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
React.createElement("td", { style: { width: 20, padding: 5, } }),
React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_s' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('s'); }, onMouseEnter: function () { return setHover('increase_s'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "))),
props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
React.createElement("td", { style: { width: 20, padding: 5 } }),
React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_ms' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('ms'); }, onMouseEnter: function () { return setHover('increase_ms'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ ")))),
React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
React.createElement("td", { style: { width: 52, padding: 5, } },
" ",
React.createElement(TimeInput, { value: hour, setValue: setHour, max: 23 }),
" "),
React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
React.createElement("td", { style: { width: 52, padding: 5, } },
" ",
React.createElement(TimeInput, { value: minute, setValue: setMinute, max: 59 }),
" "),
(props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
React.createElement("td", { style: { width: 52, padding: 5, } },
" ",
React.createElement(TimeInput, { value: second, setValue: setSecond, max: 59 }),
" "))),
props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
React.createElement("td", { style: { width: 52, padding: 5, } },
" ",
React.createElement(TimeInput, { value: millisecond, setValue: setMilliSecond, max: 999 }),
" ")))),
React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_h' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('h'); }, onMouseEnter: function () { return setHover('decrease_h'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
React.createElement("td", { style: { width: 20, padding: 5, } }),
React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_m' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('m'); }, onMouseEnter: function () { return setHover('decrease_m'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
(props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
React.createElement("td", { style: { width: 20, padding: 5, } }),
React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_s' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('s'); }, onMouseEnter: function () { return setHover('decrease_s'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))),
props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
React.createElement("td", { style: { width: 20, padding: 5, } }),
React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_ms' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('ms'); }, onMouseEnter: function () { return setHover('decrease_ms'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))))))));
}
var TimeInput = function (props) {
var _a = React.useState(props.value.toString()), val = _a[0], setVal = _a[1];
var _b = React.useState(false), error = _b[0], setError = _b[1];
React.useEffect(function () {
if (props.value.length > 5) {
setVal("");
return;
}
setVal(props.value.toString());
}, [props.value]);
React.useEffect(function () {
if (!(0, helper_functions_1.IsInteger)(val))
return;
var v = parseInt(val, 10);
if (v > props.max || v < 0) {
setError(true);
return;
}
setError(false);
props.setValue(val);
}, [val, error]);
return React.createElement("div", { className: "form-group form-group-sm", style: { width: 52 } },
React.createElement("input", { type: "text", className: !error ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
if ((0, helper_functions_1.IsInteger)(evt.target.value))
setVal(evt.target.value);
}, value: val }));
};