@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
67 lines (66 loc) • 2.98 kB
JavaScript
import { insert as a, memo as m, createComponent as r, effect as w, className as c, template as p } from "solid-js/web";
import { Button as u } from "../Button/index.js";
import { PrevIcon as v } from "../PrevIcon/index.js";
import { NextIcon as b } from "../NextIcon/index.js";
import { cn as l } from "../../utils/class.js";
var g = p('<div><div class="rn-flex rn-items-center rn-justify-center rn-font-medium dark:rn-text-white"></div><div>');
const k = (e) => {
return t = g(), o = t.firstChild, i = o.nextSibling, a(o, (s = m(() => e.view() === "hour"), () => s() ? "HH" : e.view() === "minute" ? "MM" : "SS")), a(i, r(u, { get class() {
return l(`
time-analog-prev-next-btn
time-analog-prev-btn
rn-h-[2rem]
rn-w-[2rem]
rn-rounded-full
rn-text-black
disabled:rn-cursor-not-allowed
disabled:rn-bg-transparent
dark:rn-text-white
`, e.prevTimeViewBtnClass, e.prevNextTimeViewBtnClass);
}, "data-prev": !0, "data-type": "time-analog-prev-next-btn", "aria-label": "Move backward to switch to the previous time view", "data-scope": "button", "data-part": "root", get disabled() {
var n, d;
return e.view() === "hour" || e.view() === "minute" && !((n = e.allowedView) != null && n.includes("hour")) || e.view() === "second" && !((d = e.allowedView) != null && d.includes("minute"));
}, get onClick() {
return e.handlePrev;
}, get style() {
return { ...e.arrowsColor && { color: e.arrowsColor } };
}, get noButtonAnimation() {
return e.noButtonAnimation;
}, get children() {
return e.prevIcon || r(v, { class: "rn-w-[17px]", get color() {
return e.arrowsColor;
} });
} }), null), a(i, r(u, { get class() {
return l(`
time-analog-prev-next-btn
time-analog-next-btn
rn-h-[2rem]
rn-w-[2rem]
rn-rounded-full
rn-text-black
disabled:rn-cursor-not-allowed
disabled:rn-bg-transparent
dark:rn-text-white
`, e.nextTimeViewBtnClass, e.prevNextTimeViewBtnClass);
}, "data-next": !0, "aria-label": "Move forward to switch to the next time view.", "data-scope": "button", "data-part": "root", "data-type": "time-analog-prev-next-btn", get onClick() {
return e.handleNext;
}, get disabled() {
var n;
return e.view() === "second" || e.view() === "minute" && !((n = e.allowedView) != null && n.includes("second"));
}, get style() {
return { ...e.arrowsColor && { color: e.arrowsColor } };
}, get noButtonAnimation() {
return e.noButtonAnimation;
}, get children() {
return e.nextIcon || r(b, { class: "rn-w-[17px]", get color() {
return e.arrowsColor;
} });
} }), null), w(() => c(t, l(`
rn-mb-2
rn-flex
rn-justify-between`))), t;
var s, t, o, i;
};
export {
k as TimeAnalogGroupTop
};