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
110 lines (109 loc) • 8.13 kB
JavaScript
;
require("core-js/modules/es.symbol.description.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _Modal = require("../modal/Modal.js");
var _clock = require("./clock.svg");
var _keyboard = require("./keyboard.svg");
var _Digital = _interopRequireDefault(require("../digital/Digital.js"));
var _Analog = _interopRequireDefault(require("../analog/Analog.js"));
var _ThemeContext = require("../../ThemeContext.js");
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _utilities = require("../../utilities.js");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
(function () {
const styles = ".time-picker-component {\n position: absolute;\n}\n.time-picker-component .title {\n width: 100%;\n}\n.time-picker-component .labels {\n font-family: inherit;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.400000006px;\n text-align: left;\n}\n.time-picker-component .main {\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 .main p {\n align-self: center;\n height: 72px;\n margin: 0;\n}\n.time-picker-component .footer {\n align-items: center;\n margin-bottom: 8px;\n margin-top: 24px;\n display: grid;\n grid-auto-flow: column;\n width: 100%;\n grid-template-columns: 1fr auto;\n}\n.time-picker-component .footer svg {\n width: 1.5em;\n cursor: pointer;\n}\n.time-picker-component .msg {\n font-family: inherit;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.400000006px;\n text-align: left;\n align-self: end;\n margin: 1em 0;\n}\n.time-picker-component #btns {\n display: grid;\n grid-auto-flow: column;\n grid-gap: 0.5em;\n}";
const fileName = "Timepicker_timepicker";
const element = document.querySelector("style[data-sass-component='Timepicker_timepicker']");
if (!element) {
const styleBlock = document.createElement("style");
styleBlock.innerHTML = styles;
styleBlock.setAttribute("data-sass-component", fileName);
document.head.appendChild(styleBlock);
} else {
element.innerHTML = styles;
}
})();
const TimePicker = props => /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(ActualTimePicker, props));
function ActualTimePicker(props) {
const [time, setTime] = (0, _react.useState)('0000');
const [mode, setMode] = (0, _react.useState)('hours');
const [clockDisplay, setClockDisplay] = (0, _react.useState)(false);
const [dayMode, setDayMode] = (0, _react.useState)('am');
const [colors, setTheme, setColors] = (0, _ThemeContext.useTheme)();
(0, _react.useEffect)(() => {
if (props.theme) setTheme(props.theme);
}, [setTheme, props.theme]);
(0, _react.useEffect)(() => {
if (typeof props.colors !== "undefined") {
setColors(props.colors);
}
}, [props.colors, setColors]);
(0, _react.useEffect)(() => {
if (typeof time !== 'undefined') {
props.onChange(time);
}
}, [time, props]);
(0, _react.useEffect)(() => {
if (typeof props.defaultValue !== "undefined") {
if (props.defaultValue.length === 4 && Number(props.defaultValue) < '2359') {
setTime(props.defaultValue);
if ((0, _utilities.decode)(props.defaultValue).hour >= 12) setDayMode('pm');else setDayMode('am');
}
}
}, [props.defaultValue, setDayMode]);
return /*#__PURE__*/_react.default.createElement("div", {
className: "time-picker-component",
style: _objectSpread({}, props.style || {})
}, /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
show: props.show,
hide: props.hide,
zIndex: props.zIndex || 1002,
style: props.style,
width: props.width,
top: props.top
}, /*#__PURE__*/_react.default.createElement("span", {
className: "title labels"
}, props.title || 'Enter time'), /*#__PURE__*/_react.default.createElement(_Digital.default, {
mode: mode,
time: time,
onChange: setTime,
setMode: setMode,
dayMode: dayMode,
setDayMode: setDayMode
}), clockDisplay === true ? /*#__PURE__*/_react.default.createElement(_Analog.default, {
time: time,
dayMode: dayMode,
onChange: setTime,
mode: mode,
clockWidth: props.clockWidth || ''
}) : '', /*#__PURE__*/_react.default.createElement("div", {
className: "footer",
style: {
fill: "".concat(colors.onSurfaceVariant)
}
}, clockDisplay === false ? /*#__PURE__*/_react.default.createElement(_clock.ReactComponent, {
onClick: () => setClockDisplay(true)
}) : /*#__PURE__*/_react.default.createElement(_keyboard.ReactComponent, {
onClick: () => setClockDisplay(false)
}), /*#__PURE__*/_react.default.createElement("div", {
id: "btns"
}, props.buttons.map(x => /*#__PURE__*/_react.default.createElement(_Button.default, {
key: x.label,
type: "text",
click: x.onClick
}, x.label))))));
}
var _default = TimePicker;
exports.default = _default;