chore(props): improve types

Author: jafin

package.json

@@ -18,12 +18,12 @@
     "clean": "rimraf dist",
     "copyfiles": "copyfiles ./src/**/*.scss out-tsc/",
     "build:rollup": "tsc && yarn copyfiles && yarn rollup -c",
-    "build": "npm-run-all clean copy:types build:rollup",
+    "build": "npm-run-all clean build:rollup copy:types",
     "build:watch": "rollup -c -w",
     "start": "npm-run-all clean build:watch",
     "gh-pages": "gh-pages -d example",
     "github-changes": "github-changes -o wwayne -r react-tooltip -a --only-pulls --use-commit-body",
-    "copy:types": "cpy ./react-tooltip.d.ts ./dist --parents --dot",
+    "copy:types": "copyfiles ./out-tsc/src/**/*.d.ts dist/ --up 2",
     "cm": "git cz",
     "semantic-release": "semantic-release"
   },

src/ReactTooltip.tsx

@@ -18,7 +18,7 @@ import { generateUUID } from './utils/uuid';
 import baseCss from './index.scss';
 import { generateTooltipStyle } from './decorators/styler';
 import { BodyModeListener, CustomColor } from './types';
-import { ReactTooltipProps } from './ReactTooltipProps';
+import { Effect, Offset, Place, TooltipProps, Wrapper } from './ReactTooltipProps';
 import { checkStatus } from './decorators/customEvent';
 
 const dispatchGlobalEvent = (eventName, opts) => {
@@ -61,14 +61,14 @@ const customListeners = {
 
 type TooltipState = {
   uuid: string;
-  place: string;
-  desiredPlace: string;
+  place: Place;
+  desiredPlace: Place;
   type: string;
-  effect: string;
+  effect: Effect;
   show: boolean;
   border: boolean;
   customColors: CustomColor;
-  offset: string | object;
+  offset: Offset;
   padding: string;
   extraClass: string;
   html: boolean;
@@ -94,7 +94,7 @@ type GetContentFn = {
 
 export type GetContentTypes = GetContentFn | string;
 
-class ReactTooltip extends React.Component<ReactTooltipProps, TooltipState> {
+class ReactTooltip extends React.Component<TooltipProps, TooltipState> {
   mount: boolean;
   delayShowLoop?: NodeJS.Timeout;
   delayHideLoop?: NodeJS.Timeout;
@@ -149,15 +149,15 @@ class ReactTooltip extends React.Component<ReactTooltipProps, TooltipState> {
   static defaultProps = {
     insecure: true,
     resizeHide: true,
-    wrapper: 'div',
+    wrapper: 'div' as Wrapper,
     clickable: false
   };
 
   static supportedWrappers = ['div', 'span'];
 
   static displayName = 'ReactTooltip';
 
-  constructor(props: ReactTooltipProps) {
+  constructor(props: TooltipProps) {
     super(props);
 
     this.state = {
@@ -319,8 +319,8 @@ class ReactTooltip extends React.Component<ReactTooltipProps, TooltipState> {
     }
   }
 
-  getEffect(currentTarget: HTMLElement) {
-    const dataEffect = currentTarget.getAttribute('data-effect');
+  getEffect(currentTarget: HTMLElement): Effect {
+    const dataEffect = currentTarget.getAttribute('data-effect') as Effect;
     return dataEffect || this.props.effect || 'float';
   }
 
@@ -707,11 +707,11 @@ class ReactTooltip extends React.Component<ReactTooltipProps, TooltipState> {
 
     // Make sure the correct place is set
     const desiredPlace =
-      e.currentTarget.getAttribute('data-place') || this.props.place || 'top';
-    const effect =
-      (switchToSolid && 'solid') || this.getEffect(e.currentTarget);
+      e.currentTarget.getAttribute('data-place') as Place || this.props.place || 'top';
+    const effect: Effect =
+      (switchToSolid && 'solid') as Effect || this.getEffect(e.currentTarget) as Effect;
     const offset =
-      e.currentTarget.getAttribute('data-offset') || this.props.offset || {};
+      e.currentTarget.getAttribute('data-offset') as Offset || this.props.offset || {};
     const result = getPosition(
       e,
       e.currentTarget,

src/ReactTooltipProps.tsx

@@ -1,15 +1,33 @@
 import React, { ReactNode } from 'react';
 import { GetContentTypes } from './ReactTooltip';
 
-export type ReactTooltipProps = {
+export interface Offset {
+  top?: number;
+  right?: number;
+  left?: number;
+  bottom?: number;
+}
+
+export type EventFunc = (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+
+export type Effect = 'float' | 'solid';
+export type Place = 'top' | 'right' | 'bottom' | 'left';
+export type Type = 'dark' | 'success' | 'warning' | 'error' | 'info' | 'light';
+export type Wrapper = 'div' | 'span';
+
+export type TooltipProps = {
   uuid: string;
   children: ReactNode;
-  place: string;
-  type: string;
-  effect: string;
-  offset: object;
+  // Placement of tooltip
+  place?: Place;
+  // Tooltip styling theme
+  type: Type;
+  // Behavior of tooltip
+  effect: Effect;
+  // Global tooltip offset, e.g., offset={{ top: 10, left: 5 }}
+  offset?: Offset;
   padding: string;
-  multiline: boolean;
+  multiline?: boolean;
   border: boolean;
   textColor: string;
   backgroundColor: string;
@@ -28,15 +46,28 @@ export type ReactTooltipProps = {
   isCapture: boolean;
   globalEventOff: string;
   getContent: GetContentTypes | GetContentTypes[];
-  afterShow(e: React.MouseEvent<HTMLElement, MouseEvent>);
-  afterHide(e: React.MouseEvent<HTMLElement, MouseEvent>);
-  overridePosition(a, b, c, d, e, f, g, h);
-  disable: boolean;
-  scrollHide: boolean;
-  resizeHide: boolean;
-  wrapper: string;
-  bodyMode: boolean;
-  possibleCustomEvents: string;
-  possibleCustomEventsOff: string;
-  clickable: boolean;
+  afterShow: EventFunc;
+  afterHide: EventFunc;
+  overridePosition?(
+    position: { left: number; top: number },
+    currentEvent: React.MouseEvent<HTMLElement, MouseEvent>,
+    currentTarget: EventTarget,
+    // node is the ref argument, and the wrapper
+    // is restricted to: div | span
+    refNode: null | HTMLDivElement | HTMLSpanElement,
+    place: Place,
+    desiredPlace: Place,
+    effect: Effect,
+    offset: Offset
+  ): { left: number; top: number };
+  disable?: boolean;
+  scrollHide?: boolean;
+  resizeHide?: boolean;
+  wrapper?: Wrapper;
+  bodyMode?: boolean;
+  possibleCustomEvents?: string;
+  possibleCustomEventsOff?: string;
+  clickable?: boolean;
+  // Aria role for the tooltip
+  role?: string;
 };

src/utils/aria.ts

@@ -1,12 +1,12 @@
-import { ReactTooltipProps } from '../ReactTooltipProps';
+import { TooltipProps } from '../ReactTooltipProps';
 
 /**
  * Support aria- and role in ReactTooltip
  *
  * @params props {Object}
  * @return {Object}
  */
-export function parseAria(props: ReactTooltipProps): object {
+export function parseAria(props: TooltipProps): object {
   const ariaObj = {};
   Object.keys(props)
     .filter((prop) => {