From 538fcd5a241b987157557284fc1012e02ae76b97 Mon Sep 17 00:00:00 2001
From: wuxifei <sduwxf@qq.com>
Date: Wed, 16 Feb 2022 14:02:51 +0800
Subject: [PATCH 1/2] rename suffix from .js to .tsx

---
 examples/{follow.js => follow.tsx} | 0
 examples/{point.js => point.tsx}   | 0
 examples/{simple.js => simple.tsx} | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename examples/{follow.js => follow.tsx} (100%)
 rename examples/{point.js => point.tsx} (100%)
 rename examples/{simple.js => simple.tsx} (100%)

diff --git a/examples/follow.js b/examples/follow.tsx
similarity index 100%
rename from examples/follow.js
rename to examples/follow.tsx
diff --git a/examples/point.js b/examples/point.tsx
similarity index 100%
rename from examples/point.js
rename to examples/point.tsx
diff --git a/examples/simple.js b/examples/simple.tsx
similarity index 100%
rename from examples/simple.js
rename to examples/simple.tsx

From f4a691da569a5712fc3a5c99e9fdbbaa1fc310d1 Mon Sep 17 00:00:00 2001
From: wuxifei <sduwxf@qq.com>
Date: Wed, 16 Feb 2022 14:40:40 +0800
Subject: [PATCH 2/2] use .tsx for examples

---
 examples/follow.tsx |  4 ++--
 examples/point.tsx  |  4 +++-
 examples/simple.tsx | 14 +++++++++++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/examples/follow.tsx b/examples/follow.tsx
index 6668ddd..1fe0a02 100644
--- a/examples/follow.tsx
+++ b/examples/follow.tsx
@@ -4,8 +4,8 @@ import Align from '../src';
 const Demo = () => {
   const [width, setWidth] = React.useState(100);
   const [height, setHeight] = React.useState(100);
-  const [left, setLeft] = React.useState(100);
-  const [top, setTop] = React.useState(100);
+  const [left, setLeft] = React.useState('100%');
+  const [top, setTop] = React.useState('100%');
   const [visible, setVisible] = React.useState(true);
   const [svg, setSvg] = React.useState(false);
 
diff --git a/examples/point.tsx b/examples/point.tsx
index ed5b1da..0731dd8 100644
--- a/examples/point.tsx
+++ b/examples/point.tsx
@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component, Ref } from 'react';
 import Align from '../src';
+import {RefAlign} from '../src/Align';
 
 const align = {
   points: ['cc', 'cc'],
@@ -13,6 +14,7 @@ class Demo extends Component {
   onClick = ({ pageX, pageY }) => {
     this.setState({ point: { pageX, pageY } });
   };
+  alignRef: Ref<RefAlign>;
 
   render() {
     return (
diff --git a/examples/simple.tsx b/examples/simple.tsx
index 8b3d5f7..ea4d250 100644
--- a/examples/simple.tsx
+++ b/examples/simple.tsx
@@ -1,9 +1,18 @@
+import { AlignType } from '../src/interface';
 import React, { Component } from 'react';
 import Align from '../src';
+import {RefAlign} from '../src/Align';
 
 const allPoints = ['tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl', 'bc', 'br'];
 
-class Test extends Component {
+class Test extends Component<{}, {
+  monitor: boolean;
+  random: boolean;
+  disabled: boolean;
+  randomWidth: number;
+  align: AlignType;
+  sourceWidth: number;
+}> {
   state = {
     monitor: true,
     random: false,
@@ -14,6 +23,9 @@ class Test extends Component {
     },
     sourceWidth: 50,
   };
+  id: ReturnType<typeof setInterval>;
+  $container: HTMLElement | null = null;
+  $align: RefAlign;
 
   componentDidMount() {
     this.id = setInterval(() => {