@usableapp/cardds 0.7.89 → 0.7.92

package/dist/cards/CardFeed.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createContext, isValidElement, useContext, useId, useLayoutEffect, useRef } from 'react';
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
 import { reducedMotion, setRefs, useControlled, warnOnce } from '../state.js';
 import { Card } from './Card.js';
@@ -10,39 +10,48 @@ import { Icon } from '../type/Icon.js';
 import { Text } from '../type/Text.js';
 const FeedCtx = createContext(null);
 /**
- * CardFeed — a QUEUE of cards the system hands the member one after another; at most two are on the screen: one BIG (heading, content,
- * its button) and one SMALL (the same card cut down to its head). A touch anywhere on the small one makes it the big one and the other
- * the small one; neither changes place. The queue is the app's: when it changes (a card left, a new one came) what is left slides up,
- * the next comes in as the lower card, and the feed asks for the UPPER card to be big, whichever was big before. One card alone is big;
- * no card, nothing is drawn. Which card is big is controlled like an input (`big` + `onBigChange`, or `defaultBig`).
+ * CardFeed — a QUEUE of cards the system hands the member one after another, all of them on the screen: one BIG (heading, content, its
+ * button) and every other SMALL (the same card cut down to its head). A touch anywhere on a small one makes it the big one and the big
+ * one small; none changes place. The queue is the app's, and so is its length (5, then 10…): near its end the feed asks for more
+ * (`onMore`, at the card with `ahead` cards under it) and the app appends; the appended cards fade in and the member stays where they
+ * were. When a card LEAVES or the order changes, what is left slides up and the feed asks for the UPPER card to be big. When the
+ * app says the queue is complete (`end`) the feed draws those words after the last card and stops asking. One card alone is big; no
+ * card, nothing is drawn. Which card is big is controlled like an input (`big` + `onBigChange`, or `defaultBig`).
  */
-export function CardFeed({ big: bigProp, defaultBig, onBigChange, className, children, ref, ...rest }) {
-    const queue = Children.toArray(children).filter((c) => isValidElement(c) && typeof c.props.id === 'string');
-    if (queue.length !== Children.count(children))
+export function CardFeed({ big: bigProp, defaultBig, onBigChange, onMore, ahead = 2, end, className, children, ref, ...rest }) {
+    const cards = Children.toArray(children).filter((c) => isValidElement(c) && typeof c.props.id === 'string');
+    if (cards.length !== Children.count(children))
         warnOnce('card-feed-child', 'cardds CardFeed: every child is a <FeedCard id="…"> — a child without a string `id` is not drawn');
-    const shown = queue.slice(0, 2);
-    const ids = shown.map((c) => c.props.id);
+    const ids = cards.map((c) => c.props.id);
     const [asked, request] = useControlled(bigProp, defaultBig, onBigChange);
-    const big = asked !== undefined && ids.includes(asked) ? asked : ids[0];
+    const feed = {
+        ids,
+        big: asked !== undefined && ids.includes(asked) ? asked : (ids[0] ?? ''),
+        asker: ids[Math.max(0, ids.length - 1 - ahead)],
+    };
     const own = useRef(null);
     const tops = useRef(new Map());
     const was = useRef(null);
+    const more = useRef(onMore);
     const key = ids.join('\n');
     useLayoutEffect(() => {
+        more.current = onMore;
         const box = own.current;
-        const cards = box ? [...box.children] : [];
-        const changed = was.current !== null && was.current !== key;
-        was.current = key;
+        const els = box ? [...box.querySelectorAll(':scope > .feed-card')] : [];
+        const before = was.current;
+        const changed = before !== null && before.join('\n') !== key;
+        const kept = before !== null && before.length > 0 && before.every((id, i) => ids[i] === id); // an append leaves the old ids a prefix: the member stays where they scrolled to
+        was.current = ids;
         if (changed) {
-            if (ids.length)
+            if (!kept && ids.length)
                 request(ids[0], 'queue');
-            cards.forEach((el) => el.getAnimations().forEach((a) => { if (a.id === 'feed-move')
+            els.forEach((el) => el.getAnimations().forEach((a) => { if (a.id === 'feed-move')
                 a.cancel(); })); // read the resting places
         }
-        const at = new Map(cards.map((el) => [el, el.offsetTop]));
+        const at = new Map(els.map((el) => [el, el.offsetTop]));
         if (changed && box && !reducedMotion()) {
             const ms = (parseFloat(getComputedStyle(box).getPropertyValue('--motion-sheet')) || 0.35) * 1000;
-            for (const el of cards) {
+            for (const el of els) {
                 const from = tops.current.get(el);
                 const move = from === undefined
                     ? el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: ms, easing: 'ease-out' }) // it came in: no place to come from
@@ -53,9 +62,25 @@ export function CardFeed({ big: bigProp, defaultBig, onBigChange, className, chi
         }
         tops.current = at;
     });
-    if (!shown.length)
+    const asking = useRef(null); // the queue that has asked already
+    const canAsk = onMore != null && !end;
+    useEffect(() => {
+        const el = feed.asker === undefined ? undefined : own.current?.querySelectorAll(':scope > .feed-card')[ids.indexOf(feed.asker)];
+        if (!canAsk || !el)
+            return;
+        const watch = new IntersectionObserver((seen) => {
+            if (!seen.some((s) => s.isIntersecting) || asking.current === key)
+                return;
+            asking.current = key;
+            watch.disconnect();
+            more.current?.();
+        });
+        watch.observe(el);
+        return () => watch.disconnect();
+    }, [key, feed.asker, canAsk]);
+    if (!cards.length)
         return null;
-    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRefs(own, ref), className: cx('card-feed', className), ...rest, children: shown }) }));
+    return (_jsx(FeedCtx.Provider, { value: { big: feed.big, grow: (id) => request(id, 'tap') }, children: _jsxs("div", { ref: setRefs(own, ref), className: cx('card-feed', className), ...rest, children: [cards, end ? _jsx(Text, { level: "caption", muted: true, as: "p", role: "note", className: "card-feed__end", children: end }) : null] }) }));
 }
 const onSmallKey = (e) => {
     if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' '))
