chore: generate d.ts with tsc

shisama · shisama · commit bc64e4215572 · 2020-01-06T02:30:18.000+09:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 test
-src/demo
+src/demo
+lib
diff --git a/demo/slideshow.js b/demo/slideshow.js
diff --git a/index.d.ts b/index.d.ts
diff --git a/lib/FullscreenButton.d.ts b/lib/FullscreenButton.d.ts
@@ -0,0 +1,7 @@
+import * as React from "react";
+declare type Props = {
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+};
+declare const FullscreenButton: ({ onClick, children }: Props) => JSX.Element;
+export default FullscreenButton;
diff --git a/lib/FullscreenIcon.d.ts b/lib/FullscreenIcon.d.ts
@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const _default: React.MemoExoticComponent<({ isFullScreen }: {
+    isFullScreen: boolean;
+}) => JSX.Element>;
+export default _default;
diff --git a/lib/PagingButton.d.ts b/lib/PagingButton.d.ts
@@ -0,0 +1,7 @@
+import * as React from "react";
+declare type Props = {
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+};
+declare const PagingButton: ({ onClick, children }: Props) => JSX.Element;
+export default PagingButton;
diff --git a/lib/Preview.d.ts b/lib/Preview.d.ts
@@ -0,0 +1,10 @@
+import * as React from "react";
+declare type Props = {
+    images: string[];
+    imgClassName: string;
+    isFullScreen: boolean;
+    opacity: number;
+    previewIndex: number;
+};
+declare const _default: React.MemoExoticComponent<({ images, imgClassName, isFullScreen, opacity, previewIndex }: Props) => JSX.Element | null>;
+export default _default;
diff --git a/lib/ProgressBar.d.ts b/lib/ProgressBar.d.ts
@@ -0,0 +1,10 @@
+import * as React from "react";
+declare type Props = {
+    style?: React.CSSProperties;
+    onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
+    progress: number;
+};
+declare const _default: React.MemoExoticComponent<({ style, onClick, onMouseMove, onMouseLeave, progress }: Props) => JSX.Element>;
+export default _default;
diff --git a/lib/SlideShow.d.ts b/lib/SlideShow.d.ts
@@ -0,0 +1,49 @@
+import React from "react";
+interface Props {
+    style: any;
+    images: string[];
+    prevIcon: React.ReactNode;
+    nextIcon: React.ReactNode;
+    withTimestamp?: boolean;
+    pageWillUpdate?: (index: number, image: string) => void;
+    showFullscreenIcon?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+interface State {
+    src: string;
+    index: number;
+    progress: number;
+    preview: number;
+    previewIndex: number;
+    isFullScreen: boolean;
+    [key: string]: string | number | boolean;
+}
+export default class SlideShow extends React.Component<Props, State> {
+    state: State;
+    timestamp: number;
+    static defaultProps: {
+        arrowButtonStyle: any;
+        style: {};
+        images: never[];
+        prevIcon: JSX.Element;
+        nextIcon: JSX.Element;
+        withTimestamp: boolean;
+        pageWillUpdate: () => void;
+        className: string;
+        showFullscreenIcon: boolean;
+    };
+    constructor(props: Props);
+    componentDidMount(): void;
+    onClickPrevButton: () => void;
+    onClickNextButton: () => void;
+    onClickProgressBar: (e: any) => void;
+    onMouseMoveProgressBar: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseLeaveProgressBar: () => void;
+    onChangeFullScreen: () => void;
+    keydownEvent: (e: KeyboardEvent) => void;
+    updatePageState: (index: number) => void;
+    render(): JSX.Element;
+}
+export {};
diff --git a/lib/SlideShow.js b/lib/SlideShow.js
@@ -1,16 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
     if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
     result["default"] = mod;
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const toggle_fullscreen_1 = __importStar(require("toggle-fullscreen"));
 const arrayutils_1 = require("./arrayutils");
 const calcProgress_1 = require("./calcProgress");
@@ -21,7 +21,7 @@ const Preview_1 = __importDefault(require("./Preview"));
 const ProgressBar_1 = __importDefault(require("./ProgressBar"));
 const styles_1 = __importDefault(require("./styles"));
 const Viewer_1 = __importDefault(require("./Viewer"));
-class SlideShow extends React.Component {
+class SlideShow extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.onClickPrevButton = () => {
@@ -156,28 +156,28 @@ class SlideShow extends React.Component {
         });
     }
     render() {
-        return (React.createElement("div", { style: styles_1.default.ROOT, className: this.props.className },
-            React.createElement("div", { className: `${this.props.className}-wrapper`, style: { margin: "auto" } },
-                React.createElement(Viewer_1.default, { imgClassName: `${this.props.className}-image`, styles: styles_1.default, src: this.state.src, onClickPrevButton: this.onClickPrevButton, onClickNextButton: this.onClickNextButton, timestamp: this.timestamp }),
-                React.createElement(Preview_1.default, { opacity: this.state.preview, previewIndex: this.state.previewIndex, images: this.props.images, isFullScreen: this.state.isFullScreen, imgClassName: `${this.props.className}-image` }),
-                React.createElement(ProgressBar_1.default, { style: styles_1.default.PROGRESS_BAR, onClick: this.onClickProgressBar, onMouseMove: this.onMouseMoveProgressBar, onMouseLeave: this.onMouseLeaveProgressBar, progress: this.state.progress }),
-                React.createElement("div", { style: styles_1.default.BAR },
-                    React.createElement(PagingButton_1.default, { onClick: this.onClickPrevButton }, this.props.prevIcon),
-                    React.createElement("span", { style: styles_1.default.PAGE_VIEW }, `${this.state.index + 1} / ${this.props.images ? this.props.images.length : 0}`),
-                    React.createElement(PagingButton_1.default, { onClick: this.onClickNextButton }, this.props.nextIcon),
-                    this.props.showFullscreenIcon ? (React.createElement(FullscreenButton_1.default, { onClick: this.onChangeFullScreen },
-                        React.createElement(FullscreenIcon_1.default, { isFullScreen: this.state.isFullScreen }))) : null))));
+        return (react_1.default.createElement("div", { style: styles_1.default.ROOT, className: this.props.className },
+            react_1.default.createElement("div", { className: `${this.props.className}-wrapper`, style: { margin: "auto" } },
+                react_1.default.createElement(Viewer_1.default, { imgClassName: `${this.props.className}-image`, styles: styles_1.default, src: this.state.src, onClickPrevButton: this.onClickPrevButton, onClickNextButton: this.onClickNextButton, timestamp: this.timestamp }),
+                react_1.default.createElement(Preview_1.default, { opacity: this.state.preview, previewIndex: this.state.previewIndex, images: this.props.images, isFullScreen: this.state.isFullScreen, imgClassName: `${this.props.className}-image` }),
+                react_1.default.createElement(ProgressBar_1.default, { style: styles_1.default.PROGRESS_BAR, onClick: this.onClickProgressBar, onMouseMove: this.onMouseMoveProgressBar, onMouseLeave: this.onMouseLeaveProgressBar, progress: this.state.progress }),
+                react_1.default.createElement("div", { style: styles_1.default.BAR },
+                    react_1.default.createElement(PagingButton_1.default, { onClick: this.onClickPrevButton }, this.props.prevIcon),
+                    react_1.default.createElement("span", { style: styles_1.default.PAGE_VIEW }, `${this.state.index + 1} / ${this.props.images ? this.props.images.length : 0}`),
+                    react_1.default.createElement(PagingButton_1.default, { onClick: this.onClickNextButton }, this.props.nextIcon),
+                    this.props.showFullscreenIcon ? (react_1.default.createElement(FullscreenButton_1.default, { onClick: this.onChangeFullScreen },
+                        react_1.default.createElement(FullscreenIcon_1.default, { isFullScreen: this.state.isFullScreen }))) : null))));
     }
 }
 exports.default = SlideShow;
 SlideShow.defaultProps = {
     arrowButtonStyle: styles_1.default.ARROW_BUTTON,
     style: {},
     images: [],
-    prevIcon: (React.createElement("svg", { style: styles_1.default.ARROW_BUTTON, viewBox: "0 0 8 8" },
-        React.createElement("path", { fill: "#fff", d: "M4 0l-4 3 4 3v-6zm0 3l4 3v-6l-4 3z", transform: "translate(0 1)" }))),
-    nextIcon: (React.createElement("svg", { style: styles_1.default.ARROW_BUTTON, viewBox: "0 0 8 8" },
-        React.createElement("path", { fill: "#fff", d: "M0 0v6l4-3-4-3zm4 3v3l4-3-4-3v3z", transform: "translate(0 1)" }))),
+    prevIcon: (react_1.default.createElement("svg", { style: styles_1.default.ARROW_BUTTON, viewBox: "0 0 8 8" },
+        react_1.default.createElement("path", { fill: "#fff", d: "M4 0l-4 3 4 3v-6zm0 3l4 3v-6l-4 3z", transform: "translate(0 1)" }))),
+    nextIcon: (react_1.default.createElement("svg", { style: styles_1.default.ARROW_BUTTON, viewBox: "0 0 8 8" },
+        react_1.default.createElement("path", { fill: "#fff", d: "M0 0v6l4-3-4-3zm4 3v3l4-3-4-3v3z", transform: "translate(0 1)" }))),
     withTimestamp: false,
     pageWillUpdate: () => {
         return;
diff --git a/lib/Viewer.d.ts b/lib/Viewer.d.ts
@@ -0,0 +1,15 @@
+import * as React from "react";
+declare type Props = {
+    styles: {
+        IMAGE: React.CSSProperties;
+        PREV_ON_CONTENT: React.CSSProperties;
+        NEXT_ON_CONTENT: React.CSSProperties;
+    };
+    src: string;
+    onClickPrevButton: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClickNextButton: (e: React.MouseEvent<HTMLDivElement>) => void;
+    timestamp: number;
+    imgClassName: string;
+};
+declare const _default: React.MemoExoticComponent<({ styles, src, onClickPrevButton, onClickNextButton, timestamp, imgClassName }: Props) => JSX.Element>;
+export default _default;
diff --git a/lib/arrayutils.d.ts b/lib/arrayutils.d.ts
@@ -0,0 +1,2 @@
+declare const isEmptyArray: (arr?: string[] | null | undefined) => boolean;
+export { isEmptyArray };
diff --git a/lib/calcProgress.d.ts b/lib/calcProgress.d.ts
@@ -0,0 +1,3 @@
+declare const calcProgress: (page: number, numberOfImages: number) => number;
+declare const calcProgressIndex: (e: any, numberOfImages: number) => number | void;
+export { calcProgress, calcProgressIndex };
diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -0,0 +1 @@
+export * from "./SlideShow";
diff --git a/lib/styles.d.ts b/lib/styles.d.ts
@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "git-add": "git add lib demo dll",
     "check-updates": "ncu"
   },
-  "types": "index.d.ts",
+  "types": "lib/index.d.ts",
   "peerDependencies": {
     "react": "^15.0.0-0 || ^16.0.0-0"
   },
@@ -83,7 +83,7 @@
     "thread-loader": "2.1.2",
     "ts-jest": "24.0.2",
     "ts-loader": "6.0.4",
-    "typescript": "3.5.3",
+    "typescript": "^3.7.4",
     "webpack": "4.39.1",
     "webpack-cli": "3.3.6"
   },
