Filter.tsx 1.73 KB
Newer Older
1
2
import { CollapseFilled, ExpandFilled, Settings } from '@navikt/ds-icons';
import React, { FunctionComponent, useState } from 'react';
DESKTOP-J7QTMBR\mikke's avatar
cleanup    
DESKTOP-J7QTMBR\mikke committed
3
import { Button } from 'react-bootstrap';
4
import { ContinentCheckbox } from './ContinentCheckbox';
5
import './Filter.css';
6
7
import './ContinentCheckbox.css'

8
9
10
11
12
type IProps = {
  onButtonClick: (value: string[]) => void
  filterClick: (value: string) => void
}
export const Filter: FunctionComponent<IProps> = ({onButtonClick, filterClick}) => {  
13
14
15

  const [hidden, setHidden] = useState(true);
  const filterOptions = <>
DESKTOP-J7QTMBR\mikke's avatar
cleanup    
DESKTOP-J7QTMBR\mikke committed
16
  <div className={""}>
17
18
19
    <Button variant="secondary"
    onClick={()=> onButtonClick(["name", "ASC"])}>Name abc</Button>
    <Button variant="secondary"
DESKTOP-J7QTMBR\mikke's avatar
DESKTOP-J7QTMBR\mikke committed
20
    onClick={()=> onButtonClick(["name", "DESC"])}>Name xyz</Button>
21
22
23
    <Button variant="secondary"
    onClick={()=> onButtonClick(["capital", "ASC"])}>Capital abc</Button>
    <Button variant="secondary"
DESKTOP-J7QTMBR\mikke's avatar
DESKTOP-J7QTMBR\mikke committed
24
    onClick={()=> onButtonClick(["capital", "DESC"])}>Capital xyz</Button>
25
26
  </div>
  <div className={"ContinentCheckbox"}>
27
    <ContinentCheckbox handleClick={filterClick}/>
28
  </div>
29
30
31
32
33
  </>;

  return (
    <>
    <div className={"Filter__Big_Container"}>
DESKTOP-J7QTMBR\mikke's avatar
cleanup    
DESKTOP-J7QTMBR\mikke committed
34
35
      
      <div><Settings/>Filter Options</div>
36
      <div className={"Filter__Big_Buttons"}>
37
      {filterOptions}
38
      </div>
39
40
41
42
43
44
    </div>
    {hidden ? 
    <div onClick={() => setHidden(false)} className={"Filter__Container__closed"}><Settings/>Filter options<ExpandFilled/></div>  :
      
    <div className={"Filter__Container"}>
      <div  className={'Filter__Title'} onClick={() => setHidden(true)}>
DESKTOP-J7QTMBR\mikke's avatar
cleanup    
DESKTOP-J7QTMBR\mikke committed
45
      <div><Settings/>Options</div>
46
47
48
49
50
51
52
53
54
55
56
57
      <CollapseFilled  />
      </div>
      <div className={'Filter__Options'}>
      {filterOptions}
      </div>
    </div>
    }
    </>
  )
  
}