feat #354 - Responsive Filters WIP

package.json

@@ -11,7 +11,7 @@
 	},
 	"dependencies": {
 		"@ant-design/icons": "^4.6.2",
-		"@dassana-io/web-utils": "^0.8.0",
+		"@dassana-io/web-utils": "^0.8.5",
 		"@fortawesome/fontawesome-svg-core": "^1.2.32",
 		"@fortawesome/free-solid-svg-icons": "^5.15.1",
 		"@fortawesome/pro-light-svg-icons": "^5.15.3",

src/components/Filters/BaseFilters.tsx

@@ -24,8 +24,11 @@ export const BaseFilters: FC<BaseFiltersProps> = ({
 }: BaseFiltersProps) => {
 	const classes = useBaseFilterStyles()
 
-	const { loading, onSelectedFiltersChange, resetDynamicProps } =
-		useFiltersContext()
+	const {
+		loading,
+		onSelectedFiltersChange,
+		resetDynamicProps
+	} = useFiltersContext()
 
 	const [filtersList, setFiltersList] = useState<FiltersList>([
 		{ id: uuidV4() }

src/components/Filters/FilterPopover.tsx

@@ -7,6 +7,7 @@ import { Link } from '../Link'
 import { Popover } from '../Popover'
 import { useFiltersContext } from './FiltersContext'
 import { usePopoverStyles } from './styles'
+import { useWindowSize } from 'components/Table/useWindowSize'
 import { FiltersList, FiltersListItem } from './types'
 import { IconButton, IconSizes } from '../IconButton'
 import React, { FC } from 'react'
@@ -32,6 +33,8 @@ export const FilterPopover: FC<FilterPopoverProps> = ({
 	resetFiltersList,
 	togglePopoverVisibility
 }: FilterPopoverProps) => {
+	const { isMobile } = useWindowSize()
+
 	const { allFilters } = useFiltersContext()
 
 	const classes = usePopoverStyles()
@@ -106,7 +109,9 @@ export const FilterPopover: FC<FilterPopoverProps> = ({
 			}
 			onVisibleChange={togglePopoverVisibility}
 			placement='bottomLeft'
-			popupContainerSelector={`#${filtersPopupWrapperId}`}
+			popupContainerSelector={
+				isMobile ? 'body' : `#${filtersPopupWrapperId}`
+			}
 			popupTriggerClasses={[classes.popoverTrigger]}
 			trigger='click'
 			visible={isPopoverOpen}

src/components/Filters/FilterUnit/ValuesMultiSelect/ClientSide.tsx

@@ -6,6 +6,7 @@ import React, { FC, useEffect, useState } from 'react'
 
 export const ClientSideValuesMS: FC<ValuesMultiSelectProps> = ({
 	id,
+	isMobile,
 	filterOptValues,
 	onFilterChange,
 	optionsConfig,
@@ -31,6 +32,7 @@ export const ClientSideValuesMS: FC<ValuesMultiSelectProps> = ({
 		<MultiSelect
 			{...getMultiSelectProps({
 				id,
+				isMobile,
 				multiSelectProps: { options, optionsConfig },
 				onFilterChange,
 				selectedValues

src/components/Filters/FilterUnit/ValuesMultiSelect/ServerSide.tsx

@@ -19,6 +19,7 @@ interface Props extends ValuesMultiSelectProps {
 
 export const ServerSideValuesMS: FC<Props> = ({
 	id,
+	isMobile,
 	onFilterChange,
 	filterOptValues,
 	selectedKey,
@@ -141,6 +142,7 @@ export const ServerSideValuesMS: FC<Props> = ({
 		<MultiSelect
 			{...getMultiSelectProps({
 				id,
+				isMobile,
 				multiSelectProps: {
 					options,
 					optionsConfig,

src/components/Filters/FilterUnit/ValuesMultiSelect/types.ts

@@ -6,4 +6,5 @@ export interface ValuesMultiSelectProps
 	onFilterChange: (filtersListItem: FiltersListItem) => void
 	filterOptValues?: FilterOption['values']
 	optionsConfig?: SelectOptionsConfig
+	isMobile?: boolean
 }

src/components/Filters/FilterUnit/ValuesMultiSelect/utils.ts

@@ -21,22 +21,28 @@ const defaultCommonProps: DefaultCommonProps = {
 interface Params
 	extends Pick<
 		ValuesMultiSelectProps,
-		'id' | 'onFilterChange' | 'selectedValues'
+		'id' | 'isMobile' | 'onFilterChange' | 'selectedValues'
 	> {
 	multiSelectProps: Omit<MultiSelectProps, 'disabled' | 'onChange' | 'values'>
 }
 
 export const getMultiSelectProps = ({
 	multiSelectProps,
 	id,
+	isMobile,
 	onFilterChange,
 	selectedValues = []
 }: Params): MultiSelectProps => {
 	const { options, ...rest } = multiSelectProps
 
+	const optionalMobileProps: Pick<MultiSelectProps, 'maxTagCount'> = {}
+
+	if (isMobile) optionalMobileProps.maxTagCount = 1
+
 	return {
 		...defaultCommonProps,
 		...rest,
+		...optionalMobileProps,
 		disabled: !options.length,
 		onChange: vals =>
 			onFilterChange({

src/components/Filters/FilterUnit/index.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from '../../IconButton'
 import { useFiltersContext } from '../FiltersContext'
 import { useFilterUnitStyles } from '../styles'
+import { useWindowSize } from '@dassana-io/web-utils'
 import { ValuesMultiSelectProps } from './ValuesMultiSelect/types'
 import { ClientSideValuesMS, ServerSideValuesMS } from './ValuesMultiSelect'
 import { FilterOption, FiltersList, FiltersListItem } from '../types'
@@ -35,11 +36,14 @@ const FilterUnit: FC<FilterUnitProps> = ({
 }: FilterUnitProps) => {
 	const { allFilters, config = {}, mode } = useFiltersContext()
 
+	const { isMobile } = useWindowSize()
+
 	const classes = useFilterUnitStyles()
 
 	const [operators, setOperators] = useState(['='])
-	const [optionsConfig, setOptionsConfig] =
-		useState<MultiSelectProps['optionsConfig']>()
+	const [optionsConfig, setOptionsConfig] = useState<
+		MultiSelectProps['optionsConfig']
+	>()
 
 	useEffect(() => {
 		// When the selectedKey changes, get operators
@@ -73,12 +77,13 @@ const FilterUnit: FC<FilterUnitProps> = ({
 
 	const renderOperator = () => (
 		<Select
+			classes={[classes.operator]}
 			disabled={operators.length === 1}
 			matchSelectedContentWidth={50}
 			onChange={selectedOperator =>
 				onFilterChange({
 					id,
-					selectedOperator: selectedOperator as unknown as string
+					selectedOperator: (selectedOperator as unknown) as string
 				})
 			}
 			options={formatFilterStrToSelectOpts(operators)}
@@ -94,7 +99,7 @@ const FilterUnit: FC<FilterUnitProps> = ({
 			onChange={selectedKey => {
 				onFilterChange({
 					id,
-					selectedKey: selectedKey as unknown as string
+					selectedKey: (selectedKey as unknown) as string
 				})
 			}}
 			options={getFilterKeysOptions(allFilters, filtersList)}
@@ -108,6 +113,7 @@ const FilterUnit: FC<FilterUnitProps> = ({
 		const commonProps: ValuesMultiSelectProps = {
 			filterOptValues,
 			id,
+			isMobile,
 			onFilterChange,
 			optionsConfig,
 			selectedKey,

src/components/Filters/styles.ts

@@ -1,4 +1,6 @@
+import { Breakpoints } from '@dassana-io/web-utils'
 import { createUseStyles } from 'react-jss'
+import { mediaSelectorsWithBreakpoints } from 'components/utils'
 import { styleguide, themedStyles, ThemeType } from '../assets/styles'
 
 const {
@@ -12,6 +14,9 @@ const {
 
 const { dark, light } = ThemeType
 
+const { mobile } = Breakpoints
+const { max } = mediaSelectorsWithBreakpoints
+
 const filterPalette = {
 	[dark]: {
 		container: {
@@ -72,6 +77,12 @@ export const useBaseFilterStyles = createUseStyles({
 
 export const useFilterUnitStyles = createUseStyles({
 	container: {
+		[max[mobile]]: {
+			alignItems: 'flex-start',
+			flexDirection: 'column',
+			margin: 0,
+			width: '100%'
+		},
 		...flexAlignCenter,
 		...generateThemedFilterContainerStyles(light),
 		border: '1px solid',
@@ -84,10 +95,22 @@ export const useFilterUnitStyles = createUseStyles({
 		paddingRight: spacing['s+']
 	},
 	multiSelectContainer: {
+		[max[mobile]]: {
+			padding: 0
+		},
 		paddingLeft: spacing['s+'],
 		paddingRight: spacing['s+']
 	},
+	operator: {
+		[max[mobile]]: {
+			marginBottom: spacing.xs
+		}
+	},
 	singleSelectContainer: {
+		[max[mobile]]: {
+			marginBottom: spacing.xs,
+			padding: 0
+		},
 		paddingRight: spacing['s+']
 	},
 	// eslint-disable-next-line sort-keys
@@ -112,10 +135,20 @@ export const usePopoverStyles = createUseStyles({
 		paddingTop: spacing.m
 	},
 	popover: {
+		[max[mobile]]: {
+			'& .ant-popover-inner': { borderRadius: '0px !important' },
+			paddingTop: '0px !important',
+			position: 'static'
+		},
 		position: 'relative',
 		width: '100%'
 	},
 	popoverContent: {
+		[max[mobile]]: {
+			height: '100vh',
+			padding: spacing.m,
+			width: '100vw'
+		},
 		padding: spacing.l,
 		paddingBottom: spacing.m,
 		position: 'relative'

src/components/Filters/utils.ts

@@ -50,18 +50,19 @@ export const formatFilterStrToSelectOpts = (options: string[]) =>
 
 // --------------------------------------
 
-export const formatSelectedFilters: (filtersList: FiltersList) => Filters =
-	filtersList => {
-		const filtersWithSelectedVals = filterSelectedFilters(filtersList)
-
-		return filtersWithSelectedVals.map(
-			({ selectedKey, selectedOperator = '=', selectedValues = [] }) => ({
-				key: selectedKey,
-				operator: selectedOperator || '=',
-				value: selectedValues?.map(selectedValue => selectedValue.value)
-			})
-		)
-	}
+export const formatSelectedFilters: (
+	filtersList: FiltersList
+) => Filters = filtersList => {
+	const filtersWithSelectedVals = filterSelectedFilters(filtersList)
+
+	return filtersWithSelectedVals.map(
+		({ selectedKey, selectedOperator = '=', selectedValues = [] }) => ({
+			key: selectedKey,
+			operator: selectedOperator || '=',
+			value: selectedValues?.map(selectedValue => selectedValue.value)
+		})
+	)
+}
 
 // --------------------------------------
 
@@ -102,7 +103,7 @@ export const processFilters: ProcessFilters = (
 			processedFilters[key.id] = {
 				...filterOption,
 				key,
-				staticFilter: staticFilter as unknown as boolean
+				staticFilter: (staticFilter as unknown) as boolean
 			}
 		}
 	})

src/components/Table/index.tsx

@@ -125,8 +125,10 @@ export const Table = <Data,>({
 		showSizeChanger: false
 	})
 
-	const { classes: tableControlClasses = [], render: renderTableControls } =
-		tableControlsConfig
+	const {
+		classes: tableControlClasses = [],
+		render: renderTableControls
+	} = tableControlsConfig
 
 	const { isMobile } = useWindowSize()
 

src/components/Table/styles.ts

@@ -39,15 +39,14 @@ export const generatePaginationStyles = (themeType: ThemeType) => {
 				borderRadius,
 				color
 			},
-			'&.ant-pagination-item.ant-pagination-item-active, &.ant-pagination-item:hover, &:hover':
-				{
-					'& a': { color: hover.color },
-					'& button.ant-pagination-item-link': {
-						borderColor: hover.borderColor,
-						color: hover.color
-					},
-					borderColor: hover.borderColor
+			'&.ant-pagination-item.ant-pagination-item-active, &.ant-pagination-item:hover, &:hover': {
+				'& a': { color: hover.color },
+				'& button.ant-pagination-item-link': {
+					borderColor: hover.borderColor,
+					color: hover.color
 				},
+				borderColor: hover.borderColor
+			},
 			borderRadius
 		}
 	}
@@ -127,13 +126,12 @@ const generateTableStyles = (themeType: ThemeType) => {
 				'& > .ant-table-container': {
 					'& table': {
 						'& .ant-table-thead > tr > th': {
-							'& > .ant-table-column-sorters > .ant-table-column-sorter':
-								{
-									'& .active': {
-										color: arrow.active
-									},
-									color: arrow.base
+							'& > .ant-table-column-sorters > .ant-table-column-sorter': {
+								'& .active': {
+									color: arrow.active
 								},
+								color: arrow.base
+							},
 							'&.ant-table-column-sort': {
 								background: th.sort.background
 							},
@@ -146,19 +144,18 @@ const generateTableStyles = (themeType: ThemeType) => {
 					},
 					cursor: 'default'
 				},
-				'&.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder':
-					{
-						'& .ant-empty-image': {
-							display: 'none'
-						},
-						'& .ant-table-cell': {
-							borderBottom: 'none'
-						},
-						'& > .ant-table-cell': {
-							background: td.base.background
-						},
-						color: td.base.background
+				'&.ant-table-empty .ant-table-tbody > tr.ant-table-placeholder': {
+					'& .ant-empty-image': {
+						display: 'none'
 					},
+					'& .ant-table-cell': {
+						borderBottom: 'none'
+					},
+					'& > .ant-table-cell': {
+						background: td.base.background
+					},
+					color: td.base.background
+				},
 				background: td.base.background
 			}
 		}
@@ -263,8 +260,9 @@ export const useStyles = createUseStyles({
 					},
 					[rowHoverCellClasses]: {
 						...generateThemedCellStyles(dark)[rowHoverCellClasses],
-						[lastCellAfterClasses]:
-							generateThemedRowIconStyles(dark)
+						[lastCellAfterClasses]: generateThemedRowIconStyles(
+							dark
+						)
 					}
 				}
 			},