This is my JSX:
<FormControl>
<ButtonGroup className="groupedHorizontal">
<InputLabel htmlFor="category">Category:</InputLabel>
<Select onChange={(event) => that.handleCategoryChange(event)} native={true} id="category">
<option></option>
{catOptions}
</Select>
<BrandsPopup />
<Button onClick={(e) => that.removeCategory(e)}>Del</Button>
</ButtonGroup>
</FormControl>
The BrandsPopup is a component which render a material-ui Button within <React.Fragment>. The select and the "Del" button are fine bordered as ButtonGroup elements. The problem is, BrandsPopup is not bordered and does not appear as part of the group. How to apply ButtonGroup styles on the button, rendered from the child component?
ButtonGroup uses cloneElement and thereby assigns its own props to its children. You should be able to log them to the console inside BrandsPopup and then just need to assign them to your button component. It is, of course, possible that this conflicts with how you are using BrandsPopup elsewhere in your app.
And if BrandsPopup indeed only contains one Button component you don't need the Fragment wrapper.
<ButtonGroup className="groupedHorizontal">
<BrandsPopup />
</ButtonGroup>
const BrandsPopup = (props) => (
<React.Fragment>
<Button
// these come from ButtonGroup 🧙
className={props.className}
color={props.color}
variant={props.variant}
>
click me
</Button>
</React.Fragment>
);
Related
I have the following implementation of MUI's TimePicker:
<TimePicker
value={time}
inputFormat="HH:mm"
views={["hours", "minutes"]}
onChange={(newValue) => {
newValue && setResultTime(newValue);
}}
renderInput={(props) => {
console.log(props);
return (
<InputWrapper>
<Input ref={props.inputRef} tw="w-16" />
<FontAwesomeIcon
icon={faAngleDown}
tw="text-company-light-1 opacity-80 text-sm px-2 cursor-pointer"
/>
</InputWrapper>
);
}}
/>
I am unable to use a controlled version of this by specifying isOpen because the outside click handler appears to fire when I click on the component and that causes it to close. That is, wrapping it in:
<OutsideClickHandler onOutsideClick={() => setTimePickerOpen(false)}>
...
</OutsideClickHandler>
causes it to close, even when clicking on the component itself.
The props to renderInput do not appear to contain an onClick and so I have no idea how to cause my component to respond to clicks. How can this be achieved?
I currently have a component that takes in some data(names), loops through the names and returns a ButtonGroup with a checkbox next to each one. The problems is that if I pass in more names, it makes the form component that it's in wider since it keeps rendering the check boxes one after the other one. So I was wondering how I can make that ButtonGroup a fixed width so it doesn't change the forms width and renders the check boxes on a new row ones it reaches a width.
export default function SharedCheckboxGroup(props) {
return (
<ButtonGroup>
{props.names.map((item) => {
return (
<React.Fragment>
<label>
<input
type="checkbox"
name={item}
value={item}
/>
{item}
</label>
<br />
</React.Fragment>
);
})}
</ButtonGroup>
);
Try out the following inline style :
<ButtonGroup style={{display:'flex', flexWrap:'wrap'}}>
I need my tabs to have a tab consisting of a switch but when I implemented it as it was said, I am not able to see it there.
Maybe it's hidden underneath but I tried changing its z-index.
Pass your Switch component as the label prop.
...
<Tab
component="span"
label={
<Switch
checked={isSwitchOn}
onChange={(e) => setSwitch(!isSwitchOn)}
name="toggleType"
/>
}
/>
Tab component does not display children props inside the MuiTab-wrapper element.
Maybe you can use icon props.
<Tab
component="span"
icon={
<Switch
checked={isSwitchOn}
onChange={(e) => setSwitch(!isSwitchOn)}
name="toggleType"
/>
}
/>
I was creating React project and here is the component that I want to ensure that is put inside a string.
<InfoIcon
tooltip={`${hints.todoHint} <br/> ${hints.inProgressHint} <br/> ${hints.doneHint}`}
/>
but it is not working since br/ is literally rendered like br/
One option is to convert tooltip in to three props and add <br /> in the InfoIcon component. For example InfoIcon component can be
const InfoIcon = ({ todoHint, inProgressHint, doneHint }) => (
<div>
{todoHint}
<br />
{inProgressHint}
<br />
{doneHint}
</div>
);
// Using Info Icon
<InfoIcon todoHint={todoHint} inProgressHint={inProgressHint} doneHint={doneHint} />
Other option is to send tooltip as follows
const tooltip = (
<div>
{hints.todoHint}
<br />
{hints.inProgressHint}
<br />
{hints.doneHint}
</div>
)
<InfoIcon tooltip={tooltip} />
Well, material-ui tooltip allows you to use ANY kind of HTML content. => refer to official document customized tooltiops
This means you can use normal <div> and <Typography />, and any other styled elements to handle multi-line content.
The only thing you need to do is pass the content to props title => refer to document of tooltip api
import {
Tooltip,
Typography
} from '#material-ui/core';
<Tooltip
title={ // customized content here via props `title`
<>
<div>Seperate line</div>
<Typography>Seperate line</Typography>
</>
}
>
<IconButton aria-label="delete">
<InfoIcon /> // You can use your original icon here
</IconButton>
</Tooltip>
Watch it online: https://stackblitz.com/run
You can find related question here: How to make line break for ToolTip titles in Material-UI
I have been using a Premade React-Bootstrap Typeahead search-bar found here
I am having trouble accessing the child elements from the dropdown. I want to be able to have an Onclick function for the dropdown items, but it doesn't seem like I have access to the children.
Below is the code I have currently, where I use typeahead
<div className="search-bar">
<Typeahead
id="sample"
options= {cities.map((city) => (city))}
labelKey="name"
placeholder="Enter a city"
/>
</div>
How do I get an onclick for these element cities listed?
You can customize menu rendering and behavior by using the renderMenu prop:
<Typeahead
options={options}
renderMenu={(results, menuProps) => (
<Menu {...menuProps}>
{results.map((result, index) => (
<MenuItem
onClick={() => console.log('click!')}
option={result}
position={index}>
{result.label}
</MenuItem>
))}
</Menu>
)}
/>
With the menu items exposed, you're free to add your own onClick handler to each item. Here's a working example.