@@ -12,8 +12,7 @@ import {
1212 EuiIcon ,
1313 EuiTextColor ,
1414 EuiSelectableOption ,
15- EuiPortal ,
16- EuiFilterGroup ,
15+ EuiSelectableProps ,
1716 EuiFilterButton ,
1817} from '@elastic/eui' ;
1918import { isEmpty , debounce } from 'lodash/fp' ;
@@ -45,26 +44,31 @@ const MyEuiFlexGroup = styled(EuiFlexGroup)`
4544 padding 0px 4px;
4645` ;
4746
48- const EuiSelectableContainer = styled . div < { isLoading : boolean } > `
49- .euiSelectable {
50- .euiFormControlLayout__childrenWrapper {
51- display: flex;
52- }
53- ${ ( { isLoading } ) => `${
54- isLoading
55- ? `
56- .euiFormControlLayoutIcons {
57- display: none;
58- }
59- .euiFormControlLayoutIcons.euiFormControlLayoutIcons--right {
60- display: block;
61- left: 12px;
62- top: 12px;
63- }`
64- : ''
65- }
66- ` }
67- }
47+ // const EuiSelectableContainer = styled.div<{ isLoading: boolean }>`
48+ // .euiSelectable {
49+ // .euiFormControlLayout__childrenWrapper {
50+ // display: flex;
51+ // }
52+ // ${({ isLoading }) => `${
53+ // isLoading
54+ // ? `
55+ // .euiFormControlLayoutIcons {
56+ // display: none;
57+ // }
58+ // .euiFormControlLayoutIcons.euiFormControlLayoutIcons--right {
59+ // display: block;
60+ // left: 12px;
61+ // top: 12px;
62+ // }`
63+ // : ''
64+ // }
65+ // `}
66+ // }
67+ // `;
68+
69+ const StyledEuiFilterButton = styled ( EuiFilterButton ) `
70+ border-top: 0;
71+ border-bottom: 0;
6872` ;
6973
7074export const ORIGINAL_PAGE_SIZE = 50 ;
@@ -95,15 +99,6 @@ export interface SelectableTimelineProps {
9599 timelineType : TimelineTypeLiteral ;
96100}
97101
98- export interface SearchProps {
99- 'data-test-subj' ?: string ;
100- isLoading : boolean ;
101- placeholder : string ;
102- onSearch : ( arg : string ) => void ;
103- incremental : boolean ;
104- inputRef : ( arg : HTMLInputElement | null ) => void ;
105- }
106-
107102const SelectableTimelineComponent : React . FC < SelectableTimelineProps > = ( {
108103 hideUntitled = false ,
109104 getSelectableOptions,
@@ -115,7 +110,6 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
115110 const [ heightTrigger , setHeightTrigger ] = useState ( 0 ) ;
116111 const [ searchTimelineValue , setSearchTimelineValue ] = useState < string > ( '' ) ;
117112 const [ onlyFavorites , setOnlyFavorites ] = useState ( false ) ;
118- const [ searchRef , setSearchRef ] = useState < HTMLInputElement | null > ( null ) ;
119113 const { fetchAllTimeline, timelines, loading, totalCount : timelineCount } = useGetAllTimeline ( ) ;
120114 const selectableListOuterRef = useRef < HTMLDivElement | null > ( null ) ;
121115 const selectableListInnerRef = useRef < HTMLDivElement | null > ( null ) ;
@@ -156,8 +150,8 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
156150 [ heightTrigger , pageSize ]
157151 ) ;
158152
159- const renderTimelineOption = useCallback ( ( option , searchValue ) => {
160- return (
153+ const renderTimelineOption = useCallback (
154+ ( option , searchValue ) => (
161155 < EuiFlexGroup
162156 gutterSize = "s"
163157 justifyContent = "spaceBetween"
@@ -193,8 +187,9 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
193187 />
194188 </ EuiFlexItem >
195189 </ EuiFlexGroup >
196- ) ;
197- } , [ ] ) ;
190+ ) ,
191+ [ ]
192+ ) ;
198193
199194 const handleTimelineChange = useCallback (
200195 ( options ) => {
@@ -215,39 +210,53 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
215210 [ onClosePopover , onTimelineChange ]
216211 ) ;
217212
218- const favoritePortal = useMemo (
219- ( ) =>
220- searchRef != null ? (
221- < EuiPortal insert = { { sibling : searchRef , position : 'after' } } >
222- < MyEuiFlexGroup gutterSize = "xs" justifyContent = "flexEnd" >
223- < EuiFlexItem grow = { false } >
224- < EuiFilterGroup >
225- < EuiFilterButton
226- size = "l"
227- data-test-subj = "only-favorites-toggle"
228- hasActiveFilters = { onlyFavorites }
229- onClick = { handleOnToggleOnlyFavorites }
230- >
231- { i18nTimeline . ONLY_FAVORITES }
232- </ EuiFilterButton >
233- </ EuiFilterGroup >
234- </ EuiFlexItem >
235- </ MyEuiFlexGroup >
236- </ EuiPortal >
237- ) : null ,
238- [ searchRef , onlyFavorites , handleOnToggleOnlyFavorites ]
213+ const EuiSelectableContent = useCallback (
214+ ( list , search ) => (
215+ < >
216+ { search }
217+ { list }
218+ </ >
219+ ) ,
220+ [ ]
239221 ) ;
240222
241- const searchProps : SearchProps = {
242- 'data-test-subj' : 'timeline-super-select-search-box' ,
243- isLoading : loading ,
244- placeholder : useMemo ( ( ) => i18n . SEARCH_BOX_TIMELINE_PLACEHOLDER ( timelineType ) , [ timelineType ] ) ,
245- onSearch : onSearchTimeline ,
246- incremental : true ,
247- inputRef : ( node : HTMLInputElement | null ) => {
248- setSearchRef ( node ) ;
249- } ,
250- } ;
223+ const searchProps : EuiSelectableProps [ 'searchProps' ] = useMemo (
224+ ( ) => ( {
225+ 'data-test-subj' : 'timeline-super-select-search-box' ,
226+ placeholder : i18n . SEARCH_BOX_TIMELINE_PLACEHOLDER ( timelineType ) ,
227+ onSearch : onSearchTimeline ,
228+ incremental : true ,
229+ append : (
230+ < StyledEuiFilterButton
231+ size = "l"
232+ data-test-subj = "only-favorites-toggle"
233+ hasActiveFilters = { onlyFavorites }
234+ onClick = { handleOnToggleOnlyFavorites }
235+ >
236+ { i18nTimeline . ONLY_FAVORITES }
237+ </ StyledEuiFilterButton >
238+ ) ,
239+ } ) ,
240+ [ handleOnToggleOnlyFavorites , onSearchTimeline , onlyFavorites , timelineType ]
241+ ) ;
242+
243+ const listProps : EuiSelectableProps [ 'listProps' ] = useMemo (
244+ ( ) => ( {
245+ rowHeight : TIMELINE_ITEM_HEIGHT ,
246+ showIcons : false ,
247+ windowProps : {
248+ onScroll : ( { scrollOffset } ) =>
249+ handleOnScroll (
250+ timelines . filter ( ( t ) => ! hideUntitled || t . title !== '' ) . length ,
251+ timelineCount ,
252+ scrollOffset
253+ ) ,
254+ outerRef : selectableListOuterRef ,
255+ innerRef : selectableListInnerRef ,
256+ } ,
257+ } ) ,
258+ [ handleOnScroll , hideUntitled , timelineCount , timelines ]
259+ ) ;
251260
252261 useEffect ( ( ) => {
253262 fetchAllTimeline ( {
@@ -267,46 +276,25 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
267276 } , [ fetchAllTimeline , onlyFavorites , pageSize , searchTimelineValue , timelineType ] ) ;
268277
269278 return (
270- < EuiSelectableContainer isLoading = { loading } >
271- < EuiSelectable
272- data-test-subj = "selectable-input"
273- height = { POPOVER_HEIGHT }
274- isLoading = { loading && timelines . length === 0 }
275- listProps = { {
276- rowHeight : TIMELINE_ITEM_HEIGHT ,
277- showIcons : false ,
278- windowProps : {
279- onScroll : ( { scrollOffset } ) =>
280- handleOnScroll (
281- timelines . filter ( ( t ) => ! hideUntitled || t . title !== '' ) . length ,
282- timelineCount ,
283- scrollOffset
284- ) ,
285- outerRef : selectableListOuterRef ,
286- innerRef : selectableListInnerRef ,
287- } ,
288- } }
289- renderOption = { renderTimelineOption }
290- onChange = { handleTimelineChange }
291- searchable
292- searchProps = { searchProps }
293- singleSelection = { true }
294- options = { getSelectableOptions ( {
295- timelines,
296- onlyFavorites,
297- searchTimelineValue,
298- timelineType,
299- } ) }
300- >
301- { ( list , search ) => (
302- < >
303- { search }
304- { favoritePortal }
305- { list }
306- </ >
307- ) }
308- </ EuiSelectable >
309- </ EuiSelectableContainer >
279+ < EuiSelectable
280+ data-test-subj = "selectable-input"
281+ height = { POPOVER_HEIGHT }
282+ isLoading = { loading && timelines . length === 0 }
283+ listProps = { listProps }
284+ renderOption = { renderTimelineOption }
285+ onChange = { handleTimelineChange }
286+ searchable
287+ searchProps = { searchProps }
288+ singleSelection = { true }
289+ options = { getSelectableOptions ( {
290+ timelines,
291+ onlyFavorites,
292+ searchTimelineValue,
293+ timelineType,
294+ } ) }
295+ >
296+ { EuiSelectableContent }
297+ </ EuiSelectable >
310298 ) ;
311299} ;
312300
0 commit comments