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

43 lines
1.6 KiB
JavaScript

import React from "react";
import {Modal} from "react-bootstrap";
import {useShopStore} from "./shop_store";
import {useClickAway} from "./options/useClickAway";
export function ShowJSON() {
const {shouldShow, description, showDescription, closeDescription} = useShopStore(state => ({
shouldShow: state.shouldShowDescription,
description: state.description,
closeDescription: state.closeDescription,
showDescription: state.showDescription,
}));
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}>
<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 m-1">
<a type="button" onClick={closeDescription}
className="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 mr-sm-2">Close</a>
</div>
</Modal.Body>
</Modal>
</>)
}