-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: chip label with stage name and correct suffix (#11)
Implements TECH-1009 Key features * Add stageName to the chip label in cases where multiple data elements have the same name. This is the same functionality used by ProgramDimensionsList (code is duplicated for now, but will consider refactoring when adding stageName to modal and the visualization columns) * Style the chip such that the suffix showing #selected/conditions always shows in full, and the name-stageName part being truncated with overflow ellipsis. * move TooltipContent->renderConditions to function getConditions in modules/conditions. This was so that the functionality could be shared with the chip label component (ChipBase) * refactor: switch DefaultAxis to use useSelector/useDispatch instead of connect. This resulted in renderChipsSelector being moved to reducers/ui.js
- Loading branch information
1 parent
02ed171
commit bd68007
Showing
9 changed files
with
373 additions
and
280 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,106 @@ | ||
| import { DIMENSION_ID_ORGUNIT } from '@dhis2/analytics' | ||
| import i18n from '@dhis2/d2-i18n' | ||
| import cx from 'classnames' | ||
| import PropTypes from 'prop-types' | ||
| import React from 'react' | ||
| import { | ||
| VALUE_TYPE_BOOLEAN, | ||
| VALUE_TYPE_TRUE_ONLY, | ||
| getConditions, | ||
| } from '../../modules/conditions.js' | ||
| import { DIMENSION_TYPE_PERIOD } from '../../modules/dimensionConstants.js' | ||
| import { DimensionIcon } from '../MainSidebar/DimensionItem/DimensionIcon.js' | ||
| import styles from './styles/Chip.module.css' | ||
|
|
||
| const VALUE_TYPE_TRUE_ONLY_NUM_OPTIONS = 2 | ||
| const VALUE_TYPE_BOOLEAN_NUM_OPTIONS = 3 | ||
|
|
||
| // Presentational component used by dnd - do not add redux or dnd functionality | ||
|
|
||
| const renderChipLabelSuffix = (items, numberOfConditions) => { | ||
| let itemsLabel = '' | ||
| if (items.length) { | ||
| itemsLabel = i18n.t('{{count}} selected', { | ||
| count: items.length, | ||
| }) | ||
| } else if (numberOfConditions) { | ||
| itemsLabel = i18n.t('{{count}} conditions', { | ||
| count: numberOfConditions, | ||
| defaultValue: '{{count}} condition', | ||
| defaultValue_plural: '{{count}} conditions', | ||
| }) | ||
| export const ChipBase = ({ dimension, conditions, items, metadata }) => { | ||
| const { id, name, dimensionType, optionSet, valueType, stageName } = | ||
| dimension | ||
|
|
||
| const getChipSuffix = () => { | ||
| if ( | ||
| (id === DIMENSION_ID_ORGUNIT || | ||
| dimensionType === DIMENSION_TYPE_PERIOD) && | ||
| !items.length | ||
| ) { | ||
| return '' | ||
| } | ||
|
|
||
| const all = i18n.t('all') | ||
|
|
||
| if (!conditions.condition && !conditions.legendSet && !items.length) { | ||
| return `: ${all}` | ||
| } | ||
|
|
||
| const conds = getConditions({ conditions, metadata, dimension }) | ||
|
|
||
| if ( | ||
| (valueType === VALUE_TYPE_TRUE_ONLY && | ||
| conds.length === VALUE_TYPE_TRUE_ONLY_NUM_OPTIONS) || | ||
| (valueType === VALUE_TYPE_BOOLEAN && | ||
| conds.length === VALUE_TYPE_BOOLEAN_NUM_OPTIONS) | ||
| ) { | ||
| return `: ${all}` | ||
| } | ||
|
|
||
| const numberOfConditions = conds.length | ||
|
|
||
| if (optionSet || items.length) { | ||
| const selected = items.length || numberOfConditions | ||
| const suffix = i18n.t('{{count}} selected', { | ||
| count: selected, | ||
| defaultValue: '{{count}} selected', | ||
| defaultValue_plural: '{{count}} selected', | ||
| }) | ||
| return `: ${suffix}` | ||
| } else if (numberOfConditions) { | ||
| const suffix = i18n.t('{{count}} conditions', { | ||
| count: numberOfConditions, | ||
| defaultValue: '{{count}} condition', | ||
| defaultValue_plural: '{{count}} conditions', | ||
| }) | ||
| return `: ${suffix}` | ||
| } | ||
|
|
||
| return '' | ||
| } | ||
| return itemsLabel ? `: ${itemsLabel}` : '' | ||
| } | ||
|
|
||
| export const ChipBase = ({ | ||
| dimensionName, | ||
| dimensionType, | ||
| items, | ||
| numberOfConditions, | ||
| }) => ( | ||
| <div className={cx(styles.chipBase)}> | ||
| <div className={styles.leftIcon}> | ||
| <DimensionIcon dimensionType={dimensionType} /> | ||
| return ( | ||
| <div className={cx(styles.chipBase)}> | ||
| <div className={styles.leftIcon}> | ||
| <DimensionIcon dimensionType={dimensionType} /> | ||
| </div> | ||
| <span className={styles.label}> | ||
| <span className={styles.primary}>{name}</span> | ||
| {stageName && ( | ||
| <span className={styles.secondary}>{stageName}</span> | ||
| )} | ||
| </span> | ||
| <span className={styles.suffix}>{getChipSuffix()}</span> | ||
| </div> | ||
| <span className={styles.label}>{dimensionName}</span> | ||
| <span className={styles.label}> | ||
| {renderChipLabelSuffix(items, numberOfConditions)} | ||
| </span> | ||
| </div> | ||
| ) | ||
| ) | ||
| } | ||
|
|
||
| ChipBase.propTypes = { | ||
| dimensionName: PropTypes.string, | ||
| dimensionType: PropTypes.string, | ||
| conditions: PropTypes.object, | ||
| dimension: PropTypes.shape({ | ||
| dimensionType: PropTypes.string, | ||
| id: PropTypes.string, | ||
| name: PropTypes.string, | ||
| optionSet: PropTypes.string, | ||
| stageName: PropTypes.string, | ||
| valueType: PropTypes.string, | ||
| }), | ||
| items: PropTypes.array, | ||
| numberOfConditions: PropTypes.number, | ||
| metadata: PropTypes.object, | ||
| } | ||
|
|
||
| ChipBase.defaultProps = { | ||
| conditions: {}, | ||
| items: [], | ||
| metadata: {}, | ||
| } |
Oops, something went wrong.