sigonasr2/EquationsBuilder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Include editor controls for operators.

Browse Source
This commit is contained in:
sigonasr2, Sig, Sigo 2021-12-14 17:41:26 +00:00
parent c4a01da404
commit e88ff9bbd5
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
equations/src/App.js
View File

@ -3,8 +3,27 @@ import {useEffect,useState} from 'react';
import './App.css'; import './App.css';
function EditorControls(p) { function EditorControls(p) {
const {equation,setEquation,id} = p
return <> return <>
<span className="mouseover" style={{position:"absolute",bottom:0,left:0}}>{"<"}</span><span className="mouseover" style={{position:"absolute",bottom:0,right:0}}>{">"}</span> {id>0&&<span className="mouseover" style={{position:"absolute",bottom:0,left:0}} onClick={()=>{
var eqArr = [...equation]
var oldVal = eqArr[id-1]
eqArr[id-1] = eqArr[id]
eqArr[id] = oldVal
setEquation(eqArr)
}}>{"<"}</span>}
{id<equation.length-1&&<span className="mouseover" style={{position:"absolute",bottom:0,right:0}} onClick={()=>{
var eqArr = [...equation]
var oldVal = eqArr[id+1]
eqArr[id+1] = eqArr[id]
eqArr[id] = oldVal
setEquation(eqArr)
}}>{">"}</span>}
<span className="mouseover" style={{color:"maroon",position:"absolute",top:0,right:0}} onClick={()=>{
var eqArr = [...equation]
eqArr.splice(id,1)
setEquation(eqArr)
}}>{"x"}</span>
</> </>
} }
@ -41,7 +60,7 @@ function EquationGroup(p) {
<br/> <br/>
{arr.map((eq,i)=>Array.isArray(eq)?<EquationGroup equation={myArr} setEquation={setMyArr} data={data} arr={eq} key={i} id={i}/>:eq==="×"||eq==="-"||eq==="+"||eq==="÷"?<EquationOperator equation={myArr} setEquation={setMyArr} data={data} operator={eq} key={i} id={i}/>:<EquationValue equation={myArr} setEquation={setMyArr} data={data} val={eq} key={i} id={i}/>)} {arr.map((eq,i)=>Array.isArray(eq)?<EquationGroup equation={myArr} setEquation={setMyArr} data={data} arr={eq} key={i} id={i}/>:eq==="×"||eq==="-"||eq==="+"||eq==="÷"?<EquationOperator equation={myArr} setEquation={setMyArr} data={data} operator={eq} key={i} id={i}/>:<EquationValue equation={myArr} setEquation={setMyArr} data={data} val={eq} key={i} id={i}/>)}
</div> </div>
<EditorControls/> <EditorControls equation={equation} setEquation={setEquation} id={id}/>
</div> </div>
<span style={{fontSize:"24px"}}>)</span> <span style={{fontSize:"24px"}}>)</span>
</> </>
@ -58,9 +77,11 @@ function EquationOperator(p) {
setEquation(eqArr) setEquation(eqArr)
},[op]) },[op])
return <select value={op} defaultValue={operator} onChange={(ev)=>{setOp(ev.currentTarget.value)}}> return <div style={{position:"relative",display:"inline-block",paddingLeft:"12px",paddingRight:"12px",paddingTop:"10px"}}><select value={op} defaultValue={operator} onChange={(ev)=>{setOp(ev.currentTarget.value)}}>
{["+","-","×","÷"].map((sign)=><option key={sign} value={sign}>{sign}</option>)} {["+","-","×","÷"].map((sign)=><option key={sign} value={sign}>{sign}</option>)}
</select> </select>
<EditorControls equation={equation} setEquation={setEquation} id={id}/>
</div>
} }
function EquationValue(p) { function EquationValue(p) {
@ -74,12 +95,13 @@ function EquationValue(p) {
setEquation(eqArr) setEquation(eqArr)
},[item]) },[item])
return <div style={{display:"inline-block",border:"1px solid black"}}> return <div style={{position:"relative",display:"inline-block",border:"1px solid black",paddingTop:"16px"}}>
<select value={item} defaultValue={val} onChange={(ev)=>{setItem(ev.currentTarget.value)}}> <select value={item} defaultValue={val} onChange={(ev)=>{setItem(ev.currentTarget.value)}}>
{Object.keys(data).map((key)=><option key={key} value={key}>{key}</option>)} {Object.keys(data).map((key)=><option key={key} value={key}>{key}</option>)}
</select> </select>
<br/> <br/>
{data[val]} {data[val]}
<EditorControls equation={equation} setEquation={setEquation} id={id}/>
</div> </div>
} }