Merge branch 'main' into clock

reearth · Jun 6, 2022 · 75baec3 · 75baec3
2 parents b64548c + 28d377b
commit 75baec3
Show file tree

Hide file tree

Showing 55 changed files with 889 additions and 384 deletions.
diff --git a/i18next-parser.config.js b/i18next-parser.config.js
@@ -2,4 +2,6 @@ module.exports = {
   locales: ["en", "ja"],
   output: "src/i18n/translations/$LOCALE.yml",
   input: ["src/**/*.{ts,tsx}"],
+  keySeparator: false,
+  createOldCatalogs: false,
 };
diff --git a/package.json b/package.json
@@ -217,4 +217,4 @@
         "use-debounce": "^7.0.1",
         "use-file-input": "^1.0.0"
     }
-}
+}
diff --git a/src/components/atoms/TabSection/index.tsx b/src/components/atoms/TabSection/index.tsx
@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from "react";
+
+import Text from "@reearth/components/atoms/Text";
+import { styled, useTheme } from "@reearth/theme";
+
+import Divider from "../Divider";
+
+export type MenuAlignment = "left" | "top";
+
+export interface Props<T extends string> {
+  className?: string;
+  children?: { [m in T]?: React.ReactNode };
+  headerAction?: React.ReactNode;
+  menuAlignment?: MenuAlignment;
+  scrollable?: boolean;
+  expandedMenuIcon?: boolean;
+  selected?: T;
+  initialSelected?: T;
+  onChange?: (m: T) => void;
+  headers?: { [m in T]?: string };
+}
+const TabSection = <T extends string>({
+  className,
+  children,
+  headerAction,
+  menuAlignment,
+  scrollable,
+  selected,
+  onChange,
+  initialSelected,
+  headers,
+}: Props<T>) => {
+  const tabs: T[] = (Object.keys(children || {}) as T[]).filter(k => !!children?.[k]);
+  const [selectedTab, select] = useState<T | undefined>(initialSelected ?? tabs?.[0]);
+  useEffect(() => {
+    select(selected);
+  }, [selected]);
+
+  const theme = useTheme();
+
+  return (
+    <Wrapper className={className} menuAlignment={menuAlignment}>
+      <TabHeader>
+        {tabs?.map((m: T) => (
+          <TabTitle
+            key={m}
+            selected={selectedTab === m}
+            onClick={() => {
+              select(m);
+              onChange?.(m);
+            }}>
+            <Text size="m" color={selectedTab === m ? theme.main.select : theme.main.text}>
+              {headers?.[m] ?? m}
+            </Text>
+          </TabTitle>
+        ))}
+        {<ActionWrapper expanded={true}>{headerAction}</ActionWrapper>}
+      </TabHeader>
+      <Divider margin="0" />
+      <TabContent scrollable={scrollable}>
+        {selectedTab ? children?.[selectedTab] ?? null : null}
+      </TabContent>
+    </Wrapper>
+  );
+};
+const Wrapper = styled.div<{ menuAlignment?: MenuAlignment }>`
+  display: flex;
+  flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "column" : "row")} nowrap;
+  justify-content: stretch;
+  position: relative;
+`;
+const TabHeader = styled.div<{ menuAlignment?: MenuAlignment }>`
+  display: flex;
+  flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "column" : "row")} nowrap;
+  align-items: space-between;
+  gap: 24px;
+  padding: 0px;
+  width: 100%;
+  height: 100%;
+`;
+
+const TabTitle = styled.div<{ selected?: boolean }>`
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 2px solid ${({ selected, theme }) => (selected ? theme.main.select : "none")};
+  opacity: ${({ selected }) => (selected ? "1" : "0.7")};
+`;
+
+const ActionWrapper = styled.div<{ expanded?: boolean }>`
+  flex: ${props => (props.expanded ? "1" : null)};
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  margin-block-start: -13px;
+`;
+const TabContent = styled.div<{ scrollable?: boolean }>`
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: stretch;
+  overflow-x: hidden;
+  overflow-y: ${({ scrollable }) => (scrollable ? "auto" : "hidden")};
+  -webkit-overflow-scrolling: touch;
+`;
+
+export default TabSection;
diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts b/src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts
@@ -19,15 +19,6 @@ export type Asset = {
   contentType: string;
 };
 
