I am doing a program in react and I want to show a list of permissions after I click the button.
Right now I am showing the information with window.alert but i want to show it on a prettier list.
The button that I press:
What is showing right now (prints all elements on the list one at the time):
When i click that butotn i want all the elements of the list to appear on this way:
Is there any way to do that?
You could use a combination of the react-bootstrap Popover and the ListGroup components in your render method.
const popover = (
<Popover id="popover-permission" title="Permissions">
<ListGroup>
<ListGroup.Item>Permission 1</ListGroup.Item>
<ListGroup.Item>Permission 2</ListGroup.Item>
<ListGroup.Item>Permission 3</ListGroup.Item>
</ListGroup>
</Popover>
);
return <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
<Button variant="secondary">Show Permissions</Button>
</OverlayTrigger>
Related
I am trying to use the material UI menu to display a context menu on a div, as in https://material-ui.com/components/menus/#context-menu
This works I can right-click and it displays.
However, the material-ui context menu when displayed injects a transparent div covering the whole screen behind the menu. This means any further clicks are intercepted by this element. It seems this element will close the menu when a left click is detected but will move and continue displaying the same context menu if you right-click anywhere else on the page, including where the context menu is irrelevant.
Is there any way to display the menu without this transparent div which is removing control from my page?
You can see this action in the example: https://material-ui.com/components/menus/#context-menu
Right-click on the text, then right-click anywhere else (while the menu is still displayed) and you can trigger the menu to appear all over the page, even in the app bar, where the menu options make no sense.
I tried to do it in like this:
export default function MenuPopupState() {
return (
<PopupState variant="popover" popupId="demo-popup-menu">
{popupState => {
const menuProps = bindMenu(popupState);
return (
<React.Fragment>
<Button
variant="contained"
color="primary"
{...bindTrigger(popupState)}
>
Open Menu
</Button>
<Menu
{...menuProps}
onContextMenu={event => {
event.preventDefault();
}}
onMouseDown={e => {
menuProps.onClose();
}}
>
<MenuItem onClick={popupState.close}>Cake</MenuItem>
<MenuItem onClick={popupState.close}>Death</MenuItem>
</Menu>
</React.Fragment>
);
}}
</PopupState>
);
}
https://codesandbox.io/s/material-demo-szpbr?file=/demo.js
I am working with mapbox react gl - It is working pretty nice so far... except one thing.
The user can add their hometown location to the map. When the hometown location appears, it can be clicked to view a popup. I want the user to be able to remove the location from the map from inside the popup - So I added a function that removes the location from the database when a button is clicked. The problem is when the button is inside the popup the function doesn't fire - and I have no idea why.
I have messed with the z index of the button but it seems like whenever the button is clicked, the onClose function is being called instead of my handleDeleteHome function...
Edit* If I remove the onClose function, the handleDeleteHome function fires.
Any help is appriciated! Thanks!
{selectedHome && (
<Popup
latitude={bandLocation[0]}
longitude={bandLocation[1]}
onClose={() => {setSelectedHome(null)}}
offsetLeft={23}
offsetTop={-10}
>
<div>
<h4>Home Town</h4>
<Button
onClick={(e) => {
e.preventDefault()
handleDeleteHome()
}}
color="danger">x</Button>
</div>
</Popup>
)}
Alright! Figured it out - If anyone else needs to know:
You need to add closeOnClick={false} to the popup!
I have a react modal inside a react table cell. issue is that, it covers the whole screen. Any idea why it is happening ? This is the code snippet of a react table cell.
Header: '',
Cell: row => {
return (
<div>
<Modal open={this.state.open} onClose= .
{this.onCloseModal}>
<h2>Simple centered modal</h2>
</Modal>
</div>
When i click a a . button, i set the open as true,but the modal covers the whole screen, Any idea why ?
I'm rendering a Modal from reactstrap library, and i want to have within this text modal another link tag. Something like "Click here to show it". So, when the modal appears, the user can see that text and also can click on the here word to render another different Modal. How can achieve that?
This is my code:
code where i'm calling the Modal
<Modal
show={showGeneralModal}
children={"Click " + here + " to show it"}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
/>
code from the original exported Modal
return (
<div>
<Modal
isOpen={isOpen}
backdrop="static"
keyboard={false}
toggle={this.toggle}
size={size}
onExit={onExit}
>
<ModalHeader className={modalHeaderClasses} toggle={this.toggle}>
{title}
</ModalHeader>
<ModalBody className={modalBodyClasses}>
{children}
</ModalBody>
</Modal>
</div>
);
I'm getting right now this text within the modal:
Click [object Object] to show it
And i would like to have instead
Click here to show it
and when i click on here word, the other Modal should be rendered.
Any suggestions?
I can't modify the original Modal code cause it is being used for many other components in different places.
Btw, i was in a wrong way to do that. If you are in the same trouble, you may know that children is an already prop of react which allows you to access whatever you passed in the component that you are accessing to.
Knowing that, you don't have to pass children prop, just pass within the component whatever you want to be inside of children prop. So, instead of doing this:
<Modal
show={showGeneralModal}
children={"Click " + here + " to show it"}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
/>
do this:
<Modal
show={showGeneralModal}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
> Click here to show it
</Modal>
I have a component with render method like this:
<ListGroup>
{myarray.map(function(item, k) {
return (
<ListGroupItem
key={item._id}
bsStyle={item.status==='FAIL'?'danger':null}
>
Hello world
<button onClick={showModal}>Open Modal</button>
</ListGroupItem>
);
})}
</ListGroup>
I would like to show the modal on clicking of button with text Open Modal. There will be many list items with the button, however the content of the modal will be different which is dynamic populated from myArray.
I'm stuck here, since react-bootstrap modal needs the show state which I'm not aware of how to handle from multiple modals on the same page.