@chakra-ui/react#Fade TypeScript Examples
The following examples show how to use
@chakra-ui/react#Fade.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AssetSettings.tsx From rari-dApp with GNU Affero General Public License v3.0 | 6 votes |
|
Title = ({ stage }: { stage: number }) => {
return (
<>
<Fade
in={stage === 1}
unmountOnExit
style={{ background: "transparent" }}
>
<Heading size="md"> Configure Interest Rate Model </Heading>
</Fade>
<Fade
in={stage === 2}
unmountOnExit
style={{ background: "transparent" }}
>
<Heading size="md"> Configure Oracle </Heading>
</Fade>
<Fade
in={stage === 3}
unmountOnExit
style={{ background: "transparent" }}
>
<Heading size="md"> Asset Config Summary </Heading>
</Fade>
</>
);
}
Example #2
| Source File: SelectedFoodItem.tsx From calories-in with MIT License | 6 votes |
|
function SelectedFoodItem({ food, onUnselect }: Props) {
return (
<Fade in={true}>
<Tag
size="md"
borderRadius="full"
variant="outline"
colorScheme="teal"
maxWidth="250px"
>
<TagLabel>{food.name}</TagLabel>
<TagCloseButton onClick={() => onUnselect(food)} />
</Tag>
</Fade>
)
}
Example #3
| Source File: Badge.tsx From calories-in with MIT License | 6 votes |
|
function Badge({ children, count, forwardedRef, ...rest }: Props) {
const prevCount = useSameOrPreviousValue(count)
return (
<Box position="relative" ref={forwardedRef} {...rest}>
{children}
<Fade in={count > 0}>
<Center
width="20px"
top="-5px"
right="-5px"
height="20px"
bg="teal.500"
position="absolute"
borderRadius="full"
pointerEvents="none"
boxShadow="base"
>
<Text fontWeight="bold" fontSize="xs" textColor="white">
{count === 0 ? prevCount : count}
</Text>
</Center>
</Fade>
</Box>
)
}
Example #4
| Source File: index.tsx From calories-in with MIT License | 5 votes |
|
function IngredientsList({
variantIndex,
mealIndex,
mealFormFieldId,
onAddIngredients,
ingredientsForms,
ingredientsStats,
shouldAddRadiusToLastBottomBorder,
}: Props) {
const dietFormActions = useDietFormActions()
return (
<Droppable droppableId={mealFormFieldId} type="ingredientsList">
{(provided, snapshot) => (
<Box ref={provided.innerRef} minHeight="56px">
{ingredientsForms.map((ingredientForm, index) => {
const { energy, protein, carbs, fat } = ingredientsStats[index]
return (
<IngredientItem
key={ingredientForm.fieldId}
onRemove={dietFormActions.removeIngredientForm}
variantIndex={variantIndex}
mealIndex={mealIndex}
index={index}
ingredientForm={ingredientForm}
energy={energy}
protein={protein}
carbs={carbs}
fat={fat}
isLast={index === ingredientsForms.length - 1}
isDraggingOver={snapshot.isDraggingOver}
shouldAddRadiusToLastBottomBorder={
shouldAddRadiusToLastBottomBorder !== undefined
? shouldAddRadiusToLastBottomBorder
: index === ingredientsForms.length - 1
}
/>
)
})}
{ingredientsForms.length > 0 && provided.placeholder}
{ingredientsForms.length === 0 && (
<Fade initial={false} in={true}>
<EmptyList onAddIngredients={onAddIngredients} />
</Fade>
)}
</Box>
)}
</Droppable>
)
}
Example #5
| Source File: ScrollButtons.tsx From calories-in with MIT License | 5 votes |
|
function ScrollButtons({
showsButtons,
scrollNodeRef,
canScrollLeft,
canScrollRight,
}: Props) {
function onTest() {
animateScrollLeft(scrollNodeRef, SCROLL_DELTA)
}
function onTest2() {
animateScrollLeft(scrollNodeRef, -SCROLL_DELTA)
}
return (
<Fade in={showsButtons} unmountOnExit={true}>
<IconButton
bg="white"
borderTopLeftRadius="full"
borderBottomLeftRadius="full"
size="md"
aria-label="Add variant"
icon={<ArrowLeft size={20} pointerEvents="none" />}
variant="outline"
onClick={onTest2}
ml={3}
flexShrink={0}
isDisabled={!canScrollLeft}
/>
<IconButton
bg="white"
borderTopRightRadius="full"
borderBottomRightRadius="full"
size="md"
aria-label="Add variant"
icon={<ArrowRight size={20} pointerEvents="none" />}
variant="outline"
onClick={onTest}
flexShrink={0}
isDisabled={!canScrollRight}
/>
</Fade>
)
}
Example #6
| Source File: notes-list.tsx From notebook with MIT License | 4 votes |
|
NotesList: React.SFC<NotesListProps> = ({
notes,
handleClick,
setNotes
}) => {
const bg = useColorModeValue("white", "#2f3244");
const [selectedNote, setSelectedNote] = React.useState<note>();
const toast = useToast();
const { isOpen, onOpen, onClose } = useDisclosure();
const onDelete = (
id: string,
e: React.MouseEvent<SVGElement, MouseEvent>
) => {
const newNotes: note[] = notes.filter((note: note) => note.id !== id);
setNotes(newNotes);
showToast();
e.stopPropagation();
};
const onClick = (id: string, e: React.MouseEvent<SVGElement, MouseEvent>) => {
handleClick(id);
e.stopPropagation();
};
const handleSelectedNote = (note: note) => {
setSelectedNote(note);
onOpen();
};
const showToast = () => {
toast({
title: "Note deleted.",
status: "success",
position: "top",
duration: 2000,
isClosable: true
});
};
return (
<>
<AnimateSharedLayout type="crossfade">
<Box minH={"50vh"}>
{/* <SimpleGrid
columns={[1, 2, 2, 3]}
mt="40px"
gridGap="10px"
position="relative"
overflow="hidden"
> */}
<StackGrid columnWidth={330}>
{notes.map(note => (
<Fade in={true}>
<motion.div
whileHover={{ y: -10 }}
layoutId={note.id}
onClick={() => handleSelectedNote(note)}
>
<Center py={2} px={2} key={note.id}>
<Box
maxH={"400px"}
w="100%"
boxShadow={"lg"}
rounded={"md"}
p={6}
overflow={"hidden"}
cursor="pointer"
_hover={{ boxShadow: "xl" }}
bg={bg}
role="group"
// onClick={() => handleClick(note.id, true)}
>
<Stack>
<Flex
_groupHover={{ justifyContent: "space-between" }}
justifyContent="center"
align="center"
>
<Box>
<Text
color={"green.500"}
textTransform={"uppercase"}
fontWeight={800}
fontSize={"sm"}
letterSpacing={1.1}
>
Note
</Text>
</Box>
<Box
_groupHover={{ display: "block" }}
display="none"
>
<HStack spacing="2">
<Icon
color={"green.500"}
_hover={{ color: "green.600" }}
_groupHover={{ display: "block" }}
as={EditIcon}
w={4}
h={4}
onClick={e => onClick(note.id, e)}
/>
<Icon
color={"green.500"}
_hover={{ color: "#ca364a" }}
_groupHover={{ display: "block" }}
as={DeleteIcon}
w={4}
h={4}
onClick={e => onDelete(note.id, e)}
/>
</HStack>
</Box>
</Flex>
<Heading
fontSize={"xl"}
fontFamily={"body"}
textTransform="capitalize"
noOfLines={2}
>
{note.title}
</Heading>
<Text
color={"gray.500"}
fontSize="md"
noOfLines={{ base: 3, md: 4 }}
>
{note.body}
</Text>
</Stack>
</Box>
</Center>
</motion.div>
</Fade>
))}
</StackGrid>
{/* </SimpleGrid> */}
</Box>
{isOpen ? (
<NoteModal
isOpen={isOpen}
onClose={onClose}
selectedNote={selectedNote}
/>
) : (
""
)}
</AnimateSharedLayout>
</>
);
}