@@ -64,15 +89,17 @@ const onSmallKey = (e) => {
     e.currentTarget.click();
 };
 /**
- * FeedCard — ONE card of a `CardFeed`'s queue, the same markup in both sizes: its head (thumb · heading · caption) always shows, its
+ * FeedCard — ONE card of a `CardFeed`'s queue, the same markup in both sizes: its head (thumb or lead · heading · caption) always shows, its
  * content and its button are one part that opens while the card is big. The SIZE IS THE FEED'S, never a prop. Small, the card itself
  * is the control (a button named by its heading; Enter and Space) and its closed part cannot be pressed, focused or read. Big, it is a
  * plain card: with one button in its foot it is pressed whole; with two or more only the buttons act.
  */
-export function FeedCard({ id, heading, caption, icon, tone, foot, className, children, onClick, onKeyDown, ref, ...rest }) {
+export function FeedCard({ id, heading, caption, icon, lead, tone, foot, className, children, onClick, onKeyDown, ref, ...rest }) {
     const feed = useContext(FeedCtx);
     if (!feed)
         warnOnce('feed-card-alone', 'cardds FeedCard: outside a <CardFeed> it has nobody to say its size — it is drawn big');
+    if (lead != null && icon)
+        warnOnce('feed-card-lead', 'cardds FeedCard: `lead` and `icon` are both given — the lead is drawn, the icon is not');
     const small = feed != null && feed.big !== id;
     const name = useId();
     const own = useRef(null);
@@ -94,5 +121,5 @@ export function FeedCard({ id, heading, caption, icon, tone, foot, className, ch
             byKey.current = e.detail === 0;
             feed.grow(id);
         } }, onKeyDown: (e) => { onKeyDown?.(e); if (small && !e.defaultPrevented)
-            onSmallKey(e); }, children: [_jsxs(CardHead, { className: "feed-card__head", children: [icon && _jsx(CardThumb, { children: _jsx(Icon, { name: icon, size: "sm" }) }), _jsx(Text, { level: "h2", id: name, children: heading }), caption != null && _jsx(Text, { level: "caption", muted: true, children: caption })] }), _jsx("div", { className: "feed-card__more", inert: small, children: _jsxs("div", { className: "feed-card__rest", children: [children, foot != null && _jsx(CardFoot, { children: foot })] }) })] }));
+            onSmallKey(e); }, children: [_jsxs(CardHead, { className: "feed-card__head", children: [lead != null ? _jsx("span", { className: "feed-card__lead", children: lead }) : icon && _jsx(CardThumb, { children: _jsx(Icon, { name: icon, size: "sm" }) }), _jsx(Text, { level: "h2", id: name, children: heading }), caption != null && _jsx(Text, { level: "caption", muted: true, children: caption })] }), _jsx("div", { className: "feed-card__more", inert: small, children: _jsxs("div", { className: "feed-card__rest", children: [children, foot != null && _jsx(CardFoot, { children: foot })] }) })] }));
 }