-
Notifications
You must be signed in to change notification settings - Fork 126
/
ResponsiveLayout.tsx
38 lines (30 loc) · 1.08 KB
/
ResponsiveLayout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React, { useEffect } from 'react';
import propTypes from 'prop-types';
import { ComponentType, isFunction } from '../../lib/utils';
import { CommonWrapper } from '../../internal/CommonWrapper';
import { ResponsiveLayoutFlags } from './types';
import { useResponsiveLayout } from './useResponsiveLayout';
interface ResponsiveLayoutProps {
onLayoutChange?: (layout: ResponsiveLayoutFlags) => void;
children?: React.ReactNode | ((currentLayout: ResponsiveLayoutFlags) => React.ReactNode);
}
/**
* Компонент для определения текущего лэйаута.
*/
export const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = (props) => {
const layoutFlags = useResponsiveLayout();
useEffect(() => {
if (props.onLayoutChange) {
props.onLayoutChange(layoutFlags);
}
}, [layoutFlags]);
return (
<CommonWrapper {...props}>
{isFunction(props.children) ? props.children(layoutFlags) ?? null : props.children ?? null}
</CommonWrapper>
);
};
ResponsiveLayout.propTypes = {
onLayoutChange: propTypes.func,
children: ComponentType,
};