@jay-js/ui
Version:
A library of UI components for Jay JS with Tailwind CSS and daisyUI.
248 lines (247 loc) • 8 kB
JavaScript
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _object_without_properties(source, excluded) {
if (source == null) return {};
var target = _object_without_properties_loose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
import { Base, Box, Typography } from "@jay-js/elements";
import { Effect, render, State } from "@jay-js/system";
import { cn } from "../../utils/cn.js";
import { DatePicker } from "../date-picker/date-picker.js";
export function DateRangePicker(_param = {
tag: "div"
}) {
var { startLabel = "De", endLabel = "Até", startValue, endValue, onSelectRange, onStartChange, onEndChange, withTime = false, minDate, maxDate, color = "btn-primary", size = "btn-sm", disabled = false, locale = "pt-BR", showToday = true, layout = "horizontal", gap = "gap-4", validateRange = true } = _param, props = _object_without_properties(_param, [
"startLabel",
"endLabel",
"startValue",
"endValue",
"onSelectRange",
"onStartChange",
"onEndChange",
"withTime",
"minDate",
"maxDate",
"color",
"size",
"disabled",
"locale",
"showToday",
"layout",
"gap",
"validateRange"
]);
const startDate = State(startValue || null);
const endDate = State(endValue || null);
const startError = State(null);
const endError = State(null);
const container = Base(_object_spread_props(_object_spread({
tag: "div"
}, props), {
className: cn("flex", layout === "horizontal" ? "flex-row" : "flex-col", gap, "w-full", props.className),
onunmount: ()=>{
startDate.clear();
endDate.clear();
startError.clear();
endError.clear();
}
}));
function checkAndTriggerRange() {
const start = startDate.value;
const end = endDate.value;
if (start && end) {
if (validateRange && end < start) {
return;
}
if (onSelectRange) {
onSelectRange(new Date(start), new Date(end));
}
}
}
const startPickerContainer = Box({
className: cn("flex-1", "flex flex-col")
});
const startErrorElement = Typography({
tag: "span",
className: "label-text-alt text-error mt-1",
style: {
display: "none"
}
});
Effect(()=>{
const error = startError.value;
if (error) {
startErrorElement.textContent = error;
startErrorElement.style.display = "block";
} else {
startErrorElement.style.display = "none";
}
});
Effect(()=>{
const end = endDate.value;
const startPicker = DatePicker({
label: startLabel,
defaultDate: startValue || new Date(),
value: startValue,
onSelect: (date)=>{
startDate.set(date);
if (onStartChange) {
onStartChange(new Date(date));
}
const end = endDate.value;
if (validateRange && end && date > end) {
startError.set("Data inicial não pode ser maior que a final");
return;
}
startError.set(null);
checkAndTriggerRange();
},
withTime,
minDate,
maxDate: validateRange && end ? end : maxDate,
color,
size,
disabled,
locale,
showToday,
rangeStart: startDate.value,
rangeEnd: end
});
render(startPickerContainer, [
startPicker,
startErrorElement
]);
});
const endPickerContainer = Box({
className: cn("flex-1", "flex flex-col")
});
const endErrorElement = Typography({
tag: "span",
className: "label-text-alt text-error mt-1",
style: {
display: "none"
}
});
Effect(()=>{
const error = endError.value;
if (error) {
endErrorElement.textContent = error;
endErrorElement.style.display = "block";
} else {
endErrorElement.style.display = "none";
}
});
Effect(()=>{
const start = startDate.value;
const endPicker = DatePicker({
label: endLabel,
defaultDate: endValue || new Date(),
value: endValue,
onSelect: (date)=>{
endDate.set(date);
if (onEndChange) {
onEndChange(new Date(date));
}
const start = startDate.value;
if (validateRange && start && date < start) {
endError.set("Data final não pode ser menor que a inicial");
return;
}
endError.set(null);
checkAndTriggerRange();
},
withTime,
minDate: validateRange && start ? start : minDate,
maxDate,
color,
size,
disabled,
locale,
showToday,
rangeStart: start,
rangeEnd: endDate.value
});
render(endPickerContainer, [
endPicker,
endErrorElement
]);
});
render(container, [
startPickerContainer,
endPickerContainer
]);
return container;
}