react-material-ui-keyboard-no-touch-tap - npm Package Compare versions

Comparing version 6.2.3 to 6.3.0

package.json

 {
   "name": "react-material-ui-keyboard-no-touch-tap",
-  "version": "6.2.3",
+  "version": "6.3.0",
   "description": "Virtual keyboard for TextField when needed. (React 16.14 no onTouchTap)",
@@ -33,3 +33,3 @@ "main": "index.js",
   "peerDependencies": {
-    "material-ui": "^0.20.0",
+    "velocity-mui": "^0.20.9",
     "react": "^16.14.0",
@@ -36,0 +36,0 @@ "react-dom": "^16.14.0"

README.md

@@ -1,5 +0,7 @@
-# react-material-ui-keyboard
+# react-material-ui-keyboard-no-touch-tap
 
-Virtual keyboard for TextFeild when needed.
+**The project is now archived since it requires a complete rewrite with modern day React and Material-UI!**
 
+Virtual keyboard for TextField when needed. Forked from react-material-ui-keyboard for use with material-ui@0.20.4 in 6.2.1, but our company had to fork material-ui into velocity-mui, so from v6.3.0 on, this package uses velocity-mui latest because we forked it for future upgrades to react and bug fixes we found.
+
 [![npm version](https://badge.fury.io/js/react-material-ui-keyboard.svg)](https://badge.fury.io/js/react-material-ui-keyboard)
@@ -38,17 +40,17 @@ [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/NoHomey/react-material-ui-keyboard)
 
-| Name                  | Type           | Default                                      | Description          |
-| --------------------- | ---------------| -------------------------------------------- | -------------------- |
-| automatic             | *bool*         |                                              | If true, keyboard will automaticlly: open when textField gets focused and close instead of firing onRequestClose. |
-| disableEffects        | *bool*         |                                              | If true, disables all effects (ripples, focus, hover) on all `keyboardKey`s |
-| open                  | *bool*         |                                              | Controls whether the Keyboard is opened or not. |
-| layouts*              | *string[][][]* |                                              | Keybaord layouts that can be changed when user clicks on 'Keyboard' key. |
-| keyboardKeyWidth      | *number*       | *this.context.muiThemet.button.minWidth*     | Override keyboard key's max width. |
-| keyboardKeyHeight     | *number*       | *this.context.muiThemet.button.height*       | Override keyboard key's max height. |
-| keyboardKeySymbolSize | *number*       | *this.context.muiThemet.flatButton.fontSize* | Override keyboard key's max symbol size. |
-| textField*            | *element*      |                                              | Input field used when keyboard is closed and cloned when it's opened.  |
-| onRequestClose        | *function*     |                                              | Fired when keyboard recives 'Enter' or 'Escape' eighter from onKeyDown listener or keyboard key touch/click event. |
-| onInput               | *function*     |                                              | Fired when keyboard recives 'Enter' **Signature:** `function(input: string) => void`. |
-| onInputValueChange    | *function*     |                                              | Fired when keyboard's input chages value **Signature:** `function(input: string) => void`. |
-| correctorName         | *string*       |                                              | Name of the cloned textField prop to which to bind corrector. |
-| corrector**           | *function*     |                                              | Function which is bound to the the cloned textField at correctorName prop. this is bound to the Keyboard, public method makeCorrection can be used to apply a correction to the keyboard input. |                                                 
+| Name                  | Type           | Default                                      | Description                                                                                                                                                                                     |
+| --------------------- | -------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| automatic             | _bool_         |                                              | If true, keyboard will automaticlly: open when textField gets focused and close instead of firing onRequestClose.                                                                               |
+| disableEffects        | _bool_         |                                              | If true, disables all effects (ripples, focus, hover) on all `keyboardKey`s                                                                                                                     |
+| open                  | _bool_         |                                              | Controls whether the Keyboard is opened or not.                                                                                                                                                 |
+| layouts\*             | _string[][][]_ |                                              | Keybaord layouts that can be changed when user clicks on 'Keyboard' key.                                                                                                                        |
+| keyboardKeyWidth      | _number_       | _this.context.muiThemet.button.minWidth_     | Override keyboard key's max width.                                                                                                                                                              |
+| keyboardKeyHeight     | _number_       | _this.context.muiThemet.button.height_       | Override keyboard key's max height.                                                                                                                                                             |
+| keyboardKeySymbolSize | _number_       | _this.context.muiThemet.flatButton.fontSize_ | Override keyboard key's max symbol size.                                                                                                                                                        |
+| textField\*           | _element_      |                                              | Input field used when keyboard is closed and cloned when it's opened.                                                                                                                           |
+| onRequestClose        | _function_     |                                              | Fired when keyboard recives 'Enter' or 'Escape' eighter from onKeyDown listener or keyboard key touch/click event.                                                                              |
+| onInput               | _function_     |                                              | Fired when keyboard recives 'Enter' **Signature:** `function(input: string) => void`.                                                                                                           |
+| onInputValueChange    | _function_     |                                              | Fired when keyboard's input chages value **Signature:** `function(input: string) => void`.                                                                                                      |
+| correctorName         | _string_       |                                              | Name of the cloned textField prop to which to bind corrector.                                                                                                                                   |
+| corrector\*\*         | _function_     |                                              | Function which is bound to the the cloned textField at correctorName prop. this is bound to the Keyboard, public method makeCorrection can be used to apply a correction to the keyboard input. |
 
@@ -80,3 +82,3 @@ Props marked with \* are required.
 
-The used `Dialog` is `modal` which guaranties that only one keyboard can be opened which allows memory and performance optimizations. 
+The used `Dialog` is `modal` which guaranties that only one keyboard can be opened which allows memory and performance optimizations.
 
@@ -95,9 +97,9 @@ `Keyboard` Compoment uses `MuiTheme`, `props`, `window.innerWidth` and `window.innerHeight` information to calculate it's size and keyboard keys size (width x height) to ensure it always fits best on screen chech [GALLERY](https://github.com/NoHomey/react-material-ui-keyboard/blob/master/GALLERY.md).
 
-```js 
+```js
 const numericKeyboard = [
-    ['Escape', '-', 'Backspace'],
-    ['7',      '8',         '9'],
-    ['4',      '5',         '6'],
-    ['1',      '2',         '3'],
-    ['0',      '.',     'Enter']
+  ["Escape", "-", "Backspace"],
+  ["7", "8", "9"],
+  ["4", "5", "6"],
+  ["1", "2", "3"],
+  ["0", ".", "Enter"],
 ];
@@ -112,6 +114,6 @@ ```
 const alphaNumericKeyboard = [
-    ['1',      '2',        '3', '4', '5', '6', '7', '8', '9',         '0'],
-    ['q',      'w',        'e', 'r', 't', 'y', 'u', 'i', 'o',         'p'],
-    ['a',      's',        'd', 'f', 'g', 'h', 'j', 'k', 'l', 'Backspace'],
-    ['Escape', 'CapsLock', 'z', 'x', 'c', 'v', 'b', 'n', 'm',     'Enter']
+  ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
+  ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
+  ["a", "s", "d", "f", "g", "h", "j", "k", "l", "Backspace"],
+  ["Escape", "CapsLock", "z", "x", "c", "v", "b", "n", "m", "Enter"],
 ];
@@ -130,9 +132,10 @@ ```
 const extendedKeyboard = [
-    ['1',        '2', '3', '4', '5', '6', '7', '8', '9',         '0'],
-    ['q',        'w', 'e', 'r', 't', 'y', 'u', 'i', 'o',         'p'],
-    ['a',        's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'Backspace'],
-    ['CapsLock', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '-',  'CapsLock'],
-    ['Escape',   '@', '#',         '     ',         '.',     'Enter']
+  ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
+  ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
+  ["a", "s", "d", "f", "g", "h", "j", "k", "l", "Backspace"],
+  ["CapsLock", "z", "x", "c", "v", "b", "n", "m", "-", "CapsLock"],
+  ["Escape", "@", "#", "     ", ".", "Enter"],
 ];
 ```
+
 ### Demonstrating Spacebar and keyboard key size futers
@@ -147,5 +150,5 @@
 - Use `KeyboardEvent.key` names for all [Special keys] (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
-- Use `'Keyboard'` for key with which user can change keyboard layout 
+- Use `'Keyboard'` for key with which user can change keyboard layout
 
-**All spacial keys (none Symbol will have an Icon and support at some point*)**
+**All spacial keys (none Symbol will have an Icon and support at some point\*)**
 
@@ -162,3 +165,3 @@ **Check supported keys!**
 
-`Keyboard` has one `public` `static` member which is designed to be overwritten: `automaitcOpenPredicate` it's signature is `function() => boolean`. It is  called when `automatic` is `true` and the attached `onFocus` handler on `textField` gets fired to determinate should keyboard `open` and disable the native virtual keyboard by assigning `readOnly` at `textField` in the `render`. Default `automaitcOpenPredicate` behaviour is to always return `true`. You can override it to change when to `automatic`lly open keyboard `onFocus`.
+`Keyboard` has one `public` `static` member which is designed to be overwritten: `automaitcOpenPredicate` it's signature is `function() => boolean`. It is called when `automatic` is `true` and the attached `onFocus` handler on `textField` gets fired to determinate should keyboard `open` and disable the native virtual keyboard by assigning `readOnly` at `textField` in the `render`. Default `automaitcOpenPredicate` behaviour is to always return `true`. You can override it to change when to `automatic`lly open keyboard `onFocus`.
 
@@ -168,35 +171,30 @@ # Examples
 ```js
-import * as React from 'react';
-import TextField from 'material-ui/TextField';
-import Keyboard from 'react-material-ui-keyboard';
-import { extendedKeyboard } from 'react-material-ui-keyboard/layouts';
+import * as React from "react";
+import TextField from "material-ui/TextField";
+import Keyboard from "react-material-ui-keyboard";
+import { extendedKeyboard } from "react-material-ui-keyboard/layouts";
 
 class Demo extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            open: false,
-            value: ''
-        };
-        this.onInput = this.handleInput.bind(this);
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      value: "",
+    };
+    this.onInput = this.handleInput.bind(this);
+  }
 
-    handleInput(input) {
-        this.setState({ value: input });
-    }
-    
-    render() {
-      <Keyboard
-        textField={
-          <TextField
-            id="text"
-            value={this.state.value}
-          />
-        }
-        automatic
-        onInput={this.onInput}
-        layouts={[extendedKeyboard]}
-      />;
-    }
-};
+  handleInput(input) {
+    this.setState({ value: input });
+  }
+
+  render() {
+    <Keyboard
+      textField={<TextField id="text" value={this.state.value} />}
+      automatic
+      onInput={this.onInput}
+      layouts={[extendedKeyboard]}
+    />;
+  }
+}
 ```
@@ -207,121 +205,122 @@
 ```js
