屋根形状の設定 - 계산기 토클버튼 추가

This commit is contained in:
ysCha 2026-03-19 16:33:33 +09:00
parent 678b9442cd
commit ebc6181bd4
11 changed files with 48 additions and 16 deletions

View File

@ -7,9 +7,11 @@ 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'
import { useState } from 'react'
export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const [useCalcPad, setUseCalcPad] = useState(false)
const {
shapeNum,
setShapeNum,
@ -44,8 +46,10 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
} = useRoofShapeSetting(id)
const { closePopup } = usePopup()
const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText }
const disableKeypad = !useCalcPad
const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad }
const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText, disableKeypad }
const sideProps = {
pitch,
setPitch,
@ -73,6 +77,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
handleConfirm,
handleRollBack,
pitchText,
disableKeypad,
}
const directionProps = {
@ -85,6 +90,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
shedWidth,
setShedWidth,
pitchText,
disableKeypad,
}
return (
@ -108,6 +114,9 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
{(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
</div>
<div className="grid-btn-wrap">
<button className="mr5" style={{ verticalAlign: 'middle' }} onClick={() => setUseCalcPad((prev) => !prev)}>
<Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
</button>
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
{getMessage('common.setting.finish')}
</button>

View File

@ -2,7 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText }) {
export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText, disableKeypad }) {
const { getMessage } = useMessage()
return (
<div className="setting-box">
@ -24,6 +24,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
className="input-origin block"
value={pitch}
onChange={(value) => setPitch(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
@ -50,6 +51,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
className="input-origin block"
value={eavesOffset}
onChange={(value) => setEavesOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
@ -76,6 +78,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
className="input-origin block"
value={gableOffset}
onChange={(value) => setGableOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
@ -102,6 +105,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
className="input-origin block"
value={shedWidth}
onChange={(value) => setShedWidth(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),

View File

@ -4,7 +4,7 @@ import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Pattern(props) {
const { getMessage } = useMessage()
const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText } = props
const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText, disableKeypad } = props
return (
<div className="setting-box">
<div className="outline-form mb10">
@ -21,6 +21,7 @@ export default function Pattern(props) {
className="input-origin block"
value={pitch}
onChange={(value) => setPitch(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
@ -43,6 +44,7 @@ export default function Pattern(props) {
className="input-origin block"
value={eavesOffset}
onChange={(value) => setEavesOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
@ -65,6 +67,7 @@ export default function Pattern(props) {
className="input-origin block"
value={gableOffset}
onChange={(value) => setGableOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),

View File

@ -5,7 +5,7 @@ import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Ridge(props) {
const { getMessage } = useMessage()
const { pitch, setPitch, eavesOffset, setEavesOffset, pitchText } = props
const { pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad } = props
return (
<div className="setting-box">
@ -23,6 +23,7 @@ export default function Ridge(props) {
className="input-origin block"
value={pitch}
onChange={(value) => setPitch(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
@ -45,6 +46,7 @@ export default function Ridge(props) {
className="input-origin block"
value={eavesOffset}
onChange={(value) => setEavesOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),

View File

@ -35,14 +35,15 @@ export default function Side(props) {
pitchText,
shedPitch,
setShedPitch,
disableKeypad,
} = props
const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
const gableProps = { gableOffset, setGableOffset }
const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
const shedProps = { shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }
const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad }
const gableProps = { gableOffset, setGableOffset, disableKeypad }
const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve, disableKeypad }
const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText, disableKeypad }
const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText, disableKeypad }
const shedProps = { shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText, disableKeypad }
const { getMessage } = useMessage()

View File

@ -2,7 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText }) {
export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText, disableKeypad }) {
const { getMessage } = useMessage()
return (
<>
@ -20,6 +20,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pi
className="input-origin block"
value={pitch}
onChange={(value) => setPitch(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
@ -43,6 +44,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pi
className="input-origin block"
value={eavesOffset}
onChange={(value) => setEavesOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),

View File

@ -3,7 +3,7 @@ import { useEffect } from 'react'
import { normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Gable({ gableOffset, setGableOffset }) {
export default function Gable({ gableOffset, setGableOffset, disableKeypad }) {
const { getMessage } = useMessage()
return (
@ -20,6 +20,7 @@ export default function Gable({ gableOffset, setGableOffset }) {
className="input-origin block"
value={gableOffset}
onChange={(value) => setGableOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),

View File

@ -2,7 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }) {
export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText, disableKeypad }) {
const { getMessage } = useMessage()
return (
<>
@ -20,6 +20,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
className="input-origin block"
value={pitch}
onChange={(value) => setPitch(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
@ -42,6 +43,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
className="input-origin block"
value={eavesOffset}
onChange={(value) => setEavesOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
@ -69,6 +71,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
className="input-origin block"
value={hipAndGableWidth}
onChange={(value) => setHipAndGableWidth(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),

View File

@ -10,6 +10,7 @@ export default function Jerkinhead({
jerkinHeadPitch,
setJerkinHeadPitch,
pitchText,
disableKeypad,
}) {
const { getMessage } = useMessage()
return (
@ -28,6 +29,7 @@ export default function Jerkinhead({
className="input-origin block"
value={gableOffset}
onChange={(value) => setGableOffset(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
@ -51,6 +53,7 @@ export default function Jerkinhead({
className="input-origin block"
value={jerkinHeadWidth}
onChange={(value) => setJerkinHeadWidth(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),
@ -77,6 +80,7 @@ export default function Jerkinhead({
className="input-origin block"
value={jerkinHeadPitch}
onChange={(value) => setJerkinHeadPitch(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),

View File

@ -2,7 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }) {
export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText, disableKeypad }) {
const { getMessage } = useMessage()
return (
<>
@ -18,6 +18,7 @@ export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch,
className="input-origin block"
value={shedPitch}
onChange={(value) => setShedPitch(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
@ -38,6 +39,7 @@ export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch,
className="input-origin block"
value={shedWidth}
onChange={(value) => setShedWidth(value)}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),

View File

@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
import { normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }) {
export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve, disableKeypad }) {
const { getMessage } = useMessage()
return (
<>
@ -43,6 +43,7 @@ export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasS
value={sleeveOffset}
onChange={(value) => setSleeveOffset(value)}
readOnly={hasSleeve === '0'}
disableKeypad={disableKeypad}
options={{
allowNegative: false,
allowDecimal: false //(index !== 0),