diff --git a/package-lock.json b/package-lock.json index f601cf4..76c8ed8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12486,6 +12486,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-global-key-down-hook": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/react-global-key-down-hook/-/react-global-key-down-hook-0.2.1.tgz", + "integrity": "sha512-7bi/jJlD6VlRird5VJTKow3q28pWn6H36zhOzBmKGgklAdEjqqwyjX0vxBcHlohd08VcUUBiLxRJ/7oz3IZOiQ==" + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 35f3dec..195dd99 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react": "^17.0.2", "react-bootstrap-icons": "^1.5.0", "react-dom": "^16.14.0", + "react-global-key-down-hook": "^0.2.1", "react-modal": "^3.14.3", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", diff --git a/src/App.js b/src/App.js index 455cb71..3ba46f6 100644 --- a/src/App.js +++ b/src/App.js @@ -2,9 +2,10 @@ import './reset.css'; // Generic reset import './style.css'; // The new new import React, {useState,useEffect,useRef,useReducer} from 'react'; +import useGlobalKeyDown from 'react-global-key-down-hook' import Modal from 'react-modal' -import {XSquare, XSquareFill} from 'react-bootstrap-icons' +import {XSquare, XSquareFill, PlusCircle} from 'react-bootstrap-icons' import { HashRouter, @@ -375,18 +376,32 @@ function InputBox(p) { const [failed,setFailed] = useState(false) const [sending,setSending] = useState(false) - function changeFunc(f){setValue(f.currentTarget.value)} + function changeFunc(f){setValue(f.currentTarget.value) + if (p.callback4) { + p.callback4(f.currentTarget.value) + }} function blurFunc(f){ - setSending(true) - setFailed(false) - p.callback(f.currentTarget.value) - .then(()=>{setFailed(false)}) - .catch(()=>{setFailed(true)}) - .then(()=>{setSending(false)})} - - return p.data?{keydownFunc(f)}} onChange={(f)=>{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}> + {p.includeBlankValue&&)} - :{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}/> + :{keydownFunc(f)}} onChange={(f)=>{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}/> } function TableEditor(p) { @@ -411,12 +426,17 @@ function TableEditor(p) { function SubmitBoxes() { axios.post(BACKEND_URL+p.path,submitVals) .then(()=>{ + setSubmitVal("Clear") setUpdate(true) }) .catch((err)=>{ alert(JSON.stringify(err.response.data)) }) } + + useGlobalKeyDown(()=>{ + SubmitBoxes() + },['Enter']) useEffect(()=>{ setUpdate(true) @@ -456,7 +476,6 @@ function TableEditor(p) { {!loading?
- @@ -464,6 +483,8 @@ function TableEditor(p) { + {{fields.map((col,i)=>)}{SubmitBoxes()}} className="submitbutton"/>} {data.map((dat)=>{fields.map((col,i)=>)})} - {{fields.map((col,i)=>)}}
{JSON.stringify(dependencies)}
{{setSubmitVal({field:col.name,value:f});}}/>}
{axios.delete(BACKEND_URL+p.path,{data:{id:dat.id}}).then(()=>{setUpdate(true)}).catch((err)=>{alert(err.response.data)})}}/> { @@ -472,7 +493,6 @@ function TableEditor(p) { id:dat.id }) }} value={String(dat[col.name])}/>
{{setSubmitVal({field:col.name,value:f.currentTarget.value});SubmitBoxes();document.getElementById("submitField0").focus()}:(f)=>{setSubmitVal({field:col.name,value:f.currentTarget.value})}}/>}
:} diff --git a/src/style.css b/src/style.css index d5dd364..8980f36 100644 --- a/src/style.css +++ b/src/style.css @@ -898,19 +898,25 @@ button{ } .submitting{ border: 1px solid rgba(0,150,200,1); - background: linear-gradient(-45deg, #2317c7, #3ce77e, #23a6d5, #23d5ab); - background-size: 400% 400%; - animation: submitgradient 1s ease infinite; + background: linear-gradient(-90deg, #124425,#000000, #124425); + background-size: 10% 400%; + animation: submitgradient 1.5s ease infinite; } @keyframes submitgradient { 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; + background-position: 0% 100%; } 100% { - background-position: 0% 50%; + background-position: 100% 0%; } +} + +.submitbutton{ + width:32px; + height:32px; +} +.submitbutton:hover{ + color:rgba(0,200,0,1); + cursor:pointer; } \ No newline at end of file