Skip to content

Instantly share code, notes, and snippets.

@RWOverdijk
Created February 28, 2018 18:29
Show Gist options
  • Save RWOverdijk/7e3df5a7ed0e154bc7026450fbd999eb to your computer and use it in GitHub Desktop.
Save RWOverdijk/7e3df5a7ed0e154bc7026450fbd999eb to your computer and use it in GitHub Desktop.
import React from 'react'
import DropdownAlert from 'react-native-dropdownalert'
import DropdownAlertReduxActions from '../Redux/DropdownAlertRedux'
import I18n from 'react-native-i18n'
import { Colors } from '../Themes'
import { connect } from 'react-redux'
class Dropdown extends React.Component {
dropdown: DropdownAlert
componentWillReceiveProps ({alert}) {
if (!alert) {
return
}
this.dropdown.alertWithType(alert.type, I18n.t(alert.title), I18n.t(alert.message))
}
alertClosed () {
this.props.clear()
}
render () {
const {alert} = this.props
return (
<DropdownAlert
warnColor={Colors.primaryYellow}
errorColor={Colors.primaryRed}
successColor={Colors.primaryGreen}
ref={ref => { this.dropdown = ref }}
closeInterval={(alert && alert.closeInterval) || 2500}
onClose={() => this.alertClosed()}
/>
)
}
}
const mapStateToProps = (state) => {
return {
alert: state.dropdownAlert.alert
}
}
const mapDispatchToProps = (dispatch) => {
return {
clear: () => dispatch(DropdownAlertReduxActions.clearAlert())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Dropdown)
import { createActions, createReducer } from 'reduxsauce'
import Immutable from 'seamless-immutable'
/* ------------- Types and Action Creators ------------- */
const {Types, Creators} = createActions({
alertError: ['title', 'message', 'closeInterval'],
alertInfo: ['title', 'message', 'closeInterval'],
alertWarn: ['title', 'message', 'closeInterval'],
alertSuccess: ['title', 'message', 'closeInterval'],
clearAlert: null
})
export const DropdownAlertTypes = Types
export default Creators
/* ------------- Initial State ------------- */
export const INITIAL_STATE = Immutable({alert: null})
export const log = (state, type, {title, message}) => Immutable({alert: {title, message, type}})
export const error = (state, action) => log(state, 'error', action)
export const info = (state, action) => log(state, 'info', action)
export const warn = (state, action) => log(state, 'warn', action)
export const success = (state, action) => log(state, 'success', action)
export const clear = () => INITIAL_STATE
/* ------------- Hookup Reducers To Types ------------- */
export const reducer = createReducer(INITIAL_STATE, {
[Types.ALERT_ERROR]: error,
[Types.ALERT_INFO]: info,
[Types.ALERT_WARN]: warn,
[Types.ALERT_SUCCESS]: success,
[Types.CLEAR_ALERT]: clear
})

In Containers/RootContainer.js add:

<Dropdown />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment