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 styled from "styled-components";
|
||||
import marginStyles from "./CommonStyles";
|
||||
import { isTablet } from "@appserver/components/utils/device";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
|
||||
const StyledRowContainer = styled(RowContainer)`
|
||||
@ -57,11 +58,21 @@ const StyledRowContainer = styled(RowContainer)`
|
||||
|
||||
StyledRowContainer.defaultProps = { theme: Base };
|
||||
|
||||
const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
||||
const FilesRowContainer = ({
|
||||
filesList,
|
||||
sectionWidth,
|
||||
viewAs,
|
||||
setViewAs,
|
||||
infoPanelVisible,
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
|
||||
|
||||
if (sectionWidth < 1025 || isMobile) {
|
||||
if (
|
||||
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||
(isTablet() && infoPanelVisible) ||
|
||||
isMobile
|
||||
) {
|
||||
viewAs !== "row" && setViewAs("row");
|
||||
} else {
|
||||
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 { isVisible: infoPanelVisible } = infoPanelStore;
|
||||
return {
|
||||
filesList,
|
||||
viewAs,
|
||||
setViewAs,
|
||||
infoPanelVisible,
|
||||
};
|
||||
})(observer(FilesRowContainer));
|
||||
|
@ -6,6 +6,7 @@ import TableHeader from "./TableHeader";
|
||||
import TableBody from "@appserver/components/table-container/TableBody";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import styled, { css } from "styled-components";
|
||||
import { isTablet } from "@appserver/components/utils/device";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
|
||||
const marginCss = css`
|
||||
@ -108,14 +109,13 @@ const Table = ({
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
(viewAs !== "table" && viewAs !== "row") ||
|
||||
!setViewAs ||
|
||||
infoPanelVisible
|
||||
)
|
||||
return;
|
||||
if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return;
|
||||
|
||||
if (sectionWidth < 1025 || isMobile) {
|
||||
if (
|
||||
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||
(isTablet() && infoPanelVisible) ||
|
||||
isMobile
|
||||
) {
|
||||
viewAs !== "row" && setViewAs("row");
|
||||
} else {
|
||||
viewAs !== "table" && setViewAs("table");
|
||||
|
Loading…
Reference in New Issue
Block a user