Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: avoid breaking selects [DHIS2-16264] (#1963)
Browse files Browse the repository at this point in the history
* fix: loading logic

* fix: hide stateful selects to preserve state

* chore: format

* chore: update snapshots
KaiVandivier committed Dec 15, 2023
1 parent f32d91f commit 18ee743
Showing 6 changed files with 22 additions and 6 deletions.
2 changes: 1 addition & 1 deletion src/components/ElementSchemes/DataElementIdScheme.js
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ const DataElementIdScheme = ({
fetchAttributes(`${baseUrl}/api/`, 'dataElementAttribute')
.then((attributes) => setSchemes(attributes))
.catch((error) => setError(error))
setLoading(false)
.finally(() => setLoading(false))
}, [])

Check warning on line 26 in src/components/ElementSchemes/DataElementIdScheme.js

GitHub Actions / lint

React Hook useEffect has a missing dependency: 'baseUrl'. Either include it or remove the dependency array

const validationText =
2 changes: 1 addition & 1 deletion src/components/ElementSchemes/OrgUnitIdScheme.js
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ const OrgUnitIdScheme = ({ name, label, orgUnitIdSchemeOptions, dataTest }) => {
fetchAttributes(`${baseUrl}/api/`, 'organisationUnitAttribute')
.then((attributes) => setSchemes(attributes))
.catch((error) => setError(error))
setLoading(false)
.finally(() => setLoading(false))
}, [])

Check warning on line 21 in src/components/ElementSchemes/OrgUnitIdScheme.js

GitHub Actions / lint

React Hook useEffect has a missing dependency: 'baseUrl'. Either include it or remove the dependency array

const validationText =
16 changes: 14 additions & 2 deletions src/components/MoreOptions/MoreOptions.js
Original file line number Diff line number Diff line change
@@ -5,6 +5,11 @@ import PropTypes from 'prop-types'
import React, { useState } from 'react'
import styles from './MoreOptions.module.css'

/**
* If not initially visible, doesn't render children. After opening the first
* time, however, children are instead hidden by CSS on toggle to preserve
* state
*/
const MoreOptions = ({
children,
initiallyVisible,
@@ -13,8 +18,12 @@ const MoreOptions = ({
dataTest = 'interaction-more-options',
}) => {
const [hidden, setHidden] = useState(!initiallyVisible)
const [hasOpened, setHasOpened] = useState(initiallyVisible)

const onToggle = () => {
if (!hasOpened) {
setHasOpened(true)
}
setHidden(!hidden)
}

@@ -39,8 +48,11 @@ const MoreOptions = ({
<h2 className={styles.label}>{label}</h2>
</header>
{!hidden && <Divider />}
<div className={styles.children} data-test={`${dataTest}-children`}>
{!hidden && children}
<div
className={cx(styles.children, { [styles.hidden]: hidden })}
data-test={`${dataTest}-children`}
>
{hasOpened && children}
</div>
</section>
)
4 changes: 4 additions & 0 deletions src/components/MoreOptions/MoreOptions.module.css
Original file line number Diff line number Diff line change
@@ -29,6 +29,10 @@
margin-top: var(--spacers-dp4);
}

.hidden {
display: none;
}

.chevronHidden svg {
transform: rotate(90deg);
}
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ exports[`matches snapshot when not toggled 1`] = `
</h2>
</header>
<div
class="children"
class="children hidden"
data-test="more-options-children"
/>
</section>
2 changes: 1 addition & 1 deletion src/components/Page/__snapshots__/Page.test.js.snap
Original file line number Diff line number Diff line change
@@ -563,7 +563,7 @@ exports[`matches snapshot when not loading and a mini summary task 1`] = `
</h2>
</header>
<div
class="children"
class="children hidden"
data-test="mini-job-summary-container-MoreOptions-children"
/>
</section>

0 comments on commit 18ee743

Please sign in to comment.