76 lines
3.4 KiB
JavaScript
76 lines
3.4 KiB
JavaScript
import WithDraggable from '@/components/common/draggable/withDraggable'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { useState } from 'react'
|
|
|
|
export default function LinePropertySetting(props) {
|
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
|
const { id, pos = contextPopupPosition } = props
|
|
const { getMessage } = useMessage()
|
|
const { closePopup } = usePopup()
|
|
const properties = [
|
|
{ name: getMessage('eaves.line'), value: 'eaves' },
|
|
{ name: getMessage('ridge'), value: 'ridge' },
|
|
{ name: getMessage('oneside.flow.ridge'), value: 'onesideFlowRidge' },
|
|
{ name: getMessage('gable'), value: 'gable' },
|
|
{ name: getMessage('gable.left'), value: 'gableLeft' },
|
|
{ name: getMessage('gable.right'), value: 'gableRight' },
|
|
{ name: getMessage('yosemune'), value: 'yosemune' },
|
|
{ name: getMessage('valley'), value: 'valley' },
|
|
{ name: getMessage('l.abandon.valley'), value: 'lAbandonValley' },
|
|
{ name: getMessage('mansard'), value: 'mansard' },
|
|
{ name: getMessage('wall.merge'), value: 'wallCollection' },
|
|
{ name: getMessage('wall.merge.type'), value: 'wallCollectionType' },
|
|
{ name: getMessage('wall.merge.flow'), value: 'wallCollectionFlow' },
|
|
{ name: getMessage('wall.merge.flow.left'), value: 'wallCollectionFlowLeft' },
|
|
{ name: getMessage('wall.merge.flow.right'), value: 'wallCollectionFlowRight' },
|
|
{ name: getMessage('no.setting'), value: 'noSetting' },
|
|
]
|
|
const [selectedProperty, setSelectedProperty] = useState(null)
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos}>
|
|
<div className={`modal-pop-wrap r mount`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
|
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="guide">
|
|
<span className="mb10">{getMessage('modal.line.property.edit.info')}</span>
|
|
<span>
|
|
{getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ]
|
|
</span>
|
|
</div>
|
|
<div className="properties-setting-wrap outer">
|
|
<div className="setting-tit">{getMessage('setting')}</div>
|
|
<div className="outline-wrap">
|
|
<div className="radio-grid-wrap">
|
|
{properties.map((property, index) => {
|
|
return (
|
|
<div className="d-check-radio pop" key={index}>
|
|
<input
|
|
type="radio"
|
|
name="radio01"
|
|
id={'ra' + (index + 1 >= 10 ? index + 1 : `0${index + 1}`)}
|
|
onChange={(e) => setSelectedProperty(property)}
|
|
/>
|
|
<label htmlFor={'ra' + (index + 1 > 10 ? index + 1 : `0${index + 1}`)}>{property.name}</label>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
}
|