summaryrefslogtreecommitdiff
path: root/src/containers
diff options
context:
space:
mode:
Diffstat (limited to 'src/containers')
-rw-r--r--src/containers/Page.tsx62
1 files changed, 15 insertions, 47 deletions
diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index 69f3513..887e839 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -1,62 +1,30 @@
import React from 'react';
-import { useLocation } from 'react-router-dom';
import Paper from '../components/Paper';
import Button from '../components/Button';
-import { Action, Filter } from '../lib/ServiceContext';
-import { SelectBase } from '../components/Select';
+import { Action } from '../lib/ServiceContext';
interface Props {
title?: string;
actions?: Action[];
- filters?: Filter[];
- applyFilter?: (key: string, value: string) => void;
- resetFilters?: () => void;
+ filters?: JSX.Element;
className?: string;
}
const style = 'mb-2 flex justify-between md:flex-row md:items-center';
-const Page: React.FC<Props> = ({ title, actions, filters, applyFilter, resetFilters, className, children }) => {
- const location = useLocation();
-
- const handleFilterChange = (key: string) => (event: React.ChangeEvent<HTMLSelectElement>) => {
- if (applyFilter) applyFilter(key, event.target.value);
- };
-
- return (
- <Paper className="xl:m-5">
- <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
- <span className="text-2xl font-bold">{title}</span>
- <div className="flex">
- <div className="mr-6 flex items-center">
- {filters && location.search && (
- <span
- onClick={resetFilters}
- role="presentation"
- className="underline mr-2 cursor-pointer"
- >
- Сбросить фильтры
- </span>
- )}
- {filters?.map(filter => (
- <SelectBase
- key={filter.key}
- options={filter.options || []}
- value={filter.value}
- onChange={handleFilterChange(filter.key)}
- />
- ))}
- </div>
- <div>
- {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
- </div>
- </div>
- </div>
- <div className={className}>
- {children}
+const Page: React.FC<Props> = ({ title, actions, filters, className, children }) => (
+ <Paper className="xl:m-5">
+ <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
+ <span className="text-2xl font-bold">{title}</span>
+ <div className="flex">
+ {filters}
+ {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
</div>
- </Paper>
- );
-};
+ </div>
+ <div className={className}>
+ {children}
+ </div>
+ </Paper>
+);
export default Page;