refactor(web): sketch layer and the custom properties

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/SketchCustomProperties/CustomPropertyFieldItem.tsx

@@ -0,0 +1,109 @@
+import {
+  Icon,
+  IconButton,
+  IconName,
+  PopupMenu,
+  PopupMenuItem
+} from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+import { FC, ReactNode, MouseEvent, useCallback } from "react";
+
+type CustomPropertyFieldItemProps = {
+  title: string;
+  icon?: IconName;
+  actions?: ReactNode[];
+  openCustomPropertySchema: () => void;
+  onDeleteField: (val: string) => void;
+};
+
+const CustomPropertyFieldItem: FC<CustomPropertyFieldItemProps> = ({
+  icon,
+  title,
+  openCustomPropertySchema,
+  onDeleteField
+}) => {
+  const handleOptionsClick = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+  const t = useT();
+
+  const optionsMenu: PopupMenuItem[] = [
+    {
+      id: "edit",
+      title: t("Edit Field"),
+      icon: "pencilSimple" as const,
+      onClick: openCustomPropertySchema
+    },
+    {
+      id: "delete",
+      title: t("Delete Field"),
+      icon: "trash" as const,
+      onClick: () => onDeleteField(title)
+    }
+  ];
+  return (
+    <Wrapper>
+      {icon && (
+        <IconWrapper>
+          <Icon icon={icon} />
+        </IconWrapper>
+      )}
+      <Title>{title}</Title>
+      <Actions>
+        {!!optionsMenu && (
+          <OptionsWrapper onClick={handleOptionsClick}>
+            <PopupMenu
+              label={
+                <IconButton
+                  icon="dotsThreeVertical"
+                  size="small"
+                  appearance="simple"
+                />
+              }
+              placement="bottom-start"
+              menu={optionsMenu}
+              width={110}
+            />
+          </OptionsWrapper>
+        )}
+      </Actions>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderRadius: theme.radius.smallest,
+  background: theme.relative.light,
+  padding: `${theme.spacing.micro}px ${theme.spacing.smallest}px`,
+  minHeight: "26px"
+}));
+
+const Title = styled("div")(({ theme }) => ({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular
+}));
+
+const Actions = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.smallest
+}));
+
+const OptionsWrapper = styled("div")(() => ({
+  flexShrink: 0
+}));
+
+const IconWrapper = styled("div")(({ theme }) => ({
+  flexShrink: 0,
+  fontSize: 0,
+  color: theme.content.main
+}));
+export default CustomPropertyFieldItem;

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/DataSource/SketchCustomProperties/CustomPropertyFieldModal.tsx

