src/components/floor-plan/modal/eavesGable/type/Eaves.jsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
   const { getMessage } = useMessage()
@@ -21,17 +22,32 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             {getMessage('slope')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input
+            {/*<input*/}
-              type="text"
+            {/*  type="text"*/}
+            {/*  className="input-origin block"*/}
+            {/*  defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}*/}
+            {/*  ref={pitchRef}*/}
+            {/*  onChange={(e) => {*/}
+            {/*    const v = normalizeDecimalLimit(e.target.value, 2)*/}
+            {/*    e.target.value = v*/}
+            {/*    if (pitchRef?.current) pitchRef.current.value = v*/}
+            {/*  }}*/}
+            {/*/>*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
               className="input-origin block"
-              defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}
               ref={pitchRef}
-              onChange={(e) => {
+              value={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}
-                const v = normalizeDecimalLimit(e.target.value, 2)
+              onChange={(value) => {
-                e.target.value = v
+                if (pitchRef?.current) pitchRef.current.value = value
-                if (pitchRef?.current) pitchRef.current.value = v
               }}
-            />
+              options={{
+                allowNegative: false,
+                allowDecimal: true //(index !== 0),
+              }}
+            ></CalculatorInput>
           </div>
           <span className="thin">{pitchText}</span>
         </div>
@@ -40,17 +56,32 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             {getMessage('offset')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input
+            {/*<input*/}
-              type="text"
+            {/*  type="text"*/}
+            {/*  className="input-origin block"*/}
+            {/*  defaultValue={500}*/}
+            {/*  ref={offsetRef}*/}
+            {/*  onChange={(e) => {*/}
+            {/*    const v = normalizeDigits(e.target.value)*/}
+            {/*    e.target.value = v*/}
+            {/*    if (offsetRef?.current) offsetRef.current.value = v*/}
+            {/*  }}*/}
+            {/*/>*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
               className="input-origin block"
-              defaultValue={500}
               ref={offsetRef}
-              onChange={(e) => {
+              value={500}
-                const v = normalizeDigits(e.target.value)
+              onChange={(value) => {
-                e.target.value = v
+                if (offsetRef?.current) offsetRef.current.value = value
-                if (offsetRef?.current) offsetRef.current.value = v
               }}
-            />
+              options={{
+                allowNegative: false,
+                allowDecimal: false //(index !== 0),
+              }}
+            ></CalculatorInput>
           </div>
           <span className="thin">mm</span>
         </div>
@@ -91,18 +122,33 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             <div className="eaves-keraba-th">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
+                  {/*<input*/}
-                    type="text"
+                  {/*  type="text"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  defaultValue={500}*/}
+                  {/*  ref={widthRef}*/}
+                  {/*  readOnly={type === '1'}*/}
+                  {/*  onChange={(e) => {*/}
+                  {/*    const v = normalizeDigits(e.target.value)*/}
+                  {/*    e.target.value = v*/}
+                  {/*    if (widthRef?.current) widthRef.current.value = v*/}
+                  {/*  }}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
-                    defaultValue={500}
                     ref={widthRef}
-                    readOnly={type === '1'}
+                    value={500}
-                    onChange={(e) => {
+                    onChange={(value) => {
-                      const v = normalizeDigits(e.target.value)
+                      if (widthRef?.current) widthRef.current.value = value
-                      e.target.value = v
-                      if (widthRef?.current) widthRef.current.value = v
                     }}
-                  />
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false //(index !== 0),
+                    }}
+                  ></CalculatorInput>
                 </div>
                 <span className="thin">mm</span>
               </div>

src/components/floor-plan/modal/eavesGable/type/Gable.jsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
   const { getMessage } = useMessage()
@@ -21,7 +22,19 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             {getMessage('offset')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
+            {/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
+              className="input-origin block"
+              ref={offsetRef}
+              value={300}
+              options={{
+                allowNegative: false,
+                allowDecimal: false //(index !== 0),
+              }}
+            ></CalculatorInput>
           </div>
           <span className="thin">mm</span>
         </div>
@@ -65,13 +78,29 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                   {getMessage('slope')}
                 </span>
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
+                  {/*<input*/}
-                    type="text"
+                  {/*  type="text"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}*/}
+                  {/*  ref={pitchRef}*/}
+                  {/*  readOnly={type === '1'}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
-                    defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
                     ref={pitchRef}
+                    value={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
                     readOnly={type === '1'}
-                  />
+                    onChange={(value) => {
+                      if (pitchRef?.current) pitchRef.current.value = value
+                    }}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false //(index !== 0),
+                    }}
+                  ></CalculatorInput>
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
@@ -91,7 +120,20 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                   {getMessage('offset')}
                 </span>
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={800} ref={widthRef} readOnly={type === '1'} />
+                  {/*<input type="text" className="input-origin block" defaultValue={800} ref={widthRef} readOnly={type === '1'} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    ref={widthRef}
+                    value={800}
+                    readOnly={type === '1'}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false //(index !== 0),
+                    }}
+                  ></CalculatorInput>
                 </div>
                 <span className="thin">mm</span>
               </div>

src/components/floor-plan/modal/eavesGable/type/Shed.jsx

@@ -1,4 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Shed({ offsetRef }) {
   const { getMessage } = useMessage()
@@ -10,7 +11,19 @@ export default function Shed({ offsetRef }) {
             {getMessage('offset')}
           </span>
           <div className="input-grid mr5" style={{ width: '100px' }}>
-            <input type="text" className="input-origin block" ref={offsetRef} defaultValue={300} />
+            {/*<input type="text" className="input-origin block" ref={offsetRef} defaultValue={300} />*/}
+            <CalculatorInput
+              id=""
+              name=""
+              label=""
+              className="input-origin block"
+              ref={offsetRef}
+              value={300}
+              options={{
+                allowNegative: false,
+                allowDecimal: false //(index !== 0),
+              }}
+            ></CalculatorInput>
           </div>
           <span className="thin">mm</span>
         </div>

src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx

@@ -1,6 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import Image from 'next/image'
 import { useState } from 'react'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function WallMerge({ offsetRef, radioTypeRef }) {
   const { getMessage } = useMessage()
@@ -51,7 +52,20 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
                   {getMessage('offset')}
                 </span>
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} readOnly={type === '1'} />
+                  {/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} readOnly={type === '1'} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    ref={offsetRef}
+                    value={300}
+                    readOnly={type === '1'}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false //(index !== 0),
+                    }}
+                  ></CalculatorInput>
                 </div>
                 <span className="thin">mm</span>
               </div>