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

Experimental filters: new popover ui (#3944)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-07-18 12:40:50 +02:00 committed by GitHub
parent b66af99477
commit 5e6794fa99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 67 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/plenty-pugs-tease.md Normal file
View file

@ -0,0 +1,5 @@
---
"saleor-dashboard": patch
---
Experimental filters: 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.104",
"@saleor/macaw-ui": "0.8.0-pre.105",
"@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.104",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.104.tgz",
"integrity": "sha512-5Et/UIsH6ZzVyJLMhhnbN5PDllRGhyhJXBXUlgOdD0yH47+PPeaN9BPDDrlX/eiJbLMimJOIuj5hhb+WhWT/Zw==",
"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==",
"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.104",
"resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.104.tgz",
"integrity": "sha512-5Et/UIsH6ZzVyJLMhhnbN5PDllRGhyhJXBXUlgOdD0yH47+PPeaN9BPDDrlX/eiJbLMimJOIuj5hhb+WhWT/Zw==",
"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==",
"requires": {
"@dessert-box/react": "^0.4.0",
"@floating-ui/react-dom-interactions": "^0.5.0",

4
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.104",
"@saleor/macaw-ui": "0.8.0-pre.105",
"@saleor/sdk": "0.6.0",
"@sentry/react": "^6.0.0",
"@types/faker": "^5.1.6",
@ -278,7 +278,7 @@
"^@material-ui/core$": "<rootDir>/node_modules/@material-ui/core",
"^@material-ui/icons$": "<rootDir>/node_modules/@material-ui/icons",
"^@material-ui/styles$": "<rootDir>/node_modules/@material-ui/styles",
"^@saleor/macaw-ui/next$": "<rootDir>/node_modules/@saleor/macaw-ui/dist/macaw-ui.cjs",
"^@saleor/macaw-ui/next$": "<rootDir>/node_modules/@saleor/macaw-ui/dist/macaw-ui.js",
"^react$": "<rootDir>/node_modules/react",
"^react-dom$": "<rootDir>/node_modules/react-dom"
}

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

@ -1,5 +1,5 @@
import { ConditionalFilters } from "@dashboard/components/ConditionalFilter";
import { Box, Button, Popover } from "@saleor/macaw-ui/next";
import { Box, Button, CloseIcon, Popover, Text } from "@saleor/macaw-ui/next";
import React from "react";
export const ExpressionFilters = () => (
@ -8,8 +8,26 @@ export const ExpressionFilters = () => (
<Button>Show filters</Button>
</Popover.Trigger>
<Popover.Content align="start">
<Box __minWidth="200px" __minHeight="100px" paddingX={4} paddingY={3}>
<Popover.Arrow />
<Box>
<Box
paddingX={5}
paddingY={4}
display="flex"
gap={1}
alignItems="center"
justifyContent="space-between"
backgroundColor="surfaceNeutralPlain"
>
<Text variant="body" size="medium">
Filter conditions
</Text>
<Box display="flex" alignItems="center" gap={2}>
<Button variant="tertiary">Clear filters</Button>
<Popover.Close>
<Button variant="tertiary" icon={<CloseIcon />} />
</Popover.Close>
</Box>
</Box>
<ConditionalFilters />
</Box>
</Popover.Content>

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

@ -1,4 +1,4 @@
import { Box, Text } from "@saleor/macaw-ui/next";
import { _ExperimentalFilters, Box, Divider } from "@saleor/macaw-ui/next";
import React, { FC } from "react";
import { useConditionalFilterContext } from "./context";
@ -15,7 +15,24 @@ export const ConditionalFilters: FC = () => {
return (
<Box>
{valueProvider.loading ? (
<Text>Loading...</Text>
<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} />
)}

7
src/components/ConditionalFilter/FilterElement/FilterElement.ts
View file

@ -24,7 +24,7 @@ class ExpressionValue {
}
public static fromUrlToken(token: UrlToken) {
const option = STATIC_OPTIONS.find(o => o.slug === token.name)
const option = STATIC_OPTIONS.find(o => o.slug === token.name);
if (!option) {
return new ExpressionValue(token.name, token.name, token.name);
@ -115,11 +115,11 @@ export class FilterElement {
public rowType(): RowType | null {
if (this.isStatic()) {
return this.value.value as RowType
return this.value.value as RowType;
}
if (this.isAttribute()) {
return "attribute"
return "attribute";
}
return null;
@ -161,7 +161,6 @@ export class FilterElement {
false,
);
}
return FilterElement.createEmpty();
}
}

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

@ -60,7 +60,13 @@ export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
};
return (
<Box>
<Box
paddingX={5}
paddingY={3}
backgroundColor="interactiveNeutralSecondaryHovering"
borderBottomLeftRadius={2}
borderBottomRightRadius={2}
>
<_ExperimentalFilters
leftOptions={leftOperandsProvider.operands}
// @ts-expect-error
@ -69,10 +75,10 @@ export const FiltersArea = ({ onConfirm }: FiltersAreaProps) => {
>
<_ExperimentalFilters.Footer>
<_ExperimentalFilters.AddRowButton>
Add new row
+ Add row
</_ExperimentalFilters.AddRowButton>
<_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)}>
Confirm
Save
</_ExperimentalFilters.ConfirmButton>
</_ExperimentalFilters.Footer>
</_ExperimentalFilters>