This repository has been archived by the owner on Jun 28, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 362
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
mmahalwy
committed
Jul 10, 2016
1 parent
4395405
commit d6f0cd8
Showing
4 changed files
with
229 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,186 @@ | ||
| import React, { PropTypes } from 'react'; | ||
| import React, { Component, PropTypes } from 'react'; | ||
| import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; | ||
| import Tooltip from 'react-bootstrap/lib/Tooltip'; | ||
| import Popover from 'react-bootstrap/lib/Popover'; | ||
| import Nav from 'react-bootstrap/lib/Nav'; | ||
| import NavItem from 'react-bootstrap/lib/NavItem'; | ||
| import Row from 'react-bootstrap/lib/Row'; | ||
| import Col from 'react-bootstrap/lib/Col'; | ||
|
|
||
| import SwitchToggle from 'components/SwitchToggle'; | ||
|
|
||
| const style = require('../style.scss'); | ||
|
|
||
| const RepeatButton = ({ shouldRepeat, onRepeatToggle }) => { | ||
| const tooltip = ( | ||
| <Tooltip id="repeat-button-tooltip"> | ||
| Repeats the current ayah on end... | ||
| </Tooltip> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="text-center"> | ||
| <input type="checkbox" id="repeat" className={style.checkbox} /> | ||
| <OverlayTrigger | ||
| overlay={tooltip} | ||
| placement="right" | ||
| trigger={['hover', 'focus']} | ||
| export default class RepeatButton extends Component { | ||
| static propTypes = { | ||
| surah: PropTypes.object.isRequired, | ||
| repeat: PropTypes.shape({ | ||
| from: PropTypes.number.isRequired, | ||
| to: PropTypes.number.isRequired, | ||
| times: PropTypes.number | ||
| }).isRequired, | ||
| setRepeat: PropTypes.func.isRequired, | ||
| current: PropTypes.number.isRequired | ||
| }; | ||
|
|
||
| state = { | ||
| nav: 1 | ||
| }; | ||
|
|
||
| handleToggle = () => { | ||
| const { repeat, setRepeat, current } = this.props; | ||
|
|
||
| if (repeat.from) { | ||
| return setRepeat({}); | ||
| } | ||
|
|
||
| return setRepeat({ | ||
| from: current, | ||
| to: current | ||
| }); | ||
| } | ||
|
|
||
| handleNavChange = (nav) => { | ||
| const { setRepeat, current } = this.props; | ||
|
|
||
| this.setState({ nav }); | ||
|
|
||
| if (nav === 1) { | ||
| // Should set single ayah | ||
| return setRepeat({ | ||
| from: current, | ||
| to: current | ||
| }); | ||
| } | ||
|
|
||
| return setRepeat({ | ||
| from: current, | ||
| to: current + 3 | ||
| }); | ||
| } | ||
|
|
||
| renderRangeAyahs() { | ||
| const { surah, repeat, setRepeat } = this.props; | ||
| const array = Array(surah.ayat).join().split(','); | ||
|
|
||
| return ( | ||
| <Col md={12} style={{paddingTop: 15}}> | ||
| <ul className="list-inline"> | ||
| <li> | ||
| <select | ||
| className="form-control" | ||
| value={repeat.from} | ||
| onChange={(event) => setRepeat({ | ||
| ...repeat, | ||
| from: parseInt(event.target.value, 10), | ||
| to: parseInt(event.target.value, 10) | ||
| })} | ||
| > | ||
| { | ||
| array.map((ayah, index) => ( | ||
| <option key={index} value={index + 1}> | ||
| {index + 1} | ||
| </option> | ||
| )) | ||
| } | ||
| </select> | ||
| </li> | ||
| <li> - </li> | ||
| <li> | ||
| <select | ||
| className="form-control" | ||
| value={repeat.to} | ||
| onChange={(event) => setRepeat({ ...repeat, to: parseInt(event.target.value, 10)})} | ||
| > | ||
| { | ||
| array.map((ayah, index) => ( | ||
| <option key={index} value={repeat.from ? index + 1 + repeat.from : index + 1}> | ||
| {repeat.from ? index + 1 + repeat.from : index + 1} | ||
| </option> | ||
| )) | ||
| } | ||
| </select> | ||
| </li> | ||
| </ul> | ||
| </Col> | ||
| ); | ||
| } | ||
|
|
||
| renderSingleAyah() { | ||
| const { current } = this.props; | ||
|
|
||
| return ( | ||
| <Col md={12}> | ||
| <h5> | ||
| Repeating Ayah: {current} | ||
| </h5> | ||
| </Col> | ||
| ); | ||
| } | ||
|
|
||
| renderOptions() { | ||
| const { repeat } = this.props; | ||
|
|
||
| return ( | ||
| <Row className={!repeat.from && style.disabled}> | ||
| <Col md={12}> | ||
| <Nav | ||
| bsStyle="pills" | ||
| activeKey={this.state.nav} | ||
| onSelect={this.handleNavChange} | ||
| > | ||
| <NavItem eventKey={1} title="Single Ayah" className={style.pill}> | ||
| Single Ayah | ||
| </NavItem> | ||
| <NavItem eventKey={2} title="Range" className={style.pill}> | ||
| Range | ||
| </NavItem> | ||
| </Nav> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| const { repeat } = this.props; | ||
|
|
||
| const popover = ( | ||
| <Popover | ||
| id="FontSizeDropdown" | ||
| className={style.popover} | ||
| title={ | ||
| <Row> | ||
| <Col md={12} className="text-center"> | ||
| Toggle repeat{' '} | ||
| <SwitchToggle | ||
| checked={!!repeat.from} | ||
| onToggle={this.handleToggle} | ||
| id="repeat-toggle" | ||
| flat | ||
| /> | ||
| </Col> | ||
| </Row> | ||
| } | ||
| > | ||
| <label | ||
| htmlFor="repeat" | ||
| className={`pointer ${style.buttons} ${shouldRepeat ? style.repeat : ''}`} | ||
| onClick={onRepeatToggle} | ||
| {this.renderOptions()} | ||
| <Row> | ||
| {this.state.nav === 1 ? this.renderSingleAyah() : this.renderRangeAyahs()} | ||
| </Row> | ||
| </Popover> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="text-center"> | ||
| <OverlayTrigger | ||
| overlay={popover} | ||
| placement="bottom" | ||
| trigger="click" | ||
| rootClose | ||
| > | ||
| <i className="ss-icon ss-repeat" /> | ||
| </label> | ||
| </OverlayTrigger> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| RepeatButton.propTypes = { | ||
| shouldRepeat: PropTypes.bool.isRequired, | ||
| onRepeatToggle: PropTypes.func.isRequired | ||
| }; | ||
|
|
||
| export default RepeatButton; | ||
| <i | ||
| className={`pointer ss-icon ss-repeat ${style.buttons} ${repeat.from && style.repeat}`} | ||
| /> | ||
| </OverlayTrigger> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters