@jackiemacklein/nettz-utils
Version:
Serviços de imagem, e-mail, códigos de barras, utilitários numéricos e componentes React para apps Node.js com TypeScript
98 lines (97 loc) • 4.39 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_multi_date_picker_1 = __importDefault(require("react-multi-date-picker"));
require("react-multi-date-picker/styles/colors/red.css");
require("react-multi-date-picker/styles/layouts/mobile.css");
const gregorian_pt_br_1 = __importDefault(require("react-date-object/locales/gregorian_pt_br"));
const date_panel_1 = __importDefault(require("react-multi-date-picker/plugins/date_panel"));
const DateRangePicker = ({ value, onChange, range = true }) => {
// Converte para o formato aceito pelo componente
// const pickerValue = value?.startDate && value?.endDate ? [new DateObject(value.startDate), new DateObject(value.endDate)] : [];
const ref = (0, react_1.useRef)(null);
const handleClickOutside = (event) => {
var _a, _b;
const target = event.target;
const isClickOutside = !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target));
if (isClickOutside) {
(_b = ref.current) === null || _b === void 0 ? void 0 : _b.closeCalendar();
}
};
(0, react_1.useEffect)(() => {
document.addEventListener("click", handleClickOutside, true);
return () => document.removeEventListener("click", handleClickOutside, true);
}, []);
return ((0, jsx_runtime_1.jsx)(react_multi_date_picker_1.default, { style: { width: "100%" },
// value={[pickerValue]}
inputClass: "form-control", required: true, numberOfMonths: 2, containerStyle: { width: "100%" }, rangeHover: true, range: range, onlyShowInRangeDates: true, locale: gregorian_pt_br_1.default,
// calendar={gregorian}
multiple: false, format: "DD/MM/YYYY", editable: false, onChange: dates => {
var _a;
if (range) {
//@ts-ignore
if (dates.length === 1) {
console.log("dates ", dates);
onChange({
//@ts-ignore
startDate: dates[0].toDate(),
endDate: null,
});
//@ts-ignore
}
else if (dates.length === 2) {
console.log("dates 2", dates);
onChange({
//@ts-ignore
startDate: dates[0].toDate(),
//@ts-ignore
endDate: dates[1].toDate(),
});
}
else {
onChange({ startDate: null, endDate: null });
}
}
else {
//@ts-ignore
onChange({ startDate: (_a = dates[0]) === null || _a === void 0 ? void 0 : _a.toDate(), endDate: null });
}
}, plugins: !range ? [(0, jsx_runtime_1.jsx)(date_panel_1.default, {})] : [], render: (0, jsx_runtime_1.jsx)("input", { className: "nettz-input", placeholder: "Selecione o per\u00EDodo", style: { width: "100%" } }), calendarPosition: "bottom", ref: ref, onClose: () => {
console.log("onClose");
} })
// <DatePicker
// value={pickerValue}
// multiple={false}
// onChange={(range: DateObject[] | null) => {
// console.log("range", range);
// if (range && range.length === 2) {
// onChange({
// startDate: range[0]?.isValid ? range[0].toDate() : null,
// endDate: range[1]?.isValid ? range[1].toDate() : null,
// });
// } else {
// onChange({ startDate: null, endDate: null });
// }
// }}
// range
// onClose={() => {
// console.log("close");
// }}
// format="YYYY-MM-DD"
// locale={gregorian_pt_br}
// numberOfMonths={2}
// plugins={[]}
// className="red"
// style={{ width: "100%" }}
// render={<input placeholder="Selecione o período" style={{ width: "100%" }} />}
// currentDate={new Date()}
// // Atalhos customizados
// // shortcuts={getShortcuts()}
// />
);
};
exports.default = DateRangePicker;