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>
Related
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
I'm adding a chakra-ui menu dropdown button to a chart (from react-financial-charts, which is a library built over svg).
For some reason, when I click on the menu, there will be whitespace between the button and the dropdown menu. This only happens when I put the menu onto the chart. If I have the menu standalone in the browser, it'll work as expected.
This is the menu code:
function TestMenu() {
return (
<g className="react-financial-charts-enable-interaction">
<foreignObject
x={30}
y={30}
width={"100%"}
height={"100%"}
style={{ overflow: "auto" }}
>
<Menu>
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
Actions
</MenuButton>
<MenuList>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Menu>
</foreignObject>
</g>
);
}
This is the full codesandbox:
https://codesandbox.io/s/nervous-haze-3mz2c?file=/src/BasicLineSeries.tsx:511-1199
EDIT
If I remove x={0} and y={0} from foreignObject and include style={{ marginTop: "30px", marginLeft: "30px" }} into MenuButton instead, as suggested by one of the answers, this will solve the problem only if the chart is at the top of the page. Otherwise, if there is a div before the chart, then this will occur:
and here's the full codesandbox for that:
https://codesandbox.io/s/nostalgic-pare-c5rxu?file=/src/BasicLineSeries.tsx
UPDATED
According to the menu list position problem, you can make use of Portal to move the entire list options to the bottom of the DOM so that its style will not be affected by any style/component inside the Chart.
...
<Menu>
<MenuButton
as={Button}
rightIcon={<ChevronDownIcon />}
transition="all 0.001s"
borderRadius="md"
borderWidth="0px"
_hover={{ bg: "gray.400" }}
_expanded={{ bg: "blue.400" }}
_focus={{ boxShadow: "none" }}
style={{ marginTop: "30px", marginLeft: "30px" }} // better move the style to css file
>
Actions
</MenuButton>
<Portal>
<MenuList zIndex={10}>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Portal>
</Menu>
...
The Updated Codesandbox
The white space is triggered by the foreignObject's x and y where the MenuList is respecting the space specified in foreignObject. (You can try to increase x and y, you will see a larger gap between the button and menu list)
To solve the problem, you can remove the x and y and apply the margin on MenuButton
...
<foreignObject
width={"100%"}
height={"100%"}
style={{ overflow: "auto" }}
>
<Menu>
<MenuButton
as={Button}
rightIcon={<ChevronDownIcon />}
transition="all 0.001s"
borderRadius="md"
borderWidth="0px"
_hover={{ bg: "gray.400" }}
_expanded={{ bg: "blue.400" }}
_focus={{ boxShadow: "none" }}
style={{ marginTop: "30px", marginLeft: "30px" }} // better move the style to css file
>
Actions
</MenuButton>
<MenuList>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Menu>
</foreignObject>
...
Here is the modified codesandbox
{accordion.map(accordionItem => (
<AccordionItem
key={accordionItem.title}
text={accordionItem.text}
title={accordionItem.title}
></AccordionItem>
))}
I have an Accordion component that maps over an array of data. I am trying to open just the first tab. There are properties you can add to default expand all or none, but wondering how to do this on the first tab?
Material UI also has customised Accordions but they are focused when all data is in one file and not mapped through an array.
<Accordion className={classes.accordion} defaultExpanded={false}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'
style={{
borderBottom: '2px solid #EBEDF7'
}}
>
<Typography className={classes.heading}>{title}</Typography>
</AccordionSummary>
<AccordionDetails>
<Text label={text} className={classes.body} html>
{text}
</Text>
</AccordionDetails>
</Accordion>
This seem to work for me with MUI v5 to open first item (summary) of the accordion
...
summaries.map((summary, index) => (
<MuiAccordion
defaultExpanded={index === 0 ? true : false}
key={summary.id}
>
...
In my case I know what the title of the tabs will be so I was able to do a simple if statement that would open the first tab if the tabs name was as such.
const firstTabCheck =
title === 'Invest some of it' ? (
<Accordion className={classes.accordion} defaultExpanded={true}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'
style={{
borderBottom: '2px solid #EBEDF7'
}}
>
<Typography className={classes.heading}>{title}</Typography>
</AccordionSummary>
<AccordionDetails>
<Text label={text} className={classes.body} html>
{text}
</Text>
</AccordionDetails>
</Accordion>
) : (
<Accordion className={classes.accordion} defaultExpanded={false}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content'
id='panel1a-header'
style={{
borderBottom: '2px solid #EBEDF7'
}}
>
<Typography className={classes.heading}>{title}</Typography>
</AccordionSummary>
<AccordionDetails>
<Text label={text} className={classes.body} html>
{text}
</Text>
</AccordionDetails>
</Accordion>
)
return firstTabCheck
I'm sure there is a cleaner way to do this if anyone wants to reply but this has fixed my issue for the time being.
{forms.map((form,index) => {
return (
<Accordion expanded={expanded === `panel_${index}`} onChange={handleChange(`panel_${index}`)}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
{form.status === "pending" && (
<Chip
style={{ margin: '0' }}
size="small"
label={form.status}
color="default"
clickable
icon={<HistoryIcon />}
/>
)}
{form.status === "approved" && (
<Chip
style={{ margin: '0' }}
size="small"
label={form.status}
color="primary"
clickable
icon={<DoneIcon />}
/>
)}
{form.status === "rejected" && (
<Chip
style={{ margin: '0' }}
size="small"
label={form.status}
color="secondary"
clickable
icon={<ClearIcon />}
/>
)}
<Typography className={classes.heading}>{form.typeOfleave}</Typography>
<Typography className={classes.secondaryHeading}>{moment(form.createdAt).format('MMMM Do YYYY, h:mm:ss a')}</Typography>
</AccordionSummary>
<AccordionDetails style={{ display: 'flex', flexDirection: 'column' }}>
<div>
<Typography gutterBottom className={classes.secondaryHeading}>
Reason : {form.reason}
</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography className={classes.secondaryHeading}>
From : {moment(form.from).subtract(10, 'days').calendar()}
</Typography>
<Typography className={classes.secondaryHeading} style={{ marginLeft: '20px' }}>`enter code here`
To : {moment(form.to).subtract(10, 'days').calendar()}
</Typography>
</div>
</AccordionDetails>
</Accordion>
)
})}
set expanded state (default state) to '0' because array index is starting from 0
const [expanded, setExpanded] = React.useState('panel_0');
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
So I've set up some sticky rail content using an example for the SUIR docs. However, when scrolling the main content, the rail content scrolls into my fixed header.
Do I need to set more rules on the style prop for <Rail>?
Codesandbox link here
To view the issue, navigate to Docs from the menu bar.
The <Rail> component is at the bottom of Overview.js file
export default class Overview extends Component {
contextRef = createRef();
render() {
return (
<div>
<FixedMenuLayout />
<Grid centered columns={3} style={{ marginTop: "7em" }}>
<Grid.Column>
<Ref innerRef={this.contextRef}>
<Segment>
<Docs />
<Rail position="left">
<Sticky context={this.contextRef}>
<Header as="h3">Getting Started</Header>
<List style={{ padding: "5px" }}>
<List.Item>Overview</List.Item>
<List.Item>Examples</List.Item>
<List.Item>Tutorial</List.Item>
</List>
<Header as="h3">How To</Header>
<List style={{ padding: "5px" }}>
<List.Item>Building</List.Item>
<List.Item>Standalone</List.Item>
<List.Item>Deployment</List.Item>
</List>
<Header as="h3">Development</Header>
<List style={{ padding: "5px" }}>
<List.Item>Road Map</List.Item>
<List.Item>Upcoming Features</List.Item>
</List>
</Sticky>
</Rail>
<Rail position="right">
<Sticky context={this.contextRef}>
<Header as="h3">Overview</Header>
<List style={{ padding: "5px" }}>
<List.Item>Overview</List.Item>
<List.Item>Examples</List.Item>
<List.Item>Tutorial</List.Item>
</List>
</Sticky>
</Rail>
</Segment>
</Ref>
</Grid.Column>
</Grid>
</div>
);
}
}
Well a rather easy fix just didn't see the correct prop that handles this exact issue.
The offset prop for <Sticky> needs to be set to an appropriate value.
In my case,
<Sticky offset={90} context={this.contextRef}>
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%"
}
}