keyboard-mapper-weblib

keyboard-mapper-weblib

Keyboard Mapper Web Component library that render the UI using keyboard-mapper configuration. React project by Savantis Solutions Lanka (pvt) Ltd..

Usage

ADD keyboard-mapper-weblib FROM GITLAB

  "keyboard-mapper-weblib": "git+ssh://[e-mail]:savantis/keyboard-mapper-weblib.git"

import React from "react";
import KeyboardMapperWeb from "keyboard-mapper-weblib";
import dummyData from "./dummy-data/dunnyData";

const App = () => {
  // * Product Pick Callback Handler
  const handleOnProductPick = val => console.log("handleOnProductPick", val);

  // * Container Pick Callback Handler
  const handleOnContainerPick = val =>
    console.log("handleOnContainerPick", val);

  // * Container validation failed Handler
  const handleOnContainerValidationFailed = val =>
    console.log("handleOnContainerValidationFailed", val);

  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        textAlign: "center",
        backgroundColor: "#f7f",
        padding: "50px"
      }}
    >
      <div
        style={{
          width: "1530px",
          height: "700px",
          backgroundColor: "#ccc",
          margin: "0 auto",
          overflowY: "scroll"
        }}
      >
        <KeyboardMapperWeb
          show_item_image={false}
          keyboard={dummyData}
          OnProductPick={handleOnProductPick}
          OnContainerPick={handleOnContainerPick}
          OnContainerValidationFailed={handleOnContainerValidationFailed}
        />
      </div>
    </div>
  );
};
export default App;

Prop	Description	Default Value	Example
keyboard	Keyboard Configuration	-	https://jsoneditoronline.org/#left=cloud.ccd127bc80004880823c70f5746a7c84 https://jsoneditoronline.org/#right=local.tikaji&left=cloud.92966d18686d4b738e2269691d628b84
show_item_image	Toggle Concession Picture	false
OnProductPick	Callback function that trigger when click on the product item.	-	Returns the selected item as a json object. Example { product: clickedItemObj }
OnContainerPick	Callback function that trigger after the completion of the Container Select.	-	Returns the selected item as a json object. Example { container: {}, defaultArticles: [], pickedItems: [] } NOTE-01 If the selected container has no containerGroups it will returns the clicked cotainer object. Example { container: clickedItemObj } NOTE-02 If particular container group's choice is empty nothing will returns.
OnContainerValidationFailed	Detailed Object Array will returns when container sub item selection validation failed.	-	[{ message: "", group: "", groupId: "", choice:"" }]

Sample GIF

Install

npm install --save keyboard-mapper-weblib

Getting Start Dev

• Clone project from repository

  $ git clone https://gitlab.com/savantis/keyboard-mapper-weblib.git
  

• Change directoty and run project after npm install

  $ cd keyboard-mapper-weblib
  $ npm install
  $ npm start
  

Test before add to seperate project.

• change directory to example folder

   $ cd example
  

• Start example project.

   $ npm start
  

Use a Local Javascript Package in a Real Project

• go to library folder keyboard-mapper-weblib
• run link command as below.

  $ npm link
  

• then go to the local project root folder that going to use keyboard-mapper-weblib
• then inside the local project's root. Run below command to add our custom package.

  $ npm link keyboard-mapper-weblib
  

CHEERS. YOU ARE GOOD TO GO...

License

MIT © v4irajvimu