React SlidingPane header getting hidden under Nav bar - reactjs

This is my App.js:
export class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavigationBar />
<Routes />
</BrowserRouter>
);
}
}
And this is where I am using a SlidingPane on a button click:
Product.js:
class App extends Component {
constructor(props) {
super(props);
this.state = {
isPaneOpen: false,
isPaneOpenLeft: false
};
}
render() {
return <div>
<button onClick={() => this.setState({ isPaneOpen: true })}>Click me to open right pane!</button>
<div style={{ marginTop: '32px' }}>
<button onClick={ () => this.setState({ isPaneOpenLeft: true }) }>
Click me to open left pane with 20% width!
</button>
</div>
<SlidingPane
className='some-custom-class'
overlayClassName='some-custom-overlay-class'
isOpen={ this.state.isPaneOpen }
title='Hey, it is optional pane title. I can be React component too.'
subtitle='Optional subtitle.'
onRequestClose={ () => {
// triggered on "<" on left top click or on outside click
this.setState({ isPaneOpen: false });
} }>
<div>And I am pane content. BTW, what rocks?</div>
<br />
<img src='img.png' />
</SlidingPane>
</div>;
}
}
render(<App />, document.getElementById('app'));
Apparently, the Slidingpane header is getting hidden under the NavBar. When I remove the navbar, I can see the SlidingPane header, but when I add it, it is getting display beneath it. How do I make my Pane to be independent of the NavBar?

You can increase CSS z-index of Slidingpane. If needed you should set position: "relative" If you are writing inline styles you can set it like
style={{zIndex: "10", position: "relative"}}

Related

Show/ Hide a div according to toggle Switch on/off

I want to display/hide the chat body when on/off the switch. That means when switch on I want to display the chat body and when to switch off I want to hide it. Below is an image of toggle switch that I have used. Can you give me help to do that?
class MyApp extends Component {
render() {
return (
<FormControlLabel
control=
{
<Switch
name="sector"
color="primary"
style={{paddingRight: "30px"}}
onClick={this.handleClick.bind(this)}
/>
}
label="Sector 1"
/>
<div className="chatBody">
This is my chat body
</div>
);
}
}
export default MyApp;
You can show/hide the div content using the React state handlers, your code then could look like this:
class MyApp extends Component {
constructor(props) {
super(props);
this.state = {showBody: false};
this.handleClick = this.handleClick.bind(this);
}
handleClick () {
// toggle the showBody state to hide and show the body
this.setState({ showBody: !this.state.showBody })
}
render() {
return (
<FormControlLabel
control=
{
<Switch
name="sector"
color="primary"
style={{paddingRight: "30px"}}
onClick={this.handleClick}
/>
}
label="Sector 1"
/>
{this.state.showBody && (
<div className="chatBody">
This is my chat body
</div>
)}
);
}
}
export default MyApp;
As you can see on the this.state.showBody && we are declaring that the body should only display if the showBody state is true.
Then in some scenarios for "controlled inputs" there is probably a property in your Switch for the "checked" state (it usually depends on the library) and then you can use the state in the Switch to a controlled value: checked={this.state.showBody}.
Just add a state to control this:
class MyApp extends Component {
constructor(props) {
super(props);
this.state = {
checked1: false,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
this.setState({
checked1: e.target.checked,
});
}
render() {
return (
<>
<FormControlLabel
control={
<Switch
checked={this.state.checked1}
name="sector"
color="primary"
style={{ paddingRight: "30px" }}
onClick={this.handleClick.bind(this)}
/>
}
label="Sector 1"
/>
{this.state.checked1 && <div className="chatBody">This is my chat body</div>}
</>
);
}
}
export default MyApp;

Trying to change a square's visibility with props

I have a very basic program that is supposed to hide a square when I button is pressed. Within the Game component, it seems to be updating fine whenever I press the button, and sends an alert whenever I press the button with the current visibility. But when I try to update the square's visibility, it doesn't work.
import React from "react"; import ReactDOM from "react-dom"; import "./index.css";
function Square(props) {
return (
<div className="square" style={{ visibility: props.visibility }}></div>
); }
function Button(props) {
return (
<button type="button" onClick={props.onClick}>
Click to hide square!
</button>
); }
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
visibility: "visible",
};
}
handleClick() {
this.setState({
visibility:
this.state.visibility == "visible" ? "hidden" : "visible",
});
alert(this.state.visibility);
}
render() {
return (
<div>
<Button
onClick={() => this.handleClick()}
visibility={this.state.visibility}
/>
<Square />
</div>
);
} }
ReactDOM.render(<Game />, document.getElementById("root"));
because your Square component doesn't add props visibility to control
import React from "react"; import ReactDOM from "react-dom"; import "./index.css";
function Square(props) {
return (
<div className="square" style={{ visibility: props.visibility, background:'red',width:'100px', height:'100px' }}></div>
); }
function Button(props) {
return (
<button type="button" onClick={props.onClick}>
Click to hide square!
</button>
); }
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
visibility: "visible",
};
}
handleClick() {
this.setState({
visibility:
this.state.visibility == "visible" ? "hidden" : "visible",
});
alert(this.state.visibility);
}
render() {
return (
<div>
<Button
onClick={() => this.handleClick()}
visibility={this.state.visibility}
/>
<Square visibility={this.state.visibility} />
</div>
);
} }
ReactDOM.render(<Game />, document.getElementById("root"));

