Nextjs with material-ui; Component displayed twice when CardHeader action is set - javascript

I am displaying some material-ui Cards horizontally in a div from data loaded from the backend and rendered server side using NextJS, however when the action property is present in the CardHeader, the view is distorted.
The distortion is a little bit hard to explain so I have reproduced it minimally in CodeSandbox. After removing the action property, the items are rendered correctly, however you will need to reload the mini-browser to see the effect.
<CardActionArea>
<Card>
<CardHeader
avatar={<Avatar alt={value}>{value}</Avatar>}
/** If action is removed, the issue goes away */
action={
<IconButton>
<ThumbUpOutlinedIcon />
</IconButton>
}
title={value}
subheader={value}
/>
<CardContent>
<Typography variant="h6">{value}</Typography>
</CardContent>
</Card>
</CardActionArea>
As you can see above the main div containing the items is at the top with the items horizontally arranged, however there are additional items which are arranged vertically below the div.
My guess is that the top items correctly rendered were rendered in the client side and the bottom items vertically rendered (which also shouldn't be there) were obtained from the server because on inspection of the source, the bottom incorrectly rendered items were not within the __next element.
Why is the presence of the action property in the CardHeader causing this? Or is it possible that my setup with Next and material-ui is incorrect? Thanks.

Related

Keep the selected options in the Sidebar when resizing the screen

My site has a sidebar (FiltersSideBar in my code) that contains filters. When the browser is expanded to full screen, the sidebar is in open mode on the left. If the screen width becomes less than 600, the sidebar is hidden and a button (ArrowBackIosNewIcon in my code) appears that can open the sidebar (as if overlaying the home page).
The problem with my code is that when the sidebar changes position (opens/closes), its state is not saved - all sidebar elements return to their original state. Although the applied filters continue to work.
That is, if the user selected any filters in the full-screen mode (for example, checked some categories), they were applied. But after that the browser window shrinks, the filters themselves remain applied, but the sidebar is displayed in the default mode (i.e. the checkboxes are empty again).
I would like to make it so that regardless of the size of the page the sidebar retains its appearance.
FiltersSideBar.jsx
export default function FiltersSideBar(props) {
return (
<CardContent className={props.className}>
<Table>
<TableBody>
<TableRow>
<TableCell>
<Filter1 />
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<Filter2 />
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
);
}
I don't see how you pass the filters to the sidebar.
But this issue happens because you completely destroy the sidebar to hide which resets its state to default, it would be better to just manipulate the style with display and transition without destroying the sidebar.
like here.
https://codesandbox.io/s/zealous-hodgkin-lf7qwt
Another solution is to make the filters state in the parent component of the sidebar and pass props to it.

React MaterialUI <ListItemSecondaryAction> gets stuck when dragging inside react-beautiful-dnd Draggable?

I'm using react-beautiful-dnd to make some draggable list items using Material UI ListItems.
My ListItems have a ListItemText and a ListItemSecondaryAction which is a target (that wraps an icon) for opening a context menu.
const DraggableListItem = ({ leaf, index, path, handleClick }) => {
return (
<Draggable draggableId={String(leaf.id)} index={index}>
{(provided) => (
<ListItem
{...provided.draggableProps}
{...provided.dragHandleProps}
innerRef={provided.innerRef}
button component={NavLink}
to={path + '/' + leaf.id}
>
<ListItemText primary={leaf.content} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="more options" value={JSON.stringify(leaf)} onClick={handleClick}>
<MoreHorizIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
)}
</Draggable>
)
}
The problem I'm facing is that when dragging the Draggable, the context menu icon inside the ListItemSecondaryAction moves up a little bit and then freezes, despite the ListItemText being dragged around as expected.
Below you can see the item is being dragged to the top of the list and the other ListItemTexts are rearranging themselves around the placeholder/where the dragged item will be dropped. The context menu icon of the item being dragged however, is frozen a little above where it used to be, and the context menu icons for the other items haven't moved into new positions with them.
Simply replacing the ListItemSecondaryAction with a div fixes the issue, but I need the target provided by the ListItemSecondaryAction.
The below works as expected in terms of dragging the items: the IconButton is dragged inside the Draggable.
<div>
<IconButton>
<MoreHorizIcon />
</IconButton>
</div>
I have tried only rendering the ListItemSecondaryAction when not dragging (as opposed to a div when dragging) but there is still a delay in which the context menu of the item being dragged shows up stuck in one spot for a brief period of time. I can also just not render the context menu's target + icon at all when dragging but the same unsightly icon-stuck-in-a-weird-place-for-a-second issue happens.
How can I ensure that the IconButton is dragged with the Draggable when it's inside the ListItemSecondaryAction?
I fixed the icon issue using a variant of the solution here, but rather than rendering a separate ListItemIcon and still rendering the ListItemSecondaryAction, which changed the layout of each item, I found it works better to not render the ListItemSecondaryAction at all when dragging and simply render an Icon without any ListItemIcon or IconButton wrapper. The lone Icon is darker when rendered as a child of the ListItem though. After styling the icon on its own to match the color of the icon inside the secondary action, it looks good.
dragInProgress is a piece of state passed to all list items from the parent list so that they render just the icon when dragging. snapshot is from the snapshot passed by the function in the Draggable, as shown in the linked question. snapshot.isDragging is also checked to avoid the momentary jump of the dragged item's icon while the state dragInProgress is updating and causing the items to re-render.
<ListItem
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<ListItemText primary={item.content} />
{dragInProgress || snapshot.isDragging ?
<MoreHorizIcon style={{color:'rgba(0, 0, 0, 0.54)'}} />
:
<ListItemSecondaryAction>
<IconButton>
<MoreHorizIcon />
</IconButton>
</ListItemSecondaryAction>
}
</ListItem>
Note:
Unfortunately the ListItemSecondaryAction rendered when not dragging doesn't play well with touch (tested on android on chrome) and must be dragged twice to start moving the items. I may put this more specific issue in a separate question.

React - Highcharts Full Screen black bar

I'm trying to implement an application using highcharts/highstock and I'm facing a problem trying to use the full screen function.
I need to set a fixed hight to my charts and be able to view each chart from my page as a full screen one, but since the height is fixed it stays the same when full screen loads, I've tried the approach from this post but it's not working, if I set height to 100% the chart overflows the page and gets crooped depending on the aspect ratio of the screen.
I´ve also found this working demo, I can't replicate this one. I'm not sure how he's calling the component, also I don't know how the export module (hamburguer menu) is showing up if it's never called.
render() {
return <div className="chart" ref={ref => this.container = ref} />
}
on my application I'm calling the component this way
render() {
return (
<HighchartsReact
highcharts={Highcharts}
constructorType="stockChart"
options={options}
allowChartUpdate
callback={this.afterChartCreated}
/>
)
}
I tried passing an ID to this element to try to set height via CSS but it doesn't work.
I was trying to replicate my application with a working example, I could only do it on a codesandbox because of import structure, but for some reason full screen is not working there, it prompts this message
Full screen is not supported inside a frame.
This demo creates the chart without using Highcharts React wrapper - it's a combination of pure Highcharts JS and React - that's why export menu shows without called it. The Highcharts React wrappers work similarly, but more in 'React way' and gives other opportunities to manage the component.
Back to your issue - I think that a better approach will be defining the height of the Highcharts component as inline React styling. You can achieve by setting it in containerProps object.
<CardContent style={{ padding: 0 }}>
<HighchartsReact
highcharts={Highcharts}
containerProps={{ style: { height: "400px" } }}
options={options}
allowChartUpdate
/>
</CardContent>
Demo: https://codesandbox.io/s/fix-full-screen-253sq?file=/src/CustomGUIChart.js
To test it use the open in new window codesandbox option (button just above the exporting menu hamburger).

Semantic UI React - Adding Reveal Effect to Images in Cards

The title says it all.
Is it possible to add the Semantic UI Reveal effect to Images in Cards?
This would be a very nice feature when designing ecommerce websites with Semantic UI + React, for example for having two images for each product, when hovering.
Moreover, when using Semantic UI without React, it is totally possible.
It seems like the React component has a bug where its not specifying the width of the "visible" element in the Reveal. The "hidden" element does have a width of "100%" specified.
See that offset?
So, when we add that in, the positioning of the "visible" component correctly overlays the "hidden" as demo'd in this codesandbox:
https://codesandbox.io/s/v8mylv1p3
Alternatively, if you had the images formatted to take up full-width to begin with, then it probably works fine.
I answer myself because I have found a (not very smart, I admit it) workaround for this problem. Currently, it is working with the following versions of Semantic UI + Semantic UI React.
Last update in March 2018:
"semantic-ui": "^2.3.1",
"semantic-ui-react": "^0.79.0"
In my component, I simply get rid of the direct <Image> or <Reveal> components and use a plain <div> JSX component (containing two Images to emulate the Reveal behaviour):
...
<Card>
<div className={'ui slide masked reveal image'}>
<Image src='/img/products/1.jpg' className={'visible content'} />
<Image src='/img/products/2.jpg' className={'hidden content'} />
</div>
<Card.Content>
<Card.Header textAlign={'center'}>
Product name
</Card.Header>
...
This results in a minimum impact with the desired funcionality :)

Side navigation scroll icons are not appearing even if the content height is more than screen height

I am using sap.tnt.SideNavigation in order to create side panel.For that i am creating a page and the page has sap.tnt.SideNavigation which consist of navigation items to display in side navigation.So the xml view is like this,
<Page>
<content>
<m:ToggleButton icon="sap-icon://menu2" press="onCollapseExapandPress"/>
<SideNavigation id="sideNavigation" visible="false">
<item>
<NavigationList itemSelect="onItemSelect" items="{path:'/widgetsToLoad/widgets'}">
<NavigationListItem icon="{icon}" visible="{inPanel}"
tooltip="{name}"></NavigationListItem>
</NavigationList>
</item>
</SideNavigation>
</content>
</Page>
After doing this eventhough the content height is nore than screen height it will not show scroll icons instead scroll bar will come.How to fix this?
According to the documentation sap.tnt.SideNavigation should be used only with sap.tnt.ToolPage as parent layout control. Thus it might not work perfectly within a Page control.
In general the scroll items are shown if the SideNavigation is not expanded, otherwise the scroll bar is shown. You can check this by playing around with the ToolPage example.

Categories