feat(core): replace page filter, journal's date-picker with new one (#5675)

2026-02-12 04:18:54 +00:00 · 2024-02-20 13:53:41 +00:00
parent e664494b2f
commit 3fe9d834de
13 changed files with 185 additions and 94 deletions
--- a/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
+++ b/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
@@ -89,7 +89,9 @@ export const basicCell = style({
 });

 // roots
-export const calendarRoot = style({});
+export const calendarRoot = style({
+  minWidth: `calc(28px * 7 + ${vars.gapX} * 6)`,
+});
 export const calendarWrapper = style({
  display: 'flex',
  flexDirection: 'column',
@@ -101,7 +103,7 @@ export const calendarHeader = style({
 });

 // header
-export const headerLayoutCell = style([basicCell]);
+export const headerLayoutCell = style([basicCell, { height: 'auto' }]);
 export const headerLayoutCellOrigin = style({
  width: 0,
  height: 'fit-content',
--- a/packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx
+++ b/packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx
@@ -119,12 +119,17 @@ export const DayPicker = memo(function DayPicker(
          onClick={openMonthPicker}
          ref={headerMonthRef}
          className={styles.calendarHeaderTriggerButton}
+          data-testid="month-picker-button"
+          data-month={cursor.month()}
+          data-year={cursor.year()}
        >
          {monthNames.split(',')[cursor.month()]}
        </button>
        <button
          className={styles.calendarHeaderTriggerButton}
          onClick={openYearPicker}
+          data-testid="year-picker-button"
+          data-year={cursor.year()}
        >
          {cursor.year()}
        </button>
--- a/packages/frontend/component/src/ui/date-picker/calendar/index.ts
+++ b/packages/frontend/component/src/ui/date-picker/calendar/index.ts
@@ -1 +1,2 @@
 export * from './calendar';
+export type { DateCell } from './types';
--- a/packages/frontend/component/src/ui/date-picker/calendar/items.tsx
+++ b/packages/frontend/component/src/ui/date-picker/calendar/items.tsx
@@ -19,6 +19,8 @@ interface HeaderLayoutProps extends HTMLAttributes<HTMLDivElement> {
  left: React.ReactNode;
  right: React.ReactNode;
 }
+
+const autoHeight = { height: 'auto' };
 /**
 * The `DatePicker` should work with different width
 * This is a hack to make header's item align with calendar cell's label, **instead of the cell**
@@ -57,6 +59,7 @@ const HeaderLayout = memo(function HeaderLayout({
                [styles.yearViewBodyCell]: mode === 'month',
                [styles.decadeViewBodyCell]: mode === 'year',
              })}
+              style={autoHeight}
            >
              <div className={styles.headerLayoutCellOrigin}>
                {isLeft ? left : isRight ? right : null}
@@ -139,6 +142,7 @@ export const NavButtons = memo(function NavButtons({
        size="small"
        className={styles.focusInteractive}
        disabled={prevDisabled}
+        data-testid="date-picker-nav-prev"
        onClick={onPrev}
      >
        <ArrowLeftSmallIcon />
@@ -151,6 +155,7 @@ export const NavButtons = memo(function NavButtons({
        size="small"
        className={styles.focusInteractive}
        disabled={nextDisabled}
+        data-testid="date-picker-nav-next"
        onClick={onNext}
      >
        <ArrowRightSmallIcon />
--- a/packages/frontend/component/src/ui/date-picker/calendar/month-picker.tsx
+++ b/packages/frontend/component/src/ui/date-picker/calendar/month-picker.tsx
@@ -73,6 +73,8 @@ export const MonthPicker = memo(function MonthPicker(

    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
        closeMonthPicker();
        return;
      }
@@ -101,6 +103,7 @@ export const MonthPicker = memo(function MonthPicker(
  const HeaderLeft = useMemo(() => {
    return (
      <button
+        data-testid="month-picker-current-year"
        onClick={closeMonthPicker}
        className={styles.calendarHeaderTriggerButton}
      >
@@ -137,6 +140,7 @@ export const MonthPicker = memo(function MonthPicker(
                      data-current-month={month.isSame(dayjs(), 'month')}
                      onClick={() => onMonthChange(month)}
                      tabIndex={month.isSame(monthCursor, 'month') ? 0 : -1}
+                      aria-label={month.format('YYYY-MM')}
                    >
                      {monthNames.split(',')[month.month()]}
                    </button>
--- a/packages/frontend/component/src/ui/date-picker/calendar/year-picker.tsx
+++ b/packages/frontend/component/src/ui/date-picker/calendar/year-picker.tsx
@@ -84,6 +84,8 @@ export const YearPicker = memo(function YearPicker(

    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
        closeYearPicker();
        return;
      }
--- a/packages/frontend/core/src/components/page-list/filter/date-select.css.ts
+++ b/packages/frontend/core/src/components/page-list/filter/date-select.css.ts
@@ -0,0 +1,17 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const datePickerTriggerInput = style({
+  fontSize: cssVar('fontXs'),
+  width: '50px',
+  fontWeight: '600',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '22px',
+  textAlign: 'center',
+  ':hover': {
+    background: cssVar('hoverColor'),
+    borderRadius: '4px',
+  },
+});
--- a/packages/frontend/core/src/components/page-list/filter/date-select.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/date-select.tsx
@@ -0,0 +1,51 @@
+import { DatePicker, Popover, type PopoverProps } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import dayjs from 'dayjs';
+import { useCallback, useState } from 'react';
+
+import { datePickerTriggerInput } from './date-select.css';
+
+const datePickerPopperContentOptions: PopoverProps['contentOptions'] = {
+  style: { padding: 20, marginTop: 10 },
+};
+
+export const DateSelect = ({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+}) => {
+  const t = useAFFiNEI18N();
+  const [open, setOpen] = useState(false);
+
+  const onDateChange = useCallback(
+    (e: string) => {
+      setOpen(false);
+      onChange(dayjs(e, 'YYYY-MM-DD').valueOf());
+    },
+    [onChange]
+  );
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      contentOptions={datePickerPopperContentOptions}
+      content={
+        <DatePicker
+          weekDays={t['com.affine.calendar-date-picker.week-days']()}
+          monthNames={t['com.affine.calendar-date-picker.month-names']()}
+          todayLabel={t['com.affine.calendar-date-picker.today']()}
+          value={dayjs(value as number).format('YYYY-MM-DD')}
+          onChange={onDateChange}
+        />
+      }
+    >
+      <input
+        value={dayjs(value as number).format('MMM DD')}
+        className={datePickerTriggerInput}
+      />
+    </Popover>
+  );
+};
--- a/packages/frontend/core/src/components/page-list/filter/literal-matcher.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/literal-matcher.tsx
@@ -1,8 +1,8 @@
-import { AFFiNEDatePicker, Input, Menu, MenuItem } from '@affine/component';
+import { Input, Menu, MenuItem } from '@affine/component';
 import type { LiteralValue, Tag } from '@affine/env/filter';
-import dayjs from 'dayjs';
 import { type ReactNode } from 'react';

+import { DateSelect } from './date-select';
 import { FilterTag } from './filter-tag-translation';
 import { inputStyle } from './index.css';
 import { tBoolean, tDate, tDateRange, tTag } from './logical/custom-type';
@@ -67,12 +67,7 @@ literalMatcher.register(tBoolean.create(), {
 });
 literalMatcher.register(tDate.create(), {
  render: ({ value, onChange }) => (
-    <AFFiNEDatePicker
-      value={dayjs(value as number).format('YYYY-MM-DD')}
-      onChange={e => {
-        onChange(dayjs(e, 'YYYY-MM-DD').valueOf());
-      }}
-    />
+    <DateSelect value={value as number} onChange={onChange} />
  ),
 });
 const getTagsOfArrayTag = (type: TType): Tag[] => {
--- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.css.ts
+++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.css.ts
@@ -1,5 +1,6 @@
 import { cssVar } from '@toeverything/theme';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
+
 const interactive = style({
  position: 'relative',
  cursor: 'pointer',
@@ -41,6 +42,7 @@ export const journalPanel = style({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'stretch',
+  overflow: 'hidden',
 });
 export const dailyCount = style({
  height: 0,
@@ -179,14 +181,47 @@ export const journalConflictMoreTrigger = style([
  },
 ]);

-// TODO: when date-picker's cell is customizable, we should implement by custom cell
-// override date-picker's active day when is not journal
-globalStyle(
-  `.${journalPanel}[data-is-journal="false"] .react-datepicker__day[aria-selected="true"]`,
+// customize date-picker cell
+export const journalDateCell = style([
+  interactive,
  {
-    backgroundColor: 'transparent',
+    width: '100%',
+    height: '100%',
+    borderRadius: 8,
+    fontSize: cssVar('fontSm'),
    color: cssVar('textPrimaryColor'),
-    fontWeight: 500,
-    border: `1px solid ${cssVar('primaryColor')}`,
-  }
-);
+    fontWeight: 400,
+    position: 'relative',
+
+    selectors: {
+      '&[data-is-today="true"]': {
+        fontWeight: 600,
+        color: cssVar('brandColor'),
+      },
+      '&[data-not-current-month="true"]': {
+        color: cssVar('black10'),
+      },
+      '&[data-selected="true"]': {
+        backgroundColor: cssVar('brandColor'),
+        fontWeight: 500,
+        color: cssVar('pureWhite'),
+      },
+      '&[data-is-journal="false"][data-selected="true"]': {
+        backgroundColor: 'transparent',
+        color: 'var(--affine-text-primary-color)',
+        fontWeight: 500,
+        border: `1px solid ${cssVar('primaryColor')}`,
+      },
+    },
+  },
+]);
+export const journalDateCellDot = style({
+  width: 4,
+  height: 4,
+  borderRadius: '50%',
+  backgroundColor: cssVar('primaryColor'),
+  position: 'absolute',
+  bottom: 0,
+  left: '50%',
+  transform: 'translateX(-50%)',
+});
--- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/journal.tsx
@@ -1,5 +1,6 @@
 import {
-  AFFiNEDatePicker,
+  type DateCell,
+  DatePicker,
  IconButton,
  Menu,
  Scrollable,
@@ -80,6 +81,7 @@ interface JournalBlockProps extends EditorExtensionProps {

 const EditorJournalPanel = (props: EditorExtensionProps) => {
  const { workspace, page } = props;
+  const t = useAFFiNEI18N();
  const { journalDate, isJournal } = useJournalInfoHelper(
    page.workspace,
    page.id
@@ -99,14 +101,45 @@ const EditorJournalPanel = (props: EditorExtensionProps) => {
    [journalDate, openJournal]
  );

+  const customDayRenderer = useCallback(
+    (cell: DateCell) => {
+      // TODO: add a dot to indicate journal
+      // has performance issue for now, better to calculate it in advance
+      // const hasJournal = !!getJournalsByDate(cell.date.format('YYYY-MM-DD'))?.length;
+      const hasJournal = false;
+      return (
+        <button
+          className={styles.journalDateCell}
+          data-is-date-cell
+          tabIndex={cell.focused ? 0 : -1}
+          data-is-today={cell.isToday}
+          data-not-current-month={cell.notCurrentMonth}
+          data-selected={cell.selected}
+          data-is-journal={isJournal}
+          data-has-journal={hasJournal}
+        >
+          {cell.label}
+          {hasJournal && !cell.selected ? (
+            <div className={styles.journalDateCellDot} />
+          ) : null}
+        </button>
+      );
+    },
+    [isJournal]
+  );
+
  return (
    <div className={styles.journalPanel} data-is-journal={isJournal}>
-      <AFFiNEDatePicker
-        inline
-        value={date}
-        onSelect={onDateSelect}
-        calendarClassName={styles.calendar}
-      />
+      <div className={styles.calendar}>
+        <DatePicker
+          weekDays={t['com.affine.calendar-date-picker.week-days']()}
+          monthNames={t['com.affine.calendar-date-picker.month-names']()}
+          todayLabel={t['com.affine.calendar-date-picker.today']()}
+          customDayRenderer={customDayRenderer}
+          value={date}
+          onChange={onDateSelect}
+        />
+      </div>
      <JournalConflictBlock date={dayjs(date)} {...props} />
      <JournalDailyCountBlock date={dayjs(date)} {...props} />
    </div>