@chakra-ui/react#DrawerCloseButton TypeScript Examples
The following examples show how to use
@chakra-ui/react#DrawerCloseButton.
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: SideBar.tsx From ke with MIT License | 6 votes |
|
SideBar: FC<SidebarProps> = ({ header, children, breadcrumbsRules }) => {
const { isOpen, onOpen, onClose } = useDisclosure()
goToResourceEvent.watch(onClose)
return (
<>
<Row>
<Col xs={12}>
<SidebarButtonContainer>
<Button colorScheme="brand" m={2} width={20} onClick={onOpen}>
<Menu size="1em" />
</Button>
<BreadCrumbContainer>{breadcrumbsRules && <Breadcrumbs rules={breadcrumbsRules} />}</BreadCrumbContainer>
</SidebarButtonContainer>
</Col>
</Row>
<Drawer isOpen={isOpen} placement="left" onClose={onClose}>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>{header}</DrawerHeader>
<DrawerBody>
<Flex flexDirection="column">{children}</Flex>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
)
}
Example #2
| Source File: index.tsx From calories-in with MIT License | 6 votes |
|
function Drawer({ title, isOpen, onClose, children }: Props) {
return (
<DrawerBase isOpen={isOpen} placement="bottom" onClose={onClose}>
<DrawerOverlay />
<DrawerContent maxHeight="500px">
<DrawerCloseButton />
<DrawerHeader fontSize="md">{title}</DrawerHeader>
<DrawerBody mb={4}>
<VStack width="100%" spacing={3}>
{getDrawerButtons(children, onClose)}
</VStack>
</DrawerBody>
</DrawerContent>
</DrawerBase>
)
}
Example #3
| Source File: index.tsx From calories-in with MIT License | 6 votes |
|
function Drawer({
portions,
isOpen,
onClose,
onChange,
selectedPortionId,
}: Props) {
return (
<DrawerBase isOpen={isOpen} placement="bottom" onClose={onClose}>
<DrawerOverlay />
<DrawerContent maxHeight="500px">
<DrawerCloseButton />
<DrawerHeader fontSize="md">Portions</DrawerHeader>
<DrawerBody>
{portions.map(portion => {
const { id } = portion
const isSelected = id === selectedPortionId
return (
<PortionItem
key={id}
portion={portion}
isSelected={isSelected}
onClick={() => {
onClose()
onChange(portion)
}}
/>
)
})}
</DrawerBody>
</DrawerContent>
</DrawerBase>
)
}
Example #4
| Source File: index.tsx From calories-in with MIT License | 6 votes |
|
function Drawer({ isOpen, onClose, onSelect }: Props) {
const { variantsForms, selectedVariantFormIndex } = useDietForm()
return (
<DrawerBase isOpen={isOpen} placement="bottom" onClose={onClose}>
<DrawerOverlay />
<DrawerContent maxHeight="500px">
<DrawerCloseButton />
<DrawerHeader fontSize="md">Variants</DrawerHeader>
<DrawerBody>
{variantsForms.map((variantForm, index) => {
const { fieldId, name } = variantForm
const isSelected = index === selectedVariantFormIndex
return (
<VariantItem
key={fieldId}
name={name}
isSelected={isSelected}
onClick={() => {
onClose()
onSelect(variantForm, index)
}}
/>
)
})}
</DrawerBody>
</DrawerContent>
</DrawerBase>
)
}
Example #5
| Source File: AllCoupons.tsx From fresh-coupons with GNU General Public License v3.0 | 5 votes |
|
function AllCoupons() {
const {isOpen, onOpen, onClose} = useDisclosure()
const btnRef = React.useRef<HTMLButtonElement>(null)
const courses = useCourses()
return (
<>
<Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
Open
</Button>
<Drawer
isOpen={isOpen}
placement="right"
onClose={onClose}
size={"4xl"}
finalFocusRef={btnRef}
>
<DrawerOverlay/>
<DrawerContent>
<DrawerCloseButton/>
<DrawerBody>
<Box my={9}>
<Center>
<Heading my={3} className={"course-list-title"} textAlign="center">Premium courses with
discount</Heading>
</Center>
<Stack spacing="10" py="5">
{Object.entries(courses.coursesWithCoupon)
.sort(([_, course]) => course.courseDetails.language === 'English' ? -1 : 1)
.map(([url, course]) => (
<CourseCard key={url} course={course}/>
))}
</Stack>
</Box>
<Box>
<Center>
<Heading my={3} className={"course-list-title"} textAlign="center">More free courses</Heading>
</Center>
<Stack spacing="10" py="5">
{Object.entries(courses.freeCourses).map(([url, course]) => (
<CourseCard key={url} course={course}/>
))}
</Stack>
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
)
}
Example #6
| Source File: IconCustomizerDrawer.tsx From lucide with ISC License | 5 votes |
|
export function IconCustomizerDrawer() {
const [showCustomize, setShowCustomize] = useState(false);
const { color, setColor, size, setSize, strokeWidth, setStroke, resetStyle } = useContext(IconStyleContext);
return (
<>
<Button as="a" leftIcon={<Edit />} size="lg" onClick={() => setShowCustomize(true)}>
Customize
</Button>
<Drawer isOpen={showCustomize} placement="right" onClose={() => setShowCustomize(false)}>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Customize Icons</DrawerHeader>
<DrawerBody>
<Grid gridGap={'1em'}>
<FormControl>
<ColorPicker
color={color}
value={color}
onChangeComplete={(col) => setColor(col.hex)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="stroke">
<Flex>
<Text flexGrow={1} fontWeight={'bold'}>
Stroke
</Text>
<Text>{strokeWidth}px</Text>
</Flex>
</FormLabel>
<Slider
value={strokeWidth}
onChange={setStroke}
min={0.5}
max={3}
step={0.5}
name={'stroke'}
>
<SliderTrack>
<SliderFilledTrack bg={color} />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<FormControl>
<FormLabel htmlFor="size">
<Flex>
<Text flexGrow={1} fontWeight={'bold'}>
Size
</Text>
<Text>{size}px</Text>
</Flex>
</FormLabel>
<Slider value={size} onChange={setSize} min={12} max={64} step={1} name={'size'}>
<SliderTrack>
<SliderFilledTrack bg={color} />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<FormControl>
<Button onClick={resetStyle}>Reset</Button>
</FormControl>
</Grid>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
);
}
Example #7
| Source File: MobileMenu.tsx From lucide with ISC License | 5 votes |
|
MobileMenu = ({ children }: { children?: ReactNode }): JSX.Element => {
const { isOpen, onClose } = useMobileNavigationContext();
const router = useRouter();
useEffect(() => {
if (router.route && isOpen) {
onClose();
}
}, [router.route]);
return (
<Drawer placement="left" onClose={onClose} isOpen={isOpen} size="sm">
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton marginTop={3.5} marginRight={3} />
<DrawerHeader>
<Logo />
</DrawerHeader>
<DrawerBody>
<Box mb={4}>
<NextLink href="/docs" passHref>
<Link fontSize="lg" fontWeight="bold" display="block" mb={2}>
Documentation
</Link>
</NextLink>
<NextLink href="/packages" passHref>
<Link marginRight={12} fontSize="lg" fontWeight="bold" display="block" mb={2}>
Packages
</Link>
</NextLink>
<NextLink href="/license" passHref>
<Link marginRight={12} fontSize="xl">
License
</Link>
</NextLink>
<Link
href="https://github.com/lucide-icons/lucide"
isExternal
fontSize="lg"
fontWeight="bold"
display="block"
mb={2}
>
Github
</Link>
</Box>
<Divider mt={2} />
{children}
</DrawerBody>
</DrawerContent>
</Drawer>
);
}
Example #8
| Source File: TopNavigation.tsx From website with MIT License | 4 votes |
|
TopNavigation: React.FC<TopNavigationProps> = ({ title }) => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<Grid
as="nav"
templateColumns={`1fr 1fr minmax(auto, ${theme.sizes['6xl']}) 1fr 1fr`}
backgroundColor="gray.900"
color="white"
height={['88px', '80px']}
zIndex={50}
>
<List display="flex" flexWrap="wrap" alignItems="center" gridColumn="3/4" m={0} p={0}>
<ListItem display="flex" alignItems="center" pos="relative" h="100%" mr="auto">
<NextChakraLink
href="/"
display="flex"
alignItems="center"
py=".5rem"
px="1rem"
h="100%"
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
<Logo height={40} fill={theme.colors.white} title={title} />
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/community"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Komunitas
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/submit-a-talk"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Ajukan Topik
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/faq"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
FAQ
</NextChakraLink>
</ListItem>
<ListItem py="1.5rem" px="1rem" display={['flex', 'none']} alignItems="center" h="100%">
<IconButton variant="outline" aria-label="Open menu" icon={<HamburgerIcon />} onClick={onOpen} />
<Drawer isOpen={isOpen} placement="right" onClose={onClose}>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Menu Utama</DrawerHeader>
<DrawerBody>
<NextChakraLink
href="/community"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Komunitas
</NextChakraLink>
<NextChakraLink
href="/submit-a-talk"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Ajukan Topik
</NextChakraLink>
<NextChakraLink
href="/faq"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
FAQ
</NextChakraLink>
</DrawerBody>
</DrawerContent>
</Drawer>
</ListItem>
</List>
</Grid>
)
}
Example #9
| Source File: index.tsx From calories-in with MIT License | 4 votes |
|
function Content({
onClose,
mealName,
mealForm,
searchInputRef,
onSelectedFoods,
canSelect,
}: Props) {
const selection = useSelection<Food>()
const listRef = useRef<FoodsListMethods>(null)
const foodEvents = useFoodEvents({ listRef, selection })
const foodsListModalDisclosure = useDisclosure()
const importFoods = useImportFoods({ foodsListModalDisclosure })
const [foodsFilter] = useState(loadFoodsFilter)
function onAdd() {
onSelectedFoods && onSelectedFoods(selection.selectedItems, mealName)
}
return (
<DrawerContent>
<DrawerCloseButton />
<Header mealForm={mealForm} mealName={mealName} canSelect={canSelect} />
<DrawerBody overflow="hidden">
<VStack
width="100%"
height="100%"
spacing={canSelect ? 3 : 6}
alignItems="stretch"
>
<Flex>
<Text textColor="gray.500" size="lg" mr={1}>
Need more foods?
</Text>
<Button
variant="link"
colorScheme="teal"
onClick={foodEvents.onCreateFood}
>
Create a new food
</Button>
</Flex>
{canSelect && <SelectedFoodsList selection={selection} />}
<FoodsFilterStoreProvider initialFilter={foodsFilter}>
<FoodsList
ref={listRef}
searchInputRef={searchInputRef}
selection={selection}
flex={1}
onFoodPreview={foodEvents.onPreviewFood}
itemUsageType={canSelect ? 'selectOrPreview' : 'previewOnly'}
/>
</FoodsFilterStoreProvider>
</VStack>
</DrawerBody>
<DrawerFooter justifyContent={canSelect ? 'flex-end' : 'space-between'}>
{!canSelect && (
<MenuButtons
onImport={importFoods.onImport}
onExport={foodsListModalDisclosure.onOpen}
/>
)}
<HStack spacing={3}>
<Button variant="solid" size="md" onClick={onClose}>
Close
</Button>
{canSelect && (
<Tooltip
isActive={!mealForm}
delay={300}
label="You can add more later"
>
<Button
isDisabled={selection.selectedItems.length === 0}
colorScheme="teal"
onClick={onAdd}
>
{mealForm ? 'Add selected foods' : 'Select foods'}
</Button>
</Tooltip>
)}
</HStack>
</DrawerFooter>
<FoodModal
isOpen={foodEvents.foodModalDisclosure.isOpen}
onClose={foodEvents.foodModalDisclosure.onClose}
onFoodCreatedOrUpdated={foodEvents.onFoodCreatedOrUpdated}
onFoodDeleted={foodEvents.onFoodDeleted}
food={foodEvents.food}
/>
<FoodsListModal
isOpen={foodsListModalDisclosure.isOpen}
onClose={foodsListModalDisclosure.onClose}
foodsToImport={importFoods.foodsToImport}
/>
</DrawerContent>
)
}