@@ -0,0 +1,259 @@
+import {
+  InputGroup,
+  InputsWrapper
+} from "@reearth/beta/features/Editor/Map/shared/SharedComponent";
+import {
+  Button,
+  Modal,
+  ModalPanel,
+  Selector,
+  TextInput
+} from "@reearth/beta/lib/reearth-ui";
+import ConfirmModal from "@reearth/beta/ui/components/ConfirmModal";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+import {
+  Dispatch,
+  FC,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+
+import { dataTypes } from "../../../../SketchLayerCreator";
+import { CustomPropertyProp } from "../../../../SketchLayerCreator/type";
+
+type CustomPropertyFieldProps = {
+  isEditField?: boolean;
+  selectedField?: {
+    key: string;
+    value: string;
+  } | null;
+  schemaJSON: Record<string, string>;
+  showEditFieldConfirmModal?: boolean;
+  customPropertySchemaShown?: boolean;
+  onSubmit?: (schema: CustomPropertyProp, newTitle?: string) => void;
+  onClose?: () => void;
+  onCustomPropertySchemaState?: () => void;
+  onSchemaJSONUpdate?: Dispatch<SetStateAction<Record<string, string>>>;
+};
+
+const dataTypeGroups = {
+  string: ["Text", "TextArea", "URL", "Asset"],
+  number: ["Float", "Int"],
+  boolean: ["Boolean"]
+};
+
+const CustomPropertyFieldModal: FC<CustomPropertyFieldProps> = ({
+  selectedField,
+  isEditField,
+  schemaJSON,
+  customPropertySchemaShown,
+  onClose,
+  onSubmit,
+  onSchemaJSONUpdate,
+  onCustomPropertySchemaState
+}) => {
+  const t = useT();
+  const [customPropertyTitle, setCustomPropertyTitle] = useState(
+    selectedField?.key
+  );
+
+  const [dataType, setDataType] = useState(selectedField?.value || "");
+
+  const [showEditFieldConfirmModal, setShowEditFieldConfirmModal] =
+    useState(false);
+
+  const openEditFieldConfirmModal = useCallback(() => {
+    setShowEditFieldConfirmModal(true);
+    onCustomPropertySchemaState?.()
+  }, [onCustomPropertySchemaState]);
+
+  const closeEditFieldConfirmModal = useCallback(() => {
+    setShowEditFieldConfirmModal(false);
+  }, []);
+
+  useEffect(() => {
+    if (selectedField) {
+      setCustomPropertyTitle(selectedField.key);
+      setDataType(selectedField.value);
+    } else {
+      setCustomPropertyTitle("");
+      setDataType("");
+    }
+  }, [selectedField]);
+
+  const groupedDataTypes = useMemo(() => {
+    if (!isEditField || !selectedField?.value) return dataTypes;
+
+    const groupKey = Object.keys(dataTypeGroups).find((key) =>
+      dataTypeGroups[key as keyof typeof dataTypeGroups].includes(
+        selectedField.value
+      )
+    );
+
+    return groupKey
+      ? dataTypeGroups[groupKey as keyof typeof dataTypeGroups]
+      : dataTypes;
+  }, [isEditField, selectedField?.value]);
+
+  const disabled = useMemo(() => {
+    const checkExistValue = dataType !== selectedField?.value;
+
+    return (
+      !customPropertyTitle ||
+      !dataType ||
+      (!isEditField &&
+        Object.prototype.hasOwnProperty.call(
+          schemaJSON,
+          customPropertyTitle
+        )) ||
+      (!checkExistValue &&
+        Object.prototype.hasOwnProperty.call(schemaJSON, customPropertyTitle))
+    );
+  }, [
+    customPropertyTitle,
+    dataType,
+    schemaJSON,
+    selectedField?.value,
+    isEditField
+  ]);
+
+  const handleSubmit = useCallback(() => {
+    if (!customPropertyTitle) return;
+
+    onSchemaJSONUpdate?.((prevSchema = {}) => {
+      let updatedSchema = { ...prevSchema };
+
+      if (selectedField) {
+        const { [selectedField.key]: _, ...restSchema } = prevSchema;
+        updatedSchema = restSchema;
+        const isDataTypeChanged =
+          selectedField.key !== customPropertyTitle &&
+          selectedField.value === dataType;
+
+        const existingValue = prevSchema[selectedField.key];
+        const match = existingValue?.match(/_(\w+)$/);
+        const suffix = match
+          ? match[0]
+          : `${dataType}_${Object.keys(updatedSchema).length + 1}`;
+;
+
+        updatedSchema[customPropertyTitle] = isDataTypeChanged
+          ? existingValue
+          : `${dataType}${suffix}`;
+
+        if (isDataTypeChanged) {
+          onSubmit?.(updatedSchema, customPropertyTitle);
+        } else {
+          onSubmit?.(updatedSchema);
+        }
+        closeEditFieldConfirmModal();
+      } else {
+        updatedSchema[customPropertyTitle] =
+          `${dataType}_${Object.keys(updatedSchema).length + 1}`;
+        onSubmit?.(updatedSchema);
+      }
+      onClose?.();
+      return updatedSchema;
+    });
+  }, [
+    customPropertyTitle,
+    onSchemaJSONUpdate,
+    onClose,
+    selectedField,
+    dataType,
+    onSubmit,
+    closeEditFieldConfirmModal
+  ]);
+
+  return (
+    <>
+      {customPropertySchemaShown && (
+        <Modal size="small" visible={customPropertySchemaShown}>
+          <ModalPanel
+            title={
+              isEditField ? t("Edit Custom Property") : t("New Custom Property")
+            }
+            onCancel={onClose}
+            actions={
+              <>
+                <Button onClick={onClose} size="normal" title={t("Cancel")} />
+                <Button
+                  onClick={
+                    isEditField ? openEditFieldConfirmModal : handleSubmit
+                  }
+                  size="normal"
+                  title={isEditField ? t("Submit") : t("Apply")}
+                  appearance="primary"
+                  disabled={disabled}
+                />
+              </>
+            }
+          >
+            <Wrapper>
+              <InputGroup label={t("Property Title")}>
+                <InputsWrapper>
+                  <TextInput
+                    value={customPropertyTitle}
+                    onBlur={setCustomPropertyTitle}
+                  />
+                </InputsWrapper>
+              </InputGroup>
+
+              <InputGroup label={t("Property Type")}>
+                <Selector
+                  value={dataType}
+                  placeholder={t("Please select one type")}
+                  options={groupedDataTypes.map((v) => ({
+                    value: v,
+                    label: v
+                  }))}
+                  onChange={(value: string | string[]) =>
+                    setDataType(value as string)
+                  }
+                />
+              </InputGroup>
+            </Wrapper>
+          </ModalPanel>
+        </Modal>
+      )}
+      {showEditFieldConfirmModal && (
+        <ConfirmModal
+          visible={true}
+          title={t("Apply Current Edits?")}
+          description={t(
+            "This save will apply to all features in the current layer. Do you want to proceed?"
+          )}
+          actions={
+            <>
+              <Button
+                size="normal"
+                title={t("Cancel")}
+                onClick={closeEditFieldConfirmModal}
+              />
+              <Button
+                size="normal"
+                title={t("Apply")}
+                appearance="primary"
+                onClick={handleSubmit}
+              />
+            </>
+          }
+        />
+      )}
+    </>
+  );
+};
+
+const Wrapper = styled("div")(({ theme }) => ({
+  padding: theme.spacing.normal,
+  background: theme.bg[1],
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.normal
+}));
+
+export default CustomPropertyFieldModal;