119 lines
3.4 KiB
JavaScript
119 lines
3.4 KiB
JavaScript
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import Ridge from '@/components/floor-plan/modal/roofShape/type/Ridge'
|
|
import Pattern from '@/components/floor-plan/modal/roofShape/type/Pattern'
|
|
import Side from '@/components/floor-plan/modal/roofShape/type/Side'
|
|
import Image from 'next/image'
|
|
import Direction from '@/components/floor-plan/modal/roofShape/type/Direction'
|
|
import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
|
|
export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
|
|
const { getMessage } = useMessage()
|
|
const {
|
|
shapeNum,
|
|
setShapeNum,
|
|
shapeMenu,
|
|
handleSave,
|
|
pitch,
|
|
setPitch,
|
|
eavesOffset,
|
|
setEavesOffset,
|
|
gableOffset,
|
|
setGableOffset,
|
|
sleeveOffset,
|
|
setSleeveOffset,
|
|
jerkinHeadWidth,
|
|
setJerkinHeadWidth,
|
|
jerkinHeadPitch,
|
|
setJerkinHeadPitch,
|
|
hipAndGableWidth,
|
|
setHipAndGableWidth,
|
|
shedWidth,
|
|
setShedWidth,
|
|
hasSleeve,
|
|
setHasSleeve,
|
|
buttonAct,
|
|
setButtonAct,
|
|
buttonMenu,
|
|
handleConfirm,
|
|
handleRollBack,
|
|
pitchText,
|
|
shedPitch,
|
|
setShedPitch,
|
|
} = useRoofShapeSetting(id)
|
|
const { closePopup } = usePopup()
|
|
|
|
const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
|
|
const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText }
|
|
const sideProps = {
|
|
pitch,
|
|
setPitch,
|
|
eavesOffset,
|
|
setEavesOffset,
|
|
gableOffset,
|
|
setGableOffset,
|
|
sleeveOffset,
|
|
setSleeveOffset,
|
|
jerkinHeadWidth,
|
|
setJerkinHeadWidth,
|
|
jerkinHeadPitch,
|
|
setJerkinHeadPitch,
|
|
hipAndGableWidth,
|
|
setHipAndGableWidth,
|
|
shedWidth,
|
|
setShedWidth,
|
|
shedPitch,
|
|
setShedPitch,
|
|
hasSleeve,
|
|
setHasSleeve,
|
|
buttonAct,
|
|
setButtonAct,
|
|
buttonMenu,
|
|
handleConfirm,
|
|
handleRollBack,
|
|
pitchText,
|
|
}
|
|
|
|
const directionProps = {
|
|
pitch,
|
|
setPitch,
|
|
eavesOffset,
|
|
setEavesOffset,
|
|
gableOffset,
|
|
setGableOffset,
|
|
shedWidth,
|
|
setShedWidth,
|
|
pitchText,
|
|
}
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos} className="lr">
|
|
<WithDraggable.Header title={getMessage('modal.roof.shape.setting')} onClose={() => closePopup(id)} />
|
|
<WithDraggable.Body>
|
|
<div className="roof-shape-menu">
|
|
{shapeMenu.map((item) => (
|
|
<button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act' : ''}`} onClick={() => setShapeNum(item.id)}>
|
|
<div className="shape-box">
|
|
<Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
|
|
</div>
|
|
<div className="shape-title">{item.name}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="properties-setting-wrap">
|
|
{shapeNum === 1 && <Ridge {...ridgeProps} />}
|
|
{(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
|
|
{shapeNum === 4 && <Side {...sideProps} />}
|
|
{(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
|
|
{getMessage('common.setting.finish')}
|
|
</button>
|
|
</div>
|
|
</WithDraggable.Body>
|
|
</WithDraggable>
|
|
)
|
|
}
|