global-input-react - npm Package Compare versions

Comparing version 3.2.8 to 4.0.0

dist/index.js

@@ -6,20 +6,6 @@ "use strict";
 });
-Object.defineProperty(exports, "encrypt", {
-  enumerable: true,
-  get: function () {
-    return _globalInputMessage.encrypt;
-  }
-});
-Object.defineProperty(exports, "decrypt", {
-  enumerable: true,
-  get: function () {
-    return _globalInputMessage.decrypt;
-  }
-});
-Object.defineProperty(exports, "DisplayQRCode", {
-  enumerable: true,
-  get: function () {
-    return _DisplayQRCode.default;
-  }
-});
+var _exportNames = {
+  useGlobalInputApp: true,
+  MobileState: true
+};
 Object.defineProperty(exports, "useGlobalInputApp", {
@@ -37,131 +23,20 @@ enumerable: true,
 });
-exports.GlobalInputConnect = exports.generateRandomString = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _globalInputMessage = require("global-input-message");
 
-var _DisplayQRCode = _interopRequireDefault(require("./DisplayQRCode"));
+Object.keys(_globalInputMessage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _globalInputMessage[key];
+    }
+  });
+});
 
-var _globalInputController = _interopRequireDefault(require("./globalInputController"));
-
 var _useGlobalInputApp = _interopRequireWildcard(require("./useGlobalInputApp"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const generateRandomString = _globalInputMessage.generatateRandomString;
-exports.generateRandomString = generateRandomString;
-
-const _GlobalInputConnect = ({
-  mobileConfig,
-  connectingMessage,
-  connectedMessage,
-  qrCodeSize,
-  renderSenderConnected,
-  senderConnectedMessage,
-  renderSenderDisconnected,
-  senderDisconnectedMessage,
-  multiSenders,
-  reconnectOnDisconnect,
-  children
-}, ref) => {
-  const [giaStatus, setGIAStatus] = (0, _react.useState)(_globalInputController.default.STATUS.CONNECTING);
-  const [error, setError] = (0, _react.useState)(null);
-  const [senders, setSenders] = (0, _react.useState)([]);
-  const [sender, setSender] = (0, _react.useState)(null);
-  const [code, setCode] = (0, _react.useState)("");
-  (0, _react.useImperativeHandle)(ref, () => ({ ..._globalInputController.default
-  }));
-
-  const onConnected = (code, giaStatus) => {
-    setGIAStatus(giaStatus);
-    setCode(code);
-  };
-
-  const updateSenders = (sender, senders, giaSTATUS) => {
-    setSender(sender);
-    setSenders([...senders]);
-    setGIAStatus(giaSTATUS);
-
-    if (giaSTATUS === _globalInputController.default.STATUS.SENDER_DISCONNECTED) {
-      if (!multiSenders) {
-        if (reconnectOnDisconnect) {
-          setGIAStatus(_globalInputController.default.STATUS.CONNECTING);
-
-          _globalInputController.default.reconnect();
-        } else {
-          _globalInputController.default.disconnect();
-        }
-      }
-    }
-  };
-
-  const onError = error => {
-    setError(error);
-  };
-
-  (0, _react.useEffect)(() => {
-    _globalInputController.default.connect({
-      mobileConfig,
-      onConnected,
-      updateSenders,
-      onError
-    });
-
-    return () => _globalInputController.default.disconnect();
-  }, []);
-  console.log("-----error:" + error + "::giaStatus:" + giaStatus + ":renderSenderConnected:" + renderSenderConnected + ":children:" + children);
-
-  if (error) {
-    return /*#__PURE__*/_react.default.createElement(_DisplayQRCode.default, {
-      code: error,
-      label: error,
-      size: qrCodeSize
-    });
-  }
-
-  switch (giaStatus) {
-    case _globalInputController.default.STATUS.CONNECTING:
-      return connectingMessage ? /*#__PURE__*/_react.default.createElement("div", null, connectingMessage) : null;
-
-    case _globalInputController.default.STATUS.CONNECTED:
-      console.log("[[" + code + "]]");
-      return /*#__PURE__*/_react.default.createElement(_DisplayQRCode.default, {
-        code: code,
-        label: connectedMessage,
-        size: qrCodeSize
-      });
-
-    case _globalInputController.default.STATUS.SENDER_CONNECTED:
-      if (renderSenderConnected) {
-        return renderSenderConnected(sender, senders);
-      } else if (senderConnectedMessage) {
-        return /*#__PURE__*/_react.default.createElement("div", null, senderConnectedMessage);
-      } else if (children) {
-        return children;
-      } else {
-        return /*#__PURE__*/_react.default.createElement("span", null);
-      }
-
-    case _globalInputController.default.STATUS.SENDER_DISCONNECTED:
-      if (renderSenderDisconnected) {
-        return renderSenderDisconnected(sender, senders);
-      } else if (senderDisconnectedMessage) {
-        return /*#__PURE__*/_react.default.createElement("div", null, senderDisconnectedMessage);
-      } else if (children) {
-        return children;
-      } else {
-        return /*#__PURE__*/_react.default.createElement("span", null);
-      }
-
-    default:
-      return /*#__PURE__*/_react.default.createElement("div", null, "Unknown State");
-  }
-};
-
-const GlobalInputConnect = (0, _react.forwardRef)(_GlobalInputConnect);
-exports.GlobalInputConnect = GlobalInputConnect;
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

dist/useGlobalInputApp.js

@@ -422,3 +422,3 @@ "use strict";
     if (mobileState !== MobileState.MOBILE_CONNECTED) {
-      return null;
+      return;
     }
@@ -425,0 +425,0 @@

index.d.ts

 
-declare module 'global-input-react' {
-    export function useGlobalInputApp(configData:any, dependencies?:[any]|[]):any;
-    export const generateRandomString: (length?:number) => string;
-    export const encrypt:(content:string, password:string) => string;
-    export const decrypt:(content:string, password:string) => string;
 
-    type QRCodeInput={
-        label?:string;
-        code?:string;
-        level?:'L'|'M'|'Q'|'H';        
-        size?:number;
-    };
-    export const DisplayQRCode:(props:QRCodeInput)=>any;
+declare module 'global-input-react' {  
+    export * from 'global-input-message';
+    import {InitData,FormField,MessageReceiver,FieldValue} from 'global-input-message';
+    
+    type ConfigDataCreator=()=>ConfigData;
+    export const MobileState:MobileState;
+    export enum MobileState {
+        INITIALIZING=1,
+        DISCONNECTED,
+        ERROR,
+        WAITING_FOR_MOBILE,
+        MOBILE_CONNECTED
+    }
 
-    export const MobileState:{    
-        INITIALIZING:1,      
-        DISCONNECTED:2,
-        ERROR:3, 
-        WAITING_FOR_MOBILE:4,
-        MOBILE_CONNECTED:5           
-    };
+    export function useGlobalInputApp(configData?:ConfigData|ConfigDataCreator, dependencies?:ReadonlyArray<any>):GlobalInputData;
+    
+    interface ConfigData {
+        initData?:InitData|InitDataCreator;
+        onFieldChanged?:(evt:FieldChanged)=>void;
+        options?:ConnectOptions;
+    }
+    interface ConnectOptions {
+        apikey?:string;
+        securityGroup?:string;
+        client?:string;
+        url?:string;        
+    }
+    interface FieldChanged {
+        field:FormField
+    }
+    type InitDataCreator=()=>InitData;
+    
+    
+    
+    
 
+    interface FormOperation{
+        onInput:(value:any) => void
+    }
+
+    interface GlobalInputData {
+            mobileState:1|2|3|4|5;
+            connectionCode:string;
+            errorMessage:string;            
+            mobile:object;           
+            disconnect:()=>void;            
+            setInitData:(initData:InitData,options?:ConnectOptions)=>void; 
+            connectionMessage:React.FC<void>;
+            values:FieldValue[];
+            field:FormField;
+            fields:FormField[];
+            setters:((value:any)=>void)[];
+            WhenWaiting:WhenFunction; 
+            WhenConnected:WhenFunction;
+            WhenDisconnected:WhenFunction;
+            WhenError:WhenFunction;
+            setFieldValueById:(fieldId:string, valueToSet:FieldValue)=>void;
+    }
+
+    type WhenFunction=(props:any)=>any;
+
     
+
+    
+    export function generateRandomString(length?:number):string;
+    export function encrypt(content:string, password:string):string;
+    
+    export function decrypt(content:string, password:string):string;
+
+    
 }

package.json

 {
   "name": "global-input-react",
-  "version": "3.2.8",
+  "version": "4.0.0",
   "description": "global input react component",
@@ -53,4 +53,6 @@ "repository": {
     "@storybook/react": "^5.3.18",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/jest-dom": "^5.11.1",
+    "@testing-library/react": "^10.4.7",
+    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/user-event": "^12.0.13",
     "babel-jest": "^25.2.6",
@@ -64,13 +66,15 @@ "babel-loader": "^8.1.0",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "jest": "^25.2.7",
+    "jest": "^26.1.0",
     "jest-canvas-mock": "^2.2.0",
+    "jest-dom": "^4.0.0",
     "prettier": "^1.19.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
     "webpack": "^4.39.3"
   },
   "dependencies": {
-    "global-input-message": "^1.7.10",
+    "global-input-message": "^1.8.4",
     "qrcode.react": "^0.9.3"
   }
 }

README.md

@@ -1,2 +0,2 @@
-This is a [Global Input App](https://globalinput.co.uk) React JS module for applications running devices like computers, SmartTV, IoT devices to have mobile integration. It allows users to use their mobiles to operate on applications, enjoying mobile-related features like
+This React JS library allows React applications to achieve mobile integration without the need to develop a separate mobile app for each application. Each application can implement their own specific mobile business logic through defining mobile interface declaratively and communicating them to the universal mobile app component securely, so users can use their mobile devices to connect and operate on those device applications. The feature that the device applications can provide through the connected mobile apps to enhance user experience include but not limited to
 [Mobile Encryption](https://globalinput.co.uk/global-input-app/mobile-content-encryption), 
@@ -8,3 +8,3 @@ [Mobile Authentication](https://globalinput.co.uk/global-input-app/mobile-authentication),
  [Mobile Encryption & Signing](https://globalinput.co.uk/global-input-app/mobile-content-encryption), 
-[Mobile Content Transfer](https://globalinput.co.uk/global-input-app/mobile-content-transfer) etc. 
+[Mobile Content Transfer](https://globalinput.co.uk/global-input-app/mobile-content-transfer.  
 
@@ -20,5 +20,5 @@
 
-You just need to pass a configuration to the ```useGlobalInputApp``` function, specifying the user interface elements that the mobile app should display to the user. The device application receives the mobile events as the user interacts with the user interface elements and the communication takes place with end-to-end encryption.
+The custom React hook ```useGlobalInputApp``` allows a React component specify a mobile user interface declaratively.
 
-For example, following will display a Sign In form on the connected mobile device, and the application will receive the mobile events:
+The following example application defines a login screen allowing user to use their mobile to carry out login operation using their mobile.
 
@@ -30,7 +30,3 @@ ```JavaScript
 
-export default ({login}){  
-  const [username,setUser] = useState('');
-  const [password,setPassword] = useState('');
-
-  const initData={                              
+const initData={                              
      form:{
@@ -52,19 +48,18 @@ title: 'Sign In',
  };
- const onFieldChanged=({field})=>{
+export default ({login}){  
+  const [username,setUser] = useState('');
+  const [password,setPassword] = useState('');
+  
+ 
+ const {connectionMessage}=useGlobalInputApp({initData,onFieldChanged:({field})=>{
+      const fds=initData.form.fields;
       switch(field.id){
-          case 'username': setUsername(field.value); break;
-          case 'password': setPassword(field.value); break;
-          case 'login': login(username,password);
+          case fds[0].id: setUsername(field.value); break;
+          case fds[1].id: setPassword(field.value); break;
+          case fds[2].id: login(username,password);
       }
- };
- const globalInputApp=useGlobalInputApp({initData,onFieldChanged});
-    
-
-    const {connectionMessage,WhenConnected} = globalInputApp;
+ }});    
     return (
         <>
-           {connectionMessage}
-          <WhenConnected>
-            Now operate on your mobile to login
-          </WhenConnected>             
+           {connectionMessage}                    
         </>
@@ -74,8 +69,10 @@ );
 ```
-The application displays an encrypted QR code in the place of ```{connectionMessage}``` while it is waiting for a mobile user to connect. Having connected, the mobile app displays the user interface that is defined by ```initData```. As the user interacts with the user interface elements on the mobile app, the application receives the events timely via the  ```field``` variable that is returned as part of object returned by ```useGlobalInputApp```.  The ```id``` attribute of the form is useful for the mobile app to locate an existing data in its encrypted storage to facilitate autofill operations.
+The content of  ```{connectionMessage}```  returned by the custom hook contains an encrypted QR Code that you can scan to connect to the application. Having connected, your mobile displays the user interface specified in the ```initData``` variable, allowing you to operate on the application. The ```onFieldChanged``` parameter is for callback function to receive the form events through the ```field``` variable.  
 
-The type of a field defines the related operation as well as the type of the corresponding user interface element. For example, if the type is "encrypt"/"decrypt", the mobile app initiates the encrypt/decrypt workflow. This is remarkably useful if you would like to secure data without worrying about how to secure the master encryption keys themselves. For more information, please visit [Global Input Website](https://globalinput.co.uk/).
+The ```initData``` specifies a form, in which  ```id``` is used for autofill operation inside the connected mobile app through filtering the existing data in its encrypted storage. The form contain a set of fields, representing data that device application and the connected mobile need to collaborate on composing. The type of each field defines the related data operation. For example, if the type is "encrypt"/"decrypt", the mobile app initiates the encrypt/decrypt workflow inside the mobile app. This is useful when you would like to secure data stored on other devices or cloud.
 
-Some of the useful attribute values returned by  ```useGlobalInputApp``` are listed in the table below:
 
+
+Other values returned by  the ```useGlobalInputApp``` function are listed in the table below:
+
 | Attributes | Description |
@@ -94,1 +91,4 @@ | ------ | ------ |
 
+## TypeScript support
+
+The type definition file is included within the module.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

45192

decreased by-52.66%

Dev dependency count

29

increased by16%

Number of downloads

8

decreased by-20%

Number of package files

10

decreased by-56.52%

Lines of code

1094

decreased by-51.81%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedglobal-input-message@^1.8.4