Capsule mobiteach components
Useful react components to use in Mobiteach capsules
Usage
yarn add capsule-mobiteach-components # or npm install capsule-mobiteach-components
Import the components you want to use from the package
import { example } from 'capsule-mobiteach-components';
GUI Components
A list of useful design components for Mobiteach capsules
MbtLeaveButton
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:
"INVISIBLE | INACTIVE | ACTIVE | INPROGRESS | DONE | FAILED | SUCCESS"
Type can be:
"GOTO | QUIZ | POST-IT | DOC | URL | IMAGE360 | VIDEO360"
And documentType:
"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:
- Start (ex: {2, 2})
- End (ex: {4, 4})
- nbSquares (ex: 5)
So the dialog will show up like this relative to it's parent in this example, grid of 5 and starts at 2,2 (s) and ends at 4,4 (e)
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
- posStart (ex : {10,10})
- width (ex: 80)
- height (ex: 80)
It applies the css properties top,left,width,height in position absolute to the dialog
- 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 :
- posStart: {0 , 0}
- height: 100
- width: 100
Prop | Description | Default |
---|---|---|
start | Start position on the grid | |
end | End position on the grid | |
nbSquares | Number of squares in the grid | |
posStart | Percentage from the top and left it starts (ex: {top: 5, left: 5}) | { top: 0, left: 0 } |
height | Height in percentage | 100 |
width | Width in percentage | 100 |
mode | 'preview' has an opacity and 'plain' is normal | 'plain' |
children | JSX Element(s) in the component | |
htmlAttr | All the html attributes are optional |
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 :
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:
{
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:
{ topic : "" }
And user of type:
{
_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:
initialState = {
questionIndex: 0,
answers: [],
isFinish: false,
status: "QUESTION"
}
Mode is the QUIZ mode, it can be:
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"