I'm trying to create a swipeableDrawer like that.
I want a button on my swipeableDrawer which I could click to dispatch an action.
But I can't click the button and swipe the swipeable drawer at the same time.
I want it.
<Global styles={{
'#swipeable .MuiPaper-root': {
height: `calc(78% - ${drawerBleeding}px)`,
overflow: 'visible',
},
}}/>
<SwipeableDrawer
id={'swipeable'}
anchor="bottom"
open={open}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
swipeAreaWidth={100}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
}}>
<>
<Card>
<CardContent>
<div className="row">
<div className="col-12">
{!ricalcolaPremioBTNEnabled ?
<Button className={buttonClasses.root}
onClick={() => history.push(INFO_PERSONALI_PATH)}>CONTINUA</Button> :
<Button className={buttonClasses.root}
disabled={!ricalcolaPremioBTNEnabled}
onClick={handleRicalcolaPremio}>RICALCOLA</Button>}
</div>
</div>
</CardContent>
</Card>
</>
<div style={{height: '100%', marginTop: '3vw', overflowY: 'auto', overflowX: 'hidden'}}>
<div className="row p-3">
Content of swipeable drawer
</div>
</div>
</SwipeableDrawer>
</Global>
How can I fix it?
Your button just probably inherits the pointer-events: none CSS from the <SwipeableDrawer/>.
You can override this CSS but you may encounter this issue
Related
I am currently using react-infinite-scroll-component to paginate the comments from a certain post. There is a button in the comment section which shows a drawer that is supposed to show the paginated comments. The problem is, the react-infinite-scroll-component doesn't work, as it does not fire
the "next" function.
Here is the code:
<div>
<Drawer
anchor={"bottom"}
open={open}
onClose={handleDrawer}
style={{ height: "100vh", overflow: "auto", margin: "0px 4px" }}
>
<Toolbar>
<Typography variant="h4" style={{ flexGrow: 1 }}>
Comments
</Typography>
<IconButton onClick={handleDrawer}>
<CloseIcon />
</IconButton>
</Toolbar>
<Divider />
<br />
<CommentForm
comment={comment}
handleChange={handleChange}
handleSubmit={handleSubmit}
/>
<InfiniteScroll
dataLength={page}
next={More}
hasMore={hasMore}
loader={
<>
<br />
<CircularProgress />
</>
}
style={{
overflow: "hidden",
}}
scrollThreshold={1}
>
<CommentList comments={comments} id={session.id} />
</InfiniteScroll>
</Drawer>
</div>
The drawer is mostly similar to Youtube's comment drawer on the mobile app. Is there anything I am missing here?
Probably, the problem is the relation with Drawer and Infinite Scroll height. The height of Infinite Scroll is not reaching the right point to trigger next function. If you provide the demo in Codesandbox would be easier to understand.
Fixed height of infinite scroll container
<Box sx={{ height: 500 }}>
<InfiniteScroll
dataLength={page}
next={More}
hasMore={hasMore}
loader={
<>
<br />
<CircularProgress />
</>
}
style={{
overflow: "hidden",
}}
scrollThreshold={1}
>
<CommentList comments={comments} id={session.id} />
</InfiniteScroll>
</Box>
I have created a dropdown for the icon where when the icon is clicked, it will show the dropdown. Once we hover on Card then the three dots icon will appear. But my objective is even after showing dropdown the icon should appear. but here is my code, it is disappearing. Can anyone help me with this query?
Here is the code:
<Card>
<CardHeader
className={classes.header}
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<div>
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
style={{ marginTop: "35px" }}
id="simple-menu"
keepMounted
anchorEl={this.state.menu}
open={Boolean(this.state.menu)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>change password</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</div>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
</Card>
Here is the sample code
Create a style className which sets the icon visibility to visible. Conditionally assign the class to the parent div only when the menu is open i.e. check for this.state.menu && classes.menu.
Style
const styles = theme => ({
header: {
background: "grey",
"&:hover": {
background: "yellow",
"& $showIcon": {
visibility: "visible"
}
}
},
showIcon: {
visibility: "hidden"
},
menu: {
"& $showIcon": {
visibility: "visible"
}
}
});
JSX
<Card>
<CardHeader
className={classes.header}
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<div className={this.state.menu && classes.menu}>
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
>
<MoreVertIcon />
</IconButton>
...
Working copy of your code is here
I need to add link to my logo image.I mean when ever I click my logo image it should redirect to dashboard page.I tried to do it using anchor tag but it is not working properly
<Header className='header' style={{ position: 'fixed', width: '100%' }}>
<div className='header-logo' style={{ width: collapsed ? 80 : 200, height: 0 }}>
{collapsed &&
<a href="/dashboard">
<img src={minLogo} alt='Logo' />
</a>
}
{ !collapsed &&
<span> </span>
}
</div>
<Icon
className="trigger"
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggleSideBar}
/>
<div style={{ display: 'inline-block', float: 'right' }}>
<Dropdown overlay={menu} placement="bottomRight">
<Avatar icon='user' />
</Dropdown>
</div>
</Header>
Try this
import { Link } from "react-router-dom";
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
User router Link instead of anchor:
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
I'm currently trying to learn the basics of React so I thought I'd try to mock-up another website. Currently, I'm trying to build a header that looks like Airbnb's
Unfortunately, I can't seem to figure out the aligning and how to get the logo to be all the way on the left side.
Any advice would be appreciated! Thanks!
<Flexbox flexDirection="column">
<Flexbox element="header" height="60px">
<div style={{ flexGrow: 0}}>
<img src={Logo} />
</div>
<div style={{flexGrow: 8}}>
<SearchBar
onChange={() => console.log('onChange')}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>
</div>
<div>
<Button>Become a host</Button>
</div>
<div>
<Button>Sign up</Button>
</div>
<div>
<Button>Log in</Button>
</div>
</Flexbox>
</Flexbox>
I'm using a clipped under the app bar drawer with a canvas as the primary content. I have three collapsible cards in the drawer and when all set to be open by default, it shows a vertical scrollbar on the body and white space below the html element with the body element. If you close all three of the cards the scroll goes away. If you reopen the cards, the scroll doesn't appear. The issue only seems to occur when the page is loaded with all three cards open.
Our short term solution is to load the page with only two cards open, but I want to note even with two open, the drawer content extends below the window with no scroll. The CSS for the drawer shouldn't be the issue either. Anyone else experience this issue?
drawerPaper: {
position: 'relative',
width: 400,
overflowX: 'hidden',
overflowY: 'hidden',
'&:hover': {
overflowY: 'auto',
},
'&::-webkit-scrollbar': {
display: 'none',
},
},
<MuiThemeProvider theme={this.state.useDarkTheme ? darkTheme : lightTheme}>
<div className={classes.root}>
<AppBar position="absolute" className={classes.appBar}>
<Toolbar>
<div className={classes.flex}>
<Typography className={classes.headerTextColor} variant="title">
Title
</Typography>
{sealedBy}
</div>
<HeaderTools />
<Tooltip id="toggle-icon" title="Toggle light/dark theme">
<IconButton className={classes.headerTextColor} onClick={this.toggleTheme}>
<BrightnessMediumIcon />
</IconButton>
</Tooltip>
</Toolbar>
{spinner}
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.fixedWidth}>
<div className={classes.toolbar} />
<DocumentTools />
<SealingTools />
<AnnotationTools />
</div>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<DrawingCanvas />
</main>
</div>
</MuiThemeProvider>
You need to add height: 100% css property on some container components, and to styles to drawerPaper need add too.
I have setup here, its working, but probably depends on container components:
drawerPaper: {
width: 250,
overflow: "auto",
height: "100%",
[theme.breakpoints.up("md")]: {
overflow: "auto",
width: drawerWidth,
position: "relative",
height: "100%"
}
}