github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-15 20:52:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix windows preview width

Browse Source
This commit is contained in:
yehuozhili 2020-09-23 13:09:27 +08:00
parent bb2845afa2
commit 25c3a3c993
5 changed files with 108 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -88,6 +88,7 @@
"@types/file-saver": "^2.0.1",
"@types/node": "^14.6.2",
"@types/react-color": "^3.0.4",
"@types/react-grid-layout": "^1.1.0",
"@types/redux-logger": "^3.0.8",
"@typescript-eslint/eslint-plugin": "4.1.1",
"@typescript-eslint/parser": "4.1.1",

79
src/pages/editor/preview.js
View File

@ -1,79 +0,0 @@
import React, { memo, useEffect, useState } from 'react';
import GridLayout from 'react-grid-layout';
import DynamicEngine from 'components/DynamicEngine';
import req from '@/utils/req';
import styles from './index.less';
const isMac = navigator.platform.indexOf('Mac') === 0;
const pcStyle = {
width: isMac ? 395 : 412,
margin: '20px auto',
border: '10px solid #000',
borderRadius: '20px',
height: '684px',
overflow: 'auto',
};
const PreviewPage = memo(props => {
const [pointData, setPointData] = useState(() => {
let pointDataStr = localStorage.getItem('pointData');
let points;
try {
points = JSON.parse(pointDataStr) || [];
} catch (err) {
points = [];
}
return points.map(item => ({
...item,
point: { ...item.point, isDraggable: false, isResizable: false },
}));
});
const vw = window.innerWidth;
useEffect(() => {
const { tid } = props.location.query;
let timer = null;
req
.get('/visible/preview/get', { params: { tid } })
.then(res => {
setPointData(
res.map(item => ({
...item,
point: { ...item.point, isDraggable: false, isResizable: false },
})),
);
})
.catch(err => {
timer = setTimeout(() => {
window.close();
}, 3000);
});
return () => {
window.clearTimeout(timer);
};
}, []);
return (
<div style={vw > 800 ? pcStyle : {}}>
<GridLayout
className={styles.layout}
cols={24}
rowHeight={2}
width={vw > 800 ? 375 : vw}
margin={[0, 0]}
id="xx"
>
{pointData.map(value => (
<div className={styles.dragItem} key={value.id} data-grid={value.point}>
<DynamicEngine {...value.item} />
</div>
))}
</GridLayout>
</div>
);
});
export default PreviewPage;

87
src/pages/editor/preview.tsx Normal file
View File

@ -0,0 +1,87 @@
import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
import GridLayout from 'react-grid-layout';
import DynamicEngine from 'components/DynamicEngine';
import req from '@/utils/req';
import styles from './index.less';
import { useGetScrollBarWidth } from '@/utils/tool';
import { LocationDescriptorObject } from 'history-with-query';
const isMac = navigator.platform.indexOf('Mac') === 0;
interface PreviewPageProps {
location: LocationDescriptorObject;
}
interface PointDataItem {
id: string;
item: Record<string, any>;
point: Record<string, any>;
}
const PreviewPage = memo((props: PreviewPageProps) => {
const [pointData, setPointData] = useState(() => {
let pointDataStr = localStorage.getItem('pointData');
let points;
try {
points = JSON.parse(pointDataStr!) || [];
} catch (err) {
points = [];
}
return points.map((item: PointDataItem) => ({
...item,
point: { ...item.point, isDraggable: false, isResizable: false },
}));
});
const vw = window.innerWidth;
useEffect(() => {
const tid = props.location.query?.tid;
req
.get<any, PointDataItem[]>('/visible/preview/get', { params: { tid } })
.then(res => {
setPointData(
res.map(item => ({
...item,
point: { ...item.point, isDraggable: false, isResizable: false },
})),
);
})
.catch(err => {
console.error(err);
});
}, [props.location.query]);
const ref = useRef<HTMLDivElement>(null);
const width = useGetScrollBarWidth(ref);
const pcStyle = useMemo(() => {
return {
width: isMac ? 395 : 375 + width,
margin: '20px auto',
border: '10px solid #000',
borderRadius: '20px',
height: '684px',
overflow: 'auto',
};
}, [width]);
return (
<div ref={ref} style={vw > 800 ? pcStyle : {}}>
<GridLayout
className={styles.layout}
cols={24}
rowHeight={2}
width={vw > 800 ? 375 : vw}
margin={[0, 0]}
>
{pointData.map((value: PointDataItem) => (
<div className={styles.dragItem} key={value.id} data-grid={value.point}>
<DynamicEngine {...(value.item as any)} />
</div>
))}
</GridLayout>
</div>
);
});
export default PreviewPage;

14
src/utils/tool.ts
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { RefObject, useEffect, useLayoutEffect, useState } from 'react';
import { RGBColor } from 'react-color';
// 生成uuid
@ -52,3 +52,15 @@ export function useGetRect() {
}, []);
return rect;
}
export function useGetScrollBarWidth(ref: RefObject<HTMLElement>) {
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
if (ref.current) {
const diff = ref.current.offsetWidth - ref.current.clientWidth;
console.log(diff);
setWidth(diff);
}
}, [ref]);
return width;
}

7
yarn.lock
View File

@ -2217,6 +2217,13 @@
dependencies:
"@types/react" "*"
"@types/react-grid-layout@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@types/react-grid-layout/-/react-grid-layout-1.1.0.tgz#6592d391d64b9efebd5588a6a8fbbb9040c30998"
integrity sha512-lnt4YEXRHWimtbrghVSq+Ug7ByQl9cROM/xJewjLNeuqrT4tnKGe4tXX/3+/xYANG96L57F4+G0qf8jCgvDxWA==
dependencies:
"@types/react" "*"
"@types/react-helmet@^6.1.0":
version "6.1.0"
resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.0.tgz#af586ed685f4905e2adc7462d1d65ace52beee7a"