Skip to content

Commit 831366e

Browse files
jacklam718jacklam718
committed
add disable button
1 parent cce116b commit 831366e

7 files changed

Lines changed: 216 additions & 60 deletions

File tree

‎ButtonExample/EXNavigator.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Navigator } from 'react-native-deprecated-custom-components';
44

55
import ButtonExplorer from './src/ButtonExplorer';
66
import OneStateButtons from './src/containers/OneStateButtons';
7+
import DisabledButtons from './src/containers/DisabledButtons';
78
import MultipleStatesButtons from './src/containers/MultipleStatesButtons';
89
import ProgressButtons from './src/containers/ProgressButtons';
910
import SpinnerButtons from './src/containers/SpinnerButtons';
@@ -18,6 +19,9 @@ export default class EXNavigator extends Component {
1819
if (route.name === 'oneStateButtons') {
1920
return <OneStateButtons navigator={navigator} />;
2021
}
22+
if (route.name === 'disabledButtons') {
23+
return <DisabledButtons navigator={navigator} />;
24+
}
2125
if (route.name === 'multipleStatesButtons') {
2226
return <MultipleStatesButtons navigator={navigator} />;
2327
}

‎ButtonExample/ios/ButtonExample.xcodeproj/project.pbxproj‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
};
66
objectVersion = 46;
77
objects = {
8-
98
/* Begin PBXBuildFile section */
109
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
1110
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };

‎ButtonExample/src/ButtonExplorer.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,17 @@ export default function ButtonExplorer(props) {
2121
}}
2222
/>
2323

24+
<ButtonComponent
25+
style={styles.buttonStyle}
26+
text="Disabled Buttons"
27+
onPress={() => {
28+
props.navigator.push({
29+
title: 'Disabled Buttons',
30+
name: 'disabledButtons',
31+
});
32+
}}
33+
/>
34+
2435
<ButtonComponent
2536
style={styles.buttonStyle}
2637
text="Multiple States Buttons"

‎ButtonExample/src/containers/DisabledButtons.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { Component } from 'react';
2+
import { View, ScrollView, StyleSheet } from 'react-native';
3+
import ButtonComponent from 'react-native-button-component';
4+
import GroupContainer from '../components/GroupContainer';
5+
6+
export default class DisabledButtons extends Component {
7+
render() {
8+
return (
9+
<ScrollView style={styles.scrollView}>
10+
<View style={styles.container}>
11+
<GroupContainer
12+
groupTitle="Button"
13+
>
14+
<ButtonComponent
15+
disabled
16+
backgroundColors={['#212122', '#414141']}
17+
text={'Button'.toUpperCase()}
18+
onPress={() => {
19+
20+
}}
21+
/>
22+
</GroupContainer>
23+
24+
<GroupContainer
25+
groupTitle="Icon Button"
26+
>
27+
<ButtonComponent
28+
disabled
29+
image={require('../img/settings.png')}
30+
text={'Icon Buttons'.toUpperCase()}
31+
onPress={() => {
32+
33+
}}
34+
/>
35+
</GroupContainer>
36+
</View>
37+
</ScrollView>
38+
);
39+
}
40+
}
41+
42+
const styles = StyleSheet.create({
43+
scrollView: {
44+
flex: 1,
45+
backgroundColor: '#ffffff',
46+
},
47+
container: {
48+
marginTop: 64,
49+
alignItems: 'center',
50+
marginLeft: 10,
51+
marginRight: 10,
52+
},
53+
});

‎dist/ButtonComponent.js‎

Lines changed: 75 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,33 +12,69 @@ type:_propTypes2.default.string,
1212
shape:_propTypes2.default.string,
1313
gradientStart:_propTypes2.default.object,
1414
gradientEnd:_propTypes2.default.object,
15+
disabledGradientStart:_propTypes2.default.object,
16+
disabledGradientEnd:_propTypes2.default.object,
17+
disabledOpacity:_propTypes2.default.number,
18+
disabled:_propTypes2.default.bool,
1519
backgroundColors:_propTypes2.default.array,
16-
buttonStyle:_propTypes2.default.oneOfType([_propTypes2.default.number,_propTypes2.default.object,_propTypes2.default.array]),
17-
style:_propTypes2.default.oneOfType([_propTypes2.default.number,_propTypes2.default.object,_propTypes2.default.array]),
20+
buttonStyle:_propTypes2.default.any,
21+
style:_propTypes2.default.any,
1822
progressSize:_propTypes2.default.number,
1923
onPress:_propTypes2.default.func});
2024

