@activecollab/components
Version:
ActiveCollab Components
242 lines (241 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useInputHours = void 0;
var _react = require("react");
var _utils = require("../utils");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var useInputHours = exports.useInputHours = function useInputHours(_ref, inputRef) {
var value = _ref.value,
withLeadingZero = _ref.withLeadingZero,
onSave = _ref.onSave,
_ref$validation = _ref.validation,
validation = _ref$validation === void 0 ? _utils.validateTimeInput : _ref$validation,
allowEmptyValue = _ref.allowEmptyValue,
onCancel = _ref.onCancel,
_ref$minuteIncrement = _ref.minuteIncrement,
minuteIncrement = _ref$minuteIncrement === void 0 ? 1 : _ref$minuteIncrement,
incrementOnlySelected = _ref.incrementOnlySelected,
onEnterKeyPress = _ref.onEnterKeyPress,
onChange = _ref.onChange,
onClick = _ref.onClick;
var _useState = (0, _react.useState)(function () {
return (0, _utils.formatHours)(value, withLeadingZero);
}),
_useState2 = _slicedToArray(_useState, 2),
currentValue = _useState2[0],
setCurrentValue = _useState2[1];
var _useState3 = (0, _react.useState)(function () {
return (0, _utils.formatHours)(value, withLeadingZero);
}),
_useState4 = _slicedToArray(_useState3, 2),
prevValue = _useState4[0],
setPrevValue = _useState4[1];
var escapeRef = (0, _react.useRef)(false);
var handleBlur = (0, _react.useCallback)(function (e) {
if (escapeRef.current) {
setCurrentValue(prevValue);
} else {
if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
var _value = (0, _utils.formatHours)(e.target.value, withLeadingZero);
setPrevValue(_value);
setCurrentValue(_value);
typeof onSave === "function" && onSave(e);
} else {
if (!allowEmptyValue) {
setCurrentValue(prevValue);
typeof onCancel === "function" && onCancel(e);
} else {
if (typeof onSave === "function" && prevValue !== e.target.value) {
onSave(e);
} else {
typeof onCancel === "function" && onCancel(e);
}
}
}
}
}, [allowEmptyValue, onCancel, onSave, prevValue, withLeadingZero]);
var handleIncrementDecrement = (0, _react.useCallback)(function (increment) {
if (inputRef.current) {
var selectionStart = inputRef.current.selectionStart;
if (selectionStart !== null) {
var dotsIndex = currentValue.indexOf(":");
var _currentValue$split$m = currentValue.split(":").map(Number),
_currentValue$split$m2 = _slicedToArray(_currentValue$split$m, 2),
hours = _currentValue$split$m2[0],
minutes = _currentValue$split$m2[1];
var newHours = hours;
var newMinutes = minutes;
if (selectionStart < dotsIndex) {
if (increment) {
newHours += 1;
} else {
newHours -= 1;
if (newHours < 0) newHours = 0;
}
} else if (selectionStart > dotsIndex) {
if (increment) {
newMinutes += minuteIncrement;
if (newMinutes > 59) {
newMinutes = 0;
if (!incrementOnlySelected) newHours += 1;
}
} else {
if (newMinutes >= minuteIncrement || newMinutes === 0) {
newMinutes -= minuteIncrement;
if (newMinutes < 0 && newHours > 0) {
newMinutes = 60 - minuteIncrement;
if (!incrementOnlySelected) newHours -= 1;
}
if (newHours < 0) {
newHours = 0;
}
} else {
newMinutes = 0;
}
}
}
var newMinutesString = newMinutes < 10 ? "0".concat(newMinutes) : newMinutes;
var newHoursString = withLeadingZero && newHours < 10 ? "0".concat(newHours) : newHours;
var newValue = "".concat(newHoursString, ":").concat(newMinutesString);
if (validation(newValue, withLeadingZero)) {
setCurrentValue(newValue);
if (onChange) onChange(newValue);
requestAnimationFrame(function () {
var _inputRef$current;
var newDotsIndex = newValue.indexOf(":");
var isHoursSelected = selectionStart < newDotsIndex;
var newSelectionStart = isHoursSelected ? 0 : newDotsIndex + 1;
var selectionEnd = isHoursSelected ? newDotsIndex : newValue.length;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.setSelectionRange(newSelectionStart, selectionEnd);
});
}
}
}
}, [currentValue, incrementOnlySelected, inputRef, minuteIncrement, onChange, validation, withLeadingZero]);
var handleKeyDown = (0, _react.useCallback)(function (e) {
if (e.key === "Enter") {
e.target.blur();
if (typeof onEnterKeyPress === "function") onEnterKeyPress(e.target.value);
}
if (e.key === "ArrowLeft") {
return;
}
if (e.key === "ArrowRight") {
return;
}
if (e.key === "Escape") {
escapeRef.current = true;
e.target.blur();
typeof onCancel === "function" && onCancel(e);
escapeRef.current = false;
}
if (e.key === "Backspace") {
return;
}
if (e.key === "Delete") {
return;
}
if ((e.metaKey || e.ctrlKey) && e.key === "a") {
var _inputRef$current2;
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.select();
return;
}
var input = e.target;
var start = input.selectionStart;
var end = input.selectionEnd;
var currentValue = input.value;
if (e.key === "Tab") {
if (start !== end) {
if (e.shiftKey) {
var newDotsIndex = currentValue.indexOf(":");
var isMinutesSelected = start > newDotsIndex;
if (isMinutesSelected) {
var _inputRef$current3;
e.preventDefault();
(_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.setSelectionRange(0, newDotsIndex);
}
} else {
var _newDotsIndex = currentValue.indexOf(":");
var isHoursSelected = start < _newDotsIndex;
if (isHoursSelected) {
var _inputRef$current4;
e.preventDefault();
(_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 || _inputRef$current4.setSelectionRange(_newDotsIndex + 1, currentValue.length);
}
}
}
return;
}
if (start !== end) {
if (e.key === "ArrowUp") {
handleIncrementDecrement(true);
return;
}
if (e.key === "ArrowDown") {
handleIncrementDecrement(false);
return;
}
var newValue = currentValue.substring(0, start) + e.key + currentValue.substring(end);
if (!validation(newValue, withLeadingZero)) {
e.preventDefault();
return;
}
} else {
var _newValue = currentValue.substring(0, start) + e.key + currentValue.substring(end);
if (!validation(_newValue, withLeadingZero)) {
e.preventDefault();
return;
}
}
}, [handleIncrementDecrement, inputRef, onCancel, onEnterKeyPress, validation, withLeadingZero]);
var handleChange = (0, _react.useCallback)(function (e) {
setCurrentValue(e.target.value);
if (onChange) onChange(e.target.value);
}, [onChange]);
var handleClick = (0, _react.useCallback)(function (e) {
var _inputRef$current5;
var selectionStart = (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.selectionStart;
if (inputRef.current && currentValue && currentValue.length > 0 && typeof selectionStart === "number") {
var dotsIndex = currentValue.indexOf(":");
if (selectionStart < dotsIndex) {
var _inputRef$current6;
(_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 || _inputRef$current6.setSelectionRange(0, dotsIndex);
} else if (selectionStart >= dotsIndex) {
var _inputRef$current7;
(_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 || _inputRef$current7.setSelectionRange(dotsIndex + 1, currentValue.length);
}
}
if (typeof onClick === "function") {
onClick(e);
}
}, [currentValue, inputRef, onClick]);
var handleDoubleClick = (0, _react.useCallback)(function () {
if (inputRef.current) {
var _inputRef$current8;
(_inputRef$current8 = inputRef.current) === null || _inputRef$current8 === void 0 || _inputRef$current8.select();
}
}, [inputRef]);
var inputProps = (0, _react.useMemo)(function () {
return {
value: currentValue,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onChange: handleChange,
onClick: handleClick,
onDoubleClick: handleDoubleClick
};
}, [currentValue, handleBlur, handleChange, handleClick, handleDoubleClick, handleKeyDown]);
return {
inputProps,
setCurrentValue,
setPrevValue
};
};
//# sourceMappingURL=useInputHours.js.map