Merge pull request #5 from devfolioco/feat-error

Error handling and Classes support

Author: ajayns

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 /lib
-demo
+/demo
 
 # Editor config
 .vscode

README.md

@@ -68,38 +68,52 @@ export default class App extends Component {
   </tr>
   <tr>
     <td>containerStyle</td>
-    <td>style (object)</td>
+    <td>style (object) / className (string)</td>
     <td>false</td>
     <td>none</td>
-    <td>Style applied to container of inputs.</td>
+    <td>Style applied or class passed to container of inputs.</td>
   </tr>
   <tr>
     <td>inputStyle</td>
-    <td>style (object)</td>
+    <td>style (object) / className (string)</td>
     <td>false</td>
     <td>none</td>
-    <td>Style applied to each input.</td>
+    <td>Style applied or class passed to each input.</td>
   </tr>
   <tr>
     <td>focusStyle</td>
-    <td>style (object)</td>
+    <td>style (object) / className (string)</td>
     <td>false</td>
     <td>none</td>
-    <td>Style applied to inputs on focus.</td>
+    <td>Style applied or class passed to inputs on focus.</td>
   </tr>
   <tr>
-    <td>disabled</td>
+    <td>isDisabled</td>
     <td>boolean</td>
     <td>false</td>
     <td>false</td>
     <td>Disables all the inputs.</td>
   </tr>
   <tr>
     <td>disabledStyle</td>
-    <td>style (object)</td>
+    <td>style (object) / className (string)</td>
     <td>false</td>
     <td>none</td>
-    <td>Style applied to each input when disabled.</td>
+    <td>Style applied or class passed to each input when disabled.</td>
+  </tr>
+  <tr>
+    <td>hasErrored</td>
+    <td>boolean</td>
+    <td>false</td>
+    <td>false</td>
+    <td>Indicates there is an error in the inputs.</td>
+  </tr>
+  <tr>
+    <td>errorStyle</td>
+    <td>style (object) / className (string)</td>
+    <td>false</td>
+    <td>none</td>
+    <td>Style applied or class passed to each input when errored.</td>
   </tr>
   <tr>
     <td>shouldAutoFocus</td>

src/docs/index.html renamed to src/demo/index.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <meta name="description" content="CHANGE THIS">
-  <title>React component starter</title>
+  <meta name="description" content="React Component for handling OTP inputs">
+  <title>react-otp-input</title>
 
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet">

src/docs/index.jsx renamed to src/demo/index.jsx

@@ -11,6 +11,7 @@ class Demo extends Component {
       numInputs: 4,
       separator: '-',
       isDisabled: false,
+      hasErrored: false,
     };
   }
 
@@ -22,8 +23,9 @@ class Demo extends Component {
     this.setState({ [e.target.name]: e.target.value });
   };
 
