From b9dfc254f453c1635c412190d6b95370a0cbfceb Mon Sep 17 00:00:00 2001 From: Berkeley Martinez Date: Wed, 23 Mar 2016 15:01:01 -0700 Subject: [PATCH] Add logic to filter input field Add correct css to input field addon icon --- client/less/lib/bootstrap/input-groups.less | 2 +- client/less/map.less | 20 +++++++------- common/app/routes/map/components/Map.jsx | 22 ++++++++++++---- common/app/routes/map/components/Show.jsx | 29 +++++++++++++++------ common/app/routes/map/redux/actions.js | 5 ++++ common/app/routes/map/redux/reducer.js | 7 ++++- common/app/routes/map/redux/types.js | 3 ++- 7 files changed, 63 insertions(+), 25 deletions(-) diff --git a/client/less/lib/bootstrap/input-groups.less b/client/less/lib/bootstrap/input-groups.less index a8712f25b9..3568b9469e 100755 --- a/client/less/lib/bootstrap/input-groups.less +++ b/client/less/lib/bootstrap/input-groups.less @@ -63,7 +63,7 @@ // Addon and addon wrapper for buttons .input-group-addon, .input-group-btn { - width: 1%; + min-width: 1%; white-space: nowrap; vertical-align: middle; // Match the inputs } diff --git a/client/less/map.less b/client/less/map.less index 3ea364e70e..11e9fc307c 100644 --- a/client/less/map.less +++ b/client/less/map.less @@ -130,17 +130,11 @@ border-color: darkgreen; } -.input-group-addon { - width:40px; +.map-filter + .input-group-addon { + width: 40px; color: darkgreen; - background: #fff; + background-color: #fff; border-color: darkgreen; - &.filled{ - background: darkgreen; - border-color: #000d00; - color: #fff; - cursor: pointer; - } .fa { position:absolute; top:50%; @@ -150,6 +144,14 @@ } } +.map-filter.filled + span.input-group-addon { + background: darkgreen; + border-color: #000d00; + color: #fff; + cursor: pointer; +} + + .map-wrapper { position: absolute; display: block; diff --git a/common/app/routes/map/components/Map.jsx b/common/app/routes/map/components/Map.jsx index 4cd910c179..c455e9f035 100644 --- a/common/app/routes/map/components/Map.jsx +++ b/common/app/routes/map/components/Map.jsx @@ -1,4 +1,5 @@ import React, { PropTypes } from 'react'; +import classnames from 'classnames'; import PureComponent from 'react-pure-render/component'; import { Input, Button, Row } from 'react-bootstrap'; @@ -6,10 +7,14 @@ import SuperBlock from './Super-Block.jsx'; import FullStack from './Full-Stack.jsx'; import CodingPrep from './Coding-Prep.jsx'; +const clearIcon = (); +const searchIcon = (); export default class ShowMap extends PureComponent { static displayName = 'Map'; static propTypes = { - superBlocks: PropTypes.array + superBlocks: PropTypes.array, + filter: PropTypes.string, + updateFilter: PropTypes.func }; renderSuperBlocks(superBlocks) { @@ -26,7 +31,12 @@ export default class ShowMap extends PureComponent { } render() { - const { superBlocks } = this.props; + const { superBlocks, updateFilter, filter } = this.props; + const inputIcon = filter ? clearIcon : searchIcon; + const inputClass = classnames({ + 'map-filter': true, + filled: !!filter + }); return (
@@ -44,11 +54,13 @@ export default class ShowMap extends PureComponent { } + addonAfter={ inputIcon } autocompleted='off' - className='map-filter' + className={ inputClass } + onChange={ updateFilter } placeholder='Type a challenge name' - type='text' /> + type='text' + value={ filter }/>
diff --git a/common/app/routes/map/components/Show.jsx b/common/app/routes/map/components/Show.jsx index aa54705d95..f52f16a300 100644 --- a/common/app/routes/map/components/Show.jsx +++ b/common/app/routes/map/components/Show.jsx @@ -6,10 +6,13 @@ import { createSelector } from 'reselect'; import Map from './Map.jsx'; import contain from '../../../utils/professor-x'; -import { fetchChallenges } from '../redux/actions'; +import { fetchChallenges, updateFilter } from '../redux/actions'; -const bindableActions = { fetchChallenges }; -const mapStateToProps = createSelector( +const bindableActions = { + fetchChallenges, + updateFilter +}; +const superBlocksSelector = createSelector( state => state.map.superBlocks, state => state.entities.superBlock, state => state.entities.block, @@ -20,7 +23,7 @@ const mapStateToProps = createSelector( superBlocks: [] }; } - const finalBlocks = superBlocks + return superBlocks .map(superBlockName => superBlockMap[superBlockName]) .map(superBlock => ({ ...superBlock, @@ -32,11 +35,20 @@ const mapStateToProps = createSelector( .map(dashedName => challengeMap[dashedName]) })) })); + } +); + +const mapStateToProps = createSelector( + superBlocksSelector, + state => state.map.filter, + (superBlocks, filter) => { return { - superBlocks: finalBlocks + superBlocks, + filter }; } ); + const fetchOptions = { fetchAction: 'fetchChallenges', isPrimed({ superBlocks }) { @@ -47,13 +59,14 @@ const fetchOptions = { export class ShowMap extends PureComponent { static displayName = 'ShowMap'; static propTypes = { - superBlocks: PropTypes.array + filter: PropTypes.string, + superBlocks: PropTypes.array, + updateFilter: PropTypes.func }; render() { - const { superBlocks } = this.props; return ( - + ); } } diff --git a/common/app/routes/map/redux/actions.js b/common/app/routes/map/redux/actions.js index fd8b86fec0..c34787d72b 100644 --- a/common/app/routes/map/redux/actions.js +++ b/common/app/routes/map/redux/actions.js @@ -8,3 +8,8 @@ export const fetchChallengesCompleted = createAction( (_, superBlocks) => superBlocks, entities => ({ entities }) ); + +export const updateFilter = createAction( + types.updateFilter, + e => e.target.value +); diff --git a/common/app/routes/map/redux/reducer.js b/common/app/routes/map/redux/reducer.js index 575171aade..66fbadcd48 100644 --- a/common/app/routes/map/redux/reducer.js +++ b/common/app/routes/map/redux/reducer.js @@ -3,7 +3,8 @@ import { handleActions } from 'redux-actions'; import types from './types'; const initialState = { - superBlocks: [] + superBlocks: [], + filter: '' }; export default handleActions( @@ -11,6 +12,10 @@ export default handleActions( [types.fetchChallengesCompleted]: (state, { payload = [] }) => ({ ...state, superBlocks: payload + }), + [types.updateFilter]: (state, { payload = ''}) => ({ + ...state, + filter: payload }) }, initialState diff --git a/common/app/routes/map/redux/types.js b/common/app/routes/map/redux/types.js index 51d8fbd687..cb56398f0b 100644 --- a/common/app/routes/map/redux/types.js +++ b/common/app/routes/map/redux/types.js @@ -2,5 +2,6 @@ import createTypes from '../../../utils/create-types'; export default createTypes([ 'fetchChallenges', - 'fetchChallengesCompleted' + 'fetchChallengesCompleted', + 'updateFilter' ], 'map');