Skip to content
This repository has been archived by the owner on May 4, 2024. It is now read-only.

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
/

WIP: Dropdown Multiselector
  • Loading branch information
a-thansen committed Oct 30, 2023
1 parent 0157d61 commit 71c85c7
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 7 deletions.
9 changes: 9 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"chart.js": "^4.4.0",
"d3": "^7.8.5",
"leaflet": "^1.9.4",
"multiselect-react-dropdown": "^2.0.25",
"react": "^18.2.0",
"react-chartjs-2": "^5.2.0",
"react-datepicker": "^4.19.0",
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/Components/Conditions/ConditionsMap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ import { GeoJSON } from 'react-leaflet';
import { Layer, PathOptions } from 'leaflet';
import { Feature, FeatureCollection } from 'geojson';

import Search from '../Map/Search';
import MonthFilter from '../Map/MonthFilter';
import Search from '../Map/Inputs/Search';
import MonthFilter from '../Map/Inputs/MonthFilter';
// import MultiSelector from '../Map/Inputs/MultiSelector';

import MapWrapper from '../Map/MapWrapper';
import Selector from '../Map/Inputs/Selector';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import '../../css/month_filter.css';
import '../../../css/month_filter.css';

interface Props {
/** function taking argument "date" for Start Date **/
Expand Down
41 changes: 41 additions & 0 deletions frontend/src/Components/Map/Inputs/MultiSelector.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
// import React, { useState } from 'react';

// import Multiselect from 'multiselect-react-dropdown';

// // FIGURE THIS OUT

// interface Props {
// /**
// * value: text input in the search bar
// * onPlaceSelect: function taking argument "value"
// */

// options: any[];
// onOptionChange: (value: any) => void;
// }

// // options formatting:
// // options = [{key: "ALL", key: "KPI", .... }]

// /**
// * Component rendering Search bar
// */

// const MultiSelect: React.FC<Props> = ({ options, onOptionChange }) => {
// const [selectedOptions, setOptions] = useState<String[]>([]);

// function onChange(selectedList) {}

// return (
// <Multiselect
// // Options to display in the dropdown
// displayValue="key"
// options={(options: string[]) => setOptions(options)}
// onSelect={(onOptionChange, onChange)} // Function will trigger on select event
// onRemove={onOptionChange} // Function will trigger on remove event
// showCheckbox
// />
// );
// };

// export default MultiSelect;
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
GeoapifyContext,
} from '@geoapify/react-geocoder-autocomplete';
import '@geoapify/geocoder-autocomplete/styles/minimal.css';
import '../../css/search.css';
import '../../../css/search.css';

interface Props {
/**
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/css/search.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@

.geoapify-autocomplete-items {
position: absolute;
left: 20px; /* This need to be improve later to align with the left side of search input box*/
left: 0%; /* This need to be improve later to align with the left side of search input box*/
top: calc(100% + 2px);
width: 280px;
width: 100%;
background-color: #ddddddbd;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
Expand Down Expand Up @@ -90,7 +90,7 @@

.geoapify-close-button {
position: absolute;
right: 8px;
right: 0%;
width: 30px;
top: 0px;
height: 100%;
Expand Down

0 comments on commit 71c85c7

Please sign in to comment.