From e378f591cbb286e83cbb10451abb7e10ddd7dae9 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Fri, 20 Dec 2024 03:39:49 +0000
Subject: [PATCH] fix(mobile): add missing mobile date selector and remove
 focus style from date picker in mobile (#9215)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-2169](https://linear.app/affine-design/issue/BS-2169/新的-menu-不支持移动端)

### What changes
- add missing date-selector for mobile
- remove focus style of date picker for mobile
  ![CleanShot 2024-12-20 at 11.27.09@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/7a9b1c1a-e4aa-4746-9242-f1b8c12cd630.png)
---
 .../ui/date-picker/calendar/calendar.css.ts   |  8 +--
 .../core/src/mobile/dialogs/index.tsx         |  2 +
 .../dialogs/selectors/date-selector.tsx       | 60 +++++++++++++++++++
 3 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/core/src/mobile/dialogs/selectors/date-selector.tsx

diff --git a/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts b/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
index edc4fc808c..c1854f6810 100644
--- a/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
+++ b/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
@@ -46,18 +46,18 @@ export const focusInteractive = style([
   basicInteractive,
   {
     selectors: {
-      '&::before': {
+      ':not([data-mobile="true"]) &::before': {
         opacity: 0,
         boxShadow: `0 0 0 2px ${cssVar('brandColor')}`,
       },
-      '&::after': {
+      ':not([data-mobile="true"]) &::after': {
         border: '1px solid transparent',
       },
 
-      '&:focus-visible::before': {
+      ':not([data-mobile="true"]) &:focus-visible::before': {
         opacity: 0.5,
       },
-      '&:focus-visible::after': {
+      ':not([data-mobile="true"]) &:focus-visible::after': {
         borderColor: cssVar('brandColor'),
       },
     },
diff --git a/packages/frontend/core/src/mobile/dialogs/index.tsx b/packages/frontend/core/src/mobile/dialogs/index.tsx
index 0440d8e468..698b65d9f2 100644
--- a/packages/frontend/core/src/mobile/dialogs/index.tsx
+++ b/packages/frontend/core/src/mobile/dialogs/index.tsx
@@ -8,6 +8,7 @@ import type { WORKSPACE_DIALOG_SCHEMA } from '@affine/core/modules/dialogs/const
 import { useLiveData, useService } from '@toeverything/infra';
 
 import { CollectionSelectorDialog } from './selectors/collection-selector';
+import { DateSelectorDialog } from './selectors/date-selector';
 import { DocSelectorDialog } from './selectors/doc-selector';
 import { TagSelectorDialog } from './selectors/tag-selector';
 import { SettingDialog } from './setting';
@@ -32,6 +33,7 @@ const WORKSPACE_DIALOGS = {
   'tag-selector': TagSelectorDialog,
   'doc-selector': DocSelectorDialog,
   'collection-selector': CollectionSelectorDialog,
+  'date-selector': DateSelectorDialog,
 } satisfies {
   [key in keyof WORKSPACE_DIALOG_SCHEMA]?: React.FC<
     DialogComponentProps<WORKSPACE_DIALOG_SCHEMA[key]>
diff --git a/packages/frontend/core/src/mobile/dialogs/selectors/date-selector.tsx b/packages/frontend/core/src/mobile/dialogs/selectors/date-selector.tsx
new file mode 100644
index 0000000000..d28fc08e5c
--- /dev/null
+++ b/packages/frontend/core/src/mobile/dialogs/selectors/date-selector.tsx
@@ -0,0 +1,60 @@
+import { DatePicker, Menu } from '@affine/component';
+import type { DialogComponentProps } from '@affine/core/modules/dialogs';
+import type { WORKSPACE_DIALOG_SCHEMA } from '@affine/core/modules/dialogs/constant';
+import { useI18n } from '@affine/i18n';
+import { useCallback, useState } from 'react';
+
+/**
+ * A global date selector popover for mobile, mainly used in blocksuite editor
+ */
+export const DateSelectorDialog = ({
+  close,
+  onSelect,
+}: DialogComponentProps<WORKSPACE_DIALOG_SCHEMA['date-selector']>) => {
+  const [selectedDate, setSelectedDate] = useState<string>();
+
+  const t = useI18n();
+
+  const onClose = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        close();
+      }
+    },
+    [close]
+  );
+
+  const handleSelect = useCallback(
+    (date?: string) => {
+      setSelectedDate(date);
+      onSelect?.(date);
+    },
+    [onSelect]
+  );
+
+  return (
+    <Menu
+      rootOptions={{
+        modal: true,
+        open: true,
+        onOpenChange: onClose,
+      }}
+      contentOptions={{
+        style: {
+          padding: '15px 20px',
+        },
+      }}
+      items={
+        <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={selectedDate}
+          onChange={handleSelect}
+        />
+      }
+    >
+      <div />
+    </Menu>
+  );
+};