use .tsx for examples

Author: xifeiwu

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);
 

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 (

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(() => {