test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: 移动端尺寸选择器增加记忆功能 (#11014)

Browse Source 
* feat: 移动端尺寸选择器增加记忆功能

* 优化下

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
This commit is contained in:
qkiroc 2024-10-11 15:41:28 +08:00 committed by GitHub
parent 33e0339548
commit 38cb208b98
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/amis-ui/src/components/MobileDevTool.tsx
View File

@ -103,8 +103,17 @@ export default function MobileDevTool(props: {
container: HTMLElement | null;
previewBody: HTMLElement | null;
}) {
const [dimension, setDimension] = React.useState(dimensions[1]);
const [scale, setScale] = React.useState(100);
const [dimension, setDimension] = React.useState(
() =>
JSON.parse(
localStorage.getItem('amis-mobile-dev-tool-dimension') || 'null'
) || dimensions[1]
);
const [scale, setScale] = React.useState(
() =>
parseInt(localStorage.getItem('amis-mobile-dev-tool-scale') || '0', 10) ||
100
);
const [autoScale, setAutoScale] = React.useState(100);
const {container, previewBody} = props;
@ -116,7 +125,7 @@ export default function MobileDevTool(props: {
width: dimension.width,
height: dimension.height
});
updatePreviewScale(100);
updatePreviewScale(scale);
if (container) {
resizeObserver.observe(container);
@ -133,6 +142,23 @@ export default function MobileDevTool(props: {
};
}, [container, previewBody]);
function updateDimension(dimension: {
width: number;
height: number;
name: string;
}) {
setDimension(dimension);
localStorage.setItem(
'amis-mobile-dev-tool-dimension',
JSON.stringify(dimension)
);
}
function updateScale(scale: number) {
setScale(scale);
localStorage.setItem('amis-mobile-dev-tool-scale', scale + '');
}
function updateAutoScale() {
if (!container) {
return;
@ -149,7 +175,7 @@ export default function MobileDevTool(props: {
}
function handleRotateScreen() {
setDimension({
updateDimension({
name: dimension.name,
width: dimension.height,
height: dimension.width
@ -162,16 +188,16 @@ export default function MobileDevTool(props: {
}
function handleAutoScale() {
setScale(autoScale);
updateScale(autoScale);
updatePreviewScale(autoScale);
}
function handleDimensionChange(item: any) {
if (item) {
const value = dimensions.find(n => n.name === item.value)!;
setDimension(value);
updateDimension(value);
updatePreviewSize(value);
setScale(100);
updateScale(100);
updatePreviewScale(100);
updateAutoScale();
}
@ -187,7 +213,7 @@ export default function MobileDevTool(props: {
width: type === 'width' ? number : dimension.width,
height: type === 'height' ? number : dimension.height
};
setDimension(newDimension);
updateDimension(newDimension);
updatePreviewSize(newDimension);
updateAutoScale();
}
@ -264,7 +290,7 @@ export default function MobileDevTool(props: {
}))
]}
onChange={(item: any) => {
setScale(item.value);
updateScale(item.value);
updatePreviewScale(item.value);
}}
/>
@ -291,7 +317,7 @@ export default function MobileDevTool(props: {
<CustomSizeHandle
previewBody={previewBody}
onChange={(w, h) => {
setDimension({
updateDimension({
name: 'custom',
width: w - 20,
height: h - 20