Add a NumberInput component.

GitOrigin-RevId: 7905f3e6ad0c3e419f9db5e7e903ede8c8da8818
nkzw-tech · Oct 28, 2024 · 1392d6d · 1392d6d
1 parent e45ce50
commit 1392d6d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 24 deletions.
diff --git a/hera/editor/lib/ObjectiveCard.tsx b/hera/editor/lib/ObjectiveCard.tsx
@@ -21,6 +21,7 @@ import Box from '@deities/ui/Box.tsx';
 import { applyVar } from '@deities/ui/cssVar.tsx';
 import Dropdown from '@deities/ui/Dropdown.tsx';
 import Form from '@deities/ui/Form.tsx';
+import NumberInput from '@deities/ui/form/NumberInput.tsx';
 import gradient from '@deities/ui/gradient.tsx';
 import useAlert from '@deities/ui/hooks/useAlert.tsx';
 import Icon from '@deities/ui/Icon.tsx';
@@ -210,7 +211,7 @@ export default function ObjectiveCard({
                 <span className={labelWidthStyle}>
                   <fbt desc="Label for objective amount">Amount</fbt>
                 </span>
-                <input
+                <NumberInput
                   className={rounds == null ? 'invalid' : undefined}
                   max={MAX_AMOUNT}
                   min={MIN_AMOUNT}
@@ -229,7 +230,6 @@ export default function ObjectiveCard({
                   }}
                   required
                   style={{ width: 100 }}
-                  type="number"
                   value={amount ?? ''}
                 />
               </Stack>
@@ -241,7 +241,7 @@ export default function ObjectiveCard({
                 <span className={labelWidthStyle}>
                   <fbt desc="Label for objective rounds">Rounds</fbt>
                 </span>
-                <input
+                <NumberInput
                   className={rounds == null ? 'invalid' : undefined}
                   max={MAX_ROUNDS}
                   min={MIN_ROUNDS}
@@ -262,7 +262,6 @@ export default function ObjectiveCard({
                   }}
                   required
                   style={{ width: 100 }}
-                  type="number"
                   value={rounds ?? ''}
                 />
               </Stack>

diff --git a/hera/editor/panels/EntityPanel.tsx b/hera/editor/panels/EntityPanel.tsx
@@ -17,6 +17,7 @@ import isPresent from '@deities/hephaestus/isPresent.tsx';
 import parseInteger from '@deities/hephaestus/parseInteger.tsx';
 import Box from '@deities/ui/Box.tsx';
 import isControlElement from '@deities/ui/controls/isControlElement.tsx';
+import NumberInput from '@deities/ui/form/NumberInput.tsx';
 import useAlert from '@deities/ui/hooks/useAlert.tsx';
 import Icon from '@deities/ui/Icon.tsx';
 import Ammo from '@deities/ui/icons/Ammo.tsx';
@@ -284,12 +285,11 @@ export default function EntityPanel({
               value={entity.health}
             />
             <Stack alignCenter className={textStyle} gap nowrap>
-              <input
+              <NumberInput
                 max={String(MaxHealth)}
                 min="1"
                 onChange={onHealthChange}
                 style={{ width: 80 }}
-                type="number"
                 value={entity.health}
               />
               /{MaxHealth}
@@ -308,12 +308,11 @@ export default function EntityPanel({
                   value={entity.fuel}
                 />
                 <Stack alignCenter className={textStyle} gap nowrap>
-                  <input
+                  <NumberInput
                     max={String(entity.info.configuration.fuel)}
                     min="0"
                     onChange={onFuelChange}
                     style={{ width: 80 }}
-                    type="number"
                     value={entity.fuel}
                   />
                   /{entity.info.configuration.fuel}
@@ -355,12 +354,11 @@ export default function EntityPanel({
                               value={ammo}
                             />
                             <Stack alignCenter className={textStyle} gap nowrap>
-                              <input
+                              <NumberInput
                                 max={String(weapon.supply)}
                                 min="0"
                                 onChange={onAmmoChange}
                                 style={{ width: 80 }}
-                                type="number"
                                 value={ammo}
                               />
                               /{weapon.supply}

diff --git a/hera/editor/panels/MapEditorSettingsPanel.tsx b/hera/editor/panels/MapEditorSettingsPanel.tsx
@@ -20,6 +20,7 @@ import parseInteger from '@deities/hephaestus/parseInteger.tsx';
 import Box from '@deities/ui/Box.tsx';
 import clipBorder from '@deities/ui/clipBorder.tsx';
 import { applyVar } from '@deities/ui/cssVar.tsx';
+import NumberInput from '@deities/ui/form/NumberInput.tsx';
 import Icon from '@deities/ui/Icon.tsx';
 import InlineLink from '@deities/ui/InlineLink.tsx';
 import pixelBorder from '@deities/ui/pixelBorder.tsx';
@@ -166,7 +167,7 @@ export default function MapEditorSettingsPanel({
                 <span>
                   <fbt desc="Starting funds for a game">Starting Funds</fbt>
                 </span>
-                <input
+                <NumberInput
                   min={0}
                   onChange={({ target: { value } }) => {
                     const seedCapital = parseInteger(value || '0');
@@ -181,7 +182,6 @@ export default function MapEditorSettingsPanel({
                     }
                   }}
                   style={{ width: 100 }}
-                  type="number"
                   value={config.seedCapital}
                 />
               </Stack>
@@ -191,7 +191,7 @@ export default function MapEditorSettingsPanel({
                 <span>
                   <fbt desc="Starting charges for a game">Starting Charges</fbt>
                 </span>
-                <input
+                <NumberInput
                   max={String(MaxCharges)}
                   min={0}
                   onChange={({ target: { value } }) => {
@@ -207,7 +207,6 @@ export default function MapEditorSettingsPanel({
                     }
                   }}
                   style={{ width: 100 }}
-                  type="number"
                   value={config.initialCharge}
                 />
               </Stack>
@@ -232,31 +231,29 @@ export default function MapEditorSettingsPanel({
             <label>
               <Stack alignCenter gap nowrap>
                 <span>{getTranslatedPerformanceTypeName('pace')}</span>
-                <input
+                <NumberInput
                   disabled={!canEditPerformance}
                   min={1}
                   onChange={({ target: { value } }) =>
                     setMetric('pace', parseInteger(value || '0'))
                   }
                   placeholder={metrics?.pace ? String(metrics.pace) : ''}
                   style={{ width: 80 }}
-                  type="number"
                   value={performance.pace ?? ''}
                 />
               </Stack>
             </label>
             <label>
               <Stack alignCenter gap nowrap>
                 <span>{getTranslatedPerformanceTypeName('power')}</span>
-                <input
+                <NumberInput
                   disabled={!canEditPerformance}
                   min={0}
                   onChange={({ target: { value } }) =>
                     setMetric('power', Number.parseFloat(value || '0'))
                   }
                   placeholder={metrics?.power ? String(metrics.power) : ''}
                   style={{ width: 80 }}
-                  type="number"
                   value={performance.power ?? ''}
                 />
               </Stack>
@@ -311,7 +308,7 @@ export default function MapEditorSettingsPanel({
                       ? PerformanceStyleComparators[performance.style?.[0]]
                       : ' '}
                   </div>
-                  <input
+                  <NumberInput
                     disabled={!canEditPerformance}
                     min={0}
                     onChange={({ target: { value } }) =>
@@ -322,7 +319,6 @@ export default function MapEditorSettingsPanel({
                       ])
                     }
                     style={{ width: 80 }}
-                    type="number"
                     value={performance.style?.[1] ?? ''}
                   />
                 </Stack>
@@ -563,7 +559,7 @@ export default function MapEditorSettingsPanel({
               <span>
                 <fbt desc="Map size input field width">Width</fbt>
               </span>
-              <input
+              <NumberInput
                 max={MaxSize}
                 min={MinSize}
                 onChange={({ target: { value } }) => {
@@ -573,7 +569,6 @@ export default function MapEditorSettingsPanel({
                   }
                 }}
                 style={{ width: 70 }}
-                type="number"
                 value={width}
               />
             </Stack>
@@ -583,7 +578,7 @@ export default function MapEditorSettingsPanel({
               <span>
                 <fbt desc="Map size input field height">Height</fbt>
               </span>
-              <input
+              <NumberInput
                 max={MaxSize}
                 min={MinSize}
                 onChange={({ target: { value } }) => {
@@ -593,7 +588,6 @@ export default function MapEditorSettingsPanel({
                   }
                 }}
                 style={{ width: 70 }}
-                type="number"
                 value={height}
               />
             </Stack>

diff --git a/ui/form/NumberInput.tsx b/ui/form/NumberInput.tsx
@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from 'react';
+
+export default function NumberInput(
+  props: Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>,
+) {
+  return <input type="number" {...props} />;
+}