web2019/static/js/shop/CrateList.jsx

35 lines
1.4 KiB
React
Raw Normal View History

import React from 'react'
import {Accordion} from "react-bootstrap";
import {Crate} from "./Crate.jsx";
export function CrateList({crates, isMobile, isTouch, onAddCrate, onDeleteCrate, onModeChange}) {
const onClickAdd = (_) => {
onAddCrate("crate" + Object.entries(crates).length);
}
return (
<Accordion defaultActiveKey="0">
{Object.entries(crates).map(([crate_id, crate], index) =>
<Accordion.Item eventKey={`${index}`} key={`crate${index}`}>
<Accordion.Header>Crate #{`${index}`}</Accordion.Header>
<Accordion.Body>
<Crate
data={{id: crate_id, ...crate}}
isTouch={isTouch}
isMobile={isMobile}
onDelete={onDeleteCrate}
onModeChange={(new_mode) => onModeChange(crate_id, new_mode)}
/>
</Accordion.Body>
</Accordion.Item>
)}
<Accordion.Item eventKey="last">
<Accordion.Header>
Add new crate
<button style={{width: "32px"}} onClick={onClickAdd}>
<img src="/images/shop/icon-add.svg" alt="add" />
</button>
</Accordion.Header>
</Accordion.Item>
</Accordion>)
}