I am using Launch Darkley for feature flagging in my ReactJS WebApp.
I am trying to hide the Radio Button below with the following code but it is not working as expected - is there something I am missing?
<RadioGroup className={styles.radioRoleContainer} aria-label="Select role for searching" name="roles" value={role} onChange={handleRoleChange}>
<FormControlLabel value={customer} control={<Radio id="Customer" color="default" />} label="As a Customer" />
{!flags.showEmployee && <FormControlLabel value={employee} control={<Radio id="Employee" color="default" />} label="As an Employee" />}
<FormControlLabel value={admin} control={<Radio id="Admin" color="default" />} label="As an Administrator" />
</RadioGroup>
I am trying to either show or hide the Employee Radio Button based on the Flag value in Launch Darkley
Related
I am trying to create multiple select input but had problem with the TextField because it is not accepting multiple props My TextField is shown in the code block.
<TextField
label={crmFieldTitleMap(value, t)}
size="small"
variant="outlined"
select
multiple
value={....}
onChange={....}
input={<OutlinedInput />}
renderValue={....}
MenuProps={MenuProps}
>
{value.options.length &&
value.options.map((item) => (
<MenuItem key={crmFieldTitleMap(item, t)} value={item.value}>
<Checkbox
checked={
crmPostData[value.value]
? crmPostData[value.value].includes(item.value)
: false
}
/>
<ListItemText primary={crmFieldTitleMap(item, t)} />
</MenuItem>
))}
</TextField>;
With TextField I can't select multiple items but label seems pretty nice
Then I found a solution to choose multiple select which I used and as shown in the code block.
<FormControl className="w-full ">
<InputLabel id="multiple_select_thingy">{titleMultiple(value, t)}</InputLabel>
<Select
labelId="multiple_select_thingy"
label={titleMultiple(value, t)}
size="small"
variant="outlined"
multiple
disabled={....}
value={....}
onChange={....}
input={<OutlinedInput />}
renderValue={....}
MenuProps={MenuProps}
>
{value.options.length &&
value.options.map((item) => (
<MenuItem key={crmFieldTitleMap(item, t)} value={item.value}>
<Checkbox
checked={
crmPostData[value.value]
? crmPostData[value.value].includes(item.value)
: false
}
/>
<ListItemText primary={crmFieldTitleMap(item, t)} />
</MenuItem>
))}
</Select>
</FormControl>;
With Select I can select multiple items perfectly but the label seems weird.
Also when there are no items selected input gets weird too
i have an array of generated radio buttons. when an element is clicked I need to get the checked id of the element & show the checked element as checked. following is my code. the way I have done it shows the label. but when it clicked it only gets the name of the clicked radio button.
<FormControl>
<RadioGroup name='cardsList' sx={{display: 'row',float:'right'}}
checked={this.state.cardNo}
value={this.state.cardNo} onChange={(e)=>this.checkCard(e)}>
<FormControlLabel value="0" control={<Radio />} name="0" label="Use Different Card"/>
{this.state.cardDetails.cardDetails.map((cards) => (
<FormControlLabel value={cards.cardId} label={`${cards.maskCardNo} ${cards.cardType}`}
control={<Radio />} name={cards.cardId} id={cards.cardId}/>
))}
</RadioGroup>
{this.state.cardNo === "0" ?
<FormControlLabel control={
<Switch
value="active"
checked={this.state.saveCard}
onChange={(e) =>this.saveCardYesNo(e)}
/>
} label="Save Card" />
: null
}
</FormControl>
checking function
checkCard(e){
console.log('checkid',Number(e.target.name))
this.setState({
cardNo: e.target.value
})
}
I am using react material ui library
https://material-ui.com/components/checkboxes/
I need to have form group with checkbox and input type search inside. So i use the two components
from this library
<FormControl id="inline-form-group">
<FormLabel component="legend">Choose Columns:</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleCheckboxesChange} name="gilad" />}
label="Gilad Gray"
/>
</FormGroup>
<FormGroup>
<TextField id="standard-search" label="Column value" type="search" />
</FormGroup>
</FormControl>
but now textfield is under the checkbox
I want to have them inline.
I can't find in their documentation option like this
In the label position of your FormControlLabel you could put in your TextField.
This would work if you don't need to have the Gilad Gray as your curretn label.
<FormControlLabel
control={<Checkbox checked={true} onChange={handleChange} name="jason" />}
label={<TextField />}
/>
```
I have a checkbox and want it to be checked and disabled when the value from api is true.
It is disabling the checkbox correctly but the box is not checked. What am I doing wrong?
When I remove the 'disabled' property the checkbox is checked.
<FormControlLabel
control={<Checkbox
checked={apiValues.isTrue}
onChange={handleFormChange}
name="isTrue"
disabled={apiValues.isTrue}
color="secondary"
/>}
label="My Value"
/>
api looks like:
{
isTrue: True
}
replace with
disabled={!apiValues.isTrue}
so it becomes
<FormControlLabel
control={<Checkbox
checked={apiValues.isTrue}
onChange={handleFormChange}
name="isTrue"
disabled={!apiValues.isTrue}
color="secondary"
/>}
label="My Value"
/>
Logical Not operator
I can't find a way to create a group of three small (19px high) labelled radio buttons in material-ui. I'm migrating a browser app from static HTML/JS into material-ui/react, and I need the group to stay the same size.
The button group I'm starting with has three small vertically aligned labelled radio buttons. Here's
a screenshot:
Here's the code for the best I've been able to do using the material-ui documentation:
<FormControl
margin="dense"
size="small"
>
<RadioGroup
size="small"
name="dataSource"
value={dataSource}
onChange={handleDataSourceChange}
>
<FormControlLabel
value="CaseCount"
control={
<Radio
className={classes.radio}
size="small"
/>
}
label="Cases"
/>
<FormControlLabel
value="DeathCount"
control={
<Radio
className={classes.radio}
size="small"
/>
}
label="Deaths"
/>
<FormControlLabel
value="HotSpots"
control={
<Radio
size="small"
/>
}
label="HotSpot warning"
/>
</RadioGroup>
</FormControl>
This results in an oversized group -- the button icons are too large, the text is too large, and each row is 38 pixels high (twice the 19 pixels of the original). Here's a screenshot of the material-ui counterpart:
I think I want the result to use a vanilla html input (with type of radio) instead of an svg icon, and a font with font-height of 13px. How do I do that in material-ui?
I know how to fix the padding-left so I'm not worried about that. How do I get rows that are 19px high instead of 38px?
Reason
If you inspect the Material radio button, we can see that the padding of the radio button is causing each row to have a height of 38px.
Code
Therefore, we can simply remove the vertical padding from all radio buttons with the following code (note that my code is slightly different than yours):
const useStyles = makeStyles({
// Applied to <Radio />
root: {
width: 19,
height: 19,
paddingTop: 0,
paddingBottom: 0,
},
// Applied to <FormControlLabel />
label: {
fontSize: 13
}
});
export default function RadioButtonsGroup() {
const [value, setValue] = React.useState("CaseCount");
const classes = useStyles();
const handleChange = (event) => {
setValue(event.target.value);
};
const customRadio = <Radio size="small" classes={{root: classes.root}} />;
return (
<FormControl component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
<FormControlLabel classes={{label: classes.label}} control={customRadio} value="CaseCount" label="Cases" />
<FormControlLabel classes={{label: classes.label}} control={customRadio} value="DeathCount" label="Deaths" />
<FormControlLabel
classes={{label: classes.label}}
control={customRadio}
value="HotSpots"
label="Hotspot Warning"
/>
</RadioGroup>
</FormControl>
);
}
Explanation
According to the Radio API documentation, we can apply custom styling to root of the radio button by overriding styles with classes using the class name of root. Therefore, we first define a style object called root in the makeStyles() function. Next, we apply the styling to the Radio component by adding the prop of classes={{root: classes.root}}:
<Radio size="small" classes={{root: classes.root}} />
Similarly, according to the FormControlLabel API documentation, we can apply custom styling to the text label using the label class name. Therefore, we first define a style object of label in the makeStyles() function. Next, we apply the styling to the FormControlLabel component by adding the prop of classes={{label: classes.label}}:
<FormControlLabel classes={{label: classes.label}} /* ... */ />