mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-24 05:48:59 +08:00
refactor(editor): remove edit view of database block properties (#10748)
This commit is contained in:
@@ -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();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user