sellmate-design-system-react 0.4.0 → 0.6.0

package/dist/components/SDateRangePicker/SDateRangePicker.d.ts

@@ -20,6 +20,11 @@ export interface SDateRangePickerProps {
     selectable?: [string, string];
     /** 최대 선택 일수 */
     maxRange?: number;
+    /**
+     * 시간(시:분) 선택 푸터 사용 여부.
+     * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다.
+     */
+    useTimePicker?: boolean;
     disabled?: boolean;
     width?: number | string;
     name?: string;
@@ -40,4 +45,4 @@ export interface SDateRangePickerProps {
     style?: CSSProperties;
 }
 /** SDateRangePicker — sd-date-range-picker 포팅. SField + SPopover(범위 캘린더). */
-export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;
+export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, useTimePicker, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;

package/dist/components/SDateRangePicker/SDateRangePicker.js

@@ -3426,25 +3426,45 @@ function monthCells(year, month) {
   return cells;
 }
 var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+function splitDateTime(v) {
+  if (!v) return { date: null, hour: "00", minute: "00" };
+  const [date = "", time = ""] = v.split(" ");
+  const [hour = "00", minute = "00"] = time.split(":");
+  return { date: date || null, hour, minute };
+}
 function RangeCalendar({
   value,
   selectable,
   maxRange,
+  useTimePicker = false,
   onSelect,
   onPendingStartChange,
   onViewChange
 }) {
   const today = todayStr();
-  const base = value?.[0] || today;
+  const initial = splitDateTime(value?.[0]);
+  const base = initial.date || today;
   const [y, setY] = useState(Number(base.split("-")[0]));
   const [m, setM] = useState(Number(base.split("-")[1]));
-  const [start, setStart] = useState(value?.[0] ?? null);
-  const [end, setEnd] = useState(value?.[1] ?? null);
+  const [start, setStart] = useState(initial.date);
+  const [end, setEnd] = useState(splitDateTime(value?.[1]).date);
   const [hover, setHover] = useState(null);
+  const [sH, setSH] = useState(initial.hour);
+  const [sM, setSM] = useState(initial.minute);
+  const [eH, setEH] = useState(splitDateTime(value?.[1]).hour);
+  const [eM, setEM] = useState(splitDateTime(value?.[1]).minute);
+  const lastEmitted = useRef("");
   useEffect(() => {
-    setStart(value?.[0] ?? null);
-    setEnd(value?.[1] ?? null);
-  }, [value]);
+    if (useTimePicker && JSON.stringify(value) === lastEmitted.current) return;
+    const s = splitDateTime(value?.[0]);
+    const e = splitDateTime(value?.[1]);
+    setStart(s.date);
+    setEnd(e.date);
+    setSH(s.hour);
+    setSM(s.minute);
+    setEH(e.hour);
+    setEM(e.minute);
+  }, [value, useTimePicker]);
   const setBase = (ny, nm) => {
     setY(ny);
     setM(nm);
@@ -3488,18 +3508,53 @@ function RangeCalendar({
   const hasRange = !!(rStart && rEnd && rStart !== rEnd);
   const inRange = (d) => !!(rStart && rEnd && d > rStart && d < rEnd);
   const RANGE_BG = "var(--cmp-datepicker-calendar-range-bg)";
+  const pad = (v) => String(Number(v) || 0).padStart(2, "0");
+  const emit = (dateStart, dateEnd, time) => {
+    const t = time ?? { sH, sM, eH, eM };
+    const range = useTimePicker ? [`${dateStart} ${pad(t.sH)}:${pad(t.sM)}`, `${dateEnd} ${pad(t.eH)}:${pad(t.eM)}`] : [dateStart, dateEnd];
+    lastEmitted.current = JSON.stringify(range);
+    onSelect(range);
+  };
   const click = (d) => {
     if (isDisabled(d)) return;
     if (!start || complete || d < start) {
       setStart(d);
       setEnd(null);
       setHover(null);
+      if (useTimePicker) {
+        setSH("00");
+        setSM("00");
+        setEH("23");
+        setEM("59");
+      }
       onPendingStartChange?.(d);
       return;
     }
     setEnd(d);
     onPendingStartChange?.(null);
-    onSelect([start, d]);
+    emit(start, d, useTimePicker ? { sH, sM, eH: "23", eM: "59" } : void 0);
+  };
+  const changeTime = (which, part, raw) => {
+    const digits = raw.replace(/\D/g, "").slice(0, 2);
+    const max = part === "h" ? 23 : 59;
+    const next = digits !== "" && Number(digits) > max ? String(max) : digits;
+    const nextTime = { sH, sM, eH, eM };
+    if (which === "start") nextTime[part === "h" ? "sH" : "sM"] = next;
+    else nextTime[part === "h" ? "eH" : "eM"] = next;
+    setSH(nextTime.sH);
+    setSM(nextTime.sM);
+    setEH(nextTime.eH);
+    setEM(nextTime.eM);
+    if (start && end) emit(start, end, nextTime);
+  };
+  const blurTime = (which, part) => {
+    if (which === "start") {
+      if (part === "h") setSH(pad(sH));
+      else setSM(pad(sM));
+    } else {
+      if (part === "h") setEH(pad(eH));
+      else setEM(pad(eM));
+    }
   };
   const GRID_COLS = "grid grid-cols-[repeat(7,var(--cmp-datepicker-calendar-day-width))]";
   const renderPanel = (gy, gm, isLeft) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--cmp-datepicker-calendar-gap)]", children: [
@@ -3574,35 +3629,120 @@ function RangeCalendar({
       );
     }) })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: "inline-flex h-[364px] flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none", children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-[var(--cmp-datepicker-calendar-gap)] text-[14px] font-medium leading-[24px]", children: [
