phx-react
Version:
PHX REACT
89 lines • 5 kB
JavaScript
import { CalendarDaysIcon } from '@heroicons/react/20/solid';
import { format, parse, subDays } from 'date-fns';
import React, { useEffect, useRef, useState } from 'react';
import Calendar from './components/Calendar';
import { formatViewResult } from './utils';
import ErrorMessage from '../../commons/ErrorMessage';
function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
export 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 = useRef(null);
var calendarRef = useRef(null);
var _c = useState(false), isCalendarVisible = _c[0], setIsCalendarVisible = _c[1];
var handleToggleCalendar = function () {
setIsCalendarVisible(true);
};
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
}, []);
useEffect(function () {
if (defaultValue) {
var endDate = new Date();
var startDate = subDays(endDate, defaultValue - 1);
var formattedStartDate = format(startDate, 'dd-MM-yyyy');
var formattedEndDate = format(endDate, 'dd-MM-yyyy');
var parsedStartDate = parse(formattedStartDate, 'dd-MM-yyyy', new Date());
var parsedEndDate = parse(formattedEndDate, 'dd-MM-yyyy', new Date());
handleResult(parsedStartDate, parsedEndDate);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValue]);
var _d = useState('Ngày hôm nay'), viewResult = _d[0], setViewResult = _d[1];
var handleResult = function (startDate, endDate) {
if (!startDate || !endDate) {
return;
}
var startDateResult = format(startDate, 'yyyy/MM/dd');
var endDateResult = format(endDate, 'yyyy/MM/dd');
if (onChange && startDateResult && endDateResult) {
onChange({ startDate: startDateResult, endDate: endDateResult });
}
var viewDate = formatViewResult(startDate, endDate);
setViewResult(viewDate);
setIsCalendarVisible(false);
};
var handleCancel = function () {
setIsCalendarVisible(false);
};
return (React.createElement("div", { className: className },
label && React.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
React.createElement("div", { className: 'relative' },
React.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.createElement(ErrorMessage, { message: message(errorType) }) : null,
React.createElement("div", { className: 'absolute left-3 top-2' },
React.createElement(CalendarDaysIcon, { className: 'h-4 w-4 text-gray-500' })),
React.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.createElement(Calendar, { defaultDate: defaultValue, disabledDate: disabledDate, handleCancel: handleCancel, handleResult: handleResult, max: max, min: min })))));
}
//# sourceMappingURL=DatePicker.js.map