Addepar / ember-widgets

https://opensource.addepar.com/ember-widgets/#/ember-widgets/overview
Other
288 stars 75 forks source link

Add collapsible grouped headers to select-component #288

Closed jiayingxu closed 5 years ago

jiayingxu commented 5 years ago

Add ability to collapse/expand group headers in select-component and multi-select-component. optionGroupPath should be set and isGroupHeaderCollapsible=true on the select.

There were 2 possible approaches to implementing the hiding of the list items after the header is collapsed

  1. Use CSS display: none to hide the list item if the header is collapsed
  2. Remove the list item from the backing JavaScript data structure for the select list

Approach 1 was chosen was approach 2 was not feasible. vertical-collection is used to render the list items to utilize its occlusion performance capability. There currently is not a built-in mechanism in vertical-collection to schedule a re-measure or a re-render.

collapsible-group-headers

rondale-sc commented 5 years ago

@jiayingxu LGTM - does the occlussion bit mean that expanded option groups are occluded at a certain point during the scroll? Like if I expande a section then say 2 more would the initial one that could be very far down the scroll's state revert to collapsed?

jiayingxu commented 5 years ago

@rondale-sc, yep, the collapsing/expansing of the group headers work with occlusion. As the user scrolls up and down in the select list changing the occlusion viewport, the group headers that are collapsed or expanded are retained.