adding autoFocus to stateful components. getting global keys working
This commit is contained in:
parent
244126ee9e
commit
30234875fe
3 changed files with 21 additions and 6 deletions
|
|
@ -67,11 +67,14 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
|
|||
}
|
||||
}
|
||||
|
||||
function expandStateful(ui: UIValue, path: number[]): UIValue {
|
||||
function expandStateful(ui: UIValue, path: number[], renderedKeys: Set<string>): UIValue {
|
||||
switch (ui.kind) {
|
||||
case 'stateful': {
|
||||
const fullKey = [...path, ui.key].join('.');
|
||||
renderedKeys.add(fullKey);
|
||||
|
||||
let instance = componentInstances.get(fullKey);
|
||||
const isNew = !instance;
|
||||
|
||||
if (!instance) {
|
||||
instance = {
|
||||
|
|
@ -86,6 +89,10 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
|
|||
instance.view = ui.view;
|
||||
}
|
||||
|
||||
if (ui.autoFocus && isNew) {
|
||||
setFocus(fullKey);
|
||||
}
|
||||
|
||||
const viewResult = instance.view(instance.state);
|
||||
let viewUI = valueToUI(viewResult);
|
||||
|
||||
|
|
@ -96,7 +103,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
|
|||
event: { _tag: 'FocusAndClick', _0: fullKey }
|
||||
};
|
||||
}
|
||||
return expandStateful(viewUI, path);
|
||||
return expandStateful(viewUI, path, renderedKeys);
|
||||
}
|
||||
|
||||
case 'stack':
|
||||
|
|
@ -105,7 +112,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
|
|||
return {
|
||||
...ui,
|
||||
children: ui.children.map((child: UIValue, i: number) =>
|
||||
expandStateful(child, [...path, i])
|
||||
expandStateful(child, [...path, i], renderedKeys)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -117,7 +124,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
|
|||
case 'clip': {
|
||||
return {
|
||||
...ui,
|
||||
child: expandStateful((ui as any).child, [...path, 0])
|
||||
child: expandStateful((ui as any).child, [...path, 0], renderedKeys)
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -130,11 +137,17 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
|
|||
|
||||
function rerender() {
|
||||
const viewport = { width: window.innerWidth, height: window.innerHeight };
|
||||
const renderedKeys = new Set<string>();
|
||||
|
||||
try {
|
||||
const uiValue = app.view(state)(viewport);
|
||||
const ui = valueToUI(uiValue);
|
||||
const expandedUI = expandStateful(ui, []);
|
||||
const expandedUI = expandStateful(ui, [], renderedKeys);
|
||||
|
||||
if (focusedComponentKey && !renderedKeys.has(focusedComponentKey)) {
|
||||
focusedComponentKey = null;
|
||||
}
|
||||
|
||||
render(expandedUI, canvas);
|
||||
} catch (error) {
|
||||
console.error('Render error:', error);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue