web2019/static/js/shop/ImportJSON.jsx

import {useShopStore} from "./shop_store";
import {useClickAway} from "./options/useClickAway";
import {Modal} from "react-bootstrap";
import React from "react";
import {Validation} from "./validate";

const JSONExample = JSON.stringify({
    "items": [{"pn": "1124"}, {"pn": "2118"}, {"pn": "2118"}, {"pn": "2128"}],
    "type": "desktop"
});

export function ImportJSON() {
    const {shouldShow, data, loadDescription, updateImportDescription, closeImport, showImport} = useShopStore(state => ({
        shouldShow: state.importShouldOpen,
        data: state.importValue,
        loadDescription: state.loadDescription,
        updateImportDescription: state.updateImportDescription,
        closeImport: state.closeImport,
        showImport: state.openImport,
    }));

    const ref = useClickAway((e) => {
            if (e.type === "mousedown") // ignore touchstart
                closeImport()
        }
    );

    return (<>
        <button
            className="btn btn-sm btn-outline-primary m-0 mb-2"
            style={{'cursor': 'pointer'}}
            onClick={showImport}>Import JSON
        </button>
        <Modal show={shouldShow} animation={true} centered>
            <Modal.Body ref={ref}>
                <div className="form-group">
                    <p className="small">
                        Input the JSON description below. Should be something like:
                        <br/>
                        {JSONExample}
                    </p>
                </div>

                <div className="form-group w-100">
                          <textarea
                              onChange={(event) => {
                                  console.log(event)
                                  updateImportDescription(event.target.value)
                              }}
                              value={data.value}
                              className="form-control w-100"
                              rows="5"
                              placeholder="Input JSON description here."/>
                </div>
                {data.error !== Validation.OK ? (
                    <div className="form-group">
                        <p className="text-danger">{data.error === Validation.Empty ? "Empty input" : "Invalid JSON"}</p>
                    </div>
                ) : null}

                <div className="d-flex flex-column flex-sm-row justify-content-end">
                    <a type="button" onClick={closeImport}
                       className="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 mr-sm-2">Close</a>
                    <a type="button" onClick={loadDescription}
                       className={`btn btn-sm btn-primary m-0 ml-sm-2 ${data.error ? 'disabled' : ''}`}>Load
                        configuration</a>
                </div>
            </Modal.Body>
        </Modal>
    </>)
}