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

@@ -4,7 +4,6 @@ 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()
@@ -22,32 +21,17 @@ 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}
-              value={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8}
+              onChange={(e) => {
-              onChange={(value) => {
+                const v = normalizeDecimalLimit(e.target.value, 2)
-                if (pitchRef?.current) pitchRef.current.value = value
+                e.target.value = v
+                if (pitchRef?.current) pitchRef.current.value = v
               }}
-              options={{
+            />
-                allowNegative: false,
-                allowDecimal: true //(index !== 0),
-              }}
-            ></CalculatorInput>
           </div>
           <span className="thin">{pitchText}</span>
         </div>
@@ -56,32 +40,17 @@ 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}
-              value={500}
+              onChange={(e) => {
-              onChange={(value) => {
+                const v = normalizeDigits(e.target.value)
-                if (offsetRef?.current) offsetRef.current.value = value
+                e.target.value = v
+                if (offsetRef?.current) offsetRef.current.value = v
               }}
-              options={{
+            />
-                allowNegative: false,
-                allowDecimal: false //(index !== 0),
-              }}
-            ></CalculatorInput>
           </div>
           <span className="thin">mm</span>
         </div>
@@ -122,33 +91,18 @@ 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}
-                    value={500}
+                    readOnly={type === '1'}
-                    onChange={(value) => {
+                    onChange={(e) => {
-                      if (widthRef?.current) widthRef.current.value = value
+                      const v = normalizeDigits(e.target.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,7 +3,6 @@ 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()
@@ -22,19 +21,7 @@ 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>
@@ -78,29 +65,13 @@ 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>
@@ -120,20 +91,7 @@ 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,5 +1,4 @@
 import { useMessage } from '@/hooks/useMessage'
-import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Shed({ offsetRef }) {
   const { getMessage } = useMessage()
@@ -11,19 +10,7 @@ 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,7 +1,6 @@
 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()
@@ -52,20 +51,7 @@ 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>