zzz.js

import React from 'react';

export const Icon = ({ className, size=1, style, iconName }) => {
    return (<i 
        className={`${className} gi gi-${iconName}`} 
        style={{...style, fontSize: `${size}em`}}
    />);
};

//


const SelectorWithSearch = ({children, className, onChange, value, renderer, data, filter, limit = 10, spacing = 5}) => {
    const [searchVal, setSearchVal] = useState(null);
    return (<>
        <Input value={searchVal} onChange={(evt) => setSearchVal(evt.target.value)}/>
        <Flex spacing={spacing}>
            {data && data.filter((d) => {
                if (!searchVal) {
                    return true;
                }
                return filter(d, searchVal);
            })
            .slice(0,limit)
            .map((child, index) => {
                const isActive = (value === child.key);
                const style = (isActive) ? { border: '3px solid black', padding: 20} : {  border: '3px solid transparent', padding: 20};
                return (
                    <div style={style} key={index} onClick={() => (onChange && onChange(child))}>
                        {renderer(child)}
                    </div>
                );
            })}
        </Flex>
    </>);
};


const ItemCreator = ({}) => {
    const itemData = useFetch('/data/icons.json');
    if (!itemData) {
        return null;
    }

    return (<FlexColumn spacing={5}>
        <Input label="Item Name"/>
        <Flex>
            <Label text="Item Icon"/>
            <SelectorWithSearch 
                renderer={(item, index) => <Icon size={2.5} key={index} iconName={item}/>}
                data={itemData.names}
                filter={(item, searchVal) => (item.toLowerCase().indexOf(searchVal) !== -1)}
            />
        </Flex>
    </FlexColumn>)
}

const AddItem = ({}) => {
    const { campaignApi } = useContext(CampaignContext);
    const { Items } = campaignApi;
    const allItems = Items.getAllTypes();
    const [creatingItem, setCreatingItem] = useState(null);
    if (!allItems) {
        return;
    }

    return (<>
        <SelectorWithSearch 
            renderer={(item) => <Item key={item.name} item={item}/>}
            data={allItems}
            filter={(item, searchVal) => (item.name.toLowerCase().indexOf(searchVal) !== -1)}
        />
        <Button>Create New Item</Button>
        <ItemCreator />
    </>)
}

const Item = styled(({ className, item, onClick }) => {
    const { ITEMS } = useContext(ConstantsContext);
    const itemData = ITEMS.find((i) => (i.id === item.id));
    return (<div onClick={onClick} className={className}>
        {itemData.iconClass && <i className={`gi ${itemData.iconClass}`}></i>}
        <div>{itemData.name}</div>
    </div>);
})`
    display: flex;
    flex-direction: column;
    border: 4px solid #212529;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    margin-right: 8px;
    text-align: center;
    i {
        font-size: 40px;
    }
    div {
        font-size: 8px;
    }
`;

import { useState, useEffect } from 'react';

const fetchHook = async (url, setter) =>{
    const raw =await fetch(url);
    const d = await raw.json();
    setter(d);
}

export const useFetch = function (url) {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetchHook(url, setData);
    }, []);
    return data;
}