ink/build/components/Static.js

React for CLI

import React, { useMemo, useState, useLayoutEffect, use, } from 'react';
import { BackgroundContext } from './BackgroundContext.js';
/**
`<Static>` component permanently renders its output above everything else. It's useful for displaying activity like completed tasks or logs—things that don't change after they're rendered (hence the name "Static").

It's preferred to use `<Static>` for use cases like these when you can't know or control the number of items that need to be rendered.

For example, [Tap](https://github.com/tapjs/node-tap) uses `<Static>` to display a list of completed tests. [Gatsby](https://github.com/gatsbyjs/gatsby) uses it to display a list of generated pages while still displaying a live progress bar.
*/
export default function Static(props) {
    const { items, children: render, style: customStyle } = props;
    const [index, setIndex] = useState(0);
    const inheritedBackgroundColor = use(BackgroundContext);
    const effectiveBackgroundColor = 
    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing, @typescript-eslint/strict-boolean-expressions -- Empty background colors inherit from the parent too.
    customStyle?.backgroundColor || inheritedBackgroundColor;
    const itemsToRender = useMemo(() => items.slice(index), [items, index]);
    useLayoutEffect(() => {
        setIndex(items.length);
    }, [items.length]);
    const children = itemsToRender.map((item, itemIndex) => render(item, index + itemIndex));
    const style = useMemo(() => ({
        position: 'absolute',
        flexDirection: 'column',
        ...customStyle,
        display: itemsToRender.length > 0 ? customStyle?.display : 'none',
    }), [customStyle, itemsToRender.length]);
    return (React.createElement(BackgroundContext, { value: effectiveBackgroundColor },
        React.createElement("ink-box", { internal_static: true, style: style }, children)));
}
//# sourceMappingURL=Static.js.map