Web:Files:Home: change method for changing view from row to table and back
This commit is contained in:
parent
f91448f4c7
commit
6fccae257f
@ -5,6 +5,7 @@ import SimpleFilesRow from "./SimpleFilesRow";
|
|||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import marginStyles from "./CommonStyles";
|
import marginStyles from "./CommonStyles";
|
||||||
|
import { isTablet } from "@appserver/components/utils/device";
|
||||||
import { Base } from "@appserver/components/themes";
|
import { Base } from "@appserver/components/themes";
|
||||||
|
|
||||||
const StyledRowContainer = styled(RowContainer)`
|
const StyledRowContainer = styled(RowContainer)`
|
||||||
@ -57,11 +58,21 @@ const StyledRowContainer = styled(RowContainer)`
|
|||||||
|
|
||||||
StyledRowContainer.defaultProps = { theme: Base };
|
StyledRowContainer.defaultProps = { theme: Base };
|
||||||
|
|
||||||
const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
const FilesRowContainer = ({
|
||||||
|
filesList,
|
||||||
|
sectionWidth,
|
||||||
|
viewAs,
|
||||||
|
setViewAs,
|
||||||
|
infoPanelVisible,
|
||||||
|
}) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
|
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
|
||||||
|
|
||||||
if (sectionWidth < 1025 || isMobile) {
|
if (
|
||||||
|
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||||
|
(isTablet() && infoPanelVisible) ||
|
||||||
|
isMobile
|
||||||
|
) {
|
||||||
viewAs !== "row" && setViewAs("row");
|
viewAs !== "row" && setViewAs("row");
|
||||||
} else {
|
} else {
|
||||||
viewAs !== "table" && setViewAs("table");
|
viewAs !== "table" && setViewAs("table");
|
||||||
@ -85,12 +96,14 @@ const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default inject(({ filesStore }) => {
|
export default inject(({ filesStore, infoPanelStore }) => {
|
||||||
const { filesList, viewAs, setViewAs } = filesStore;
|
const { filesList, viewAs, setViewAs } = filesStore;
|
||||||
|
|
||||||
|
const { isVisible: infoPanelVisible } = infoPanelStore;
|
||||||
return {
|
return {
|
||||||
filesList,
|
filesList,
|
||||||
viewAs,
|
viewAs,
|
||||||
setViewAs,
|
setViewAs,
|
||||||
|
infoPanelVisible,
|
||||||
};
|
};
|
||||||
})(observer(FilesRowContainer));
|
})(observer(FilesRowContainer));
|
||||||
|
@ -6,6 +6,7 @@ import TableHeader from "./TableHeader";
|
|||||||
import TableBody from "@appserver/components/table-container/TableBody";
|
import TableBody from "@appserver/components/table-container/TableBody";
|
||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
import { isTablet } from "@appserver/components/utils/device";
|
||||||
import { Base } from "@appserver/components/themes";
|
import { Base } from "@appserver/components/themes";
|
||||||
|
|
||||||
const marginCss = css`
|
const marginCss = css`
|
||||||
@ -108,14 +109,13 @@ const Table = ({
|
|||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (
|
if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return;
|
||||||
(viewAs !== "table" && viewAs !== "row") ||
|
|
||||||
!setViewAs ||
|
|
||||||
infoPanelVisible
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
|
|
||||||
if (sectionWidth < 1025 || isMobile) {
|
if (
|
||||||
|
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||||
|
(isTablet() && infoPanelVisible) ||
|
||||||
|
isMobile
|
||||||
|
) {
|
||||||
viewAs !== "row" && setViewAs("row");
|
viewAs !== "row" && setViewAs("row");
|
||||||
} else {
|
} else {
|
||||||
viewAs !== "table" && setViewAs("table");
|
viewAs !== "table" && setViewAs("table");
|
||||||
|
Loading…
Reference in New Issue
Block a user