forked from M-Labs/web2019
59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import {SummaryOrder} from "./SummaryOrder";
|
|
import {OrderForm} from "./OrderForm";
|
|
import {CrateList} from "./CrateList";
|
|
import {useShopStore} from "./shop_store";
|
|
import {ImportJSON} from "./ImportJSON";
|
|
import {RFQFeedback} from "./RFQFeedback";
|
|
|
|
// #!render_count
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
import {OrderOptions} from "./OrderOptions";
|
|
|
|
/**
|
|
* Component that renders all things for order.
|
|
* It acts like-a layout, this component do nothing more.
|
|
*/
|
|
export function OrderPanel({title, description}) {
|
|
// #!render_count
|
|
const renderCount = useRenderCount();
|
|
const isMobile = useShopStore((state) => state.isMobile);
|
|
const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
|
|
|
|
// #!render_count
|
|
console.log("OrderPanel renders: ", renderCount)
|
|
|
|
return (<section className="panel">
|
|
|
|
<h2>{title}</h2>
|
|
|
|
<div className="control justify-content-between">
|
|
{description}
|
|
</div>
|
|
|
|
<div>
|
|
<ImportJSON/>
|
|
</div>
|
|
|
|
<RFQFeedback/>
|
|
|
|
{isMobile ? (
|
|
<div className="mobileBtnDisplaySideMenu">
|
|
<button onClick={onClickToggleMobileSideMenu}>
|
|
<img src="/images/shop/icon-add.svg" alt="add"/>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
|
|
<CrateList/>
|
|
|
|
<OrderOptions/>
|
|
|
|
<section className="summary">
|
|
<SummaryOrder/>
|
|
|
|
<OrderForm/>
|
|
</section>
|
|
|
|
</section>);
|
|
} |