Add custom levelbar component

Author: Renan Borges

README.md

@@ -147,7 +147,10 @@ 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
+| LabelComponent | ReactComponent | input | Optional label component to be used
+| InputComponent | ReactComponent | input | Optional input component to be used
+| InputComponentProps | Object | null | Optional object to be passed to the custom `InputComponent`
+| renderLevelBarComponent | Render function | null | Optional function to return a custom levelbar component
 | 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

@@ -9,6 +9,17 @@ import './index.scss';
 
 import NiceInputPassword from '../src/NiceInputPassword';
 
+const levelBarCss = level => ({
+  height: '8px',
+  width: level > 0 ? `${((100 / 4) * level)}%` : '100%',
+  marginTop: 16,
+  transition: 'width 0.5s ease',
+  backgroundColor: ['#EFEFEF', 'red', 'orange', 'yellow', 'green'][level],
+  borderRadius: 0,
+});
+
+const CustomLevelBar = levels => <div style={levelBarCss(levels)} />;
+
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -27,47 +38,25 @@ class App extends React.Component {
   render() {
     const securityLevels = [
       {
-        descriptionLabel: <Typography>At least 1 number</Typography>,
+        descriptionLabel: <Typography>1 number</Typography>,
         validator: /.*[0-9].*/,
       },
       {
-        descriptionLabel: <Typography>At least 1 letter</Typography>,
-        validator: /.*[a-zA-Z].*/,
+        descriptionLabel: <Typography>1 lowercase letter</Typography>,
+        validator: /.*[a-z].*/,
       },
       {
-        descriptionLabel: <Typography>At least 1 uppercase letter</Typography>,
+        descriptionLabel: <Typography>1 uppercase letter</Typography>,
         validator: /.*[A-Z].*/,
       },
       {
-        descriptionLabel: <Typography>At least 1 L letter</Typography>,
-        validator: /.*[L].*/,
+        descriptionLabel: <Typography>6 of length</Typography>,
+        validator: /^.{6,}$/,
       },
     ];
     return (
       <div className="wrap">
-        <Typography variant="h5">Simple input</Typography>
-        <NiceInputPassword
-          label="Password"
-          name="pass1"
-          placeholder="Type your password here"
-          value={this.state.pass1}
-          onChange={this.handleChange}
-        />
-        <hr />
-
-        <Typography variant="h5">With levelbar and visible text</Typography>
-        <NiceInputPassword
-          label="Password"
-          name="pass2"
-          visible
-          showSecurityLevelBar
-          securityLevels={securityLevels}
-          value={this.state.pass2}
-          onChange={this.handleChange}
-        />
-        <hr />
-
-        <Typography variant="h5">With levelbar and descritionLevelBar</Typography>
+        <Typography variant="h5">Common usage</Typography>
         <NiceInputPassword
           label="Password"
           name="pass3"
@@ -78,23 +67,29 @@ class App extends React.Component {
           onChange={this.handleChange}
         />
         <hr />
+        <br />
 
-        <Typography variant="h5">With start and end adornment</Typography>
+        <Typography variant="h5">Material-UI InputLabel and TextField</Typography>
         <NiceInputPassword
           label="Password"
           name="pass4"
+          LabelComponent={InputLabel}
+          InputComponent={TextField}
+          InputComponentProps={{
+            variant: 'outlined',
+            InputProps: {
+              endAdornment: <LockIcon />,
+            },
+          }}
+          value={this.state.pass4}
           showSecurityLevelBar
-          showSecurityLevelDescription
           securityLevels={securityLevels}
-          value={this.state.pass4}
           onChange={this.handleChange}
-          style={{ paddingLeft: 15 }}
-          startAdornment={<div style={{ position: 'absolute', top: 2, left: 5 }}>Ξ</div>}
-          endAdornment="OK"
         />
         <hr />
+        <br />
 
-        <Typography variant="h5">Using Material-UI InputLabel and TextField</Typography>
+        <Typography variant="h5">Custom levelBar</Typography>
         <NiceInputPassword
           label="Password"
           name="pass5"
@@ -106,12 +101,14 @@ class App extends React.Component {
               endAdornment: <LockIcon />,
             },
           }}
-          value={this.state.pass5}
           showSecurityLevelBar
+          renderLevelBarComponent={CustomLevelBar}
+          value={this.state.pass5}
           securityLevels={securityLevels}
           onChange={this.handleChange}
         />
         <hr />
+        <br />
       </div>
     );
   }

