web2019/static/js/shop/CrateList.jsx

40 lines
1.5 KiB
React
Raw Normal View History

import React from 'react'
import {Accordion} from "react-bootstrap";
2023-12-12 18:21:09 +08:00
import {Crate} from "./Crate";
import {useShopStore} from "./shop_store";
export function CrateList() {
const {
crates,
active_crate,
onAddCrate,
setActiveCrate,
} = useShopStore(state=> ({
crates: state.crates,
active_crate: state.active_crate,
onAddCrate: state.newCrate,
setActiveCrate: state.setActiveCrate,
}));
return (
<Accordion id="accordion_crates" flush activeKey={active_crate} onSelect={(e) => {
// if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded
if (e !== null)
setActiveCrate(e);
else
setActiveCrate("")
}}>
{crates.map((crate, index) =>
<Accordion.Item eventKey={crate.id} key={"accordion"+crate.id} className="accordion_crates_item">
<Accordion.Header>Crate #{`${index}`}</Accordion.Header>
<Accordion.Body>
<Crate crate_index={index}/>
</Accordion.Body>
</Accordion.Item>
)}
<Accordion.Item eventKey="last" id="accordion_crates_add">
<Accordion.Header onClick={onAddCrate}>
Add new crate
</Accordion.Header>
</Accordion.Item>
</Accordion>)
}