Something went wrong. Try again.
the next generation of the in-browser educational proof assistant
Something went wrong. Try again.
2.4 kB · 82 lines
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
@react.componentlet make = (~label: string, ~onConfirm: string => result<unit, string>) => { let (isEditing, setIsEditing) = React.useState(() => false) let (text, setText) = React.useState(() => label) let (tempText, setTempText) = React.useState(() => label) let (errorMsg, setErrorMsg) = React.useState(() => None)
let handleConfirm = _evt => { switch onConfirm(tempText) { | Ok() => setText(_ => tempText) setErrorMsg(_ => None) setIsEditing(_ => false) | Error(msg) => // Revert text and display error popup setTempText(_ => text) setErrorMsg(_ => Some(msg)) } }
let handleCancel = _evt => { setTempText(_ => text) setErrorMsg(_ => None) setIsEditing(_ => false) }
let dismissError = _evt => { setErrorMsg(_ => None) }
<div className="editable-container"> {if isEditing { <div className="edit-wrapper"> <div className="controls-row"> <input type_="text" className="auto-input" value={tempText} size={Math.Int.max(1, String.length(tempText))} onChange={evt => setTempText(_ => ReactEvent.Form.target(evt)["value"])} onKeyDown={evt => { let key = ReactEvent.Keyboard.key(evt) if key == "Enter" { handleConfirm(evt) } else if key == "Escape" { handleCancel(evt) } }} autoFocus=true /> <span className="editor-button button-icon button-icon-blue typcn typcn-tick" onClick={handleConfirm}> </span> <span className="editor-button button-icon button-icon-red typcn typcn-times" onClick={handleCancel}> </span> </div>
{switch errorMsg { | Some(msg) => <div className="error-box"> <span> {React.string(msg)} </span> <span className="editor-button button-icon button-icon-grey typcn typcn-times" onClick={dismissError}> </span> </div> | None => React.null }} </div> } else { <span className="label-span" onClick={_ => { setTempText(_ => text) setErrorMsg(_ => None) setIsEditing(_ => true) }}> <IdentifierView identifier=text /> </span> }} </div>}