Initial tests.

Author: DovydasNavickas

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

package-lock.json

@@ -12,6 +12,7 @@
     "author": "ReactWay",
     "license": "AGPLv3",
     "devDependencies": {
+        "@types/fbemitter": "^2.0.32",
         "@types/html-webpack-plugin": "3.2.0",
         "@types/node": "11.11.3",
         "@types/react": "16.8.8",
@@ -21,14 +22,18 @@
         "cross-env": "5.2.0",
         "html-webpack-plugin": "3.2.0",
         "html-webpack-root-plugin": "0.10.0",
+        "simplr-tslint": "^1.0.0-alpha.14",
+        "tslint": "^5.14.0",
+        "tslint-language-service": "^0.9.9",
         "typescript": "3.4.0-rc",
+        "webpack": "^4.29.6",
         "webpack-cli": "3.3.0",
         "webpack-dev-server": "3.2.1"
     },
     "dependencies": {
         "babel-loader": "8.0.5",
+        "fbemitter": "^2.1.1",
         "react": "16.8.4",
-        "react-dom": "16.8.4",
-        "webpack": "4.29.6"
+        "react-dom": "16.8.4"
     }
 }

package.json

@@ -1 +1 @@
-export * from "./test"
+export * from "./test";

src/components/index.ts

@@ -0,0 +1,51 @@
+import React, { useContext, useEffect, useState } from "react";
+import { FieldContext } from "../contexts/field-context";
+
+export interface FieldValues {
+    defaultValue?: string;
+    initialValue?: string;
+    currentValue?: string;
+}
+
+export interface TextFieldProps extends FieldValues {
+    name: string;
+}
+
+const useFieldValues = (values: FieldValues) => {
+    console.info("useFieldValues");
+    const [defaultValue, setDefaultValue] = useState(values.defaultValue || "");
+    let [initialValue, setInitialValue] = useState(values.initialValue);
+    if (initialValue == null) {
+        initialValue = defaultValue;
+    }
+
+    const [currentValue, setCurrentValue] = useState(initialValue);
+
+    return { currentValue, setCurrentValue };
+};
+
+export const TextField = (props: TextFieldProps) => {
+    const { currentValue, setCurrentValue } = useFieldValues({
+        defaultValue: props.defaultValue,
+        initialValue: props.initialValue,
+        currentValue: props.currentValue,
+    });
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        // store.setCurrentValue(event.target.value);
+        setCurrentValue(event.target.value);
+    };
+
+    const onFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+        console.debug(event.target);
+    };
+
+    return (
+        <input
+            type="text"
+            value={currentValue}
+            onChange={onChange}
+            onFocus={onFocus}
+        />
+    );
+};

src/components/text-field.tsx

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import { FieldStore } from "../stores/field-store";
+
+export interface FieldContextObject {
+    store: FieldStore;
+}
+
+export const FieldContext = createContext<FieldContextObject>({
+    store: new FieldStore(),
+});

src/contexts/field-context.ts

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import { Test } from "./components";
+import { TextField } from "./components/text-field";
 
 const App = () => {
     const [value, setValue] = useState("");
@@ -17,7 +18,7 @@ const App = () => {
             <div>
                 <label>
                     Imported:
-                    <Test />
+                    <TextField name="firstName" initialValue="Test" />
                 </label>
             </div>
         </>

src/index.tsx

@@ -0,0 +1,31 @@
+import { EventEmitter } from "fbemitter";
+
+const CHANGE_EVENT = "change";
+
+export class FieldStore extends EventEmitter {
+    public initialValue: string;
+    public defaultValue: string;
+    public currentValue: string;
+
+    /**
+     *
+     */
+    constructor(defaultValue: string = "", initialValue?: string) {
+        super();
+
+        if (initialValue == null) {
+            this.initialValue = defaultValue;
+            this.currentValue = defaultValue;
+        } else {
+            this.initialValue = initialValue;
+            this.currentValue = initialValue;
+        }
+
+        this.defaultValue = defaultValue;
+    }
+
+    public setCurrentValue(value: string): void {
+        this.currentValue = value;
+        this.emit(CHANGE_EVENT);
+    }
+}

src/stores/field-store.ts

@@ -3,6 +3,13 @@
         "target": "es5",
         "jsx": "react",
         "strict": true,
-        "esModuleInterop": true
+        "esModuleInterop": true,
+        "plugins": [
+            {
+                "name": "tslint-language-service",
+                "alwaysShowRuleFailuresAsWarnings": true,
+                "ignoreDefinitionFiles": true
+            }
+        ]
     }
 }

tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "simplr-tslint"
+}