Skip to content

Commit

Permalink
Merge pull request #10 from bigcommerce/feature/advanced-filters
Browse files Browse the repository at this point in the history
Feature/advanced filters
  • Loading branch information
davelinke authored Jan 7, 2025
2 parents 9ffcf95 + 61a8201 commit 183e1d3
Show file tree
Hide file tree
Showing 12 changed files with 1,619 additions and 15 deletions.
4 changes: 4 additions & 0 deletions packages/examples-site/public/assets/css/theme-reset.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ body {
color: var(--bc-color-type-primary);
}

input {
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

html,
body {
height: 100%;
Expand Down
14 changes: 10 additions & 4 deletions packages/examples-site/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import PageAnchorNav from "./pages/AnchorNavPage/AnchorNavPage";
import CardGridPage from "./pages/CardGridPage";
import InstallScreenApp from "./pages/InstallScreenPage/AppExample";
import InstallScreenChannel from "./pages/InstallScreenPage/ChannelExample";
import PageFiltersSearch from "./pages/FiltersSearchPage/FiltersSearchPage";
import PageFiltersDropdowns from "./pages/FiltersDropdownsPage/FiltersDropdownsPage";
import PageFiltersAdvanced from "./pages/FiltersAdvancedPAge/FiltersAdvancedPage";

export const alertsManager = createAlertsManager();

Expand All @@ -29,10 +32,13 @@ const RouteFC = () => {
{ path: "/page-crud-list", element: <PageCRUDList /> },
{ path: "/page-crud-add", element: <PageCRUDAddEdit /> },
{ path: "/page-crud-edit/:sku", element: <PageCRUDAddEdit /> },
{ path: "/page-anchor-nav", element: <PageAnchorNav />},
{ path: "/card-grid", element: <CardGridPage />},
{ path: "/install-screen-app", element: <InstallScreenApp />},
{ path: "/install-screen-channel", element: <InstallScreenChannel />},
{ path: "/page-anchor-nav", element: <PageAnchorNav /> },
{ path: "/card-grid", element: <CardGridPage /> },
{ path: "/install-screen-app", element: <InstallScreenApp /> },
{ path: "/install-screen-channel", element: <InstallScreenChannel /> },
{ path: "/filters-search", element: <PageFiltersSearch /> },
{ path: "/filters-dropdowns", element: <PageFiltersDropdowns /> },
{ path: "/filters-advanced", element: <PageFiltersAdvanced /> },
]);
return routes;
};
Expand Down
2 changes: 1 addition & 1 deletion packages/examples-site/src/data/dummyProducts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export interface DummyItem {
name: string;
stock: number;
image: string;
categories: string;
categories: number[];
price: number;
url: string;
}
Expand Down
17 changes: 12 additions & 5 deletions packages/examples-site/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
import { theme } from "@bigcommerce/big-design-theme";
import { ThemeProvider } from "styled-components";

const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);

root.render(
<React.StrictMode>
<App />
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</React.StrictMode>
);
16 changes: 11 additions & 5 deletions packages/examples-site/src/pages/CRUDListPage/CRUDListPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -163,10 +163,10 @@ const PageCRUDList: FunctionComponent = () => {
// DATA HANDLING
const [currentItems, setCurrentItems] = useState<Item[]>([]);

const setTableItems = (themItems: any) => {
const maxItems = currentPage * itemsPerPage;
const setTableItems = (themItems: any, pageCurrent = currentPage, pageItemsNum = itemsPerPage) => {
const maxItems = pageCurrent * pageItemsNum;
const lastItem = Math.min(maxItems, themItems.length);
const firstItem = Math.max(0, maxItems - itemsPerPage);
const firstItem = Math.max(0, maxItems - pageItemsNum);

setCurrentItems(themItems.slice(firstItem, lastItem));
};
Expand All @@ -181,6 +181,11 @@ const PageCRUDList: FunctionComponent = () => {
setItemsPerPage(newRange);
};

const onPageChange = (newPage: number) => {
setCurrentPage(newPage);
setTableItems(items, newPage);
};

// SORTING
const [columnHash, setColumnHash] = useState("");
const [direction, setDirection] = useState<"ASC" | "DESC">("ASC");
Expand All @@ -195,9 +200,10 @@ const PageCRUDList: FunctionComponent = () => {
const [searchValue, setSearchValue] = useState("");
const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchValue(event.target.value);
setCurrentPage(1);
// let's reset the items to the original data if the search value is empty
if (!event.target.value) {
setTableItems(items);
setTableItems(items, 1);
}
};
// search submission handler
Expand Down Expand Up @@ -408,7 +414,7 @@ const PageCRUDList: FunctionComponent = () => {
pagination={{
currentPage,
totalItems: items.length,
onPageChange: setCurrentPage,
onPageChange,
itemsPerPageOptions,
onItemsPerPageChange,
itemsPerPage,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { theme as defaultTheme } from "@bigcommerce/big-design-theme";
import styled from "styled-components";
import { BoxProps } from "@bigcommerce/big-design";

import { GridItem, Link } from "@bigcommerce/big-design";

export const StyledGridItem = styled(GridItem)`
align-content: center;
`;

export const StyledFiltersLink = styled(Link)`
display: inline-flex;
align-items: center;
flex-gap: 0.25rem;
`;

export const StyledPanelContents = styled.div<BoxProps>`
display: block;
box-sizing: border-box;
margin-inline: -${({ theme }) => theme.spacing.medium};
max-width: calc(
100% + ${({ theme }) => theme.spacing.medium}px +
${({ theme }) => theme.spacing.medium}px
);
overflow-x: auto;
@media (min-width: ${({ theme }) => theme.breakpointValues.tablet}) {
margin-inline: -${({ theme }) => theme.spacing.xLarge};
max-width: calc(
100% + ${({ theme }) => theme.spacing.xLarge}px +
${({ theme }) => theme.spacing.xLarge}px
);
}
`;

// Provides default theme props to ensure consistent styling if not provided externally
StyledPanelContents.defaultProps = { theme: defaultTheme };

export const StyledProductImage = styled.div<BoxProps>`
display: block;
box-sizing: border-box;
width: 47px;
height: 47px;
border: ${({ theme }) => theme.border.box};
border-radius: ${({ theme }) => theme.borderRadius.normal};
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
`;

StyledProductImage.defaultProps = { theme: defaultTheme };


export const StyledBulkActions = styled.div<BoxProps>`
display: block;
@media (min-width: ${({ theme }) => theme.breakpointValues.tablet}) {
min-width: 300px;
}
`;

StyledBulkActions.defaultProps = { theme: defaultTheme };
Loading

0 comments on commit 183e1d3

Please sign in to comment.