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..
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