glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
202 lines (201 loc) • 10.4 kB
JavaScript
"use strict";
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.parse-int.js");
require("core-js/modules/es.regexp.to-string.js");
var _react = _interopRequireWildcard(require("react"));
var _TimePickerModule = _interopRequireDefault(require("./TimePicker.module.css"));
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); }
const TimePicker = _ref => {
let {
label,
required,
width,
height,
style,
onChange,
value,
id
} = _ref;
const timeRef = (0, _react.useRef)();
const [timeFocused, setTimeFocused] = (0, _react.useState)();
const [hours, setHour] = (0, _react.useState)();
const [minutes, setMinutes] = (0, _react.useState)();
const [timeFormats, setTimeFormats] = (0, _react.useState)();
const handleTimeFocuse = () => {
setTimeFocused(true);
};
const timeClick = () => {
setTimeFocused(true);
if (document.getElementById("timeFields-".concat(id)).style.display === "block") {
document.getElementById("timeFields-".concat(id)).style.display = "none";
} else {
document.getElementById("timeFields-".concat(id)).style.display = "block";
}
};
const combinedStyle = _objectSpread({
width: width ? width : "350px",
height: height ? height : "40px"
}, style);
const time = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
const mins = ["05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"];
const merdiants = ["AM", "PM"];
const selectHour = hour => {
setHour(hour);
getFullTime(hour, minutes, timeFormats);
};
const selectMin = min => {
setMinutes(min);
getFullTime(hours, min, timeFormats);
};
const selectTimeFomat = format => {
setTimeFormats(format);
getFullTime(hours, minutes, format);
};
const getFullTime = (hr, min, format) => {
const timeString = "".concat(hr ? hr : "", ":").concat(min ? min : "", " ").concat(format ? format : "");
const [time1, meridian] = timeString.split(" ");
const [hoursStr, minutesStr] = time1.split(":");
let hours1 = parseInt(hoursStr);
const minutes1 = parseInt(minutesStr);
if (meridian === "PM" && hours < 12) {
hours1 += 12;
} else if (meridian === "AM" && hours === 12) {
hours1 = 0;
}
const now = new Date();
now.setHours(hours1);
now.setMinutes(minutes1);
const timestampString = "".concat(now.getFullYear(), "-").concat((now.getMonth() + 1).toString().padStart(2, "0"), "-").concat(now.getDate().toString().padStart(2, "0"), "T").concat(now.getHours().toString().padStart(2, "0"), ":").concat(now.getMinutes().toString().padStart(2, "0"), ":").concat(now.getSeconds().toString().padStart(2, "0"), ".").concat(now.getMilliseconds().toString().padStart(3, "0"));
if (hours || minutes || timeFormats) {
onChange(timestampString);
}
};
(0, _react.useEffect)(() => {
const handleClickOutside = event => {
if (timeRef.current && !timeRef.current.contains(event.target)) {
setTimeFocused(false);
document.getElementById("timeFields-".concat(id)).style.display = "none";
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
(0, _react.useEffect)(() => {
if (value) {
const timestamp = value;
const date = new Date(timestamp);
const hour = date.getHours();
const minute = date.getMinutes();
setHour((hour % 12 || 12).toString().padStart(2, "0"));
setMinutes(minute.toString().padStart(2, "0"));
setTimeFormats(hours >= 12 ? "PM" : "AM");
}
}, [value]);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
className: _TimePickerModule.default.label
}, label ? label : "", required && /*#__PURE__*/_react.default.createElement("span", {
className: "required"
}, "*")), /*#__PURE__*/_react.default.createElement("div", {
style: {
position: 'relative',
width: width ? width : combinedStyle !== null && combinedStyle !== void 0 && combinedStyle.width ? combinedStyle === null || combinedStyle === void 0 ? void 0 : combinedStyle.width : "350px"
},
ref: timeRef
}, /*#__PURE__*/_react.default.createElement("div", {
id: "heades"
}, /*#__PURE__*/_react.default.createElement("div", {
style: combinedStyle,
onFocus: handleTimeFocuse,
className: "".concat(_TimePickerModule.default.mailContainer, " ").concat(timeFocused && _TimePickerModule.default.focused)
}, hours || minutes || timeFormats ? /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
marginLeft: "14px",
marginRight: "14px"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
fontFamily: "'Roboto',sans-serif"
}
}, "".concat(hours ? hours : "", ":").concat(minutes ? minutes : "", " ").concat(timeFormats ? timeFormats : "")), /*#__PURE__*/_react.default.createElement("span", {
onClick: timeClick,
style: {
fontSize: "20px",
cursor: "pointer"
},
className: "material-symbols-outlined"
}, "schedule")) : /*#__PURE__*/_react.default.createElement("div", {
style: {
marginLeft: "14px",
fontFamily: "'Roboto',sans-serif",
position: 'relative'
}
}, "Select Time"))), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "none"
},
id: "timeFields-".concat(id),
className: _TimePickerModule.default.timeHeader
}, /*#__PURE__*/_react.default.createElement("div", {
className: _TimePickerModule.default.timeContainer
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
height: "100%"
},
className: _TimePickerModule.default.hourField
}, time === null || time === void 0 ? void 0 : time.map(times => {
return /*#__PURE__*/_react.default.createElement("div", {
key: times,
onClick: () => {
selectHour(times);
},
className: "".concat(_TimePickerModule.default.timeField, " ").concat(times === hours && _TimePickerModule.default.selecetedField)
}, times);
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
height: "100%"
},
className: _TimePickerModule.default.minsField
}, mins === null || mins === void 0 ? void 0 : mins.map(min => {
return /*#__PURE__*/_react.default.createElement("div", {
key: min,
className: "".concat(_TimePickerModule.default.minutesField, " ").concat(min === minutes && _TimePickerModule.default.selecetedField),
onClick: () => {
selectMin(min);
}
}, min);
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
height: "100%"
},
className: _TimePickerModule.default.timeFormatHeader
}, merdiants === null || merdiants === void 0 ? void 0 : merdiants.map(merdiant => {
return /*#__PURE__*/_react.default.createElement("div", {
key: merdiant,
onClick: () => {
selectTimeFomat(merdiant);
},
className: "".concat(_TimePickerModule.default.timeFormat, " ").concat(merdiant === timeFormats && _TimePickerModule.default.selecetedField)
}, merdiant);
}))))));
};
var _default = TimePicker;
exports.default = _default;