keyboard-mapper-weblib

Keyboard Mapper Web React Library

Usage no npm install needed!

<script type="module">
  import keyboardMapperWeblib from 'https://cdn.skypack.dev/keyboard-mapper-weblib';
</script>

README

keyboard-mapper-weblib

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

NPM JavaScript Style Guide

Usage

ADD keyboard-mapper-weblib FROM GITLAB

  "keyboard-mapper-weblib": "git+ssh://git@gitlab.com: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