-function handleScroll(
-  { currentTarget }: React.UIEvent<HTMLDivElement, UIEvent>,
-  onLoadMore?: () => void,
-) {
-  if (currentTarget.scrollTop + currentTarget.clientHeight >= currentTarget.scrollHeight) {
-    onLoadMore?.();
-  }
-}
-
 export default ({
   isMultipleSelectable,
   selectedAssets,
@@ -112,7 +103,6 @@ export default ({
     iconChoice,
     deleteModalVisible,
     sortOptions,
-    handleScroll,
     setLayoutType,
     handleUploadToAsset,
     handleReverse,

diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useIntl } from "react-intl";
 
 import Button from "@reearth/components/atoms/Button";
 import Divider from "@reearth/components/atoms/Divider";
@@ -9,8 +8,10 @@ import Loading from "@reearth/components/atoms/Loading";
 import SearchBar from "@reearth/components/atoms/SearchBar";
 import Text from "@reearth/components/atoms/Text";
 import AssetDeleteModal from "@reearth/components/molecules/Common/AssetModal/AssetDeleteModal";
+import { useT } from "@reearth/i18n";
 import { styled } from "@reearth/theme";
 import { metricsSizes } from "@reearth/theme/metrics";
+import { handleScroll } from "@reearth/util/handleScroll";
 
 import AssetCard from "../AssetCard";
 import AssetListItem from "../AssetListItem";
@@ -73,13 +74,12 @@ const AssetContainer: React.FC<Props> = ({
   onSortChange,
   onSearch,
 }) => {
-  const intl = useIntl();
+  const t = useT();
   const {
     layoutType,
     iconChoice,
     deleteModalVisible,
     sortOptions,
-    handleScroll,
     setLayoutType,
     handleUploadToAsset,
     handleReverse,
@@ -103,7 +103,7 @@ const AssetContainer: React.FC<Props> = ({
       <Flex justify={onRemove ? "flex-end" : "center"}>
         <Button
           large
-          text={intl.formatMessage({ defaultMessage: "Upload file" })}
+          text={t("Upload file")}
           icon="upload"
           type="button"
           buttonType={onRemove ? "secondary" : "primary"}
@@ -112,7 +112,7 @@ const AssetContainer: React.FC<Props> = ({
         {onRemove && (
           <Button
             large
-            text={intl.formatMessage({ defaultMessage: "Delete" })}
+            text={t("Delete")}
             icon="bin"
             type="button"
             buttonType="secondary"
@@ -159,13 +159,10 @@ const AssetContainer: React.FC<Props> = ({
           <Template align="center" justify="center">
             <TemplateText size="m" otherProperties={{ textAlign: "center" }}>
               {searchTerm
-                ? intl.formatMessage({
-                    defaultMessage: "No assets match your search.",
-                  })
-                : intl.formatMessage({
-                    defaultMessage:
-                      "You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.",
-                  })}
+                ? t("No assets match your search.")
+                : t(
+                    "You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.",
+                  )}
             </TemplateText>
           </Template>
         ) : (

diff --git a/src/components/molecules/Common/Header/index.tsx b/src/components/molecules/Common/Header/index.tsx
@@ -27,7 +27,7 @@ export interface Props {
   onChangeTeam?: (teamId: string) => void;
   modalShown?: boolean;
   openModal?: () => void;
-  handleModalClose?: (r?: boolean | undefined) => void;
+  onModalClose?: (r?: boolean) => void;
   dashboard?: boolean;
 }
 
@@ -45,7 +45,7 @@ const Header: React.FC<Props> = ({
   onChangeTeam,
   modalShown,
   openModal,
-  handleModalClose,
+  onModalClose,
   dashboard,
 }) => {
   return (
@@ -69,7 +69,7 @@ const Header: React.FC<Props> = ({
               />
               <WorkspaceCreationModal
                 open={modalShown}
-                onClose={handleModalClose}
+                onClose={onModalClose}
                 onSubmit={onCreateTeam}
               />
             </>

diff --git a/src/components/molecules/Dashboard/index.tsx b/src/components/molecules/Dashboard/index.tsx
@@ -1,19 +1,38 @@
 import React from "react";
 
+import Loading from "@reearth/components/atoms/Loading";
 import { styled } from "@reearth/theme";
+import { handleScroll } from "@reearth/util/handleScroll";
 
 export * from "./types";
 
 export type Props = {
   className?: string;
   header?: React.ReactNode;
+  isLoading?: boolean;
+  hasMoreProjects?: boolean;
+  onGetMoreProjects?: () => void;
 };
 
-const Dashboard: React.FC<Props> = ({ className, header, children }) => {
+const Dashboard: React.FC<Props> = ({
+  className,
+  header,
+  children,
+  isLoading,
+  hasMoreProjects,
+  onGetMoreProjects,
+}) => {
   return (
-    <Wrapper className={className}>
+    <Wrapper
+      className={className}
+      onScroll={e => {
+        !isLoading && hasMoreProjects && handleScroll(e, onGetMoreProjects);
+      }}>
       {header}
-      <Content>{children}</Content>
+      <Content>
+        {children}
+        {isLoading && hasMoreProjects && <StyledLoading relative />}
+      </Content>
     </Wrapper>
   );
 };
@@ -29,5 +48,8 @@ const Content = styled.div`
   display: flex;
   flex-wrap: wrap;
 `;
+const StyledLoading = styled(Loading)`
+  margin: 52px auto;
+`;
 
 export default Dashboard;
diff --git a/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/index.tsx b/src/components/molecules/EarthEditor/DatasetPane/DatasetModal/index.tsx
@@ -19,6 +19,8 @@ interface Props {
   className?: string;
   isVisible: boolean;
   syncLoading: boolean;
+  currentLang?: string;
+  currentTheme?: string;
   onClose?: () => void;
   handleDatasetAdd?: (url: string | File, schemeId: string | null) => Promise<void>;
   handleGoogleSheetDatasetAdd?: (
@@ -33,6 +35,8 @@ interface Props {
 const DatasetModal: React.FC<Props> = ({
   isVisible,
   syncLoading,
+  currentLang,
+  currentTheme,
   onClose,
   handleDatasetAdd,
   handleGoogleSheetDatasetAdd,
@@ -163,6 +167,8 @@ const DatasetModal: React.FC<Props> = ({
               onReturn={handleReturn}
               onUrlChange={setUrl}
               onNotificationChange={onNotificationChange}
+              theme={currentTheme}
+              lang={currentLang}
             />
           ))}
           {!dataType && (

diff --git a/src/components/molecules/EarthEditor/DatasetPane/index.tsx b/src/components/molecules/EarthEditor/DatasetPane/index.tsx
@@ -17,6 +17,8 @@ export type Props = {
   datasetSchemas?: DatasetSchema[];
   loading?: boolean;
   selectedDatasetSchemaId?: string;
+  currentTheme?: string;
+  currentLang?: string;
   onDatasetSync?: (url: string) => void | Promise<void>;
   onDatasetImport?: (file: File, datasetSchemaId: string | null) => void | Promise<void>;
   onGoogleSheetDatasetImport?: (
@@ -35,6 +37,8 @@ const DatasetPane: React.FC<Props> = ({
   datasetSchemas,
   loading,
   selectedDatasetSchemaId,
+  currentTheme,
+  currentLang,
   onDatasetSync,
   onDatasetImport,
   onGoogleSheetDatasetImport,
@@ -99,6 +103,8 @@ const DatasetPane: React.FC<Props> = ({
         handleGoogleSheetDatasetAdd={handleGoogleSheetDatasetAdd}
         handleDatasetAdd={handleDatasetAdd}
         onNotificationChange={onNotificationChange}
+        currentTheme={currentTheme}
+        currentLang={currentLang}
       />
     </Wrapper>
   );

diff --git a/src/components/molecules/EarthEditor/FovSlider/index.tsx b/src/components/molecules/EarthEditor/FovSlider/index.tsx
@@ -10,13 +10,13 @@ import { Camera } from "@reearth/util/value";
 import useHooks from "./hooks";
 
 type Props = {
-  isCapturing?: boolean;
+  visible?: boolean;
   onIsCapturingChange?: (isCapturing: boolean) => void;
   camera?: Camera;
   onFovChange?: (fov: number) => void;
 };
 
-const FovSlider: React.FC<Props> = ({ isCapturing, onIsCapturingChange, camera, onFovChange }) => {
+const FovSlider: React.FC<Props> = ({ visible, onIsCapturingChange, camera, onFovChange }) => {
   const intl = useIntl();
 
   const { updateFov, handleClickAway } = useHooks({
@@ -28,7 +28,7 @@ const FovSlider: React.FC<Props> = ({ isCapturing, onIsCapturingChange, camera,
   const fov = camera?.fov && Math.round(camera?.fov * 1000) / 1000;
   const theme = useTheme();
   return (
-    <StyledFloatedPanel visible={isCapturing} onClickAway={handleClickAway}>
+    <StyledFloatedPanel visible={visible} onClickAway={handleClickAway}>
       <Wrapper data-camera-popup>
         <FovField>
           <Text size="xs" color={theme.main.strongText} otherProperties={{ marginRight: "16px" }}>