From b26eaef405f9d4297935b6d6c20588c3b23e4916 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 19 May 2021 12:12:11 +0200 Subject: [PATCH] new filters component Signed-off-by: Emma Indal Signed-off-by: Eric Peterson --- .../FiltersNext/FiltersButtonNext.tsx | 56 +++++++ .../components/FiltersNext/FiltersNext.tsx | 139 ++++++++++++++++++ .../src/components/FiltersNext/index.tsx | 18 +++ .../SearchPageNext/SearchPageNext.tsx | 12 +- plugins/search/src/components/index.tsx | 1 + 5 files changed, 224 insertions(+), 2 deletions(-) create mode 100644 plugins/search/src/components/FiltersNext/FiltersButtonNext.tsx create mode 100644 plugins/search/src/components/FiltersNext/FiltersNext.tsx create mode 100644 plugins/search/src/components/FiltersNext/index.tsx diff --git a/plugins/search/src/components/FiltersNext/FiltersButtonNext.tsx b/plugins/search/src/components/FiltersNext/FiltersButtonNext.tsx new file mode 100644 index 0000000000..8da6e26028 --- /dev/null +++ b/plugins/search/src/components/FiltersNext/FiltersButtonNext.tsx @@ -0,0 +1,56 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import FilterListIcon from '@material-ui/icons/FilterList'; +import { makeStyles, IconButton, Typography } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + filters: { + width: '250px', + display: 'flex', + }, + icon: { + margin: theme.spacing(-1, 0, 0, 0), + }, +})); + +type FiltersButtonProps = { + numberOfSelectedFilters: number; + handleToggleFilters: () => void; +}; + +export const FiltersButtonNext = ({ + numberOfSelectedFilters, + handleToggleFilters, +}: FiltersButtonProps) => { + const classes = useStyles(); + + return ( +
+ + + + + Filters ({numberOfSelectedFilters ? numberOfSelectedFilters : 0}) + +
+ ); +}; diff --git a/plugins/search/src/components/FiltersNext/FiltersNext.tsx b/plugins/search/src/components/FiltersNext/FiltersNext.tsx new file mode 100644 index 0000000000..770fe8078d --- /dev/null +++ b/plugins/search/src/components/FiltersNext/FiltersNext.tsx @@ -0,0 +1,139 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { + makeStyles, + Typography, + Card, + CardContent, + Select, + Checkbox, + List, + ListItem, + ListItemText, + MenuItem, +} from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + filters: { + background: 'transparent', + boxShadow: '0px 0px 0px 0px', + }, + // checkbox: { + // padding: theme.spacing(0, 1, 0, 1), + // }, + // dropdown: { + // width: '100%', + // }, +})); + +export type FilterOptions = { + kind: Array; + lifecycle: Array; +}; + +type FiltersProps = { + definitions: FilterDefinition[]; +}; + +type ValuedFilterProps = { + fieldName: string; + values: string[]; +}; + +export enum FilterType { + CHECKBOX = 'checkbox', + SELECT = 'select', +} + +export type NewFilterDefinition = { + component: any; + props: any; +}; + +export type FilterDefinition = { + field: string; + type: FilterType; + values: string[]; +}; + +const CheckBoxFilter = ({ fieldName, values }: ValuedFilterProps) => { + return ( + + {fieldName} + + {values.map((value: string) => ( + {}}> + + + + ))} + + + ); +}; + +const SelectFilter = ({ fieldName, values }: ValuedFilterProps) => { + return ( + + {fieldName} + + + ); +}; + +export const FiltersNext = ({ definitions }: FiltersProps) => { + const classes = useStyles(); + + return ( + + {definitions.map(definition => { + switch (definition.type) { + case 'checkbox': + return ( + + ); + case 'select': + return ( + + ); + default: + return null; + } + })} + + ); +}; diff --git a/plugins/search/src/components/FiltersNext/index.tsx b/plugins/search/src/components/FiltersNext/index.tsx new file mode 100644 index 0000000000..574a31e93f --- /dev/null +++ b/plugins/search/src/components/FiltersNext/index.tsx @@ -0,0 +1,18 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { FiltersButtonNext } from './FiltersButtonNext'; +export { FiltersNext, FilterType } from './FiltersNext'; diff --git a/plugins/search/src/components/SearchPageNext/SearchPageNext.tsx b/plugins/search/src/components/SearchPageNext/SearchPageNext.tsx index ce9e203cf1..ca942aabb1 100644 --- a/plugins/search/src/components/SearchPageNext/SearchPageNext.tsx +++ b/plugins/search/src/components/SearchPageNext/SearchPageNext.tsx @@ -20,6 +20,15 @@ import { Grid } from '@material-ui/core'; import { SearchBarNext } from '../SearchBarNext'; import { SearchResultNext } from '../SearchResultNext'; import { SearchContextProvider } from '../SearchContext'; +import { FiltersNext, FilterType } from '../FiltersNext'; + +const exampleFilterDefinition = [ + { + field: 'lifecycle', + type: FilterType.CHECKBOX, + values: ['exerpimental', 'production'], + }, +]; export const SearchPageNext = () => { return ( @@ -32,8 +41,7 @@ export const SearchPageNext = () => { - {/* filter component should be rendered here */} -

filter

+ diff --git a/plugins/search/src/components/index.tsx b/plugins/search/src/components/index.tsx index ae0bc2cdca..27491d6c93 100644 --- a/plugins/search/src/components/index.tsx +++ b/plugins/search/src/components/index.tsx @@ -15,6 +15,7 @@ */ export * from './Filters'; +export * from './FiltersNext'; export * from './SearchBar'; export * from './SearchBarNext'; export * from './SearchPage';