Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked.
Alternatively, is there any styling that needs to be done for selection?
You can use DefaultButton checked property for that scenario and control it with onClick event:
const [isButtonChecked, setIsButtonChecked] = React.useState(false);
<DefaultButton
checked={isButtonChecked}
onClick={() => {
setIsButtonChecked(!isButtonChecked);
}}
styles={{
rootChecked: {
backgroundColor: '#f00',
color: '#fff',
}
}}
>
Default Button
</DefaultButton>
Use styles property to modify button styles when button state is checked: rootChecked, rootCheckedHovered etc.
Codepen example.
Related
I'm using Fluent UI's TeachingBubble component. I want it to have one button, which should be centered. How can that be done? I'm unable to move it from the bottom right corner.
Current code:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
>
This is some content.
</TeachingBubble>
This outputs:
What should be added to this code so that the primary button is centered (at the red cross I marked)?
Button is inside footer part of TeachingBubble, so the style of footer should be changed:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
styles={{
footer: {
display: "flex",
justifyContent: "center",
},
}}
>
Some text
</TeachingBubble>
That renders as:
in React-Admin I want to limit the width of the columns that show edit, show buttons in the datagrid
I know I can use styles to set the width of other cells like TextFields, but cant find a way to do this with buttons
enter image description here
Inside Datagrid you can use the headerClassName cellClassName props to style both the cell in the header row and in body rows as described in the docs under section Datagrid/CSS-Api
<ShowButton
headerClassName={classes.hiddenOnSmallScreens}
cellClassName={classes.hiddenOnSmallScreens}
/>
*EDIT
Obviously this approach doesn't work when using typescript, probably a bug - you can work around it in this way:
const usePostListActionToolbarStyles = makeStyles({
toolbar: {
alignItems: "center",
display: "flex",
marginTop: -1,
marginBottom: -1
}
});
const PostListActionToolbar = ({ children, ...props }) => {
const classes = usePostListActionToolbarStyles();
return (
<div className={classes.toolbar}>
{Children.map(children, (button) => cloneElement(button, props))}
</div>
);
};
and then inside your Datagrid:
<Datagrid>
//...fields
<PostListActionToolbar>
<ShowButton/>
<EditButton/>
</PostListActionToolbar>
</Datagrid>
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
import React from 'react';
import {
View,
Text,
Button,
TextInput,
StyleSheet
} from 'react-native';
const username = null;
const SetupForm = ({onSubmit}) => {
this.handleUsernameInput = (text) => {
username = text;
}
this.handleSetupSubmit = (event) => {
onSubmit(event, username);
}
this.handleSkipSubmit = (event) => {
onSubmit(event, false);
}
return (
<View>
<Text>Enter username:</Text>
<TextInput
placeholder="Username"
maxLength={20}
onSubmitEditing={this.handleSetupSubmit}
onChangeText={this.handleUsernameInput}
style={{ marginLeft: 20, marginRight: 20 }}
/>
<View>
<Button
title="Select"
onPress={this.handleSetupSubmit}
color="#34A853"
disabled={username === null}
/>
<Button
title="Maybe Later"
onPress={this.handleSkipSubmit}
color="red"
/>
</View>
</View>
);
}
export default SetupForm;
I have an issue with this Setup Form. it features a username text box I am setting to the value the user enters. onChangeText={this.handleUsernameInput}
for the select button I have set disabled when username === null however this never becomes false when entering text into the text box.
the text box is set to set the username when typing and I can see in the console its working correctly when I press the submit via the keyboard button with the redux action
{type: "SETUP.REQUEST", username: "aaaaaaa"}
is there something I am doing wrong here that the button is not becoming enabled when the text is getting set by the this.handleUsernameInput method?
example gif:
http://i.imgur.com/OuMkxHA.gifv
I have to click the skip button after typing in a username to make the button enable (go green), I want this to enable whilst typing
Like mentioned in the Garrett's comment the component doesn't re-render because there's no prop or state change when you change the text input. You should change the functional component to a ES6 class and save the username into the state. There's an simple example of this in the TextInput's documention
I'm not sure about your skill level but React's documentation about state and lifecycle is a good read if you are new to React https://facebook.github.io/react/docs/state-and-lifecycle.html