phx-react
Version:
PHX REACT
124 lines • 6.7 kB
JavaScript
;
exports.__esModule = true;
exports.PHXTimePicker = void 0;
var tslib_1 = require("tslib");
var outline_1 = require("@heroicons/react/24/outline");
var react_1 = tslib_1.__importStar(require("react"));
var Time_1 = tslib_1.__importDefault(require("./component/Time"));
var ErrorMessage_1 = tslib_1.__importDefault(require("../../commons/ErrorMessage"));
function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
function PHXTimePicker(_a) {
var className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, error = _a.error, errorType = _a.errorType, _b = _a.id, id = _b === void 0 ? 'time-picker' : _b, _c = _a.origin, origin = _c === void 0 ? 'bottom-left' : _c, label = _a.label, onChange = _a.onChange, register = _a.register, step = _a.step;
var message = function (type) {
var errorMessage = '';
switch (type) {
case 'required-field':
errorMessage = 'Vui lòng nhập thông tin';
break;
default:
break;
}
return errorMessage;
};
var inputRef = (0, react_1.useRef)(null);
var calendarRef = (0, react_1.useRef)(null);
var _d = (0, react_1.useState)(false), isCalendarVisible = _d[0], setIsCalendarVisible = _d[1];
var _e = (0, react_1.useState)(''), inputValue = _e[0], setInputValue = _e[1];
var _f = (0, react_1.useState)(false), isFocus = _f[0], setIsFocus = _f[1];
var _g = (0, react_1.useState)(false), isOnChange = _g[0], setIsOnChange = _g[1];
var handleToggleCalendar = function () {
setIsCalendarVisible(true);
};
(0, react_1.useEffect)(function () {
if (defaultValue) {
// @ts-ignore
setInputValue(defaultValue);
}
else {
return;
}
}, [defaultValue]);
(0, react_1.useEffect)(function () {
var handleClickOutside = function (event) {
if (calendarRef.current &&
!calendarRef.current.contains(event.target) &&
inputRef.current !== event.target &&
!isFocus) {
setIsCalendarVisible(false);
var inputElement = document.getElementById("".concat(id, "-after"));
if (inputElement && isOnChange) {
inputElement.focus();
inputElement.blur();
}
}
};
document.addEventListener('click', handleClickOutside);
return function () {
document.removeEventListener('click', handleClickOutside);
};
}, [isFocus]);
var handleChange = function (val) {
var inputElement = document.getElementById("".concat(id, "-after"));
if (inputElement)
inputElement.focus();
setInputValue(val);
if (onChange) {
onChange(val);
}
};
var handleChangeInput = function (event) {
setIsOnChange(true);
var value = event.target.value;
// Chỉ cho phép nhập các ký tự số và :
value = value.replace(/[^0-9:]/g, '');
// Kiểm tra xem giá trị có độ dài phù hợp để thêm dấu : tự động
if (value.length === 2 && !value.includes(':')) {
value = value + ':';
}
// Xóa dấu : nếu người dùng xóa nó
if (value.length === 2 && event.nativeEvent.inputType === 'deleteContentBackward') {
value = value.substring(0, value.length - 1);
}
// Cập nhật giá trị thời gian
setInputValue(value);
if (onChange) {
onChange(value);
}
};
var value = function () {
switch (true) {
case !!defaultValue && !!inputValue:
return inputValue;
case !!defaultValue && !inputValue:
return defaultValue;
default:
return inputValue;
}
};
return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: className },
label && react_1["default"].createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
react_1["default"].createElement("div", { className: 'relative' },
react_1["default"].createElement("label", { ref: inputRef, className: 'absolute top-0 h-[1.875rem] w-full rounded-lg py-4', htmlFor: id, onClick: handleToggleCalendar }),
react_1["default"].createElement("input", { className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 pl-9 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', disabled ? '!border-gray-100 bg-gray-100 text-gray-400 hover:!bg-gray-100' : '', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : ''), disabled: disabled, id: id, onBlur: function () { return setIsFocus(false); }, onChange: function (event) { return handleChangeInput(event); }, onFocus: function () { return setIsFocus(true); }, value: value() }),
react_1["default"].createElement("input", tslib_1.__assign({ className: 'rounded-lg', id: "".concat(id, "-after"), style: {
content: '',
position: 'absolute',
height: 0,
top: 0,
zIndex: -100
} }, register, { value: value() })),
error && errorType ? react_1["default"].createElement(ErrorMessage_1["default"], { message: message(errorType) }) : null,
react_1["default"].createElement("div", { className: 'absolute left-3 top-2' },
react_1["default"].createElement(outline_1.ClockIcon, { className: 'h-4 w-4 text-gray-500' })),
react_1["default"].createElement("div", { ref: calendarRef, className: classNames('absolute z-50 w-full', origin === 'top-left' && '-top-[17.5rem] left-0', origin === 'top-right' && '-top-[17.5rem] right-0', origin === 'bottom-left' && 'left-0 top-10', origin === 'bottom-right' && 'right-0 top-10', isCalendarVisible && !disabled ? '' : 'hidden') },
react_1["default"].createElement(Time_1["default"], { onChangeTime: function (val) { return handleChange(val); }, step: step }))))));
}
exports.PHXTimePicker = PHXTimePicker;
//# sourceMappingURL=TimePicker.js.map