-  handleCheck = () => {
-    this.setState(prevState => ({ isDisabled: !prevState.isDisabled }));
+  handleCheck = e => {
+    const { name } = e.target;
+    this.setState(prevState => ({ [name]: !prevState[name] }));
   };
 
   handleSubmit = e => {
@@ -32,7 +34,7 @@ class Demo extends Component {
   };
 
   render() {
-    const { otp, numInputs, separator, isDisabled } = this.state;
+    const { otp, numInputs, separator, isDisabled, hasErrored } = this.state;
 
     return (
       <div className="container">
@@ -79,6 +81,18 @@ class Demo extends Component {
               Disabled
             </label>
           </div>
+          <div className="side-bar__segment">
+            <label htmlFor="hasErrored">
+              <input
+                id="hasErrored"
+                name="hasErrored"
+                type="checkbox"
+                checked={hasErrored}
+                onChange={this.handleCheck}
+              />
+              Error
+            </label>
+          </div>
           <div className="side-bar__segment side-bar__segment--bottom">
             <a href="https://github.com/ajayns/react-otp-input">
               Documentation and Source
@@ -100,7 +114,9 @@ class Demo extends Component {
                     border: '1px solid rgba(0,0,0,0.3)',
                   }}
                   numInputs={numInputs}
-                  disabled={isDisabled}
+                  isDisabled={isDisabled}
+                  hasErrored={hasErrored}
+                  errorStyle="error"
                   onChange={this.handleOtpChange}
                   separator={<span>{separator}</span>}
                   shouldAutoFocus

src/docs/styles.css renamed to src/demo/styles.css

@@ -107,3 +107,7 @@ a {
 .margin-top--large {
   margin-top: 4rem;
 }
+
+.error {
+  border: 1px solid red !important;
+}

src/lib/index.jsx

@@ -14,8 +14,10 @@ type Props = {
   containerStyle?: Object,
   inputStyle?: Object,
   focusStyle?: Object,
-  disabled?: boolean,
+  isDisabled?: boolean,
   disabledStyle?: Object,
+  hasErrored?: boolean,
+  errorStyle?: Object,
   shouldAutoFocus?: boolean,
 };
 
@@ -24,6 +26,12 @@ type State = {
   otp: string[],
 };
 
+// Doesn't really check if it's a style Object
+// Basic implemenetation to check if it's not a string
+// of classNames and is an Object
+// TODO: Better implementation
+const isStyleObject = obj => typeof obj === 'object';
+
 class SingleOtpInput extends PureComponent<*> {
   input: ?HTMLInputElement;
 
@@ -54,13 +62,17 @@ class SingleOtpInput extends PureComponent<*> {
     }
   }
 
+  getClasses = (...classes) => classes.filter(c => !isStyleObject(c) && c !== false).join(' ');
+
   render() {
     const {
       separator,
       isLastChild,
       inputStyle,
       focus,
-      disabled,
+      isDisabled,
+      hasErrored,
+      errorStyle,
       focusStyle,
       disabledStyle,
       ...rest
@@ -72,15 +84,21 @@ class SingleOtpInput extends PureComponent<*> {
           style={Object.assign(
             { width: '1em', textAlign: 'center' },
             inputStyle,
+            focus && isStyleObject(focusStyle) && focusStyle,
+            isDisabled && isStyleObject(disabledStyle) && disabledStyle,
+            hasErrored && isStyleObject(errorStyle) && errorStyle
+          )}
+          className={this.getClasses(
             focus && focusStyle,
-            disabled && disabledStyle
+            isDisabled && disabledStyle,
+            hasErrored && errorStyle
           )}
           type="tel"
           maxLength="1"
           ref={input => {
             this.input = input;
           }}
-          disabled={disabled}
+          disabled={isDisabled}
           {...rest}
         />
         {!isLastChild && separator}
@@ -93,7 +111,7 @@ class OtpInput extends Component<Props, State> {
   static defaultProps = {
     numInputs: 4,
     onChange: (otp: number): void => console.log(otp),
-    disabled: false,
+    isDisabled: false,
     shouldAutoFocus: false,
   };
 
@@ -203,8 +221,10 @@ class OtpInput extends Component<Props, State> {
       inputStyle,
       focusStyle,
       separator,
-      disabled,
+      isDisabled,
       disabledStyle,
+      hasErrored,
+      errorStyle,
       shouldAutoFocus,
     } = this.props;
     const inputs = [];
@@ -228,8 +248,10 @@ class OtpInput extends Component<Props, State> {
           inputStyle={inputStyle}
           focusStyle={focusStyle}
           isLastChild={i === numInputs - 1}
-          disabled={disabled}
+          isDisabled={isDisabled}
           disabledStyle={disabledStyle}
+          hasErrored={hasErrored}
+          errorStyle={errorStyle}
           shouldAutoFocus={shouldAutoFocus}
         />
       );
@@ -242,7 +264,7 @@ class OtpInput extends Component<Props, State> {
     const { containerStyle } = this.props;
 
     return (
-      <div style={{ display: 'flex', ...containerStyle }}>
+      <div style={Object.assign({ display: 'flex' }, isStyleObject(containerStyle) && containerStyle )} className={!isStyleObject(containerStyle) && containerStyle}>
         {this.renderInputs()}
       </div>
     );

webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: path.join(__dirname, 'src/docs'),
+  entry: path.join(__dirname, 'src/demo'),
   output: {
     path: path.join(__dirname, 'demo'),
     filename: 'bundle.js',
@@ -22,14 +22,14 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: path.join(__dirname, 'src/docs/index.html'),
+      template: path.join(__dirname, 'src/demo/index.html'),
     }),
   ],
   resolve: {
     extensions: ['.js', '.jsx'],
   },
   devServer: {
-    contentBase: path.join(__dirname, 'docs'),
+    contentBase: path.join(__dirname, 'demo'),
     port: 8000,
     stats: 'minimal',
   },