|
| 1 | +import React, { useEffect, useState } from "react" |
| 2 | +import { getProperties } from "./FrameHelpers" |
| 3 | +import * as CONST from "./constants" |
| 4 | +import { Alert } from "react-bootstrap" |
| 5 | +import * as util from "./utils" |
| 6 | +import { Viewer } from "./Viewer" |
| 7 | +import { HelperMessages } from "./HelperMessages" |
| 8 | +import { constructFormParams } from "./constructFormParams" |
| 9 | +import { loadTheme } from "./formActions" |
| 10 | + |
| 11 | +/* |
| 12 | +** frame - full json schema of a document |
| 13 | +** uiFrame - ui json of a document |
| 14 | +** type - document type of interest |
| 15 | +** mode - create/ edit/ view |
| 16 | +** submitButton - submit button configuration json object |
| 17 | +** formData - filled value of the document |
| 18 | +** onSubmit - a function with have custom logic to process data submitted |
| 19 | +** onSelect - a js function which gets back the selected value from selects |
| 20 | +** onTraverse - a js function which gets back the ID of a document on click |
| 21 | +** compareFormData - used for diff viewers to compare against original or changed data |
| 22 | +** language - language code parameters to support a wide variety of languages in Ui as defined in schema |
| 23 | +*/ |
| 24 | +export function FrameViewer(props){ |
| 25 | + |
| 26 | + let { frame, uiFrame, type, mode, formData, compareFormData, onSubmit, onTraverse, onSelect, language, theme } = props |
| 27 | + |
| 28 | + // schema constants |
| 29 | + const [schema, setSchema]=useState(false) |
| 30 | + // ui schema constants |
| 31 | + const [uiSchema, setUISchema]=useState(false) |
| 32 | + // display constants which holds schema & ui Schema to refresh Viewer |
| 33 | + const [display, setDisplay]=useState(false) |
| 34 | + // read only constants (used in VIEW mode) |
| 35 | + const [readOnly, setReadOnly]=useState(false) |
| 36 | + // language support constants |
| 37 | + const [lang, setLanguage]=useState(false) |
| 38 | + // error constants |
| 39 | + const [error, setError]=useState(false) |
| 40 | + // documentation constants |
| 41 | + const [documentation, setDocumentation]=useState(false) |
| 42 | + // form data constants |
| 43 | + const [data, setData]=useState(formData) |
| 44 | + // message constants |
| 45 | + const [message, setMessage]=useState(false) |
| 46 | + // look up constants which maintains a reference to all of the class definitions |
| 47 | + const [reference, setReference]=useState({}) |
| 48 | + // constants to update form props |
| 49 | + const [update, setUpdate] = useState(false) |
| 50 | + |
| 51 | + |
| 52 | + function clear() { |
| 53 | + // reset everything on change of form props |
| 54 | + setDisplay(false) |
| 55 | + setSchema(false) |
| 56 | + setUISchema(false) |
| 57 | + setReadOnly(false) |
| 58 | + setLanguage(false) |
| 59 | + } |
| 60 | + |
| 61 | + useEffect(() => { |
| 62 | + if(theme) { |
| 63 | + loadTheme(theme) |
| 64 | + } |
| 65 | + }, [theme]) |
| 66 | + |
| 67 | + |
| 68 | + useEffect(() => { |
| 69 | + //try{ |
| 70 | + if(frame && type && mode) { |
| 71 | + clear() |
| 72 | + // update form |
| 73 | + setUpdate(Date.now()) |
| 74 | + } |
| 75 | + //} |
| 76 | + //catch(e) { |
| 77 | + //setError(`An error has occured in generating frames. Err - ${e}`) |
| 78 | + //} |
| 79 | + |
| 80 | + }, [frame, uiFrame, type, mode, formData, language]) |
| 81 | + |
| 82 | + useEffect(() => { |
| 83 | + // on update construct form params |
| 84 | + if(update) { |
| 85 | + constructFormParams(props, setDocumentation, reference, setReference, setReadOnly, setMessage, display, setDisplay) |
| 86 | + } |
| 87 | + }, [update]) |
| 88 | + |
| 89 | + |
| 90 | + |
| 91 | + if(error) { |
| 92 | + return <Alert variant="danger">{error}</Alert> |
| 93 | + } |
| 94 | + |
| 95 | + return <div className="tdb__frame__viewer "> |
| 96 | + <HelperMessages frame={frame} mode={mode} type={type} formData={formData}/> |
| 97 | + <Viewer display={display} |
| 98 | + message={message} |
| 99 | + mode={mode} |
| 100 | + type={type} |
| 101 | + language={language} |
| 102 | + onSubmit={onSubmit} |
| 103 | + readOnly={readOnly} |
| 104 | + data={formData} |
| 105 | + setData={setData} |
| 106 | + documentation={documentation}/> |
| 107 | + </div> |
| 108 | + |
| 109 | +} |
| 110 | + |
| 111 | + |
0 commit comments