Web: Common: Layout: added isTabletView flag to store
This commit is contained in:
parent
8e0104920b
commit
b154b4bcc8
@ -1,9 +1,15 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect } from "react";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import MobileLayout from "./MobileLayout";
|
import MobileLayout from "./MobileLayout";
|
||||||
import { utils } from "asc-web-components";
|
import { utils } from "asc-web-components";
|
||||||
import { isIOS, isFirefox, isChrome, isSafari } from "react-device-detect";
|
import { isIOS, isFirefox, isChrome, isSafari } from "react-device-detect";
|
||||||
|
|
||||||
|
import { connect } from "react-redux";
|
||||||
|
import store from "../../store";
|
||||||
|
|
||||||
|
const { setIsTabletView } = store.auth.actions;
|
||||||
|
const { getIsTabletView } = store.auth.selectors;
|
||||||
|
|
||||||
const { size } = utils.device;
|
const { size } = utils.device;
|
||||||
|
|
||||||
const StyledContainer = styled.div`
|
const StyledContainer = styled.div`
|
||||||
@ -14,31 +20,27 @@ const StyledContainer = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const Layout = (props) => {
|
const Layout = (props) => {
|
||||||
const { children } = props;
|
const { children, isTabletView, setIsTabletView } = props;
|
||||||
const isTablet = window.innerWidth <= size.tablet;
|
|
||||||
|
|
||||||
const [windowWidth, setWindowWidth] = useState({
|
|
||||||
matches: isTablet,
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(size.tablet);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let mediaQuery = window.matchMedia("(max-width: 1024px)");
|
const isTablet = window.innerWidth <= size.tablet;
|
||||||
mediaQuery.addListener(setWindowWidth);
|
setIsTabletView(isTablet);
|
||||||
|
|
||||||
return () => mediaQuery.removeListener(setWindowWidth);
|
let mediaQuery = window.matchMedia("(max-width: 1024px)");
|
||||||
|
mediaQuery.addEventListener("change", isViewChangeHandler);
|
||||||
|
|
||||||
|
return () => mediaQuery.removeEventListener("change", isViewChangeHandler);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isTablet) {
|
if (isTabletView) {
|
||||||
if (isIOS && isSafari) window.addEventListener("resize", resizeHandler);
|
if (isIOS && isSafari) window.addEventListener("resize", resizeHandler);
|
||||||
else window.addEventListener("orientationchange", resizeHandler);
|
else window.addEventListener("orientationchange", resizeHandler);
|
||||||
resizeHandler();
|
resizeHandler();
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (isTablet) {
|
if (isTabletView) {
|
||||||
if (isIOS && isSafari)
|
if (isIOS && isSafari)
|
||||||
window.removeEventListener("resize", resizeHandler);
|
window.removeEventListener("resize", resizeHandler);
|
||||||
else window.removeEventListener("orientationchange", resizeHandler);
|
else window.removeEventListener("orientationchange", resizeHandler);
|
||||||
@ -46,6 +48,11 @@ const Layout = (props) => {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const isViewChangeHandler = (e) => {
|
||||||
|
const { matches } = e;
|
||||||
|
setIsTabletView(matches);
|
||||||
|
};
|
||||||
|
|
||||||
const resizeHandler = () => {
|
const resizeHandler = () => {
|
||||||
const intervalTime = 100;
|
const intervalTime = 100;
|
||||||
const endTimeout = 300;
|
const endTimeout = 300;
|
||||||
@ -86,14 +93,24 @@ const Layout = (props) => {
|
|||||||
}, endTimeout);
|
}, endTimeout);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log(isTabletView, "isTabletView");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledContainer className="Layout">
|
<StyledContainer className="Layout">
|
||||||
{windowWidth && windowWidth.matches ? (
|
{isTabletView ? <MobileLayout {...props} /> : children}
|
||||||
<MobileLayout {...props} windowWidth={windowWidth} />
|
|
||||||
) : (
|
|
||||||
children
|
|
||||||
)}
|
|
||||||
</StyledContainer>
|
</StyledContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default Layout;
|
|
||||||
|
const mapStateToProps = (state) => {
|
||||||
|
return {
|
||||||
|
isTabletView: getIsTabletView(state),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch) => {
|
||||||
|
return {
|
||||||
|
setIsTabletView: (isTabletView) => dispatch(setIsTabletView(isTabletView)),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Layout);
|
||||||
|
@ -21,6 +21,7 @@ export const SET_CUSTOM_NAMES = "SET_CUSTOM_NAMES";
|
|||||||
export const SET_WIZARD_COMPLETED = "SET_WIZARD_COMPLETED";
|
export const SET_WIZARD_COMPLETED = "SET_WIZARD_COMPLETED";
|
||||||
export const SET_HEADER_VISIBLE = "SET_HEADER_VISIBLE";
|
export const SET_HEADER_VISIBLE = "SET_HEADER_VISIBLE";
|
||||||
export const SET_IS_AUTHENTICATED = "SET_IS_AUTHENTICATED";
|
export const SET_IS_AUTHENTICATED = "SET_IS_AUTHENTICATED";
|
||||||
|
export const SET_IS_TABLET_VIEW = "SET_IS_TABLET_VIEW";
|
||||||
|
|
||||||
export function setCurrentUser(user) {
|
export function setCurrentUser(user) {
|
||||||
return {
|
return {
|
||||||
@ -139,6 +140,13 @@ export function setIsAuthenticated(isAuthenticated) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function setIsTabletView(isTabletView) {
|
||||||
|
return {
|
||||||
|
type: SET_IS_TABLET_VIEW,
|
||||||
|
isTabletView,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export function getUser(dispatch) {
|
export function getUser(dispatch) {
|
||||||
return api.people
|
return api.people
|
||||||
.getUser()
|
.getUser()
|
||||||
|
@ -17,8 +17,9 @@ import {
|
|||||||
SET_WIZARD_COMPLETED,
|
SET_WIZARD_COMPLETED,
|
||||||
SET_HEADER_VISIBLE,
|
SET_HEADER_VISIBLE,
|
||||||
SET_IS_AUTHENTICATED,
|
SET_IS_AUTHENTICATED,
|
||||||
|
SET_IS_TABLET_VIEW,
|
||||||
} from "./actions";
|
} from "./actions";
|
||||||
import { LANGUAGE, AUTH_KEY, HEADER_VISIBLE_KEY } from "../../constants";
|
import { LANGUAGE, AUTH_KEY, HEADER_VISIBLE_KEY } from "../../constants";
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
isAuthenticated: false,
|
isAuthenticated: false,
|
||||||
@ -65,6 +66,7 @@ const initialState = {
|
|||||||
},
|
},
|
||||||
isEncryptionSupport: false, // TODO: should switch to "true", when desktop editors client uses
|
isEncryptionSupport: false, // TODO: should switch to "true", when desktop editors client uses
|
||||||
isHeaderVisible: false,
|
isHeaderVisible: false,
|
||||||
|
isTabletView: false,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -169,6 +171,13 @@ const authReducer = (state = initialState, action) => {
|
|||||||
isHeaderVisible: action.isHeaderVisible,
|
isHeaderVisible: action.isHeaderVisible,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
case SET_IS_TABLET_VIEW:
|
||||||
|
return Object.assign({}, state, {
|
||||||
|
settings: {
|
||||||
|
...state.settings,
|
||||||
|
isTabletView: action.isTabletView,
|
||||||
|
},
|
||||||
|
});
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
@ -65,6 +65,8 @@ export const getIsLoaded = (state) => state.auth.isLoaded;
|
|||||||
|
|
||||||
export const getIsLoadedSection = (state) => state.auth.isLoadedSection;
|
export const getIsLoadedSection = (state) => state.auth.isLoadedSection;
|
||||||
|
|
||||||
|
export const getIsTabletView = (state) => state.auth.settings.isTabletView;
|
||||||
|
|
||||||
export const getDefaultPage = createSelector(
|
export const getDefaultPage = createSelector(
|
||||||
[getSettings],
|
[getSettings],
|
||||||
(settings) => (settings && settings.defaultPage) || ""
|
(settings) => (settings && settings.defaultPage) || ""
|
||||||
|
Loading…
Reference in New Issue
Block a user