67 lines
2.5 KiB
JavaScript
67 lines
2.5 KiB
JavaScript
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import Eaves from '@/components/floor-plan/modal/roofShape/passivity/Eaves'
|
|
import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
|
|
import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePassivitySetting'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
|
|
export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } }) {
|
|
const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef, pitchText } =
|
|
useRoofShapePassivitySetting(id)
|
|
const { getMessage } = useMessage()
|
|
const { closePopup } = usePopup()
|
|
|
|
const eavesProps = {
|
|
offsetRef,
|
|
pitchRef,
|
|
pitchText,
|
|
}
|
|
|
|
const gableProps = {
|
|
offsetRef,
|
|
pitchRef,
|
|
pitchText,
|
|
}
|
|
|
|
const shedProps = {
|
|
offsetRef,
|
|
}
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos} className="xxm">
|
|
<WithDraggable.Header title={getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')} onClose={() => closePopup(id)} />
|
|
<WithDraggable.Body>
|
|
<div className="modal-btn-wrap">
|
|
{buttons.map((button) => (
|
|
<button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
|
|
{button.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="modal-bottom-border-bx">
|
|
<div className="setting-tit">{getMessage('setting')}</div>
|
|
<div className="discrimination-box">
|
|
{type === TYPES.EAVES && <Eaves {...eavesProps} />}
|
|
{type === TYPES.GABLE && <Gable {...gableProps} />}
|
|
{type === TYPES.SHED && <Shed {...shedProps} />}
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame sub-tab mr5" onClick={handleRollback}>
|
|
{getMessage('common.setting.rollback')}
|
|
</button>
|
|
<button className="btn-frame sub-tab act" onClick={handleConfirm}>
|
|
{getMessage('apply')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
|
|
{getMessage('common.setting.finish')}
|
|
</button>
|
|
</div>
|
|
</WithDraggable.Body>
|
|
</WithDraggable>
|
|
)
|
|
}
|