@skyscanner/backpack-web 34.16.0 → 35.0.0-premajor.1

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -14,7 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { Component } from 'react';
 import { INPUT_TYPES } from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
@@ -31,22 +32,25 @@ const DELETE = 46;
 const SPACEBAR = 32;
 const ENTER = 13;
 class BpkSplitInput extends Component {
+  static defaultProps = {
+    type: INPUT_TYPES.number,
+    inputLength: 4,
+    large: true,
+    placeholder: ''
+  };
   constructor(props) {
     super(props);
     this.state = {
       focusedInput: 0,
-      inputValue: []
+      inputValue: Array(props.inputLength).fill('')
     };
   }
   onInputChange = input => {
     this.setState({
       inputValue: input
     });
-    const {
-      onChange
-    } = this.props;
     const value = input.join('');
-    onChange(value);
+    this.props.onInputChange(value);
   };
   updateInputValue = value => {
     const {
@@ -83,8 +87,8 @@ class BpkSplitInput extends Component {
   };
   isNumeric = () => this.props.type === INPUT_TYPES.number;
   isInputValid = value => {
-    const isTypeValid = this.isNumeric() ? /^\d$/.test(value) : typeof value === 'string';
-    return isTypeValid && value.trim().length === 1;
+    const isTypeValid = this.isNumeric() ? /^\d$/.test(`${value}`) : typeof value === 'string';
+    return isTypeValid && `${value}`.trim().length === 1;
   };
   focusInput = inputIndex => {
     const {
@@ -132,23 +136,23 @@ class BpkSplitInput extends Component {
     this.onInputChange(inputValue);
   };
   handleOnKeyDown = e => {
-    if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+    if (e.key === 'Backspace') {
       e.preventDefault();
       this.updateInputValue('');
       this.focusPreviousInput();
-    } else if (e.keyCode === DELETE || e.key === 'Delete') {
+    } else if (e.key === 'Delete') {
       e.preventDefault();
       this.updateInputValue('');
-    } else if (e.keyCode === LEFT_ARROW || e.key === 'Left' || e.key === 'ArrowLeft') {
+    } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
       e.preventDefault();
       this.focusPreviousInput();
-    } else if (e.keyCode === RIGHT_ARROW || e.key === 'Right' || e.key === 'ArrowRight') {
+    } else if (e.key === 'Right' || e.key === 'ArrowRight') {
       e.preventDefault();
       this.focusNextInput();
-    } else if (e.keyCode === ENTER || e.key === 'Enter') {
+    } else if (e.key === 'Enter') {
       e.preventDefault();
       this.handleSubmit();
-    } else if (e.keyCode === SPACEBAR || e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
+    } else if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
       e.preventDefault();
     }
   };
@@ -179,7 +183,8 @@ class BpkSplitInput extends Component {
       large,
       name,
       placeholder,
-      type
+      type,
+      ...rest
     } = this.props;
     const inputs = [];
     for (let index = 0; index < inputLength; index += 1) {
@@ -197,7 +202,8 @@ class BpkSplitInput extends Component {
         onInput: this.handleOnChange,
         onKeyDown: this.handleOnKeyDown,
         onPaste: this.handleOnPaste,
-        onFocus: e => this.handleOnFocus(e, index)
+        onFocus: e => this.handleOnFocus(e, index),
+        ...rest
       }, index));
     }
     return inputs;
@@ -209,22 +215,5 @@ class BpkSplitInput extends Component {
     });
   }
 }
-BpkSplitInput.propTypes = {
-  type: PropTypes.oneOf([INPUT_TYPES.text, INPUT_TYPES.number]),
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  inputLength: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  large: PropTypes.bool
-};
-BpkSplitInput.defaultProps = {
-  type: INPUT_TYPES.number,
-  inputLength: 4,
-  large: true,
-  placeholder: ''
-};
 export default BpkSplitInput;
 export { INPUT_TYPES };

package/bpk-react-utils/src/nativeEventHandler.d.ts

@@ -1,2 +1,2 @@
-declare function setNativeValue(element: HTMLInputElement, value: string): void;
+declare function setNativeValue(element: HTMLInputElement, value: string | number, shouldDispatchChange?: boolean): void;
 export { setNativeValue };

package/bpk-react-utils/src/nativeEventHandler.js

@@ -20,16 +20,18 @@
 // This causes the elements to not emit events that would have been if they had been modified by the user directly.
 // In order to maintain the expected native behaviour of the input element, It's possible to call this function during an
 // "onEvent" handler and update the element value, together with updating react it's own state which isn't mapped to the elements value prop.
-function setNativeValue(element, value) {
+function setNativeValue(element, value, shouldDispatchChange = true) {
   const inputProto = window.HTMLInputElement.prototype;
   const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value');
   const setValue = descriptor.set;
   if (setValue) {
-    const event = new Event('change', {
-      bubbles: true
-    });
     setValue.call(element, value);
-    element.dispatchEvent(event);
+    if (shouldDispatchChange) {
+      const event = new Event('change', {
+        bubbles: true
+      });
+      element.dispatchEvent(event);
+    }
   }
 }