refactor(editor): remove edit view of database block properties (#10748)

blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.css.ts

@@ -0,0 +1,57 @@
+import { baseTheme } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const progressCellStyle = style({
+  display: 'block',
+  width: '100%',
+  padding: '0 4px',
+  userSelect: 'none',
+});
+
+export const progressContainerStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  height: 'var(--data-view-cell-text-line-height)',
+  gap: '4px',
+});
+
+export const progressBarStyle = style({
+  position: 'relative',
+  width: '100%',
+});
+
+export const progressBgStyle = style({
+  overflow: 'hidden',
+  width: '100%',
+  height: '10px',
+  borderRadius: '22px',
+});
+
+export const progressFgStyle = style({
+  height: '100%',
+});
+
+export const progressDragHandleStyle = style({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  transform: 'translate(0px, -1px)',
+  width: '6px',
+  height: '12px',
+  borderRadius: '2px',
+  opacity: '1',
+  cursor: 'ew-resize',
+  background: 'var(--affine-primary-color)',
+  transition: 'opacity 0.2s ease-in-out',
+});
+
+export const progressNumberStyle = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '18px',
+  width: '25px',
+  color: 'var(--affine-text-secondary-color)',
+  fontSize: '14px',
+  fontFamily: baseTheme.fontSansFamily,
+});

blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.ts

