-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
split visualize-dropdown : visualize and external-questionnaire
- Loading branch information
Showing
11 changed files
with
144 additions
and
74 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
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
110 changes: 110 additions & 0 deletions
110
src/widgets/external-questionnaire-dropdown/components/external-questionnaire-dropdown.jsx
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 |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React, { useEffect, useState, useRef, useCallback } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classSet from 'react-classset'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import Dictionary from 'utils/dictionary/dictionary'; | ||
|
|
||
| /** | ||
| * Component used in the actions toolbar and on each | ||
| * component of the questionnaire. Will display a button | ||
| * with a dropdown behavior with links to different | ||
| * visualizations of the PDF : WEB, PDF or ODT | ||
| */ | ||
| function ExternalQuestionnaireDropdown({ questionnaireId, disabled, top }) { | ||
| const [dropdownOpen, setDropdownOpen] = useState(false); | ||
| const wrapperRef = useRef(null); | ||
|
|
||
| const handleClickOutside = useCallback(event => { | ||
| if (wrapperRef && !wrapperRef.current.contains(event.target)) { | ||
| setDropdownOpen(false); | ||
| } | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| window.addEventListener('mousedown', handleClickOutside); | ||
| return () => { | ||
| window.removeEventListener('mousedown', handleClickOutside); | ||
| }; | ||
| }, [handleClickOutside]); | ||
|
|
||
| /** | ||
| * Will toggle the dropdown menu | ||
| */ | ||
| const openDropDown = e => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setDropdownOpen(!dropdownOpen); | ||
| }; | ||
|
|
||
| const classDropDown = classSet({ | ||
| 'btn-group': true, | ||
| dropup: top, | ||
| 'flex-column': !top, | ||
| 'flex-column-reverse': top, | ||
| open: dropdownOpen, | ||
| }); | ||
| const classDropDownTrigger = classSet({ | ||
| btn: true, | ||
| 'dropdown-toggle': true, | ||
| 'btn-yellow': false, | ||
| 'btn-white': true, | ||
| disabled: disabled, | ||
| }); | ||
| const classDropDownList = classSet({ | ||
| 'dropdown-menu': true, | ||
| }); | ||
| const linksQuestionnaire = [ | ||
| { | ||
| actionType: 'tcmRef', | ||
| actionLabel: Dictionary.tcmReference, | ||
| page: 'tcm-composition', | ||
| }, | ||
| { | ||
| actionType: 'questRef', | ||
| actionLabel: Dictionary.questionnaireReference, | ||
| page: 'composition', | ||
| }, | ||
| { | ||
| actionType: 'questMerge', | ||
| actionLabel: Dictionary.questionnaireMerge, | ||
| page: 'merge', | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div className={classDropDown} ref={wrapperRef}> | ||
| <button | ||
| className={classDropDownTrigger} | ||
| disabled={disabled} | ||
| data-toggle="dropdown" | ||
| aria-haspopup="true" | ||
| aria-expanded={dropdownOpen} | ||
| onClick={e => openDropDown(e)} | ||
| > | ||
| {Dictionary.externalElement} | ||
| <span className="caret" /> | ||
| </button> | ||
|
|
||
| <ul className={classDropDownList}> | ||
| {linksQuestionnaire.map(link => { | ||
| return ( | ||
| <li key={link.actionLabel}> | ||
| <Link to={`/questionnaire/${questionnaireId}/${link.page}`}> | ||
| {link.actionLabel} | ||
| </Link> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // PropTypes and defaultProps | ||
|
|
||
| ExternalQuestionnaireDropdown.propTypes = { | ||
| disabled: PropTypes.bool.isRequired, | ||
| top: PropTypes.bool.isRequired, | ||
| }; | ||
|
|
||
| export default ExternalQuestionnaireDropdown; |
13 changes: 13 additions & 0 deletions
13
...s/external-questionnaire-dropdown/containers/external-questionnaire-dropdown-container.js
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 |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| import ExternalQuestionnaireDropdown from '../components/external-questionnaire-dropdown'; | ||
|
|
||
| const mapStateToProps = state => ({ | ||
| questionnaireId: state.appState.activeQuestionnaire.id, | ||
| }); | ||
|
|
||
| const ExternalQuestionnaireDropdownContainer = connect(mapStateToProps)( | ||
| ExternalQuestionnaireDropdown, | ||
| ); | ||
|
|
||
| export default ExternalQuestionnaireDropdownContainer; |
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 |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as ExternalQuestionnaireDropdown } from './containers/external-questionnaire-dropdown-container'; |
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
11 changes: 0 additions & 11 deletions
11
src/widgets/visualize-dropdown/containers/visualize-dropdown-container.js
This file was deleted.
Oops, something went wrong.
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 +1 @@ | ||
| export { default as VisualizeDropdown } from './containers/visualize-dropdown-container'; | ||
| export { default as VisualizeDropdown } from './components/visualize-dropdown'; |
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