-
- {spinner && (
- typeof spinner === 'boolean'
- ?
- : spinner
- )}
- {text}
+
+
+ {spinner && (
+ typeof spinner === 'boolean'
+ ?
+ : spinner
+ )}
+ {text}
+
-
)}
{children}
@@ -106,26 +115,4 @@ class LoadingOverlayWrapper extends Component {
}
}
-LoadingOverlayWrapper.propTypes = {
- active: PropTypes.bool,
- fadeSpeed: PropTypes.number,
- onClick: PropTypes.func,
- className: PropTypes.string,
- classNamePrefix: PropTypes.string,
- spinner: PropTypes.oneOfType([ PropTypes.bool, PropTypes.node ]),
- text: PropTypes.node,
- styles: PropTypes.shape({
- content: PropTypes.function,
- overlay: PropTypes.function,
- spinner: PropTypes.function,
- wrapper: PropTypes.function
- })
-}
-
-LoadingOverlayWrapper.defaultProps = {
- classNamePrefix: '_loading_overlay_',
- fadeSpeed: 500,
- styles: {}
-}
-
export default LoadingOverlayWrapper
diff --git a/src/LoadingOverlayTypes.ts b/src/LoadingOverlayTypes.ts
new file mode 100644
index 0000000..204c38c
--- /dev/null
+++ b/src/LoadingOverlayTypes.ts
@@ -0,0 +1,34 @@
+import React from 'react'
+
+export type LoadingOverLayProps = {
+ active?: boolean,
+ fadeSpeed?: number,
+ onClick?: () => void,
+ className?: string,
+ classNamePrefix?: string,
+ spinner?: boolean | React.ReactNode,
+ text?: React.ReactNode,
+ styles?: {
+ content?: any,
+ overlay?: any,
+ spinner?: any,
+ wrapper?: any,
+ [key: string]: any
+ }
+}
+
+export type OverflowCSS = {
+ overflow?: string,
+ overflowX?: string,
+ overflowY?: string
+}
+
+export type LoadingOverlayState = {
+ overflowCSS?: OverflowCSS
+}
+
+export type LoadingOverlayDefaultProps = {
+ classNamePrefix: string,
+ fadeSpeed: number,
+ styles: {}
+}
diff --git a/src/components/Spinner.js b/src/components/Spinner.tsx
similarity index 53%
rename from src/components/Spinner.js
rename to src/components/Spinner.tsx
index 5ecdcc3..f586dc0 100644
--- a/src/components/Spinner.js
+++ b/src/components/Spinner.tsx
@@ -1,9 +1,13 @@
import React from 'react'
-import PropTypes from 'prop-types'
import { css } from 'emotion'
-const Spinner = ({ getStyles, cx }) => (
-
+type SpinnerProps = {
+ getStyles: (key: string) => TemplateStringsArray,
+ cx: (name: string, arg2: any) => string
+}
+
+const Spinner: React.FC
= props => (
+
)
-Spinner.propTypes = {
- getStyles: PropTypes.func.isRequired,
- cx: PropTypes.func.isRequired
-}
-
export default Spinner
diff --git a/src/styles.js b/src/styles.tsx
similarity index 84%
rename from src/styles.js
rename to src/styles.tsx
index b0ed13f..edf2ff8 100644
--- a/src/styles.js
+++ b/src/styles.tsx
@@ -1,4 +1,5 @@
import { keyframes } from 'emotion'
+import { LoadingOverLayProps, OverflowCSS } from './LoadingOverlayTypes'
const rotate360 = keyframes`
from {
@@ -24,12 +25,16 @@ const spinnerDash = keyframes`
}
`
-export default {
- wrapper: (state) => ({
+type Styles = {
+ [key: string]: any
+}
+
+const styles: Styles = {
+ wrapper: (state: OverflowCSS) => ({
position: 'relative',
...state
}),
- overlay: (state, props) => ({
+ overlay: (state: string, props: LoadingOverLayProps) => ({
position: 'absolute',
height: '100%',
width: '100%',
@@ -47,7 +52,7 @@ export default {
content: () => ({
margin: 'auto'
}),
- spinner: (state) => ({
+ spinner: () => ({
position: 'relative',
margin: '0px auto 10px auto',
width: '50px',
@@ -78,3 +83,5 @@ export default {
}
})
}
+
+export default styles
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8964bb0
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "module": "esnext",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "target": "es5",
+ "declaration": true,
+ "outDir": "./lib",
+ "jsx": "react",
+ "moduleResolution": "node",
+ "strict": true,
+ "allowSyntheticDefaultImports": true
+ },
+ "include": [
+ "src"
+ ]
+}
diff --git a/webpack.config.js b/webpack.config.js
index 48e908c..0268ab7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,6 @@
var config = {
mode: process.env.NODE_ENV,
- entry: './src/LoadingOverlay.js',
+ entry: './src/LoadingOverlay',
output: {
library: 'LoadingOverlay',
libraryTarget: 'umd'
@@ -18,10 +18,15 @@ var config = {
module: {
rules: [
{
- test: /\.js$/,
+ // Include ts, tsx, js, and jsx files.
+ test: /\.(ts|js)x?$/,
+ exclude: /node_modules/,
use: 'babel-loader'
}
]
+ },
+ resolve: {
+ extensions: [ '.tsx', '.ts', '.js' ]
}
}