@chakra-ui/react#Portal TypeScript Examples
The following examples show how to use
@chakra-ui/react#Portal.
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: Header.tsx From rari-dApp with GNU Affero General Public License v3.0 | 6 votes |
|
UtilsLink = ({
isAuthed,
ml,
}: {
isAuthed: boolean;
ml?: number | string;
}) => {
const { t } = useTranslation();
return (
<Box ml={ml ?? 0}>
<Menu autoSelect={false} placement="bottom">
<MenuButton>
<SubMenuText text={t("Utilities")} parentLink="/utils" />
</MenuButton>
<Portal>
<MenuList {...DASHBOARD_BOX_PROPS} color="#FFF" minWidth="110px">
{isAuthed && (
<SubMenuItem name={t("Positions")} link="/utils/positions" />
)}
<SubMenuItem
name={t("Interest Rates")}
link="/utils/interest-rates"
/>
</MenuList>
</Portal>
</Menu>
</Box>
);
}
Example #2
| Source File: Header.tsx From rari-dApp with GNU Affero General Public License v3.0 | 6 votes |
|
PoolsLink = ({ ml }: { ml?: number | string }) => {
const { t } = useTranslation();
return (
<Box ml={ml ?? 0}>
<Menu autoSelect={false} placement="bottom">
<MenuButton>
<SubMenuText text={t("Pools")} parentLink="/pools" />
</MenuButton>
<Portal>
<MenuList {...DASHBOARD_BOX_PROPS} color="#FFF" minWidth="110px">
<SubMenuItem name={t("USDC Pool")} link="/pools/usdc" />
<SubMenuItem name={t("DAI Pool")} link="/pools/dai" />
<SubMenuItem name={t("Yield Pool")} link="/pools/yield" />
<SubMenuItem name={t("ETH Pool")} link="/pools/eth" />
</MenuList>
</Portal>
</Menu>
</Box>
);
}
Example #3
| Source File: ColumnsHider.tsx From ke with MIT License | 6 votes |
|
export function ColumnsHider<T>({ children, onChange, columns, visibleColumns }: ColumnHiderProps<T>): JSX.Element {
const handleChange = useCallback(
(values: ReactText[]) => {
const newVisibleColumns = columns.filter(({ name }) => values.includes(String(name)))
onChange(newVisibleColumns)
},
[onChange, columns]
)
return (
<div>
<Popover placement="right-start">
<PopoverTrigger>
<Button margin="10px 0">Отображаемые колонки</Button>
</PopoverTrigger>
<Portal>
<PopoverContent>
<PopoverArrow />
<PopoverHeader>Выберите отображаемые колонки</PopoverHeader>
<PopoverCloseButton />
<PopoverBody maxHeight="400px" overflow="scroll">
<CheckboxGroup value={visibleColumns.map(({ name }) => name)} onChange={handleChange}>
{columns.map(({ name, header }) => (
<Checkbox value={name} display="block">
{header}
</Checkbox>
))}
</CheckboxGroup>
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
{children}
</div>
)
}
Example #4
| Source File: ChatMessageView.tsx From takeout-app with MIT License | 6 votes |
|
ChatMessageMenu: React.FC<ChatMessageMenuProps> = ({ track, message, pinned, onOpen, onClose }) => {
const chat = useChat();
const real = !pinned && !message.adminControl?.promo;
return (
<Menu onOpen={onOpen} onClose={onClose}>
<MenuButton>Menu</MenuButton>
<Portal>
<MenuList zIndex="1501">
<MenuItem
onClick={() => window.open(`/control/chime_users/${encodeURIComponent(message.sender.handle)}`, "_blank")}
>
Lookup Attendee
</MenuItem>
{pinned ? (
<MenuItem onClick={() => Api.pinChatMessage(track.slug, null)}>Unpin</MenuItem>
) : (
<MenuItem onClick={() => Api.pinChatMessage(track.slug, message)}>Pin</MenuItem>
)}
{real ? (
<MenuItem onClick={() => chat.session!.redactMessage(message.channel, message.id)}>Redact</MenuItem>
) : null}
</MenuList>
</Portal>
</Menu>
);
}
Example #5
| Source File: HeaderMenu.tsx From openchakra with MIT License | 5 votes |
|
HeaderMenu = () => {
return (
<Menu placement="bottom">
<CustomMenuButton
rightIcon={<ChevronDownIcon path="" />}
size="xs"
variant="ghost"
colorScheme="gray"
>
Editor
</CustomMenuButton>
<Portal>
<LightMode>
<MenuList bg="white" zIndex={999}>
{process.env.NEXT_PUBLIC_IS_V1 && (
<MenuItemLink isExternal href="https://v0.openchakra.app">
<Box mr={2} as={GoArchive} />
Chakra v0 Editor
</MenuItemLink>
)}
<ExportMenuItem />
<ImportMenuItem />
<MenuDivider />
<MenuItemLink
isExternal
href="https://chakra-ui.com/getting-started"
>
<Box mr={2} as={GoRepo} />
Chakra UI Docs
</MenuItemLink>
<MenuItemLink href="https://github.com/premieroctet/openchakra/issues">
<Box mr={2} as={FaBomb} />
Report issue
</MenuItemLink>
</MenuList>
</LightMode>
</Portal>
</Menu>
)
}
Example #6
| Source File: page-footer.tsx From notebook with MIT License | 4 votes |
|
export function PageFooter() {
return (
<SimpleGrid
flexDirection="column-reverse"
gridTemplateColumns={["1fr", "1fr", "1fr 1fr", "1fr 1fr"]}
borderTopWidth={2}
mt="30px"
borderTopColor="gray.900"
pt="20px"
>
<Box d={["block", "block", "none", "none"]} mb="30px">
<FooterSignup />
</Box>
<Box>
<SimpleGrid columns={[1, 1, 2, 2]}>
<Stack mb={["10px", "10px", 0, 0]}>
<Text as="span">
<ExternalFooterLink
href={`mailto:${siteConfig.author.email}`}
text="Contact us"
/>
</Text>
<Text as="span">
<ExternalFooterLink
href={siteConfig.repo.url}
text="Contribute"
/>
</Text>
<Text as="span">
<InternalFooterLink
href="/projects"
text="Open source projects"
/>
</Text>
</Stack>
<Stack>
<Text as="span">
<Popover placement="top">
<PopoverTrigger>
<Text
as="span"
_focus={{ outline: "none", boxShadow: "none" }}
fontWeight={500}
color="gray.500"
cursor="pointer"
_hover={{ color: "gray.600", textDecoration: "none" }}
>
Social Accounts
</Text>
</PopoverTrigger>
<Portal>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverBody>
<Stack
as="footer"
isInline
spacing={[1, 2]}
justifyContent="center"
alignItems="center"
>
<ExternalSocialLink
href={siteConfig.author.github}
icon={<FaGithub />}
type="gray"
label="Github Account"
/>
<ExternalSocialLink
href={siteConfig.author.dev}
icon={<FaDev />}
type="gray"
label="Dev Account"
/>
<ExternalSocialLink
href={siteConfig.author.linkedin}
icon={<FaLinkedin />}
type="linkedin"
label="LinkedIn Account"
/>
<ExternalSocialLink
href={siteConfig.author.twitter}
icon={<FaTwitter />}
type="twitter"
label="Twitter Account"
/>
<ExternalSocialLink
href={siteConfig.author.quora}
icon={<FaQuora />}
type="red"
label="Quora Account"
/>
</Stack>
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
</Text>
<Text as="span">
<ExternalFooterLink
href={`mailto:${siteConfig.author.email}`}
text="Sponsor"
/>
</Text>
<Text as="span">
<ExternalFooterLink
href={"/#faqs"}
isExternal={false}
text="FAQs"
/>
</Text>
</Stack>
</SimpleGrid>
<Text mt="20px" color="gray.500">
Made with ? by{" "}
<ChakraLink
_focus={{ boxShadow: "none", outline: "none" }}
target="_blank"
href={siteConfig.author.github}
fontWeight={600}
color={"gray.400"}
bgClip="text"
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{
bgGradient: "linear(to-r, red.500, yellow.500)"
}}
>
Muhammad Ahmad
</ChakraLink>{" "}
</Text>
</Box>
<Box d={["none", "none", "block", "block"]}>
<FooterSignup />
</Box>
</SimpleGrid>
);
}
Example #7
| Source File: Header.tsx From rari-dApp with GNU Affero General Public License v3.0 | 4 votes |
|
Header = ({
isAuthed,
isPool,
isFuse,
padding,
}: {
isAuthed: boolean;
isFuse?: boolean;
isPool?: boolean;
padding?: boolean;
}) => {
const { t } = useTranslation();
return (
<Row
color="#FFFFFF"
px={padding ? 4 : 0}
height="38px"
my={4}
mainAxisAlignment="space-between"
crossAxisAlignment="center"
overflowX="visible"
overflowY="visible"
width="100%"
>
{isAuthed ? (
isPool ? (
<AnimatedPoolLogo />
) : isFuse ? (
<AnimatedFuseSmallLogo />
) : (
<AnimatedSmallLogo />
)
) : isPool ? (
<PoolLogo />
) : isFuse ? (
<FuseSmallLogo />
) : (
<AnimatedSmallLogo />
)}
<Row
mx={4}
expand
mainAxisAlignment={{ md: "space-around", base: "space-between" }}
crossAxisAlignment="flex-start"
overflowX="auto"
overflowY="hidden"
transform="translate(0px, 7px)"
>
<HeaderLink name={t("Overview")} route="/" />
<HeaderLink ml={4} name={t("Fuse")} route="/fuse" />
<PoolsLink ml={3} />
<HeaderLink ml={4} name={t("Pool2")} route="/pool2" />
<HeaderLink ml={4} name={t("Tranches")} route="/tranches" />
<Box ml={4}>
<Menu autoSelect={false} placement="bottom">
<MenuButton>
<SubMenuText text={t("Governance")} />
</MenuButton>
<Portal>
<MenuList {...DASHBOARD_BOX_PROPS} color="#FFF" minWidth="110px">
<SubMenuItem
name={t("Snapshot")}
link="https://vote.rari.capital/"
/>
<SubMenuItem
name={t("Forums")}
link="https://forums.rari.capital/"
/>
</MenuList>
</Portal>
</Menu>
</Box>
<UtilsLink ml={4} isAuthed={isAuthed} />
</Row>
<AccountButton />
</Row>
);
}
Example #8
| Source File: ColorPickerControl.tsx From openchakra with MIT License | 4 votes |
|
ColorPickerControl = (props: ColorPickerPropType) => {
const theme = useTheme()
const themeColors: any = omit(theme.colors, [
'transparent',
'current',
'black',
'white',
])
const { setValue, setValueFromEvent } = useForm()
const value = usePropsSelector(props.name)
let propsIconButton: any = { bg: value }
if (value && themeColors[value]) {
propsIconButton = { colorScheme: value }
}
return (
<>
<Popover placement="bottom">
<PopoverTrigger>
{props.gradient ? (
<IconButton
mr={2}
boxShadow="md"
border={props.gradientColor ? 'none' : '2px solid grey'}
isRound
aria-label="Color"
size="xs"
colorScheme={props.gradientColor}
bg={props.gradientColor}
/>
) : (
<IconButton
mr={2}
boxShadow="md"
border={value ? 'none' : '2px solid grey'}
isRound
aria-label="Color"
size="xs"
{...propsIconButton}
/>
)}
</PopoverTrigger>
<Portal>
<PopoverContent width="200px">
<PopoverArrow />
<PopoverBody>
{props.withFullColor ? (
<Tabs size="sm" variant="soft-rounded" colorScheme="green">
<TabList>
<Tab>Theme</Tab>
<Tab>All</Tab>
</TabList>
<TabPanels mt={4}>
<TabPanel p={0}>
{props.gradient ? (
<HuesPickerControl
name={props.name}
themeColors={themeColors}
enableHues
setValue={setValue}
gradient={true}
index={props.index}
updateGradient={props.updateGradient}
/>
) : (
<HuesPickerControl
name={props.name}
themeColors={themeColors}
enableHues
setValue={setValue}
gradient={props.gradient}
/>
)}
</TabPanel>
<TabPanel p={0}>
<Box position="relative" height="150px">
<ColorPicker
color={props.gradient ? props.gradientColor : value}
onChange={(color: any) => {
props.gradient
? props.updateGradient!(
`#${color.hex}`,
props.index!,
)
: setValue(props.name, `#${color.hex}`)
}}
/>
);
</Box>
</TabPanel>
</TabPanels>
</Tabs>
) : props.gradient ? (
<HuesPickerControl
name={props.name}
themeColors={themeColors}
enableHues
setValue={setValue}
gradient={true}
index={props.index}
updateGradient={props.updateGradient}
/>
) : (
<HuesPickerControl
name={props.name}
themeColors={themeColors}
enableHues={false}
setValue={setValue}
gradient={props.gradient}
/>
)}
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
{props.gradient ? (
<Input
width="100px"
size="sm"
name={props.name}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
props.gradient
? props.updateGradient!(e.target.value, props.index!)
: setValue(props.name, e.target.value)
}}
value={props.gradientColor}
/>
) : (
<Input
width="100px"
size="sm"
name={props.name}
onChange={setValueFromEvent}
value={value}
/>
)}
</>
)
}