2125

26+
2227
var defaultProps={
2328
type:'primary',
2429
shape:'round',
2530
backgroundColors:['#4DC7A4','#66D37A'],
2631
gradientStart:{x:0.5,y:1},
2732
gradientEnd:{x:1,y:1},
33+
disabledGradientStart:{x:0,y:0},
34+
disabledGradientEnd:{x:0,y:0},
35+
disabledOpacity:0.5,
36+
disabled:false,
2837
width:null,
2938
height:50};var
3039

3140

32-
ButtonComponent=function(_Component){_inherits(ButtonComponent,_Component);function ButtonComponent(){_classCallCheck(this,ButtonComponent);return _possibleConstructorReturn(this,(ButtonComponent.__proto__||Object.getPrototypeOf(ButtonComponent)).apply(this,arguments));}_createClass(ButtonComponent,[{key:'shouldComponentUpdate',value:function shouldComponentUpdate(
41+
ButtonComponent=function(_Component){_inherits(ButtonComponent,_Component);
42+
43+
44+
45+
function ButtonComponent(props){_classCallCheck(this,ButtonComponent);var _this=_possibleConstructorReturn(this,(ButtonComponent.__proto__||Object.getPrototypeOf(ButtonComponent)).call(this,
46+
props));
3347

48+
_this.state={
49+
currentButton:_this.getCurrentButton(props)};return _this;
3450

51+
}_createClass(ButtonComponent,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(
52+
53+
nextProps){
54+
if(this.props.buttonState!==nextProps.buttonState){
55+
this.setState({
56+
currentButton:this.getCurrentButton(nextProps)});
57+
58+
}
59+
}},{key:'shouldComponentUpdate',value:function shouldComponentUpdate(
3560

3661
nextProps){
3762
if(this.props.image!==nextProps.image)return true;
3863
if(this.props.text!==nextProps.text)return true;
3964
if(this.props.states&&this.props.buttonState!==nextProps.buttonState)return true;
4065
if(this.props.states&&this.props.states[this.props.buttonState].progressFill)return true;
4166
return false;
67+
}},{key:'getCurrentButton',value:function getCurrentButton(
68+
69+
props){
70+
return props.buttonState&&props.states?
71+
props.states[props.buttonState]:
72+
props;
73+
}},{key:'getProp',value:function getProp(
74+
75+
propKey){var
76+
currentButton=this.state.currentButton;
77+
return currentButton[propKey]||this.props[propKey];
4278
}},{key:'renderButton',value:function renderButton(_ref)
4379

4480
{var _ref$textStyle=_ref.textStyle,textStyle=_ref$textStyle===undefined?styles.text:_ref$textStyle,_ref$imageStyle=_ref.imageStyle,imageStyle=_ref$imageStyle===undefined?styles.image:_ref$imageStyle;
@@ -69,7 +105,7 @@ progressWidth:this.props.progressWidth,
69105
progressTintColor:this.props.progressTintColor,
70106
progressBackgroundColor:this.props.progressBackgroundColor,
71107
progressStyle:this.props.progressStyle,
72-
textInsideProgress:this.props.textInsideProgress,__source:{fileName:_jsxFileName,lineNumber:53}});
108+
textInsideProgress:this.props.textInsideProgress,__source:{fileName:_jsxFileName,lineNumber:89}});
73109

74110

75111
}else{
@@ -78,7 +114,7 @@ _react2.default.createElement(_Button2.default,{
78114
textStyle:this.props.textStyle||textStyle,
79115
imageStyle:this.props.imageStyle||imageStyle,
80116
text:this.props.text,
81-
image:this.props.image,__source:{fileName:_jsxFileName,lineNumber:77}});
117+
image:this.props.image,__source:{fileName:_jsxFileName,lineNumber:113}});
82118

83119

84120
}
@@ -87,46 +123,45 @@ return button;
87123
}},{key:'render',value:function render()
88124

89125
{
90-
var content=void 0;
91-
var shape=void 0;
92-
93-
var currentButtonState=this.props.buttonState&&this.props.states?
94-
this.props.states[this.props.buttonState]:
95-
this.props;
96-
var gradientStart=currentButtonState.gradientStart?
97-
currentButtonState.gradientStart:
98-
this.props.gradientStart;
99-
var gradientEnd=currentButtonState.gradientEnd?
100-
currentButtonState.gradientEnd:
101-
this.props.gradientEnd;
102-
var backgroundColors=currentButtonState.backgroundColors||this.props.backgroundColors;
103-
var type=currentButtonState.type?currentButtonState.type:this.props.type;
104-
105-
var buttonHeight=currentButtonState.height?currentButtonState.height:this.props.height;
106-
var buttonWidth=currentButtonState.width?currentButtonState.width:this.props.width;
107-
108-
if(this.props.shape==='round'||this.props.shape==='circle'){
109-
shape={
126+
var style=this.getProp('style');
127+
var gradientStart=this.getProp('gradientStart');
128+
var gradientEnd=this.getProp('gradientEnd');
129+
var disabledGradientStart=this.getProp('disabledGradientStart');
130+
var disabledGradientEnd=this.getProp('disabledGradientEnd');
131+
var disabledOpacity=this.getProp('disabledOpacity');
132+
var disabled=this.getProp('disabled');
133+
var backgroundColors=this.getProp('backgroundColors');
134+
var type=this.getProp('type');
135+
var buttonHeight=this.getProp('height');
136+
var buttonWidth=this.getProp('width');
137+
var buttonStyle=this.getProp('buttonStyle');
138+
var shape=this.getProp('shape');
139+
var onPress=this.getProp('onPress');
140+
141+
var shapeStyle=void 0;
142+
if(['round','circle'].includes(shape)){
143+
shapeStyle={
110144
borderRadius:buttonHeight/2};
111145

112146
}
113147

148+
var content=void 0;
114149
if(type==='primary'){
115150
content=
116151
_react2.default.createElement(_reactNativeLinearGradient2.default,{
117-
start:gradientStart,
118-
end:gradientEnd,
152+
start:disabled?disabledGradientStart:gradientStart,
153+
end:disabled?disabledGradientEnd:gradientEnd,
119154
colors:backgroundColors,
120155
collapsable:false,
121-
style:[styles.button,shape,currentButtonState.buttonStyle],__source:{fileName:_jsxFileName,lineNumber:116}},
156+
style:[styles.button,shapeStyle,buttonStyle],__source:{fileName:_jsxFileName,lineNumber:151}},
122157

123158
this.renderButton({textStyle:styles.text}));
124159

125160

126161
}else{
127162
var border=type==='border'&&styles.border;
128163
content=
129-
_react2.default.createElement(_reactNative.View,{style:[styles.button,border,shape,currentButtonState.buttonStyle],__source:{fileName:_jsxFileName,lineNumber:129}},
164+
_react2.default.createElement(_reactNative.View,{style:[styles.button,border,shapeStyle,buttonStyle],__source:{fileName:_jsxFileName,lineNumber:164}},
130165
this.renderButton({textStyle:styles.secondaryText}));
131166

132167

@@ -135,9 +170,18 @@ this.renderButton({textStyle:styles.secondaryText}));
135170
return(
136171
_react2.default.createElement(_reactNative.TouchableOpacity,{
137172
accessibilityTraits:'button',
138-
onPress:currentButtonState.onPress,
173+
disabled:disabled,
174+
onPress:onPress,
139175
activeOpacity:0.9,
140-
style:[styles.container,{width:buttonWidth,height:buttonHeight},this.props.style],__source:{fileName:_jsxFileName,lineNumber:136}},
176+
style:[
177+
styles.container,
178+
{
179+
width:buttonWidth,
180+
height:buttonHeight,
181+
opacity:disabled?disabledOpacity:1},
182+
183+
style],__source:{fileName:_jsxFileName,lineNumber:171}},
184+
141185

142186
content));
143187

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@
5858
"jest-react-native": "^18.0.0",
5959
"react": "16.0.0-alpha.12",
6060
"react-native": "0.47.1",
61-
"react-test-renderer": "16.0.0-alpha.12"
61+
"react-test-renderer": "16.0.0-alpha.12",
62+
"rimraf": "^2.6.1"
6263
},
6364
"jest": {
6465
"preset": "jest-react-native",

0 commit comments

Comments
 (0)