40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import { useMessage } from '@/hooks/useMessage'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
|
|
import { selectedRoofMaterialSelector } from '@/store/settingAtom'
|
|
import { useEffect } from 'react'
|
|
|
|
export default function Eaves({ offsetRef, pitchRef, pitchText }) {
|
|
const { getMessage } = useMessage()
|
|
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
|
|
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
|
|
|
|
return (
|
|
<>
|
|
<div className="outline-form mb10">
|
|
<span className="mr10" style={{ width: '63px' }}>
|
|
{getMessage('slope')}
|
|
</span>
|
|
<div className="input-grid mr5">
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}
|
|
ref={pitchRef}
|
|
/>
|
|
</div>
|
|
<span className="thin">{pitchText}</span>
|
|
</div>
|
|
<div className="outline-form mb10">
|
|
<span className="mr10" style={{ width: '63px' }}>
|
|
{getMessage('eaves.offset')}
|
|
</span>
|
|
<div className="input-grid mr5">
|
|
<input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|