amis-ui 6.9.0-rc.2 → 6.9.0-rc.4

package/esm/components/MobileDevTool.js

@@ -0,0 +1,300 @@
+/**
+ * amis-ui v6.9.0-rc.4
+ * Copyright 2018-2024 fex
+ */
+
+import { __read, __spreadArray } from 'tslib';
+import React__default, { useEffect } from 'react';
+import { Icon } from './icons.js';
+import { Select } from 'amis-ui';
+import debounce from 'lodash/debounce';
+import { Portal } from 'react-overlays';
+
+var dimensions = [
+    {
+        name: 'custom',
+        width: 375,
+        height: 667
+    },
+    {
+        name: 'iPhone SE',
+        width: 375,
+        height: 667
+    },
+    {
+        name: 'iPhone XR',
+        width: 414,
+        height: 896
+    },
+    {
+        name: 'iPhone 12 Pro',
+        width: 390,
+        height: 844
+    },
+    {
+        name: 'iPhone 14 Pro Max',
+        width: 430,
+        height: 932
+    },
+    {
+        name: 'Pixel 7',
+        width: 412,
+        height: 915
+    },
+    {
+        name: 'Samsung Galaxy S8+',
+        width: 360,
+        height: 740
+    },
+    {
+        name: 'Samsung Galaxy S20 Ultra',
+        width: 412,
+        height: 915
+    },
+    {
+        name: 'iPad Mini',
+        width: 768,
+        height: 1024
+    },
+    {
+        name: 'iPad Air',
+        width: 820,
+        height: 1180
+    },
+    {
+        name: 'iPad Pro',
+        width: 1024,
+        height: 1366
+    },
+    {
+        name: 'Surface Pro 7',
+        width: 912,
+        height: 1368
+    },
+    {
+        name: 'Surface Duo',
+        width: 540,
+        height: 720
+    },
+    {
+        name: 'Galaxy Z Fold 5',
+        width: 344,
+        height: 882
+    },
+    {
+        name: 'Asus Zenfone Fold',
+        width: 853,
+        height: 1280
+    },
+    {
+        name: 'Samsung Galaxy A51/71',
+        width: 412,
+        height: 914
+    },
+    {
+        name: 'Nest Hub',
+        width: 1024,
+        height: 600
+    },
+    {
+        name: 'Next Hub Max',
+        width: 1280,
+        height: 800
+    }
+];
+var scaleList = [50, 75, 100, 125, 150, 200];
+function MobileDevTool(props) {
+    var _a = __read(React__default.useState(function () {
+        return JSON.parse(localStorage.getItem('amis-mobile-dev-tool-dimension') || 'null') || dimensions[1];
+    }), 2), dimension = _a[0], setDimension = _a[1];
+    var _b = __read(React__default.useState(function () {
+        return parseInt(localStorage.getItem('amis-mobile-dev-tool-scale') || '0', 10) ||
+            100;
+    }), 2), scale = _b[0], setScale = _b[1];
+    var _c = __read(React__default.useState(100), 2), autoScale = _c[0], setAutoScale = _c[1];
+    var container = props.container, previewBody = props.previewBody;
+    var resizeObserver = new ResizeObserver(debounce(updateAutoScale, 300));
+    useEffect(function () {
+        updatePreviewSize({
+            width: dimension.width,
+            height: dimension.height
+        });
+        updatePreviewScale(scale);
+        if (container) {
+            resizeObserver.observe(container);
+        }
+        return function () {
+            if (container) {
+                resizeObserver.unobserve(container);
+            }
+            if (previewBody) {
+                previewBody.style.width = '';
+                previewBody.style.height = '';
+                previewBody.style.transform = '';
+            }
+        };
+    }, [container, previewBody]);
+    function updateDimension(dimension) {
+        setDimension(dimension);
+        localStorage.setItem('amis-mobile-dev-tool-dimension', JSON.stringify(dimension));
+    }
+    function updateScale(scale) {
+        setScale(scale);
+        localStorage.setItem('amis-mobile-dev-tool-scale', scale + '');
+    }
+    function updateAutoScale() {
+        if (!container) {
+            return;
+        }
+        var containerRect = container.getBoundingClientRect();
+        var width = containerRect.width, height = containerRect.height;
+        var previewBodyWidth = (previewBody === null || previewBody === void 0 ? void 0 : previewBody.clientWidth) || 375;
+        var previewBodyHeight = (previewBody === null || previewBody === void 0 ? void 0 : previewBody.clientHeight) || 667;
+        var scale = Math.min((width - 50) / previewBodyWidth, (height * 0.9) / previewBodyHeight);
+        setAutoScale(Math.floor(scale * 100));
+    }
+    function handleRotateScreen() {
+        updateDimension({
+            name: dimension.name,
+            width: dimension.height,
+            height: dimension.width
+        });
+        updatePreviewSize({
+            width: dimension.height,
+            height: dimension.width
+        });
+        updateAutoScale();
+    }
+    function handleAutoScale() {
+        updateScale(autoScale);
+        updatePreviewScale(autoScale);
+    }
+    function handleDimensionChange(item) {
+        if (item) {
+            var value = dimensions.find(function (n) { return n.name === item.value; });
+            updateDimension(value);
+            updatePreviewSize(value);
+            updateScale(100);
+            updatePreviewScale(100);
+            updateAutoScale();
+        }
+    }
+    function handleCustomInputDimensionChange(value, type) {
+        var number = parseInt(value || '0', 10);
+        var newDimension = {
+            name: 'custom',
+            width: type === 'width' ? number : dimension.width,
+            height: type === 'height' ? number : dimension.height
+        };
+        updateDimension(newDimension);
+        updatePreviewSize(newDimension);
+        updateAutoScale();
+    }
+    function updatePreviewSize(dimension) {
+        if (previewBody) {
+            // 预览区域宽高加上20px的padding
+            previewBody.style.width = dimension.width + 20 + 'px';
+            previewBody.style.height = dimension.height + 20 + 'px';
+        }
+    }
+    function updatePreviewScale(scale) {
+        if (previewBody) {
+            previewBody.style.transform =
+                'translateX(-50%) scale(' + scale / 100 + ')';
+        }
+    }
+    return (React__default.createElement("div", { className: "ae-MobileDevTool" },
+        React__default.createElement("div", { className: "ae-MobileDevTool-dimensions" },
+            React__default.createElement("label", null, "\u5C3A\u5BF8:"),
+            React__default.createElement(Select, { className: "ae-MobileDevTool-select", value: dimension.name, onChange: handleDimensionChange, options: dimensions.map(function (n) { return ({
+                    label: n.name === 'custom' ? '自定义' : n.name,
+                    value: n.name
+                }); }), clearable: false })),
+        React__default.createElement("div", { className: "ae-MobileDevTool-dimension" },
+            dimension.name === 'custom' ? (React__default.createElement("input", { className: "ae-MobileDevTool-dimension-input", value: dimension.width, onChange: function (event) {
+                    var value = event.currentTarget.value;
+                    handleCustomInputDimensionChange(value, 'width');
+                } })) : (React__default.createElement("span", null, dimension.width)),
+            React__default.createElement("span", null, "\u00D7"),
+            dimension.name === 'custom' ? (React__default.createElement("input", { className: "ae-MobileDevTool-dimension-input", value: dimension.height, onChange: function (event) {
+                    var value = event.currentTarget.value;
+                    handleCustomInputDimensionChange(value, 'height');
+                } })) : (React__default.createElement("span", null, dimension.height))),
+        React__default.createElement("div", { className: "ae-MobileDevTool-right" },
+            React__default.createElement("div", { className: "ae-MobileDevTool-right-scale" },
+                React__default.createElement(Select, { className: "ae-MobileDevTool-select", clearable: false, value: scale, options: __spreadArray([], __read(scaleList.map(function (n) { return ({
+                        label: "".concat(n, "%"),
+                        value: n
+                    }); })), false), onChange: function (item) {
+                        updateScale(item.value);
+                        updatePreviewScale(item.value);
+                    } }),
+                !scaleList.includes(scale) && (React__default.createElement("div", { className: "ae-MobileDevTool-right-scale-auto-value" },
+                    scale,
+                    "%")),
+                React__default.createElement("div", { className: "ae-MobileDevTool-right-scale-auto", onClick: handleAutoScale }, "\u81EA\u9002\u5E94")),
+            React__default.createElement("div", { onClick: handleRotateScreen },
+                React__default.createElement(Icon, { icon: "rotate-screen", className: "ae-MobileDevTool-right-rotate-screen" }))),
+        dimension.name === 'custom' && (React__default.createElement(CustomSizeHandle, { previewBody: previewBody, onChange: function (w, h) {
+                updateDimension({
+                    name: 'custom',
+                    width: w - 20,
+                    height: h - 20
+                });
+            }, onEnd: updateAutoScale, scale: scale }))));
+}
+function CustomSizeHandle(props) {
+    var previewBody = props.previewBody, _a = props.scale, scale = _a === void 0 ? 1 : _a, onChange = props.onChange, onEnd = props.onEnd;
+    function handleRightDown(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        document.body.classList.add('width-move');
+        document.addEventListener('mousemove', handleRightDragMove);
+        document.addEventListener('mouseup', handleRightDragEnd);
+    }
+    function handleRightDragMove(e) {
+        e.stopPropagation();
+        if (previewBody) {
+            var w = previewBody.clientWidth;
+            w += e.movementX;
+            w = Math.max(70, w);
+            previewBody.style.width = w + 'px';
+            onChange === null || onChange === void 0 ? void 0 : onChange(w, previewBody.clientHeight);
+        }
+    }
+    function handleRightDragEnd() {
+        document.body.classList.remove('width-move');
+        document.removeEventListener('mousemove', handleRightDragMove);
+        document.removeEventListener('mouseup', handleRightDragEnd);
+        onEnd();
+    }
+    function handleBottomDown(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        document.body.classList.add('height-move');
+        document.addEventListener('mousemove', handleBottomDragMove);
+        document.addEventListener('mouseup', handleBottomDragEnd);
+    }
+    function handleBottomDragMove(e) {
+        e.stopPropagation();
+        if (previewBody) {
+            var h = previewBody.clientHeight;
+            h += e.movementY;
+            h = Math.max(70, h);
+            previewBody.style.height = h + 'px';
+            onChange(previewBody.clientWidth, h);
+        }
+    }
+    function handleBottomDragEnd() {
+        document.body.classList.remove('height-move');
+        document.removeEventListener('mousemove', handleBottomDragMove);
+        document.removeEventListener('mouseup', handleBottomDragEnd);
+        onEnd();
+    }
+    return (React__default.createElement(Portal, { container: function () { return previewBody; } },
+        React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "ae-MobileDevTool-rightHandle", onMouseDown: handleRightDown, style: { transform: "scale(".concat(1 / (scale / 100), ")") } }),
+            React__default.createElement("div", { className: "ae-MobileDevTool-bottomHandle", onMouseDown: handleBottomDown, style: { transform: "scale(".concat(1 / (scale / 100), ")") } }))));
+}
+
+export { MobileDevTool as default, dimensions };