web.lib.components.extensions-picker.extension-search-bar.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of code-quarkus Show documentation
Customize a Web Interface to generate Quarkus starter projects.
There is a newer version: 37
import React, { useState } from 'react';
import { Button, Dropdown, Form, FormGroup } from 'react-bootstrap';
import { FaAngleDown, FaAngleUp, FaSearch } from 'react-icons/fa';
import { QuarkusProject } from '../api/model';
import './extension-search-bar.scss';
import DropdownItem from 'react-bootstrap/DropdownItem';
import { clearFilterOrigin, FilterResult } from './extensions-utils';
import classNames from 'classnames';
import { DEFAULT_FILTER } from '../api/quarkus-project-utils';
import { useAnalytics } from '../../core/analytics';
import * as _ from 'lodash';

export interface ExtensionSearchBarProps {
  placeholder: string;
  filter: string;
  project: QuarkusProject | undefined;
  setFilter: (string) => void;
  result: FilterResult
}

function ListItem(props: { className?: string, children: React.ReactChildren }) {
  const className = `${props.className || ''} list-item`;
  return (
    {props.children}
  )
}

function FilterShortcutsDropdown(props: ExtensionSearchBarProps) {
  const [ isOpen , setIsOpen ] = useState(false);
  const analytics = useAnalytics();
  const context = { element: 'extension-search-dropdown' };
  function clickPlatform() {
    if (props.result.origin !== 'platform') {
      analytics.event('Switch origin', { origin: 'platform', ...context });
      props.setFilter(`origin:platform ${clearFilterOrigin(props.filter)}`);
    } else {
      analytics.event('Switch origin', { origin: 'other', ...context });
      props.setFilter(`${clearFilterOrigin(props.filter)}`);
    }
  }
  function clickOther() {
    if (props.result.origin !== 'other' ) {
      analytics.event('Switch origin', { origin: 'other', ...context });
      props.setFilter(`origin:other ${clearFilterOrigin(props.filter)}`);
    } else {
      analytics.event('Switch origin', { origin: '', ...context });
      props.setFilter(`${clearFilterOrigin(props.filter)}`);
    }
  }

  function addFilter(k: string, v:string) {
    props.setFilter(f => `${k}:${v} ${f}`);
  }

  function clearFilter(k: string, v:string) {
    props.setFilter(f => f.replaceAll(new RegExp(`\\s*${k}:${v}\\s*`, 'ig'), ''));
  }
  const origin = props.result?.origin;
  const filters = _.sortBy(Object.entries(props.result?.filters || {}), f => f[0]);
  return (
     e.stopPropagation()} onToggle={setIsOpen} show={isOpen}>
      
        Filters {isOpen ?  : }
      
       e.stopPropagation()}
      >
        
          origin: 
          platform
          other
        
        {filters.length > 0 && filters.map((t: any, i) => (
          
            {t[0]}: 
            {t[1].active.map((v, i) => (
               clearFilter(t[0], v)}>{v}
            ))}
            {t[1].inactive.map((v, i) => (
               addFilter(t[0], v)}>{v}
            ))}
          
        ))}
        {props.result?.filtered && (
           props.setFilter(DEFAULT_FILTER)}>
          Clear search
          
        )}
      
    
  )
}


export function ExtensionSearchBar(props: ExtensionSearchBarProps) {
  const { filter, setFilter } = props;
  const search = (e: any) => {
    setFilter(e.currentTarget.value);
  };

  return (
    
      
      
        
        
      
    
  );
}