42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
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>
|
|
)
|
|
} |