move tests and docs to TypeScript

Author: mohsinulhaq

.size-snapshot.json

@@ -1,11 +1,11 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 14704,
+    "bundled": 14683,
     "minified": 7887,
     "gzipped": 2209
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 14652,
+    "bundled": 14631,
     "minified": 7854,
     "gzipped": 2204,
     "treeshaked": {

docs/examples/BasicTooltipTrigger.js renamed to docs/examples/BasicTooltipTrigger.tsx

@@ -1,8 +1,13 @@
 import React, {memo} from 'react';
 import TooltipTrigger from '../../src';
 import '../../src/styles.css';
+import {IChildrenArg, ITooltipArg} from '../../src/types';
+import {IBasicTooltipTriggerProps} from './types';
 
-const Trigger = children => ({triggerRef, getTriggerProps}) => (
+const Trigger = (children: React.ReactNode) => ({
+  triggerRef,
+  getTriggerProps
+}: IChildrenArg) => (
   <span
     {...getTriggerProps({
       ref: triggerRef
@@ -12,13 +17,13 @@ const Trigger = children => ({triggerRef, getTriggerProps}) => (
   </span>
 );
 
-const Tooltip = (tooltip, hideArrow) => ({
+const Tooltip = (tooltip: React.ReactNode, hideArrow?: boolean) => ({
   arrowRef,
   tooltipRef,
-  placement,
+  getArrowProps,
   getTooltipProps,
-  getArrowProps
-}) => (
+  placement
+}: ITooltipArg) => (
   <div
     {...getTooltipProps({
       className: 'tooltip-container',
@@ -38,10 +43,12 @@ const Tooltip = (tooltip, hideArrow) => ({
   </div>
 );
 
-const BasicTooltipTrigger = memo(({tooltip, children, hideArrow, ...props}) => (
-  <TooltipTrigger {...props} tooltip={Tooltip(tooltip, hideArrow)}>
-    {Trigger(children)}
-  </TooltipTrigger>
-));
+const BasicTooltipTrigger = memo(
+  ({tooltip, children, hideArrow, ...props}: IBasicTooltipTriggerProps) => (
+    <TooltipTrigger {...props} tooltip={Tooltip(tooltip, hideArrow)}>
+      {Trigger(children)}
+    </TooltipTrigger>
+  )
+);
 
 export default BasicTooltipTrigger;

docs/examples/EscapeToClose.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+class EscapeToClose extends React.Component<{closeTooltip: () => void}> {
+  public componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+  public componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+  public render() {
+    return this.props.children;
+  }
+  private handleKeyDown = ({key}: {key: string}) => {
+    if (key === 'Escape') {
+      this.props.closeTooltip();
+    }
+  };
+}
+
+export default EscapeToClose;

docs/examples/EscapeToClose.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export interface IBasicTooltipTriggerProps {
+  tooltip: React.ReactNode;
+  children: React.ReactNode;
+  hideArrow?: boolean;
+  [key: string]: any;
+}
+
+export interface IStateContainerProps {
+  children: (
+    {
+      on,
+      set,
+      toggle
+    }: {on: boolean; set: (on: boolean) => void; toggle: () => void}
+  ) => React.ReactNode;
+}
+
+export interface IStateContainerState {
+  on: boolean;
+}

docs/examples/types.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import {IStateContainerProps, IStateContainerState} from './types';
+
+class StateContainer extends React.Component<
+  IStateContainerProps,
+  IStateContainerState
+> {
+  public state: IStateContainerState = {
+    on: false
+  };
+
+  public render() {
+    return this.props.children({
+      on: this.state.on,
+      set: this.set,
+      toggle: this.toggle
+    });
+  }
+
+  private set = (on: boolean) => this.setState({on});
+  private toggle = () => this.setState(prevState => ({on: !prevState.on}));
+}
+
+export {StateContainer};

docs/examples/utils.js

@@ -8,7 +8,7 @@ type FnOrBool = undefined | Fn;
 export const callAll = (...fns: FnOrBool[]) => (...args: any[]) =>
   fns.forEach(fn => fn && fn(...args));
 
-export const noop = () => undefined;
+export const noop = () => {};
 
 export const canUseDOM = () =>
   !!(