-import * as React from 'react';
-import NumberInput from 'material-ui-number-input';
-import Keyboard from 'react-material-ui-keyboard';
-import { numericKeyboard } from 'react-material-ui-keyboard/layouts';
+import * as React from "react";
+import NumberInput from "material-ui-number-input";
+import Keyboard from "react-material-ui-keyboard";
+import { numericKeyboard } from "react-material-ui-keyboard/layouts";
 
 function corrector(value) {
-    console.log(`correction ${value}`);
-    this.makeCorrection(value);
+  console.log(`correction ${value}`);
+  this.makeCorrection(value);
 }
 
 class Demo extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { open: false, value: '2' };
-        this.onFocus = this.handleFocus.bind(this);
-        this.onChange = this.handleChange.bind(this);
-        this.onRequestClose = this.handleRequestClose.bind(this);
-        this.onInput = this.handleInput.bind(this);
-        this.onError = this.handleError.bind(this);
-        this.onValid = this.handleValid.bind(this);
-    }
-    
-    canOpenKeyboard() {
-        return (this.state.value.length % 2) === 0;
-    }
+  constructor(props) {
+    super(props);
+    this.state = { open: false, value: "2" };
+    this.onFocus = this.handleFocus.bind(this);
+    this.onChange = this.handleChange.bind(this);
+    this.onRequestClose = this.handleRequestClose.bind(this);
+    this.onInput = this.handleInput.bind(this);
+    this.onError = this.handleError.bind(this);
+    this.onValid = this.handleValid.bind(this);
+  }
 
