From d1b78eba9b5a060835db029ce35a732f7979f9dc Mon Sep 17 00:00:00 2001 From: Berkeley Martinez Date: Fri, 17 Jun 2016 17:24:34 -0700 Subject: [PATCH] Feature(react): Add lightbox to step challenge images --- .../challenges/components/step/Step.jsx | 48 ++++++++++++++++--- common/app/routes/challenges/redux/actions.js | 2 + common/app/routes/challenges/redux/reducer.js | 9 ++++ common/app/routes/challenges/redux/types.js | 2 + package.json | 1 + 5 files changed, 56 insertions(+), 6 deletions(-) diff --git a/common/app/routes/challenges/components/step/Step.jsx b/common/app/routes/challenges/components/step/Step.jsx index 8e1b6f391c..df8297cec5 100644 --- a/common/app/routes/challenges/components/step/Step.jsx +++ b/common/app/routes/challenges/components/step/Step.jsx @@ -4,11 +4,14 @@ import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import PureComponent from 'react-pure-render/component'; import ReactTransitionReplace from 'react-css-transition-replace'; +import LightBox from 'react-images'; import { goToStep, completeAction, - submitChallenge + submitChallenge, + openLightBoxImage, + closeLightBoxImage } from '../../redux/actions'; import { challengeSelector } from '../../redux/selectors'; import { Button, Col, Image, Row } from 'react-bootstrap'; @@ -19,16 +22,19 @@ const mapStateToProps = createSelector( state => state.challengesApp.currentIndex, state => state.challengesApp.previousIndex, state => state.challengesApp.isActionCompleted, + state => state.challengesApp.isLightBoxOpen, ( { challenge: { description = [] } }, currentIndex, previousIndex, - isActionCompleted + isActionCompleted, + isLightBoxOpen ) => ({ currentIndex, isActionCompleted, + isLightBoxOpen, step: description[currentIndex], steps: description, numOfSteps: description.length, @@ -39,7 +45,9 @@ const mapStateToProps = createSelector( const dispatchActions = { goToStep, completeAction, - submitChallenge + submitChallenge, + openLightBoxImage, + closeLightBoxImage }; export class StepChallenge extends PureComponent { @@ -47,6 +55,7 @@ export class StepChallenge extends PureComponent { super(...args); this.handleNextClick = this.handleNextClick.bind(this); this.handleBackClick = this.handleBackClick.bind(this); + this.handleLightBoxOpen = this.handleLightBoxOpen.bind(this); } static displayName = 'StepChallenge'; static propTypes = { @@ -58,7 +67,10 @@ export class StepChallenge extends PureComponent { numOfSteps: PropTypes.number, goToStep: PropTypes.func, completeAction: PropTypes.func, - submitChallenge: PropTypes.func + submitChallenge: PropTypes.func, + isLightBoxOpen: PropTypes.bool, + openlightBoxImage: PropTypes.func, + closeLightBoxImage: PropTypes.func }; handleNextClick() { @@ -75,6 +87,13 @@ export class StepChallenge extends PureComponent { goToStep(currentIndex - 1); } + handleLightBoxOpen(e) { + if (!(e.ctrlKey || e.metaKey)) { + e.preventDefault(); + this.props.openLightBoxImage(); + } + } + renderActionButton(action, completeAction) { const isApiAction = action === '#'; const buttonCopy = isApiAction ? @@ -158,7 +177,11 @@ export class StepChallenge extends PureComponent { className='' key={ imgUrl } > - + { { this.renderImages(steps) } +
); diff --git a/common/app/routes/challenges/redux/actions.js b/common/app/routes/challenges/redux/actions.js index 550adc1c4a..a62eeabe95 100644 --- a/common/app/routes/challenges/redux/actions.js +++ b/common/app/routes/challenges/redux/actions.js @@ -7,6 +7,8 @@ import types from './types'; // step export const goToStep = createAction(types.goToStep); export const completeAction = createAction(types.completeAction); +export const openLightBoxImage = createAction(types.openLightBoxImage); +export const closeLightBoxImage = createAction(types.closeLightBoxImage); // challenges export const fetchChallenge = createAction( diff --git a/common/app/routes/challenges/redux/reducer.js b/common/app/routes/challenges/redux/reducer.js index d9543b3ead..9308f60cde 100644 --- a/common/app/routes/challenges/redux/reducer.js +++ b/common/app/routes/challenges/redux/reducer.js @@ -18,6 +18,7 @@ const initialUiState = { previousIndex: -1, // step action isActionCompleted: false, + isLightBoxOpen: false, // project is ready to submit isSubmitting: false, output: `/** @@ -121,6 +122,14 @@ const mainReducer = handleActions( ...state, isActionCompleted: true }), + [types.openLightBoxImage]: state => ({ + ...state, + isLightBoxOpen: true + }), + [types.closeLightBoxImage]: state => ({ + ...state, + isLightBoxOpen: false + }), // classic/modern [types.initOutput]: (state, { payload: output }) => ({ diff --git a/common/app/routes/challenges/redux/types.js b/common/app/routes/challenges/redux/types.js index e786c8b55b..9073cd5b84 100644 --- a/common/app/routes/challenges/redux/types.js +++ b/common/app/routes/challenges/redux/types.js @@ -4,6 +4,8 @@ export default createTypes([ // step 'goToStep', 'completeAction', + 'openLightBoxImage', + 'closeLightBoxImage', // challenges 'fetchChallenge', diff --git a/package.json b/package.json index 07d4c704fc..dff29f1bb5 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "react-css-transition-replace": "^1.2.0-beta", "react-dom": "^15.0.2", "react-fontawesome": "^0.3.3", + "react-images": "^0.4.6", "react-motion": "~0.4.2", "react-no-ssr": "^1.0.1", "react-pure-render": "^1.0.2",