roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-05-07 17:12:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

102
packages/design-system/atoms/breakpoints/BreakpointProvider.tsx
View file

@ -3,66 +3,64 @@ import { mediaQueryDefs } from './Breakpoints';
import { BreakpointContext, ScreenSize } from './Context';
const resetScreen: ScreenSize = {
onSmallScreen: false,
onTablet: false,
onDesktop: false,
onSmallScreen: false,
onTablet: false,
onDesktop: false,
};
export class BreakpointsProvider extends React.Component<{}, ScreenSize> {
public state = {
...resetScreen,
onSmallScreen: true,
};
public state = {
...resetScreen,
onSmallScreen: true,
};
private mediaQueries: { [key in keyof ScreenSize]: MediaQueryList } = {
onSmallScreen: window.matchMedia(
mediaQueryDefs.onSmallScreen.replace('@media screen and', '')
),
onTablet: window.matchMedia(
mediaQueryDefs.onTablet.replace('@media screen and', '')
),
onDesktop: window.matchMedia(
mediaQueryDefs.onDesktop.replace('@media screen and', '')
),
};
private mediaQueries: { [key in keyof ScreenSize]: MediaQueryList } = {
onSmallScreen: window.matchMedia(
mediaQueryDefs.onSmallScreen.replace('@media screen and', '')
),
onTablet: window.matchMedia(mediaQueryDefs.onTablet.replace('@media screen and', '')),
onDesktop: window.matchMedia(
mediaQueryDefs.onDesktop.replace('@media screen and', '')
),
};
componentDidMount() {
Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
mediaQuery.addEventListener('change', this.handleMediaEvent)
);
componentDidMount() {
Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
mediaQuery.addEventListener('change', this.handleMediaEvent)
);
}
componentWillUnmount() {
Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
mediaQuery.removeEventListener('change', this.handleMediaEvent)
);
}
handleMediaEvent = (event: MediaQueryListEvent) => {
console.log('handleMediaEvent', { event });
this.setState({
...resetScreen,
...this.calculateScreen(),
});
};
calculateScreen = () => {
if (this.mediaQueries.onDesktop.matches) {
return { onDesktop: true };
}
componentWillUnmount() {
Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
mediaQuery.removeEventListener('change', this.handleMediaEvent)
);
if (this.mediaQueries.onTablet.matches) {
return { onTablet: true };
}
handleMediaEvent = (event: MediaQueryListEvent) => {
console.log('handleMediaEvent', { event });
this.setState({
...resetScreen,
...this.calculateScreen(),
});
};
return { onSmallScreen: true };
};
calculateScreen = () => {
if (this.mediaQueries.onDesktop.matches) {
return { onDesktop: true };
}
if (this.mediaQueries.onTablet.matches) {
return { onTablet: true };
}
return { onSmallScreen: true };
};
render() {
return (
<BreakpointContext.Provider value={{ screenSize: { ...this.state } }}>
{this.props.children}
</BreakpointContext.Provider>
);
}
render() {
return (
<BreakpointContext.Provider value={{ screenSize: { ...this.state } }}>
{this.props.children}
</BreakpointContext.Provider>
);
}
}