Add readOnly and onBlur props (#24)

* Fix inputClassName prop not being applies to text field * Add readOnly prop to input fields * Add blur callback prop
zxqx · Nov 30, 2017 · 462a5c2 · 462a5c2
1 parent 7c7c908
commit 462a5c2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -14,11 +14,13 @@ export default class PasswordMask extends Component {
     autoFocus: PropTypes.bool,
     maxLength: PropTypes.number,
     onChange: PropTypes.func,
+    onBlur: PropTypes.func,
     onKeyDown: PropTypes.func,
     onShow: PropTypes.func,
     onHide: PropTypes.func,
     onToggle: PropTypes.func,
     useVendorStyles: PropTypes.bool,
+    readOnly: PropTypes.bool,
     inputStyles: PropTypes.any,
     buttonStyles: PropTypes.any,
     showButtonContent: PropTypes.oneOfType([
@@ -37,6 +39,7 @@ export default class PasswordMask extends Component {
     placeholder: '',
     useVendorStyles: true,
     onChange() {},
+    onBlur() {},
     onKeyDown() {}
   }
 
@@ -89,7 +92,7 @@ export default class PasswordMask extends Component {
   }
 
   render() {
-    const { value, id, name, className, inputClassName, buttonClassName, placeholder, autoFocus, maxLength, onChange, onKeyDown, showButtonContent, hideButtonContent, useVendorStyles } = this.props;
+    const { value, id, name, className, inputClassName, buttonClassName, placeholder, autoFocus, maxLength, onChange, onBlur, onKeyDown, showButtonContent, hideButtonContent, useVendorStyles, readOnly } = this.props;
     const { passwordShown } = this.state;
 
     const vendorContainerCss = useVendorStyles ? containerStyles : {};
@@ -111,12 +114,14 @@ export default class PasswordMask extends Component {
           placeholder={placeholder}
           autoFocus={autoFocus}
           maxLength={maxLength}
+          readOnly={readOnly}
           style={{
             ...vendorInputCss,
             ...this.props.inputStyles,
             display: !passwordShown ? 'block' : 'none'
           }}
           onChange={onChange}
+          onBlur={onBlur}
           onKeyDown={onKeyDown}
           onFocus={() => this.setState({ hasBeenFocused: true })}
         />
@@ -130,12 +135,14 @@ export default class PasswordMask extends Component {
           className={inputClassName}
           placeholder={placeholder}
           maxLength={maxLength}
+          readOnly={readOnly}
           style={{
             ...vendorInputCss,
             ...this.props.inputStyles,
             display: passwordShown ? 'block' : 'none'
           }}
           onChange={onChange}
+          onBlur={onBlur}
           onKeyDown={onKeyDown}
           onFocus={() => this.setState({ hasBeenFocused: true })}
         />

diff --git a/test/__snapshots__/index.js.snap b/test/__snapshots__/index.js.snap
@@ -15,10 +15,12 @@ exports[`<PasswordMask /> renders password mask 1`] = `
     id="password"
     maxLength={16}
     name="password"
+    onBlur={[Function]}
     onChange={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     placeholder="Enter password"
+    readOnly={undefined}
     style={
       Object {
         "borderColor": "aqua",
@@ -34,10 +36,12 @@ exports[`<PasswordMask /> renders password mask 1`] = `
     id=""
     maxLength={16}
     name=""
+    onBlur={[Function]}
     onChange={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     placeholder="Enter password"
+    readOnly={undefined}
     style={
       Object {
         "borderColor": "aqua",
@@ -88,10 +92,12 @@ exports[`<PasswordMask /> renders password mask without any styles 1`] = `
     id="password"
     maxLength={undefined}
     name="password"
+    onBlur={[Function]}
     onChange={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     placeholder=""
+    readOnly={undefined}
     style={
       Object {
         "display": "block",
@@ -105,10 +111,12 @@ exports[`<PasswordMask /> renders password mask without any styles 1`] = `
     id=""
     maxLength={undefined}
     name=""
+    onBlur={[Function]}
     onChange={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     placeholder=""
+    readOnly={undefined}
     style={
       Object {
         "display": "none",

diff --git a/test/index.js b/test/index.js
@@ -83,6 +83,22 @@ describe('<PasswordMask />', () => {
     expect(onChange.calledOnce).toEqual(true);
   });
 
+  it('calls onBlur callback', () => {
+    const onBlur = sinon.spy();
+
+    const component = mount(
+      <PasswordMask
+        value={''}
+        onBlur={onBlur}
+      />
+    );
+
+    const input = component.find('input[type="password"]');
+    input.simulate('blur');
+
+    expect(onBlur.calledOnce).toEqual(true);
+  });
+
   it('calls onKeyDown callback', () => {
     const onKeyDown = sinon.spy();
 
@@ -206,4 +222,18 @@ describe('<PasswordMask />', () => {
 
     expect(preventDefault.calledOnce).toEqual(true);
   });
+
+  it('can be readonly', () => {
+    const component = mount(
+      <PasswordMask
+        value={''}
+        readOnly
+      />
+    );
+
+    const inputs = component.find('input');
+    inputs.forEach((node) => {
+      expect(node.props().readOnly).toEqual(true);
+    });
+  });
 });