style(prettier): apply prettier

.prettierignore

@@ -0,0 +1 @@
+dist*

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "bracketSpacing": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "es5"
+}

jest.config.js

@@ -1,22 +1,12 @@
 module.exports = {
-  roots: [
-    "<rootDir>",
-    "<rootDir>/src",
-  ],
-  "transform": {
-    "^.+\\.tsx?$": "ts-jest"
+  roots: ['<rootDir>', '<rootDir>/src'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
   },
-  testRegex: "/test/.*.(test|spec)\\.tsx?$",
+  testRegex: '/test/.*.(test|spec)\\.tsx?$',
   collectCoverage: true,
   modulePaths: ['src'],
-  moduleFileExtensions: [
-    "ts",
-    "tsx",
-    "js",
-    "jsx",
-    "json",
-    "node"
-  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   verbose: true,
   testURL: 'http://localhost/',
-}
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haipham/react-stateful-input",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Stateful React input wrapper that deals with caret moving to end of text for controlled components.",
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",

src/component.tsx

@@ -1,8 +1,8 @@
-import { Objects } from 'javascriptutilities';
+import {Objects} from 'javascriptutilities';
 import * as React from 'react';
-import { ChangeEventHandler, PureComponent, ChangeEvent } from 'react';
-import { Type as Props } from './props';
-import { Type as State } from './state';
+import {ChangeEventHandler, PureComponent, ChangeEvent} from 'react';
+import {Type as Props} from './props';
+import {Type as State} from './state';
 type OnChange = ChangeEventHandler<HTMLInputElement>;
 
 export class InputImpl extends PureComponent<Props, State> {
@@ -13,7 +13,7 @@ export class InputImpl extends PureComponent<Props, State> {
 
   public constructor(props: Props) {
     super(props);
-    this.state = { selectionStart: null, selectionEnd: null };
+    this.state = {selectionStart: null, selectionEnd: null};
   }
 
   public componentWillUnmount() {
@@ -24,52 +24,65 @@ export class InputImpl extends PureComponent<Props, State> {
 
   public componentDidUpdate() {
     if (this.inputRef) {
-      let { selectionStart, selectionEnd } = this.state;
+      let {selectionStart, selectionEnd} = this.state;
       this.inputRef.selectionStart = selectionStart;
       this.inputRef.selectionEnd = selectionEnd;
     }
   }
 
   public focus() {
-    if (this.inputRef) { this.inputRef.focus(); }
+    if (this.inputRef) {
+      this.inputRef.focus();
+    }
   }
 
   private onChange(callback: OnChange): OnChange {
     return e => {
       if (this.inputRef) {
-        this.savedEvent = { ...e };
-        this.savedCrTarget = { ...e.currentTarget };
-        this.savedTarget = { ...e.target };
+        this.savedEvent = {...e};
+        this.savedCrTarget = {...e.currentTarget};
+        this.savedTarget = {...e.target};
 
-        this.setState({
-          selectionStart: this.inputRef.selectionStart,
-          selectionEnd: this.inputRef.selectionEnd,
-        }, () => {
-          if (this.savedEvent) {
-            if (this.savedCrTarget) {
-              this.savedEvent.currentTarget = this.savedCrTarget;
-            }
+        this.setState(
+          {
+            selectionStart: this.inputRef.selectionStart,
+            selectionEnd: this.inputRef.selectionEnd,
+          },
+          () => {
+            if (this.savedEvent) {
+              if (this.savedCrTarget) {
+                this.savedEvent.currentTarget = this.savedCrTarget;
+              }
 
-            if (this.savedTarget) {
-              this.savedEvent.target = this.savedTarget;
-            }
+              if (this.savedTarget) {
+                this.savedEvent.target = this.savedTarget;
+              }
 
-            callback(this.savedEvent);
+              callback(this.savedEvent);
+            }
           }
-        });
+        );
       } else {
         callback(e);
       }
     };
   }
 
   public render() {
-    let propsCopy = { ...this.props };
-    let { onChange, innerRef } = propsCopy;
+    let propsCopy = {...this.props};
+    let {onChange, innerRef} = propsCopy;
 
-    return <input
-      {...Objects.deleteKeysUnsafely(propsCopy, 'innerRef', 'key')}
-      onChange={onChange ? this.onChange(onChange) : undefined}
-      ref={e => { this.inputRef = e; if (innerRef) { innerRef(e); } }} />;
+    return (
+      <input
+        {...Objects.deleteKeysUnsafely(propsCopy, 'innerRef', 'key')}
+        onChange={onChange ? this.onChange(onChange) : undefined}
+        ref={e => {
+          this.inputRef = e;
+          if (innerRef) {
+            innerRef(e);
+          }
+        }}
+      />
+    );
   }
 }

src/index.ts

@@ -1,4 +1,3 @@
-export { InputImpl as Input } from './component';
-export { Type as InputProps } from './props';
-export { Type as InputState } from './state';
-
+export {InputImpl as Input} from './component';
+export {Type as InputProps} from './props';
+export {Type as InputState} from './state';

src/props.ts

@@ -1,5 +1,5 @@
-import { Undefined } from 'javascriptutilities';
-import { InputHTMLAttributes, Key } from 'react';
+import {Undefined} from 'javascriptutilities';
+import {InputHTMLAttributes, Key} from 'react';
 
 export interface Type extends InputHTMLAttributes<HTMLInputElement> {
   readonly innerRef?: (e: HTMLInputElement | null) => void;

test/input.test.tsx

@@ -1,11 +1,11 @@
-import { InputImpl } from 'component';
+import {InputImpl} from 'component';
 import * as enzyme from 'enzyme';
 import * as Adapter from 'enzyme-adapter-react-16';
-import { Numbers, Strings } from 'javascriptutilities';
-import { Type as Props } from 'props';
+import {Numbers, Strings} from 'javascriptutilities';
+import {Type as Props} from 'props';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { capture, instance, spy } from 'ts-mockito-2';
+import {capture, instance, spy} from 'ts-mockito-2';
 
 describe('Block builder component should be implemented correctly', () => {
   let component: JSX.Element;
@@ -14,16 +14,21 @@ describe('Block builder component should be implemented correctly', () => {
   let innerInput: HTMLInputElement;
 
   beforeEach(() => {
-    enzyme.configure({ adapter: new Adapter() });
-    props = spy({ key: 'Input key' });
+    enzyme.configure({adapter: new Adapter()});
+    props = spy({key: 'Input key'});
   });
 
   it('Triggering focus - should focus inner input', () => {
     /// Setup
-    component = <><InputImpl
-      {...instance(props)}
-      ref={e => wrapperInput = e!}
-      innerRef={e => innerInput = e!} /></>;
+    component = (
+      <>
+        <InputImpl
+          {...instance(props)}
+          ref={e => (wrapperInput = e!)}
+          innerRef={e => (innerInput = e!)}
+        />
+      </>
+    );
 
     enzyme.mount(component);
 
@@ -36,14 +41,18 @@ describe('Block builder component should be implemented correctly', () => {
 
   it('Triggering input - should trigger inner input event', () => {
     /// Setup
-    props = spy({ ...instance(props), onChange: () => { } });
-    component = <><InputImpl  {...instance(props)} /></>;
+    props = spy({...instance(props), onChange: () => {}});
+    component = (
+      <>
+        <InputImpl {...instance(props)} />
+      </>
+    );
     let mounted = enzyme.mount(component);
     let inputs = Numbers.range(0, 1000).map(() => Strings.randomString(10));
 
     /// When
     for (let input of inputs) {
-      mounted.simulate('change', { target: { value: input } });
+      mounted.simulate('change', {target: {value: input}});
     }
 
     mounted.unmount();

tsconfig.json

@@ -32,19 +32,11 @@
       "es2015.symbol.wellknown",
       "esnext.asynciterable"
     ],
-    "types": [
-      "node",
-      "react",
-      "jest"
-    ],
+    "types": ["node", "react", "jest"],
     "baseUrl": "src",
     "paths": {
-      "component": [
-        "component.tsx"
-      ],
-      "props": [
-        "props.ts"
-      ],
+      "component": ["component.tsx"],
+      "props": ["props.ts"]
     }
   },
   "compileOnSave": true

tslint.json

@@ -3,14 +3,10 @@
     "member-access": false,
     "member-ordering": true,
     "no-any": false,
-    "no-inferrable-types": [
-      false
-    ],
+    "no-inferrable-types": [false],
     "no-internal-module": true,
     "no-var-requires": false,
-    "typedef": [
-      false
-    ],
+    "typedef": [false],
     "typedef-whitespace": [
       true,
       {
@@ -35,14 +31,7 @@
     "no-arg": true,
     "no-bitwise": true,
     "no-conditional-assignment": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
+    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
     "no-construct": true,
     "no-debugger": true,
     "no-duplicate-variable": true,
@@ -57,19 +46,10 @@
     "no-var-keyword": true,
     "radix": true,
     "switch-default": true,
-    "triple-equals": [
-      true,
-      "allow-undefined-check"
-    ],
+    "triple-equals": [true, "allow-undefined-check"],
     "eofline": false,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "max-line-length": [
-      true,
-      150
-    ],
+    "indent": [true, "spaces"],
+    "max-line-length": [true, 150],
     "no-require-imports": false,
     "no-trailing-whitespace": true,
     "object-literal-sort-keys": false,
@@ -80,21 +60,12 @@
         "singleline": true
       }
     ],
-    "align": [
-      true
-    ],
+    "align": [true],
     "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "interface-name": [
-      false
-    ],
+    "comment-format": [true, "check-space"],
+    "interface-name": [false],
     "jsdoc-format": true,
-    "no-consecutive-blank-lines": [
-      true
-    ],
+    "no-consecutive-blank-lines": [true],
     "no-parameter-properties": false,
     "one-line": [
       true,
@@ -104,11 +75,7 @@
       "check-finally",
       "check-whitespace"
     ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
+    "quotemark": [true, "single", "avoid-escape"],
     "semicolon": true,
     "variable-name": [
       true,