Allow filter chars to act as blacklist or whitelist (40818419#82)

Author: chris-soar

README.md

@@ -83,26 +83,27 @@ const ReactCodeInput = dynamic(import('react-code-input'));
 
 ## Props:
 
-| Property | Type | Description |
-|:---|:---|:---|
-| type | string | Only types like: `text`, `number`, `password` and `tel` are accepted.|
-| fields | number | Allowed amount of characters to enter. |
-| value | string | Setting the value of code input field. |
-| name | string | Setting the name of component. |
-| onChange | func | Function, which is called whenever there is a change of value in the input box. |
-| touch | func | Marks the given fields as "touched" to show errors. |
-| untouch | func | Clears the "touched" flag for the given fields. |
-| className | string | Add classname to the root element. |
-| style | object | Setting the styles of container element. |
-| inputStyle | object | Setting the styles of each input field. |
-| inputStyleInvalid | object | Setting the styles of each input field if `isValid` prop is `false`. |
-| isValid | bool | Returns true if an input element contains valid data. |
-| disabled | bool | When present, it specifies that the element should be disabled. |
-| autoFocus | bool | Setup autofocus on the first input, `true` by default. |
-| filterKeyCodes | array | Filter characters on key down. |
-| filterChars | array | Filter characters. | default: ['-', '.'] |
-| pattern | string | The pattern prop specifies a regular expression that the <input> element's value is checked against. |
-| inputMode | string | The inputMode prop tells the browser on devices with dynamic keyboards which keyboard to display. |
+| Property               | Type   | Description                                                                                          |
+| :--------------------- | :----- | :--------------------------------------------------------------------------------------------------- |
+| type                   | string | Only types like: `text`, `number`, `password` and `tel` are accepted.                                |
+| fields                 | number | Allowed amount of characters to enter.                                                               |
+| value                  | string | Setting the value of code input field.                                                               |
+| name                   | string | Setting the name of component.                                                                       |
+| onChange               | func   | Function, which is called whenever there is a change of value in the input box.                      |
+| touch                  | func   | Marks the given fields as "touched" to show errors.                                                  |
+| untouch                | func   | Clears the "touched" flag for the given fields.                                                      |
+| className              | string | Add classname to the root element.                                                                   |
+| style                  | object | Setting the styles of container element.                                                             |
+| inputStyle             | object | Setting the styles of each input field.                                                              |
+| inputStyleInvalid      | object | Setting the styles of each input field if `isValid` prop is `false`.                                 |
+| isValid                | bool   | Returns true if an input element contains valid data.                                                |
+| disabled               | bool   | When present, it specifies that the element should be disabled.                                      |
+| autoFocus              | bool   | Setup autofocus on the first input, `true` by default.                                               |
+| filterKeyCodes         | array  | Filter characters on key down.                                                                       |
+| filterChars            | array  | Filter characters; default is ['-', '.']                                                             |
+| filterCharsIsWhitelist | bool   | `filterChars` acts as blacklist if `false`, whitelist if `true`; `false` by default.                 |
+| pattern                | string | The pattern prop specifies a regular expression that the <input> element's value is checked against. |
+| inputMode              | string | The inputMode prop tells the browser on devices with dynamic keyboards which keyboard to display.    |
 
 ## Compatible with
 [`redux-form`](https://github.com/erikras/redux-form) from [erikras](https://github.com/erikras)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-code-input",
-  "version": "3.8.2",
+  "version": "3.9.0",
   "description": "React component for entering and validating numbers, text or password.",
   "main": "dist/ReactCodeInput.js",
   "scripts": {

src/ReactCodeInput.d.ts

@@ -61,6 +61,9 @@ export interface ReactCodeInputProps {
     // Filter characters.
     filterChars?: Array<string>
 
+    // Filter above acts as blacklist if false, whitelist if true; false by default.
+    filterCharsIsWhitelist?: boolean;
+
     // The pattern prop specifies a regular expression that the element's value is checked against.
     pattern?: string
 

src/ReactCodeInput.js

@@ -88,7 +88,7 @@ class ReactCodeInput extends Component {
   }
 
   handleChange(e) {
-    const { filterChars } = this.props;
+    const { filterChars, filterCharsIsWhitelist } = this.props;
 
     let value = String(e.target.value);
 
@@ -101,7 +101,12 @@ class ReactCodeInput extends Component {
     }
 
     /** Filter Chars */
-    value = value.split('').filter(currChar => !filterChars.includes(currChar)).join('');
+    value = value.split('').filter(currChar => {
+      if (filterCharsIsWhitelist) {
+        return filterChars.includes(currChar);
+      }
+      return !filterChars.includes(currChar);
+    }).join('');
 
     let fullValue = value;
 
@@ -213,6 +218,7 @@ class ReactCodeInput extends Component {
           e.preventDefault();
           break;
         }
+        break;
 
       default:
         break;
@@ -225,14 +231,10 @@ class ReactCodeInput extends Component {
     const { className, style = {}, inputStyle = {}, inputStyleInvalid = {}, type, autoFocus, pattern, inputMode } = this.props,
       { disabled, input, isValid, defaultInputStyle } = this.state,
       styles = {
-        container: style,
+        container: { display: 'inline-block', ...style },
         input: isValid ? inputStyle : inputStyleInvalid,
       };
 
-    Object.assign(styles.container, {
-      display: 'inline-block',
-    });
-
     if (!className && Object.keys(inputStyle).length === 0) {
       Object.assign(inputStyle, {
         ...defaultInputStyle,
@@ -305,6 +307,7 @@ ReactCodeInput.defaultProps = {
   type: 'text',
   filterKeyCodes: [189, 190],
   filterChars: ['-', '.'],
+  filterCharsIsWhitelist: false,
 };
 
 ReactCodeInput.propTypes = {
@@ -325,6 +328,7 @@ ReactCodeInput.propTypes = {
   forceUppercase: PropTypes.bool,
   filterKeyCodes: PropTypes.array,
   filterChars: PropTypes.array,
+  filterCharsIsWhitelist: PropTypes.bool,
   pattern: PropTypes.string,
   inputMode: PropTypes.oneOf([
     'verbatim', 'latin', 'latin-name', 'latin-prose',

src/ReactCodeInput.spec.js

@@ -51,18 +51,31 @@ describe('CodeInputField', () => {
     expect(wrapper.find('input')).toHaveLength(4);
   });
 
-  test('simulates onChange events', () => {
+  test('simulates onKeydown events', () => {
     const onChange = jest.fn();
     const wrapper = mount(<CodeInputField onChange={onChange} fields={3} value="123" type="number"/>);
     const element = wrapper.find('input').at(0);
     element.simulate('change');
-    element.simulate('keydown', { keyCode: 8 });
+    element.simulate('keydown', { keyCode: 8 });  // "backspace"
     element.simulate('keydown', { keyCode: 13 });
     element.simulate('keydown', { keyCode: 65 }); // "a"
     element.simulate('keydown', { keyCode: 69 }); // "e"
     expect(wrapper.state().value).toEqual('23');
   });
 
+  test('simulates onKeydown events; start at 2nd input', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(<CodeInputField onChange={onChange} fields={3} value="123" type="number"/>);
+    const element = wrapper.find('input').at(1);
+    element.simulate('change');
+    element.simulate('keydown', { keyCode: 8 });  // "backspace"
+    element.simulate('keydown', { keyCode: 13 });
+    element.simulate('keydown', { keyCode: 65 }); // "a"
+    element.simulate('keydown', { keyCode: 69 }); // "e"
+    expect(wrapper.state().value).toEqual('13');
+    expect(wrapper.find('input').at(0).instance()).toEqual(document.activeElement);
+  });
+
   test('simulates onChange from paste type=text', () => {
     const onChange = jest.fn();
     const wrapper = mount(<CodeInputField onChange={onChange} fields={6} type="text"/>);
@@ -180,4 +193,31 @@ describe('CodeInputField', () => {
     element.simulate('blur');
     expect(element.instance()).toEqual(document.activeElement);
   });
+
+  test('should block characters that are in filter; default', () => {
+    const wrapper = mount(<CodeInputField fields={6} type="text" filterChars={['1', '2', '3', '4', '5', '6']}/>);
+    const element = wrapper.find('input').at(0);
+    const target = element.instance();
+    target.value = 'ab12cd3e4f56';
+    element.simulate('change', { target });
+    expect(wrapper.state().value).toEqual("abcdef");
+  });
+
+  test('should block characters that are in filter; flag set to false', () => {
+    const wrapper = mount(<CodeInputField fields={6} type="text" filterChars={['1', '2', '3', '4', '5', '6']} filterCharsIsWhitelist={false} />);
+    const element = wrapper.find('input').at(0);
+    const target = element.instance();
+    target.value = 'ab12cd3e4f56';
+    element.simulate('change', { target });
+    expect(wrapper.state().value).toEqual("abcdef");
+  });
+
+  test('should only allow characters that are in filter; flag set to true', () => {
+    const wrapper = mount(<CodeInputField fields={6} type="text" filterChars={['1', '2', '3', '4', '5', '6']} filterCharsIsWhitelist />);
+    const element = wrapper.find('input').at(0);
+    const target = element.instance();
+    target.value = 'ab12cd3e4f56';
+    element.simulate('change', { target });
+    expect(wrapper.state().value).toEqual("123456");
+  });
 });