PORT CONTRACT

React 受控投影

一个本地 React island 通过公开的 provider、grid、selection 和 pointer API 渲染固定单元格。

试试这个

从一个单元格拖动到另一个单元格。
在网格下方读取当前选择范围。
再次拖动以替换这个范围。

它是怎么做到的

调用方拥有固定的 4×4 投影、确定性 backend 对象和隔离的 Einfach store。网格以受控输入接收单元格与选择范围；pointer-selection hook 将范围写入该 store。

这个本地演示不读取、持久化、编辑或计算工作簿数据。backend 方法如果被调用就会抛错，因此展示的投影始终是显式的。

查看源码

/** @jsxImportSource react */

import { createStore } from '@einfach/core'
import {
  setSelectionBoundsAtom,
  type CellCoord,
  type DisplayCell,
  type SpreadsheetBackend,
} from '@einfach/spreadsheet-ui-core'
import {
  SpreadsheetGridView,
  SpreadsheetUiProvider,
  useSpreadsheetSelection,
} from '@einfach/react-excel'
import { useSpreadsheetPointerSelection } from '@einfach/react-excel/pointer-selection'
import type { PointerEvent as ReactPointerEvent } from 'react'
import './react-adapter-demo.css'

interface ReactAdapterDemoIslandProps {
  locale: 'en' | 'zh'
}

const GRID_WINDOW = { rowStart: 0, rowEnd: 3, colStart: 0, colEnd: 3 }
const GRID_CELLS: readonly DisplayCell[] = Array.from({ length: 16 }, (_, index) => ({