I am new to both React and Grommet and have worked through the getting started tutorial. When I add a google map to the main container it renders and fills the whole screen. However, when I click the notification icon to load the sidebar it only renders in a tiny column on the side. Is there a way for me to edit the style to adjust the width automatically or do I need to have the container width as a property that changes when the button is clicked? (Please excuse any question format errors as this is my first post.)
I have tried looking through the Grommet box props and various CSS style settings without success.
App.js:
const { showSidebar } = this.state;
return (
<Grommet theme={theme} full>
<ResponsiveContext.Consumer>
{size => (
...
<Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
<Box
align='start'
justify='start'
fill='horizontal'
responsive='true'
>
<MapContainer />
</Box>
{!showSidebar || size !== 'small' ? (
<Collapsible direction='horizontal' open={showSidebar}>
<Box
flex
width='medium'
background='light-2'
elevation='small'
align='center'
justify='center'
>
sidebar
</Box>
</Collapsible>
) : (
...
}
</Box>
</Box>
)}
</ResponsiveContext.Consumer>
</Grommet>
);
MapContainer.js:
return (
<Map google={this.props.google} zoom={14}/>
);
I would like the map to shrink to fill the container/the container to shrink when the sidebar loads.
Related
I'm using MUI V.5 with React.
And I would like to display an image in my grid, when rows are empty (when the user search for a product into the grid and can't find any result).
But I don't know how to access to this part sin filas (img reference)
enter image description here
{products ? (
<Box component="div" style={{ width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
checkboxSelection={true}
autoHeight
density="comfortable"
/>
</Box>
) : (
<div>Loading</div>
)}
</>
You can define a new component and override NoRowsOverlay component of MUI datagrid like this:
const MyCustomNoRowsOverlay = () => (
<img src="/no-items-found.jpg" alt="no-item" />
);
<DataGrid
components={{
NoRowsOverlay: MyCustomNoRowsOverlay
}}
You can take a look at this sandbox for a live working example of this solution.
I am creating an emojipedia app where it is expected to open a Modal, which contains the description of the emoji, when an emoji is pressed. As far as I know, to do so, I need to map the description(contained in emojipedia.js file) of the emoji to the EmojiContainer component in Components folder.
Here comes my problem where when I press a emoji, it is getting hanged. Why is this happening and how to fix this???
THANKS IN ADVANCE.
You are using a single state on EmojiContainer to control all modals in your emoji list. As a consequence, when you try and open a modal, all modals open. A better option would be to encapsulate all logic relative to a single modal in a separate, reusable component:
export default function Emoji({ item }) {
const [open, setOpen] = useState(false);
return (
<Grid item lg={2} md={3} xs={6}>
<ImageButton onClick={() => setOpen(true)}>
<CardMedia
sx={{
"&:hover": {
transform: "scale(1.3)"
}
}}
component="img"
height="100"
image={item.link}
alt="emoji"
/>
</ImageButton>
<Modal
open={open}
onClose={() => setOpen(false)}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Typography sx={style} variant="p">
{item.desc}
</Typography>
</Modal>
</Grid>
);
}
As you see this component has its own state and controls its own modal. In your EmojiContainer you can use it like this:
export default function EmojiContainer() {
return (
<Grid>
{emojipedia.map((item, index) => (
<Grid key={index} container>
<Emoji item={item} />
</Grid>
))}
</Grid>
);
}
From what I see you'll also need to adjust the modal styling. Here's the updated codesandbox
I have been trying to build a website using Next JS and Chakra UI and I wanted to make it responsive. So I have used the react-responsive package to do so. My initial goal is to make a responsive navbar. The working is as follows:
In desktop mode, this is the output I am expecting:
The toggling happens perfectly from light mode to dark mode. For the mobile mode, I would want to have a hamburger instead of the navbar, which on being clicked has a Drawer Chakra UI element to show all navbar contents.
While all of this has been implemented as expected, a small bug seems to have occurred. I am getting the hamburger icon instead of the Moon Icon every time I refresh the page in desktop mode.
Here is a quick demo of the issue I have been facing
I have attached the corresponding code for this part
Importing packages and assigning variables, We are concerned about isBigScreen
import { SunIcon, MoonIcon, HamburgerIcon } from '#chakra-ui/icons';
import { useMediaQuery } from 'react-responsive';
const { colorMode, toggleColorMode } = useColorMode();
const bg = useColorModeValue(navBgColor.light, navBgColor.dark);
const isBigScreen = useMediaQuery({ minWidth: 600 });
const { isOpen, onOpen, onClose } = useDisclosure();
Then I am returning a NavContainer which essentially is a Flex with some configs.
return (
<NavContainer
flexDirection="row"
justifyContent="space-between"
alignItems="center"
maxWidth="900px"
width="100%"
bg={bg}
as="nav"
p={8}
mt={[0, 8]}
mb={8}
mx="auto"
>
.
.
.
// Code inside this is mentioned below
.
.
</NavContainer>
);
This part of the code sets up the color toggler on the left. This has been taken from the example code in react-responsive readme
{isBigScreen && (
<IconButton
aria-label="toggle dark mode"
icon={colorMode == 'dark' ? <SunIcon /> : <MoonIcon />}
onClick={toggleColorMode}
/>
)}
This is the part of the code which I feel is causing an issue
This part of the code makes sure that if the screen is desktop then show navbar with the Links (home, about, projects, blog) in the same row as shown in image 1 and 2, and if this is not in desktop mode, then show a hamburger icon.
{isBigScreen ? (
<Box>{LINKS.map(getLink)}</Box>
) : (
<IconButton
aria-label="toggle ham"
icon={<HamburgerIcon />}
onClick={onOpen}
/>
)}
This part of the code takes care of the situation when it is in mobile mode where a drawer is sliding from left. This is also working perfectly.
<Drawer isOpen={isOpen} placement="left" onClose={onClose}>
<DrawerOverlay>
<DrawerContent>
<DrawerCloseButton />
<DrawerBody>
<Flex
direction="column"
justifyContent="center"
height="100%"
alignItems="center"
>
<IconButton
boxSize="50px"
mb="6"
aria-label="toggle dark mode"
icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
onClick={toggleColorMode}
/>
{LINKS.map(getLink)}
</Flex>
</DrawerBody>
</DrawerContent>
</DrawerOverlay>
</Drawer>
If any further clarification is required, I would be glad to help. Thanks in advance.
Should be as simple as:
import { colorMode, useColorMode } from "#chakra-ui/react";
import { MoonIcon, SunIcon } from '#chakra-ui/icons';
const { colorMode, toggleColorMode } = useColorMode();
<Button onClick={toggleColorMode}>
{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
</Button>
So, I can't say without seeing your full-code, but I would forget the react-responsive library and just set your breakpoints and your display property on your menu with this display={['none', 'none', 'flex', 'flex']} and the reverse for your hamburger.
I'm using react and Typescript.
When I press a Button, I want to go to the next button.
For example, when I press a Button in the blue Box component, I want it to go to the red Box component below. Also, I don't want to use the a tag.I've been using codesandbox to implement this, but I can't figure out how to move the scrolling position.
https://codesandbox.io/s/eloquent-dust-ikdv1?file=/src/index.tsx
Just use anchors for jumping:
<Box height="400px" background="blue.100">
<Button></Button>
</Box>
<Box height="400px" background="red.100" id="red">
<Button></Button>
</Box>
And if you want smooth scrolling (proudly stolen from #Joseph Silber's answer):
const onClick = (e: any) => {
document.querySelector(e).scrollIntoView({
behavior: "smooth"
});
};
return (
<Box>
<Box height="400px" background="blue.100">
<Button onClick={(e) => onClick("#red")}></Button>
</Box>
<Box height="400px" background="red.100" id="red">
<Button></Button>
</Box>
Maybe you can use id but not sure what you are trying to achieve. Try this:
<Box height="400px" background="blue.100">
<Button as="a" href="#red"></Button>
</Box>
<Box height="400px" background="red.100">
<Button id="red"></Button>
</Box>
In this way you wont need to maintain ref.
I am using AntD Collapse for displaying a list of items after expand icon is clicked.
I want the position of expandIcon to go to bottom-right after all the list of the data when expand icon is clicked (just like in google news), but found only two options (left|right) for 'expandIconPosition', no option for top or bottom.
How can we align the expandIcon to bottom-right, when expand icon is clicked?
Few lines from the code for reference:
<Collapse
ghost
style={{ marginTop: "-1vh" }}
expandIcon={({ isActive }) => (
<DownOutlined
style={{ marginTop: "-2vh" }}
rotate={isActive ? 180 : 0}
/>
)}
expandIconPosition="right"
>
<Panel>
<div>
{list()} //list of items
</div>
</Panel>
</Collapse>
Here's one possible solution. Make Collapse a controlled component by specifying activeKey prop and then the value of it will be based on state. Then, by tracking the activeKeys state you can now do a conditional rendering (hide and show) on icons:
const [activePanelKeys, setActivePanelKeys] = useState([]);
const handlePanelIconClick = (panelKey, makeActive) => {
if (makeActive) {
setActivePanelKeys([...activePanelKeys, panelKey]);
} else {
setActivePanelKeys(activePanelKeys.filter((aPK) => aPK !== panelKey));
}
};
<Collapse
activeKey={activePanelKeys}
expandIconPosition="right"
expandIcon={() => <DownOutlined />}
// expandIcon={(panelProps) => (
// <DownOutlined
// onClick={() => handlePanelIconClick(panelProps.panelKey, true)}
// />
// )}
onChange={e => setActivePanelKeys(e)} //if you want to click only icon, comment this and uncomment the above expandedIcon
>
<Panel
header="This is panel header 1"
key="p1"
showArrow={activePanelKeys.indexOf("p1") === -1}
>
<div>{text}</div>
{activePanelKeys.indexOf("p1") !== -1 && (
<div style={{ textAlign: "right", marginTop: 10 }}>
<UpOutlined onClick={() => handlePanelIconClick("p1", false)} />
</div>
)}
</Panel>
{/* <PanelContent header="This is panel header 2" key="p2">
{text}
</PanelContent> */}
</Collapse>;
Here is the complete sample code:
Note: I tried to make a reusable Panel component but it seems that the reveal animation were gone. You can uncomment the commented PanelContent on the code to see the difference.
Hope that I hit what you want.