Capsule mobiteach components
Useful react components to use in Mobiteach capsules
- Usage
- GUI Components
- [MbtLeaveButton](#mbtleavebutton)
- [MbtPopup](#mbtpopup)
- [MbtScenesMenu](#mbtscenesmenu)
- [MbtScenesIcon](#mbtscenesicon)
- [MbtBrick](#mbtbrick)
- [MbtDialog](#mbtdialog)
- [MbtFullScreen](#mbtfullscreen)
- [MbtLoader](#mbtloader)
- [MbtDragElement](#mbtdragelement)
- Mobiteach Activities
- [MbtDocument](#mbtdocument)
- [MbtDome360](#mbtdome360)
- [MbtPostIt](#mbtpostit)
- [MbtQuiz](#mbtquiz)
- [MbtUrl](#mbturl)
- Language
- To update the package in npm
Usage
```bash yarn add capsule-mobiteach-components # or npm install capsule-mobiteach-components ``` Import the components you want to use from the package ```jsx import { example } from 'capsule-mobiteach-components'; ```GUI Components
A list of useful design components for Mobiteach capsulesMbtLeaveButton
A leave button that is placed on the top right of the parent and a function is called when clicked | Prop | Description | Default | | ------- | -------------------- | ------- | | OnLeave | called upon on click | |MbtPopup
A popup with a clickable dimmed background | Prop | Description | Default | | -------- | --------------------------------------------- | -------- | | OnLeave | called upon clicking on the dimmed background | () => {} | | children | JSX Element(s) that will show on the popup | |MbtScenesMenu
Menu showing the scenes | Prop | Description | Default | | -------- | ----------------------------------------- | ------------------- | | show | If the menu is visible or not | | | size | Size of the menu | 150 | | mode | Vertical or horizontal menu | ModeType.HORIZONTAL | | children | JSX Element(s) that will show on the menu | |MbtScenesIcon
Usually used alongside with MbtScenesMenu, represents the icon of a single scene | Prop | Description | Default | | ---------------- | ------------------------------------------------------- | ------- | | background | Image of the scene | | | name | Name of the scene | | | mode | Horizontal of Vertical for size reasons | | | size | Size wanted | | | onSceneIconClick | Function called upon clicking on the scene | | | selected | If the scene is selected makes a blue outline around it | false |MbtBrick
A brick, fully customizable Brick state can be any of the following: ```ts "INVISIBLE | INACTIVE | ACTIVE | INPROGRESS | DONE | FAILED | SUCCESS" ``` Type can be: ```ts "GOTO | QUIZ | POST-IT | DOC | URL | IMAGE360 | VIDEO360" ``` And documentType: ```ts "pdf | doc | docx | ppt | pptx | xls | xlsx | image | mp3 | mp4" ``` | Prop | Description | Default | | ------------ | -------------------------------- | -------- | | name | named of the brick | | | type | brick type | Unknown | | documentType | document type if it's a DOC | | | state | brick state | "ACTIVE" | | showSubIcon | if the brick sub icon is shown | true | | showText | if the brick text below is shown | true | | htmlAttr | All custom html attributes | none |MbtDialog
A dialog in absolute that the size depends on the parent There's 2 options and a default value.- Either in a grid (that starts with 1 not 0) with:
d d d d d d s x x d d x x x d d x x e d d d d d d
- Or in absolute with percentages
- If you want to use the modes above you have to provide ALL 3 props related to it, if the props are invalid or none are given the default values will make it take up all available space :
MbtFullScreen
A fullscreen button | Prop | Description | Default | | ------ | -------------------------------------------- | ------- | | divRef | ref of the div you want to get in fullscreen | |MbtLoader
Loader with a z-index of 10000 | Prop | Description | Default | | ---- | ------------------------------- | ------- | | show | If the loader is showing or not | |MbtDragElement
| Prop | Description | Default | | ------------- | --------------------------------------- | ------- | | position | the position | | | dropRef | ref of the drop element | | | showDragImage | If the drag image shows | | | data | Data | | | children | JSX Element(s) shown under this element | | | ...htmlAttr | any html attributes | |Mobiteach Activities
MbtDocument
A document activity Example of a documentState : ```ts documentState: {results: null,
successRate: 0 | 1,
activityCompletedRate: 0...1,
activityState: {
currentPdfPageNumber: newPage
mediaCurrentTime: currentTime
}
}
```
| Prop | Description | Default |
| ----------------- | ------------------------------------------------------------------------------- | ------------- |
| activity | The activity gotten form the API | |
| documentState | The initial state of the document | {} |
| onDocumentLeave | Function called upon leaving the document through the button | (state) => {} |
| onDocumentAdvance | Function called upon changing page/advancing in the document | (state) => {} |
| onDocumentFinish | Function called upon finishing the document | (state) => {} |
| onStatusChange | When the status of the document changes, best function to use to get the status | (state) => {} |
| baseUrl | If there's a baseUrl before the path of the document | "" |
MbtDome360
Dome360 can be used to show 360° images and videos activity is of type: ```ts { url: "src", activityType: "IMAGE360" | "VIDEO360" } ``` | Prop | Description | Default | | ---------------- | ------------------------------------------- | ------------- | | activity | The activity | | | mediaCurrentTime | Current time if it's a video360 | 0 | | onStatusChange | When the status of the activity changes | (state) => {} | | onDomeLeave | Function called upon finishing the activity | (state) => {} |MbtPostIt
Can be used to create post-its, the topic in activity is the title. The best function to use to get all the status changes is onStatusChange. Activity of type: ```ts { topic : "" } ``` And user of type: ```ts { id: 0, firstname: "", lastname: "" } ``` | Prop | Description | Default | | -------------- | ------------------------------------------------------------ | -------------- | | activity | The activity | | | user | The user | | | postIts | If already created postIts you can pass them in props | {} | | onPostItCreate | Function called upon creating a postIt | (postIt) => {} | | onPostItEdit | Function called upon editing a postIt | (postIt) => {} | | onPostItDelete | Function called upon deleting a postIt | (postIt) => {} | | onStatusChange | Function called upon any change in the postIts | (state) => {} | | onPostItLeave | Function called upon clicking the leave button | () => {} | | viewOnly | If the postIts are in "view only" mode, can't edit or create | |MbtQuiz
Shows the quiz and returns the state. The initialState if not currentState prop is defined is: ```ts initialState = {questionIndex: 0,
answers: [],
isFinish: false,
status: "QUESTION"
}
```
Mode is the QUIZ mode, it can be:
```ts
mode: "MODE01 | MODE02 | MODE03"
```
| Prop | Description | Default |
| ------------------ | ---------------------------------------------------- | ---------------------- |
| activity | Data about the activity gotten from the Mobitech API | |
| mode | The mode of the quiz | "MODE01" |
| currentState | The current state of the activity | InitialState |
| onStatusChange | Function called upon any change in the state | (state) => {} |
| onQuestionAnswer | Function called upon answering a question | (state) => {} |
| onFinish | Function called upon finishing the QUIZ | (state) => {} |
| onQuizLeave | Function called upon clicking the leave button | (state) => {} |
| hasLeaveButton | If the QUIZ has a leave button | true |
| showResultOnFinish | If you want to show the results on finish | true |
| baseUrl | If there's a baseUrl | window.location.origin |
MbtUrl
A url type activity, opens the URL in a new tab or in an iframe | Prop | Description | Default | | -------------- | ----------------------------------------------- | ------------- | | UrlName | Name of the url | | | Url | url | | | withIframe | If it opens in an iframe | false | | onUrlLeave | Function called upong clicking the leave button | (state) => {} | | onStatusChange | The activity | (state) => {} |Language
You can set and get the language used using the functions:- SetMbtLang("fr")
- GetMbtLang()
To update the package in npm
- Add the component you want to add to the package to the index.tsx file in the src folder
- Run "npm run build" to compile the folder with babel
- Change the version in package.json and run "npm publish"
- Needs an npm account with access to the package, must use "npm login"