-        /* @__PURE__ */ jsx(SGhostButton, { icon: "chevronLeft", size: "xxs", ariaLabel: "prevYear", onClick: goPrevYear }),
-        /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center", children: y }),
-        /* @__PURE__ */ jsx(SGhostButton, { icon: "chevronRight", size: "xxs", ariaLabel: "nextYear", onClick: goNextYear })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: goToday,
-          className: "absolute right-0 h-[24px] min-w-[37px] cursor-pointer bg-transparent text-center text-[12px] font-medium leading-[24px] text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:underline",
-          children: "\uC624\uB298"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
-      renderPanel(y, m, true),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "w-px shrink-0 self-stretch bg-[var(--cmp-datepicker-calendar-range-divider)]",
-          "aria-hidden": true
-        }
+  const renderTimeSection = (which, date, suffix) => {
+    const active = !!date;
+    const [yy = "", mm = "", dd = ""] = date ? date.split("-") : [];
+    const hour = which === "start" ? sH : eH;
+    const minute = which === "start" ? sM : eM;
+    const num = (n, strip) => active && n !== "" ? strip ? String(Number(n)) : n : "-";
+    const INPUT_CLS = "h-[var(--cmp-datepicker-sm-height)] w-[40px] rounded-[var(--cmp-datepicker-sm-radius)] border border-solid border-[color:var(--cmp-datepicker-border-default)] bg-[var(--cmp-datepicker-bg-default)] text-center text-[12px] font-medium leading-[20px] text-[color:var(--cmp-datepicker-text-default)] outline-none placeholder:text-[color:var(--cmp-datepicker-text-disabled)] focus:border-[color:var(--cmp-datepicker-border-focus)] disabled:cursor-not-allowed";
+    const LABEL = "text-[color:var(--cmp-datepicker-calendar-time-date-label)]";
+    const UNIT = "text-[color:var(--cmp-datepicker-calendar-time-date-unit)]";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-1 items-center justify-center gap-[var(--cmp-datepicker-calendar-time-section-gap)] rounded-[var(--cmp-datepicker-calendar-time-radius)] px-[var(--cmp-datepicker-calendar-time-paddingX)] py-[var(--cmp-datepicker-calendar-time-paddingY)] text-[12px] font-medium leading-[20px]",
+          active ? "bg-[var(--cmp-datepicker-calendar-time-bg-selected)]" : "bg-[var(--cmp-datepicker-calendar-time-bg-default)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-time-date-gap)]", children: [
+            /* @__PURE__ */ jsx("span", { className: LABEL, children: num(yy, false) }),
+            /* @__PURE__ */ jsx("span", { className: UNIT, children: "\uB144" }),
+            /* @__PURE__ */ jsx("span", { className: LABEL, children: num(mm, true) }),
+            /* @__PURE__ */ jsx("span", { className: UNIT, children: "\uC6D4" }),
+            /* @__PURE__ */ jsx("span", { className: LABEL, children: num(dd, true) }),
+            /* @__PURE__ */ jsx("span", { className: UNIT, children: "\uC77C" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-time-unit-gap)]", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                maxLength: 2,
+                "aria-label": `${suffix} \uC2DC`,
+                disabled: !active,
+                value: active ? hour : "",
+                placeholder: "--",
+                onChange: (e) => changeTime(which, "h", e.target.value),
+                onBlur: () => blurTime(which, "h"),
+                className: INPUT_CLS
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: LABEL, children: ":" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                maxLength: 2,
+                "aria-label": `${suffix} \uBD84`,
+                disabled: !active,
+                value: active ? minute : "",
+                placeholder: "--",
+                onChange: (e) => changeTime(which, "m", e.target.value),
+                onBlur: () => blurTime(which, "m"),
+                className: INPUT_CLS
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: UNIT, children: suffix })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex flex-col gap-[var(--cmp-datepicker-calendar-gap)] rounded-[var(--cmp-datepicker-calendar-radius)] bg-[var(--cmp-datepicker-calendar-bg)] p-[var(--cmp-datepicker-calendar-paddingXY)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.2)] select-none",
+        useTimePicker ? "h-auto" : "h-[364px]"
       ),
