This repository has been archived by the owner on Apr 25, 2023. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: rot1024 <aayhrot@gmail.com> Co-authored-by: KaWaite <flippindaisy@gmail.com> Co-authored-by: HideBa <49897538+HideBa@users.noreply.github.com>
- Loading branch information
1 parent
4cddcca
commit ebfd416
Showing
23 changed files
with
662 additions
and
618 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
src/components/molecules/Settings/Project/PublicSection/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import React, { useCallback, useState } from "react"; | ||
import Section from "@reearth/components/molecules/Settings/Section"; | ||
import EditableItem from "@reearth/components/molecules/Settings/Project/EditableItem"; | ||
import AssetModal, { Asset as AssetType } from "@reearth/components/molecules/Common/AssetModal"; | ||
import { styled } from "@reearth/theme"; | ||
import { useIntl } from "react-intl"; | ||
|
||
export type Asset = AssetType; | ||
|
||
export type Props = { | ||
currentProject?: { | ||
id: string; | ||
publicTitle: string; | ||
publicDescription: string; | ||
publicImageUrl?: string; | ||
}; | ||
updatePublicTitle?: (title: string) => void; | ||
updatePublicDescription?: (description: string) => void; | ||
updatePublicImage?: (imageUrl: string | null) => void; | ||
assets?: Asset[]; | ||
createAssets?: (files: FileList) => Promise<void>; | ||
}; | ||
|
||
const PublicSection: React.FC<Props> = ({ | ||
currentProject, | ||
updatePublicTitle, | ||
updatePublicDescription, | ||
updatePublicImage, | ||
assets, | ||
createAssets, | ||
}) => { | ||
const intl = useIntl(); | ||
const [isAssetModalOpen, setAssetModalOpen] = useState(false); | ||
const openAssetModal = useCallback(() => setAssetModalOpen(true), []); | ||
const closeAssetModal = useCallback(() => setAssetModalOpen(false), []); | ||
|
||
return ( | ||
<Wrapper> | ||
<Section | ||
title={intl.formatMessage({ defaultMessage: "Public Info" })} | ||
subtitle={intl.formatMessage({ | ||
defaultMessage: | ||
"(These fields will be used for OGP as well as metadata for the public project)", | ||
})}> | ||
<EditableItem | ||
title={intl.formatMessage({ defaultMessage: "Title" })} | ||
body={currentProject?.publicTitle} | ||
onSubmit={updatePublicTitle} | ||
/> | ||
<EditableItem | ||
title={intl.formatMessage({ defaultMessage: "Description" })} | ||
body={currentProject?.publicDescription} | ||
multilineTextBox={true} | ||
onSubmit={updatePublicDescription} | ||
/> | ||
<EditableItem | ||
title={intl.formatMessage({ defaultMessage: "Thumbnail" })} | ||
onSubmit={updatePublicImage} | ||
imageSrc={currentProject?.publicImageUrl as string} | ||
isImage | ||
onEditStart={() => openAssetModal()} | ||
onEditCancel={() => closeAssetModal()} | ||
/> | ||
</Section> | ||
<AssetModal | ||
isOpen={isAssetModalOpen} | ||
onClose={closeAssetModal} | ||
assets={assets} | ||
fileType="image" | ||
onCreateAsset={createAssets} | ||
onSelect={updatePublicImage} | ||
value={currentProject?.publicImageUrl as string | undefined} | ||
/> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
const Wrapper = styled.div` | ||
background-color: ${props => props.theme.colors.bg[3]}; | ||
`; | ||
|
||
export default PublicSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,47 +1,53 @@ | ||
import React from "react"; | ||
import { styled, useTheme } from "@reearth/theme"; | ||
import Text from "@reearth/components/atoms/Text"; | ||
import Flex from "@reearth/components/atoms/Flex"; | ||
import Divider from "@reearth/components/atoms/Divider"; | ||
import { metricsSizes } from "@reearth/theme/metrics"; | ||
|
||
export type Props = { | ||
title?: string; | ||
subtitle?: string; | ||
actions?: React.ReactNode; | ||
}; | ||
|
||
const Section: React.FC<Props> = ({ title, actions, children }) => { | ||
const Section: React.FC<Props> = ({ title, subtitle, actions, children }) => { | ||
const theme = useTheme(); | ||
return ( | ||
<div> | ||
{title && ( | ||
<> | ||
<SectionHeader> | ||
<Text size="l" weight="normal" color={theme.main.strongText}> | ||
{title} | ||
</Text> | ||
<SectionHeader justify="space-between"> | ||
<Flex direction="column"> | ||
<Text size="l" weight="normal" color={theme.main.strongText}> | ||
{title} | ||
</Text> | ||
{subtitle && ( | ||
<Text | ||
size="s" | ||
weight="normal" | ||
color={theme.main.text} | ||
otherProperties={{ marginTop: metricsSizes["2xs"] + "px" }}> | ||
{subtitle} | ||
</Text> | ||
)} | ||
</Flex> | ||
{actions} | ||
</SectionHeader> | ||
<Divider /> | ||
<Divider margin="0" /> | ||
</> | ||
)} | ||
<SectionItem>{children}</SectionItem> | ||
<SectionItem direction="column">{children}</SectionItem> | ||
</div> | ||
); | ||
}; | ||
|
||
const SectionHeader = styled.div` | ||
const SectionHeader = styled(Flex)` | ||
padding: ${metricsSizes["l"]}px ${metricsSizes["2xl"]}px; | ||
display: flex; | ||
justify-content: space-between; | ||
`; | ||
|
||
const SectionItem = styled.div` | ||
const SectionItem = styled(Flex)` | ||
padding: ${metricsSizes["l"]}px ${metricsSizes["2xl"]}px; | ||
display: flex; | ||
flex-direction: column; | ||
`; | ||
|
||
const Divider = styled.div` | ||
border-bottom: ${props => `solid 1px ${props.theme.colors.outline.weak}`}; | ||
`; | ||
|
||
export default Section; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.