Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Animação no layout horizontal #173

Merged
merged 2 commits into from
Jan 4, 2023
Merged

Animação no layout horizontal #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b3aecc
fix conflicts
Jan 2, 2023
df91ec2
fix element erro
Jan 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 58 additions & 66 deletions src/components/HorizontalRoadmap/HorizontalLevelItem/HorizontalLevelItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,73 @@
import { CheckIcon } from "@chakra-ui/icons";
import { motion } from "framer-motion";
import { FaRegCircle } from "react-icons/fa";
import { Level, RoadmapItem } from "../../../entity/RoadmapModel";
import {
useLevelRoadmapActions,
useSelectedItem,
} from "../LevelProvider/LevelProvider";

type Props = {
type HorizontalLevelItemsProps = {
roadmapLevel?: Level;
index: number;
levelsQty: number;
handleSelectItem: (item: RoadmapItem) => void;
isAllContentRead: (label: string, contentLength: number) => boolean;
checkAllContent: (label: string, check: boolean) => void;
selectedItem?: RoadmapItem;
};

export default function HorizontalLevelItem(props: Props) {
export default function HorizontalLevelItems(props: HorizontalLevelItemsProps) {
return (
<>
<div className="text-yellow txt-title text-xl text-center">
<motion.div key={props.index} initial={{ x: 100 }} animate={{ x: 0 }}>
<p className="text-yellow txt-title text-xl text-center">
{props.roadmapLevel?.label}
</div>
<div className="text-yellow txt-title mt-2 text-center">
</p>
<p className="text-yellow txt-title mt-2 text-center">
{props.roadmapLevel?.description}
</div>
</p>
<div className="flex xl:flex-col flex-wrap gap-2">
{props.roadmapLevel?.items.map((item, index) => {
return (
<>
<div
onClick={() => {
props.handleSelectItem(item);
}}
className={`border-2 flex w-fit xl:w-full bg-light-brown border-red p-2 xl:p-4 pl-1 cursor-pointer hover:bg-white rounded-md ${
props.selectedItem?.label === item.label ? "bg-white" : ""
}`}
>
{props.isAllContentRead(
item.label,
item.children?.length || -1
) ? (
<span className="checking">
<CheckIcon
m="auto"
mx="1"
color={"#228B22"}
onClick={(e) => {
props.checkAllContent(
item.label,
!props.isAllContentRead(
item.label,
item.children?.length || -1
)
);
e.stopPropagation();
}}
/>
</span>
) : (
<FaRegCircle
className="m-auto mx-1 hover:text-light-orange hover: hover:fill-light-orange checking"
onClick={(e) => {
props.checkAllContent(
item.label,
!props.isAllContentRead(
item.label,
item.children?.length || -1
)
);
e.stopPropagation();
}}
/>
)}
<p className="ml-1 xl:ml-2 txt-title text-xl flex-grow">{item.label}</p>
<p className="txt-title text-xl">{">>"}</p>
</div>
</>
);
})}
{props.roadmapLevel?.items.map((item, index) => (
<HorizontalLevelItem key={index} item={item} />
))}
</div>
</>
</motion.div>
);
}

type HorizontalLevelItemProps = {
item: RoadmapItem;
};

function HorizontalLevelItem({ item }: HorizontalLevelItemProps) {
const { isAllContentRead, checkAllContent } = useLevelRoadmapActions(item);
const [selectedItem, setSelectedItem] = useSelectedItem();

return (
<button
onClick={() => setSelectedItem(item)}
className={`border-2 flex w-fit xl:w-full border-red p-2 xl:p-4 pl-1 cursor-pointer hover:bg-white rounded-md ${
selectedItem?.label === item.label ? "bg-white" : "bg-light-brown"
}`}
>
{isAllContentRead() ? (
<span className="checking">
<CheckIcon
m="auto"
mx="1"
color="#228B22"
onClick={(e) => {
checkAllContent(false);
e.stopPropagation();
}}
/>
</span>
) : (
<FaRegCircle
className="m-auto mx-1 hover:text-light-orange hover: hover:fill-light-orange checking"
onClick={(e) => {
checkAllContent(true);
e.stopPropagation();
}}
/>
)}
<p className="ml-1 xl:ml-2 txt-title text-xl flex-grow">{item.label}</p>
<p className="txt-title text-xl">{">>"}</p>
</button>
);
}
96 changes: 96 additions & 0 deletions src/components/HorizontalRoadmap/HorizontalLevelItemContent/HorizontalLevelItemContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Badge, Box, Checkbox, Flex, Spacer } from "@chakra-ui/react";
import { motion } from "framer-motion";
import { RoadmapItem } from "../../../entity/RoadmapModel";
import { getColorFromContentType } from "../../../support/contentType";
import { useSectionRoadmapActions, useSelectedItem } from "../LevelProvider/LevelProvider";

export function HorizontalLevelItemContent() {
const [selectedItem] = useSelectedItem();

return (
<>
{!selectedItem && (
<div className="flex h-full ">
<p className="m-auto txt-title text-red">
Selecione um Item à esquerda para estudar.
</p>
</div>
)}

{selectedItem && (
<motion.div
key={selectedItem.label}
initial={{ y: 50, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ type: "spring", bounce: 0, duration: 0.3 }}
className="flex flex-col px-4"
>
<h2 className="txt-title text-2xl text-light-orange">
{selectedItem.label}
</h2>
<p className="txt-title text-xl text-light-orange mt-2">
{selectedItem.description}
</p>
<Accordion className="mt-4" allowToggle>
{selectedItem?.children?.map((section, index) => (
<HorizontalLevelItemSection
key={section.label + index}
section={section}
/>
))}
</Accordion>
</motion.div>
)}
</>
);
}

function HorizontalLevelItemSection({ section }: { section: RoadmapItem }) {
const { isRead, saveRead } = useSectionRoadmapActions(section);

return (
<AccordionItem>
<h2 className="font-semibold">
<AccordionButton color="#e9dad5">
<Box flex="1" textAlign="left">
<Checkbox
className="my-auto mr-2"
size="lg"
isChecked={isRead()}
onChange={(e) => saveRead(e.target.checked)}
/>
<span className="text-light-brown txt-title">{section.label}</span>
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
{section.links?.length
? section.links?.map((link) => (
<Flex className="my-2">
<a
href={link.url}
target="_blank"
className="text-light-brown hover:underline"
>
{link.label}
</a>
<Spacer />
<Badge
colorScheme={getColorFromContentType(link.contentType)}
p={1}
rounded={"md"}
className="h-5"
fontSize="0.6em"
mr="1"
cursor={"default"}
>
<span>{link.contentType ? link.contentType : null}</span>
</Badge>
</Flex>
))
: "Ainda não possuimos conteúdo."}
</AccordionPanel>
</AccordionItem>
);
}
Loading