I'm having a hard time aligning some elements in my AppBar. I need to place that MoreVertIcon to the right, after all elements but it always shows before the children:
Here's my code:
export default class MainMenu extends React.Component {
render() {
return (
<AppBar title="Dashboard" iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
}>
<FlatButton label="Foo" style={styles.items}/>
<FlatButton label="Bar" style={styles.items}/>
</AppBar>
);
}
}
I just made a component for all of the right hand stuff like this:
var RightSideStuff = React.createClass({
render() {
return (
<span>
<FlatButton label="Foo" style={styles.items}/>
<FlatButton label="Bar" style={styles.items}/>
<IconMenu
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
</span>
);
}
});
Then include it into the original component:
<AppBar title="Dashboard"
iconElementRight={<RightSideStuff/>}
style={styles.appbar}
/>
This lets the appubar display all that stuff as a group instead of the browser taking control and rendering things in order.
Related
I would like to have my own component for my specific radio button. But the component doesn't render correctly.
I have a RadioGroup like this:
const SampleComp = (props : MyProps) => {
return <RadioGroup
defaultValue="AllTime"
name="Filter"
>
<FormControlLabel value="AllTime" control={<Radio />} label="All time" />
<FormControlLabel value="TestLabel" control={<Radio />} label={<TestLabel/>} />
</RadioGroup>
}
And I have a Testlabel to show a select component:
const TestLabel = () => {
return <FormControl fullWidth variant={'outlined'}>
<InputLabel id="demo-simple-select-label">Long text for label</InputLabel>
<Select
labelId="myField"
id="myField"
label="Long text for label"
onChange={handleChange}
>{[0, 1, 2, 3, 4, 5, 6].map(s => <MenuItem key={s} value={s}>{'value ' + s}</MenuItem>)}
</Select>
</FormControl>
}
In the end it looks like this:
I expected something like this:
Question: How can I render my component correctly when using in combination with a radio button? Or should this be done differently?
I messed around trying to get something to work but it doesn't look possible + the docs for FormControlLabel say it should take A control element. For instance, it can be a Radio, a Switch or a Checkbox.
It looks like you need to render a RadioGroup with an 'other' option and then either dynamically render or undisable a dropdown underneath the RadioGroup to achieve the behaviour you're after.
const SampleComp = () => {
const [selectedRadioValue, setSelectedRadioValue] = useState('AllTime')
const [selectedMenuItem, setSelectedMenuItem] = useState<string>()
return (
<>
<RadioGroup
value={selectedRadioValue}
name="Filter"
onChange={(_event, newValue) => setSelectedRadioValue(newValue)}
>
<FormControlLabel value="AllTime" control={<Radio />} label="All time" />
<FormControlLabel value="Other" control={<Radio />} label="Other" />
</RadioGroup>
<TextField
disabled={selectedRadioValue !== 'Other'}
label="Long text for label"
value={selectedMenuItem}
onChange={(event) => setSelectedMenuItem(event.target.value)}
fullWidth
select
>
{[0, 1, 2, 3, 4, 5, 6].map((s) => (
<MenuItem key={s} value={s}>
{'value ' + s}
</MenuItem>
))}
</TextField>
</>
)
}
I need some help...
I'm working with a material UI Popover: currently, it shows when hovering over a certain place and it will only hide when clicking anywhere away from it. I want it to hide automatically as soon as my mouse isn't hovering anymore.
Can you tell me what's wrong with my code?
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const openModal = Boolean(anchorEl);
const id = openModal ? "simple-popover" : undefined;
const handleClick = (event: any, params: any) => {
setOrganization({...params});
setAnchorEl(event.currentTarget);
console.log("hola", "Hola")
};
const handlePopover = () => {
setAnchorEl(null);
setOrganization({ idor: null });
};
<Grid container direction="column" height="60%">
<Grid item container justifyContent="center">
<Badge
style={{ cursor: "pointer" }}
badgeContent={params.row.active ? "Active" : "Inactive"}
color={params.row.active ? "success" : "error"}
onMouseEnter={(e: any) => handleClick(e, params.row)}
/>
<Popover
id={id}
onExit={handlePopover}
open={openModal}
anchorEl={anchorEl}
onClose={handlePopover}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<Grid container justifyContent="center">
<Tooltip title="View Window">
<IconButton
onClick={() => handleToOrganization(params.row, "view")}
style={{ marginLeft: 16 }}
>
<LaunchOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Edit">
<IconButton
onClick={() => handleToOrganization(params.row, "edit")}
style={{ marginLeft: 16 }}
>
<EditOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
onClick={() => handleOpen()}
style={{ marginLeft: 16 }}
>
<DeleteOutlineOutlinedIcon />
</IconButton>
</Tooltip>
</Grid>
</Popover>
</Grid>
</Grid>```
Thank you in advance! :)
I am currently using the following to generate a select dropdown on my page:
<Select>
{options.map((option) => (
<MenuItem
className={classes.selectOption}
key={option}
value={option}
>
<ListItemText primary={option} />
</MenuItem>
))}
</Select>
When I click on the dropdown on the page, an element with MuiPaper-root class appears on the page. This shows me the list of options in menu item format. I would like to style the MuiPaper-root element.
Is there a way to do this by passing in an attribute to the <Select> component?
Yes, you can change the paper by MenuProps
https://material-ui.com/api/select/#props
const useStyles = makeStyles((theme) => ({
paper: {
"& ul": {
backgroundColor: "red",
},
}
}));
export default function CustomizedSelects() {
const classes = useStyles();
return (
<Select MenuProps={{ classes: { paper: classes.paper} }}>
{options.map((option) => (
<MenuItem
className={classes.selectOption}
key={option}
value={option}
>
<ListItemText primary={option} />
</MenuItem>
))}
</Select>);
}
Material ui add default padding on List and ListItem how to remove it ?
Any help or direction to resources would be appreciated.
You can override the root class of the ListItem component and pass the padding you want.
const styles = theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
},
item: {
padding: 0
}
});
function SimpleList(props) {
const { classes } = props;
return (
<div className={classes.root}>
<List component="nav">
<ListItem button classes={{ root: classes.item }}>
<ListItemText primary="Item 01" />
</ListItem>
<ListItem button classes={{ root: classes.item }}>
<ListItemText primary="Item 02" />
</ListItem>
<ListItem button classes={{ root: classes.item }}>
<ListItemText primary="Item 03" />
</ListItem>
</List>
</div>
);
}
See working sample.
For anyone else coming here the easy way to remove the default padding from the list is to use the disablePadding prop on the List Component.
https://material-ui.com/api/list/
import React from 'react'
import List from '#material-ui/core/List'
import ListItem from '#material-ui/core/ListItem'
import ListItemText from '#material-ui/core/ListItemText'
function Sidebar() {
return (
<List disablePadding>
<ListItem button>
<ListItemText>Home</ListItemText>
</ListItem>
<ListItem button>
<ListItemText>Billing</ListItemText>
</ListItem>
<ListItem button>
<ListItemText>Settings</ListItemText>
</ListItem>
</List>
)
}
export default Sidebar
If you're just using a ListItem component, you can use the disableGutters (Boolean) property to disable the left and right padding, as seen from the API documentation: https://material-ui.com/api/list-item/
<ListItem disableGutters={true} button={true} key='Home' component={Link} to={"/"} selected={'/' === pathname}>
<ListItemIcon><Home /></ListItemIcon>
<ListItemText primary='Home' />
</ListItem>
I'm very new to React and ES6. I'm building a small application using React and I'm following ES6 standard. Now I need to open a modal window on a button click.
I tried react-bootstrap modal and skylight. But did not find much luck.
Can anyone suggest the best way of opening/closing modal along with a callback.
Thanks in advance.
I've put together an example to illustrate how you might go about this, making use of the parent/child relationship and passing down a callback.
The scenario is basically:
There is a parent <App /> component
It can show a <Modal /> component
<App /> controls whether the <Modal /> is open or not
<App /> passes its child, <Modal />, a callback to "closeModal"
See this JSBin example for the full solution in action: http://jsbin.com/cokola/edit?js,output
And a visual summary:
<Modal /> is just a "dumb" component. It does not "control" whether it is open or not. This is up to the parent <App />. The parent informs it of how to close itself via passing down a callback this.props.closeModal
class Modal extends React.Component {
render() {
const { closeModal } = this.props;
return (
<div className="jumbotron" style={{position: 'absolute', width: '100%', top: 0, height: 500}}>
<h1>Some Modal</h1>
<button
className="btn btn-md btn-primary"
onClick={closeModal}
>Close Modal</button>
</div>
)
}
}
<App /> is aware of the open/closed state and controls its child, <Modal />
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modalOpen: false
};
}
_openModal() {
this.setState({modalOpen: true});
}
_closeModal() {
this.setState({modalOpen: false});
}
render() {
const { modalOpen } = this.state;
return (
<div>
<button
className="btn btn-md btn-primary"
onClick={this._openModal.bind(this)}
>Open Modal</button>
{/* Only show Modal when "this.state.modalOpen === true" */}
{modalOpen
? <Modal closeModal={this._closeModal.bind(this)} />
: ''}
</div>
);
}
}