How can I replace the circle checkbox of a DetailsList in office-ui-fabric-react with a normal square CheckBox component? I see onRenderCheckbox so I try something like this:
onRenderCheckbox={(props) => (<Checkbox checked={props.checked} />)}
or
onRenderCheckbox={(props) => (<Checkbox {...props} />)}
I can see the square checkbox but I can't select it.
What it the proper way to do this?
Thanks in advance...
When you render the Checkbox component, it handles the click itself (and thus it won't percolate up to the row so it can toggle selection accordingly), so you need to prevent it with the pointer-events: none style.
onRenderCheckbox(props) {
return (
<div style={{ pointerEvents: 'none' }}>
<Checkbox checked={props.checked} />
</div>
);
}
Check it out here: https://codepen.io/anon/pen/zQXEPr
Related
When I select one checkbox, all checkboxes in the app get selected. How do I stop this?
I am using this checkbox https://github.com/react-native-checkbox/react-native-checkbox
const [toggleCheckBox, setToggleCheckBox] = useState(false);
return (
<>
<Provider>
{userProducts.length > 0 ? (
userProducts.map(userProduct => (
<ListItem
title={
userProduct.product + ' val: ' + userProduct.val
}
trailing={
<CheckBox
disabled={false}
value={toggleCheckBox}
onValueChange={newValue => setToggleCheckBox(newValue)}
/>
}
/>
))
) : (
<Text>Nothing in your list yet</Text>
)}
</Provider>
</>
);
you should create your own checkbox component and set the state inside it, so you can pass the state from and to it from the parent component
Because all of your checkbox are using 1 value toggleCheckBox to check state. The easiest way is create child component wrap checkbox inside, and manage state from it
<CheckBox
disabled={false}
//on Value you can try
value={!toggleCheckBox}
onValueChange={newValue => setToggleCheckBox(newValue)}
/>
This is obvious that you are mapping your checkboxes. While you are maintaining state of check or uncheck in just one toggleCheckBox state. So when this is true, all are checked and when it's false, all are unchecked. Here is an existing answer to your question. In case of any confusion or ambiguity, please feel free to ask in the comments section below.
I want to test a checkbox that has no label. The point is that there are other checkboxes as well so I cant use getByRole.
I have tried to use data-testid, but apparently, it's not working.
How am I supposed to check if that checkbox is checked(toBeChecked())?
<Checkbox
data-testid={item?.id}
key={item?.id}
id={item?.id.toString()}
color="secondary"
checked={item?.checked}
disabled={hasAll}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (item) {
item.checked = e.target.checked;
setFinalData(updateItemInArray(finalData, {
item,
index,
}));
}
}}
/>
The proper way to do this would be to add an aria-label to your checkbox, so it's announced correctly by screen readers:
<Checkbox inputProps={{ 'aria-label': 'Select row 1' }} />
This way, you'll be able to select it in your tests using getByLabelText.
If you want to use data-testid, you can place it on the checkbox similarly to aria-label:
<Checkbox inputProps={{ 'data-testid': 'checkbox1' }} />
Note that if you're using Typescript, you'd have to cast the inputProps to React.InputHTMLAttributes<HTMLInputElement> as data attributes are not a part of InputHTMLAttributes:
<Checkbox inputProps={{ 'data-testid': 'checkbox1' } as React.InputHTMLAttributes<HTMLInputElement>} />
I have this code in my React Native app that renders a list of types. Selected and not selected types have different backgrounds. Is it okay to make accessibility label text conditional?
<View style={styles.typesList}>
{types.map(type => {
return (
<TouchableOpacity
key={type}
style={[
styles.type,
{
backgroundColor: filterTypes.includes(type)
? Colors.white
: Colors.lightYellow
}
]}
onPress={() => {
handleFilterTypesChange(type);
}}
testID='type'
accessibilityLabel={`${
filterTypes.includes(type) ? 'Unselect' : 'Select'
} ${type} filter`}
>
<Text>{type}</Text>
</TouchableOpacity>
);
})}
</View>
The screen readers by default read-out if a checkbox is selected or not. So no need to put conditional text to just read out it. If you have multiple select boxes it is advised to use fieldsel and legend which will give details to visually challenged persons.
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
</fieldset>
The contains the group of checkboxes, and the labels the group. Screen readers may repeat the legend for each control in the group, so the legend text should be brief and descriptive.
The react-native-paper docs suggest you can set the color of a disabled button using a theme, but this code does not work:
export const buttonTheme = {
colors: {
primary: COL_BASE_YELLOW,
disabled: COL_DARK_HIGHLIGHT,
},
}
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={() => handleSubmitPhoneNumber(phoneNumber)}
theme={buttonTheme}
disabled={phoneNumber.length < 5 ? true : false}>
Continue
</Button>
The primary color works however.
How do I change the color of the button when it is disabled?
Don't use disabled props, it will always make your button grey, if you want to use your desired colour for disabled mode, do it like this :
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
Continue
</Button>
From this Github issue:
The text if the contained button depends on the background color of
the button, which is automatically determined based on of the
background color is light it dark. Wherever theme is dark or not
doesn't affect it.
This is the desired behavior. We don't want to show white text on a
light background because you have a dark theme, otherwise the text
won't have enough contrast and will be illegible.
Changing the theme to dark changes the disabled button color, as I tested. Apart from this, I don't think its possible if you use react-native-paper. The author has decided to automatically set the color & background color of the button based on something, but his language is unclear.
However, you can give a labelStyle prop the button directly, and you could have a conditional in that style.
<Button labelStyle={{ color: phoneNumber.length < 5 ? 'red' : 'green' }}>
or,
[buttonDisabled, setButtonDisabled] = useState(false); // put this outside the render function.
<Button disabled={disabled} labelStyle={{ color: disabled ? 'red' : 'green' }}>
I'm may be late but here's my solution:
<Button
id="save-phonenumber"
color="darkColor">
onClick={doSomething}
disabled={phoneNumber.length < 5 ? true : false}>
<Button/>
In you Css file you can add
Button#save-phonenumber[disabled] {
background: "fadedColor"
}
Benefit of using this approach is that you don't additionally need to disable the clicking effect when the button is disabled.
If you're caring about light and dark themes at the moment, then you can achieve your goal like this -
I would suggest creating your own Button Component on the top of Paper Button.
// extending default Paper Button Component
<PaperButton style={[ props.disabled && { backgroundColor: 'cccccc' } ]}>
{children}
</PaperButton>
// Using component...
<MyButton disabled={disabled}>
Click Me!
</MyButton>
I am using react-native-elements ButtonGroup with 3 buttons. I need to disable all buttons when the application starts, when conditions are met, I need to enable specific buttons.
Ive disabled all buttons using the false flag but I'm not sure how to enable specific buttons with a conditional statement and state.
Any help would be appreciated.
<ButtonGroup
onPress={this.updateIndex}
selectedIndex={selectedIndex}
buttons={buttons}
containerStyle={{ height: 100 }}
//disabled={[0, 1, 2]}
disabled={true}
/>
ADD_DETAILS(index) {
if (index === 0) {
console.log("clicked 0");
this.requestDetails();
}
}
You can store your disabled buttons in your state
for example:
this.state = {
selectedIndex: 2,
disabled:[], // you store your disabled buttons here
}
<ButtonGroup
onPress={this.updateIndex}
selectedIndex={selectedIndex}
buttons={buttons}
containerStyle={{height: 100}}
disabled={this.state.disabled}
/>
if you have ButtonGroup like this, you can disable buttons (for example first and third on button click ) like this:
<Button
title={"disable first and third buttons"}
onPress={()=>{
this.setState({disabled:[0,2]}); // here you update which buttons you want to disable
}}/>
As said by the docs, disable:
Controls if buttons are disabled. Setting true makes all of them disabled, while using an array only makes those indices disabled.
So creating a stucture like:
disabled={[1,2]}
would enable only the first button
To update it you should use a state variable and update it based off what you need, for example:
this.state={
disabled=[0]
}
then the disabled prop would look like:
disabled={this.state.disabled}
And in your onPress function you should remove/add your buttons they way you need:
onPress={this.buttonGroupOnPress}
This will send to the function the index of the clicked button as a parameter:
buttonGroupOnPress = (index) =>{
//your logic
this.setState({ disabled: /* the new array of disabled buttons indexes */ })
}
Source: https://react-native-training.github.io/react-native-elements/docs/button_group.html#disabled