40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import {Accordion} from "react-bootstrap";
|
|
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} >
|
|
<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>)
|
|
} |