@hopara/react 0.3.20 → 0.3.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -9
- package/build/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -33,7 +33,7 @@ The component requires a valid `accessToken`. Use the `Auth API` to fetch it, as
|
|
|
33
33
|
```jsx
|
|
34
34
|
<div className="HoparaEmbedded">
|
|
35
35
|
<Hopara
|
|
36
|
-
|
|
36
|
+
visualization="your-visualization-id"
|
|
37
37
|
accessToken="your-access-token"
|
|
38
38
|
/>
|
|
39
39
|
</div>
|
|
@@ -44,8 +44,8 @@ You can further customize the integration by using the component props:
|
|
|
44
44
|
|
|
45
45
|
```typescript
|
|
46
46
|
type HoparaProps = {
|
|
47
|
-
// The
|
|
48
|
-
|
|
47
|
+
// The visualization id
|
|
48
|
+
visualization: string
|
|
49
49
|
|
|
50
50
|
// The accessToken fetched from the auth API
|
|
51
51
|
accessToken: string
|
|
@@ -70,6 +70,9 @@ type HoparaProps = {
|
|
|
70
70
|
|
|
71
71
|
// The custom controller to be used on Hopara Visualization
|
|
72
72
|
controller: HoparaController | undefined
|
|
73
|
+
|
|
74
|
+
// The mapStyle that should be displayed by default. See the MapStyle section to verify the available value options
|
|
75
|
+
mapStyle: string | undefined
|
|
73
76
|
}
|
|
74
77
|
```
|
|
75
78
|
|
|
@@ -92,7 +95,7 @@ setInterval(() => {
|
|
|
92
95
|
|
|
93
96
|
<div className="HoparaEmbedded">
|
|
94
97
|
<Hopara
|
|
95
|
-
|
|
98
|
+
visualization="your-visualization-id"
|
|
96
99
|
accessToken="your-access-token"
|
|
97
100
|
controller={customController}
|
|
98
101
|
/>
|
|
@@ -100,7 +103,7 @@ setInterval(() => {
|
|
|
100
103
|
```
|
|
101
104
|
|
|
102
105
|
### Data Loader
|
|
103
|
-
By default Hopara will load the same visualization and data as seen as in hopara.app. You can use the data loader prop to provide a custom way to load the data.
|
|
106
|
+
By default Hopara will load the same visualization and data as seen as in [hopara.app](https://hopara.app). You can use the data loader prop to provide a custom way to load the data.
|
|
104
107
|
|
|
105
108
|
```typescript
|
|
106
109
|
type DataLoader = {
|
|
@@ -151,14 +154,14 @@ const dataLoaders = [{
|
|
|
151
154
|
...
|
|
152
155
|
<div className="HoparaEmbedded">
|
|
153
156
|
<Hopara
|
|
154
|
-
|
|
157
|
+
visualization="your-visualization-id"
|
|
155
158
|
accessToken="your-access-token"
|
|
156
159
|
dataLoaders={dataLoaders}
|
|
157
160
|
/>
|
|
158
161
|
```
|
|
159
162
|
|
|
160
163
|
### Data Updater
|
|
161
|
-
By default Hopara will update the visualization in the same database configured in hopara.app. You can use the data updater prop to provide a custom way to update the data.
|
|
164
|
+
By default Hopara will update the visualization in the same database configured in [hopara.app](https://hopara.app). You can use the data updater prop to provide a custom way to update the data.
|
|
162
165
|
|
|
163
166
|
The data updater is called when placing objetcs in a visualization and when resizing images.
|
|
164
167
|
|
|
@@ -189,7 +192,7 @@ const dataUpdaters = [{
|
|
|
189
192
|
|
|
190
193
|
<div className="HoparaEmbedded">
|
|
191
194
|
<Hopara
|
|
192
|
-
|
|
195
|
+
visualization="your-visualization-id"
|
|
193
196
|
accessToken="your-access-token"
|
|
194
197
|
dataUpdaters={dataUpdaters}
|
|
195
198
|
/>
|
|
@@ -219,4 +222,18 @@ type InitialRow = {
|
|
|
219
222
|
entityId: string
|
|
220
223
|
rowId: string
|
|
221
224
|
}
|
|
222
|
-
```
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### Map Style
|
|
228
|
+
The map style to be used by default (Geographic Visualizations only).
|
|
229
|
+
|
|
230
|
+
The available options are `'none'`, `'building'`, `'dark'`, `'light'`, `'light-street'`, `'navigation'`, `'satellite'`. The default behavior is to use the style defined in the visualization specification
|
|
231
|
+
|
|
232
|
+
```jsx
|
|
233
|
+
Hopara.init({
|
|
234
|
+
visualization: 'my-hopara-viz',
|
|
235
|
+
accessToken: 'my-hopara-token',
|
|
236
|
+
targetElementId: 'my-target-element',
|
|
237
|
+
mapStyle: 'building',
|
|
238
|
+
})
|
|
239
|
+
```
|
package/build/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,a){for(var i in a)e[i]=a[i]})(exports,function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter})}};__webpack_require__.r=function(exports){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(exports,"__esModule",{value:true})};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if(mode&4&&typeof value==="object"&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,"default",{enumerable:true,value});if(mode&2&&typeof value!="string")for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=4)}([function(module,exports){module.exports=require("lodash/fp")},function(module,exports){module.exports=require("react")},function(module){module.exports=JSON.parse('{"name":"@hopara/iframe","version":"0.3.20","main":"build/client.js","scripts":{"start":"ESLINT_NO_DEV_ERRORS=true react-app-rewired start","build":"react-app-rewired build","eject":"react-app-rewired eject","lint":"eslint --fix \'src/**/*.{ts,js,tsx,jsx}\' && tsc --noEmit","check-types":"tsc --noEmit"},"eslintConfig":{"extends":"react-app","overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":["defaults, not ie 11"],"devDependencies":{"@babel/register":"^7.15.3","@hopara/components":"^0.3.20","@hopara/design-system":"^0.3.20","@hopara/system-test":"^0.3.20","babel-loader":"8.1.0","customize-cra":"^1.0.0","react":"^18.2.0","react-app-rewired":"^2.2.1","react-dom":"^18.2.0","react-router-dom":"^6.10.0","typescript":"^4.5.2"}}')},function(module,exports){module.exports=require("react/jsx-runtime")},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__.d(__webpack_exports__,"Hopara",(function(){return View_Hopara}));__webpack_require__.d(__webpack_exports__,"HoparaController",(function(){return HoparaController}));__webpack_require__.d(__webpack_exports__,"DataLoader",(function(){return DataLoader}));__webpack_require__.d(__webpack_exports__,"DataUpdater",(function(){return DataUpdater}));var external_react_=__webpack_require__(1);var external_react_default=__webpack_require__.n(external_react_);let EventType;(function(EventType){EventType["INIT"]="init";EventType["READY"]="ready";EventType["UPDATE"]="update";EventType["LOAD_DATA"]="loadData";EventType["LOAD_DATA_RESPONSE"]="loadDataResponse";EventType["UPDATE_DATA"]="updateData";EventType["UPDATE_DATA_RESPONSE"]="updateDataResponse";EventType["REFRESH"]="refresh"})(EventType||(EventType={}));const HOPARA_EVENT_TYPE="__hopara__eventType__";const isReadyEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.READY;const isLoadDataEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.LOAD_DATA;const isUpdateDataEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.UPDATE_DATA;class EventEmitter_EventEmitter{static sendMessage(data,targetWindow){const target=targetWindow||window.parent||window.top;if(!window||window===target)return;target.postMessage(data,"*")}static ready(){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.READY})}static init(config,targetWindow){this.sendMessage(Object.assign(config,{[HOPARA_EVENT_TYPE]:EventType.INIT}),targetWindow)}static loadDataRequest(dataLoader,filterSet){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.LOAD_DATA,data:{name:dataLoader.name,source:dataLoader.source},filterSet})}static loadDataResponse(config,dataLoader,rows,targetWindow){this.sendMessage(Object.assign(config,{[HOPARA_EVENT_TYPE]:EventType.LOAD_DATA_RESPONSE},{data:{name:dataLoader.name,source:dataLoader.source},rows}),targetWindow)}static updateDataRequest(dataUpdater,newRow,oldRow,diff){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.UPDATE_DATA,data:{name:dataUpdater.name,source:dataUpdater.source},newRow,oldRow,diff})}static refresh(config,targetWindow){this.sendMessage({...config,[HOPARA_EVENT_TYPE]:EventType.REFRESH},targetWindow)}static update(config,targetWindow){this.sendMessage({...config,[HOPARA_EVENT_TYPE]:EventType.UPDATE},targetWindow)}}class EventReceiver_EventReceiver{static isHoparaMessage(event){return event.data[HOPARA_EVENT_TYPE]!==undefined}static loadDataResponse(dataLoader){return new Promise((resolve=>{const callback=event=>{if(event.data[HOPARA_EVENT_TYPE]===EventType.LOAD_DATA_RESPONSE&&event.data.data.name===dataLoader.name&&event.data.data.source===dataLoader.source){window.removeEventListener("message",callback,false);resolve(event.data.rows)}};window.addEventListener("message",callback,false)}))}}var iframe_package=__webpack_require__(2);const embeddedEnvUrl={test:"https://statics.test.hopara.app/embedded",production:"https://statics.hopara.app/embedded"};class client_Hopara{constructor(config){this.config=void 0;this.iframe=void 0;this.doInit=()=>{const targetElement=this.config.targetElementId?document.getElementById(this.config.targetElementId):this.config.targetElement;if(!targetElement){console&&console.warn("Hopara: targetElement not found");return this}const iframe=this.createIframe();targetElement.appendChild(iframe);this.iframe=iframe;this.createListeners();return this};this.config=config}getIframeSrc(){var _embeddedEnvUrl,_this$config$env;const envUrl=(_embeddedEnvUrl=embeddedEnvUrl[(_this$config$env=this.config.env)!==null&&_this$config$env!==void 0?_this$config$env:"production"])!==null&&_embeddedEnvUrl!==void 0?_embeddedEnvUrl:embeddedEnvUrl.production;const url=this.config.embeddedUrl?this.config.embeddedUrl:`${envUrl}/${this.config.version?this.config.version:"latest"}/index.html`;return`${url}${this.config.debug?"?debug=true":""}`}getIframeStyle(){return"background-color: transparent; border: 0px none transparent; padding: 0px; overflow: hidden; width: 100%; height: 100%;"}createIframe(){const iframe=document.createElement("iframe");iframe.src=this.getIframeSrc();iframe.style=this.getIframeStyle();return iframe}getCleanConfig(){var _this$config$visualiz,_this$config$dataLoad,_this$config$dataUpda;return{accessToken:this.config.accessToken,app:this.config.app,visualization:(_this$config$visualiz=this.config.visualization)!==null&&_this$config$visualiz!==void 0?_this$config$visualiz:this.config.app,env:this.config.env,tenant:this.config.tenant,initialPosition:this.config.initialPosition,initialRow:this.config.initialRow,dataLoaders:(_this$config$dataLoad=this.config.dataLoaders)===null||_this$config$dataLoad===void 0?void 0:_this$config$dataLoad.map((dataLoader=>({name:dataLoader.name,source:dataLoader.source}))),dataUpdaters:(_this$config$dataUpda=this.config.dataUpdaters)===null||_this$config$dataUpda===void 0?void 0:_this$config$dataUpda.map((dataUpdater=>({name:dataUpdater.name,source:dataUpdater.source}))),controller:true,darkMode:this.config.darkMode,toolbar:this.config.toolbar}}createListeners(){window.addEventListener("message",(event=>{const targetWindow=event.source;if(!targetWindow&&EventReceiver_EventReceiver.isHoparaMessage(event)){throw new Error("Hopara: targetWindow is not available")}if(isReadyEvent(event)){return EventEmitter_EventEmitter.init(this.getCleanConfig(),targetWindow)}if(isLoadDataEvent(event)){var _this$config$dataLoad2;const dataLoader=(_this$config$dataLoad2=this.config.dataLoaders)===null||_this$config$dataLoad2===void 0?void 0:_this$config$dataLoad2.find((dataLoader=>dataLoader.name===event.data.data.name&&dataLoader.source===event.data.data.source));if(dataLoader)return dataLoader.loader(event.data.filterSet).then((data=>EventEmitter_EventEmitter.loadDataResponse(this.getCleanConfig(),dataLoader,data,targetWindow)))}if(isUpdateDataEvent(event)){var _this$config$dataUpda2;const dataUpdater=(_this$config$dataUpda2=this.config.dataUpdaters)===null||_this$config$dataUpda2===void 0?void 0:_this$config$dataUpda2.find((dataUpdater=>dataUpdater.name===event.data.data.name&&dataUpdater.source===event.data.data.source));if(dataUpdater)return dataUpdater.updater(event.data.newRow,event.data.oldRow,event.data.diff)}}))}refresh(){if(!this.iframe)throw new Error("Hopara: iframe is not available");if(this.iframe.contentWindow){EventEmitter_EventEmitter.refresh(this.getCleanConfig(),this.iframe.contentWindow)}}update(config){var _this$iframe;this.config=Object.assign({},this.config,config);if((_this$iframe=this.iframe)!==null&&_this$iframe!==void 0&&_this$iframe.contentWindow){EventEmitter_EventEmitter.update(this.getCleanConfig(),this.iframe.contentWindow)}}static init(config){if(!config&&console){console.warn("Hopara: init config not present");return}if((!window||!window.document)&&console){console.warn("Hopara: window is not available");return}const client=new client_Hopara(config);return client.doInit()}static moduleVersion(){return this._version}moduleVersion(){return client_Hopara._version}}client_Hopara._version=iframe_package.version;var client=client_Hopara;var fp_=__webpack_require__(0);var jsx_runtime_=__webpack_require__(3);class View_Hopara extends external_react_default.a.Component{constructor(){super(...arguments);this.wrapperRef=external_react_default.a.createRef();this.hoparaInstance=void 0}componentDidMount(){var _this$hoparaInstance;const hoparaInstance=client.init({...this.props,targetElement:this.wrapperRef.current});if(hoparaInstance)this.hoparaInstance=hoparaInstance;if(this.props.controller)this.props.controller.setRefreshSignal((_this$hoparaInstance=this.hoparaInstance)===null||_this$hoparaInstance===void 0?void 0:_this$hoparaInstance.refresh.bind(this.hoparaInstance))}shouldComponentUpdate(nextProps){if(!Object(fp_["isEqual"])(this.props.env,nextProps.env))return true;if(!Object(fp_["isEqual"])(this.props.visualization,nextProps.visualization))return true;if(!Object(fp_["isEqual"])(this.props.accessToken,nextProps.accessToken))return true;if(!Object(fp_["isEqual"])(this.props.initialPosition,nextProps.initialPosition))return true;if(!Object(fp_["isEqual"])(this.props.initialRow,nextProps.initialRow))return true;if(!Object(fp_["isEqual"])(this.props.controller,nextProps.controller))return true;if(!Object(fp_["isEqual"])(this.props.darkMode,nextProps.darkMode))return true;if(!Object(fp_["isEqual"])(this.props.toolbar,nextProps.toolbar))return true;return false}componentDidUpdate(){var _this$hoparaInstance2;if(this.hoparaInstance)this.hoparaInstance.update(this.props);if(this.props.controller)this.props.controller.setRefreshSignal((_this$hoparaInstance2=this.hoparaInstance)===null||_this$hoparaInstance2===void 0?void 0:_this$hoparaInstance2.refresh.bind(this.hoparaInstance))}render(){return Object(jsx_runtime_["jsx"])("div",{ref:this.wrapperRef,"data-hopara-embedded":true,style:{width:"100%",height:"100%"}})}}class HoparaController{constructor(){this.refreshSignal=void 0}setRefreshSignal(refreshSignal){this.refreshSignal=refreshSignal}refresh(){if(this.refreshSignal)this.refreshSignal()}}class DataLoader{constructor(props){this.name=void 0;this.source=void 0;this.loader=void 0;Object.assign(this,props)}isFromQuery(query){return this.name.toLowerCase()===query.name.toLowerCase()&&this.source.toLowerCase()===query.dataSource.toLowerCase()}}class DataLoaders extends Array{getLoader(query){if(!query)return undefined;return this.find((loader=>loader.isFromQuery(query)))}}class DataUpdater{constructor(props){this.name=void 0;this.source=void 0;this.updater=void 0;Object.assign(this,props)}isFromQuery(query){return this.name.toLowerCase()===query.name.toLowerCase()&&this.source.toLowerCase()===query.dataSource.toLowerCase()}}class DataUpdaters extends Array{getUpdater(query){if(!query)return undefined;return this.find((loader=>loader.isFromQuery(query)))}}}]));
|
|
1
|
+
(function(e,a){for(var i in a)e[i]=a[i]})(exports,function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter})}};__webpack_require__.r=function(exports){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(exports,"__esModule",{value:true})};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if(mode&4&&typeof value==="object"&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,"default",{enumerable:true,value});if(mode&2&&typeof value!="string")for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=4)}([function(module,exports){module.exports=require("lodash/fp")},function(module,exports){module.exports=require("react")},function(module){module.exports=JSON.parse('{"name":"@hopara/iframe","version":"0.3.22","main":"build/client.js","scripts":{"start":"ESLINT_NO_DEV_ERRORS=true react-app-rewired start","build":"react-app-rewired build","eject":"react-app-rewired eject","lint":"eslint --fix \'src/**/*.{ts,js,tsx,jsx}\' && tsc --noEmit","check-types":"tsc --noEmit"},"eslintConfig":{"extends":"react-app","overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":["defaults, not ie 11"],"devDependencies":{"@babel/register":"^7.15.3","@hopara/components":"^0.3.22","@hopara/design-system":"^0.3.22","@hopara/system-test":"^0.3.22","babel-loader":"8.1.0","customize-cra":"^1.0.0","react":"^18.2.0","react-app-rewired":"^2.2.1","react-dom":"^18.2.0","react-router-dom":"^6.10.0","typescript":"^4.5.2"}}')},function(module,exports){module.exports=require("react/jsx-runtime")},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__.d(__webpack_exports__,"Hopara",(function(){return View_Hopara}));__webpack_require__.d(__webpack_exports__,"HoparaController",(function(){return HoparaController}));__webpack_require__.d(__webpack_exports__,"DataLoader",(function(){return DataLoader}));__webpack_require__.d(__webpack_exports__,"DataUpdater",(function(){return DataUpdater}));var external_react_=__webpack_require__(1);var external_react_default=__webpack_require__.n(external_react_);let EventType;(function(EventType){EventType["INIT"]="init";EventType["READY"]="ready";EventType["UPDATE"]="update";EventType["LOAD_DATA"]="loadData";EventType["LOAD_DATA_RESPONSE"]="loadDataResponse";EventType["UPDATE_DATA"]="updateData";EventType["UPDATE_DATA_RESPONSE"]="updateDataResponse";EventType["REFRESH"]="refresh"})(EventType||(EventType={}));const HOPARA_EVENT_TYPE="__hopara__eventType__";const isReadyEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.READY;const isLoadDataEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.LOAD_DATA;const isUpdateDataEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.UPDATE_DATA;class EventEmitter_EventEmitter{static sendMessage(data,targetWindow){const target=targetWindow||window.parent||window.top;if(!window||window===target)return;target.postMessage(data,"*")}static ready(){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.READY})}static init(config,targetWindow){this.sendMessage(Object.assign(config,{[HOPARA_EVENT_TYPE]:EventType.INIT}),targetWindow)}static loadDataRequest(dataLoader,filterSet){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.LOAD_DATA,data:{name:dataLoader.name,source:dataLoader.source},filterSet})}static loadDataResponse(config,dataLoader,rows,targetWindow){this.sendMessage(Object.assign(config,{[HOPARA_EVENT_TYPE]:EventType.LOAD_DATA_RESPONSE},{data:{name:dataLoader.name,source:dataLoader.source},rows}),targetWindow)}static updateDataRequest(dataUpdater,newRow,oldRow,diff){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.UPDATE_DATA,data:{name:dataUpdater.name,source:dataUpdater.source},newRow,oldRow,diff})}static refresh(config,targetWindow){this.sendMessage({...config,[HOPARA_EVENT_TYPE]:EventType.REFRESH},targetWindow)}static update(config,targetWindow){this.sendMessage({...config,[HOPARA_EVENT_TYPE]:EventType.UPDATE},targetWindow)}}class EventReceiver_EventReceiver{static isHoparaMessage(event){return event.data[HOPARA_EVENT_TYPE]!==undefined}static loadDataResponse(dataLoader){return new Promise((resolve=>{const callback=event=>{if(event.data[HOPARA_EVENT_TYPE]===EventType.LOAD_DATA_RESPONSE&&event.data.data.name===dataLoader.name&&event.data.data.source===dataLoader.source){window.removeEventListener("message",callback,false);resolve(event.data.rows)}};window.addEventListener("message",callback,false)}))}}var iframe_package=__webpack_require__(2);const embeddedEnvUrl={test:"https://statics.test.hopara.app/embedded",production:"https://statics.hopara.app/embedded"};class client_Hopara{constructor(config){this.config=void 0;this.iframe=void 0;this.doInit=()=>{const targetElement=this.config.targetElementId?document.getElementById(this.config.targetElementId):this.config.targetElement;if(!targetElement){console&&console.warn("Hopara: targetElement not found");return this}const iframe=this.createIframe();targetElement.appendChild(iframe);this.iframe=iframe;this.createListeners();return this};this.config=config}getIframeSrc(){var _embeddedEnvUrl,_this$config$env;const envUrl=(_embeddedEnvUrl=embeddedEnvUrl[(_this$config$env=this.config.env)!==null&&_this$config$env!==void 0?_this$config$env:"production"])!==null&&_embeddedEnvUrl!==void 0?_embeddedEnvUrl:embeddedEnvUrl.production;const url=this.config.embeddedUrl?this.config.embeddedUrl:`${envUrl}/${this.config.version?this.config.version:"latest"}/index.html`;return`${url}${this.config.debug?"?debug=true":""}`}getIframeStyle(){return"background-color: transparent; border: 0px none transparent; padding: 0px; overflow: hidden; width: 100%; height: 100%;"}createIframe(){const iframe=document.createElement("iframe");iframe.src=this.getIframeSrc();iframe.style=this.getIframeStyle();return iframe}getCleanConfig(){var _this$config$visualiz,_this$config$dataLoad,_this$config$dataUpda;return{accessToken:this.config.accessToken,app:this.config.app,visualization:(_this$config$visualiz=this.config.visualization)!==null&&_this$config$visualiz!==void 0?_this$config$visualiz:this.config.app,env:this.config.env,tenant:this.config.tenant,initialPosition:this.config.initialPosition,initialRow:this.config.initialRow,dataLoaders:(_this$config$dataLoad=this.config.dataLoaders)===null||_this$config$dataLoad===void 0?void 0:_this$config$dataLoad.map((dataLoader=>({name:dataLoader.name,source:dataLoader.source}))),dataUpdaters:(_this$config$dataUpda=this.config.dataUpdaters)===null||_this$config$dataUpda===void 0?void 0:_this$config$dataUpda.map((dataUpdater=>({name:dataUpdater.name,source:dataUpdater.source}))),controller:true,darkMode:this.config.darkMode,toolbar:this.config.toolbar,mapStyle:this.config.mapStyle}}createListeners(){window.addEventListener("message",(event=>{const targetWindow=event.source;if(!targetWindow&&EventReceiver_EventReceiver.isHoparaMessage(event)){throw new Error("Hopara: targetWindow is not available")}if(isReadyEvent(event)){return EventEmitter_EventEmitter.init(this.getCleanConfig(),targetWindow)}if(isLoadDataEvent(event)){var _this$config$dataLoad2;const dataLoader=(_this$config$dataLoad2=this.config.dataLoaders)===null||_this$config$dataLoad2===void 0?void 0:_this$config$dataLoad2.find((dataLoader=>dataLoader.name===event.data.data.name&&dataLoader.source===event.data.data.source));if(dataLoader)return dataLoader.loader(event.data.filterSet).then((data=>EventEmitter_EventEmitter.loadDataResponse(this.getCleanConfig(),dataLoader,data,targetWindow)))}if(isUpdateDataEvent(event)){var _this$config$dataUpda2;const dataUpdater=(_this$config$dataUpda2=this.config.dataUpdaters)===null||_this$config$dataUpda2===void 0?void 0:_this$config$dataUpda2.find((dataUpdater=>dataUpdater.name===event.data.data.name&&dataUpdater.source===event.data.data.source));if(dataUpdater)return dataUpdater.updater(event.data.newRow,event.data.oldRow,event.data.diff)}}))}refresh(){if(!this.iframe)throw new Error("Hopara: iframe is not available");if(this.iframe.contentWindow){EventEmitter_EventEmitter.refresh(this.getCleanConfig(),this.iframe.contentWindow)}}update(config){var _this$iframe;this.config=Object.assign({},this.config,config);if((_this$iframe=this.iframe)!==null&&_this$iframe!==void 0&&_this$iframe.contentWindow){EventEmitter_EventEmitter.update(this.getCleanConfig(),this.iframe.contentWindow)}}static init(config){if(!config&&console){console.warn("Hopara: init config not present");return}if((!window||!window.document)&&console){console.warn("Hopara: window is not available");return}const client=new client_Hopara(config);return client.doInit()}static moduleVersion(){return this._version}moduleVersion(){return client_Hopara._version}}client_Hopara._version=iframe_package.version;var client=client_Hopara;var fp_=__webpack_require__(0);var jsx_runtime_=__webpack_require__(3);class View_Hopara extends external_react_default.a.Component{constructor(){super(...arguments);this.wrapperRef=external_react_default.a.createRef();this.hoparaInstance=void 0}componentDidMount(){var _this$hoparaInstance;const hoparaInstance=client.init({...this.props,targetElement:this.wrapperRef.current});if(hoparaInstance)this.hoparaInstance=hoparaInstance;if(this.props.controller)this.props.controller.setRefreshSignal((_this$hoparaInstance=this.hoparaInstance)===null||_this$hoparaInstance===void 0?void 0:_this$hoparaInstance.refresh.bind(this.hoparaInstance))}shouldComponentUpdate(nextProps){if(!Object(fp_["isEqual"])(this.props.env,nextProps.env))return true;if(!Object(fp_["isEqual"])(this.props.visualization,nextProps.visualization))return true;if(!Object(fp_["isEqual"])(this.props.accessToken,nextProps.accessToken))return true;if(!Object(fp_["isEqual"])(this.props.initialPosition,nextProps.initialPosition))return true;if(!Object(fp_["isEqual"])(this.props.initialRow,nextProps.initialRow))return true;if(!Object(fp_["isEqual"])(this.props.controller,nextProps.controller))return true;if(!Object(fp_["isEqual"])(this.props.darkMode,nextProps.darkMode))return true;if(!Object(fp_["isEqual"])(this.props.toolbar,nextProps.toolbar))return true;return false}componentDidUpdate(){var _this$hoparaInstance2;if(this.hoparaInstance)this.hoparaInstance.update(this.props);if(this.props.controller)this.props.controller.setRefreshSignal((_this$hoparaInstance2=this.hoparaInstance)===null||_this$hoparaInstance2===void 0?void 0:_this$hoparaInstance2.refresh.bind(this.hoparaInstance))}render(){return Object(jsx_runtime_["jsx"])("div",{ref:this.wrapperRef,"data-hopara-embedded":true,style:{width:"100%",height:"100%"}})}}class HoparaController{constructor(){this.refreshSignal=void 0}setRefreshSignal(refreshSignal){this.refreshSignal=refreshSignal}refresh(){if(this.refreshSignal)this.refreshSignal()}}class DataLoader{constructor(props){this.name=void 0;this.source=void 0;this.loader=void 0;Object.assign(this,props)}isFromQuery(query){return this.name.toLowerCase()===query.name.toLowerCase()&&this.source.toLowerCase()===query.dataSource.toLowerCase()}}class DataLoaders extends Array{getLoader(query){if(!query)return undefined;return this.find((loader=>loader.isFromQuery(query)))}}class DataUpdater{constructor(props){this.name=void 0;this.source=void 0;this.updater=void 0;Object.assign(this,props)}isFromQuery(query){return this.name.toLowerCase()===query.name.toLowerCase()&&this.source.toLowerCase()===query.dataSource.toLowerCase()}}class DataUpdaters extends Array{getUpdater(query){if(!query)return undefined;return this.find((loader=>loader.isFromQuery(query)))}}}]));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hopara/react",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.22",
|
|
4
4
|
"description": "Hopara React Component",
|
|
5
5
|
"author": "Hopara",
|
|
6
6
|
"homepage": "https://hopara.io",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@babel/core": "^7.18.9",
|
|
30
30
|
"@babel/preset-env": "^7.16.4",
|
|
31
|
-
"@hopara/iframe": "^0.3.
|
|
31
|
+
"@hopara/iframe": "^0.3.22",
|
|
32
32
|
"babel-loader": "8.1.0",
|
|
33
33
|
"customize-cra": "^1.0.0",
|
|
34
34
|
"lodash": "~4.17.21",
|