init dropdown with popup in Submit

This commit is contained in:
Mateusz Tylka 2023-05-05 14:13:46 +02:00
parent abeba4bf34
commit a8841982ef
6 changed files with 99 additions and 3 deletions

View File

@ -0,0 +1,3 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6705 6.075L26.6705 14.075L9.29547 31.45L2.16422 32.2375C1.20797 32.3437 0.40172 31.5375 0.50797 30.5812L1.30172 23.4438L18.6705 6.075ZM31.6205 4.8875C32.7955 6.0625 32.7955 7.9625 31.6205 9.13125L28.083 12.6625L20.083 4.6625L23.6142 1.13125C24.7892 -0.04375 26.6892 -0.04375 27.858 1.13125L31.6205 4.8875Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 438 B

View File

@ -11,11 +11,10 @@ const CircleNumberStyle = styled(Container)`
justify-content: center;
align-items: center;
font-family: 'Kanit', sans-serif;
font-size: 14px;
font-size: ${({ fontSize }) => (fontSize ? fontSize : '14px')};
font-weight: 500;
width: ${({ width }) => (width ? width : '24px')};
height: ${({ height }) => (height ? height : '24px')};
margin: ${({ margin }) => (margin ? margin : '0')};
@media (min-width: ${({ theme }) => theme.overMobile}) {
width: ${({ width }) => (width ? width : '36px')};
@ -32,6 +31,12 @@ const CircleNumber = (props) => {
fontSize={props.fontSize}
borderRadius={props.borderRadius}
margin={props.margin}
padding={props.padding}
position={props.position}
top={props.top}
left={props.left}
right={props.right}
bottom={props.bottom}
>
{props.number}
</CircleNumberStyle>

View File

@ -0,0 +1,36 @@
import React from 'react';
import { FlexColumn, FlexRow, Grid } from '../../utils/containers';
import { Medium } from '../../utils/fonts';
import theme from '../../utils/theme';
import ImageButton from './ImageButton';
import pencilIco from '../../assets/pencil_ico.svg';
const DropdownWithPopup = (props) => {
return (
<FlexColumn gap="8px" width="100%" alignmentX="flex-start">
<Medium as="label" htmlFor={props.label}>
{props.label}
</Medium>
<Grid
borderRadius="4px"
width="100%"
height="100px"
border={`1px solid ${theme.colors.dark}`}
shadow={theme.shadow}
onChange={(e) => props.handler(e.target.value)}
padding="12px"
gridTemplateColumns="1fr auto"
>
<FlexRow height="100%" alignmentX="flex-start" alignmentY="flex-start">
dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
</FlexRow>
<ImageButton src={pencilIco} width="20px" height="20px" />
</Grid>
</FlexColumn>
);
};
export default DropdownWithPopup;

View File

@ -0,0 +1,45 @@
import { Svg, FlexRow } from '../../utils/containers';
import styled from 'styled-components';
const ImageButtonStyle = styled(FlexRow)`
cursor: pointer;
transition: transform ease-in-out 0.3s;
transform: rotate(${({ rotate }) => (rotate ? rotate : '0')});
&:hover {
transform: rotate(${({ rotate }) => (rotate ? rotate : '0')}), scale(1.2);
}
`;
const ImageButton = ({
handler,
src,
alt,
width,
height,
as,
href,
download,
rotate,
margin,
position,
top,
left,
}) => {
return (
<ImageButtonStyle
as={as ? as : 'button'}
href={href ? href : undefined}
download={download ? download : undefined}
onClick={handler}
rotate={rotate}
margin={margin}
position={position}
top={top}
left={left}
>
<Svg src={src} alt={alt} size="cover" width={width} height={height} />
</ImageButtonStyle>
);
};
export default ImageButton;

View File

@ -8,6 +8,7 @@ import theme from '../../utils/theme';
import challengeSubmission from '../../api/challengeSubmissionPost';
import Loading from '../generic/Loading';
import getTags from '../../api/getTags';
import DropdownWithPopup from '../generic/DropdownWithPopup';
const Submit = (props) => {
const [description, setDescription] = React.useState('');
@ -15,6 +16,8 @@ const Submit = (props) => {
const [repoBranch, setRepoBranch] = React.useState('');
const [loading, setLoading] = React.useState(false);
const [tags, setTags] = React.useState([]);
// eslint-disable-next-line no-unused-vars
const [submissionTags, setSubmissionTags] = React.useState([]);
React.useMemo(() => {
getTags(setTags);
@ -53,6 +56,10 @@ const Submit = (props) => {
/>
<SubmitInput label="Submission repo URL" handler={setRepoUrl} />
<SubmitInput label="Submission repo branch" handler={setRepoBranch} />
<DropdownWithPopup
label="Submission tags"
handler={setSubmissionTags}
/>
</FlexColumn>
<Button width="122px" height="44px" handler={challengeSubmissionSubmit}>
<Menu color={theme.colors.white}>Submit</Menu>

View File

@ -29,7 +29,7 @@ const Challenges = () => {
getChallenges(dispatch);
}, []);
React.useEffect(() => {
React.useMemo(() => {
statusFilterHandle(state.statusFilter, state.challenges, dispatch);
}, [state.statusFilter, state.challenges]);