1
0
Fork 0
web2019/static/js/shop/OrderPanel.jsx

61 lines
1.5 KiB
JavaScript

import React from 'react'
import {OrderSummary} from "./OrderSummary";
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";
/**
* Component that renders all things for order.
* It acts like-a layout, this component do nothing more.
*/
export function OrderPanel({title, description, legend}) {
// #!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 className="legend">
{legend}
</div>
</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/>
<section className="summary">
<OrderSummary/>
<OrderForm/>
</section>
</section>);
}