Transform a dropdown from Material UI to Bootstrap - javascript

I need to do this transformation because the dropdown from Material UI looks bad.
Beside of that, the code is working fine. It is a dropdown with multiple choices, it loads a list of strings and their corresponding images and when they are filtered by that category/categories are shown in the table.
This is the working code with Material UI:
import {
Select,
MenuItem,
FormControl,
InputLabel,
} from '#material-ui/core';
const platforms = ['a', 'b', 'c', 'd'];
<FormControl className='searchPlatform'>
<InputLabel id='platforLabel'>Platform</InputLabel>
<Select
labelId='platforLabel'
id='platforLabel'
value={this.props.platformFilter}
renderValue={this.getSelectedPlatformFilter}
onChange={this.handleChangePlatform}
multiple
>
{platforms.map((platform) => (
<MenuItem key={platform} value={platform}>
<div>
<img
src={this.showicon(platform)}
alt=''
height={17}
width={17}
/>
{platform}
</div>
</MenuItem>
))}
</Select>
</FormControl>
And the next one is what I've tried with Bootstrap. I don't know how to trigger the dropdown on onChange. I've tried to put onClick on Dropdown.Item in order to call the same trigger as in onChange from Dropdown.Menu
import { Dropdown } from 'react-bootstrap';
<Dropdown>
<Dropdown.Toggle variant='success' id='dropdown-basic'>
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu
value={this.props.platformFilter}
renderValue={this.getSelectedPlatformFilter}
onChange={this.handleChangePlatform}
>
{platforms.map((platform) => (
<Dropdown.Item
eventKey={platform}
value={platform}
onClick={this.handleChangePlatform}
>
<div>
<img
src={this.showicon(platform)}
alt=''
height={17}
width={17}
/>
{platform}
</div>
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>

Try onSelect prop on <Dropdown> component, as it's a callback fired when a menu item is selected.
(eventKey: any, event: Object) => any
It would be something like:
<Dropdown onSelect={handleChangePlatform}>
<Dropdown.Toggle variant='success' id='dropdown-basic'>
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
// ... rest of code
</Dropdown.Menu>
</Dropdown>

Related

React material-ui tooltip hover over(fire an event trigger when the item is disabled)

i know that disabled item doesn't trigger any event and the possible workaround is to wrap my elements in another which i tried but it didn't work. I can't think of another solution to hover over a disabled tooltip. Here's the sandbox i have
import React from "react";
import "./styles.css";
import MenuItem from "#material-ui/core/MenuItem";
import Tooltip from "#material-ui/core/Tooltip";
export default function App() {
const content = (
<Tooltip title="hover over">
<p>Hey</p>
</Tooltip>
);
return (
<MenuItem disabled component="div">
{content}
</MenuItem>
);
}
https://codesandbox.io/s/beautiful-wing-mgowh?fontsize=14&hidenavigation=1&theme=dark
In order to get the tooltip to show you need to wrap the disabled MenuItem with a <div> and then wrap it with the Tooltip:
export default function App() {
const content = (
<span title="lol">
<p title="lol">Hey</p>
</span>
);
return (
<Tooltip
title="hover over"
>
<div style={{ display: "inline-block" }}>
<MenuItem disabled component="div">
{content}
</MenuItem>
</div>
</Tooltip>
);
}
Checkout this sandbox in which I also used PopperProps on the Tooltip in order to get it to show next to the MenuItem. You can play around with the marginTop and marginLeft values in order to adjust it to your use-case.

Getting the value of selected item in Dropdown react-bootstrap

I want to get the value of selected item in Dropdown. I uses react-bootstrap. I tried placing onSelect={(e) => console.log(e)} at <Dropdown>, <Dropdown.Menu> and <Dropdown.Item> but on selecting one country all of above gives me null.
Dropdown and items are rendered correctly.
please help.
return (
<div>
<FormGroup className={styles.formControl}>
<Dropdown >
<Dropdown.Toggle variant="success" id="dropdown-basic">
Select a Country
</Dropdown.Toggle>
<Dropdown.Menu onSelect={(e) => console.log(e) } className={styles.dropdown_menu}>
{countries.map((country,i) => <Dropdown.Item key={i}>{country}</Dropdown.Item> )}
</Dropdown.Menu>
</Dropdown>
</FormGroup>
</div>
)
const [selectedItem, setSelectedItem] = useState(null);
return (
<div>
<FormGroup className={styles.formControl}>
<Dropdown >
<Dropdown.Toggle variant="success" id="dropdown-basic">
{selectedItem?selectedItem:"Select a country"}
</Dropdown.Toggle>
<Dropdown.Menu className={styles.dropdown_menu}>
{countries.map((country, i) => <Dropdown.Item onSelect={()=>setSelectedItem(country)} key={i}>{country}</Dropdown.Item> )}
</Dropdown.Menu>
</Dropdown>
</FormGroup>
</div>
)
I hope onSelect is the correct handler for the component. Just cross verify that. This should work I suppose.
useState(null) can also be useState(props.value) in case you're passing down something from parent. That's up to you.

pure javascript way to bootstrap navbar dropdown

So I am trying to make the dropdown in the below code work with javascript as I noticed that the CSS code will only trigger the dropdown after a user first clicks on the dropdown. after that, it will let the css hover code work as per normal.
So needing a Javascript way to get this drop down to work.
import React, { useState } from "react";
import {Nav, Navbar, NavDropdown, ButtonToolbar, Button } from "react-bootstrap";
import { withRouter } from "react-router";
import '../App.css';
const Header = props => {
const { location } = props;
function changeBackground(e) {
e.target.children('[data-toggle="dropdown"]').click();
}
return (
<Navbar bg="transparent" variant="dark" expand="lg">
<Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto" activeKey={location.pathname}>
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/advertisers">Advertisers</Nav.Link>
<NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
onMouseOver={changeBackground}>
<NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="/case-studies">Case Studies</Nav.Link>
<ButtonToolbar>
<Button href="/contact" variant="success" size="lg" className="button-round">
Contact Us
</Button>
</ButtonToolbar>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
const HeaderWithRouter = withRouter(Header);
export default HeaderWithRouter;
Opening the dropdown menu by hovering is not supported in React Bootstrap (here is an explanation: https://github.com/react-bootstrap/react-bootstrap/issues/4042).
If you'd like to achieve that you have to use the classic dropdown menu (implemented using NavItem so it works the same as the usual NavDropdown). You should be able to use the show property of Dropdown.Menu - but that doesn't seem to work perfectly either so I had to improvise a bit (hiding/removing the dropdown.menu based on state).
Here is a working example using Dropdown.Menu instead of NavDropdown (but with the same properties): https://codesandbox.io/s/falling-cookies-10joi
The main code difference is, as I explained above, using the Dropdown component instead of NavDropdown to be able to use the show property:
<Dropdown as={NavItem} alignRight onMouseLeave={closeMenu}>
<Dropdown.Toggle
id="basic-nav-dropdown"
as={NavLink}
onMouseEnter={openMenu}
>
Publishers
</Dropdown.Toggle>
{menuOpen && (
<Dropdown.Menu show={true}>
<NavDropdown.Item href="/publishers/radio">
Radio Stations
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">
Audio Podcasters
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">
Video Podcasters
</NavDropdown.Item>
</Dropdown.Menu>
)}
</Dropdown>
We need to change our changeBackground function like this, to auto click the dropdown button on onMouseOver event:
changeBackground = (e) => {
e.target.click();
};
This will click the dropdown button and open the dropdown menu.
Please let me know if you need further information.

Adding a icon to React Bootstrap Dropdown

I'm trying to add an icon to my react dropdown button as shown in the following button.
I couldn't find a way to implement this with the react bootstrap package i'm using.
https://react-bootstrap.github.io/
I tried using the normal bootstrap 4 to to this. But found out that it needs jquery to open the dropdown menu. How can i add a icon to my react bootstrap drop down?
My code
<DropdownButton id="example-month-input-2" title={this.state.weekselectedType}>
<Dropdown.Item onClick={() => this.changeWeekValue('a')}>A</Dropdown.Item>
<Dropdown.Item onClick={() => this.changeWeekValue('b')}>B</Dropdown.Item>
<Dropdown.Item onClick={() => this.changeWeekValue('c')}>C</Dropdown.Item>
</DropdownButton>
I managed to remove the default dropdown icon using the following css
.dropdown-toggle::after {
display:none !important;
}
React Bootstrap allows you to customise Dropdown by passing in custom subcomponents. To customise the toggle button, you can use:
// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
>
{/* Render custom icon here */}
▼
{children}
</a>
));
render(
<Dropdown>
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
Custom toggle
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item eventKey="1">Red</Dropdown.Item>
<Dropdown.Item eventKey="2">Blue</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Orange
</Dropdown.Item>
<Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>,
);
Docs
You can easily add an icon to the dropdown button of react-bootstrap.
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
Change this code to the code given below:
<NavDropdown
title={
<span>
<i className='fad fa-newspaper'></i> Dropdown
</span>
}
id='collasible-nav-dropdown'>
Now your code will look like that.
<NavDropdown
title={
<span>
<i className='fad fa-newspaper'></i> Dropdown
</span>
}
id='collasible-nav-dropdown'>
<NavDropdown.Item href='#action/3.1'>Action 1</NavDropdown.Item>
<NavDropdown.Item href='#action/3.3'>Action 2</NavDropdown.Item>
</NavDropdown>
Note: The code I have shared is taken from react-bootstrap version 2.0.0.
https://react-bootstrap.github.io/components/navbar/
here's with the Icon
<DropdownButton id="example-month-input-2" title=
{this.state.weekselectedType}>
<Dropdown.Item onClick={() => this.changeWeekValue('a')}><i
class="fa fa-chevron-down"></i></Dropdown.Item>
<Dropdown.Item onClick={() =>
this.changeWeekValue('b')}>B</Dropdown.Item>
<Dropdown.Item onClick={() =>
this.changeWeekValue('c')}>C</Dropdown.Item>
</DropdownButton>
font-awesome

How to use text instead of Icon for react-toolbox menu?

I am using react-toolbox menu for my website. Based on the example given in the documentation React-toolbox menu, I can only use icon as my menu. How can I use text for the menu instead?
Example of what I want to do:
When I click the blog text which is a menu, the menuItem will be shown.
Is it possible to do this?
just remove icon property from MenuItem component
<IconMenu icon={<div>blog</div>} position='topLeft' menuRipple>
<MenuItem value='download' caption='Download' />
<MenuItem value='help' caption='Favorite' />
<MenuItem value='settings' caption='Open in app' />
<MenuDivider />
<MenuItem value='signout' icon='delete' caption='Delete' disabled />
</IconMenu>
You can pass an element to the icon property like that:
<IconMenu icon={<div>Menu</div>} position='topLeft' menuRipple>
In case someone else has the problem, the solution is to use Menu component instead of IconMenu. Like this :
const [menuActive, setMenuActive] = useState(false);
return (
<div style={{ position: 'relative' }}>
<Button label='Actions' onClick={() => setMenuActive(!menuActive)} />
<Menu position='topRight' active={menuActive} onHide={() => setMenuActive(false)}>
<MenuItem value='download' caption='Download' />
<MenuItem value='action' caption='Action' />
</Menu>
</div>
);

Categories