web2019/static/js/shop/RFQFeedback.jsx

42 lines
1.5 KiB
React
Raw Normal View History

import {useShopStore} from "./shop_store";
import {useClickAway} from "./options/useClickAway";
import {Modal} from "react-bootstrap";
import {Validation} from "./validate";
import React from "react";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
export function RFQFeedback() {
// #!render_count
const renderCount = useRenderCount();
const closeRFQ = useShopStore((state) => state.closeRFQFeedback);
const shouldShow = useShopStore((state) => state.shouldShowRFQFeedback);
const status = useShopStore((state) => state.processingResult);
// #!render_count
console.log("RFQFeedback renders: ", renderCount)
const ref = useClickAway((e) => {
if (e.type === "mousedown") // ignore touchstart
closeRFQ()
});
return (
<Modal show={shouldShow} animation={true} centered>
<Modal.Body ref={ref} className="rfqFeedback">
<div className="d-flex">
<div>
{status.status === Validation.OK ?
<img width="30px" src="/images/shop/icon-done.svg" alt="close"/>
: <img width="30px" src="/images/shop/icon-warning.svg" alt="close"/>
}
</div>
<div style={{'padding': '0 .5em'}}>
{status.message}
</div>
</div>
</Modal.Body>
</Modal>
)
}