test: test delta value by request #815

Author: daybrush

packages/react-moveable/stories/7-Request/0-Request.stories.tsx

@@ -6,4 +6,5 @@ export default {
 };
 export * from "./1-Draggable.stories";
 export * from "./2-Resizable.stories";
-export * from "./3-ResizableGroup.stories";
+export * from "./3-ResizableDelta.stories";
+export * from "./4-ResizableGroup.stories";

packages/react-moveable/stories/7-Request/3-ResizableDelta.stories.tsx

@@ -0,0 +1,32 @@
+import { DEFAULT_REACT_CODESANDBOX } from "storybook-addon-preview";
+import "../common.css";
+import "../templates/default.css";
+import { convertPath, convertReactTemplate, makeArgs } from "../utils";
+import App from "./apps/ResizableDeltaApp";
+import RawApp from "!!raw-loader!./apps/ResizableDeltaApp";
+import {
+    DEFAULT_RESIZABLE_CONTROLS,
+} from "../controls/default";
+
+
+export const ResizableDeltaTemplate = App as any;
+
+ResizableDeltaTemplate.storyName = "Resizable Delta";
+ResizableDeltaTemplate.argTypes = {
+    ...DEFAULT_RESIZABLE_CONTROLS,
+};
+ResizableDeltaTemplate.args = {
+    ...makeArgs(ResizableDeltaTemplate.argTypes),
+};
+
+
+ResizableDeltaTemplate.parameters = {
+    preview: [
+        {
+            tab: "React",
+            template: convertReactTemplate(convertPath(RawApp)),
+            codesandbox: DEFAULT_REACT_CODESANDBOX(["react-moveable"]),
+            language: "tsx",
+        },
+    ],
+};

packages/react-moveable/stories/7-Request/3-ResizableGroup.stories.tsx renamed to packages/react-moveable/stories/7-Request/4-ResizableGroup.stories.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import Moveable, { ResizableRequestParam } from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    const moveableRef = React.useRef<Moveable>(null);
+
+    return <div className="root">
+        <button onClick={() => {
+            moveableRef.current!.request<ResizableRequestParam>("resizable", {
+                deltaHeight: 12,
+            }, true);
+        }}>request</button>
+        <div className="input"></div>
+        <div className="container">
+            <div className="target" style={{
+                width: "381.609px",
+                height: "119.416px",
+                color: "black",
+                marginTop: "20px",
+                marginLeft: "20px",
+                border: "none",
+            }}>Target1</div>
+            <Moveable
+                ref={moveableRef}
+                target={".target"}
+                resizable={true}
+                onResize={(e) => {
+                    e.target.style.width = `${e.width}px`;
+                    e.target.style.height = `${e.height}px`;
+                    const input = document.querySelector(".input")!;
+
+                    input.innerHTML = JSON.stringify({ dist: e.dist, width: e.width, height: e.height });
+                }}
+            />
+        </div>
+    </div>;
+}