Merge pull request #116 from packetloop/Restore-typescript

Restore typescript

Author: nkbt

.eslintignore

@@ -3,5 +3,3 @@
 /lib/
 /pub/
 /reports/
-*.ts
-*.tsx

README.md

@@ -154,6 +154,20 @@ Will result in
   className="user-name" />
 ```
 
+## Typescript
+
+This library has typescript typings, import them the same way as in javascript:
+
+```typescript
+import {DebounceInput} from 'react-debounce-input';
+```
+
+Also there are helper types `DebounceTextArea` and `Debounced` to provide strict interfaces for wrapping components different from standard `<input />`. Check usage examples in `example/typescript-example.tsx`.
+
+
+*NOTE* library author is not using Typescript, so if you are using typings and found an issue, please submit a PR with fix. Thanks @iyegoroff for the initial TS support!
+
+
 ## Development and testing
 
 Currently is being developed and tested with the latest stable `Node` on `OSX`.

example/typescript-example.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { DebounceInput, DebounceTextArea, Debounced } from "../src";
+
+//  - usage with default 'input' element:
+
+    <DebounceInput
+      className={'some-class'}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {}}
+    />
+
+//  - usage with 'textarea':
+
+    // DebounceTextArea is just a type, so it should be explicitly defined as value
+    const DebounceTextArea: DebounceTextArea = DebounceInput;
+
+    <DebounceTextArea
+      element={'textarea'}
+      rows={1}
+      cols={2}
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {}}
+    />
+
+//  - usage with custom element that has 'value' and 'onChange' props:
+
+    interface MyComponentProps {
+      value?: string | number;
+      onChange: React.ChangeEventHandler<MyComponent>;
+
+      myCustomProp: number;
+    }
+
+    class MyComponent extends React.Component<MyComponentProps> {}
+
+    const DebouncedMyComponent: Debounced<MyComponent, MyComponentProps> = DebounceInput;
+
+    <DebouncedMyComponent
+      element={MyComponent}
+      myCustomProp={1}         // OK, myCustomProp will be passed down to MyComponent
+      // myInvalidCustomProp={2}  // Error, there is no myInvalidCustomProp in MyComponentProps
+      onChange={(e: React.ChangeEvent<MyComponent>) => {}}
+    />
+

package.json

@@ -32,7 +32,7 @@
     "postversion": "git push --follow-tags",
     "nuke": "rm -rf node_modules yarn.lock",
     "postnuke": "yarn install",
-    "deps": "! depcheck --specials=bin,eslint --ignore-dirs=build,lib,pub | grep --invert-match 'No depcheck issue'"
+    "deps": "! depcheck --specials=bin,eslint --ignore-dirs=build,lib,pub  --ignores=@types/* | grep --invert-match 'No depcheck issue'"
   },
   "repository": {
     "type": "git",
@@ -67,6 +67,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
+    "@types/react": "^16.9.7",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",

src/index.d.ts

@@ -0,0 +1,42 @@
+/*
+ *  check usage examples in ./example/typescript-example.tsx
+ */
+
+import * as React from 'react';
+
+interface PropConstraints<T> {
+  readonly value?: string | number;
+  readonly onChange: React.ChangeEventHandler<T>;
+}
+
+export type DebounceInputProps<WrappedComponent, WrappedComponentProps> = WrappedComponentProps & {
+  readonly element?: string | React.ComponentType<PropConstraints<WrappedComponent>>;
+  readonly type?: string;
+  readonly onChange: React.ChangeEventHandler<WrappedComponent>;
+  readonly onKeyDown?: React.KeyboardEventHandler<WrappedComponent>;
+  readonly onBlur?: React.FocusEventHandler<WrappedComponent>;
+  readonly value?: string | number;
+  readonly placeholder?: string | number;
+  readonly minLength?: number;
+  readonly debounceTimeout?: number;
+  readonly forceNotifyByEnter?: boolean;
+  readonly forceNotifyOnBlur?: boolean;
+  readonly inputRef?: React.Ref<WrappedComponent>;
+};
+
+export declare class DebounceInput<
+  WrappedComponent = HTMLInputElement,
+  WrappedComponentProps = React.InputHTMLAttributes<HTMLInputElement>
+> extends React.PureComponent<DebounceInputProps<WrappedComponent, WrappedComponentProps>> {
+
+}
+
+export type Debounced<
+  WrappedComponent,
+  WrappedComponentProps
+> = React.ComponentType<DebounceInputProps<WrappedComponent, WrappedComponentProps>>;
+
+export type DebounceTextArea = Debounced<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>;