From 813ccc3b3f5e982b90a889ef3c98575af815c988 Mon Sep 17 00:00:00 2001 From: Phil Cockfield Date: Thu, 19 Oct 2023 16:26:00 +1300 Subject: [PATCH] fix automerge call-sties --- .../ext.lib.automerge/src/ui/common/types.ts | 2 ++ .../src/ui/ui.RepoList/-SPEC.tsx | 14 +++++---- .../src/ui/ui.RepoList/Model.Item.ts | 9 ++++-- .../src/ui/ui.RepoList/Model.List.ts | 30 ++++++++++++++----- .../src/ui/ui.RepoList/types.ts | 8 +++-- .../src/ui/ui.RepoList/ui.List.tsx | 24 +++++++-------- .../src/ui/ui.RepoList/ui.tsx | 21 +++++++------ .../src/ui/ui.Connector/Model.List.ts | 3 ++ 8 files changed, 72 insertions(+), 39 deletions(-) diff --git a/code/ext/ext.lib.automerge/src/ui/common/types.ts b/code/ext/ext.lib.automerge/src/ui/common/types.ts index a123fc069f..e5a48897e6 100644 --- a/code/ext/ext.lib.automerge/src/ui/common/types.ts +++ b/code/ext/ext.lib.automerge/src/ui/common/types.ts @@ -5,10 +5,12 @@ export type { CssEdgesInput, CssValue, DevCtxState, + GetLabelItem, LabelItem, LabelItemRendererArgs, LabelItemRenderers, LabelItemState, + LabelListDispatch, LabelListState, PropListProps, RenderCountProps, diff --git a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/-SPEC.tsx b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/-SPEC.tsx index cc28af32f4..3b01a1f568 100644 --- a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/-SPEC.tsx +++ b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/-SPEC.tsx @@ -24,13 +24,17 @@ export default Dev.describe(name, (e) => { .size([330, null]) .display('grid') .render((e) => { - const current = model.list.current; + const renderCount: t.RenderCountProps = { + absolute: [-20, 2, null, null], + opacity: 0.2, + prefix: 'list.render-', + }; return ( - ); }); diff --git a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.Item.ts b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.Item.ts index 8d8ab1a2e7..f362823c4a 100644 --- a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.Item.ts +++ b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.Item.ts @@ -38,7 +38,7 @@ export const ItemModel = { /** * Behavior. */ - const add = () => { + const add = async () => { const ctx = args.ctx(); console.log('add', store); state.change((d) => { @@ -49,9 +49,12 @@ export const ItemModel = { dispatch.redraw(); ctx.list.change((d) => { - const next = ItemModel.state(args); - d.items.push(next); + // const items = d.items || (d.items = []); + // const next = ItemModel.state(args); + // items.push(next); }); + + ctx.dispatch.redraw(); }; const mode = () => Data.item(state).mode; diff --git a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.List.ts b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.List.ts index 00eb00c300..f822f0d038 100644 --- a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.List.ts +++ b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/Model.List.ts @@ -1,19 +1,35 @@ import { PatchState, Model, type t } from './common'; import { ItemModel } from './Model.Item'; +import { renderers } from './Model.Item.render'; export const List = { /** * Initialise a new state model for a Repo. */ init(store: t.Store) { - const ctx: t.GetRepoListCtx = () => ({ list }); + const ctx: t.GetRepoListCtx = () => ({ list, dispatch }); const first = ItemModel.init({ store, ctx }); - const renderers = first.renderers; - const initial: t.RepoList = { - state: Model.List.state(), - items: [first.state], + + const getItem: t.GetLabelItem = (target) => { + if (typeof target === 'number') { + const index = target; + if (index === 0) return [first.state, index]; + } else { + /** + * TODO 🐷 + */ + } + + return [undefined, -1]; }; - const list = PatchState.init({ initial }); - return { list, renderers }; + + const list = Model.List.state({ total: 1, getItem }); + const dispatch = Model.List.commands(list); + + return { + ctx, + list, + renderers: renderers({ ctx }), + } as const; }, } as const; diff --git a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/types.ts b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/types.ts index 8ce72e8252..7bce4c5181 100644 --- a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/types.ts +++ b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/types.ts @@ -4,6 +4,9 @@ import { type t } from './common'; * */ export type RepoListProps = { + list?: t.RepoListState; + renderers?: t.RepoItemRenderers; + renderCount?: t.RenderCountProps; style?: t.CssValue; }; @@ -11,7 +14,7 @@ export type RepoListProps = { * Model: Context */ export type GetRepoListCtx = () => RepoListCtx; -export type RepoListCtx = { list: RepoListState }; +export type RepoListCtx = { list: RepoListState; dispatch: t.LabelListDispatch }; /** * Model: Item @@ -24,8 +27,7 @@ export type RepoItemRenderers = t.LabelItemRenderers; /** * Model: List */ -export type RepoListState = t.PatchState; -export type RepoList = { state: t.LabelListState; items: t.RepoItemState[] }; +export type RepoListState = t.LabelListState; /** * Model: Data diff --git a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.List.tsx b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.List.tsx index 5309d9fb71..e5ca9b9b6a 100644 --- a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.List.tsx +++ b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.List.tsx @@ -2,30 +2,28 @@ import { LabelItem, RenderCount, css, type t } from './common'; export type ListProps = { list?: t.LabelListState; - items?: t.RepoItemState[]; renderers?: t.RepoItemRenderers; style?: t.CssValue; renderCount?: t.RenderCountProps; }; export const List: React.FC = (props) => { - const { list, items = [] } = props; - const controller = LabelItem.Stateful.useListController({ list, items }); + const { list } = props; + const { ref, Provider } = LabelItem.Stateful.useListController({ list }); /** * [Render] */ const styles = { - base: css({ position: 'relative', outline: 'none' }), + base: css({ position: 'relative' }), }; - const elements = items.map((item, i) => { + const elements = LabelItem.Model.List.map(list, (item, i) => { return ( @@ -33,9 +31,11 @@ export const List: React.FC = (props) => { }); return ( -
- {props.renderCount && } -
{elements}
-
+ +
+ {props.renderCount && } +
{elements}
+
+ ); }; diff --git a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.tsx b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.tsx index 15939eff0a..568a90d386 100644 --- a/code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.tsx +++ b/code/ext/ext.lib.automerge/src/ui/ui.RepoList/ui.tsx @@ -1,19 +1,22 @@ -import { useEffect, useRef, useState } from 'react'; -import { Color, COLORS, css, DEFAULTS, FC, rx, type t } from './common'; +import { css, type t } from './common'; +import { List } from './ui.List'; export const View: React.FC = (props) => { + const { list, renderers } = props; + /** - * [Render] + * Render */ const styles = { - base: css({ - backgroundColor: 'rgba(255, 0, 0, 0.1)' /* RED */, - }), + base: css({ position: 'relative' }), }; return ( -
-
{`🐷 Store List`}
-
+ ); }; diff --git a/code/ext/ext.lib.peerjs/src/ui/ui.Connector/Model.List.ts b/code/ext/ext.lib.peerjs/src/ui/ui.Connector/Model.List.ts index cca41cf554..10a0f5ba23 100644 --- a/code/ext/ext.lib.peerjs/src/ui/ui.Connector/Model.List.ts +++ b/code/ext/ext.lib.peerjs/src/ui/ui.Connector/Model.List.ts @@ -14,6 +14,9 @@ export const List = { if (index === 0) return [self, index]; if (index === 1) return [first, index]; } else { + /** + * TODO 🐷 + */ } return [undefined, -1];