Skip to content

Commit 8a5eda2

Browse files
committed
demo: add checkInput demo daybrush#665
1 parent cd1de86 commit 8a5eda2

9 files changed

+53
-96
lines changed

packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ export function getAbleGesto(
197197
pinchThreshold,
198198
preventClickEventOnDrag,
199199
preventClickDefault,
200+
checkInput,
200201
} = moveable.props;
201202
const options: GestoOptions = {
202203
preventDefault: false,
@@ -207,6 +208,7 @@ export function getAbleGesto(
207208
pinchOutside,
208209
preventClickEventOnDrag: isTargetAbles ? preventClickEventOnDrag : false,
209210
preventClickEventOnDragStart: isTargetAbles ? preventClickDefault : false,
211+
checkInput: isTargetAbles ? checkInput : false,
210212
};
211213
const gesto = new Gesto(target!, options);
212214

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
11

2+
import { makeStoryGroup } from "../utils/story";
23

3-
export default {
4-
title: "Options",
5-
};
6-
export * from "./1-useResizeObserver.stories";
7-
export * from "./2-useResizeObserverGroup.stories";
8-
export * from "./3-useResizeObserverIndividualGroup.stories";
4+
5+
const group = makeStoryGroup("Options", module);
6+
7+
8+
group.add("useResizeObserver", {
9+
app: require("./ReactUseResizeObserverApp").default,
10+
text: require("!!raw-loader!./ReactUseResizeObserverApp").default,
11+
});
12+
13+
group.add("useResizeObserver (Group)", {
14+
app: require("./ReactUseResizeObserverGroupApp").default,
15+
text: require("!!raw-loader!./ReactUseResizeObserverGroupApp").default,
16+
});
17+
18+
group.add("useResizeObserver (Individual Group)", {
19+
app: require("./ReactUseResizeObserverIndividualGroupApp").default,
20+
text: require("!!raw-loader!./ReactUseResizeObserverIndividualGroupApp").default,
21+
});
22+
23+
24+
group.add("checkInput option", {
25+
app: require("./ReactCheckInputApp").default,
26+
text: require("!!raw-loader!./ReactCheckInputApp").default,
27+
});

packages/react-moveable/stories/4-Options/1-useResizeObserver.stories.tsx

Lines changed: 0 additions & 30 deletions
This file was deleted.

packages/react-moveable/stories/4-Options/2-useResizeObserverGroup.stories.tsx

Lines changed: 0 additions & 30 deletions
This file was deleted.

packages/react-moveable/stories/4-Options/3-useResizeObserverIndividualGroup.stories.tsx

Lines changed: 0 additions & 30 deletions
This file was deleted.
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from "react";
2+
import Moveable from "@/react-moveable";
3+
4+
export default function App() {
5+
return <div className="container">
6+
<p>checkInput (false)</p>
7+
<input type="input" className="target1"></input>
8+
<p>checkInput (true)</p>
9+
<input type="input" className="target2"></input>
10+
<Moveable
11+
target={".target1"}
12+
draggable={true}
13+
onDrag={e => {
14+
e.target.style.cssText += e.cssText;
15+
}}
16+
/>
17+
<Moveable
18+
target={".target2"}
19+
draggable={true}
20+
checkInput={true}
21+
onDrag={e => {
22+
e.target.style.cssText += e.cssText;
23+
}}
24+
/>
25+
</div>;
26+
}

packages/react-moveable/stories/4-Options/apps/ReactUseResizeObserverApp.tsx renamed to packages/react-moveable/stories/4-Options/ReactUseResizeObserverApp.tsx

File renamed without changes.

packages/react-moveable/stories/4-Options/apps/ReactUseResizeObserverGroupApp.tsx renamed to packages/react-moveable/stories/4-Options/ReactUseResizeObserverGroupApp.tsx

File renamed without changes.

packages/react-moveable/stories/4-Options/apps/ReactUseResizeObserverIndividualGroupApp.tsx renamed to packages/react-moveable/stories/4-Options/ReactUseResizeObserverIndividualGroupApp.tsx

File renamed without changes.

0 commit comments

Comments
 (0)