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

This commit is contained in:
zzj3720
2025-03-10 16:24:44 +00:00
parent 4a45cc9ba4
commit db707dff7f
49 changed files with 1387 additions and 1782 deletions
@@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
import { computed, effect, signal } from '@preact/signals-core';
import { css } from 'lit';
import { property, state } from 'lit/decorators.js';
import { property } from 'lit/decorators.js';
import {
type CellRenderProps,
@@ -47,7 +47,7 @@ export class MobileTableCell extends SignalWatcher(
return this.column.cellGet(this.rowId);
});
isEditing$ = computed(() => {
isSelectionEditing$ = computed(() => {
const selection = this.table?.props.selection$.value;
if (selection?.selectionType !== 'area') {
return false;
@@ -97,10 +97,6 @@ export class MobileTableCell extends SignalWatcher(
return this.closest('mobile-table-group')?.group?.key;
}
private get readonly() {
return this.column.readonly$.value;
}
private get table() {
return this.closest('mobile-data-view-table');
}
@@ -110,18 +106,21 @@ export class MobileTableCell extends SignalWatcher(
if (this.column.readonly$.value) return;
this.disposables.add(
effect(() => {
const isEditing = this.isEditing$.value;
const isEditing = this.isSelectionEditing$.value;
if (isEditing) {
this.isEditing = true;
this._cell.value?.onEnterEditMode();
this.isEditing$.value = true;
const cell = this._cell.value;
requestAnimationFrame(() => {
cell?.afterEnterEditingMode();
});
} else {
this._cell.value?.onExitEditMode();
this.isEditing = false;
this._cell.value?.beforeExitEditingMode();
this.isEditing$.value = false;
}
})
);
this.disposables.addFromEvent(this, 'click', () => {
if (!this.isEditing) {
if (!this.isEditing$.value) {
this.selectCurrentCell(!this.column.readonly$.value);
}
});
@@ -132,17 +131,16 @@ export class MobileTableCell extends SignalWatcher(
if (!renderer) {
return;
}
const { edit, view } = renderer;
const uni = !this.readonly && this.isEditing && edit != null ? edit : view;
this.view.lockRows(this.isEditing);
this.dataset['editing'] = `${this.isEditing}`;
const { view } = renderer;
this.view.lockRows(this.isEditing$.value);
this.dataset['editing'] = `${this.isEditing$.value}`;
const props: CellRenderProps = {
cell: this.cell$.value,
isEditing: this.isEditing,
isEditing$: this.isEditing$,
selectCurrentCell: this.selectCurrentCell,
};
return renderUniLit(uni, props, {
return renderUniLit(view, props, {
ref: this._cell,
style: {
display: 'contents',
@@ -156,8 +154,7 @@ export class MobileTableCell extends SignalWatcher(
@property({ attribute: false })
accessor columnIndex!: number;
@state()
accessor isEditing = false;
isEditing$ = signal(false);
@property({ attribute: false })
accessor rowIndex!: number;
@@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
import { computed, signal } from '@preact/signals-core';
import { css } from 'lit';
import { property, state } from 'lit/decorators.js';
import { property } from 'lit/decorators.js';
import { renderUniLit } from '../../../core/index.js';
import type {
@@ -88,10 +88,6 @@ export class DatabaseCellContainer extends SignalWatcher(
return this.closest<TableGroup>('affine-data-view-table-group')?.group?.key;
}
private get readonly() {
return this.column.readonly$.value;
}
private get selectionView() {
return this.closest('affine-database-table')?.selectionController;
}
@@ -104,7 +100,7 @@ export class DatabaseCellContainer extends SignalWatcher(
override connectedCallback() {
super.connectedCallback();
this._disposables.addFromEvent(this, 'click', () => {
if (!this.isEditing) {
if (!this.isEditing$.value) {
this.selectCurrentCell(!this.column.readonly$.value);
}
});
@@ -128,17 +124,16 @@ export class DatabaseCellContainer extends SignalWatcher(
if (!renderer) {
return;
}
const { edit, view } = renderer;
const uni = !this.readonly && this.isEditing && edit != null ? edit : view;
this.view.lockRows(this.isEditing);
this.dataset['editing'] = `${this.isEditing}`;
const { view } = renderer;
this.view.lockRows(this.isEditing$.value);
this.dataset['editing'] = `${this.isEditing$.value}`;
const props: CellRenderProps = {
cell: this.cell$.value,
isEditing: this.isEditing,
isEditing$: this.isEditing$,
selectCurrentCell: this.selectCurrentCell,
};
return renderUniLit(uni, props, {
return renderUniLit(view, props, {
ref: this._cell,
style: {
display: 'contents',
@@ -152,8 +147,7 @@ export class DatabaseCellContainer extends SignalWatcher(
@property({ attribute: false })
accessor columnIndex!: number;
@state()
accessor isEditing = false;
isEditing$ = signal(false);
@property({ attribute: false })
accessor rowIndex!: number;
@@ -192,11 +192,9 @@ export class TableSelectionController implements ReactiveController {
if (container) {
const cell = container.cell;
if (old.isEditing) {
requestAnimationFrame(() => {
cell?.onExitEditMode();
});
cell?.beforeExitEditingMode();
cell?.blurCell();
container.isEditing = false;
container.isEditing$.value = false;
}
}
}
@@ -211,9 +209,11 @@ export class TableSelectionController implements ReactiveController {
if (container) {
const cell = container.cell;
if (newSelection.isEditing) {
cell?.onEnterEditMode();
container.isEditing = true;
cell?.focusCell();
container.isEditing$.value = true;
requestAnimationFrame(() => {
cell?.afterEnterEditingMode();
cell?.focusCell();
});
}
}
}