chore(web): add location field (#660)

Co-authored-by: nina992 <nouralali992@gmail.com> Co-authored-by: Jashanpreet Singh (json singh) <20891087+jashanbhullar@users.noreply.github.com> Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
reearth · Sep 11, 2023 · 65beead · 65beead
1 parent d216255
commit 65beead
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 0 deletions.
diff --git a/web/src/beta/components/fields/LocationField/index.stories.tsx b/web/src/beta/components/fields/LocationField/index.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import LocationField from ".";
+
+const meta: Meta<typeof LocationField> = {
+  component: LocationField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LocationField>;
+
+export const Sample: Story = {
+  args: {
+    name: "Location Field",
+    description: "Location field description",
+    value: { lat: 87.43, lng: 107.53 },
+    onChange: () => console.log("clicked"),
+  },
+};
diff --git a/web/src/beta/components/fields/LocationField/index.tsx b/web/src/beta/components/fields/LocationField/index.tsx
@@ -0,0 +1,56 @@
+import { useCallback, useState } from "react";
+
+import { LatLng } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
+
+import Property from "..";
+import NumberInput from "../common/NumberInput";
+
+type Props = {
+  name?: string;
+  description?: string;
+  value?: LatLng;
+  onChange?: (location: LatLng) => void;
+};
+
+const LocationField: React.FC<Props> = ({ name, description, value, onChange }) => {
+  const [location, setLocation] = useState<LatLng>(value || { lat: 0, lng: 0 });
+
+  const handleChange = useCallback(
+    (coordination: string, newValue: number | undefined) => {
+      if (newValue === undefined) return;
+
+      setLocation(prevLocation => ({
+        ...prevLocation,
+        [coordination === "Latitude" ? "lat" : "lng"]: newValue,
+      }));
+      onChange?.(location);
+    },
+    [location, onChange],
+  );
+
+  return (
+    <Property name={name} description={description}>
+      <Wrapper>
+        <NumberInput
+          value={location.lat}
+          inputDescription="Latitude"
+          onChange={newValue => handleChange("Latitude", newValue)}
+        />
+        <NumberInput
+          value={location.lng}
+          inputDescription="Longtitude"
+          onChange={newValue => handleChange("Longtitude", newValue)}
+        />
+      </Wrapper>
+    </Property>
+  );
+};
+
+export default LocationField;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+`;
diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -1,10 +1,12 @@
 import ColorField from "@reearth/beta/components/fields/ColorField";
+import LocationField from "@reearth/beta/components/fields/LocationField";
 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 LatLng } from "@reearth/beta/utils/value";
 import { type Item } from "@reearth/services/api/propertyApi/utils";
 
 import useHooks from "./hooks";
@@ -93,6 +95,14 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
               onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
             />
           )
+        ) : sf.type === "latlng" ? (
+          <LocationField
+            key={sf.id}
+            name={sf.name}
+            value={value as LatLng}
+            description={sf.description}
+            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+          />
         ) : (
           <p key={sf.id}>{sf.name} field</p>
         );