s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor TagsChoosePopUp component

Browse Source
This commit is contained in:
Mateusz Tylka 2023-05-12 12:58:43 +02:00
parent ea33a44326
commit ce92499528
4 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Submit/components/TagsChoose/TagsChoose.js
View File

@ -3,7 +3,7 @@ import { FlexRow, Grid } from '../../../../utils/containers';
import { Medium } from '../../../../utils/fonts'; import { Medium } from '../../../../utils/fonts';
import ImageButton from '../../../../components/generic/ImageButton'; import ImageButton from '../../../../components/generic/ImageButton';
import pencilIco from '../../../../assets/pencil_ico.svg'; import pencilIco from '../../../../assets/pencil_ico.svg';
import TagsChoosePopUp from '../TagsChoosePopUp'; import TagsChoosePopUp from '../TagsChoosePopup/TagsChoosePopUp';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import TagsChooseStyle from './TagsChooseStyle'; import TagsChooseStyle from './TagsChooseStyle';

28
src/pages/Submit/components/TagsChoosePopUp.js → src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js
View File

@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import PopUp from '../../../components/generic/PopUp'; import PopUp from '../../../../components/generic/PopUp';
import { FlexColumn, FlexRow } from '../../../utils/containers'; import { FlexColumn, FlexRow } from '../../../../utils/containers';
import Search from '../../../components/generic/Search'; import Search from '../../../../components/generic/Search';
import theme from '../../../utils/theme'; import theme from '../../../../utils/theme';
import Button from '../../../components/generic/Button'; import Button from '../../../../components/generic/Button';
import TagsChoosePopUpStyle from './TagsChoosePopUpStyle';
const TagsChoosePopUp = (props) => { const TagsChoosePopUp = (props) => {
return ( return (
@ -13,26 +14,17 @@ const TagsChoosePopUp = (props) => {
padding="36px 32px 0" padding="36px 32px 0"
closeHandler={() => props.setTagsPopUp(false)} closeHandler={() => props.setTagsPopUp(false)}
> >
<FlexColumn width="100%" alignmentY="flex-start" height="100%" gap="24px"> <TagsChoosePopUpStyle>
<Search /> <Search />
<FlexColumn <FlexColumn as="list" className="TagsChoosePopUpStyle__tags-list">
as="list"
alignmentY="flex-start"
height="80%"
width="100%"
overflowY="scroll"
>
{props.tags.map((tag, index) => { {props.tags.map((tag, index) => {
return ( return (
<FlexRow <FlexRow
key={`tag-${index}`} key={`tag-${index}`}
height="48px" className="TagsChoosePopUpStyle__tag-item"
width="100%"
alignmentX="flex-start"
backgroundColor={ backgroundColor={
index % 2 === 0 ? theme.colors.dark01 : theme.colors.white index % 2 === 0 ? theme.colors.dark01 : theme.colors.white
} }
padding="12px"
> >
{tag.name} {tag.name}
</FlexRow> </FlexRow>
@ -59,7 +51,7 @@ const TagsChoosePopUp = (props) => {
Cancel Cancel
</Button> </Button>
</FlexRow> </FlexRow>
</FlexColumn> </TagsChoosePopUpStyle>
</PopUp> </PopUp>
); );
}; };

25
src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js Normal file
View File

@ -0,0 +1,25 @@
import styled from 'styled-components';
import { FlexColumn } from '../../../../utils/containers';
const TagsChoosePopUpStyle = styled(FlexColumn)`
width: 100%;
justify-content: flex-start;
height: 100%;
gap: 24px;
.TagsChoosePopUpStyle__tags-list {
height: 80%;
width: 100%;
overflow-y: scroll;
justify-content: flex-start;
}
.TagsChoosePopUpStyle__tag-item {
height: 48px;
width: 100%;
justify-content: flex-start;
padding: 12px;
}
`;
export default TagsChoosePopUpStyle;

1
src/pages/Submit/components/TagsChoosePopup/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './TagsChoosePopUp';