react-material-time-picker
Version:
TimePicker is a user interface component that allows the user to easily select a specific time. It provides an analog clock interface that is easy to use and intuitive. TimePicker can be easily integrated into other user interface components, making it a
127 lines (126 loc) • 6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Digital;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.parse-int.js");
var _Input = require("../input/Input.js");
var _react = require("react");
var _utilities = require("../../utilities.js");
var _ThemeContext = require("../../ThemeContext.js");
(function () {
const styles = ".time-picker-component .digital-clock-component {\n margin-top: 20px;\n font-family: inherit;\n font-size: 45px;\n font-weight: 400;\n line-height: 52px;\n letter-spacing: 0;\n text-align: center;\n display: grid;\n align-items: start;\n grid-auto-flow: column;\n grid-template-columns: repeat(4, max-content);\n grid-gap: 12px;\n}\n.time-picker-component .digital-clock-component .activated {\n outline: none;\n pointer-events: none;\n}\n.time-picker-component .digital-clock-component .inp-deactive {\n pointer-events: none;\n}\n.time-picker-component .digital-clock-component .switch {\n width: max-content;\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0.15px;\n text-align: left;\n display: grid;\n grid-auto-flow: row;\n border-radius: 8px;\n height: 72px;\n}\n.time-picker-component .digital-clock-component .switch div {\n padding: 0 10px;\n height: 100%;\n vertical-align: middle;\n cursor: pointer;\n}\n.time-picker-component .digital-clock-component .switch .up {\n border-radius: 8px 8px 0 0;\n}\n.time-picker-component .digital-clock-component .switch .down {\n border-radius: 0 0 8px 8px;\n}";
const fileName = "Digital_digital";
const element = document.querySelector("style[data-sass-component='Digital_digital']");
if (!element) {
const styleBlock = document.createElement("style");
styleBlock.innerHTML = styles;
styleBlock.setAttribute("data-sass-component", fileName);
document.head.appendChild(styleBlock);
} else {
element.innerHTML = styles;
}
})();
function Digital(props) {
const [colors] = (0, _ThemeContext.useTheme)();
const [msg, setMsg] = (0, _react.useState)('');
const [inpHoursError, setInpHoursError] = (0, _react.useState)(false);
const [inpMinutesError, setInpMinutesError] = (0, _react.useState)(false);
const dayMode = props.dayMode;
function handleTimeChange(e, mode) {
const inputNumericValue = parseInt(e.target.value);
if (isNaN(inputNumericValue)) {
setMsg('Entered value can be only a number.');
mode === 'hours' ? setInpHoursError(true) : setInpMinutesError(true);
return;
}
if (mode === 'hours') {
setInpHoursError(false);
const minutesVal = (0, _utilities.decode)(props.time || 0).minute;
const maxHour = dayMode === 'pm' ? 23 : 11;
if (inputNumericValue > maxHour) {
setMsg("Invalid input: \"Hours\" is not allowed to be greater than 12");
setInpHoursError(true);
}
const val = (0, _utilities.normalize)(Math.min(inputNumericValue, maxHour));
props.onChange("".concat(val).concat(minutesVal));
} else {
setInpMinutesError(false);
const maxMinutes = 59;
if (inputNumericValue > maxMinutes) {
setMsg('Invalid input: "Minutes" is not allowed to be greater than 60.');
setInpMinutesError(true);
}
const minutesVal = (0, _utilities.normalize)(Math.min(inputNumericValue, maxMinutes));
props.onChange("".concat((0, _utilities.decode)(props.time || 0).hour).concat(minutesVal));
}
}
function handleDayModeChange() {
let time = (0, _utilities.decode)(props.time);
let hourValue = Number(time.hour);
if (dayMode === 'am') {
hourValue = hourValue === 12 ? 12 : (0, _utilities.normalize)(hourValue + 12);
props.setDayMode('pm');
} else if (dayMode === 'pm') {
hourValue = (0, _utilities.normalize)(hourValue % 12);
props.setDayMode('am');
}
props.onChange("".concat(hourValue).concat(time.minute));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "digital-clock-component"
}, /*#__PURE__*/React.createElement("div", {
className: "inps-container"
}, /*#__PURE__*/React.createElement(_Input.Input, {
value: (0, _utilities.normalize)((0, _utilities.decode)(props.time || 0).hour % 12),
onChange: e => handleTimeChange(e, 'hours'),
onClick: () => props.setMode('hours'),
className: props.className,
onBlur: () => {
setMsg('');
setInpHoursError(false);
},
error: inpHoursError,
active: props.mode === 'hours'
}), /*#__PURE__*/React.createElement("div", {
className: "labels"
}, props.label1 || 'Hours')), ":", /*#__PURE__*/React.createElement("div", {
className: "inps-container"
}, /*#__PURE__*/React.createElement(_Input.Input, {
value: (0, _utilities.decode)(props.time || 0).minute,
onChange: e => handleTimeChange(e, 'minutes'),
onClick: () => props.setMode('minutes'),
className: props.className,
onBlur: () => {
setMsg('');
setInpMinutesError(false);
},
error: inpMinutesError,
active: props.mode === 'minutes'
}), /*#__PURE__*/React.createElement("div", {
className: "labels"
}, props.label2 || 'Minutes')), /*#__PURE__*/React.createElement("div", {
className: "switch",
style: {
border: "1px solid ".concat(colors.outline)
}
}, /*#__PURE__*/React.createElement("div", {
style: {
backgroundColor: props.dayMode === 'am' ? colors.tertiaryContainer : ''
},
className: "up",
onClick: handleDayModeChange
}, "AM"), /*#__PURE__*/React.createElement("div", {
style: {
backgroundColor: props.dayMode === 'pm' ? colors.tertiaryContainer : ''
},
className: "down",
onClick: handleDayModeChange
}, "PM"))), /*#__PURE__*/React.createElement("div", {
className: "msg",
style: {
color: colors.error
}
}, msg));
}