djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Experimental filters: add empty state and adjust popover ui (#3950)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-07-19 11:29:03 +02:00 committed by GitHub
parent 4e8942f90e
commit dd50f95b55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 80 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/spotty-papayas-pretend.md Normal file
View file

@ -0,0 +1,5 @@
---
"saleor-dashboard": patch
---
Experimental filters: add empty state and adjust popover ui

14
package-lock.json generated
View file

@ -27,7 +27,7 @@
"@material-ui/lab": "^4.0.0-alpha.61",
"@material-ui/styles": "^4.11.4",
"@reach/auto-id": "^0.16.0",
"@saleor/macaw-ui": "0.8.0-pre.105",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@saleor/sdk": "0.6.0",
"@sentry/react": "^6.0.0",
"@types/faker": "^5.1.6",
@ -7947,9 +7947,9 @@
}
},
"node_modules/@saleor/macaw-ui": {
"version": "0.8.0-pre.105",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.105.tgz",
"integrity": "sha512-UfI8NWknBCEJfFakQM71W5DghQZZT+WNU4C0t/A6xHxQQj8qOxoilOeFy+e7rqtovx3x0tkcWIlVy2TTbuJDKg==",
"version": "0.8.0-pre.106",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.106.tgz",
"integrity": "sha512-0wg1XXsmpaVfT6KMKgbGcNajXxITgAzXZIFp5x1bs1UTiJgmxYSnhs+h2ikz+m6nozEUGeiyOncl5wyw9aOYWw==",
"dependencies": {
"@dessert-box/react": "^0.4.0",
"@floating-ui/react-dom-interactions": "^0.5.0",
@ -41209,9 +41209,9 @@
}
},
"@saleor/macaw-ui": {
"version": "0.8.0-pre.105",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.105.tgz",
"integrity": "sha512-UfI8NWknBCEJfFakQM71W5DghQZZT+WNU4C0t/A6xHxQQj8qOxoilOeFy+e7rqtovx3x0tkcWIlVy2TTbuJDKg==",
"version": "0.8.0-pre.106",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.106.tgz",
"integrity": "sha512-0wg1XXsmpaVfT6KMKgbGcNajXxITgAzXZIFp5x1bs1UTiJgmxYSnhs+h2ikz+m6nozEUGeiyOncl5wyw9aOYWw==",
"requires": {
"@dessert-box/react": "^0.4.0",
"@floating-ui/react-dom-interactions": "^0.5.0",

2
package.json
View file

@ -34,7 +34,7 @@
"@material-ui/lab": "^4.0.0-alpha.61",
"@material-ui/styles": "^4.11.4",
"@reach/auto-id": "^0.16.0",
"@saleor/macaw-ui": "0.8.0-pre.105",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@saleor/sdk": "0.6.0",
"@sentry/react": "^6.0.0",
"@types/faker": "^5.1.6",

17
src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
View file

@ -8,21 +8,28 @@ export const ExpressionFilters = () => (
<Button>Show filters</Button>
</Popover.Trigger>
<Popover.Content align="start">
<Box>
<Box
__minHeight="250px"
__minWidth="636px"
display="grid"
__gridTemplateRows="auto 1fr"
>
<Box
paddingX={5}
paddingY={4}
paddingTop={3}
paddingX={3}
paddingBottom={1.5}
display="flex"
gap={1}
alignItems="center"
justifyContent="space-between"
backgroundColor="surfaceNeutralPlain"
borderTopLeftRadius={2}
borderTopRightRadius={2}
>
<Text variant="body" size="medium">
Filter conditions
Conditions
</Text>
<Box display="flex" alignItems="center" gap={2}>
<Button variant="tertiary">Clear filters</Button>
<Popover.Close>
<Button variant="tertiary" icon={<CloseIcon />} />
</Popover.Close>

37
src/components/ConditionalFilter/ConditionalFilters.tsx
View file

@ -1,9 +1,10 @@
import { _ExperimentalFilters, Box, Divider } from "@saleor/macaw-ui/next";
import { Box } from "@saleor/macaw-ui/next";
import React, { FC } from "react";
import { useConditionalFilterContext } from "./context";
import { FilterContainer } from "./FilterElement";
import { FiltersArea } from "./FiltersArea";
import { LoadingFiltersArea } from "./LoadingFiltersArea";
export const ConditionalFilters: FC = () => {
const { valueProvider } = useConditionalFilterContext();
@ -12,30 +13,16 @@ export const ConditionalFilters: FC = () => {
valueProvider.persist(value);
};
return (
<Box>
{valueProvider.loading ? (
<Box
__minWidth="700px"
__minHeight="100px"
paddingX={5}
paddingY={4}
display="flex"
gap={3}
flexDirection="column"
>
<_ExperimentalFilters.Skeleton height={7} />
<_ExperimentalFilters.Skeleton height={7} />
<_ExperimentalFilters.Skeleton height={7} />
<Divider />
<Box display="flex" gap={4} justifyContent="space-between">
<_ExperimentalFilters.Skeleton height={7} __width="20%" />
<_ExperimentalFilters.Skeleton height={7} __width="20%" />
</Box>
</Box>
) : (
<FiltersArea onConfirm={handleConfirm} />
)}
return valueProvider.loading ? (
<LoadingFiltersArea />
) : (
<Box
padding={3}
backgroundColor="interactiveNeutralSecondaryHovering"
borderBottomLeftRadius={2}
borderBottomRightRadius={2}
>
<FiltersArea onConfirm={handleConfirm} />
</Box>
);
};

35
src/components/ConditionalFilter/FiltersArea.tsx
View file

@ -60,28 +60,25 @@ export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
};
return (
<Box
paddingX={5}
paddingY={3}
backgroundColor="interactiveNeutralSecondaryHovering"
borderBottomLeftRadius={2}
borderBottomRightRadius={2}
<_ExperimentalFilters
leftOptions={leftOperandsProvider.operands}
// @ts-expect-error
value={value}
onChange={handleStateChange}
>
<_ExperimentalFilters
leftOptions={leftOperandsProvider.operands}
// @ts-expect-error
value={value}
onChange={handleStateChange}
>
<_ExperimentalFilters.Footer>
<_ExperimentalFilters.AddRowButton>
+ Add row
</_ExperimentalFilters.AddRowButton>
<_ExperimentalFilters.Footer>
<_ExperimentalFilters.AddRowButton>
+ Add row
</_ExperimentalFilters.AddRowButton>
<Box display="flex" gap={3}>
<_ExperimentalFilters.ClearButton>
Clear
</_ExperimentalFilters.ClearButton>
<_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)}>
Save
</_ExperimentalFilters.ConfirmButton>
</_ExperimentalFilters.Footer>
</_ExperimentalFilters>
</Box>
</Box>
</_ExperimentalFilters.Footer>
</_ExperimentalFilters>
);
};

27
src/components/ConditionalFilter/LoadingFiltersArea.tsx Normal file
View file

@ -0,0 +1,27 @@
import { _ExperimentalFilters, Box, Divider } from "@saleor/macaw-ui/next";
import React from "react";
export const LoadingFiltersArea = () => (
<Box
padding={3}
backgroundColor="interactiveNeutralSecondaryHovering"
borderBottomLeftRadius={2}
borderBottomRightRadius={2}
display="flex"
flexDirection="column"
>
<Box display="flex" flexDirection="column" gap={3} height="100%">
<_ExperimentalFilters.Skeleton height={7} />
<_ExperimentalFilters.Skeleton height={7} />
<_ExperimentalFilters.Skeleton height={7} />
</Box>
<Divider />
<Box display="flex" gap={4} justifyContent="space-between">
<_ExperimentalFilters.Skeleton height={7} __width="60px" />
<Box display="flex" gap={3}>
<_ExperimentalFilters.Skeleton height={7} __width="60px" />
<_ExperimentalFilters.Skeleton height={7} __width="60px" />
</Box>
</Box>
</Box>
);