From fa4916f16a2162ddcd1b615301bd4e53573b6d95 Mon Sep 17 00:00:00 2001 From: Mohamed El Mahallawy Date: Sat, 8 Apr 2017 17:12:32 -0700 Subject: [PATCH] Fixes #654 Verses dropdown --- src/components/Audioplayer/index.js | 3 ++ src/components/GlobalNav/Surah/index.js | 33 +++++++++++++++++---- src/components/SurahsDropdown/index.js | 9 +++--- src/components/VersesDropdown/index.js | 37 +++++++++++++----------- src/components/VersesDropdown/style.scss | 2 +- src/containers/Surah/index.js | 24 --------------- src/redux/actions/spec.js | 2 +- src/redux/actions/verses.js | 2 +- src/styles/partials/_search-input.scss | 2 +- 9 files changed, 58 insertions(+), 56 deletions(-) diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js index a12dccf51..fc2226ee9 100644 --- a/src/components/Audioplayer/index.js +++ b/src/components/Audioplayer/index.js @@ -249,6 +249,9 @@ export class Audioplayer extends Component { } handleAddFileListeners(file) { + // NOTE: if no file, just wait. + if (!file) return false; + const { update, currentTime } = this.props; // eslint-disable-line no-shadow debug('component:Audioplayer', `Attaching listeners to ${file.src}`); diff --git a/src/components/GlobalNav/Surah/index.js b/src/components/GlobalNav/Surah/index.js index 5c5957a6b..1fbd4b0c1 100644 --- a/src/components/GlobalNav/Surah/index.js +++ b/src/components/GlobalNav/Surah/index.js @@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react'; import * as customPropTypes from 'customPropTypes'; import * as OptionsActions from 'redux/actions/options.js'; import { connect } from 'react-redux'; +import { replace } from 'react-router-redux'; import Link from 'react-router/lib/Link'; import Drawer from 'quran-components/lib/Drawer'; import Menu from 'quran-components/lib/Menu'; @@ -15,16 +16,15 @@ import ReciterDropdown from 'components/ReciterDropdown'; import ContentDropdown from 'components/ContentDropdown'; import TooltipDropdown from 'components/TooltipDropdown'; import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; -// TODO: import VersesDropdown from 'components/VersesDropdown'; +import VersesDropdown from 'components/VersesDropdown'; -import { load } from 'redux/actions/verses.js'; +import { load, setCurrentVerse } from 'redux/actions/verses.js'; import GlobalNav from '../index'; const styles = require('../style.scss'); class GlobalNavSurah extends Component { - state = { drawerOpen: false } @@ -42,6 +42,18 @@ class GlobalNavSurah extends Component { } }; + handleVerseDropdownClick = (verseNum) => { + const { versesIds, chapter } = this.props; // eslint-disable-line no-shadow + + this.props.setCurrentVerse(`${chapter.chapterNumber}:${verseNum}`); + + if (versesIds.has(verseNum)) { + return false; + } + + return this.props.replace(`/${chapter.chapterNumber}/${verseNum}-${verseNum + 10}`); + } + handleDrawerToggle = (open) => { this.setState({ drawerOpen: open }); } @@ -62,13 +74,19 @@ class GlobalNavSurah extends Component { } render() { - const { chapter, chapters, setOption, options, ...props } = this.props; + const { chapter, chapters, setOption, versesIds, options, ...props } = this.props; return ( , + , + ,
, @@ -155,4 +173,7 @@ GlobalNavSurah.propTypes = { load: PropTypes.func.isRequired }; -export default connect(mapStateToProps, { ...OptionsActions, load })(GlobalNavSurah); +export default connect( + mapStateToProps, + { ...OptionsActions, load, replace, setCurrentVerse } +)(GlobalNavSurah); diff --git a/src/components/SurahsDropdown/index.js b/src/components/SurahsDropdown/index.js index 5cb04bd7d..9f3b37d94 100644 --- a/src/components/SurahsDropdown/index.js +++ b/src/components/SurahsDropdown/index.js @@ -1,4 +1,4 @@ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; import * as customPropTypes from 'customPropTypes'; import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; import NavDropdown from 'react-bootstrap/lib/NavDropdown'; @@ -8,7 +8,6 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; const styles = require('./style.scss'); class SurahsDropdown extends Component { - shouldComponentUpdate(nextProps) { return this.props.chapters !== nextProps.chapters; } @@ -40,14 +39,14 @@ class SurahsDropdown extends Component { } render() { - const { title } = this.props; + const { chapter } = this.props; return ( } + title={chapter.nameSimple || } > {this.renderList()} @@ -57,7 +56,7 @@ class SurahsDropdown extends Component { SurahsDropdown.propTypes = { chapters: customPropTypes.chapters.isRequired, - title: PropTypes.string, + chapter: customPropTypes.chapters.isRequired, }; export default SurahsDropdown; diff --git a/src/components/VersesDropdown/index.js b/src/components/VersesDropdown/index.js index e619f2b28..2c62b61f7 100644 --- a/src/components/VersesDropdown/index.js +++ b/src/components/VersesDropdown/index.js @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react'; import * as customPropTypes from 'customPropTypes'; -import DropdownButton from 'react-bootstrap/lib/DropdownButton'; +import NavDropdown from 'react-bootstrap/lib/NavDropdown'; import MenuItem from 'react-bootstrap/lib/MenuItem'; import { Link } from 'react-scroll'; import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; @@ -8,17 +8,16 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; const style = require('./style.scss'); class VersesDropdown extends Component { - renderItem = (ayah, index) => { - const { chapter, loadedAyahs, isReadingMode, onClick } = this.props; - const ayahNum = index + 1; + const { chapter, loadedVerses, isReadingMode, onClick } = this.props; + const number = index + 1; - if (loadedAyahs.has(ayahNum) && !isReadingMode) { + if (loadedVerses.has(number) && !isReadingMode) { return (
  • onClick(ayahNum)} - to={`ayah:${chapter.chapterNumber}:${ayahNum}`} + onClick={() => onClick(number)} + to={`verse:${chapter.chapterNumber}:${number}`} smooth spy offset={-120} @@ -26,18 +25,22 @@ class VersesDropdown extends Component { duration={500} className="pointer" > - {ayahNum} + {number}
    • ); } - return onClick(ayahNum)}>{ayahNum}; + return ( + onClick(number)}> + {number} + + ); } renderMenu() { - const { ayat } = this.props; - const array = Array(ayat).join().split(','); + const { chapter } = this.props; + const array = Array(chapter.versesCount).join().split(','); return array.map((ayah, index) => this.renderItem(ayah, index)); } @@ -50,20 +53,20 @@ class VersesDropdown extends Component { ); return ( - {this.renderMenu()} - + ); } } VersesDropdown.propTypes = { - ayat: PropTypes.number.isRequired, - loadedAyahs: PropTypes.instanceOf(Set).isRequired, + loadedVerses: PropTypes.instanceOf(Set).isRequired, chapter: customPropTypes.surahType.isRequired, // Set onClick: PropTypes.func.isRequired, isReadingMode: PropTypes.bool, @@ -71,7 +74,7 @@ VersesDropdown.propTypes = { }; VersesDropdown.defaultProps = { - className: 'col-md-3' + className: '' }; export default VersesDropdown; diff --git a/src/components/VersesDropdown/style.scss b/src/components/VersesDropdown/style.scss index 52101888d..6d9fbf80b 100644 --- a/src/components/VersesDropdown/style.scss +++ b/src/components/VersesDropdown/style.scss @@ -1,5 +1,5 @@ .dropdown{ - & + :global(.dropdown-menu){ + :global(.dropdown-menu){ max-height: 400px; max-height: 60vh; overflow-y: scroll; diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js index 9e207c39d..8cf81268b 100644 --- a/src/containers/Surah/index.js +++ b/src/containers/Surah/index.js @@ -19,9 +19,6 @@ import ComponentLoader from 'components/ComponentLoader'; import Bismillah from 'components/Bismillah'; import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; -// utils -import scroller from 'utils/scroller'; - // Helpers import makeHeadTags from 'helpers/makeHeadTags'; import debug from 'helpers/debug'; @@ -114,27 +111,6 @@ class Surah extends Component { return Object.keys(this.props.verses).length; } - handleVerseDropdownClick = (verseNum) => { - const { verseIds, chapter, actions } = this.props; // eslint-disable-line no-shadow - - actions.verse.setcurrentVerse(`${chapter.chapterNumber}:${verseNum}`); - - if (verseIds.has(verseNum)) { - return false; - } - - if (verseNum > (this.getLast() + 10) || verseNum < this.getFirst()) { - // This is beyond lazy loading next page. - if (actions.push) { - return actions.push.push(`/${chapter.chapterNumber}/${verseNum}-${verseNum + 10}`); - } - } - - return this.handleLazyLoadAyahs(() => setTimeout(() => - scroller.scrollTo(`verse:${chapter.chapterNumber}:${verseNum}`), - 1000)); // then scroll to it - } - handleLazyLoadAyahs = (callback) => { const { verseIds, chapter, isEndOfSurah, options, actions } = this.props; // eslint-disable-line no-shadow, max-len const range = [this.getFirst(), this.getLast()]; diff --git a/src/redux/actions/spec.js b/src/redux/actions/spec.js index 98e0f55fc..9c1e36b2c 100644 --- a/src/redux/actions/spec.js +++ b/src/redux/actions/spec.js @@ -25,7 +25,7 @@ describe('action tests', () => { expect(ayahsActions.load(1, 2, 4).types.length).to.equal(3); expect(ayahsActions.clearCurrent().type).to.equal(ayahsConstants.CLEAR_CURRENT); expect(ayahsActions.clearCurrentWord(1).type).to.equal(ayahsConstants.CLEAR_CURRENT_WORD); - expect(ayahsActions.setcurrentVerse(1).type).to.equal(ayahsConstants.SET_CURRENT_VERSE); + expect(ayahsActions.setCurrentVerse(1).type).to.equal(ayahsConstants.SET_CURRENT_VERSE); expect(ayahsActions.setCurrentWord(1).type).to.equal(ayahsConstants.SET_CURRENT_WORD); }); diff --git a/src/redux/actions/verses.js b/src/redux/actions/verses.js index bbba19628..be6b256b3 100644 --- a/src/redux/actions/verses.js +++ b/src/redux/actions/verses.js @@ -50,7 +50,7 @@ export function clearCurrentWord() { }; } -export function setcurrentVerse(id) { +export function setCurrentVerse(id) { return { type: SET_CURRENT_VERSE, id diff --git a/src/styles/partials/_search-input.scss b/src/styles/partials/_search-input.scss index e14140d72..1412781c9 100644 --- a/src/styles/partials/_search-input.scss +++ b/src/styles/partials/_search-input.scss @@ -1,7 +1,7 @@ .right-inner-addon.search-input{ padding: 0px; margin-bottom: 0px; - width: 50vw; + width: auto; input{ padding: 10px 15px;