-      renderPanel(nextMonthYM.year, nextMonthYM.month, false)
-    ] })
-  ] });
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-[var(--cmp-datepicker-calendar-gap)] text-[14px] font-medium leading-[24px]", children: [
+            /* @__PURE__ */ jsx(SGhostButton, { icon: "chevronLeft", size: "xxs", ariaLabel: "prevYear", onClick: goPrevYear }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-[40px] items-center justify-center text-center", children: y }),
+            /* @__PURE__ */ jsx(SGhostButton, { icon: "chevronRight", size: "xxs", ariaLabel: "nextYear", onClick: goNextYear })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: goToday,
+              className: "absolute right-0 h-[24px] min-w-[37px] cursor-pointer bg-transparent text-center text-[12px] font-medium leading-[24px] text-[color:var(--cmp-datepicker-calendar-day-default-text)] hover:underline",
+              children: "\uC624\uB298"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-range-panelGap)]", children: [
+          renderPanel(y, m, true),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "w-px shrink-0 self-stretch bg-[var(--cmp-datepicker-calendar-range-divider)]",
+              "aria-hidden": true
+            }
+          ),
+          renderPanel(nextMonthYM.year, nextMonthYM.month, false)
+        ] }),
+        useTimePicker && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-px w-full bg-[var(--cmp-datepicker-calendar-range-divider)]",
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--cmp-datepicker-calendar-time-gap)]", children: [
+            renderTimeSection("start", start, "\uBD80\uD130"),
+            renderTimeSection("end", end, "\uAE4C\uC9C0")
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function SDateRangePicker({
   value,
@@ -3612,6 +3752,7 @@ function SDateRangePicker({
   placeholder = "YYYY-MM-DD ~ YYYY-MM-DD",
   selectable,
   maxRange,
+  useTimePicker = false,
   disabled = false,
   width,
   name,
@@ -3655,8 +3796,9 @@ function SDateRangePicker({
     setPendingStart(null);
     onValueChange?.(r);
     if (rules && rules.length > 0) setRuleError(runRules(r, rules));
-    setOpen(false);
+    if (!useTimePicker) setOpen(false);
   };
+  const resolvedPlaceholder = useTimePicker && placeholder === "YYYY-MM-DD ~ YYYY-MM-DD" ? "YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm" : placeholder;
   return /* @__PURE__ */ jsx(
     SField,
     {
@@ -3723,7 +3865,7 @@ function SDateRangePicker({
                         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-right", children: startText }),
                         /* @__PURE__ */ jsx("span", { className: "px-[4px]", children: "~" }),
                         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: endText })
-                      ] }) : placeholder
+                      ] }) : resolvedPlaceholder
                     }
                   )
                 ]
@@ -3742,6 +3884,7 @@ function SDateRangePicker({
                     value: value ?? null,
                     selectable,
                     maxRange,
+                    useTimePicker,
                     onSelect: select,
                     onPendingStartChange: setPendingStart,
                     onViewChange