refactor(database): make Date-Picker component compatible with mobile devices

packages/affine/data-view/src/property-presets/date/cell-renderer.ts

@@ -1,10 +1,16 @@
+import {
+  popMenu,
+  popupTargetFromElement,
+} from '@blocksuite/affine-components/context-menu';
 import { DatePicker } from '@blocksuite/affine-components/date-picker';
 import { createLitPortal } from '@blocksuite/affine-components/portal';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { IS_MOBILE } from '@blocksuite/global/env';
 import { flip, offset } from '@floating-ui/dom';
+import { signal } from '@preact/signals-core';
 import { baseTheme } from '@toeverything/theme';
 import { format } from 'date-fns/format';
 import { css, html, unsafeCSS } from 'lit';
-import { state } from 'lit/decorators.js';
 
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
@@ -77,33 +83,81 @@ export class DateCellEditing extends BaseCellRenderer<number> {
       { once: true }
     );
     this._prevPortalAbortController = abortController;
-    const root = createLitPortal({
-      abortController,
-      closeOnClickAway: true,
-      computePosition: {
-        referenceElement: this,
-        placement: 'bottom',
-        middleware: [offset(10), flip()],
-      },
-      template: () => {
-        const datePicker = new DatePicker();
-        datePicker.value = this.value ?? Date.now();
-        datePicker.popup = true;
-        datePicker.onChange = (date: Date) => {
-          this.tempValue = date;
-        };
-        datePicker.onEscape = () => {
-          abortController.abort();
-        };
-        requestAnimationFrame(() => datePicker.focusDateCell());
-        return datePicker;
-      },
-    });
-    // TODO: use z-index from variable,
-    //       for now the slide-layout-modal's z-index is `1001`
-    //       the z-index of popover should be higher than it
-    // root.style.zIndex = 'var(--affine-z-index-popover)';
-    root.style.zIndex = '1002';
+    if (IS_MOBILE) {
+      popMenu(popupTargetFromElement(this), {
+        options: {
+          title: {
+            text: this.property.name$.value,
+          },
+          onClose: () => {
+            abortController.abort();
+          },
+          items: [
+            () =>
+              html`<div
+                style="
+padding: 12px;
+background-color: ${unsafeCSSVarV2('layer/background/primary')};
+border-radius: 12px;
+color: ${unsafeCSSVarV2('text/secondary')};
+font-size: 17px;
+line-height: 22px;
+height: 46px;
+"
+              >
+                ${this.dateString}
+              </div>`,
+            () => {
+              const datePicker = new DatePicker();
+              datePicker.padding = 0;
+              datePicker.value = this.value ?? Date.now();
+              datePicker.onChange = (date: Date) => {
+                this.tempValue$.value = date;
+              };
+              datePicker.onEscape = () => {
+                abortController.abort();
+              };
+              requestAnimationFrame(() => datePicker.focusDateCell());
+              return html`<div
+                style="padding: 12px;background-color: ${unsafeCSSVarV2(
+                  'layer/background/primary'
+                )};border-radius: 12px"
+              >
+                ${datePicker}
+              </div>`;
+            },
+          ],
+        },
+      });
+    } else {
+      const root = createLitPortal({
+        abortController,
+        closeOnClickAway: true,
+        computePosition: {
+          referenceElement: this,
+          placement: 'bottom',
+          middleware: [offset(10), flip()],
+        },
+        template: () => {
+          const datePicker = new DatePicker();
+          datePicker.value = this.value ?? Date.now();
+          datePicker.popup = true;
+          datePicker.onChange = (date: Date) => {
+            this.tempValue$.value = date;
+          };
+          datePicker.onEscape = () => {
+            abortController.abort();
+          };
+          requestAnimationFrame(() => datePicker.focusDateCell());
+          return datePicker;
+        },
+      });
+      // TODO: use z-index from variable,
+      //       for now the slide-layout-modal's z-index is `1001`
+      //       the z-index of popover should be higher than it
+      // root.style.zIndex = 'var(--affine-z-index-popover)';
+      root.style.zIndex = '1002';
+    }
   };
 
   private updateValue = () => {
@@ -113,14 +167,20 @@ export class DateCellEditing extends BaseCellRenderer<number> {
     }
 
     this.onChange(tempValue.getTime());
-    this.tempValue = undefined;
+    this.tempValue$.value = undefined;
   };
 
+  tempValue$ = signal<Date>();
+
   get dateString() {
     const value = this.tempValue ?? this.value;
     return value ? format(value, 'yyyy/MM/dd') : '';
   }
 
+  get tempValue() {
+    return this.tempValue$.value;
+  }
+
   override firstUpdated() {
     this.openDatePicker();
   }
@@ -138,9 +198,6 @@ export class DateCellEditing extends BaseCellRenderer<number> {
       ${this.dateString}
     </div>`;
   }
-
-  @state()
-  accessor tempValue: Date | undefined = undefined;
 }
 
 export const datePropertyConfig = datePropertyModelConfig.createPropertyMeta({