wbdv_ulysses2
v1.1.0
Published
test for npm package lib
Downloads
5
Readme
what is this
Publish Web BDV Ulysses library and create web bdvs.
installation
npm i wbdv_ulysses
options
Support three arrays of objects with options
toolbarActions [{
id: '',
name: '',
ico: '',
className: '',
iconName: '',
event: '',
}]
pages [{
id: '',
name: '',
url: '',
ComponentName: '',
active: true or false
}]Usage
Events Handlers.
TOOLBAR ACTIONS HEADER.
eventsHandler = i => {
if (eventData().CLOSEWINDOW === i.event) {
PostCloseEvent()
} else if (eventData().CLOSEWINDOWANDREFRESH === i.event) {
PostCloseAndRefreshEvent()
}
else if (eventData().FORWARD === i.event) {
this.setState({ componentName: "RelatedFiles" })
} else if (eventData().BACK === i.event) {
this.setState({ componentName: "ActivityDescription" })
}
}PAGES AREA.
pagesHandler = i => {
this.setState({ componentName: i.ComponentName })
}MAIN AREA ACTIONS.
pagesActionsHandler = i => {
}import files to Components
import Index from 'wbdv_ulysses/lib/Iframe'PostCloseEvent (close wbdv from header close button)
import { PostCloseEvent, PostCloseAndRefreshEvent } from 'wbdv_ulysses/src/event';PostCloseAndRefreshEvent ( save and close wbdv refresh workplace task view)
import { toolbarActions } from '../components/utils/dataToolbar';import fetch data to use ulysses services
import FetchData from '../components/Utils/FetchData';import event data to handle header actions events
import eventData from '../components/Utils/toolbarEvents';insert to component render:
<Index toolbarActions={toolbarActions}
pages={pages}
pageActions={this.state.actionsta}
onSelectEvent={this.eventsHandler}
onSelectPage={this.pagesHandler}
onSelectPageActions={this.pagesActionsHandler} >
</Index >Add to index.html
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>
<body class="skin-orange-light">
<div id="root"></div>
</body>