import { append , createFragment , h , S1Node , } from 'stage1' ; import { DEFAULT_SECTION_ORDER } from '../utils' ; import { Link , LinkProps } from './Link' ; import { TabLink } from './TabLink' ; export type SearchResultComponent = S1Node & HTMLDivElement & { update : ( this : void , newData : any [ ] ) => void ; filter : ( this : void , text : string ) => void ; } ; type RefNodes = { t : Text ; l : HTMLDivElement ; m : HTMLButtonElement ; } ; const DEFAULT_RESULTS_AMOUNT = 12 ; const MORE_RESULTS_AMOUNT = 50 ; const view = h ( `
  <div>
    <h2 #t></h2>

    <div #l></div>

    <button #m>Show more</button>
  </div>
` ) ; export const SearchResult = < T extends LinkProps > ( sectionName , data ) : SearchResultComponent => { const root = view . cloneNode ( true ) as SearchResultComponent ; const nodes = view . collect < RefNodes > ( root ) ; const isOpenTabs = sectionName === DEFAULT_SECTION_ORDER [ 0 ] ; let rawData ; let renderedLength ; const renderList = ( listData , showCount = DEFAULT_RESULTS_AMOUNT ) => { const partial = isOpenTabs ? listData : listData . slice ( 0 , showCount ) ; const frag = createFragment ( ) ; renderedLength = partial . length ; partial . forEach ( ( item ) => { append ( ( isOpenTabs ? TabLink : Link ) ( item ) , frag ) ; } ) ; nodes . l . replaceChildren ( frag ) ; root . hidden = ! renderedLength ; nodes . m . hidden = renderedLength >= listData . length ; } ; const update = ( newData ) => { renderList ( newData ) ; rawData = newData ; } ; root . update = update ; root . filter = ( text ) => renderList ( rawData . filter ( ( item ) => ( item . title + '+' + item . url ) . toLowerCase ( ) . indexOf ( text . toLowerCase ( ) ) > - 1 ) ) ; nodes . t . textContent = sectionName ; nodes . m . __click = ( ) => renderList ( rawData , renderedLength + MORE_RESULTS_AMOUNT ) ; update ( data ) ; return root ; } ;