feat(Flash): Add remove logic
This commit is contained in:
@ -2,19 +2,23 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { CloseButton } from 'react-bootstrap';
|
import { CloseButton } from 'react-bootstrap';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createSelector } from 'reselect';
|
|
||||||
|
|
||||||
import ns from './ns.json';
|
import ns from './ns.json';
|
||||||
import { alertTypes, latestMessageSelector } from './redux';
|
import {
|
||||||
|
alertTypes,
|
||||||
|
latestMessageSelector,
|
||||||
|
clickOnClose
|
||||||
|
} from './redux';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
alertType: PropTypes.oneOf(Object.keys(alertTypes)),
|
alertType: PropTypes.oneOf(Object.keys(alertTypes)),
|
||||||
|
clickOnClose: PropTypes.func.isRequired,
|
||||||
message: PropTypes.string
|
message: PropTypes.string
|
||||||
};
|
};
|
||||||
const mapStateToProps = latestMessageSelector;
|
const mapStateToProps = latestMessageSelector;
|
||||||
const mapDispatchToProps = null;
|
const mapDispatchToProps = { clickOnClose };
|
||||||
|
|
||||||
export function Flash({ alertType, message }) {
|
export function Flash({ alertType, clickOnClose, message }) {
|
||||||
if (!message) {
|
if (!message) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -24,7 +28,7 @@ export function Flash({ alertType, message }) {
|
|||||||
<div>
|
<div>
|
||||||
{ message }
|
{ message }
|
||||||
</div>
|
</div>
|
||||||
<CloseButton />
|
<CloseButton onClick={ clickOnClose }/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -1,8 +1,19 @@
|
|||||||
import { composeReducers } from 'berkeleys-redux-utils';
|
|
||||||
import _ from 'lodash/fp';
|
import _ from 'lodash/fp';
|
||||||
|
import {
|
||||||
|
createTypes,
|
||||||
|
createAction,
|
||||||
|
composeReducers,
|
||||||
|
handleActions
|
||||||
|
} from 'berkeleys-redux-utils';
|
||||||
|
|
||||||
import ns from '../ns.json';
|
import ns from '../ns.json';
|
||||||
|
|
||||||
|
export const types = createTypes([
|
||||||
|
'clickOnClose'
|
||||||
|
], ns);
|
||||||
|
|
||||||
|
export const clickOnClose = createAction(types.clickOnClose, _.noop);
|
||||||
|
|
||||||
export const alertTypes = _.keyBy(_.identity)([
|
export const alertTypes = _.keyBy(_.identity)([
|
||||||
'success',
|
'success',
|
||||||
'info',
|
'info',
|
||||||
@ -30,11 +41,20 @@ export const latestMessageSelector = _.flow(
|
|||||||
getNS,
|
getNS,
|
||||||
_.property('stack'),
|
_.property('stack'),
|
||||||
_.head,
|
_.head,
|
||||||
_.defaultTo(_.stubObject)
|
_.defaultTo({})
|
||||||
);
|
);
|
||||||
|
|
||||||
export default composeReducers(
|
export default composeReducers(
|
||||||
ns,
|
ns,
|
||||||
|
handleActions(
|
||||||
|
() => ({
|
||||||
|
[types.clickOnClose]: (state) => ({
|
||||||
|
...state,
|
||||||
|
stack: _.tail(state.stack)
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
defaultState,
|
||||||
|
),
|
||||||
function metaReducer(state = defaultState, action) {
|
function metaReducer(state = defaultState, action) {
|
||||||
if (isFlashAction(action)) {
|
if (isFlashAction(action)) {
|
||||||
const { payload: { alertType, message } } = getFlashAction(action);
|
const { payload: { alertType, message } } = getFlashAction(action);
|
||||||
|
Reference in New Issue
Block a user