public/index.jsx

@@ -17,6 +17,7 @@ const propTypes = {
   LabelComponent: PropTypes.any,
   InputComponent: PropTypes.any,
   InputComponentProps: PropTypes.object,
+  renderLevelBarComponent: PropTypes.func,
   startAdornment: PropTypes.node,
   endAdornment: PropTypes.node,
   showSecurityLevelBar: PropTypes.bool,
@@ -59,6 +60,7 @@ const defaultProps = {
   onChange: () => {},
   startAdornment: null,
   endAdornment: null,
+  renderLevelBarComponent: null,
 };
 
 class NiceInputPassword extends React.Component {
@@ -124,14 +126,14 @@ class NiceInputPassword extends React.Component {
       LabelComponent,
       InputComponent,
       InputComponentProps,
+      renderLevelBarComponent,
     } = this.props;
 
     let inputClassName = '';
-    const levelsMarkerNode =
-    this.state.levels.map((item, index) => {
+    const levelsValidLength = this.state.levels.filter(level => level.isValid).length;
+    const levelsMarkerNode = this.state.levels.map((item, index) => {
       let markerClassName = '';
       const levelsLength = this.state.levels.length;
-      const levelsValidLength = this.state.levels.filter(level => level.isValid).length;
 
       if (value !== '') {
         switch (true) {
@@ -157,9 +159,7 @@ class NiceInputPassword extends React.Component {
         inputClassName = markerClassName;
       }
 
-      return (
-        <div className={markerClassName} key={`marker-${index}`} />
-      );
+      return <div className={markerClassName} key={`marker-${index}`} />;
     });
 
     const levelsDescriptionNode =
@@ -182,6 +182,14 @@ class NiceInputPassword extends React.Component {
         );
       });
 
+    const LevelBar = () => (renderLevelBarComponent ? (
+      renderLevelBarComponent(levelsValidLength)
+    ) : (
+      <div className="input-password__marker">
+        {levelsMarkerNode}
+      </div>
+    ));
+
     return (
       <div className={`form-group input-password ${className}`}>
         <InputLabel
@@ -201,10 +209,7 @@ class NiceInputPassword extends React.Component {
         />
         {securityLevels && securityLevels.length > 0 ? (
           <div className="input-password__level">
-            {showSecurityLevelBar ?
-              <div className="input-password__marker">
-                {levelsMarkerNode}
-              </div> : null }
+            {showSecurityLevelBar ? LevelBar() : null}
             {showSecurityLevelDescription ?
               <ul className="input-password__description">
                 {levelsDescriptionNode}

src/NiceInputPassword.jsx

@@ -356,5 +356,42 @@ describe('components', () => {
       expect(onChange).toHaveBeenCalled();
       expect(onChange.mock.calls[0][0].isValid).toBe(false);
     });
+
+    it('renders with a custom levelBar component', () => {
+      const onChange = jest.fn();
+
+      const div = document.createElement('div');
+      render(<NiceInputPassword
+        label="myLabel"
+        name="myName"
+        value=""
+        securityLevels={[
+          {
+            descriptionLabel: 'Sample 1',
+            validator: () => true,
+          },
+          {
+            descriptionLabel: 'Sample 2',
+            validator: str => str.length > 3,
+          },
+        ]}
+        showSecurityLevelBar
+        renderLevelBarComponent={level => <div id="custom-levelbar">{level}</div>}
+        onChange={onChange}
+      />, div);
+
+      const input = div.querySelector('#myName');
+      input.value = 'A';
+      ReactTestUtils.Simulate.change(input);
+
+      const customLevelBar = div.querySelectorAll('#custom-levelbar');
+      expect(customLevelBar[0].innerHTML).toBe('1');
+
+      input.value = 'ABCD';
+      ReactTestUtils.Simulate.change(input);
+
+      div.querySelectorAll('#custom-levelbar');
+      expect(customLevelBar[0].innerHTML).toBe('2');
+    });
   });
 });