Modified src/getPlacement.ts

Modified   src/index.tsx

Author: bplok20010

examples/demos/demo1.js

@@ -1,7 +1,30 @@
 import React, { Component } from "react";
 import { findDOMNode } from "react-dom";
 import Trigger from "../../src";
-import Layout from "react-widget-layout";
+
+function TriggerButton({ placement, offset }) {
+	return (
+		<Trigger
+			placement={placement}
+			offset={2}
+			popup={
+				<div
+					style={{
+						width: 200,
+						height: 50,
+						border: "1px solid #ccc",
+						padding: 5,
+						backgroundColor: "#FFF",
+					}}
+				>
+					test...
+				</div>
+			}
+		>
+			<button>{placement}</button>
+		</Trigger>
+	);
+}
 
 export default class DEMO extends Component {
 	state = {
@@ -13,23 +36,21 @@ export default class DEMO extends Component {
 	render() {
 		return (
 			<div>
-				<Trigger
-					placement="topLeft"
-					offset={[0, 2]}
-					popup={
-						<div
-							style={{
-								border: "1px solid #ccc",
-								padding: 5,
-								backgroundColor: "#FFF",
-							}}
-						>
-							test...
-						</div>
-					}
-				>
-					<button>Trigger</button>
-				</Trigger>
+				<TriggerButton placement="bottomLeft" />
+				<TriggerButton placement="bottom" />
+				<TriggerButton placement="bottomRight" />
+				<hr />
+				<TriggerButton placement="topLeft" />
+				<TriggerButton placement="top" />
+				<TriggerButton placement="topRight" />
+				<hr />
+				<TriggerButton placement="leftTop" />
+				<TriggerButton placement="left" />
+				<TriggerButton placement="leftBottom" />
+				<hr />
+				<TriggerButton placement="rightTop" />
+				<TriggerButton placement="right" />
+				<TriggerButton placement="rightBottom" />
 			</div>
 		);
 	}