lupine.components 1.1.55 → 1.1.56

package/src/components/action-sheet-date.tsx

@@ -1,299 +1,299 @@
-import { CssProps, RefProps, VNode } from 'lupine.web';
-import { HtmlVar } from './html-var';
-import { ActionSheet, ActionSheetCloseProps, ActionSheetCloseReasonProps } from './action-sheet';
-
-export type ActionSheetDatePickerOrder = 'YMD' | 'DMY';
-export type ActionSheetDatePickerFormat = 'YMD' | 'MD' | 'D';
-
-export type ActionSheetDatePickerProps = {
-  /** Initial date value. Format depends on format prop, defaults to "YYYY-MM-DD" */
-  value?: string;
-  title?: string;
-  /** Format of the picker. Default: 'YMD' */
-  format?: ActionSheetDatePickerFormat;
-  /** Column order. Default: 'YMD' (Year | Month | Day) */
-  order?: ActionSheetDatePickerOrder;
-  /** Month labels. Defaults to English month names. Length determines month count. */
-  months?: string[];
-  /** Years shown above/below current year. Default: 100 (range = currentYear-N to currentYear+N) */
-  yearRange?: number;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-  zIndex?: string;
-};
-
-const DEFAULT_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
-// Year range: ±yearRange from current year (resolved at call time)
-const CURRENT_YEAR = new Date().getFullYear();
-
-const ITEM_H = 44;
-const VISIBLE = 5; // number of visible rows (must be odd)
-const PAD = Math.floor(VISIBLE / 2); // 2 rows of padding above/below
-
-/**
- * Mobile-friendly date picker shown via an ActionSheet slide-up panel.
- * Shows Year / Month / Day (or Day / Month / Year) columns.
- * Returns "YYYY-MM-DD" or undefined if cancelled.
- */
-export const ActionSheetDatePicker = async ({
-  value = '',
-  title = '',
-  format = 'YMD',
-  order = 'YMD',
-  months = DEFAULT_MONTHS,
-  yearRange = 100,
-  confirmButtonText = 'OK',
-  cancelButtonText = 'Cancel',
-  zIndex,
-}: ActionSheetDatePickerProps): Promise<string | undefined> => {
-  // Parse initial date
-  const today = new Date();
-
-  let parts: string[] = [];
-  if (format === 'MD') {
-    parts = value.match(/^(\d{2})-(\d{2})$/) ?? [];
-    parts.unshift(''); // Shift empty year so indices [1]/[2] match month/day fallback logic below
-    parts.unshift(''); // Padding to push match groups to [2][3]
-  } else if (format === 'D') {
-    parts = value.match(/^(\d{2})$/) ?? [];
-    parts.unshift('');
-    parts.unshift('');
-    parts.unshift(''); // Push match group to [3]
-  } else {
-    parts = value.match(/^(\d{4})-(\d{2})-(\d{2})$/) ?? [];
-  }
-
-  const initialYear = parts[1] ? parseInt(parts[1], 10) : today.getFullYear();
-  const initialMonth = parts[2] ? parseInt(parts[2], 10) : today.getMonth() + 1;
-  const initialDay = parts[3] ? parseInt(parts[3], 10) : today.getDate();
-
-  const YEAR_COUNT = yearRange * 2 + 1;
-  const START_YEAR = CURRENT_YEAR - yearRange;
-
-  return new Promise(async (resolve) => {
-    let handleClose: ActionSheetCloseProps;
-
-    // One ref per column — values are read from scrollTop at confirm time
-    const yearRef: RefProps = {};
-    const monthRef: RefProps = {};
-    const dayRef: RefProps = {};
-
-    const getIdx = (colRef: RefProps) => {
-      if (!colRef.current) return 0;
-      return Math.round((colRef.current as HTMLElement).scrollTop / ITEM_H);
-    };
-
-    const onConfirm = () => {
-      const year = START_YEAR + getIdx(yearRef);
-      const month = 1 + getIdx(monthRef);
-      const day = 1 + getIdx(dayRef);
-
-      let result = '';
-      if (format === 'D') {
-        result = String(day).padStart(2, '0');
-      } else if (format === 'MD') {
-        result = [String(month).padStart(2, '0'), String(day).padStart(2, '0')].join('-');
-      } else {
-        result = [String(year).padStart(4, '0'), String(month).padStart(2, '0'), String(day).padStart(2, '0')].join(
-          '-'
-        );
-      }
-
-      resolve(result);
-      handleClose('confirm');
-    };
-    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
-      if (reason !== 'confirm') resolve(undefined);
-    };
-
-    /**
-     * Build a scrollable column.
-     * Carousel pattern: scroll to item's offsetTop on load; read scrollTop on confirm.
-     */
-    const buildColumn = (labels: string[], initialIdx: number, colRef: RefProps, onScroll?: () => void) => {
-      colRef.onLoad = async () => {
-        const el = colRef.current as HTMLElement;
-        const items = el.querySelectorAll('.dp-item');
-        if (items[initialIdx]) {
-          // offsetTop accounts for the PAD padding divs above the items
-          el.scrollTop = (items[initialIdx] as HTMLElement).offsetTop - PAD * ITEM_H;
-        }
-      };
-
-      return (
-        <div class='col' ref={colRef} onScroll={onScroll}>
-          {Array.from({ length: PAD }, (_, i) => (
-            <div class='dp-pad' key={`t${i}`} />
-          ))}
-          {labels.map((label, i) => (
-            <div class='dp-item' key={i}>
-              {label}
-            </div>
-          ))}
-          {Array.from({ length: PAD }, (_, i) => (
-            <div class='dp-pad' key={`b${i}`} />
-          ))}
-        </div>
-      );
-    };
-
-    const buildDynamicColumn = (labelsVar: HtmlVar, initialIdx: number, colRef: RefProps) => {
-      colRef.onLoad = async () => {
-        const el = colRef.current as HTMLElement;
-        const items = el.querySelectorAll('.dp-item');
-        if (items[initialIdx]) {
-          el.scrollTop = (items[initialIdx] as HTMLElement).offsetTop - PAD * ITEM_H;
-        }
-      };
-
-      return (
-        <div class='col' ref={colRef}>
-          {labelsVar.node}
-        </div>
-      );
-    };
-
-    const generateDaysDOM = (maxDays: number) => {
-      const labels = Array.from({ length: maxDays }, (_, i) => String(i + 1).padStart(2, '0'));
-      return (
-        <>
-          {Array.from({ length: PAD }, (_, i) => (
-            <div class='dp-pad' key={`t${i}`} />
-          ))}
-          {labels.map((label: string, i: number) => (
-            <div class='dp-item' key={i}>
-              {label}
-            </div>
-          ))}
-          {Array.from({ length: PAD }, (_, i) => (
-            <div class='dp-pad' key={`b${i}`} />
-          ))}
-        </>
-      );
-    };
-
-    const getMaxDays = (year: number, month: number) => {
-      if (format === 'D') return 31;
-      if (format === 'MD') return new Date(2000, month, 0).getDate(); // Leap year forced max
-      return new Date(year, month, 0).getDate();
-    };
-
-    let currentMaxDays = 0;
-    let scrollTimeout: any;
-    const handleDateScroll = () => {
-      clearTimeout(scrollTimeout);
-      scrollTimeout = setTimeout(() => {
-        // Read current selected year and month based on scroll heights
-        const curYear = format === 'MD' ? 2000 : START_YEAR + getIdx(yearRef);
-        const curMonth = 1 + getIdx(monthRef);
-
-        // Calculate the maximum allowed days for this selection
-        const maxDays = getMaxDays(curYear, curMonth);
-
-        // If the number of days changed, update the reactive var
-        if (currentMaxDays !== maxDays) {
-          currentMaxDays = maxDays;
-          daysVar.value = generateDaysDOM(maxDays);
-
-          // If the currently selected day is now out of bounds (e.g. Feb 30th), clamp it down.
-          const currentDayIdx = getIdx(dayRef);
-          if (currentDayIdx >= maxDays) {
-            setTimeout(() => {
-              if (dayRef.current) {
-                const el = dayRef.current as HTMLElement;
-                const items = el.querySelectorAll('.dp-item');
-                const targetItem = items[maxDays - 1] as HTMLElement;
-                if (targetItem) {
-                  el.scrollTo({ top: targetItem.offsetTop - PAD * ITEM_H, behavior: 'smooth' });
-                }
-              }
-            }, 50);
-          }
-        }
-      }, 150);
-    };
-
-    const years = Array.from({ length: YEAR_COUNT }, (_, i) => String(START_YEAR + i));
-
-    const initialYearIdx = Math.max(0, Math.min(YEAR_COUNT - 1, initialYear - START_YEAR));
-    const initialMonthIdx = Math.max(0, Math.min(months.length - 1, initialMonth - 1));
-    currentMaxDays = getMaxDays(START_YEAR + initialYearIdx, initialMonthIdx + 1);
-
-    // Day array is reactive, max based on initial selection constraints
-    const daysVar = new HtmlVar(generateDaysDOM(currentMaxDays));
-    const initialDayIdx = Math.max(0, Math.min(currentMaxDays - 1, initialDay - 1));
-
-    const yearCol = buildColumn(years, initialYearIdx, yearRef, handleDateScroll);
-    const monthCol = buildColumn(months, initialMonthIdx, monthRef, handleDateScroll);
-    const dayCol = buildDynamicColumn(daysVar, initialDayIdx, dayRef);
-
-    let orderedCols: any[] = [];
-    if (format === 'D') {
-      orderedCols = [dayCol];
-    } else if (format === 'MD') {
-      orderedCols = order === 'DMY' ? [dayCol, monthCol] : [monthCol, dayCol];
-    } else {
-      orderedCols = order === 'DMY' ? [dayCol, monthCol, yearCol] : [yearCol, monthCol, dayCol];
-    }
-
-    const pickerBodyCss: CssProps = {
-      borderTop: '1px solid var(--primary-border-color)',
-      overflow: 'hidden', // prevent act-sheet-content from adding outer scrollbar
-      '.picker-body': {
-        display: 'flex',
-        height: `${ITEM_H * VISIBLE}px`,
-        position: 'relative',
-        // Center-selection highlight band
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          top: `${ITEM_H * PAD}px`,
-          left: 0,
-          right: 0,
-          height: `${ITEM_H}px`,
-          backgroundColor: 'var(--activatable-bg-color-hover, rgba(0,0,0,0.05))',
-          borderRadius: '6px',
-          pointerEvents: 'none',
-          opacity: 0.4,
-        },
-      },
-      '.col': {
-        flex: 1,
-        overflowY: 'scroll',
-        scrollSnapType: 'y mandatory',
-        scrollbarWidth: 'none',
-        '&::-webkit-scrollbar': { display: 'none' },
-        '.dp-pad': { height: `${ITEM_H}px` },
-        '.dp-item': {
-          scrollSnapAlign: 'center',
-          height: `${ITEM_H}px`,
-          lineHeight: `${ITEM_H}px`,
-          textAlign: 'center',
-          fontSize: '18px',
-          cursor: 'pointer',
-          color: 'var(--secondary-color, #aaa)',
-        },
-      },
-    };
-
-    const pickerBody = (
-      <div css={pickerBodyCss}>
-        <div class='picker-body'>{orderedCols}</div>
-      </div>
-    );
-
-    handleClose = await ActionSheet.show({
-      title,
-      children: pickerBody,
-      contentMaxHeight: '33vh',
-      closeEvent,
-      closeWhenClickOutside: true,
-      zIndex,
-      confirmButtonText,
-      handleConfirmClicked: onConfirm,
-      cancelButtonText,
-      buttonsPosition: 'header',
-    });
-  });
-};
+import { CssProps, RefProps, VNode } from 'lupine.web';
+import { HtmlVar } from './html-var';
+import { ActionSheet, ActionSheetCloseProps, ActionSheetCloseReasonProps } from './action-sheet';
+
+export type ActionSheetDatePickerOrder = 'YMD' | 'DMY';
+export type ActionSheetDatePickerFormat = 'YMD' | 'MD' | 'D';
+
+export type ActionSheetDatePickerProps = {
+  /** Initial date value. Format depends on format prop, defaults to "YYYY-MM-DD" */
+  value?: string;
+  title?: string;
+  /** Format of the picker. Default: 'YMD' */
+  format?: ActionSheetDatePickerFormat;
+  /** Column order. Default: 'YMD' (Year | Month | Day) */
+  order?: ActionSheetDatePickerOrder;
+  /** Month labels. Defaults to English month names. Length determines month count. */
+  months?: string[];
+  /** Years shown above/below current year. Default: 100 (range = currentYear-N to currentYear+N) */
+  yearRange?: number;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  zIndex?: string;
+};
+
+const DEFAULT_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+// Year range: ±yearRange from current year (resolved at call time)
+const CURRENT_YEAR = new Date().getFullYear();
+
+const ITEM_H = 44;
+const VISIBLE = 5; // number of visible rows (must be odd)
+const PAD = Math.floor(VISIBLE / 2); // 2 rows of padding above/below
+
+/**
+ * Mobile-friendly date picker shown via an ActionSheet slide-up panel.
+ * Shows Year / Month / Day (or Day / Month / Year) columns.
+ * Returns "YYYY-MM-DD" or undefined if cancelled.
+ */
+export const ActionSheetDatePicker = async ({
+  value = '',
+  title = '',
+  format = 'YMD',
+  order = 'YMD',
+  months = DEFAULT_MONTHS,
+  yearRange = 100,
+  confirmButtonText = 'OK',
+  cancelButtonText = 'Cancel',
+  zIndex,
+}: ActionSheetDatePickerProps): Promise<string | undefined> => {
+  // Parse initial date
+  const today = new Date();
+
+  let parts: string[] = [];
+  if (format === 'MD') {
+    parts = value.match(/^(\d{2})-(\d{2})$/) ?? [];
+    parts.unshift(''); // Shift empty year so indices [1]/[2] match month/day fallback logic below
+    parts.unshift(''); // Padding to push match groups to [2][3]
+  } else if (format === 'D') {
+    parts = value.match(/^(\d{2})$/) ?? [];
+    parts.unshift('');
+    parts.unshift('');
+    parts.unshift(''); // Push match group to [3]
+  } else {
+    parts = value.match(/^(\d{4})-(\d{2})-(\d{2})$/) ?? [];
+  }
+
+  const initialYear = parts[1] ? parseInt(parts[1], 10) : today.getFullYear();
+  const initialMonth = parts[2] ? parseInt(parts[2], 10) : today.getMonth() + 1;
+  const initialDay = parts[3] ? parseInt(parts[3], 10) : today.getDate();
+
+  const YEAR_COUNT = yearRange * 2 + 1;
+  const START_YEAR = CURRENT_YEAR - yearRange;
+
+  return new Promise(async (resolve) => {
+    let handleClose: ActionSheetCloseProps;
+
+    // One ref per column — values are read from scrollTop at confirm time
+    const yearRef: RefProps = {};
+    const monthRef: RefProps = {};
+    const dayRef: RefProps = {};
+
+    const getIdx = (colRef: RefProps) => {
+      if (!colRef.current) return 0;
+      return Math.round((colRef.current as HTMLElement).scrollTop / ITEM_H);
+    };
+
+    const onConfirm = () => {
+      const year = START_YEAR + getIdx(yearRef);
+      const month = 1 + getIdx(monthRef);
+      const day = 1 + getIdx(dayRef);
+
+      let result = '';
+      if (format === 'D') {
+        result = String(day).padStart(2, '0');
+      } else if (format === 'MD') {
+        result = [String(month).padStart(2, '0'), String(day).padStart(2, '0')].join('-');
+      } else {
+        result = [String(year).padStart(4, '0'), String(month).padStart(2, '0'), String(day).padStart(2, '0')].join(
+          '-'
+        );
+      }
+
+      resolve(result);
+      handleClose('confirm');
+    };
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      if (reason !== 'confirm') resolve(undefined);
+    };
+
+    /**
+     * Build a scrollable column.
+     * Carousel pattern: scroll to item's offsetTop on load; read scrollTop on confirm.
+     */
+    const buildColumn = (labels: string[], initialIdx: number, colRef: RefProps, onScroll?: () => void) => {
+      colRef.onLoad = async () => {
+        const el = colRef.current as HTMLElement;
+        const items = el.querySelectorAll('.dp-item');
+        if (items[initialIdx]) {
+          // offsetTop accounts for the PAD padding divs above the items
+          el.scrollTop = (items[initialIdx] as HTMLElement).offsetTop - PAD * ITEM_H;
+        }
+      };
+
+      return (
+        <div class='col' ref={colRef} onScroll={onScroll}>
+          {Array.from({ length: PAD }, (_, i) => (
+            <div class='dp-pad' key={`t${i}`} />
+          ))}
+          {labels.map((label, i) => (
+            <div class='dp-item' key={i}>
+              {label}
+            </div>
+          ))}
+          {Array.from({ length: PAD }, (_, i) => (
+            <div class='dp-pad' key={`b${i}`} />
+          ))}
+        </div>
+      );
+    };
+
+    const buildDynamicColumn = (labelsVar: HtmlVar, initialIdx: number, colRef: RefProps) => {
+      colRef.onLoad = async () => {
+        const el = colRef.current as HTMLElement;
+        const items = el.querySelectorAll('.dp-item');
+        if (items[initialIdx]) {
+          el.scrollTop = (items[initialIdx] as HTMLElement).offsetTop - PAD * ITEM_H;
+        }
+      };
+
+      return (
+        <div class='col' ref={colRef}>
+          {labelsVar.node}
+        </div>
+      );
+    };
+
+    const generateDaysDOM = (maxDays: number) => {
+      const labels = Array.from({ length: maxDays }, (_, i) => String(i + 1).padStart(2, '0'));
+      return (
+        <>
+          {Array.from({ length: PAD }, (_, i) => (
+            <div class='dp-pad' key={`t${i}`} />
+          ))}
+          {labels.map((label: string, i: number) => (
+            <div class='dp-item' key={i}>
+              {label}
+            </div>
+          ))}
+          {Array.from({ length: PAD }, (_, i) => (
+            <div class='dp-pad' key={`b${i}`} />
+          ))}
+        </>
+      );
+    };
+
+    const getMaxDays = (year: number, month: number) => {
+      if (format === 'D') return 31;
+      if (format === 'MD') return new Date(2000, month, 0).getDate(); // Leap year forced max
+      return new Date(year, month, 0).getDate();
+    };
+
+    let currentMaxDays = 0;
+    let scrollTimeout: any;
+    const handleDateScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        // Read current selected year and month based on scroll heights
+        const curYear = format === 'MD' ? 2000 : START_YEAR + getIdx(yearRef);
+        const curMonth = 1 + getIdx(monthRef);
+
+        // Calculate the maximum allowed days for this selection
+        const maxDays = getMaxDays(curYear, curMonth);
+
+        // If the number of days changed, update the reactive var
+        if (currentMaxDays !== maxDays) {
+          currentMaxDays = maxDays;
+          daysVar.value = generateDaysDOM(maxDays);
+
+          // If the currently selected day is now out of bounds (e.g. Feb 30th), clamp it down.
+          const currentDayIdx = getIdx(dayRef);
+          if (currentDayIdx >= maxDays) {
+            setTimeout(() => {
+              if (dayRef.current) {
+                const el = dayRef.current as HTMLElement;
+                const items = el.querySelectorAll('.dp-item');
+                const targetItem = items[maxDays - 1] as HTMLElement;
+                if (targetItem) {
+                  el.scrollTo({ top: targetItem.offsetTop - PAD * ITEM_H, behavior: 'smooth' });
+                }
+              }
+            }, 50);
+          }
+        }
+      }, 150);
+    };
+
+    const years = Array.from({ length: YEAR_COUNT }, (_, i) => String(START_YEAR + i));
+
+    const initialYearIdx = Math.max(0, Math.min(YEAR_COUNT - 1, initialYear - START_YEAR));
+    const initialMonthIdx = Math.max(0, Math.min(months.length - 1, initialMonth - 1));
+    currentMaxDays = getMaxDays(START_YEAR + initialYearIdx, initialMonthIdx + 1);
+
+    // Day array is reactive, max based on initial selection constraints
+    const daysVar = new HtmlVar(generateDaysDOM(currentMaxDays));
+    const initialDayIdx = Math.max(0, Math.min(currentMaxDays - 1, initialDay - 1));
+
+    const yearCol = buildColumn(years, initialYearIdx, yearRef, handleDateScroll);
+    const monthCol = buildColumn(months, initialMonthIdx, monthRef, handleDateScroll);
+    const dayCol = buildDynamicColumn(daysVar, initialDayIdx, dayRef);
+
+    let orderedCols: any[] = [];
+    if (format === 'D') {
+      orderedCols = [dayCol];
+    } else if (format === 'MD') {
+      orderedCols = order === 'DMY' ? [dayCol, monthCol] : [monthCol, dayCol];
+    } else {
+      orderedCols = order === 'DMY' ? [dayCol, monthCol, yearCol] : [yearCol, monthCol, dayCol];
+    }
+
+    const pickerBodyCss: CssProps = {
+      borderTop: '1px solid var(--primary-border-color)',
+      overflow: 'hidden', // prevent act-sheet-content from adding outer scrollbar
+      '.picker-body': {
+        display: 'flex',
+        height: `${ITEM_H * VISIBLE}px`,
+        position: 'relative',
+        // Center-selection highlight band
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: `${ITEM_H * PAD}px`,
+          left: 0,
+          right: 0,
+          height: `${ITEM_H}px`,
+          backgroundColor: 'var(--activatable-bg-color-hover, rgba(0,0,0,0.05))',
+          borderRadius: '6px',
+          pointerEvents: 'none',
+          opacity: 0.4,
+        },
+      },
+      '.col': {
+        flex: 1,
+        overflowY: 'scroll',
+        scrollSnapType: 'y mandatory',
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': { display: 'none' },
+        '.dp-pad': { height: `${ITEM_H}px` },
+        '.dp-item': {
+          scrollSnapAlign: 'center',
+          height: `${ITEM_H}px`,
+          lineHeight: `${ITEM_H}px`,
+          textAlign: 'center',
+          fontSize: '18px',
+          cursor: 'pointer',
+          color: 'var(--secondary-color, #aaa)',
+        },
+      },
+    };
+
+    const pickerBody = (
+      <div css={pickerBodyCss}>
+        <div class='picker-body'>{orderedCols}</div>
+      </div>
+    );
+
+    handleClose = await ActionSheet.show({
+      title,
+      children: pickerBody,
+      contentMaxHeight: '33vh',
+      closeEvent,
+      closeWhenClickOutside: true,
+      zIndex,
+      confirmButtonText,
+      handleConfirmClicked: onConfirm,
+      cancelButtonText,
+      buttonsPosition: 'header',
+    });
+  });
+};