115 lines
4.5 KiB
JavaScript
115 lines
4.5 KiB
JavaScript
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import Image from 'next/image'
|
|
import { useState } from 'react'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { MODULE_REMOVE_TYPE, useModule } from '@/hooks/module/useModule'
|
|
|
|
export default function RowRemove(props) {
|
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
|
const { id, pos = contextPopupPosition, apply } = props
|
|
const { closePopup } = usePopup()
|
|
const [selectedType, setSelectedType] = useState(MODULE_REMOVE_TYPE.TOP)
|
|
const { getMessage } = useMessage()
|
|
const { moduleRowRemove } = useModule()
|
|
const types = [
|
|
{ name: getMessage('modal.row.remove.type.up'), value: MODULE_REMOVE_TYPE.TOP },
|
|
{ name: getMessage('modal.row.remove.type.down'), value: MODULE_REMOVE_TYPE.BOTTOM },
|
|
{ name: getMessage('modal.row.remove.type.side'), value: MODULE_REMOVE_TYPE.VERTICAL_SIDE },
|
|
{ name: getMessage('modal.row.remove.type.none'), value: MODULE_REMOVE_TYPE.NONE },
|
|
]
|
|
const handleApply = () => {
|
|
// if (apply) apply()
|
|
moduleRowRemove(selectedType)
|
|
closePopup(id)
|
|
}
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos} className="r">
|
|
<WithDraggable.Header title={getMessage('modal.row.remove')} onClose={() => closePopup(id)} />
|
|
<WithDraggable.Body>
|
|
<div className="properties-setting-wrap">
|
|
<div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
|
|
<div className="additional-wrap">
|
|
<div className="additional-radio-wrap">
|
|
{types.map((type, index) => {
|
|
return (
|
|
<div className="d-check-radio pop" key={index}>
|
|
<input
|
|
type="radio"
|
|
name="radio01"
|
|
id={`ra0${index + 1}`}
|
|
onClick={(e) => setSelectedType(e.target.value)}
|
|
value={type.value}
|
|
checked={selectedType === type.value}
|
|
/>
|
|
<label htmlFor={`ra0${index + 1}`}>{type.name}</label>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<div className="additional-img-wrap">
|
|
{selectedType === MODULE_REMOVE_TYPE.TOP && (
|
|
<Image
|
|
src="/static/images/canvas/additional_bundle-del01.svg"
|
|
alt="react"
|
|
width={0}
|
|
height={0}
|
|
style={{ width: 'auto', height: 'auto' }}
|
|
/>
|
|
)}
|
|
{selectedType === MODULE_REMOVE_TYPE.BOTTOM && (
|
|
<Image
|
|
src="/static/images/canvas/additional_bundle-del02.svg"
|
|
alt="react"
|
|
width={0}
|
|
height={0}
|
|
style={{ width: 'auto', height: 'auto' }}
|
|
/>
|
|
)}
|
|
{selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && (
|
|
<Image
|
|
src="/static/images/canvas/additional_bundle-del03.svg"
|
|
alt="react"
|
|
width={0}
|
|
height={0}
|
|
style={{ width: 'auto', height: 'auto' }}
|
|
/>
|
|
)}
|
|
{selectedType === MODULE_REMOVE_TYPE.NONE && (
|
|
<Image
|
|
src="/static/images/canvas/additional_bundle-del04.svg"
|
|
alt="react"
|
|
width={0}
|
|
height={0}
|
|
style={{ width: 'auto', height: 'auto' }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="properties-setting-wrap">
|
|
<div className="setting-tit">{getMessage('legend')}</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">{getMessage('modal.panel.select.row')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={handleApply}>
|
|
{getMessage('modal.common.save')}
|
|
</button>
|
|
</div>
|
|
</WithDraggable.Body>
|
|
</WithDraggable>
|
|
)
|
|
}
|