@gcsa/console-react 0.1.0

package/src/GcsaDatePicker.tsx

@@ -0,0 +1,284 @@
+import { useCallback, useMemo } from 'react';
+import { DatePicker, parseDate, type UseDatePickerContext } from '@ark-ui/react/date-picker';
+import { Portal } from '@ark-ui/react/portal';
+import {
+  getGcsaLocaleMessages,
+  getGcsaStartOfWeek,
+  createGcsaPopupPositioning,
+  type GcsaConsoleLocale,
+  type GcsaDatePickerMode
+} from '@gcsa/console-core';
+import { GcsaIcon } from './GcsaIcon';
+import { GcsaSelect } from './GcsaSelect';
+import { useGcsaLocale } from './hooks/useGcsaLocale';
+import {
+  gcsaDatePickerCellsToOptions,
+  gcsaDatePickerFormat,
+  gcsaDatePickerParse,
+  gcsaDateValueToOutputString,
+  gcsaNormalizeDateBoundary,
+  gcsaStringToDateValues
+} from './utils/gcsaDateValue';
+
+export type GcsaDatePickerProps = {
+  value?: string;
+  placeholder?: string;
+  /** 选择粒度：`date` 为 YYYY-MM-DD，`month` 为 YYYY-MM */
+  picker?: GcsaDatePickerMode;
+  /** 语言；未传时读取 GcsaConfigProvider */
+  locale?: GcsaConsoleLocale;
+  disabled?: boolean;
+  invalid?: boolean;
+  min?: string;
+  max?: string;
+  className?: string;
+  onValueChange?: (value: string) => void;
+};
+
+type DatePickerContext = UseDatePickerContext;
+
+function GcsaDatePickerMonthView({
+  dp,
+  messages
+}: {
+  dp: DatePickerContext;
+  messages: ReturnType<typeof getGcsaLocaleMessages>['datePicker'];
+}) {
+  const monthsGrid = dp.getMonthsGrid({ columns: 3 });
+
+  return (
+    <>
+      <div className="gcsa-date-picker__header">
+        <DatePicker.PrevTrigger
+          className="gcsa-date-picker__nav gcsa-focus-ring"
+          aria-label={messages.prevYear}
+        >
+          <GcsaIcon name="chevronLeft" size="sm" />
+        </DatePicker.PrevTrigger>
+        <div className="gcsa-date-picker__selects">
+          <div className="gcsa-date-picker__filter gcsa-date-picker__filter--year">
+            <GcsaSelect
+              value={String(dp.focusedValue.year)}
+              options={gcsaDatePickerCellsToOptions(dp.getYears())}
+              portalled={false}
+              sameWidth={false}
+              listMaxHeight={240}
+              listHintThreshold={100}
+              onValueChange={v => dp.focusYear(Number(v))}
+            />
+          </div>
+        </div>
+        <DatePicker.NextTrigger
+          className="gcsa-date-picker__nav gcsa-focus-ring"
+          aria-label={messages.nextYear}
+        >
+          <GcsaIcon name="chevronLeft" size="sm" className="gcsa-date-picker__nav-icon--next" />
+        </DatePicker.NextTrigger>
+      </div>
+      <DatePicker.Table className="gcsa-date-picker__table gcsa-date-picker__table--month" columns={3}>
+        <DatePicker.TableBody>
+          {monthsGrid.map((row, rowIndex) => (
+            <DatePicker.TableRow key={rowIndex}>
+              {row.map(month => (
+                <DatePicker.TableCell
+                  key={month.value}
+                  value={month.value}
+                  className="gcsa-date-picker__cell"
+                >
+                  <DatePicker.TableCellTrigger className="gcsa-date-picker__month gcsa-focus-ring">
+                    {month.label}
+                  </DatePicker.TableCellTrigger>
+                </DatePicker.TableCell>
+              ))}
+            </DatePicker.TableRow>
+          ))}
+        </DatePicker.TableBody>
+      </DatePicker.Table>
+    </>
+  );
+}
+
+function GcsaDatePickerDayView({
+  dp,
+  messages
+}: {
+  dp: DatePickerContext;
+  messages: ReturnType<typeof getGcsaLocaleMessages>['datePicker'];
+}) {
+  return (
+    <>
+      <div className="gcsa-date-picker__header">
+        <DatePicker.PrevTrigger
+          className="gcsa-date-picker__nav gcsa-focus-ring"
+          aria-label={messages.prevMonth}
+        >
+          <GcsaIcon name="chevronLeft" size="sm" />
+        </DatePicker.PrevTrigger>
+        <div className="gcsa-date-picker__selects">
+          <div className="gcsa-date-picker__filter gcsa-date-picker__filter--month">
+            <GcsaSelect
+              value={String(dp.focusedValue.month)}
+              options={gcsaDatePickerCellsToOptions(dp.getMonths())}
+              portalled={false}
+              sameWidth={false}
+              listMaxHeight={240}
+              listHintThreshold={100}
+              onValueChange={v => dp.focusMonth(Number(v))}
+            />
+          </div>
+          <div className="gcsa-date-picker__filter gcsa-date-picker__filter--year">
+            <GcsaSelect
+              value={String(dp.focusedValue.year)}
+              options={gcsaDatePickerCellsToOptions(dp.getYears())}
+              portalled={false}
+              sameWidth={false}
+              listMaxHeight={240}
+              listHintThreshold={100}
+              onValueChange={v => dp.focusYear(Number(v))}
+            />
+          </div>
+        </div>
+        <DatePicker.NextTrigger
+          className="gcsa-date-picker__nav gcsa-focus-ring"
+          aria-label={messages.nextMonth}
+        >
+          <GcsaIcon name="chevronLeft" size="sm" className="gcsa-date-picker__nav-icon--next" />
+        </DatePicker.NextTrigger>
+      </div>
+      <DatePicker.Table className="gcsa-date-picker__table">
+        <DatePicker.TableHead>
+          <DatePicker.TableRow>
+            {dp.weekDays.map((weekDay, weekDayIndex) => (
+              <DatePicker.TableHeader
+                key={weekDay.short ?? weekDayIndex}
+                className="gcsa-date-picker__weekday"
+              >
+                {weekDay.short}
+              </DatePicker.TableHeader>
+            ))}
+          </DatePicker.TableRow>
+        </DatePicker.TableHead>
+        <DatePicker.TableBody>
+          {dp.weeks.map((week, weekIndex) => (
+            <DatePicker.TableRow key={weekIndex}>
+              {week.map(day => (
+                <DatePicker.TableCell key={day.toString()} value={day} className="gcsa-date-picker__cell">
+                  <DatePicker.TableCellTrigger className="gcsa-date-picker__day gcsa-focus-ring">
+                    {day.day}
+                  </DatePicker.TableCellTrigger>
+                </DatePicker.TableCell>
+              ))}
+            </DatePicker.TableRow>
+          ))}
+        </DatePicker.TableBody>
+      </DatePicker.Table>
+    </>
+  );
+}
+
+export function GcsaDatePicker({
+  value,
+  placeholder,
+  picker = 'date',
+  locale: localeProp,
+  disabled,
+  invalid,
+  min,
+  max,
+  className,
+  onValueChange
+}: GcsaDatePickerProps) {
+  const configLocale = useGcsaLocale();
+  const resolvedLocale = localeProp ?? configLocale;
+  const messages = getGcsaLocaleMessages(resolvedLocale).datePicker;
+  const startOfWeek = getGcsaStartOfWeek(resolvedLocale);
+  const isMonthPicker = picker === 'month';
+  const resolvedPlaceholder =
+    placeholder ?? (isMonthPicker ? messages.placeholderMonth : messages.placeholder);
+
+  const pickerValue = useMemo(() => gcsaStringToDateValues(value, picker), [value, picker]);
+  const minValue = useMemo(
+    () => (min ? parseDate(gcsaNormalizeDateBoundary(min, picker)!) : undefined),
+    [min, picker]
+  );
+  const maxValue = useMemo(
+    () => (max ? parseDate(gcsaNormalizeDateBoundary(max, picker)!) : undefined),
+    [max, picker]
+  );
+
+  const formatValue = useCallback(
+    (date: Parameters<typeof gcsaDatePickerFormat>[0], details: Parameters<typeof gcsaDatePickerFormat>[1]) =>
+      gcsaDatePickerFormat(date, details, picker),
+    [picker]
+  );
+  const parseValue = useCallback(
+    (input: string, details: Parameters<typeof gcsaDatePickerParse>[1]) =>
+      gcsaDatePickerParse(input, details, picker),
+    [picker]
+  );
+
+  return (
+    <DatePicker.Root
+      value={pickerValue}
+      locale={resolvedLocale}
+      startOfWeek={startOfWeek}
+      positioning={createGcsaPopupPositioning({ fitViewport: true })}
+      openOnClick
+      closeOnSelect
+      disabled={disabled}
+      invalid={invalid}
+      min={minValue}
+      max={maxValue}
+      minView={isMonthPicker ? 'month' : undefined}
+      maxView={isMonthPicker ? 'month' : undefined}
+      defaultView={isMonthPicker ? 'month' : undefined}
+      format={formatValue}
+      parse={parseValue}
+      className={className}
+      onValueChange={details => {
+        const first = details.value?.[0];
+        onValueChange?.(gcsaDateValueToOutputString(first, picker));
+      }}
+    >
+      <DatePicker.Control className="gcsa-date-picker__control" data-invalid={invalid || undefined}>
+        <DatePicker.Input
+          className="gcsa-date-picker__input gcsa-input"
+          placeholder={resolvedPlaceholder}
+        />
+        <DatePicker.Trigger
+          className="gcsa-date-picker__trigger gcsa-focus-ring"
+          aria-label={messages.openCalendar}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <rect x="2" y="3" width="12" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+            <path
+              d="M2 6.5h12M5.5 1.5v2M10.5 1.5v2"
+              stroke="currentColor"
+              strokeWidth="1.2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </DatePicker.Trigger>
+      </DatePicker.Control>
+      <Portal>
+        <DatePicker.Positioner className="gcsa-date-picker__positioner">
+          <DatePicker.Content
+            className={`gcsa-date-picker__content gcsa-ui-surface${isMonthPicker ? ' gcsa-date-picker__content--month' : ''}`}
+          >
+            <DatePicker.View view={isMonthPicker ? 'month' : 'day'}>
+              <DatePicker.Context>
+                {dp =>
+                  isMonthPicker ? (
+                    <GcsaDatePickerMonthView dp={dp} messages={messages} />
+                  ) : (
+                    <GcsaDatePickerDayView dp={dp} messages={messages} />
+                  )
+                }
+              </DatePicker.Context>
+            </DatePicker.View>
+          </DatePicker.Content>
+        </DatePicker.Positioner>
+      </Portal>
+    </DatePicker.Root>
+  );
+}

