Merge pull request #27 from dmblack/feature_input-type-password

Input Type: Password

Author: dmblack

examples/basic/app.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Input from 'react-component_input';
 import Button from './button';
+import Password from './password';
 import Radio from './radio';
 import TextExample from './text';
 import Textarea from './textarea';
@@ -10,6 +11,7 @@ const appElement = document.getElementById('example');
 
 const examples = [
   Button,
+  Password,
   Radio,
   TextExample,
   Textarea

examples/basic/password/index.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import Input from 'react-component_input';
+
+class Password extends Component {
+  render() {
+    return (
+      <div>
+        <Input
+          identifier="passwordInput"
+          labelContent="Password Input"
+          type="password"
+        />
+      </div>
+    );
+  }
+}
+
+export default {
+  label: "Input - Password",
+  app: Password
+};

examples/bootstrapped/app.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Input from 'react-component_input';
 import Button from './button';
+import Password from './password';
 import Radio from './radio';
 import TextExample from './text';
 import Textarea from './textarea';
@@ -10,6 +11,7 @@ const appElement = document.getElementById('example');
 
 const examples = [
   Button,
+  Password,
   Radio,
   TextExample,
   Textarea

examples/bootstrapped/password/index.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import Input from 'react-component_input';
+
+class Password extends Component {
+  render() {
+    return (
+      <div>
+        <Input
+          identifier="passwordInput"
+          labelContent="Password Input"
+          type="password"
+          inputClassNames="form-control"
+        />
+      </div>
+    );
+  }
+}
+
+export default {
+  label: "Input - Password",
+  app: Password
+};

examples/classnames/app.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Input from 'react-component_input';
 import Button from './button';
+import Password from './password';
 import Radio from './radio';
 import TextExample from './text';
 import Textarea from './textarea';
@@ -10,6 +11,7 @@ const appElement = document.getElementById('example');
 
 const examples = [
   Button,
+  Password,
   Radio,
   TextExample,
   Textarea

examples/classnames/password/index.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import Input from 'react-component_input';
+
+class Password extends Component {
+  render() {
+    return (
+      <div>
+        <Input
+          identifier="passwordInput"
+          labelContent="Password Input"
+          type="password"
+          containerClassNames={["button-custom-container", "my-button-custom-container"]}
+          inputClassNames={["button-custom-input", "my-button-custom-input"]}
+          labelClassNames={["button-custom-label", "my-button-custom-label"]}
+          validationClassNames={["button-custom-validation", "my-button-custom-validation"]}
+        />
+      </div>
+    );
+  }
+}
+
+export default {
+  label: "Input - Password",
+  app: Password
+};

examples/validation/app.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Input from 'react-component_input';
+import Password from './password';
 import TextExample from './text';
 import Textarea from './textarea';
 
 const appElement = document.getElementById('example');
 
 const examples = [
+  Password,
   TextExample,
   Textarea
 ];

examples/validation/password/index.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import Input from 'react-component_input';
+
+let validMaxLength = (length = 0) => ({
+  errorMessage:
+    'The length of your input must be less than ' + parseInt(length),
+  callback: value => value.length <= parseInt(length)
+});
+
+let validMinLength = (length = 0) => ({
+  errorMessage:
+    'The length of your input must be more than ' + parseInt(length),
+  callback: value => value.length >= parseInt(length)
+});
+
+class Password extends Component {
+  render() {
+    return (
+      <div>
+        <Input
+          identifier="passwordInput"
+          labelContent="Password Input"
+          type="password"
+          validation={[validMaxLength(15), validMinLength(8)]}
+        />
+      </div>
+    );
+  }
+}
+
+export default {
+  label: "Input - Password",
+  app: Password
+};

examples/validationcss/app.css

@@ -9,6 +9,6 @@
 }
 
 /* Hides validation messages whilst the Input has cursor focus */
-.container-focus .validation-invalid {
+.validation-focus.validation-invalid {
   display: none;
 }

examples/validationcss/app.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Input from 'react-component_input';
+import Password from './password';
 import TextExample from './text';
 import Textarea from './textarea';
 
 const appElement = document.getElementById('example');
 
 const examples = [
+  Password,
   TextExample,
   Textarea
 ];