@@ -1,4 +1,4 @@
-import { css, html } from 'lit';
+import { html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -6,69 +6,17 @@ import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { startDrag } from '../../core/utils/drag.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
+import {
+  progressBarStyle,
+  progressBgStyle,
+  progressCellStyle,
+  progressContainerStyle,
+  progressDragHandleStyle,
+  progressFgStyle,
+  progressNumberStyle,
+} from './cell-renderer.css.js';
 import { progressPropertyModelConfig } from './define.js';
 
-const styles = css`
-  affine-database-progress-cell-editing {
-    display: block;
-    width: 100%;
-    padding: 0 4px;
-  }
-
-  affine-database-progress-cell {
-    display: block;
-    width: 100%;
-    padding: 0 4px;
-  }
-
-  .affine-database-progress {
-    display: flex;
-    align-items: center;
-    height: var(--data-view-cell-text-line-height);
-    gap: 4px;
-  }
-
-  .affine-database-progress-bar {
-    position: relative;
-    width: 104px;
-  }
-
-  .affine-database-progress-bg {
-    overflow: hidden;
-    width: 100%;
-    height: 10px;
-    border-radius: 22px;
-  }
-
-  .affine-database-progress-fg {
-    height: 100%;
-  }
-
-  .affine-database-progress-drag-handle {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(0px, -1px);
-    width: 6px;
-    height: 12px;
-    border-radius: 2px;
-    opacity: 1;
-    cursor: ew-resize;
-    background: var(--affine-primary-color);
-    transition: opacity 0.2s ease-in-out;
-  }
-
-  .progress-number {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 18px;
-    width: 25px;
-    color: var(--affine-text-secondary-color);
-    font-size: 14px;
-  }
-`;
-
 const progressColors = {
   empty: 'var(--affine-black-10)',
   processing: 'var(--affine-processing-color)',
@@ -76,38 +24,9 @@ const progressColors = {
 };
 
 export class ProgressCell extends BaseCellRenderer<number> {
-  static override styles = styles;
-
-  protected override render() {
-    const progress = this.value ?? 0;
-    let backgroundColor = progressColors.processing;
-    if (progress === 100) {
-      backgroundColor = progressColors.success;
-    }
-    const fgStyles = styleMap({
-      width: `${progress}%`,
-      backgroundColor,
-    });
-    const bgStyles = styleMap({
-      backgroundColor:
-        progress === 0 ? progressColors.empty : 'var(--affine-hover-color)',
-    });
-
-    return html` <div class="affine-database-progress">
-      <div class="affine-database-progress-bar">
-        <div class="affine-database-progress-bg" style=${bgStyles}>
-          <div class="affine-database-progress-fg" style=${fgStyles}></div>
-        </div>
-      </div>
-      <div class="progress-number progress">${progress}</div>
-    </div>`;
-  }
-}
-
-export class ProgressCellEditing extends BaseCellRenderer<number> {
-  static override styles = styles;
-
   startDrag = (event: MouseEvent) => {
+    if (!this.isEditing$.value) return;
+
     const bgRect = this._progressBg.getBoundingClientRect();
     const min = bgRect.left;
     const max = bgRect.right;
@@ -135,7 +54,9 @@ export class ProgressCellEditing extends BaseCellRenderer<number> {
   };
 
   get _value() {
-    return this.tempValue ?? this.value ?? 0;
+    return this.isEditing$.value
+      ? (this.tempValue ?? this.value ?? 0)
+      : (this.value ?? 0);
   }
 
   _onChange(value?: number) {
@@ -146,13 +67,17 @@ export class ProgressCellEditing extends BaseCellRenderer<number> {
     const disposables = this._disposables;
 
     disposables.addFromEvent(this._progressBg, 'pointerdown', this.startDrag);
+
     disposables.addFromEvent(window, 'keydown', evt => {
-      if (evt.key === 'ArrowDown') {
+      if (!this.isEditing$.value) {
+        return;
+      }
+      if (evt.key === 'ArrowDown' || evt.key === 'ArrowLeft') {
         evt.preventDefault();
         this._onChange(Math.max(0, this._value - 1));
         return;
       }
-      if (evt.key === 'ArrowUp') {
+      if (evt.key === 'ArrowUp' || evt.key === 'ArrowRight') {
         evt.preventDefault();
         this._onChange(Math.min(100, this._value + 1));
         return;
@@ -160,20 +85,25 @@ export class ProgressCellEditing extends BaseCellRenderer<number> {
     });
   }
 
+  preventDefault(e: ClipboardEvent) {
+    e.stopPropagation();
+  }
+
   override onCopy(_e: ClipboardEvent) {
-    _e.preventDefault();
+    this.preventDefault(_e);
   }
 
   override onCut(_e: ClipboardEvent) {
-    _e.preventDefault();
+    this.preventDefault(_e);
   }
 
-  override onExitEditMode() {
-    this.onChange(this._value);
+  override beforeExitEditingMode() {
+    const value = this._value;
+    this.valueSetNextTick(value);
   }
 
   override onPaste(_e: ClipboardEvent) {
-    _e.preventDefault();
+    this.preventDefault(_e);
   }
 
   protected override render() {
@@ -190,25 +120,37 @@ export class ProgressCellEditing extends BaseCellRenderer<number> {
       backgroundColor:
         progress === 0 ? progressColors.empty : 'var(--affine-hover-color)',
     });
-    const handleStyles = styleMap({
-      left: `calc(${progress}% - 3px)`,
-    });
 
-    return html` <div class="affine-database-progress">
-      <div class="affine-database-progress-bar">
-        <div class="affine-database-progress-bg" style=${bgStyles}>
-          <div class="affine-database-progress-fg" style=${fgStyles}></div>
-          <div
-            class="affine-database-progress-drag-handle"
-            style=${handleStyles}
-          ></div>
+    return html`
+      <div class="${progressCellStyle}">
+        <div class="${progressContainerStyle}">
+          <div class="${progressBarStyle}">
+            <div
+              class="${progressBgStyle}"
+              data-testid="progress-background"
+              style=${bgStyles}
+            >
+              <div class="${progressFgStyle}" style=${fgStyles}></div>
+              ${this.isEditing$.value
+                ? html` <div
+                    class="${progressDragHandleStyle}"
+                    data-testid="progress-drag-handle"
+                    style=${styleMap({
+                      left: `calc(${progress}% - 3px)`,
+                    })}
+                  ></div>`
+                : ''}
+            </div>
+          </div>
+          <span class="${progressNumberStyle}" data-testid="progress"
+            >${progress}</span
+          >
         </div>
       </div>
-      <div class="progress-number progress">${progress}</div>
-    </div>`;
+    `;
   }
 
-  @query('.affine-database-progress-bg')
+  @query(`.${progressBgStyle}`)
   private accessor _progressBg!: HTMLElement;
 
   @state()
@@ -220,6 +162,5 @@ export const progressPropertyConfig =
     icon: createIcon('ProgressIcon'),
     cellRenderer: {
       view: createFromBaseCellRenderer(ProgressCell),
-      edit: createFromBaseCellRenderer(ProgressCellEditing),
     },
   });