forked from M-Labs/web2019
46 lines
1.8 KiB
JavaScript
46 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import {Modal} from "react-bootstrap";
|
|
import {useShopStore} from "./shop_store";
|
|
import {useClickAway} from "./options/useClickAway";
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
|
|
export function ShowJSON() {
|
|
const renderCount = useRenderCount();
|
|
|
|
const shouldShow = useShopStore((state) => state.shouldShowDescription);
|
|
const description = useShopStore((state) => state.description);
|
|
const closeDescription = useShopStore((state) => state.closeDescription);
|
|
const showDescription = useShopStore((state) => state.showDescription);
|
|
|
|
console.log("ShowJSON renders: ", renderCount)
|
|
|
|
const ref = useClickAway((e) => {
|
|
if (e.type === "mousedown") // ignore touchstart
|
|
closeDescription()
|
|
}
|
|
);
|
|
|
|
return (<>
|
|
<input
|
|
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
|
|
style={{'cursor': 'pointer', 'fontWeight': '700'}}
|
|
defaultValue="Show JSON"
|
|
onClick={showDescription}
|
|
readOnly={true}/>
|
|
<Modal show={shouldShow} animation={true} centered>
|
|
<Modal.Body ref={ref} className="rfqFeedback">
|
|
<textarea
|
|
value={description}
|
|
className="form-control w-100"
|
|
rows={10}
|
|
readOnly={true}
|
|
placeholder="There should be description of the crate"/>
|
|
|
|
<div className="d-flex flex-column flex-sm-row justify-content-end">
|
|
<a type="button" onClick={closeDescription}
|
|
className="btn btn-sm btn-outline-primary m-0 mb-1 mt-2 mb-sm-0 me-sm-2">Close</a>
|
|
</div>
|
|
</Modal.Body>
|
|
</Modal>
|
|
</>)
|
|
} |