diff --git a/package.json b/package.json index 059a404a5..59f3b866d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/analytics", - "version": "26.6.9", + "version": "999.9.9-chip-alpha.5", "main": "./build/cjs/index.js", "module": "./build/es/index.js", "exports": { @@ -35,7 +35,7 @@ "@dhis2/cli-app-scripts": "^9.0.1", "@dhis2/cli-style": "^10.4.1", "@dhis2/d2-i18n": "^1.1.0", - "@dhis2/ui": "^9.2.0", + "@dhis2/ui": "^9.4.4", "@sambego/storybook-state": "^2.0.1", "@storybook/addons": "^6.5.16", "@storybook/preset-create-react-app": "^3.1.7", diff --git a/src/__demo__/DimensionsPanel.stories.js b/src/__demo__/DimensionsPanel.stories.js index 6a3fbc6de..71cc1abc6 100644 --- a/src/__demo__/DimensionsPanel.stories.js +++ b/src/__demo__/DimensionsPanel.stories.js @@ -94,6 +94,7 @@ storiesOf('DimensionsPanel', module).add('locked dimension', () => { dimension === DIMENSION_ID_DATA} /> ) diff --git a/src/assets/DynamicDimensionIcon.js b/src/assets/DynamicDimensionIcon.js index 83d6c678d..8fbeb84ab 100644 --- a/src/assets/DynamicDimensionIcon.js +++ b/src/assets/DynamicDimensionIcon.js @@ -3,49 +3,24 @@ import React from 'react' const DynamicDimensionIcon = () => { return ( - - - - - - - - - - - - - + + ) } diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js index 7b3bd648b..8f9e09933 100644 --- a/src/components/DimensionsPanel/List/DimensionItem.js +++ b/src/components/DimensionsPanel/List/DimensionItem.js @@ -1,4 +1,5 @@ -import { IconLock16 } from '@dhis2/ui' +import { CssVariables } from '@dhis2/ui' +import cx from 'classnames' import PropTypes from 'prop-types' import React, { Component, createRef } from 'react' import DynamicDimensionIcon from '../../../assets/DynamicDimensionIcon.js' @@ -8,7 +9,7 @@ import { } from '../../../modules/predefinedDimensions.js' import OptionsButton from './OptionsButton.js' import RecommendedIcon from './RecommendedIcon.js' -import { styles } from './styles/DimensionItem.style.js' +import styles from './styles/DimensionItem.style.js' class DimensionItem extends Component { state = { mouseOver: false } @@ -27,26 +28,16 @@ class DimensionItem extends Component { getDimensionIcon = () => { const Icon = getPredefinedDimensionProp(this.props.id, 'icon') return Icon ? ( - + ) : ( - + ) } getDimensionType = () => { - const { id, name, isDeactivated } = this.props + const { id, name } = this.props - return ( - - {name} - - ) + return {name} } render() { @@ -59,20 +50,37 @@ class DimensionItem extends Component { onClick, onOptionsClick, innerRef, - style, dataTest, + className, ...rest } = this.props const Icon = this.getDimensionIcon() const Label = this.getDimensionType() - const itemStyle = - isSelected && !isDeactivated - ? { ...styles.item, ...styles.selected } - : styles.item const optionsRef = createRef() + const LockIcon = ( + <> +
+ + + +
+ + + ) + const onLabelClick = () => { if ( !isDeactivated && @@ -83,55 +91,58 @@ class DimensionItem extends Component { } return ( -
  • -
    -
    {Icon}
    -
    - {Label} - -
    - {isLocked && ( -
    - -
    + <> + +
  • - {onOptionsClick ? ( + data-test={dataTest} + onClick={onLabelClick} + {...rest} + >
    - {this.state.mouseOver && !isDeactivated && !isLocked ? ( - {Icon}
    +
    + {Label} + - ) : null} +
    - ) : null} -
  • + {onOptionsClick && !isDeactivated && !isLocked ? ( +
    + {this.state.mouseOver ? ( + + ) : null} +
    + ) : null} + {isLocked && LockIcon} + + + ) } } @@ -140,12 +151,12 @@ DimensionItem.propTypes = { id: PropTypes.string.isRequired, isSelected: PropTypes.bool.isRequired, // XXX name: PropTypes.string.isRequired, + className: PropTypes.string, dataTest: PropTypes.string, innerRef: PropTypes.func, isDeactivated: PropTypes.bool, isLocked: PropTypes.bool, isRecommended: PropTypes.bool, - style: PropTypes.object, onClick: PropTypes.func, onOptionsClick: PropTypes.func, } diff --git a/src/components/DimensionsPanel/List/OptionsButton.js b/src/components/DimensionsPanel/List/OptionsButton.js index 0686000a2..b7200ddcf 100644 --- a/src/components/DimensionsPanel/List/OptionsButton.js +++ b/src/components/DimensionsPanel/List/OptionsButton.js @@ -2,14 +2,36 @@ import { IconMore16 } from '@dhis2/ui' import PropTypes from 'prop-types' import React from 'react' -const OptionsButton = ({ style, onClick }) => ( - +const OptionsButton = ({ onClick }) => ( + <> + + + ) OptionsButton.propTypes = { - style: PropTypes.object, onClick: PropTypes.func, } diff --git a/src/components/DimensionsPanel/List/RecommendedIcon.js b/src/components/DimensionsPanel/List/RecommendedIcon.js index 3a8b75dc9..12609d3a7 100644 --- a/src/components/DimensionsPanel/List/RecommendedIcon.js +++ b/src/components/DimensionsPanel/List/RecommendedIcon.js @@ -9,7 +9,6 @@ const RecommendedIcon = ({ isRecommended, dataTest }) =>
    diff --git a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap index 1c33a04bf..f58b07faa 100644 --- a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap +++ b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap @@ -1,405 +1,283 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DimensionItem matches the snapshot 1`] = ` -
  • -
    + +
  • - -
    -
    - - Period - - + +
    +
    + + + Period + + + +
  • - - + +