feat(Dropdown): lazyLoad prop for menu items (#1918)

* feat(Dropdown): lazy load options * test(Dropdown): update for lazy loaded options * feat(Dropdown): add lazyLoad prop * test(Dropdown): restore tests * fix(Dropdown): make lazyLoad optional
Semantic-Org · Jun 26, 2018 · 95429e6 · 95429e6
1 parent 9af142e
commit 95429e6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts
@@ -98,6 +98,9 @@ export interface DropdownProps {
   /** A dropdown can be labeled. */
   labeled?: boolean
 
+  /** A dropdown can defer rendering its options until it is open. */
+  lazyLoad?: boolean
+
   /** A dropdown can show that it is currently loading data. */
   loading?: boolean
 

diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -142,6 +142,9 @@ export default class Dropdown extends Component {
     /** A dropdown can be labeled. */
     labeled: PropTypes.bool,
 
+    /** A dropdown can defer rendering its options until it is open. */
+    lazyLoad: PropTypes.bool,
+
     /** A dropdown can show that it is currently loading data. */
     loading: PropTypes.bool,
 
@@ -1228,8 +1231,12 @@ export default class Dropdown extends Component {
   }
 
   renderOptions = () => {
-    const { multiple, search, noResultsMessage } = this.props
-    const { selectedIndex, value } = this.state
+    const { lazyLoad, multiple, search, noResultsMessage } = this.props
+    const { open, selectedIndex, value } = this.state
+
+    // lazy load, only render options when open
+    if (lazyLoad && !open) return null
+
     const options = this.getMenuOptions()
 
     if (noResultsMessage !== null && search && _.isEmpty(options)) {

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -468,6 +468,7 @@ describe('Dropdown', () => {
         .first()
         .simulate('click')
         .should.have.prop('active', true)
+
       wrapper.should.have.state('value', options[0].value)
 
       dropdownMenuIsClosed()
@@ -914,11 +915,7 @@ describe('Dropdown', () => {
       wrapper
         .find('DropdownItem')
         .at(1)
-        .should.have.prop('selected', false)
-      wrapper
-        .find('DropdownItem')
-        .at(1)
-        .should.have.prop('active', false)
+        .should.have.props({ selected: false, active: false })
 
       // select and make active
       domEvent.keyDown(document, { key: 'ArrowDown' })
@@ -928,7 +925,7 @@ describe('Dropdown', () => {
       wrapper
         .find('DropdownItem')
         .at(1)
-        .should.have.prop('active', true)
+        .should.have.props({ selected: true, active: true })
     })
     it('closes the menu', () => {
       wrapperMount(<Dropdown options={options} selection />).simulate('click')
@@ -2140,6 +2137,20 @@ describe('Dropdown', () => {
     })
   })
 
+  describe('lazyLoad', () => {
+    it('does not render options when closed', () => {
+      wrapperShallow(<Dropdown options={options} lazyLoad />).should.not.have.descendants(
+        'DropdownItem',
+      )
+    })
+
+    it('renders options when open', () => {
+      wrapperShallow(<Dropdown options={options} lazyLoad open />).should.have.descendants(
+        'DropdownItem',
+      )
+    })
+  })
+
   describe('Dropdown.Menu child', () => {
     it('renders child passed', () => {
       wrapperShallow(