diff --git a/i18n/en.pot b/i18n/en.pot index 4c017174d..66e054b51 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2020-05-22T11:34:10.538Z\n" -"PO-Revision-Date: 2020-05-22T11:34:10.538Z\n" +"POT-Creation-Date: 2020-06-03T21:43:03.758Z\n" +"PO-Revision-Date: 2020-06-03T21:43:03.758Z\n" msgid "Data Type" msgstr "" @@ -59,6 +59,9 @@ msgstr "" msgid "Dimension recommended with selected data" msgstr "" +msgid "No items selected" +msgstr "" + msgid "Search" msgstr "" diff --git a/package.json b/package.json index 3bac8ddd6..8ac635964 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ }, "dependencies": { "@dhis2/d2-ui-org-unit-dialog": "^7.0.4", - "@dhis2/ui-core": "^4.21.1", + "@dhis2/ui": "^5.0.3", "@material-ui/core": "^3.9.3", "@material-ui/icons": "^3.0.2", "classnames": "^2.2.6", diff --git a/src/__demo__/DynamicDimension.stories.js b/src/__demo__/DynamicDimension.stories.js new file mode 100644 index 000000000..a2dcac601 --- /dev/null +++ b/src/__demo__/DynamicDimension.stories.js @@ -0,0 +1,55 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +import ItemSelector from '../components/DynamicDimension/ItemSelector' + +const items = [ + { id: '1', name: 'One' }, + { id: '2', name: 'Two' }, + { id: '3', name: 'Three' }, + { id: '4', name: 'Four' }, + { id: '5', name: 'Five' }, +] + +storiesOf('DynamicDimension', module).add('ItemSelector none selected', () => { + return ( + console.log(selected)} + allItems={items} + /> + ) +}) + +storiesOf('DynamicDimension', module).add('ItemSelector one selected', () => { + return ( + console.log(selected)} + allItems={items} + initialSelectedItemIds={[items[2].id]} + /> + ) +}) + +storiesOf('DynamicDimension', module).add( + 'ItemSelector one selected not in options', + () => { + return ( + <> + console.log(selected)} + allItems={items} + initialSelectedItemIds={['6']} + /> +

+ Note: This currently does not work as ui (currently @5.0.1) + does not yet support selected items that are not part of the + options array{' '} + + https://jira.dhis2.org/browse/TECH-380 + +