package/src/GcsaDateRangePicker.tsx

@@ -0,0 +1,310 @@
+import { useCallback, useMemo } from 'react';
+import { DatePicker, parseDate, type UseDatePickerContext } from '@ark-ui/react/date-picker';
+import { Portal } from '@ark-ui/react/portal';
+import {
+  getGcsaLocaleMessages,
+  getGcsaStartOfWeek,
+  createGcsaPopupPositioning,
+  type GcsaConsoleLocale,
+  type GcsaDatePickerMode,
+  type GcsaDateRangeValue,
+  type GcsaMonthRangeValue
+} from '@gcsa/console-core';
+import { GcsaIcon } from './GcsaIcon';
+import { GcsaSelect } from './GcsaSelect';
+import { useGcsaLocale } from './hooks/useGcsaLocale';
+import {
+  gcsaDatePickerCellsToOptions,
+  gcsaDatePickerFormat,
+  gcsaDatePickerParse,
+  gcsaDateRangeToDateValues,
+  gcsaDateValuesToRange,
+  gcsaNormalizeDateBoundary
+} from './utils/gcsaDateValue';
+
+export type GcsaDateRangePickerProps = {
+  value?: GcsaDateRangeValue | GcsaMonthRangeValue;
+  placeholderStart?: string;
+  placeholderEnd?: string;
+  /** 选择粒度：`date` 为 YYYY-MM-DD，`month` 为 YYYY-MM */
+  picker?: GcsaDatePickerMode;
+  /** 语言；未传时读取 GcsaConfigProvider */
+  locale?: GcsaConsoleLocale;
+  disabled?: boolean;
+  invalid?: boolean;
+  min?: string;
+  max?: string;
+  className?: string;
+  onValueChange?: (value: GcsaDateRangeValue | GcsaMonthRangeValue) => void;
+};
+
+type DatePickerContext = UseDatePickerContext;
+
+function GcsaDateRangeDayPanel({
+  dp,
+  monthOffset,
+  weekDays,
+  showPrev,
+  showNext,
+  navLabels
+}: {
+  dp: DatePickerContext;
+  monthOffset: number;
+  weekDays: DatePickerContext['weekDays'];
+  showPrev?: boolean;
+  showNext?: boolean;
+  navLabels: { prevMonth: string; nextMonth: string };
+}) {
+  const offset = dp.getOffset({ months: monthOffset });
+  const weeks = offset.weeks;
+
+  return (
+    <div className="gcsa-date-range-picker__panel">
+      <div className="gcsa-date-range-picker__panel-header">
+        {showPrev ? (
+          <DatePicker.PrevTrigger
+            className="gcsa-date-picker__nav gcsa-focus-ring"
+            aria-label={navLabels.prevMonth}
+          >
+            <GcsaIcon name="chevronLeft" size="sm" />
+          </DatePicker.PrevTrigger>
+        ) : (
+          <span className="gcsa-date-range-picker__nav-spacer" aria-hidden="true" />
+        )}
+        <div className="gcsa-date-range-picker__panel-label">{offset.visibleRangeText.start}</div>
+        {showNext ? (
+          <DatePicker.NextTrigger
+            className="gcsa-date-picker__nav gcsa-focus-ring"
+            aria-label={navLabels.nextMonth}
+          >
+            <GcsaIcon name="chevronLeft" size="sm" className="gcsa-date-picker__nav-icon--next" />
+          </DatePicker.NextTrigger>
+        ) : (
+          <span className="gcsa-date-range-picker__nav-spacer" aria-hidden="true" />
+        )}
+      </div>
+      <DatePicker.Table className="gcsa-date-picker__table">
+        <DatePicker.TableHead>
+          <DatePicker.TableRow>
+            {weekDays.map((weekDay, weekDayIndex) => (
+              <DatePicker.TableHeader
+                key={weekDay.short ?? weekDayIndex}
+                className="gcsa-date-picker__weekday"
+              >
+                {weekDay.short}
+              </DatePicker.TableHeader>
+            ))}
+          </DatePicker.TableRow>
+        </DatePicker.TableHead>
+        <DatePicker.TableBody>
+          {weeks.map((week, weekIndex) => (
+            <DatePicker.TableRow key={weekIndex}>
+              {week.map(day => (
+                <DatePicker.TableCell key={day.toString()} value={day} className="gcsa-date-picker__cell">
+                  <DatePicker.TableCellTrigger className="gcsa-date-picker__day gcsa-focus-ring">
+                    {day.day}
+                  </DatePicker.TableCellTrigger>
+                </DatePicker.TableCell>
+              ))}
+            </DatePicker.TableRow>
+          ))}
+        </DatePicker.TableBody>
+      </DatePicker.Table>
+    </div>
+  );
+}
+
+function GcsaDateRangeMonthView({
+  dp,
+  messages
+}: {
+  dp: DatePickerContext;
+  messages: ReturnType<typeof getGcsaLocaleMessages>['datePicker'];
+}) {
+  const monthsGrid = dp.getMonthsGrid({ columns: 3 });
+
+  return (
+    <div className="gcsa-date-range-picker__panel gcsa-date-range-picker__panel--month">
+      <div className="gcsa-date-range-picker__panel-header">
+        <DatePicker.PrevTrigger
+          className="gcsa-date-picker__nav gcsa-focus-ring"
+          aria-label={messages.prevYear}
+        >
+          <GcsaIcon name="chevronLeft" size="sm" />
+        </DatePicker.PrevTrigger>
+        <div className="gcsa-date-picker__selects gcsa-date-range-picker__year-select">
+          <div className="gcsa-date-picker__filter gcsa-date-picker__filter--year">
+            <GcsaSelect
+              value={String(dp.focusedValue.year)}
+              options={gcsaDatePickerCellsToOptions(dp.getYears())}
+              portalled={false}
+              sameWidth={false}
+              listMaxHeight={240}
+              listHintThreshold={100}
+              onValueChange={v => dp.focusYear(Number(v))}
+            />
+          </div>
+        </div>
+        <DatePicker.NextTrigger
+          className="gcsa-date-picker__nav gcsa-focus-ring"
+          aria-label={messages.nextYear}
+        >
+          <GcsaIcon name="chevronLeft" size="sm" className="gcsa-date-picker__nav-icon--next" />
+        </DatePicker.NextTrigger>
+      </div>
+      <DatePicker.Table className="gcsa-date-picker__table gcsa-date-picker__table--month" columns={3}>
+        <DatePicker.TableBody>
+          {monthsGrid.map((row, rowIndex) => (
+            <DatePicker.TableRow key={rowIndex}>
+              {row.map(month => (
+                <DatePicker.TableCell key={month.value} value={month.value} className="gcsa-date-picker__cell">
+                  <DatePicker.TableCellTrigger className="gcsa-date-picker__month gcsa-focus-ring">
+                    {month.label}
+                  </DatePicker.TableCellTrigger>
+                </DatePicker.TableCell>
+              ))}
+            </DatePicker.TableRow>
+          ))}
+        </DatePicker.TableBody>
+      </DatePicker.Table>
+    </div>
+  );
+}
+
+export function GcsaDateRangePicker({
+  value,
+  placeholderStart,
+  placeholderEnd,
+  picker = 'date',
+  locale: localeProp,
+  disabled,
+  invalid,
+  min,
+  max,
+  className,
+  onValueChange
+}: GcsaDateRangePickerProps) {
+  const configLocale = useGcsaLocale();
+  const resolvedLocale = localeProp ?? configLocale;
+  const messages = getGcsaLocaleMessages(resolvedLocale).datePicker;
+  const startOfWeek = getGcsaStartOfWeek(resolvedLocale);
+  const isMonthPicker = picker === 'month';
+  const resolvedPlaceholderStart =
+    placeholderStart ?? (isMonthPicker ? messages.placeholderStartMonth : messages.placeholderStart);
+  const resolvedPlaceholderEnd =
+    placeholderEnd ?? (isMonthPicker ? messages.placeholderEndMonth : messages.placeholderEnd);
+
+  const pickerValue = useMemo(() => gcsaDateRangeToDateValues(value, picker), [value, picker]);
+  const minValue = useMemo(
+    () => (min ? parseDate(gcsaNormalizeDateBoundary(min, picker)!) : undefined),
+    [min, picker]
+  );
+  const maxValue = useMemo(
+    () => (max ? parseDate(gcsaNormalizeDateBoundary(max, picker)!) : undefined),
+    [max, picker]
+  );
+
+  const formatValue = useCallback(
+    (date: Parameters<typeof gcsaDatePickerFormat>[0], details: Parameters<typeof gcsaDatePickerFormat>[1]) =>
+      gcsaDatePickerFormat(date, details, picker),
+    [picker]
+  );
+  const parseValue = useCallback(
+    (input: string, details: Parameters<typeof gcsaDatePickerParse>[1]) =>
+      gcsaDatePickerParse(input, details, picker),
+    [picker]
+  );
+
+  return (
+    <DatePicker.Root
+      value={pickerValue}
+      locale={resolvedLocale}
+      startOfWeek={startOfWeek}
+      positioning={createGcsaPopupPositioning({ fitViewport: true })}
+      selectionMode="range"
+      numOfMonths={isMonthPicker ? 1 : 2}
+      openOnClick
+      closeOnSelect
+      disabled={disabled}
+      invalid={invalid}
+      min={minValue}
+      max={maxValue}
+      minView={isMonthPicker ? 'month' : undefined}
+      maxView={isMonthPicker ? 'month' : undefined}
+      defaultView={isMonthPicker ? 'month' : undefined}
+      format={formatValue}
+      parse={parseValue}
+      className={className}
+      onValueChange={details => {
+        onValueChange?.(gcsaDateValuesToRange(details.value, picker));
+      }}
+    >
+      <DatePicker.Control
+        className="gcsa-date-range-picker__control gcsa-date-picker__control"
+        data-invalid={invalid || undefined}
+      >
+        <DatePicker.Input
+          index={0}
+          className="gcsa-date-picker__input gcsa-input"
+          placeholder={resolvedPlaceholderStart}
+        />
+        <span className="gcsa-date-range-picker__separator" aria-hidden="true">
+          {messages.rangeSeparator}
+        </span>
+        <DatePicker.Input
+          index={1}
+          className="gcsa-date-picker__input gcsa-input"
+          placeholder={resolvedPlaceholderEnd}
+        />
+        <DatePicker.Trigger
+          className="gcsa-date-picker__trigger gcsa-focus-ring"
+          aria-label={messages.openCalendar}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <rect x="2" y="3" width="12" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+            <path
+              d="M2 6.5h12M5.5 1.5v2M10.5 1.5v2"
+              stroke="currentColor"
+              strokeWidth="1.2"
+              strokeLinecap="round"
+            />
+          </svg>
+        </DatePicker.Trigger>
+      </DatePicker.Control>
+      <Portal>
+        <DatePicker.Positioner className="gcsa-date-picker__positioner">
+          <DatePicker.Content
+            className={`gcsa-date-range-picker__content gcsa-date-picker__content gcsa-ui-surface${isMonthPicker ? ' gcsa-date-range-picker__content--month' : ''}`}
+          >
+            <DatePicker.View view={isMonthPicker ? 'month' : 'day'}>
+              <DatePicker.Context>
+                {dp =>
+                  isMonthPicker ? (
+                    <GcsaDateRangeMonthView dp={dp} messages={messages} />
+                  ) : (
+                    <div className="gcsa-date-range-picker__panels">
+                      <GcsaDateRangeDayPanel
+                        dp={dp}
+                        monthOffset={0}
+                        weekDays={dp.weekDays}
+                        showPrev
+                        navLabels={messages}
+                      />
+                      <GcsaDateRangeDayPanel
+                        dp={dp}
+                        monthOffset={1}
+                        weekDays={dp.weekDays}
+                        showNext
+                        navLabels={messages}
+                      />
+                    </div>
+                  )
+                }
+              </DatePicker.Context>
+            </DatePicker.View>
+          </DatePicker.Content>
+        </DatePicker.Positioner>
+      </Portal>
+    </DatePicker.Root>
+  );
+}