From 44ed1a58513439dafbad51f0977b260a22b9c2f0 Mon Sep 17 00:00:00 2001 From: Edoardo Sabadelli Date: Mon, 10 Feb 2020 16:40:34 +0100 Subject: [PATCH] fix: remove custom title when Auto is selected (DHIS2-8252) (#636) * fix: remove custom title when Auto is selected (DHIS2-8252) Also fixed the subtitle option to work in the same way as the title. Before when no custom subtitle was specified, the Custom subtitle was selected with an empty value. Now Auto means not hidden subtitle but also not custom subtitle. The subtitle is actually auto generated in some situations (depending on vis type, presence of title...) --- .../Options/HideSubtitle.js | 39 +++++++++++++++---- .../VisualizationOptions/Options/HideTitle.js | 39 +++++++++++++------ 2 files changed, 59 insertions(+), 19 deletions(-) diff --git a/packages/app/src/components/VisualizationOptions/Options/HideSubtitle.js b/packages/app/src/components/VisualizationOptions/Options/HideSubtitle.js index e597422d20..476e992322 100644 --- a/packages/app/src/components/VisualizationOptions/Options/HideSubtitle.js +++ b/packages/app/src/components/VisualizationOptions/Options/HideSubtitle.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' +import { createSelector } from 'reselect' import i18n from '@dhis2/d2-i18n' import { Label, Radio, RadioGroup } from '@dhis2/ui-core' @@ -16,18 +17,27 @@ import { tabSectionOptionToggleable, } from '../styles/VisualizationOptions.style.js' +const HIDE_SUBTITLE_AUTO = 'AUTO' +const HIDE_SUBTITLE_NONE = 'NONE' +const HIDE_SUBTITLE_CUSTOM = 'CUSTOM' + class HideSubtitle extends Component { constructor(props) { super(props) - this.defaultState = { value: 'NONE' } + this.defaultState = { value: HIDE_SUBTITLE_AUTO } this.state = props.value ? { value: props.value } : this.defaultState } onChange = ({ value }) => { this.setState({ value }) - this.props.onChange(value === 'NONE') + this.props.onChange( + value === HIDE_SUBTITLE_NONE, + value === HIDE_SUBTITLE_AUTO + ? undefined + : this.props.subtitle || undefined + ) } render() { @@ -48,13 +58,17 @@ class HideSubtitle extends Component { dense > {[ - { id: 'NONE', label: i18n.t('None') }, - { id: 'CUSTOM', label: i18n.t('Custom') }, + { + id: HIDE_SUBTITLE_AUTO, + label: i18n.t('Auto generated'), + }, + { id: HIDE_SUBTITLE_NONE, label: i18n.t('None') }, + { id: HIDE_SUBTITLE_CUSTOM, label: i18n.t('Custom') }, ].map(({ id, label }) => ( ))} - {value === 'CUSTOM' ? ( + {value === HIDE_SUBTITLE_CUSTOM ? (
@@ -65,18 +79,29 @@ class HideSubtitle extends Component { } HideSubtitle.propTypes = { + subtitle: PropTypes.string, value: PropTypes.string, visualizationType: PropTypes.string, onChange: PropTypes.func, } +const hideSubtitleSelector = createSelector([sGetUiOptions], uiOptions => + uiOptions.hideSubtitle + ? HIDE_SUBTITLE_NONE + : uiOptions.subtitle === undefined + ? HIDE_SUBTITLE_AUTO + : HIDE_SUBTITLE_CUSTOM +) + const mapStateToProps = state => ({ visualizationType: sGetUiType(state), - value: sGetUiOptions(state).hideSubtitle ? 'NONE' : 'CUSTOM', + value: hideSubtitleSelector(state), + subtitle: sGetUiOptions(state).subtitle, }) const mapDispatchToProps = dispatch => ({ - onChange: enabled => dispatch(acSetUiOptions({ hideSubtitle: enabled })), + onChange: (hideSubtitle, subtitle) => + dispatch(acSetUiOptions({ hideSubtitle, subtitle })), }) export default connect(mapStateToProps, mapDispatchToProps)(HideSubtitle) diff --git a/packages/app/src/components/VisualizationOptions/Options/HideTitle.js b/packages/app/src/components/VisualizationOptions/Options/HideTitle.js index c15106776b..0860b87145 100644 --- a/packages/app/src/components/VisualizationOptions/Options/HideTitle.js +++ b/packages/app/src/components/VisualizationOptions/Options/HideTitle.js @@ -17,18 +17,27 @@ import { tabSectionOptionToggleable, } from '../styles/VisualizationOptions.style.js' +const HIDE_TITLE_AUTO = 'AUTO' +const HIDE_TITLE_NONE = 'NONE' +const HIDE_TITLE_CUSTOM = 'CUSTOM' + class HideTitle extends Component { constructor(props) { super(props) - this.defaultState = { value: 'AUTO' } + this.defaultState = { value: HIDE_TITLE_AUTO } this.state = props.value ? { value: props.value } : this.defaultState } - onChange = ({ value }) => { + onRadioGroupChange = ({ value }) => { this.setState({ value }) - this.props.onChange(value === 'NONE') + this.props.onChange( + value === HIDE_TITLE_NONE, + value === HIDE_TITLE_AUTO + ? undefined + : this.props.title || undefined + ) } render() { @@ -44,19 +53,22 @@ class HideTitle extends Component { {[ - { id: 'AUTO', label: i18n.t('Auto generated') }, - { id: 'NONE', label: i18n.t('None') }, - { id: 'CUSTOM', label: i18n.t('Custom') }, + { + id: HIDE_TITLE_AUTO, + label: i18n.t('Auto generated'), + }, + { id: HIDE_TITLE_NONE, label: i18n.t('None') }, + { id: HIDE_TITLE_CUSTOM, label: i18n.t('Custom') }, ].map(({ id, label }) => ( ))} - {value === 'CUSTOM' ? ( + {value === HIDE_TITLE_CUSTOM ? (
</div> @@ -67,6 +79,7 @@ class HideTitle extends Component { } HideTitle.propTypes = { + title: PropTypes.string, value: PropTypes.string, visualizationType: PropTypes.string, onChange: PropTypes.func, @@ -74,19 +87,21 @@ HideTitle.propTypes = { const hideTitleSelector = createSelector([sGetUiOptions], uiOptions => uiOptions.hideTitle - ? 'NONE' + ? HIDE_TITLE_NONE : uiOptions.title === undefined - ? 'AUTO' - : 'CUSTOM' + ? HIDE_TITLE_AUTO + : HIDE_TITLE_CUSTOM ) const mapStateToProps = state => ({ visualizationType: sGetUiType(state), value: hideTitleSelector(state), + title: sGetUiOptions(state).title, }) const mapDispatchToProps = dispatch => ({ - onChange: enabled => dispatch(acSetUiOptions({ hideTitle: enabled })), + onChange: (hideTitle, title) => + dispatch(acSetUiOptions({ hideTitle, title })), }) export default connect(mapStateToProps, mapDispatchToProps)(HideTitle)