Capsule-mobiteach-components NPM

Capsule mobiteach components

Useful react components to use in Mobiteach capsules

Capsule mobiteach components

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)

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"