2025-03-13 16:12:44 +09:00

66 lines
2.0 KiB
JavaScript

import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting'
import { usePopup } from '@/hooks/usePopup'
export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const {
type,
setType,
buttonMenu,
currentWallLineRef,
TYPES,
radioTypeRef,
arrow1Ref,
arrow2Ref,
length1Ref,
length2Ref,
handleSave,
wallLineEditRef,
} = useWallLineOffsetSetting(id)
const wallLineProps = {
length1Ref,
length2Ref,
arrow1Ref,
arrow2Ref,
radioTypeRef,
currentWallLineRef,
}
const offsetProps = {
length1Ref,
arrow1Ref,
currentWallLineRef,
}
return (
<WithDraggable isShow={true} pos={pos} className="r">
<WithDraggable.Header title={getMessage('modal.wallline.offset.setting')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
{item.name}
</button>
))}
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('setting')}</div>
{type === TYPES.WALL_LINE_EDIT && <WallLine ref={wallLineEditRef} {...wallLineProps} />}
{type === TYPES.OFFSET && <Offset {...offsetProps} />}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={handleSave}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable>
)
}