-    handleFocus(event) {
-        if(this.canOpenKeyboard()) {
-            this.setState({ open: true });
-        }
+  canOpenKeyboard() {
+    return this.state.value.length % 2 === 0;
+  }
+
+  handleFocus(event) {
+    if (this.canOpenKeyboard()) {
+      this.setState({ open: true });
     }
-    
-    handleChange(event, value) {
-        console.log(value);
-        this.setState({ value: value });
-    }
-    
-    handleRequestClose() {
-        this.setState({ open: false });
-    }
-    
-    handleInput(input) {
-        console.log(input);
-        this.setState({ value: input });
-    }
-    
-    handleError(error) {
-        let errorText;
-        switch (error) {
-            case 'required':
-                errorText = 'This field is required';
-                break;
-            case 'invalidSymbol':
-                errorText = 'You are tring to enter none number symbol';
-                break;
-            case 'incompleteNumber':
-                errorText = 'Number is incomplete';
-                break;
-            case 'singleMinus':
-                errorText = 'Minus can be use only for negativity';
-                break;
-            case 'singleFloatingPoint':
-                errorText = 'There is already a floating point';
-                break;
-            case 'singleZero':
-                errorText = 'Floating point is expected';
-                break;
-            case 'min':
-                errorText = 'You are tring to enter number less than -10';
-                break;
-            case 'max':
-                errorText = 'You are tring to enter number greater than 12';
-                break;
-        }
-        this.setState({ errorText: errorText });
-    }
-    
-    handleValid(value) {
-        console.debug(`valid ${value}`);
-    }
+  }
 
-    componentDidMount() {
-        setTimeout(() => this.setState({ value: '89' }), 1000);
+  handleChange(event, value) {
+    console.log(value);
+    this.setState({ value: value });
+  }
+
+  handleRequestClose() {
+    this.setState({ open: false });
+  }
+
+  handleInput(input) {
+    console.log(input);
+    this.setState({ value: input });
+  }
+
+  handleError(error) {
+    let errorText;
+    switch (error) {
+      case "required":
+        errorText = "This field is required";
+        break;
+      case "invalidSymbol":
+        errorText = "You are tring to enter none number symbol";
+        break;
+      case "incompleteNumber":
+        errorText = "Number is incomplete";
+        break;
+      case "singleMinus":
+        errorText = "Minus can be use only for negativity";
+        break;
+      case "singleFloatingPoint":
+        errorText = "There is already a floating point";
+        break;
+      case "singleZero":
+        errorText = "Floating point is expected";
+        break;
+      case "min":
+        errorText = "You are tring to enter number less than -10";
+        break;
+      case "max":
+        errorText = "You are tring to enter number greater than 12";
+        break;
     }
-    
-    render() {
-        const { state, onFocus, onChange, onError, onValid, onInput } = this;
-        const { value, errorText } = state;
-        const textField = (
-            <NumberInput
-                id="num"
-                required
-                value={value}
-                min={-10}
-                max={12}
-                strategy="warn"
-                errorText={errorText}
-                onFocus={onFocus}
-                onChange={onChange}
-                onError={onError}
-                onValid={onValid}
-                floatingLabelText="Click for a Keyboard" />
-        );
+    this.setState({ errorText: errorText });
+  }
 
-        return (
-            <Keyboard
-                textField={textField}
-                open={this.state.open}
-                onRequestClose={this.onRequestClose}
-                onInput={onInput}
-                correctorName="onRequestValue"
-                corrector={corrector}
-                layouts={[numericKeyboard]}
-                keyboardKeyHeight={50}
-                keyboardKeyWidth={100}
-                keyboardKeySymbolSize={36}
-            />
-        );
-    }
+  handleValid(value) {
+    console.debug(`valid ${value}`);
+  }
+
+  componentDidMount() {
+    setTimeout(() => this.setState({ value: "89" }), 1000);
+  }
+
+  render() {
+    const { state, onFocus, onChange, onError, onValid, onInput } = this;
+    const { value, errorText } = state;
+    const textField = (
+      <NumberInput
+        id="num"
+        required
+        value={value}
+        min={-10}
+        max={12}
+        strategy="warn"
+        errorText={errorText}
+        onFocus={onFocus}
+        onChange={onChange}
+        onError={onError}
+        onValid={onValid}
+        floatingLabelText="Click for a Keyboard"
+      />
+    );
+
+    return (
+      <Keyboard
+        textField={textField}
+        open={this.state.open}
+        onRequestClose={this.onRequestClose}
+        onInput={onInput}
+        correctorName="onRequestValue"
+        corrector={corrector}
+        layouts={[numericKeyboard]}
+        keyboardKeyHeight={50}
+        keyboardKeyWidth={100}
+        keyboardKeySymbolSize={36}
+      />
+    );
+  }
 }
@@ -338,3 +337,3 @@ ```
 
-If you need to change theme eg. gutter, spacing, colors or any other option you need to wrapp ```<Keyboard ... />``` in ```MuiThemeProvider``` or to manually provide a ```muiTheme``` to parent's ```context```.
+If you need to change theme eg. gutter, spacing, colors or any other option you need to wrapp `<Keyboard ... />` in `MuiThemeProvider` or to manually provide a `muiTheme` to parent's `context`.
 
@@ -341,0 +340,0 @@ # Testing

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

119861

increased by94.83%

Number of package files

22

increased by46.67%

Lines of code

792

increased by10.92%

Worsened metrics

Number of lines in readme file

347

decreased by-0.29%

No dependency changes