+ + // TODO: fix the issue above + ) + } +) diff --git a/src/__demo__/Filter.stories.js b/src/__demo__/Filter.stories.js new file mode 100644 index 000000000..2153d983e --- /dev/null +++ b/src/__demo__/Filter.stories.js @@ -0,0 +1,25 @@ +import React, { useState } from 'react' +import { storiesOf } from '@storybook/react' + +import Filter from '../components/Filter/Filter' + +function FilterWithState() { + const [text, setText] = useState(null) + + const onTextChange = value => setText(value) + const onClearFilter = () => setText(null) + return ( + + ) +} + +storiesOf('Filter', module).add('default', () => { + return +}) diff --git a/src/__demo__/PeriodDimension.stories.js b/src/__demo__/PeriodDimension.stories.js index f5980384c..cb1f8bc17 100644 --- a/src/__demo__/PeriodDimension.stories.js +++ b/src/__demo__/PeriodDimension.stories.js @@ -3,6 +3,17 @@ import { storiesOf } from '@storybook/react' import PeriodDimension from '../components/PeriodDimension/PeriodDimension' -storiesOf('PeriodDimension', module).add('default', () => { - return +const selectedPeriods = [{ id: 'LAST_12_MONTHS', name: 'Last 12 months' }] + +storiesOf('PeriodDimension', module).add('None selected', () => { + return console.log(selected)} /> +}) + +storiesOf('PeriodDimension', module).add('One selected', () => { + return ( + console.log(selected)} + /> + ) }) diff --git a/src/components/DataDimension/DataTypesSelector.js b/src/components/DataDimension/DataTypesSelector.js index e290cd876..ca7495162 100644 --- a/src/components/DataDimension/DataTypesSelector.js +++ b/src/components/DataDimension/DataTypesSelector.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import i18n from '@dhis2/d2-i18n' -import { SingleSelectField, SingleSelectOption } from '@dhis2/ui-core' +import { SingleSelectField, SingleSelectOption } from '@dhis2/ui' import { dataTypes } from '../../modules/dataTypes' import styles from './styles/DataTypesSelector.style' @@ -10,10 +10,7 @@ export const DataTypes = ({ currentDataType, onChange }) => (
onChange(ref.selected.value)} dense > diff --git a/src/components/DataDimension/Detail.js b/src/components/DataDimension/Detail.js index a6b213ddd..d666d3b05 100644 --- a/src/components/DataDimension/Detail.js +++ b/src/components/DataDimension/Detail.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import i18n from '@dhis2/d2-i18n' -import { SingleSelectField, SingleSelectOption } from '@dhis2/ui-core' +import { SingleSelectField, SingleSelectOption } from '@dhis2/ui' import { TOTALS, DETAIL } from '../../modules/dataTypes' import styles from './styles/Detail.style' @@ -13,19 +13,11 @@ const getOptions = () => ({ export const Detail = ({ currentValue, onChange }) => { const options = getOptions() - const currentLabel = options[currentValue] return (
onChange(ref.selected.value)} dense > diff --git a/src/components/DataDimension/Groups.js b/src/components/DataDimension/Groups.js index c3292e214..2f98fb772 100644 --- a/src/components/DataDimension/Groups.js +++ b/src/components/DataDimension/Groups.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { SingleSelectField, SingleSelectOption } from '@dhis2/ui-core' +import { SingleSelectField, SingleSelectOption } from '@dhis2/ui' import { Detail } from './Detail' import { dataTypes } from '../../modules/dataTypes' @@ -23,19 +23,13 @@ export const Groups = ({ const groupDetail = dataTypes[dataType].groupDetail - const selected = optionItems.find(item => item.id === groupId) || {} - return (
- setItems(await apiFetchItemsByDimension(context, dimensionId)) + setItems(await apiFetchItemsByDimension(context, dimensionId)) // TODO: refactor to use the data engine instead + // TODO: *** Once pagination is in use, check if there are items that are in selectedItems that needs to be added to the items list // TODO: This needs to be refactored to use a loading spinner once Transfer supports it: https://jira.dhis2.org/browse/TECH-379 - const selectItems = items => { - const formattedItems = items.map(item => ({ - id: item.value, - name: item.label, - })) + const onSelectItems = selectedItemIds => { + const formattedItems = selectedItemIds.map(id => ({ + id, + name: items.find(item => item.id === id).name, // TODO: Re: *** above, this won't work with pagination + })) // TODO: fetch the name from somewhere else, as not all content in selectedItems might be present in the items list onSelect({ dimensionId: dimensionId, items: formattedItems, @@ -36,9 +37,9 @@ export const DynamicDimension = ({ return ( item.id)} rightFooter={rightFooter} // TODO: Pass in a func prop to fetch items, instead of fetching them on this level, to enable the loading spinner? /> @@ -48,7 +49,12 @@ export const DynamicDimension = ({ DynamicDimension.propTypes = { context: PropTypes.object.isRequired, dimensionId: PropTypes.string.isRequired, - selectedItems: PropTypes.array.isRequired, + selectedItems: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + }) + ).isRequired, onSelect: PropTypes.func.isRequired, rightFooter: PropTypes.node, } diff --git a/src/components/DynamicDimension/ItemSelector.js b/src/components/DynamicDimension/ItemSelector.js index 9e7f8bc85..98f05b587 100644 --- a/src/components/DynamicDimension/ItemSelector.js +++ b/src/components/DynamicDimension/ItemSelector.js @@ -1,6 +1,6 @@ import React, { useState } from 'react' import PropTypes from 'prop-types' -import { Transfer } from '@dhis2/ui-core' +import { Transfer } from '@dhis2/ui' import i18n from '@dhis2/d2-i18n' import styles from '../styles/DimensionSelector.style' @@ -15,16 +15,12 @@ import { const ItemSelector = ({ allItems, onSelect, - initialSelectedItems, + initialSelectedItemIds, leftHeader, rightFooter, }) => { - const [selectedItems, setSelectedItems] = useState( - initialSelectedItems.map(item => ({ - label: item.name, - value: item.id, - key: item.id, - })) + const [selectedItemIds, setSelectedItemIds] = useState( + initialSelectedItemIds ) const renderEmptySelection = () => ( @@ -37,10 +33,10 @@ const ItemSelector = ({ return ( { - setSelectedItems(selected) + setSelectedItemIds(selected) onSelect(selected) }} - selected={selectedItems} + selected={selectedItemIds} leftHeader={leftHeader} filterable enableOrderChange @@ -49,31 +45,34 @@ const ItemSelector = ({ selectedWidth={TRANSFER_SELECTED_WIDTH} selectedEmptyComponent={renderEmptySelection()} rightFooter={rightFooter} + options={allItems.map(({ id, name }) => ({ + label: name, + value: id, + }))} + renderOption={props => ( + + )} // TODO: Add a filter placeholer once the Transfer component supports this (https://github.com/dhis2/ui/issues/131) // TODO: Add rightHeader "Selected Periods" once the Transfer component supports this (https://github.com/dhis2/ui-core/issues/885) - > - {allItems.map(item => ( - - ))} - + /> ) } ItemSelector.propTypes = { - allItems: PropTypes.arrayOf(PropTypes.object).isRequired, + allItems: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + }) + ).isRequired, onSelect: PropTypes.func.isRequired, - initialSelectedItems: PropTypes.arrayOf(PropTypes.object), + initialSelectedItemIds: PropTypes.arrayOf(PropTypes.string), leftHeader: PropTypes.node, rightFooter: PropTypes.node, } ItemSelector.defaultProps = { - initialSelectedItems: [], + initialSelectedItemIds: [], } export default ItemSelector diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js index 6f80d5489..04496dd2e 100644 --- a/src/components/Filter/Filter.js +++ b/src/components/Filter/Filter.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { InputField } from '@dhis2/ui-core' +import { InputField } from '@dhis2/ui' export const Filter = ({ text, onChange, onClear, placeholder, type }) => ( - + +
- + +
event => diff --git a/src/components/ItemSelector/widgets/UnselectedItem.js b/src/components/ItemSelector/widgets/UnselectedItem.js index 60a11195f..56def32df 100644 --- a/src/components/ItemSelector/widgets/UnselectedItem.js +++ b/src/components/ItemSelector/widgets/UnselectedItem.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import cx from 'classnames' import ItemIcon from './ItemIcon' -import { colors } from '@dhis2/ui-core' +import { colors } from '@dhis2/ui' import styles from './styles/UnselectedItem.style' const onClickWrapper = ({ id, index, onClick }) => event => diff --git a/src/components/ItemSelector/widgets/styles/ArrowButton.style.js b/src/components/ItemSelector/widgets/styles/ArrowButton.style.js index 779aef381..9cf8e093a 100644 --- a/src/components/ItemSelector/widgets/styles/ArrowButton.style.js +++ b/src/components/ItemSelector/widgets/styles/ArrowButton.style.js @@ -1,4 +1,4 @@ -import { colors } from '@dhis2/ui-core' +import { colors } from '@dhis2/ui' import css from 'styled-jsx/css' export default css` diff --git a/src/components/ItemSelector/widgets/styles/SelectedItem.style.js b/src/components/ItemSelector/widgets/styles/SelectedItem.style.js index 097d24e3d..08bb938e0 100644 --- a/src/components/ItemSelector/widgets/styles/SelectedItem.style.js +++ b/src/components/ItemSelector/widgets/styles/SelectedItem.style.js @@ -1,4 +1,4 @@ -import { colors, theme } from '@dhis2/ui-core' +import { colors, theme } from '@dhis2/ui' import css from 'styled-jsx/css' export default css` diff --git a/src/components/ItemSelector/widgets/styles/UnselectedItem.style.js b/src/components/ItemSelector/widgets/styles/UnselectedItem.style.js index c2ddd2e89..fa322e5c2 100644 --- a/src/components/ItemSelector/widgets/styles/UnselectedItem.style.js +++ b/src/components/ItemSelector/widgets/styles/UnselectedItem.style.js @@ -1,4 +1,4 @@ -import { colors, theme } from '@dhis2/ui-core' +import { colors, theme } from '@dhis2/ui' import css from 'styled-jsx/css' export default css` diff --git a/src/components/OrgUnitDimension/OrgUnitDimension.js b/src/components/OrgUnitDimension/OrgUnitDimension.js index 8845fac58..2f8bb9ab2 100644 --- a/src/components/OrgUnitDimension/OrgUnitDimension.js +++ b/src/components/OrgUnitDimension/OrgUnitDimension.js @@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react' import PropTypes from 'prop-types' import sortBy from 'lodash/sortBy' import { OrgUnitSelector, userOrgUnits } from '@dhis2/d2-ui-org-unit-dialog' -import { CircularLoader } from '@dhis2/ui-core' +import { CircularLoader, colors } from '@dhis2/ui' import { apiFetchOrganisationUnitGroups, @@ -12,7 +12,6 @@ import { import { ouIdHelper } from '../../modules/ouIdHelper' import { DIMENSION_ID_ORGUNIT } from '../../modules/predefinedDimensions' import styles from './styles/OrgUnitDimension.style' -import { colors } from '@dhis2/ui-core' export const defaultState = { root: undefined, diff --git a/src/components/PeriodDimension/FixedPeriodFilter.js b/src/components/PeriodDimension/FixedPeriodFilter.js index a40ea9d3d..d6a52b59e 100644 --- a/src/components/PeriodDimension/FixedPeriodFilter.js +++ b/src/components/PeriodDimension/FixedPeriodFilter.js @@ -1,11 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import i18n from '@dhis2/d2-i18n' -import { - SingleSelectField, - SingleSelectOption, - InputField, -} from '@dhis2/ui-core' +import { SingleSelectField, InputField, SingleSelectOption } from '@dhis2/ui' import { getFixedPeriodsOptions } from './utils/fixedPeriods' import styles from './styles/PeriodFilter.style' @@ -29,7 +25,7 @@ const FixedPeriodFilter = ({ ))} @@ -50,7 +46,7 @@ const FixedPeriodFilter = ({ ) FixedPeriodFilter.propTypes = { - currentPeriodType: PropTypes.object.isRequired, + currentPeriodType: PropTypes.string.isRequired, currentYear: PropTypes.string.isRequired, onSelectPeriodType: PropTypes.func.isRequired, onSelectYear: PropTypes.func.isRequired, diff --git a/src/components/PeriodDimension/PeriodDimension.js b/src/components/PeriodDimension/PeriodDimension.js index 958ec5f4b..2e03f3202 100644 --- a/src/components/PeriodDimension/PeriodDimension.js +++ b/src/components/PeriodDimension/PeriodDimension.js @@ -6,13 +6,9 @@ import { DIMENSION_ID_PERIOD } from '../../modules/predefinedDimensions' export const PeriodDimension = ({ onSelect, selectedPeriods, rightFooter }) => { const selectPeriods = periods => { - const formattedPeriods = periods.map(period => ({ - id: period.value, - name: period.label, - })) onSelect({ dimensionId: DIMENSION_ID_PERIOD, - items: formattedPeriods, + items: periods, }) } diff --git a/src/components/PeriodDimension/PeriodSelector.js b/src/components/PeriodDimension/PeriodSelector.js index a42154c5c..5afdc3783 100644 --- a/src/components/PeriodDimension/PeriodSelector.js +++ b/src/components/PeriodDimension/PeriodSelector.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import { Transfer, TabBar, Tab } from '@dhis2/ui-core' +import { TabBar, Tab, Transfer } from '@dhis2/ui' import i18n from '@dhis2/d2-i18n' import FixedPeriodFilter from './FixedPeriodFilter' @@ -9,7 +9,7 @@ import { MONTHS, getRelativePeriodsOptionsById } from './utils/relativePeriods' import { MONTHLY, getFixedPeriodsOptionsById } from './utils/fixedPeriods' import styles from '../styles/DimensionSelector.style' import { TransferOption } from '../TransferOption' -import PeriodIcon from '../../assets/DimensionItemIcons/PeriodIcon' +import PeriodIcon from '../../assets/DimensionItemIcons/PeriodIcon' //TODO: Reimplement the icon import { TRANSFER_HEIGHT, TRANSFER_OPTIONS_WIDTH, @@ -31,16 +31,10 @@ class PeriodSelector extends Component { selectedPeriods: [], isRelative: true, relativeFilter: { - periodType: { - label: defaultRelativePeriodType.getName(), - value: defaultRelativePeriodType.id, - }, + periodType: defaultRelativePeriodType.id, }, fixedFilter: { - periodType: { - label: defaultFixedPeriodType.getName(), - value: defaultFixedPeriodType.id, - }, + periodType: defaultFixedPeriodType.id, year: defaultFixedPeriodYear.toString(), }, } @@ -48,13 +42,7 @@ class PeriodSelector extends Component { constructor(props) { super(props) - this.state.selectedPeriods = this.props.initialSelectedPeriods.map( - item => ({ - label: item.name, - value: item.id, - key: item.id, - }) - ) + this.state.selectedPeriods = this.props.initialSelectedPeriods } onIsRelativeClick = isRelative => { @@ -63,10 +51,10 @@ class PeriodSelector extends Component { this.setState({ allPeriods: isRelative ? getRelativePeriodsOptionsById( - this.state.relativeFilter.periodType.value + this.state.relativeFilter.periodType ).getPeriods() : getFixedPeriodsOptionsById( - this.state.fixedFilter.periodType.value + this.state.fixedFilter.periodType ).getPeriods( fixedPeriodConfig(Number(this.state.fixedFilter.year)) ), @@ -100,7 +88,7 @@ class PeriodSelector extends Component { }) this.setState({ allPeriods: getRelativePeriodsOptionsById( - filter.value + filter ).getPeriods(), }) }} @@ -132,7 +120,7 @@ class PeriodSelector extends Component { this.setState({ fixedFilter, allPeriods: getFixedPeriodsOptionsById( - fixedFilter.periodType.value + fixedFilter.periodType ).getPeriods(fixedPeriodConfig(Number(fixedFilter.year))), }) } @@ -147,10 +135,17 @@ class PeriodSelector extends Component { render = () => ( { - this.setState({ selectedPeriods: selected }) - this.props.onSelect(selected) + const formattedItems = selected.map(id => ({ + id, + name: [ + ...this.state.allPeriods, + ...this.state.selectedPeriods, + ].find(item => item.id === id).name, + })) + this.setState({ selectedPeriods: formattedItems }) + this.props.onSelect(formattedItems) }} - selected={this.state.selectedPeriods} + selected={this.state.selectedPeriods.map(period => period.id)} leftHeader={this.renderHeader()} enableOrderChange height={TRANSFER_HEIGHT} @@ -158,23 +153,26 @@ class PeriodSelector extends Component { selectedWidth={TRANSFER_SELECTED_WIDTH} selectedEmptyComponent={this.renderEmptySelection()} rightFooter={this.props.rightFooter} + options={this.state.allPeriods.map(({ id, name }) => ({ + label: name, + value: id, + }))} + renderOption={props => ( + + )} // TODO: Add rightHeader "Selected Periods" once the Transfer component supports this (https://github.com/dhis2/ui-core/issues/885) - > - {this.state.allPeriods.map(item => ( - - ))} - + > ) } PeriodSelector.propTypes = { onSelect: PropTypes.func.isRequired, - initialSelectedPeriods: PropTypes.arrayOf(PropTypes.object), + initialSelectedPeriods: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + }) + ), rightFooter: PropTypes.node, } diff --git a/src/components/PeriodDimension/RelativePeriodFilter.js b/src/components/PeriodDimension/RelativePeriodFilter.js index cb5968e60..511b94004 100644 --- a/src/components/PeriodDimension/RelativePeriodFilter.js +++ b/src/components/PeriodDimension/RelativePeriodFilter.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import i18n from '@dhis2/d2-i18n' -import { SingleSelectOption, SingleSelectField } from '@dhis2/ui-core' +import { SingleSelectField, SingleSelectOption } from '@dhis2/ui' import { getRelativePeriodsOptions } from './utils/relativePeriods' import styles from './styles/PeriodFilter.style' @@ -19,7 +19,7 @@ const RelativePeriodFilter = ({ currentFilter, onSelectFilter }) => ( ))} @@ -28,7 +28,7 @@ const RelativePeriodFilter = ({ currentFilter, onSelectFilter }) => ( ) RelativePeriodFilter.propTypes = { - currentFilter: PropTypes.object.isRequired, + currentFilter: PropTypes.string.isRequired, onSelectFilter: PropTypes.func.isRequired, } diff --git a/src/components/PeriodDimension/__tests__/__snapshots__/PeriodSelector.spec.js.snap b/src/components/PeriodDimension/__tests__/__snapshots__/PeriodSelector.spec.js.snap index 099ea96ab..48decf8cb 100644 --- a/src/components/PeriodDimension/__tests__/__snapshots__/PeriodSelector.spec.js.snap +++ b/src/components/PeriodDimension/__tests__/__snapshots__/PeriodSelector.spec.js.snap @@ -31,12 +31,7 @@ exports[`The Period Selector component matches the snapshot 1`] = ` className="filterContainer" >
@@ -47,7 +42,36 @@ exports[`The Period Selector component matches the snapshot 1`] = ` } maxSelections={Infinity} onChange={[Function]} + options={ + Array [ + Object { + "label": "This month", + "value": "THIS_MONTH", + }, + Object { + "label": "Last month", + "value": "LAST_MONTH", + }, + Object { + "label": "Last 3 months", + "value": "LAST_3_MONTHS", + }, + Object { + "label": "Last 6 months", + "value": "LAST_6_MONTHS", + }, + Object { + "label": "Last 12 months", + "value": "LAST_12_MONTHS", + }, + Object { + "label": "Months this year", + "value": "MONTHS_THIS_YEAR", + }, + ] + } optionsWidth="420px" + renderOption={[Function]} rightFooter={} selected={Array []} selectedEmptyComponent={ @@ -63,114 +87,5 @@ exports[`The Period Selector component matches the snapshot 1`] = ` } selectedWidth="298px" -> - - - - } - key="THIS_MONTH" - label="This month" - value="THIS_MONTH" - /> - - - - } - key="LAST_MONTH" - label="Last month" - value="LAST_MONTH" - /> - - - - } - key="LAST_3_MONTHS" - label="Last 3 months" - value="LAST_3_MONTHS" - /> - - - - } - key="LAST_6_MONTHS" - label="Last 6 months" - value="LAST_6_MONTHS" - /> - - - - } - key="LAST_12_MONTHS" - label="Last 12 months" - value="LAST_12_MONTHS" - /> - - - - } - key="MONTHS_THIS_YEAR" - label="Months this year" - value="MONTHS_THIS_YEAR" - /> - +/> `; diff --git a/src/components/PeriodDimension/__tests__/fixedPeriods.spec.js b/src/components/PeriodDimension/__tests__/fixedPeriods.spec.js index b4e6fce29..a2eb152bf 100644 --- a/src/components/PeriodDimension/__tests__/fixedPeriods.spec.js +++ b/src/components/PeriodDimension/__tests__/fixedPeriods.spec.js @@ -59,7 +59,7 @@ describe('fixedPeriods utils', () => { iso: '20190101', id: '20190101', }) - expect(periods[0].getName()).toEqual('2019-01-01') + expect(periods[0].name).toEqual('2019-01-01') }) it('should return the correct object for 31 dec 2019 day', () => { @@ -70,7 +70,7 @@ describe('fixedPeriods utils', () => { id: '20191231', }) - expect(periods[364].getName()).toEqual('2019-12-31') + expect(periods[364].name).toEqual('2019-12-31') }) }) @@ -98,9 +98,7 @@ describe('fixedPeriods utils', () => { iso: '2009W1', id: '2009W1', }) - expect(periods[0].getName()).toEqual( - 'Week 1 - 2008-12-29 - 2009-01-04' - ) + expect(periods[0].name).toEqual('Week 1 - 2008-12-29 - 2009-01-04') }) it('should return the correct object for week 53', () => { @@ -110,7 +108,7 @@ describe('fixedPeriods utils', () => { iso: '2009W53', id: '2009W53', }) - expect(periods[52].getName()).toEqual( + expect(periods[52].name).toEqual( 'Week 53 - 2009-12-28 - 2010-01-03' ) }) @@ -139,7 +137,7 @@ describe('fixedPeriods utils', () => { iso: '2019WedW27', id: '2019WedW27', }) - expect(periods[26].getName()).toEqual( + expect(periods[26].name).toEqual( 'Week 27 - 2019-07-03 - 2019-07-09' ) }) @@ -169,7 +167,7 @@ describe('fixedPeriods utils', () => { iso: '2019ThuW27', id: '2019ThuW27', }) - expect(periods[26].getName()).toEqual( + expect(periods[26].name).toEqual( 'Week 27 - 2019-07-04 - 2019-07-10' ) }) @@ -200,7 +198,7 @@ describe('fixedPeriods utils', () => { id: '2019SatW10', }) - expect(periods[9].getName()).toEqual( + expect(periods[9].name).toEqual( 'Week 10 - 2019-03-02 - 2019-03-08' ) }) @@ -230,7 +228,7 @@ describe('fixedPeriods utils', () => { iso: '2019SunW11', id: '2019SunW11', }) - expect(periods[10].getName()).toEqual( + expect(periods[10].name).toEqual( 'Week 11 - 2019-03-10 - 2019-03-16' ) }) @@ -261,7 +259,7 @@ describe('fixedPeriods utils', () => { iso: '2019BiW1', id: '2019BiW1', }) - expect(periods[0].getName()).toEqual( + expect(periods[0].name).toEqual( 'Bi-Week 1 - 2018-12-31 - 2019-01-13' ) }) @@ -273,7 +271,7 @@ describe('fixedPeriods utils', () => { iso: '2019BiW26', id: '2019BiW26', }) - expect(periods[25].getName()).toEqual( + expect(periods[25].name).toEqual( 'Bi-Week 26 - 2019-12-16 - 2019-12-29' ) }) @@ -303,7 +301,7 @@ describe('fixedPeriods utils', () => { iso: '201901', id: '201901', }) - expect(periods[0].getName()).toEqual('January 2019') + expect(periods[0].name).toEqual('January 2019') }) it('should return the correct object for month 12', () => { @@ -313,7 +311,7 @@ describe('fixedPeriods utils', () => { iso: '201912', id: '201912', }) - expect(periods[11].getName()).toEqual('December 2019') + expect(periods[11].name).toEqual('December 2019') }) }) @@ -341,7 +339,7 @@ describe('fixedPeriods utils', () => { iso: '201901B', id: '201901B', }) - expect(periods[0].getName()).toEqual('January - February 2019') + expect(periods[0].name).toEqual('January - February 2019') }) it('should return the correct object for bi-month 3', () => { @@ -351,7 +349,7 @@ describe('fixedPeriods utils', () => { iso: '201903B', id: '201903B', }) - expect(periods[2].getName()).toEqual('May - June 2019') + expect(periods[2].name).toEqual('May - June 2019') }) it('should return the correct object for bi-month 6', () => { @@ -361,7 +359,7 @@ describe('fixedPeriods utils', () => { iso: '201906B', id: '201906B', }) - expect(periods[5].getName()).toEqual('November - December 2019') + expect(periods[5].name).toEqual('November - December 2019') }) }) @@ -389,7 +387,7 @@ describe('fixedPeriods utils', () => { iso: '2019Q1', id: '2019Q1', }) - expect(periods[0].getName()).toEqual('January - March 2019') + expect(periods[0].name).toEqual('January - March 2019') }) it('should return the correct object for quarter 4', () => { @@ -399,7 +397,7 @@ describe('fixedPeriods utils', () => { iso: '2019Q4', id: '2019Q4', }) - expect(periods[3].getName()).toEqual('October - December 2019') + expect(periods[3].name).toEqual('October - December 2019') }) }) @@ -427,7 +425,7 @@ describe('fixedPeriods utils', () => { iso: '2019S1', id: '2019S1', }) - expect(periods[0].getName()).toEqual('January - June 2019') + expect(periods[0].name).toEqual('January - June 2019') }) it('should return the correct object for six-monthly 2', () => { @@ -437,7 +435,7 @@ describe('fixedPeriods utils', () => { iso: '2019S2', id: '2019S2', }) - expect(periods[1].getName()).toEqual('July - December 2019') + expect(periods[1].name).toEqual('July - December 2019') }) }) @@ -465,7 +463,7 @@ describe('fixedPeriods utils', () => { iso: '2019AprilS1', id: '2019AprilS1', }) - expect(periods[0].getName()).toEqual('April - September 2019') + expect(periods[0].name).toEqual('April - September 2019') }) it('should return the correct object for six-monthly April 2', () => { @@ -475,7 +473,7 @@ describe('fixedPeriods utils', () => { iso: '2019AprilS2', id: '2019AprilS2', }) - expect(periods[1].getName()).toEqual('October 2019 - March 2020') + expect(periods[1].name).toEqual('October 2019 - March 2020') }) }) @@ -503,7 +501,7 @@ describe('fixedPeriods utils', () => { iso: '2020', id: '2020', }) - expect(periods[0].getName()).toEqual('2020') + expect(periods[0].name).toEqual('2020') }) it('should return the correct object for yearly period 10', () => { @@ -513,7 +511,7 @@ describe('fixedPeriods utils', () => { iso: '2029', id: '2029', }) - expect(periods[9].getName()).toEqual('2029') + expect(periods[9].name).toEqual('2029') }) }) @@ -542,7 +540,7 @@ describe('fixedPeriods utils', () => { endDate: '2020-10-31', id: '2019Nov', }) - expect(periods[0].getName()).toEqual('November 2019 - October 2020') + expect(periods[0].name).toEqual('November 2019 - October 2020') }) it('should return the correct object for financial November period 10', () => { @@ -551,7 +549,7 @@ describe('fixedPeriods utils', () => { endDate: '2029-10-31', id: '2028Nov', }) - expect(periods[9].getName()).toEqual('November 2028 - October 2029') + expect(periods[9].name).toEqual('November 2028 - October 2029') }) }) @@ -580,9 +578,7 @@ describe('fixedPeriods utils', () => { endDate: '2020-09-30', id: '2019Oct', }) - expect(periods[0].getName()).toEqual( - 'October 2019 - September 2020' - ) + expect(periods[0].name).toEqual('October 2019 - September 2020') }) it('should return the correct object for financial October period 10', () => { @@ -591,9 +587,7 @@ describe('fixedPeriods utils', () => { endDate: '2029-09-30', id: '2028Oct', }) - expect(periods[9].getName()).toEqual( - 'October 2028 - September 2029' - ) + expect(periods[9].name).toEqual('October 2028 - September 2029') }) }) @@ -622,7 +616,7 @@ describe('fixedPeriods utils', () => { endDate: '2020-06-30', id: '2019July', }) - expect(periods[0].getName()).toEqual('July 2019 - June 2020') + expect(periods[0].name).toEqual('July 2019 - June 2020') }) it('should return the correct object for financial July period 10', () => { @@ -631,7 +625,7 @@ describe('fixedPeriods utils', () => { endDate: '2029-06-30', id: '2028July', }) - expect(periods[9].getName()).toEqual('July 2028 - June 2029') + expect(periods[9].name).toEqual('July 2028 - June 2029') }) }) @@ -660,7 +654,7 @@ describe('fixedPeriods utils', () => { endDate: '2020-03-31', id: '2019April', }) - expect(periods[0].getName()).toEqual('April 2019 - March 2020') + expect(periods[0].name).toEqual('April 2019 - March 2020') }) it('should return the correct object for financial April period 10', () => { @@ -669,7 +663,7 @@ describe('fixedPeriods utils', () => { endDate: '2029-03-31', id: '2028April', }) - expect(periods[9].getName()).toEqual('April 2028 - March 2029') + expect(periods[9].name).toEqual('April 2028 - March 2029') }) }) }) diff --git a/src/components/PeriodDimension/styles/PeriodFilter.style.js b/src/components/PeriodDimension/styles/PeriodFilter.style.js index 96c62928c..0ef8255ed 100644 --- a/src/components/PeriodDimension/styles/PeriodFilter.style.js +++ b/src/components/PeriodDimension/styles/PeriodFilter.style.js @@ -1,5 +1,5 @@ import css from 'styled-jsx/css' -import { spacers } from '@dhis2/ui-core' +import { spacers } from '@dhis2/ui' export default css` .leftSection { diff --git a/src/components/PeriodDimension/utils/fixedPeriods.js b/src/components/PeriodDimension/utils/fixedPeriods.js index 2b9579302..2725e6689 100644 --- a/src/components/PeriodDimension/utils/fixedPeriods.js +++ b/src/components/PeriodDimension/utils/fixedPeriods.js @@ -38,7 +38,7 @@ const getMonthName = key => { return monthNames[key] } -const dailyPeriodType = (formatYyyyMmDd, fnFilter) => { +const getDailyPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -51,7 +51,7 @@ const dailyPeriodType = (formatYyyyMmDd, fnFilter) => { const period = {} period.startDate = formatYyyyMmDd(date) period.endDate = period.startDate - period.getName = () => period.startDate + period.name = period.startDate period.iso = period.startDate.replace(/-/g, '') period.id = period.iso periods.push(period) @@ -65,7 +65,7 @@ const dailyPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const weeklyPeriodType = (formatYyyyMmDd, weekObj, fnFilter) => { +const getWeeklyPeriodType = (formatYyyyMmDd, weekObj, fnFilter) => { // Calculate the first date of an EPI year base on ISO standard ( first week always contains 4th Jan ) const getEpiWeekStartDay = (year, startDayOfWeek) => { const jan4 = new Date(year, 0, 4) @@ -101,10 +101,9 @@ const weeklyPeriodType = (formatYyyyMmDd, weekObj, fnFilter) => { period.endDate = formatYyyyMmDd(date) const weekNumber = week - period.getName = () => - `${i18n.t('Week {{weekNumber}}', { weekNumber })} - ${ - period.startDate - } - ${period.endDate}` + period.name = `${i18n.t('Week {{weekNumber}}', { weekNumber })} - ${ + period.startDate + } - ${period.endDate}` // if end date is Jan 4th or later, week belongs to next year if (date.getFullYear() > year && date.getDate() >= 4) { @@ -124,7 +123,7 @@ const weeklyPeriodType = (formatYyyyMmDd, weekObj, fnFilter) => { } } -const biWeeklyPeriodType = (formatYyyyMmDd, fnFilter) => { +const getBiWeeklyPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -151,10 +150,9 @@ const biWeeklyPeriodType = (formatYyyyMmDd, fnFilter) => { period.endDate = formatYyyyMmDd(date) const biWeekNumber = biWeek - period.getName = () => - `${i18n.t('Bi-Week {{biWeekNumber}}', { biWeekNumber })} - ${ - period.startDate - } - ${period.endDate}` + period.name = `${i18n.t('Bi-Week {{biWeekNumber}}', { + biWeekNumber, + })} - ${period.startDate} - ${period.endDate}` // if end date is Jan 4th or later, biweek belongs to next year if (date.getFullYear() > year && date.getDate() >= 4) { @@ -175,7 +173,7 @@ const biWeeklyPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const monthlyPeriodType = (formatYyyyMmDd, fnFilter) => { +const getMonthlyPeriodType = (formatYyyyMmDd, fnFilter) => { const formatIso = date => { const y = date.getFullYear() let m = String(date.getMonth() + 1) @@ -201,7 +199,7 @@ const monthlyPeriodType = (formatYyyyMmDd, fnFilter) => { date.setDate(1) period.startDate = formatYyyyMmDd(date) const monthName = getMonthName(date.getMonth()) - period.getName = () => `${monthName} ${year}` + period.name = `${monthName} ${year}` period.iso = formatIso(date) period.id = period.iso @@ -217,7 +215,7 @@ const monthlyPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const biMonthlyPeriodType = (formatYyyyMmDd, fnFilter) => { +const getBiMonthlyPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -237,7 +235,7 @@ const biMonthlyPeriodType = (formatYyyyMmDd, fnFilter) => { const monthStart = getMonthName(date.getMonth()) const monthEnd = getMonthName(date.getMonth() + 1) const fullYear = date.getFullYear() - period.getName = () => `${monthStart} - ${monthEnd} ${fullYear}` + period.name = `${monthStart} - ${monthEnd} ${fullYear}` period.iso = `${year}0${index}B` period.id = period.iso periods.push(period) @@ -254,7 +252,7 @@ const biMonthlyPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const quarterlyPeriodType = (formatYyyyMmDd, fnFilter) => { +const getQuarterlyPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -274,7 +272,7 @@ const quarterlyPeriodType = (formatYyyyMmDd, fnFilter) => { const monthStart = getMonthName(date.getMonth()) const monthEnd = getMonthName(date.getMonth() + 2) const fullYear = date.getFullYear() - period.getName = () => `${monthStart} - ${monthEnd} ${fullYear}` + period.name = `${monthStart} - ${monthEnd} ${fullYear}` period.iso = `${year}Q${quarter}` period.id = period.iso periods.push(period) @@ -290,7 +288,7 @@ const quarterlyPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const sixMonthlyPeriodType = fnFilter => { +const getSixMonthlyPeriodType = fnFilter => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -301,7 +299,7 @@ const sixMonthlyPeriodType = fnFilter => { let period = {} period.startDate = `${year}-01-01` period.endDate = `${year}-06-30` - period.getName = () => `${getMonthName(0)} - ${getMonthName(5)} ${year}` + period.name = `${getMonthName(0)} - ${getMonthName(5)} ${year}` period.iso = `${year}S1` period.id = period.iso periods.push(period) @@ -309,8 +307,7 @@ const sixMonthlyPeriodType = fnFilter => { period = {} period.startDate = `${year}-07-01` period.endDate = `${year}-12-31` - period.getName = () => - `${getMonthName(6)} - ${getMonthName(11)} ${year}` + period.name = `${getMonthName(6)} - ${getMonthName(11)} ${year}` period.iso = `${year}S2` period.id = period.iso periods.push(period) @@ -322,7 +319,7 @@ const sixMonthlyPeriodType = fnFilter => { } } -const sixMonthlyAprilPeriodType = fnFilter => { +const getSixMonthlyAprilPeriodType = fnFilter => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -333,7 +330,7 @@ const sixMonthlyAprilPeriodType = fnFilter => { let period = {} period.startDate = `${year}-04-01` period.endDate = `${year}-09-30` - period.getName = () => `${getMonthName(3)} - ${getMonthName(8)} ${year}` + period.name = `${getMonthName(3)} - ${getMonthName(8)} ${year}` period.iso = `${year}AprilS1` period.id = period.iso periods.push(period) @@ -341,8 +338,8 @@ const sixMonthlyAprilPeriodType = fnFilter => { period = {} period.startDate = `${year}-10-01` period.endDate = `${year + 1}-03-31` - period.getName = () => - `${getMonthName(9)} ${year} - ${getMonthName(2)} ${year + 1}` + period.name = `${getMonthName(9)} ${year} - ${getMonthName(2)} ${year + + 1}` period.iso = `${year}AprilS2` period.id = period.iso periods.push(period) @@ -354,7 +351,7 @@ const sixMonthlyAprilPeriodType = fnFilter => { } } -const yearlyPeriodType = (formatYyyyMmDd, fnFilter) => { +const getYearlyPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -369,7 +366,7 @@ const yearlyPeriodType = (formatYyyyMmDd, fnFilter) => { date.setMonth(0, 1) period.startDate = formatYyyyMmDd(date) const dateString = date.getFullYear().toString() - period.getName = () => dateString + period.name = dateString period.iso = date.getFullYear().toString() period.id = period.iso.toString() periods.push(period) @@ -384,7 +381,7 @@ const yearlyPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const financialOctoberPeriodType = (formatYyyyMmDd, fnFilter) => { +const getFinancialOctoberPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -401,10 +398,9 @@ const financialOctoberPeriodType = (formatYyyyMmDd, fnFilter) => { period.startDate = formatYyyyMmDd(date) const yearStart = date.getFullYear() const yearEnd = date.getFullYear() + 1 - period.getName = () => - `${getMonthName(9)} ${yearStart} - ${getMonthName( - 8 - )} ${yearEnd}` + period.name = `${getMonthName(9)} ${yearStart} - ${getMonthName( + 8 + )} ${yearEnd}` period.id = `${date.getFullYear()}Oct` periods.push(period) date.setDate(date.getDate() - 1) @@ -418,7 +414,7 @@ const financialOctoberPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const financialNovemberPeriodType = (formatYyyyMmDd, fnFilter) => { +const getFinancialNovemberPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -435,10 +431,9 @@ const financialNovemberPeriodType = (formatYyyyMmDd, fnFilter) => { period.startDate = formatYyyyMmDd(date) const yearStart = date.getFullYear() const yearEnd = date.getFullYear() + 1 - period.getName = () => - `${getMonthName(10)} ${yearStart} - ${getMonthName( - 9 - )} ${yearEnd}` + period.name = `${getMonthName(10)} ${yearStart} - ${getMonthName( + 9 + )} ${yearEnd}` period.id = `${date.getFullYear()}Nov` periods.push(period) date.setDate(date.getDate() - 1) @@ -452,7 +447,7 @@ const financialNovemberPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const financialJulyPeriodType = (formatYyyyMmDd, fnFilter) => { +const getFinancialJulyPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -469,10 +464,9 @@ const financialJulyPeriodType = (formatYyyyMmDd, fnFilter) => { period.startDate = formatYyyyMmDd(date) const yearStart = date.getFullYear() const yearEnd = date.getFullYear() + 1 - period.getName = () => - `${getMonthName(6)} ${yearStart} - ${getMonthName( - 5 - )} ${yearEnd}` + period.name = `${getMonthName(6)} ${yearStart} - ${getMonthName( + 5 + )} ${yearEnd}` period.id = `${date.getFullYear()}July` periods.push(period) date.setDate(date.getDate() - 1) @@ -486,7 +480,7 @@ const financialJulyPeriodType = (formatYyyyMmDd, fnFilter) => { } } -const financialAprilPeriodType = (formatYyyyMmDd, fnFilter) => { +const getFinancialAprilPeriodType = (formatYyyyMmDd, fnFilter) => { return config => { let periods = [] const offset = parseInt(config.offset, 10) @@ -503,10 +497,9 @@ const financialAprilPeriodType = (formatYyyyMmDd, fnFilter) => { period.startDate = formatYyyyMmDd(date) const yearStart = date.getFullYear() const yearEnd = date.getFullYear() + 1 - period.getName = () => - `${getMonthName(3)} ${yearStart} - ${getMonthName( - 2 - )} ${yearEnd}` + period.name = `${getMonthName(3)} ${yearStart} - ${getMonthName( + 2 + )} ${yearEnd}` period.id = `${date.getFullYear()}April` periods.push(period) date.setDate(date.getDate() - 1) @@ -544,127 +537,127 @@ const filterFuturePeriods = periods => { return array } -const options = [ +const getOptions = () => [ { id: DAILY, - getPeriods: dailyPeriodType(formatYyyyMmDd, filterFuturePeriods), - getName: () => i18n.t('Daily'), + getPeriods: getDailyPeriodType(formatYyyyMmDd, filterFuturePeriods), + name: i18n.t('Daily'), }, { id: WEEKLY, - getPeriods: weeklyPeriodType( + getPeriods: getWeeklyPeriodType( formatYyyyMmDd, { shortName: '', startDay: 1 }, filterFuturePeriods ), - getName: () => i18n.t('Weekly'), + name: i18n.t('Weekly'), }, { id: BIWEEKLY, - getPeriods: biWeeklyPeriodType(formatYyyyMmDd, filterFuturePeriods), - getName: () => i18n.t('Bi-weekly'), + getPeriods: getBiWeeklyPeriodType(formatYyyyMmDd, filterFuturePeriods), + name: i18n.t('Bi-weekly'), }, { id: WEEKLYWED, - getPeriods: weeklyPeriodType( + getPeriods: getWeeklyPeriodType( formatYyyyMmDd, { shortName: 'Wed', startDay: 3 }, filterFuturePeriods ), - getName: () => i18n.t('Weekly (Start Wednesday)'), + name: i18n.t('Weekly (Start Wednesday)'), }, { id: WEEKLYTHU, - getPeriods: weeklyPeriodType( + getPeriods: getWeeklyPeriodType( formatYyyyMmDd, { shortName: 'Thu', startDay: 4 }, filterFuturePeriods ), - getName: () => i18n.t('Weekly (Start Thursday)'), + name: i18n.t('Weekly (Start Thursday)'), }, { id: WEEKLYSAT, - getPeriods: weeklyPeriodType( + getPeriods: getWeeklyPeriodType( formatYyyyMmDd, { shortName: 'Sat', startDay: 6 }, filterFuturePeriods ), - getName: () => i18n.t('Weekly (Start Saturday)'), + name: i18n.t('Weekly (Start Saturday)'), }, { id: WEEKLYSUN, - getPeriods: weeklyPeriodType( + getPeriods: getWeeklyPeriodType( formatYyyyMmDd, { shortName: 'Sun', startDay: 7 }, filterFuturePeriods ), - getName: () => i18n.t('Weekly (Start Sunday)'), + name: i18n.t('Weekly (Start Sunday)'), }, { id: MONTHLY, - getPeriods: monthlyPeriodType(formatYyyyMmDd, filterFuturePeriods), - getName: () => i18n.t('Monthly'), + getPeriods: getMonthlyPeriodType(formatYyyyMmDd, filterFuturePeriods), + name: i18n.t('Monthly'), }, { id: BIMONTHLY, - getPeriods: biMonthlyPeriodType(formatYyyyMmDd, filterFuturePeriods), - getName: () => i18n.t('Bi-monthly'), + getPeriods: getBiMonthlyPeriodType(formatYyyyMmDd, filterFuturePeriods), + name: i18n.t('Bi-monthly'), }, { id: QUARTERLY, - getPeriods: quarterlyPeriodType(formatYyyyMmDd, filterFuturePeriods), - getName: () => i18n.t('Quarterly'), + getPeriods: getQuarterlyPeriodType(formatYyyyMmDd, filterFuturePeriods), + name: i18n.t('Quarterly'), }, { id: SIXMONTHLY, - getPeriods: sixMonthlyPeriodType(filterFuturePeriods), - getName: () => i18n.t('Six-monthly'), + getPeriods: getSixMonthlyPeriodType(filterFuturePeriods), + name: i18n.t('Six-monthly'), }, { id: SIXMONTHLYAPR, - getPeriods: sixMonthlyAprilPeriodType(filterFuturePeriods), - getName: () => i18n.t('Six-monthly April'), + getPeriods: getSixMonthlyAprilPeriodType(filterFuturePeriods), + name: i18n.t('Six-monthly April'), }, { id: YEARLY, - getPeriods: yearlyPeriodType(formatYyyyMmDd, filterFuturePeriods), - getName: () => i18n.t('Yearly'), + getPeriods: getYearlyPeriodType(formatYyyyMmDd, filterFuturePeriods), + name: i18n.t('Yearly'), }, { id: FYNOV, - getPeriods: financialNovemberPeriodType( + getPeriods: getFinancialNovemberPeriodType( formatYyyyMmDd, filterFuturePeriods ), - getName: () => i18n.t('Financial year (Start November)'), + name: i18n.t('Financial year (Start November)'), }, { id: FYOCT, - getPeriods: financialOctoberPeriodType( + getPeriods: getFinancialOctoberPeriodType( formatYyyyMmDd, filterFuturePeriods ), - getName: () => i18n.t('Financial year (Start October)'), + name: i18n.t('Financial year (Start October)'), }, { id: FYJUL, - getPeriods: financialJulyPeriodType( + getPeriods: getFinancialJulyPeriodType( formatYyyyMmDd, filterFuturePeriods ), - getName: () => i18n.t('Financial year (Start July)'), + name: i18n.t('Financial year (Start July)'), }, { id: FYAPR, - getPeriods: financialAprilPeriodType( + getPeriods: getFinancialAprilPeriodType( formatYyyyMmDd, filterFuturePeriods ), - getName: () => i18n.t('Financial year (Start April)'), + name: i18n.t('Financial year (Start April)'), }, ] export const getFixedPeriodsOptionsById = id => - options.find(option => option.id === id) + getOptions().find(option => option.id === id) -export const getFixedPeriodsOptions = () => options +export const getFixedPeriodsOptions = () => getOptions() diff --git a/src/components/PeriodDimension/utils/relativePeriods.js b/src/components/PeriodDimension/utils/relativePeriods.js index b1f5e9dd3..8ed450681 100644 --- a/src/components/PeriodDimension/utils/relativePeriods.js +++ b/src/components/PeriodDimension/utils/relativePeriods.js @@ -10,131 +10,139 @@ export const SIXMONTHS = 'SixMonths' export const FINACIALYEARS = 'FinancialYears' export const YEARS = 'Years' -const daysPeriodType = () => [ - { id: 'TODAY', getName: () => i18n.t('Today') }, - { id: 'YESTERDAY', getName: () => i18n.t('Yesterday') }, - { id: 'LAST_3_DAYS', getName: () => i18n.t('Last 3 days') }, - { id: 'LAST_7_DAYS', getName: () => i18n.t('Last 7 days') }, - { id: 'LAST_14_DAYS', getName: () => i18n.t('Last 14 days') }, +const getDaysPeriodType = () => [ + { id: 'TODAY', name: i18n.t('Today') }, + { id: 'YESTERDAY', name: i18n.t('Yesterday') }, + { id: 'LAST_3_DAYS', name: i18n.t('Last 3 days') }, + { id: 'LAST_7_DAYS', name: i18n.t('Last 7 days') }, + { id: 'LAST_14_DAYS', name: i18n.t('Last 14 days') }, ] -const weeksPeriodType = () => [ - { id: 'THIS_WEEK', getName: () => i18n.t('This week') }, - { id: 'LAST_WEEK', getName: () => i18n.t('Last week') }, - { id: 'LAST_4_WEEKS', getName: () => i18n.t('Last 4 weeks') }, - { id: 'LAST_12_WEEKS', getName: () => i18n.t('Last 12 weeks') }, - { id: 'LAST_52_WEEKS', getName: () => i18n.t('Last 52 weeks') }, - { id: 'WEEKS_THIS_YEAR', getName: () => i18n.t('Weeks this year') }, +const getWeeksPeriodType = () => [ + { id: 'THIS_WEEK', name: i18n.t('This week') }, + { id: 'LAST_WEEK', name: i18n.t('Last week') }, + { id: 'LAST_4_WEEKS', name: i18n.t('Last 4 weeks') }, + { id: 'LAST_12_WEEKS', name: i18n.t('Last 12 weeks') }, + { id: 'LAST_52_WEEKS', name: i18n.t('Last 52 weeks') }, + { id: 'WEEKS_THIS_YEAR', name: i18n.t('Weeks this year') }, ] -const biWeeksPeriodType = () => [ - { id: 'THIS_BIWEEK', getName: () => i18n.t('This bi-week') }, - { id: 'LAST_BIWEEK', getName: () => i18n.t('Last bi-week') }, - { id: 'LAST_4_BIWEEKS', getName: () => i18n.t('Last 4 bi-weeks') }, +const getBiWeeksPeriodType = () => [ + { id: 'THIS_BIWEEK', name: i18n.t('This bi-week') }, + { id: 'LAST_BIWEEK', name: i18n.t('Last bi-week') }, + { id: 'LAST_4_BIWEEKS', name: i18n.t('Last 4 bi-weeks') }, ] -const monthsPeriodType = () => [ - { id: 'THIS_MONTH', getName: () => i18n.t('This month') }, - { id: 'LAST_MONTH', getName: () => i18n.t('Last month') }, - { id: 'LAST_3_MONTHS', getName: () => i18n.t('Last 3 months') }, - { id: 'LAST_6_MONTHS', getName: () => i18n.t('Last 6 months') }, - { id: 'LAST_12_MONTHS', getName: () => i18n.t('Last 12 months') }, +const getMonthsPeriodType = () => [ + { id: 'THIS_MONTH', name: i18n.t('This month') }, + { id: 'LAST_MONTH', name: i18n.t('Last month') }, + { id: 'LAST_3_MONTHS', name: i18n.t('Last 3 months') }, + { id: 'LAST_6_MONTHS', name: i18n.t('Last 6 months') }, + { id: 'LAST_12_MONTHS', name: i18n.t('Last 12 months') }, { id: 'MONTHS_THIS_YEAR', - getName: () => i18n.t('Months this year'), + name: i18n.t('Months this year'), }, ] -const biMonthsPeriodType = () => [ - { id: 'THIS_BIMONTH', getName: () => i18n.t('This bi-month') }, - { id: 'LAST_BIMONTH', getName: () => i18n.t('Last bi-month') }, +const getBiMonthsPeriodType = () => [ + { id: 'THIS_BIMONTH', name: i18n.t('This bi-month') }, + { id: 'LAST_BIMONTH', name: i18n.t('Last bi-month') }, { id: 'LAST_6_BIMONTHS', - getName: () => i18n.t('Last 6 bi-months'), + name: i18n.t('Last 6 bi-months'), }, { id: 'BIMONTHS_THIS_YEAR', - getName: () => i18n.t('Bi-months this year'), + name: i18n.t('Bi-months this year'), }, ] -const quartersPeriodType = () => [ - { id: 'THIS_QUARTER', getName: () => i18n.t('This quarter') }, - { id: 'LAST_QUARTER', getName: () => i18n.t('Last quarter') }, - { id: 'LAST_4_QUARTERS', getName: () => i18n.t('Last 4 quarters') }, +const getQuartersPeriodType = () => [ + { id: 'THIS_QUARTER', name: i18n.t('This quarter') }, + { id: 'LAST_QUARTER', name: i18n.t('Last quarter') }, + { id: 'LAST_4_QUARTERS', name: i18n.t('Last 4 quarters') }, { id: 'QUARTERS_THIS_YEAR', - getName: () => i18n.t('Quarters this year'), + name: i18n.t('Quarters this year'), }, ] -const sixMonthsPeriodType = () => [ - { id: 'THIS_SIX_MONTH', getName: () => i18n.t('This six-month') }, - { id: 'LAST_SIX_MONTH', getName: () => i18n.t('Last six-month') }, +const getSixMonthsPeriodType = () => [ + { id: 'THIS_SIX_MONTH', name: i18n.t('This six-month') }, + { id: 'LAST_SIX_MONTH', name: i18n.t('Last six-month') }, { id: 'LAST_2_SIXMONTHS', - getName: () => i18n.t('Last 2 six-month'), + name: i18n.t('Last 2 six-month'), }, ] -const financialYearsPeriodType = () => [ +const getFinancialYearsPeriodType = () => [ { id: 'THIS_FINANCIAL_YEAR', - getName: () => i18n.t('This financial year'), + name: i18n.t('This financial year'), }, { id: 'LAST_FINANCIAL_YEAR', - getName: () => i18n.t('Last financial year'), + name: i18n.t('Last financial year'), }, { id: 'LAST_5_FINANCIAL_YEARS', - getName: () => i18n.t('Last 5 financial years'), + name: i18n.t('Last 5 financial years'), }, ] -const yearsPeriodType = () => [ - { id: 'THIS_YEAR', getName: () => i18n.t('This year') }, - { id: 'LAST_YEAR', getName: () => i18n.t('Last year') }, - { id: 'LAST_5_YEARS', getName: () => i18n.t('Last 5 years') }, +const getYearsPeriodType = () => [ + { id: 'THIS_YEAR', name: i18n.t('This year') }, + { id: 'LAST_YEAR', name: i18n.t('Last year') }, + { id: 'LAST_5_YEARS', name: i18n.t('Last 5 years') }, ] -const options = [ - { id: DAYS, getPeriods: daysPeriodType, getName: () => i18n.t('Days') }, - { id: WEEKS, getPeriods: weeksPeriodType, getName: () => i18n.t('Weeks') }, +const getOptions = () => [ + { id: DAYS, getPeriods: () => getDaysPeriodType(), name: i18n.t('Days') }, + { + id: WEEKS, + getPeriods: () => getWeeksPeriodType(), + name: i18n.t('Weeks'), + }, { id: BIWEEKS, - getPeriods: biWeeksPeriodType, - getName: () => i18n.t('Bi-weeks'), + getPeriods: () => getBiWeeksPeriodType(), + name: i18n.t('Bi-weeks'), }, { id: MONTHS, - getPeriods: monthsPeriodType, - getName: () => i18n.t('Months'), + getPeriods: () => getMonthsPeriodType(), + name: i18n.t('Months'), }, { id: BIMONTHS, - getPeriods: biMonthsPeriodType, - getName: () => i18n.t('Bi-months'), + getPeriods: () => getBiMonthsPeriodType(), + name: i18n.t('Bi-months'), }, { id: QUARTERS, - getPeriods: quartersPeriodType, - getName: () => i18n.t('Quarters'), + getPeriods: () => getQuartersPeriodType(), + name: i18n.t('Quarters'), }, { id: SIXMONTHS, - getPeriods: sixMonthsPeriodType, - getName: () => i18n.t('Six-months'), + getPeriods: () => getSixMonthsPeriodType(), + name: i18n.t('Six-months'), }, { id: FINACIALYEARS, - getPeriods: financialYearsPeriodType, - getName: () => i18n.t('Financial Years'), + getPeriods: () => getFinancialYearsPeriodType(), + name: i18n.t('Financial Years'), + }, + { + id: YEARS, + getPeriods: () => getYearsPeriodType(), + name: i18n.t('Years'), }, - { id: YEARS, getPeriods: yearsPeriodType, getName: () => i18n.t('Years') }, ] export const getRelativePeriodsOptionsById = id => - options.find(option => option.id === id) + getOptions().find(option => option.id === id) -export const getRelativePeriodsOptions = () => options +export const getRelativePeriodsOptions = () => getOptions() diff --git a/src/components/PivotTable/styles/PivotTable.style.js b/src/components/PivotTable/styles/PivotTable.style.js index f575c681e..c51a6e611 100644 --- a/src/components/PivotTable/styles/PivotTable.style.js +++ b/src/components/PivotTable/styles/PivotTable.style.js @@ -1,5 +1,5 @@ import css from 'styled-jsx/css' -import { colors } from '@dhis2/ui-core' +import { colors } from '@dhis2/ui' import { DISPLAY_DENSITY_PADDING_COMPACT, DISPLAY_DENSITY_PADDING_NORMAL, diff --git a/src/components/TransferOption.js b/src/components/TransferOption.js index b77882d54..598ac3b39 100644 --- a/src/components/TransferOption.js +++ b/src/components/TransferOption.js @@ -1,11 +1,9 @@ -import React, { useRef } from 'react' +import React from 'react' import cx from 'classnames' import propTypes from '@dhis2/prop-types' import styles from './styles/TransferOption.style' -const DOUBLE_CLICK_MAX_DELAY = 500 - export const TransferOption = ({ disabled, label, @@ -15,30 +13,17 @@ export const TransferOption = ({ value, icon, }) => { - const doubleClickTimeout = useRef(null) - return (
{ if (disabled) return - - const option = { label, value } - - if (doubleClickTimeout.current) { - clearTimeout(doubleClickTimeout.current) - doubleClickTimeout.current = null - - onDoubleClick({ option }, event) - } else { - doubleClickTimeout.current = setTimeout(() => { - clearTimeout(doubleClickTimeout.current) - doubleClickTimeout.current = null - }, DOUBLE_CLICK_MAX_DELAY) - - onClick({ option }, event) - } + onClick({ label, value }, event) + }} + onDoubleClick={event => { + if (disabled) return + onDoubleClick({ label, value }, event) }} > {icon} diff --git a/src/components/styles/DimensionSelector.style.js b/src/components/styles/DimensionSelector.style.js index 68aea8b9a..932b6f699 100644 --- a/src/components/styles/DimensionSelector.style.js +++ b/src/components/styles/DimensionSelector.style.js @@ -1,5 +1,5 @@ import css from 'styled-jsx/css' -import { spacers, colors } from '@dhis2/ui-core' +import { spacers, colors } from '@dhis2/ui' export default css` .filterContainer { diff --git a/src/components/styles/DimensionsPanel.style.js b/src/components/styles/DimensionsPanel.style.js index 04d7624fa..391f3655a 100644 --- a/src/components/styles/DimensionsPanel.style.js +++ b/src/components/styles/DimensionsPanel.style.js @@ -1,4 +1,4 @@ -import { colors } from '@dhis2/ui-core' +import { colors } from '@dhis2/ui' export const styles = { divContainer: { diff --git a/src/components/styles/FilterField.style.js b/src/components/styles/FilterField.style.js index 62893a6ed..74c11d342 100644 --- a/src/components/styles/FilterField.style.js +++ b/src/components/styles/FilterField.style.js @@ -1,5 +1,5 @@ import css from 'styled-jsx/css' -import { colors } from '@dhis2/ui-core' +import { colors } from '@dhis2/ui' export default css` .container { diff --git a/src/components/styles/TransferOption.style.js b/src/components/styles/TransferOption.style.js index 47675b039..064004dd2 100644 --- a/src/components/styles/TransferOption.style.js +++ b/src/components/styles/TransferOption.style.js @@ -1,5 +1,5 @@ import css from 'styled-jsx/css' -import { colors, spacers, theme } from '@dhis2/ui-core' +import { colors, spacers, theme } from '@dhis2/ui' export default css` .wrapper:last-child { diff --git a/src/modules/pivotTable/applyLegendSet.js b/src/modules/pivotTable/applyLegendSet.js index bee0e84bf..704f8ae45 100644 --- a/src/modules/pivotTable/applyLegendSet.js +++ b/src/modules/pivotTable/applyLegendSet.js @@ -1,5 +1,5 @@ import { isColorBright } from './isColorBright' -import { colors } from '@dhis2/ui-core' +import { colors } from '@dhis2/ui' import { getColorByValueFromLegendSet, LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM, diff --git a/yarn.lock b/yarn.lock index ef46bc7c0..a429bbebc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -936,6 +936,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.10.0": + version "7.10.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839" + integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.4.0", "@babel/template@^7.8.3", "@babel/template@^7.8.6": version "7.8.6" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b" @@ -1139,6 +1146,24 @@ resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-2.1.1.tgz#442946bd52f1d4a968cf1ba05e68440f11f78996" integrity sha512-jYf3YNiPE9RrAPD9C980s/3dhSh8JEq1s3B82O9T7gf+Vx2/covDIPnyU+64HmEjER+6gR5wHWbp7jOzBYSgLA== +"@dhis2/app-runtime@^2.2.1": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-2.2.2.tgz#c2129c03d4ff3bca4eb3811d82f24d3acea07e5a" + integrity sha512-0890q1deNT/aJtjtxkDROViZBrA0EP00HVMht8YAfM+uJsnvADrtjizP53r68uamZWpCZmLQsi+2xiVAQZmvXA== + dependencies: + "@dhis2/app-service-config" "2.2.2" + "@dhis2/app-service-data" "2.2.2" + +"@dhis2/app-service-config@2.2.2": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-2.2.2.tgz#9de0bc717ede669ee810fb7d4d84c0d35532a426" + integrity sha512-ohPCNX1hBMh/+0L5gxrSrfH/Bz787x60L4GMWODO0WEO73M6kGCjzaYZ0vjgmSCSUYJxZ6cBeybr0FBArxHjbw== + +"@dhis2/app-service-data@2.2.2": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-2.2.2.tgz#093d45b8bb71b5b1e81876281379cda52b6632a7" + integrity sha512-QJrYTFj+vINcqvr27yLIKunbNJTVmDPGr9fUliUdmTkCikTwlnK8fu6TPz3rhkOUYX0VrwzFJXp3ofKQajZ9mQ== + "@dhis2/app-shell@4.0.8": version "4.0.8" resolved "https://registry.yarnpkg.com/@dhis2/app-shell/-/app-shell-4.0.8.tgz#cb9e1428e78c5edbdad7b19d7fc5baa27a4668e8" @@ -1237,7 +1262,7 @@ semver "^7.1.3" yargs "^15.3.1" -"@dhis2/d2-i18n@^1.0.5", "@dhis2/d2-i18n@^1.0.6": +"@dhis2/d2-i18n@^1", "@dhis2/d2-i18n@^1.0.5", "@dhis2/d2-i18n@^1.0.6": version "1.0.6" resolved "https://registry.yarnpkg.com/@dhis2/d2-i18n/-/d2-i18n-1.0.6.tgz#2914be8acf296f3a6bf7b51c76c46da6a120b0ff" integrity sha512-7YdA4ppFosjuyf7ZMm47BrdsA5TWLM9lmS0lUPgjcCVeeWfUgagqzf4W5JGB9XQ3w1vzK+yy5zH2Ij8IgRAGhA== @@ -1283,7 +1308,27 @@ dependencies: prop-types "^15" -"@dhis2/ui-core@^4.21.1", "@dhis2/ui-core@^4.6.1": +"@dhis2/ui-constants@5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@dhis2/ui-constants/-/ui-constants-5.0.3.tgz#8d6e6adc5c7ac3de92236dd97f9be01cc18c3ed5" + integrity sha512-9dnnmc+ztKmstM/AftGs+att4qShZUJWjeLRGMbnFE/fDwAwqvNCgGzmOM3K6YWXrrvJXjQC5TVOzhmqS0jReQ== + dependencies: + "@dhis2/prop-types" "^1.6.4" + +"@dhis2/ui-core@5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-5.0.3.tgz#6098eb547d8cbe3453cb6f8e425512c14d7e68ef" + integrity sha512-lh6WhLq0mi9+AX7U9ScfzaPxk3nCl4yNc8LPYt/87AdM/OB7gBytDEg4qjdXlKpvstcytzV0AAUWvvkTqk7N5w== + dependencies: + "@dhis2/prop-types" "^1.6.4" + "@dhis2/ui-constants" "5.0.3" + "@dhis2/ui-icons" "5.0.3" + "@popperjs/core" "^2.4.0" + classnames "^2.2.6" + react-popper "^2.2.3" + resize-observer-polyfill "^1.5.1" + +"@dhis2/ui-core@^4.6.1": version "4.21.1" resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-4.21.1.tgz#2b5518f6bd5de75404df3eefa83452e0c40852aa" integrity sha512-dpK4UwktLw9qcRkDe5wU76j35ntoulqKpcaBoxXZ1+/rzR2FeaJ+w4l+I+bg45jcK9WjLLsFClc1zi+O/MG1MA== @@ -1294,6 +1339,38 @@ react-popper "^2.2.3" resize-observer-polyfill "^1.5.1" +"@dhis2/ui-forms@5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@dhis2/ui-forms/-/ui-forms-5.0.3.tgz#ccfd3d7b2d157eae408c6efcf5f9448e95573855" + integrity sha512-+x+9XsT7ChdmXsnE6BM/1J2/Z/1SUH45aUid8XA1wS0I31VUAwG+2g0VKqszqGHke+wKgMRwPAKNbGfChuQv1w== + dependencies: + "@dhis2/prop-types" "^1.6.4" + "@dhis2/ui-core" "5.0.3" + classnames "^2.2.6" + final-form "^4.20.0" + react-final-form "^6.5.0" + +"@dhis2/ui-icons@5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@dhis2/ui-icons/-/ui-icons-5.0.3.tgz#73618454633cc7c76d7683e0c1f7820ab2da7945" + integrity sha512-KzWr6AZAPI7nXlsZOsJgf+5htDrHnQFYc16YwpkaeW7fMh+6LT4QqlVayKAqme/4KidVb9UeOGEqF5nMyl2quw== + dependencies: + "@dhis2/prop-types" "^1.6.4" + +"@dhis2/ui-widgets@5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@dhis2/ui-widgets/-/ui-widgets-5.0.3.tgz#1c7836892a9394ee0b78ee57e6d972f34769c582" + integrity sha512-ABjZiJ0ZGrKzDFiDfGizTYdTJvsmqf6fMywr9qUS+AR2p0xDtCfZsi+lURlV9yh35rWm9+/kEgMEet3T5gfHxQ== + dependencies: + "@dhis2/app-runtime" "^2.2.1" + "@dhis2/d2-i18n" "^1" + "@dhis2/prop-types" "^1.6.4" + "@dhis2/ui-constants" "5.0.3" + "@dhis2/ui-core" "5.0.3" + "@dhis2/ui-icons" "5.0.3" + classnames "^2.2.6" + resize-observer-polyfill "^1.5.1" + "@dhis2/ui-widgets@^2.1.1": version "2.1.1" resolved "https://registry.yarnpkg.com/@dhis2/ui-widgets/-/ui-widgets-2.1.1.tgz#23b1887c0190e83bb7a41e6b570dfd41ba99d838" @@ -1302,6 +1379,17 @@ "@dhis2/prop-types" "^1.6" classnames "^2.2.6" +"@dhis2/ui@^5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@dhis2/ui/-/ui-5.0.3.tgz#fb59afd3bf89a7d61754d86e2d8461622660c983" + integrity sha512-U82vkn1GJzbSGW4xhYuBiVXeyuQLc+fP+5ZmK7pTUwJHTrlZKBxfpmX80cWYKswCDV21EXLlyd/ESrjkEG2dQw== + dependencies: + "@dhis2/ui-constants" "5.0.3" + "@dhis2/ui-core" "5.0.3" + "@dhis2/ui-forms" "5.0.3" + "@dhis2/ui-icons" "5.0.3" + "@dhis2/ui-widgets" "5.0.3" + "@emotion/cache@^10.0.27": version "10.0.29" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" @@ -1713,6 +1801,11 @@ "@storybook/react" "^5.3.3" uuid "^3.1.0" +"@scarf/scarf@^1.0.5": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@scarf/scarf/-/scarf-1.0.5.tgz#accee0bce88a9047672f7c8faf3cada59c996b81" + integrity sha512-9WKaGVpQH905Aqkk+BczFEeLQxS07rl04afFRPUG9IcSlOwmo5EVVuuNu0d4M9LMYucObvK0LoAe+5HfMW2QhQ== + "@sindresorhus/is@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea" @@ -6805,6 +6898,14 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +final-form@^4.20.0: + version "4.20.0" + resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.0.tgz#454ba46f783a4c4404ad875cf36f470395ad5efa" + integrity sha512-kdPGNlR/23M2p7ccVwE/vCBQH9TH1NAhhMVkETHbaQXkTWIJdEii3ZdHrOgYvFY7O87myEhcqzx3zjMERtoNJg== + dependencies: + "@babel/runtime" "^7.10.0" + "@scarf/scarf" "^1.0.5" + finalhandler@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d" @@ -12610,6 +12711,15 @@ react-fast-compare@^3.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.1.1.tgz#0becf31e3812fa70dc231e259f40d892d4767900" integrity sha512-SCsAORWK59BvauR2L1BTdjQbJcSGJJz03U0awektk2hshLKrITDDFTlgGCqIZpTDlPC/NFlZee6xTMzXPVLiHw== +react-final-form@^6.5.0: + version "6.5.0" + resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.5.0.tgz#b0440acf534fd57991c048764ab20af13124aed6" + integrity sha512-H97PLCtfMIN32NHqm85E738Pj+NOF1p0eQEG+h5DbdaofwtqDRp7taHu45+PlXOqg9ANbM6MyXkYxWpIiE6qbQ== + dependencies: + "@babel/runtime" "^7.10.0" + "@scarf/scarf" "^1.0.5" + ts-essentials "^6.0.5" + react-focus-lock@^2.1.0: version "2.2.1" resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a" @@ -14855,6 +14965,11 @@ ts-dedent@^1.1.0: resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.1.tgz#68fad040d7dbd53a90f545b450702340e17d18f3" integrity sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg== +ts-essentials@^6.0.5: + version "6.0.5" + resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-6.0.5.tgz#dd5b98f73bd56dc94d15dfbc0fbf01da3163eb42" + integrity sha512-RSAKlpu+E0DCGY8FsbG92EveRLw2Y+UgK3ksX01w1VaHeG01dKkYo/KtAV4q0qPT6nPbLfyerb2YPVSediP+8g== + ts-pnp@1.1.6, ts-pnp@^1.1.2, ts-pnp@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"