From 499cdd496b716494783d66592928b9c9cc76b0c5 Mon Sep 17 00:00:00 2001 From: Zalmoxisus Date: Fri, 20 May 2016 19:08:15 +0300 Subject: [PATCH] Add `actionsFilter` and `statesFilter` props --- README.md | 12 +++++++++++- package.json | 7 ++++++- src/FilterMonitor.js | 40 +++++++++++++++++++++++++++++++++------- 3 files changed, 50 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 3755691..b899b68 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,15 @@ import FilterMonitor from 'redux-devtools-filter-actions'; import LogMonitor from 'redux-devtools-log-monitor'; export default createDevTools( - + ( + action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ? + { ...action, data: '<>' } : action + ) + } + statesFilter={(state) => state.data ? { ...state, data: '<>' } : state} + > ); @@ -38,6 +46,8 @@ Name | Description ------------- | ------------- `blacklist` | An array of actions (regex as string) to be hidden in the child monitor. `whitelist` | An array of actions (regex as string) to be shown. If specified, other than those actions will be hidden (the 'blacklist' parameter will be ignored). +`actionsFilter` | Function which takes `action` object and id number as arguments, and should return `action` object back. See the example above. +`statesFilter` | Function which takes `state` object and index as arguments, and should return `state` object back. See the example above. ### License diff --git a/package.json b/package.json index af5d304..ceee332 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,9 @@ "version": "1.1.2", "description": "A composable monitor for Redux DevTools with the ability to filter actions.", "main": "lib/index.js", - "files": ["lib"], + "files": [ + "lib" + ], "scripts": { "clean": "rimraf lib", "build": "babel src --out-dir lib", @@ -51,5 +53,8 @@ "peerDependencies": { "react": "^0.14.0 || ^15.0.0-0", "redux-devtools": "^3.0.0" + }, + "dependencies": { + "lodash": "^4.12.0" } } diff --git a/src/FilterMonitor.js b/src/FilterMonitor.js index 965f109..8cd604a 100644 --- a/src/FilterMonitor.js +++ b/src/FilterMonitor.js @@ -1,4 +1,5 @@ import { cloneElement, Component, PropTypes } from 'react'; +import mapValues from 'lodash/mapValues'; import reducer from './reducers'; export default class FilterMonitor extends Component { @@ -20,30 +21,55 @@ export default class FilterMonitor extends Component { render() { let { - whitelist, blacklist, monitorState, children, - stagedActionIds, computedStates, + whitelist, blacklist, actionsFilter, statesFilter, + monitorState, children, actionsById, stagedActionIds, computedStates, ...rest } = this.props; - const filteredStagedActionIds = []; - const filteredComputedStates = []; + let filteredStagedActionIds = []; + let filteredComputedStates = []; + let filteredActionsById = {}; if (whitelist || blacklist) { stagedActionIds.forEach((id, idx) => { - if (this.isNotFiltered(rest.actionsById[id].action.type)) { + if (this.isNotFiltered(actionsById[id].action.type)) { filteredStagedActionIds.push(id); - filteredComputedStates.push(computedStates[idx]); + filteredComputedStates.push( + statesFilter ? + { ...computedStates[idx], state: statesFilter(computedStates[idx].state, idx) } : + computedStates[idx] + ); + filteredActionsById[id] = ( + actionsFilter ? + { ...actionsById[id], action: actionsFilter(actionsById[id].action, id) } : + actionsById[id] + ); } }); rest = { ...rest, + actionsById: filteredActionsById, stagedActionIds: filteredStagedActionIds, computedStates: filteredComputedStates }; } else { + if (actionsFilter) { + filteredActionsById = mapValues(actionsById, (action, id) => ( + { ...action, action: actionsFilter(action.action, id) } + )); + } else filteredActionsById = actionsById; + + if (statesFilter) { + filteredComputedStates = computedStates.map((state, idx) => ( + { ...state, state: statesFilter(state.state, idx) } + )); + } else filteredComputedStates = computedStates; + rest = { ...rest, - stagedActionIds, computedStates + stagedActionIds, + actionsById: filteredActionsById, + computedStates: filteredComputedStates }; }