chore(web): add number field (#669)

Co-authored-by: nina992 <[email protected]>
reearth · Sep 8, 2023 · d216255 · d216255
1 parent afaa24f
commit d216255
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 11 deletions.
diff --git a/web/src/beta/components/fields/NumberField/index.stories.tsx b/web/src/beta/components/fields/NumberField/index.stories.tsx
@@ -0,0 +1,84 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import NumberField, { Props } from ".";
+
+const meta: Meta<Props> = {
+  component: NumberField,
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberField>;
+
+export const Default: Story = {
+  args: {
+    name: "Number Field",
+    description: "The Number field",
+    value: 42,
+    inputDescription: "Value",
+    suffix: "px",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    name: "Number Field",
+    description: "The Number field",
+    value: 15,
+    inputDescription: "Disabled",
+    suffix: "px",
+    disabled: true,
+  },
+};
+
+export const Range: Story = {
+  args: {
+    name: "Number Field",
+    description: "The Number field",
+    value: 50,
+    inputDescription: "Range",
+    suffix: "px",
+    min: 4,
+    max: 100,
+  },
+};
+
+export const NoValue: Story = {
+  args: {
+    name: "Number Field",
+    description: "The Number field",
+    inputDescription: "No Value",
+    suffix: "px",
+  },
+};
+
+export const WithMinValue: Story = {
+  args: {
+    name: "Number Field",
+    description: "The Number field",
+    value: 5,
+    inputDescription: "With Min Value",
+    suffix: "px",
+    min: 0,
+  },
+};
+
+export const WithMaxValue: Story = {
+  args: {
+    name: "Number Field",
+    description: "The Number field",
+    value: 95,
+    inputDescription: "With Max Value",
+    suffix: "px",
+    max: 100,
+  },
+};
+
+export const Editable: Story = {
+  args: {
+    name: "Number Field",
+    description: "The Number field",
+    value: 25,
+    inputDescription: "Editable",
+    suffix: "px",
+  },
+};
diff --git a/web/src/beta/components/fields/NumberField/index.tsx b/web/src/beta/components/fields/NumberField/index.tsx
@@ -0,0 +1,42 @@
+import Property from "..";
+import NumberInput from "../common/NumberInput";
+
+export type Props = {
+  name?: string;
+  description?: string;
+  suffix?: string;
+  min?: number;
+  max?: number;
+  disabled?: boolean;
+  inputDescription?: string;
+  value?: number;
+  onChange?: (value?: number | undefined) => void;
+};
+
+const NumberField: React.FC<Props> = ({
+  name,
+  description,
+  value,
+  min,
+  max,
+  suffix,
+  inputDescription,
+  disabled,
+  onChange,
+}) => {
+  return (
+    <Property name={name} description={description}>
+      <NumberInput
+        value={value}
+        onChange={onChange}
+        min={min}
+        max={max}
+        suffix={suffix}
+        disabled={disabled}
+        inputDescription={inputDescription}
+      />
+    </Property>
+  );
+};
+
+export default NumberField;
diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -1,12 +1,12 @@
+import ColorField from "@reearth/beta/components/fields/ColorField";
+import NumberField from "@reearth/beta/components/fields/NumberField";
+import SelectField from "@reearth/beta/components/fields/SelectField";
+import SliderField from "@reearth/beta/components/fields/SliderField";
+import SpacingInput, { SpacingValues } from "@reearth/beta/components/fields/SpacingInput";
 import TextInput from "@reearth/beta/components/fields/TextInput";
+import ToggleField from "@reearth/beta/components/fields/ToggleField";
 import { type Item } from "@reearth/services/api/propertyApi/utils";
 
-import ColorField from "../ColorField";
-import SelectField from "../SelectField";
-import SliderField from "../SliderField";
-import SpacingInput, { SpacingValues } from "../SpacingInput";
-import ToggleField from "../ToggleField";
-
 import useHooks from "./hooks";
 
 type Props = {
@@ -82,7 +82,16 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
               onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
             />
           ) : (
-            <p key={sf.id}>{sf.name} number field</p>
+            <NumberField
+              key={sf.id}
+              name={sf.name}
+              value={value as number}
+              suffix={sf.suffix}
+              min={sf.min as number}
+              max={sf.max as number}
+              description={sf.description}
+              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+            />
           )
         ) : (
           <p key={sf.id}>{sf.name} field</p>

diff --git a/web/src/beta/components/fields/common/NumberInput/index.tsx b/web/src/beta/components/fields/common/NumberInput/index.tsx
@@ -119,9 +119,12 @@ const NumberInput: React.FC<Props> = ({
           step={"any"}
         />
         {suffix && (
-          <Text size="footnote" color={theme.content.weak} otherProperties={{ userSelect: "none" }}>
+          <TextWrapper
+            size="footnote"
+            color={theme.content.weak}
+            otherProperties={{ userSelect: "none" }}>
             {suffix}
-          </Text>
+          </TextWrapper>
         )}
       </InputWrapper>
       {inputDescription && (
@@ -149,7 +152,6 @@ const InputWrapper = styled.div<{ inactive: boolean }>`
   gap: 12px;
   width: auto;
   min-width: min-content;
-  max-width: 64px;
   color: ${({ inactive, theme }) => (inactive ? theme.content.weak : theme.content.main)};
   &:focus-within {
     border-color: ${({ theme }) => theme.select.main};
@@ -163,7 +165,8 @@ const StyledInput = styled.input`
   background: ${({ theme }) => theme.bg[1]};
   outline: none;
   color: inherit;
-  width: 100%;
+  min-width: 0;
+  flex-grow: 1;
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -173,4 +176,8 @@ const StyledInput = styled.input`
   }
 `;
 
+const TextWrapper = styled(Text)`
+  flex-shrink: 0;
+`;
+
 export default NumberInput;