toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Action button (#324)

Browse source
This commit is contained in:
Chris Duarte 2017-03-06 06:50:33 -08:00 committed by Harrison Healey
parent d001e1d24f
commit c01035ac38
2 changed files with 33 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/scenes/create_channel/create_channel_button.js → app/components/action_button.js
View file

@ -15,51 +15,58 @@ import {getTheme} from 'service/selectors/entities/preferences';
import EventEmitter from 'service/utils/event_emitter';
import {changeOpacity} from 'app/utils/theme';
class CreateChannelButton extends PureComponent {
class ActionButton extends PureComponent {
static propTypes = {
actionEventName: PropTypes.string.isRequired,
emitter: PropTypes.func.isRequired,
enabled: PropTypes.bool,
enableEventName: PropTypes.string,
labelDefaultMessage: PropTypes.string.isRequired,
labelId: PropTypes.string.isRequired,
loadingEventName: PropTypes.string.isRequired,
theme: PropTypes.object
};
static defaultProps = {
theme: {}
theme: {},
enabled: true
};
constructor(props) {
super(props);
this.state = {
enabled: false,
enabled: props.enabled,
loading: false
};
}
componentWillMount() {
EventEmitter.on('can_create_channel', this.onCanCreate);
EventEmitter.on('creating_channel', this.onLoading);
EventEmitter.on(this.props.enableEventName, this.handleEnableEvent);
EventEmitter.on(this.props.loadingEventName, this.handleLoadingEvent);
}
componentWillUnmount() {
EventEmitter.off('can_create_channel', this.onCanCreate);
EventEmitter.off('creating_channel', this.onLoading);
EventEmitter.off(this.props.enableEventName, this.handleEnableEvent);
EventEmitter.off(this.props.loadingEventName, this.handleLoadingEvent);
}
onCanCreate = (enabled) => {
handleEnableEvent = (enabled) => {
this.setState({enabled});
};
onLoading = (loading) => {
handleLoadingEvent = (loading) => {
this.setState({loading});
};
onPress = () => {
if (this.state.enabled) {
this.props.emitter('create_channel');
this.props.emitter(this.props.actionEventName);
}
};
render() {
const {theme} = this.props;
const {labelDefaultMessage, labelId, theme} = this.props;
const {enabled, loading} = this.state;
let color = changeOpacity(theme.sidebarHeaderTextColor, 0.4);
if (enabled) {
@ -88,8 +95,8 @@ class CreateChannelButton extends PureComponent {
style={{paddingHorizontal: 15}}
>
<FormattedText
id='mobile.create_channel'
defaultMessage='Create'
id={labelId}
defaultMessage={labelDefaultMessage}
style={{color}}
/>
</TouchableOpacity>
@ -104,4 +111,4 @@ function mapStateToProps(state) {
};
}
export default connect(mapStateToProps)(CreateChannelButton);
export default connect(mapStateToProps)(ActionButton);

14
app/scenes/create_channel/create_channel.js
View file

@ -23,7 +23,7 @@ import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import {Constants, RequestStatus} from 'service/constants';
import EventEmitter from 'service/utils/event_emitter';
import CreateChannelButton from './create_channel_button';
import ActionButton from 'app/components/action_button';
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return StyleSheet.create({
@ -120,7 +120,17 @@ class CreateChannel extends PureComponent {
);
},
renderRightComponent: (props, emitter) => {
return <CreateChannelButton emitter={emitter}/>;
return (
<ActionButton
actionEventName='create_channel'
emitter={emitter}
enabled={false}
enableEventName='can_create_channel'
labelDefaultMessage='Create'
labelId='mobile.create_channel'
loadingEventName='creating_channel'
/>
);
}
};