capsule-mobiteach-components
TypeScript icon, indicating that this package has built-in type declarations

1.1.12 • Public • Published

npm version

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"

Readme

Keywords

none

Package Sidebar

Install

npm i capsule-mobiteach-components

Weekly Downloads

1

Version

1.1.12

License

ISC

Unpacked Size

609 kB

Total Files

95

Last publish

Collaborators

  • jimmy_mobiteach