👶

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+build
+compiled
+*.log
+coverage
+.DS_Store
+next.d.ts
+legacy.d.ts

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Nathan Force http://nathanforce.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+# react-two-cents

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-two-cents",
+  "version": "0.0.1",
+  "description": "My input on input fields in React",
+  "main": "dist/react-two-cents.js",
+  "umd:main": "dist/react-two-cents.umd.js",
+  "module": "dist/react-two-cents.m.js",
+  "source": "build/index.js",
+  "author": "Nathan Force <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "babel": "babel --presets=react --plugins=transform-object-rest-spread --no-babelrc -d build src",
+    "build": "npm run -s babel && microbundle",
+    "dev": "microbundle watch"
+  },
+  "prettier": {
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "devDependencies": {
+    "babel": "^6.23.0",
+    "babel-cli": "^6.26.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-react": "^6.24.1",
+    "microbundle": "^0.4.4",
+    "prettier": "^1.13.5"
+  },
+  "peerDependencies": {
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
+  }
+}

src/Field/Control.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FieldContext, registerFieldComponent } from './Field';
+
+class RegisteredControl extends React.Component {
+  componentDidMount() {
+    const { id, register } = this.props;
+    register('control')(id);
+  }
+
+  render() {
+    const { id, onBlur, onFocus, ...props } = this.props;
+    return (
+      <FieldContext.Consumer>
+        {({ focus, blur, error, controlId, helpId, register }) => (
+          <input
+            id={controlId}
+            onFocus={() => {
+              focus();
+              if (onFocus) {
+                onFocus();
+              }
+            }}
+            onBlur={() => {
+              blur();
+              if (onBlur) {
+                onBlur();
+              }
+            }}
+            aria-invalid={!!error}
+            {...props}
+          />
+        )}
+      </FieldContext.Consumer>
+    );
+  }
+}
+
+export const Control = registerFieldComponent(RegisteredControl);

src/Field/Error.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FieldContext, registerFieldComponent } from './Field';
+
+class RegisteredError extends React.Component {
+  componentDidMount() {
+    const { id, register } = this.props;
+    register('error')(true);
+  }
+
+  componentWillUnmount() {
+    const { register } = this.props;
+    register('error')(false);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export const Error = registerFieldComponent(RegisteredError);

src/Field/Field.js

@@ -0,0 +1,69 @@
+import React, { createContext } from 'react';
+
+export const FieldContext = createContext({
+  touched: false,
+  focused: false,
+  error: false,
+  controlId: null,
+  register: () => () => {},
+});
+
+export function registerFieldComponent(Component) {
+  return function FieldComponent(props) {
+    return (
+      <FieldContext.Consumer>
+        {({ register }) => <Component register={register} {...props} />}
+      </FieldContext.Consumer>
+    );
+  };
+}
+
+export class Field extends React.Component {
+  constructor(props) {
+    super(props);
+    this.register = this.register.bind(this);
+    this.focus = this.focus.bind(this);
+    this.blur = this.blur.bind(this);
+
+    this.state = {
+      touched: false,
+      focused: false,
+      error: null,
+      controlId: null,
+      register: this.register,
+      focus: this.focus,
+      blur: this.blur,
+      setError: this.setError,
+    };
+  }
+
+  register(type) {
+    return id => {
+      if (type === 'error') {
+        this.setState(({ error }) => ({ error: !error }));
+      } else {
+        this.setState({
+          [`${type}Id`]: id,
+        });
+      }
+    };
+  }
+
+  focus() {
+    this.setState({ focused: true, touched: true });
+  }
+
+  blur() {
+    this.setState({ focused: false });
+  }
+
+  render() {
+    return (
+      <FieldContext.Provider value={this.state}>
+        <FieldContext.Consumer>
+          {context => this.props.children(context)}
+        </FieldContext.Consumer>
+      </FieldContext.Provider>
+    );
+  }
+}

src/Field/Label.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldContext } from './Field';
+
+export const Label = props => {
+  return (
+    <FieldContext.Consumer>
+      {({ controlId }) => <label htmlFor={controlId} {...props} />}
+    </FieldContext.Consumer>
+  );
+};

src/Field/index.js

@@ -0,0 +1,6 @@
+import { Field } from './Field';
+import { Control } from './Control';
+import { Label } from './Label';
+import { Error } from './Error';
+
+export { Label, Control, Field, Error };

src/index.js

@@ -0,0 +1,3 @@
+import { Label, Field, Error, Control } from './Field';
+
+export { Label, Control, Field, Error };