web2019/static/js/shop/OrderPanel.jsx

75 lines
2.0 KiB
JavaScript

import React, {PureComponent} from 'react'
import PropTypes from "prop-types";
/**
* Component that renders all things for order.
* It acts like-a layout, this component do nothing more.
*/
export class OrderPanel extends PureComponent {
static get propTypes() {
return {
title: PropTypes.string,
description: PropTypes.element,
crateMode: PropTypes.element,
crate: PropTypes.element,
summaryPrice: PropTypes.element,
form: PropTypes.element,
isMobile: PropTypes.bool,
onClickToggleMobileSideMenu: PropTypes.func,
onClickOpenImport: PropTypes.func,
};
}
render() {
const {
title,
description,
crateMode,
crate,
summaryPrice,
form,
isMobile,
onClickToggleMobileSideMenu,
onClickOpenImport,
} = this.props;
return (
<section className="panel">
<h2>{title}</h2>
<div className="control">
{description}
{crateMode}
</div>
<div>
<button
className="btn btn-sm btn-outline-primary m-0 mb-2"
style={{'cursor': 'pointer'}}
onClick={onClickOpenImport}>Import JSON
</button>
</div>
{isMobile ? (
<div className="mobileBtnDisplaySideMenu">
<button onClick={onClickToggleMobileSideMenu}>
<img src="/images/shop/icon-add.svg" alt="add"/>
</button>
</div>
) : null}
{crate}
<section className="summary">
{summaryPrice}
{form}
</section>
</section>
);
}
}