phx-react
Version:
PHX REACT
94 lines • 5.53 kB
JavaScript
;
exports.__esModule = true;
exports.PHXDateRangePicker = void 0;
var tslib_1 = require("tslib");
var solid_1 = require("@heroicons/react/20/solid");
var date_fns_1 = require("date-fns");
var react_1 = tslib_1.__importStar(require("react"));
var Calendar_1 = tslib_1.__importDefault(require("./components/Calendar"));
var utils_1 = require("./utils");
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 PHXDateRangePicker(_a) {
var className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, disabledDate = _a.disabledDate, error = _a.error, errorType = _a.errorType, label = _a.label, max = _a.max, min = _a.min, onChange = _a.onChange, position_component = _a.position_component, _b = _a.origin, origin = _b === void 0 ? 'bottom-left' : _b;
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 _c = (0, react_1.useState)(false), isCalendarVisible = _c[0], setIsCalendarVisible = _c[1];
var handleToggleCalendar = function () {
setIsCalendarVisible(true);
};
(0, react_1.useEffect)(function () {
var handleClickOutside = function (event) {
if (calendarRef.current &&
!calendarRef.current.contains(event.target) &&
inputRef.current &&
!inputRef.current.contains(event.target)) {
setIsCalendarVisible(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
document.removeEventListener('mousedown', handleClickOutside);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, react_1.useEffect)(function () {
if (defaultValue) {
var endDate = new Date();
var startDate = (0, date_fns_1.subDays)(endDate, defaultValue - 1);
var formattedStartDate = (0, date_fns_1.format)(startDate, 'dd-MM-yyyy');
var formattedEndDate = (0, date_fns_1.format)(endDate, 'dd-MM-yyyy');
var parsedStartDate = (0, date_fns_1.parse)(formattedStartDate, 'dd-MM-yyyy', new Date());
var parsedEndDate = (0, date_fns_1.parse)(formattedEndDate, 'dd-MM-yyyy', new Date());
handleResult(parsedStartDate, parsedEndDate);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValue]);
var _d = (0, react_1.useState)('Ngày hôm nay'), viewResult = _d[0], setViewResult = _d[1];
var handleResult = function (startDate, endDate) {
if (!startDate || !endDate) {
return;
}
var startDateResult = (0, date_fns_1.format)(startDate, 'yyyy/MM/dd');
var endDateResult = (0, date_fns_1.format)(endDate, 'yyyy/MM/dd');
if (onChange && startDateResult && endDateResult) {
onChange({ startDate: startDateResult, endDate: endDateResult });
}
var viewDate = (0, utils_1.formatViewResult)(startDate, endDate);
setViewResult(viewDate);
setIsCalendarVisible(false);
};
var handleCancel = function () {
setIsCalendarVisible(false);
};
return (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("button", { disabled: disabled, className: "bg-white px-2.5 pl-8 py-1.5 text-xs rounded-lg font-normal text-gray-900 shadow-sm border border-gray-300 border-b-gray-400 hover:bg-gray-100 ".concat(isCalendarVisible ? '!shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] !border-b-gray-300 !bg-gray-100' : ''), onClick: handleToggleCalendar, ref: inputRef, type: 'button' }, viewResult),
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(solid_1.CalendarDaysIcon, { className: 'h-4 w-4 text-gray-500' })),
react_1["default"].createElement("div", { ref: calendarRef, className: position_component === 'left'
? classNames('left-30 absolute right-[8px] top-10 z-50', isCalendarVisible ? '' : 'hidden')
: classNames('absolute z-50', origin === 'top-left' && '-top-60 left-0', origin === 'top-right' && '-top-60 right-0', origin === 'bottom-left' && 'left-0 top-10', origin === 'bottom-right' && 'right-0 top-10', isCalendarVisible ? '' : 'hidden') },
react_1["default"].createElement(Calendar_1["default"], { defaultDate: defaultValue, disabledDate: disabledDate, handleCancel: handleCancel, handleResult: handleResult, max: max, min: min })))));
}
exports.PHXDateRangePicker = PHXDateRangePicker;
//# sourceMappingURL=DatePicker.js.map