Merge pull request #14 from renanborgez/renan/custom-component

Ass support for custom components

Author: renanborgez

.eslintrc

@@ -13,8 +13,8 @@
     "jest"
   ],
   "globals": {
-      "document": true,
-      "navigator": true
+    "document": true,
+    "navigator": true
   },
   "rules": {
     "indent": [
@@ -34,11 +34,13 @@
       "always"
     ],
     "import/no-extraneous-dependencies": [
-      "error", {
+      "error",
+      {
         "peerDependencies": true
       }
     ],
     "import/no-named-as-default": "off",
-    "react/forbid-prop-types": "off"
+    "react/forbid-prop-types": "off",
+    "react/no-array-index-key": "off"
   }
 }

README.md

@@ -5,12 +5,17 @@
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Frenanborgez%2Freact-nice-input-password.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Frenanborgez%2Freact-nice-input-password?ref=badge_shield) [![Known Vulnerabilities](https://snyk.io//test/github/renanborgez/react-nice-input-password/badge.svg?targetFile=package.json)](https://snyk.io//test/github/renanborgez/react-nice-input-password?targetFile=package.json)
 
 A input password control built with and for [React](http://facebook.github.io/react/index.html)
+and works nicely with [Material-UI](https://material-ui.com/)
 
 ## Demo
 
 [https://codesandbox.io/s/o1v16rqqrz](https://codesandbox.io/s/o1v16rqqrz)
 
-[![Sample](https://image.ibb.co/dJNFHR/sample.png)](https://image.ibb.co/dJNFHR/sample.png)
+### Material UI Support
+[![MaterialUI](docs/material.png)](docs/material.png)
+
+### And more ...
+[![Sample](docs/andmore.png)](docs/andmore.png)
 
 ## Installation
 
@@ -94,6 +99,7 @@ You can provide a custom `className` to the Nice Input Password and custom `clas
 | placeholder | string | (empty string) | The placeholder used on input element `placeholder={placeholder}` |
 | className | string | (empty string) | Optional class to be passed to niceinputpassword context |
 | style | object | undefined | Optional style to be passed to input field |
+| Component | ReactComponent | input | Optional component to be used
 | normalClassName | string | 'none' | The className used on level color
 | dangerClassName | string | 'danger' | The className used on level color
 | warningClassName | string | 'warning' | The className used on level color

docs/andmore.png

@@ -51,6 +51,8 @@
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.0.0",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",

docs/material.png

@@ -1,5 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import TextField from '@material-ui/core/TextField';
+import InputLabel from '@material-ui/core/InputLabel';
+import Typography from '@material-ui/core/Typography';
+import LockIcon from '@material-ui/icons/Lock';
 
 import './index.scss';
 
@@ -23,25 +27,25 @@ class App extends React.Component {
   render() {
     const securityLevels = [
       {
-        descriptionLabel: 'At least 1 number',
+        descriptionLabel: <Typography>At least 1 number</Typography>,
         validator: /.*[0-9].*/,
       },
       {
-        descriptionLabel: 'At least 1 letter',
+        descriptionLabel: <Typography>At least 1 letter</Typography>,
         validator: /.*[a-zA-Z].*/,
       },
       {
-        descriptionLabel: 'At least 1 uppercase letter',
+        descriptionLabel: <Typography>At least 1 uppercase letter</Typography>,
         validator: /.*[A-Z].*/,
       },
       {
-        descriptionLabel: 'At least 1 L letter',
+        descriptionLabel: <Typography>At least 1 L letter</Typography>,
         validator: /.*[L].*/,
       },
     ];
     return (
       <div className="wrap">
-        <h2>Simple input</h2>
+        <Typography variant="h5">Simple input</Typography>
         <NiceInputPassword
           label="Password"
           name="pass1"
@@ -51,7 +55,7 @@ class App extends React.Component {
         />
         <hr />
 
-        <h2>With levelbar and visible text</h2>
+        <Typography variant="h5">With levelbar and visible text</Typography>
         <NiceInputPassword
           label="Password"
           name="pass2"
@@ -63,7 +67,7 @@ class App extends React.Component {
         />
         <hr />
 
-        <h2>With levelbar and descritionLevelBar</h2>
+        <Typography variant="h5">With levelbar and descritionLevelBar</Typography>
         <NiceInputPassword
           label="Password"
           name="pass3"
@@ -75,7 +79,7 @@ class App extends React.Component {
         />
         <hr />
 
-        <h2>With start and end adornment</h2>
+        <Typography variant="h5">With start and end adornment</Typography>
         <NiceInputPassword
           label="Password"
           name="pass4"
@@ -89,6 +93,25 @@ class App extends React.Component {
           endAdornment="OK"
         />
         <hr />
+
+        <Typography variant="h5">Using Material-UI InputLabel and TextField</Typography>
+        <NiceInputPassword
+          label="Password"
+          name="pass5"
+          LabelComponent={InputLabel}
+          InputComponent={TextField}
+          InputComponentProps={{
+            variant: 'outlined',
+            InputProps: {
+              endAdornment: <LockIcon />,
+            },
+          }}
+          value={this.state.pass5}
+          showSecurityLevelBar
+          securityLevels={securityLevels}
+          onChange={this.handleChange}
+        />
+        <hr />
       </div>
     );
   }

package.json

@@ -14,6 +14,9 @@ const propTypes = {
   style: PropTypes.object,
   value: PropTypes.string,
   visible: PropTypes.bool,
+  LabelComponent: PropTypes.any,
+  InputComponent: PropTypes.any,
+  InputComponentProps: PropTypes.object,
   startAdornment: PropTypes.node,
   endAdornment: PropTypes.node,
   showSecurityLevelBar: PropTypes.bool,
@@ -46,6 +49,9 @@ const defaultProps = {
   showSecurityLevelDescription: false,
   securityLevels: [],
   visible: false,
+  LabelComponent: args => React.createElement('label', args),
+  InputComponent: args => React.createElement('input', args),
+  InputComponentProps: {},
   normalClassName: 'none',
   dangerClassName: 'danger',
   warningClassName: 'warning',
@@ -115,6 +121,9 @@ class NiceInputPassword extends React.Component {
       endAdornment,
       style,
       visible,
+      LabelComponent,
+      InputComponent,
+      InputComponentProps,
     } = this.props;
 
     let inputClassName = '';
@@ -148,11 +157,13 @@ class NiceInputPassword extends React.Component {
         inputClassName = markerClassName;
       }
 
-      return <div className={markerClassName} key={`marker-${escape(item.descriptionLabel)}`} />;
+      return (
+        <div className={markerClassName} key={`marker-${escape(item.descriptionLabel)}-${index}`} />
+      );
     });
 
     const levelsDescriptionNode =
-      this.state.levels.map((item) => {
+      this.state.levels.map((item, index) => {
         let descriptionClassName = '';
 
         if (item.isValid && value !== '') {
@@ -162,7 +173,10 @@ class NiceInputPassword extends React.Component {
         }
 
         return (
-          <li className={descriptionClassName} key={escape(item.descriptionLabel)}>
+          <li
+            className={descriptionClassName}
+            key={`description-node-${escape(item.descriptionLabel)}-${index}`}
+          >
             {item.descriptionLabel}
           </li>
         );
@@ -181,6 +195,9 @@ class NiceInputPassword extends React.Component {
           visible={visible}
           endAdornment={endAdornment}
           onChange={this.handleChange}
+          LabelComponent={LabelComponent}
+          InputComponent={InputComponent}
+          InputComponentProps={InputComponentProps}
         />
         {securityLevels && securityLevels.length > 0 ? (
           <div className="input-password__level">

public/index.jsx

@@ -15,6 +15,9 @@ const propTypes = {
   startAdornment: PropTypes.node,
   endAdornment: PropTypes.node,
   visible: PropTypes.bool,
+  LabelComponent: PropTypes.any,
+  InputComponent: PropTypes.any,
+  InputComponentProps: PropTypes.object,
 };
 
 const defaultProps = {
@@ -25,6 +28,9 @@ const defaultProps = {
   startAdornment: null,
   endAdornment: null,
   visible: false,
+  LabelComponent: args => React.createElement('label', args),
+  InputComponent: args => React.createElement('input', args),
+  InputComponentProps: {},
 };
 
 const InputLabel = ({
@@ -38,12 +44,15 @@ const InputLabel = ({
   style,
   visible,
   onChange,
+  LabelComponent,
+  InputComponent,
+  InputComponentProps,
 }) => (
-  <label htmlFor={name} className={className}>
+  <LabelComponent htmlFor={name} className={className}>
     {label}
     <div className="input-password__field">
       {startAdornment && <div className="input-password__startAdornment">{startAdornment}</div>}
-      <input
+      <InputComponent
         name={name}
         id={name}
         className={className}
@@ -52,10 +61,11 @@ const InputLabel = ({
         style={style}
         placeholder={placeholder}
         onChange={onChange}
+        {...InputComponentProps}
       />
       {endAdornment && <div className="input-password__endAdornment">{endAdornment}</div>}
     </div>
-  </label>
+  </LabelComponent>
 );
 
 InputLabel.propTypes = propTypes;

src/NiceInputPassword.jsx

@@ -30,6 +30,24 @@ describe('components', () => {
       expect(input.getAttribute('type')).toBe('text');
     });
 
+    it('renders with custom component and properties', () => {
+      const div = document.createElement('div');
+      render(<InputLabel
+        label="myLabel"
+        name="myName"
+        visible
+        onChange={() => {}}
+        InputComponent={props => <input {...props} />}
+        InputComponentProps={{
+          id: 'overrided-id',
+        }}
+        value=""
+      />, div);
+
+      const input = div.querySelector('#overrided-id');
+      expect(input.getAttribute('type')).toBe('text');
+    });
+
     it('renders with the right properties', () => {
       const div = document.createElement('div');
       render(<InputLabel