diff --git a/src/SlideShow.tsx b/src/SlideShow.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import toggleFullscreen, {
   fullscreenChange,
   isFullscreen
@@ -13,18 +13,66 @@ import ProgressBar from "./ProgressBar";
 import styles from "./styles";
 import Viewer from "./Viewer";
 
-// eslint-disable-next-line no-unused-vars
-import { Props } from "../index";
+interface Props {
+  style: any;
+  images: string[];
+  prevIcon: React.ReactNode;
+  nextIcon: React.ReactNode;
+  withTimestamp?: boolean;
+  pageWillUpdate?: (index: number, image: string) => void;
+  showFullscreenIcon?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+interface State {
+  src: string;
+  index: number;
+  progress: number;
+  preview: number;
+  previewIndex: number;
+  isFullScreen: boolean;
+  [key: string]: string | number | boolean;
+}
 
 /**
  * This class named SlideShow is the React component that allows you
  * to develop slideshow like 'SlideShare' or 'SpeakerDeck' very easy!
  * @class
  */
 export default class SlideShow extends React.Component<Props, State> {
-  static defaultProps: object;
   state: State;
   timestamp: number;
+  static defaultProps = {
+    arrowButtonStyle: styles.ARROW_BUTTON,
+    style: {},
+    images: [],
+    prevIcon: (
+      <svg style={styles.ARROW_BUTTON} viewBox="0 0 8 8">
+        <path
+          fill="#fff"
+          d="M4 0l-4 3 4 3v-6zm0 3l4 3v-6l-4 3z"
+          transform="translate(0 1)"
+        />
+      </svg>
+    ),
+    nextIcon: (
+      <svg style={styles.ARROW_BUTTON} viewBox="0 0 8 8">
+        <path
+          fill="#fff"
+          d="M0 0v6l4-3-4-3zm4 3v3l4-3-4-3v3z"
+          transform="translate(0 1)"
+        />
+      </svg>
+    ),
+    withTimestamp: false,
+    pageWillUpdate: () => {
+      return;
+    },
+    className: "slideshow",
+    showFullscreenIcon: true
+  };
 
   /**
    * constructor
@@ -256,62 +304,3 @@ export default class SlideShow extends React.Component<Props, State> {
     );
   }
 }
-
-SlideShow.defaultProps = {
-  arrowButtonStyle: styles.ARROW_BUTTON,
-  style: {},
-  images: [],
-  prevIcon: (
-    <svg style={styles.ARROW_BUTTON} viewBox="0 0 8 8">
-      <path
-        fill="#fff"
-        d="M4 0l-4 3 4 3v-6zm0 3l4 3v-6l-4 3z"
-        transform="translate(0 1)"
-      />
-    </svg>
-  ),
-  nextIcon: (
-    <svg style={styles.ARROW_BUTTON} viewBox="0 0 8 8">
-      <path
-        fill="#fff"
-        d="M0 0v6l4-3-4-3zm4 3v3l4-3-4-3v3z"
-        transform="translate(0 1)"
-      />
-    </svg>
-  ),
-  withTimestamp: false,
-  pageWillUpdate: () => {
-    return;
-  },
-  className: "slideshow",
-  showFullscreenIcon: true
-};
-/**
- * @typedef {Object} Props
- * @property {Object} style
- * @property {Array<string>} images
- * @property {React.Element<any>} prevIcon
- * @property {React.Element<any>} nextIcon
- * @property {boolean} withTimestamp
- * @property {function} pageWillUpdate
- * @property {React.Element<any>} children
- */
-
-/**
- * @typedef {Object} State
- * @property {string} src
- * @property {number} index
- * @property {number} progress
- * @property {number} preview
- * @property {number} previewIndex
- * @property {boolean} isFullScreen
- */
-export type State = {
-  src: string;
-  index: number;
-  progress: number;
-  preview: number;
-  previewIndex: number;
-  isFullScreen: boolean;
-  [key: string]: string | number | boolean;
-};
diff --git a/tsconfig.json b/tsconfig.json

-Original file line number
+Diff line change
@@ @@ -1,2 +1,3 @@ @@
 test
 -src/demo
 +src/demo
 +lib