React Navbar active style state menu Link ReactJs

How can I make on clicking a specific menuItem to navigate to the component in https://codepen.io/mrhamburger/pen/XzjXGb.
I have used similar example But did i little of change because I am using Link imported from NextJs, But the problem is The Link itself and the active style are not connected, my problem is I Have menuItems as state and want to make the active state have a specific active design highlight (menu-item--active) when I click the box or div that containes the Link.
import React, { Component } from 'react';
import Link from 'next/link';
// import MenuItem from './MenuItem';
import '../style.scss';
class Sidebar extends React.Component {
constructor(props) {
super(props)
this.state = {
activeItem: '',
activeItemPosition: 0,
activeItemColor: '',
menuItems: [
{ text: 'ComponentA' },
{ text: 'ComponentB' },
{ text: 'ComponentC' },
{ text: 'ComponentD' },
{ text: 'ComponentE' }
],
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(activeItem) {
return e => {
e.preventDefault()
this.setState({
activeItem,
activeItemPosition: document.getElementById(activeItem).offsetTop,
activeItemColor: window.getComputedStyle(document.getElementById(activeItem)).getPropertyValue('background-color'),
})
}
}
render() {
const menuItems = this.state.menuItems.map(item => <MenuItem item={ item } handleClick={ this.handleClick }/>)
return (
<div className='menu-container'>
<span className='menu-item--active' style={{ top: this.state.activeItemPosition, backgroundColor: this.state.activeItemColor }} />
<div id="ComponentA" className="menu-item" onClick={ this.handleClick('ComponentA') } >
<Link href="/ComponentA" >
ComponentA
</Link>
</div>
<div id="ComponentB" className="menu-item" onClick={ this.handleClick('ComponentB') }>
<Link href="/ComponentB">
ComponentB
</Link></div>
<div id="ComponentC" className="menu-item" onClick={ this.handleClick('ComponentC') } >
<Link href="/ComponentC">
ComponentC
</Link>
</div>
<div id="ComponentD" className="menu-item" onClick={ this.handleClick('ComponentD') }>
<Link href="/ComponentD">
ComponentD
</Link></div>
<div id="ComponentE" className="menu-item" onClick={ this.handleClick('ComponentE') } >
<Link href="/ComponentE">
ComponentE
</Link>
</div>
{/* { menuItems } */}
</div>
)
}
}
function MenuItem(props) {
return (
<div>
</div>
)
}
export default Sidebar;
So, my problem is when I click on any item on the menu, if I clicked the text it shows the component but the active still doesn't highlight as active item unless i click the item itself without the link or text.
Please Help, I want to be able to click on any item so it stays highlighted as active style and shows the right component.
Thanks in advance.

React: Open Modal from a different component

I have a Modal component in the Main.js app and I want to trigger it from a different component (in this case Homepage, but I have one component for each page).
I don´t know how to pass a component to be rendered inside the modal.
If it helps I´m using Context API.
App.js
const App = () => {
return (
<div>this is the main app</div>
<Modal />
)
}
ReactDOM.render(<App />, document.getElementById('root'))
Modal.js
class Modal extends Component {
constructor(props) {
super(props)
this.state = {
'open': false
}
}
componentWillReceiveProps(nextProps) {
this.setState({open: nextProps.open})
}
render() {
if (!this.state.open) {
return false
}
return(
<div className="modal">
{this.props.children}
</div>
)
}
}
export default Modal
Homepage.js
class Homepage extends Component {
constructor(props) {
super(props)
this.handleOpenModal = this.handleOpenModal.bind(this)
}
handleOpenModal() {
// here I want to open the modal and pass the <ModalContent /> component
// basically call the <Modal open="true"> from the Main component
}
render() {
return(
<div className="homepage">
<button onClick={this.handleOpenModal}>open the modal</button>
</div>
)
}
}
const ModalContent = () => {
return(
<div>this is the content I want to render inside the modal</div>
)
}
thank you.
I strongly recommend using something like react-modal (npm). It allows you to keep modal content right next to the trigger. It does this by appending a "portal" high up in the DOM and handles appending the content to is.
Your example may look like the following:
import Modal from 'react-modal';
class Homepage extends Component {
constructor(props) {
super(props)
this.state = { modalOpen: false };
this.handleOpenModal = this.handleOpenModal.bind(this)
}
handleOpenModal() {
this.setState({ modalOpen: true });
}
render() {
return(
<div className="homepage">
<button onClick={this.handleOpenModal}>open the modal</button>
<Modal open={this.state.modalOpen}>
<ModalContent />
</Modal>
</div>
)
}
}
const ModalContent = () => {
return(
<div>this is the content I want to render inside the modal</div>
)
}

material-ui menu not close when dialog open

i am using react + material-ui .
i created dialog component in jsx file like this:
export default class CartoviewAbout extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
}
_handleOpen() {
this.setState({open: true});
};
_handleClose() {
this.setState({open: false});
};
render() {
const actions = [
<FlatButton
label="Close"
primary={true}
keyboardFocused={true}
onTouchTap={this._handleClose.bind(this)}
/>,
];
return (
<div>
<MenuItem
onTouchTap={this._handleOpen.bind(this)}
primaryText="Show About Dialog"
/>
<Dialog
title={title}
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this._handleClose.bind(this)}
autoScrollBodyContent={true}
contentClassName="dialog"
bodyClassName="dialog_body"
>
<div ><p>{abstract}</p>
</div>
</Dialog>
</div>
);
}
}
and i use this component in menu in another file but then i click the menu item dialog open and menu not close:
export default class CartoviewAppBar extends React.Component {
constructor(props) {
super(props);
}
render() {
const about = appConfig.showAbout ? React.createElement(CartoviewAbout) : "";
const icon_menu = <IconMenu
iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
>
{about}
</IconMenu>;
return (
<div>
<AppBar
title={''}
showMenuIconButton={false}
iconElementRight={icon_menu}
/>
</div>
);
}
image:
i want menu to close when dialog open
You'll need to add the Dialog component outside the IconMenu. The IconMenu's onRequestChange event wont fire until the dialog closes.
Try this may be a workaround.
_handleOpen() {
window.setTimeout(() => {
this.setState({open: true});
}, 100); //any arbitary timeout
};
MenuItem onClick will automatically trigger for closing IconMenu
I think opening Dialog suppressing the event for closing IconMenu. So opening Dialog after closing IconMenu using setTimeout

Resources