How to use @wq/react - 10 common examples

export default function Breadcrumbs() {
    var links = useBreadcrumbs(),
        classes = useStyles(),
        { ButtonLink } = useComponents();

    if (!links) {
        links = [{ url: '/', label: 'Home', active: true }];
    }
    links[0].label = ;

    // FIXME: NavLink should already be able to detect current page
    links[links.length - 1].active = true;

    return (
        
            }>
                {links.map(({ url, label, active }, i) => (

export default function Breadcrumbs() {
    var links = useBreadcrumbs(),
        classes = useStyles(),
        { ButtonLink } = useComponents();

    if (!links) {
        links = [{ url: '/', label: 'Home', active: true }];
    }
    links[0].label = ;

    // FIXME: NavLink should already be able to detect current page
    links[links.length - 1].active = true;

    return (
        
            }>
                {links.map(({ url, label, active }, i) => (

export default function Spinner() {
    const { active } = useSpinner();
    if (!active) {
        return null;
    }
    // FIXME: text, type
    return (
        
            
        
    );
}

test('list map', async () => {
    const { AutoMap } = map.components,
        { Geojson } = map.config.overlays;

    setRouteInfo({
        page: 'item',
        mode: 'list'
    });

    const result = renderTest(AutoMap, mockApp),
        overlay = result.root.findByType(Geojson);

    expect(overlay.props).toEqual({
        name: 'item',
        popup: 'item',
        url: '/items.geojson',
        cluster: true,
        active: true
    });

    await nextTick();

    const leafletOverlay =
        overlay.children[0].children[0].instance.leafletElement;

    expect(leafletOverlay.getBounds().toBBoxString()).toEqual(

export function useGeoJSON(url, data, asFeatureCollection) {
    const app = useApp(),
        [geojson, setGeojson] = useState();

    if (!(url.indexOf('/') === 0 || url.indexOf('http') === 0)) {
        console.warn(new Error(`Use "{{rt}}/${url}" instead of relative URL`));
        url = app.service + '/' + url;
    }

    useEffect(() => {
        if (data) {
            setGeojson(parseGeojson(data, asFeatureCollection));
            return;
        }
        if (_cache[url]) {
            setGeojson(parseGeojson(_cache[url], asFeatureCollection));
            return;
        }

export default function Header() {
    const title = useTitle(),
        { Breadcrumbs } = useComponents();
    return (
        <>
            
                
                    {title}
                
            
            
        
    );
}

export default function AutoMap() {
    const state = useMapState(),
        {
            Map,
            AutoBasemap,
            AutoOverlay,
            Legend,
            BasemapToggle,
            OverlayToggle
        } = useComponents(),
        { Highlight } = useOverlayComponents();

    if (!state) {
        return null;
    }
    const { basemaps, overlays, bounds, mapProps, highlight } = state;
    return (
        <map>
            <legend>
                {basemaps.map((conf, i) =&gt; (
                    
                        </legend></map>

export default function List() {
    const reverse = useReverse(),
        { list } = useRenderContext(),
        { page } = useRouteInfo(),
        { ListItemLink, Pagination } = useComponents();

    return (
        <div>
            
                {list.map(row =&gt; (
                    
                        {row.label}
                    
                ))}
            
            
        </div>
    );

export default function Detail() {
    const reverse = useReverse(),
        { page, item_id } = useRouteInfo(),
        { Link } = useComponents();
    return (
        <div>
            Edit
            
        </div>
    );
}

export default function Index() {
    const reverse = useReverse(),
        { pages } = useRenderContext(),
        { ListItemLink } = useComponents();

    return (
        <div>
            {pages &amp;&amp; (
                
                    {pages.map(page =&gt; (
                        
                            {page.name}
                            {page.list &amp;&amp; ' list'}</div>