refactor(Overlay): ts & docs & test tools

components/overlay/__docs__/demo/backdrop/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Overlay, Button } from '@alifd/next';
+import type { OverlayProps } from '@alifd/next/lib/overlay';
+import type { ButtonProps } from '@alifd/next/lib/button';
 
-class Demo extends React.Component {
- constructor(props) {
+class Demo extends React.Component<OverlayProps, { visible: boolean }> {
+ btn: ButtonProps;
+ constructor(props: OverlayProps) {
  super(props);
 
  this.state = {
@@ -29,7 +32,7 @@ class Demo extends React.Component {
  <Button
  onClick={this.onClick}
  ref={ref => {
- this.btn = ref;
+ this.btn = ref as ButtonProps;
  }}
  >
  Open

components/overlay/__docs__/demo/baisc/index.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Overlay, Button } from '@alifd/next';
+import type { OverlayProps } from '@alifd/next/lib/overlay';
+import type { ButtonProps } from '@alifd/next/lib/button';
 
-class Demo extends React.Component {
- constructor(props) {
+class Demo extends React.Component<OverlayProps, { visible: boolean }> {
+ btn: ButtonProps;
+
+ constructor(props: OverlayProps) {
  super(props);
 
  this.state = {
@@ -29,7 +33,7 @@ class Demo extends React.Component {
  <Button
  onClick={this.onClick}
  ref={ref => {
- this.btn = ref;
+ this.btn = ref as ButtonProps;
  }}
  >
  Toggle visible

components/overlay/__docs__/demo/controlled/index.tsx

@@ -1,25 +1,36 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Overlay, Button } from '@alifd/next';
+import type { PopupProps } from '@alifd/next/lib/overlay';
 
 const { Popup } = Overlay;
 
-class Demo extends React.Component {
- constructor(props) {
+interface DemoState {
+ visible?: boolean;
+ groupVisible?: boolean;
+}
+
+class Demo extends React.Component<PopupProps, DemoState> {
+ btn1: InstanceType<typeof Button> | null;
+ btn2: InstanceType<typeof Button> | null;
+ overlay1: InstanceType<typeof HTMLElement> | null;
+ overlay2: InstanceType<typeof HTMLElement> | null;
+
+ constructor(props: PopupProps) {
  super(props);
 
  this.state = {
  visible: false,
  };
  }
 
- onVisibleChange = visible => {
+ onVisibleChange = (visible: boolean) => {
  this.setState({
  visible,
  });
  };
 
- onGroupVisibleChange = groupVisible => {
+ onGroupVisibleChange = (groupVisible: boolean) => {
  this.setState({
  groupVisible,
  });

components/overlay/__docs__/demo/scroll-debug/index.tsx

@@ -14,7 +14,13 @@ const style = {
 };
 
 function TableDemo() {
- const columns = [1, 2, 3].map(v => {
+ const columns: Array<{
+ dataIndex?: string;
+ title: string;
+ width: number;
+ lock?: 'left' | 'right';
+ cell?: any;
+ }> = [1, 2, 3].map(v => {
  return { dataIndex: `data${v}`, title: `Data${v}`, width: 200 };
  });
  columns.unshift({

components/overlay/__docs__/demo/scroll/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { Overlay, Button } from '@alifd/next';
+import { Overlay } from '@alifd/next';
 
 const { Popup } = Overlay;
 
@@ -34,7 +34,7 @@ const App = () => {
  cache
  triggerType="click"
  overlay={<div style={style}>position: {JSON.stringify(position)}</div>}
- onPosition={result => {
+ onPosition={(result: HTMLElement) => {
  const { style } = result;
  console.log(result);
  setPosition(style);
@@ -47,8 +47,8 @@ const App = () => {
  cache
  triggerType="click"
  overlay={<div style={style}>position: {JSON.stringify(position12)}</div>}
- container={trigger => trigger.parentNode}
- onPosition={result => {
+ container={(trigger: HTMLElement) => trigger.parentNode}
+ onPosition={(result: HTMLElement) => {
  const { style } = result;
  console.log(result);
  setPosition12(style);
@@ -62,7 +62,7 @@ const App = () => {
  triggerType="click"
  overlay={<div style={style}>position: {JSON.stringify(position13)}</div>}
  followTrigger
- onPosition={result => {
+ onPosition={(result: HTMLElement) => {
  const { style } = result;
  console.log(result);
  setPosition13(style);
@@ -75,7 +75,7 @@ const App = () => {
  v2
  triggerType="click"
  overlay={<div style={style}>position: {JSON.stringify(position2)}</div>}
- onPosition={({ style }) => {
+ onPosition={({ style }: HTMLElement) => {
  setPosition2(style);
  }}
  >