67 lines
3.5 KiB
JavaScript
67 lines
3.5 KiB
JavaScript
import WithDraggable from "@/components/common/draggable/withDraggable";
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
|
|
export default function AdditionalColumnEdit(){
|
|
const [radioNum, setRadioNum] = useState(1)
|
|
|
|
const HandleRadioChange = (e) => {
|
|
setRadioNum(Number(e.target.value))
|
|
}
|
|
|
|
return(
|
|
<WithDraggable isShow={true}>
|
|
<div className={`modal-pop-wrap r`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">列の挿入 </h1>
|
|
<button className="modal-close">닫기</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="properties-setting-wrap">
|
|
<div className="setting-tit">挿入する方向を選択してください。</div>
|
|
<div className="additional-wrap">
|
|
<div className="additional-radio-wrap">
|
|
<div className="d-check-radio pop">
|
|
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={radioNum === 1}/>
|
|
<label htmlFor="ra01">左挿入</label>
|
|
</div>
|
|
<div className="d-check-radio pop">
|
|
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={radioNum === 2}/>
|
|
<label htmlFor="ra02">右挿入</label>
|
|
</div>
|
|
</div>
|
|
<div className="additional-img-wrap">
|
|
{radioNum === 1 &&
|
|
<Image src="/static/images/canvas/additional-edit01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
|
|
}
|
|
{radioNum === 2 &&
|
|
<Image src="/static/images/canvas/additional-edit02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="properties-setting-wrap">
|
|
<div className="setting-tit">凡例</div>
|
|
<div className="module-table-box">
|
|
<div className="module-table-inner">
|
|
<div className="additional-color-wrap">
|
|
<div className="additional-color-box">
|
|
<span className="additional-color pink"></span>
|
|
<span className="normal-font">選択列</span>
|
|
</div>
|
|
<div className="additional-color-box">
|
|
<span className="additional-color white"></span>
|
|
<span className="normal-font">選択列</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
} |