@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
2 lines (1 loc) • 4.51 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),j=require("react"),y=require("react-redux"),D=require("react-intl"),C=require("./DataContext.js"),m=require("../reducers/data.js"),g=require("semantic-ui-react");class k extends j.Component{constructor(){super(),this.state={showLoading:!1},this.checkLoadingTime=this.checkLoadingTime.bind(this)}componentDidMount(){const{app:t,source:i,store:a,params:e,csv:o,group:d,editing:n,waitForFilters:r=!1}=this.props;t==="csv"?this.props.onSetData({app:t,csv:o,store:a,params:e,group:d}):(this.setState({showLoading:!1}),!r||n?(console.log("loading -----"),this.props.onLoadData({app:t,source:i,store:a,params:e,group:d}),setTimeout(this.checkLoadingTime,100)):console.log("waiting for filters to be set before loading data",t,i,a,e,d)),!n&&r&&(this.fallbackTimeout=setTimeout(()=>{this.dataLoaded||(console.warn("Fallback loading triggered"),this.setState({showLoading:!1}),this.props.onLoadData({app:t,source:i,store:a,params:e,group:d}),setTimeout(this.checkLoadingTime,100))},1e3))}componentWillUnmount(){clearTimeout(this.fallbackTimeout),clearTimeout(this.debounceTimeout)}componentDidUpdate(t,i,a){const{app:e,filters:o,apply:d,source:n,store:r,params:c,csv:u,group:h,autoApply:f,editing:T,lastInitialFilterChange:L,lastUserFilterChange:b}=this.props,S=L!==t.lastInitialFilterChange,x=b!==t.lastUserFilterChange;let p=!1;d!=null&&d!=t.apply&&(p=!0),f!==!1?(o!=t.filters||JSON.stringify(c)!=JSON.stringify(t.params)||e!=t.app||JSON.stringify(t.source)!=JSON.stringify(n)||u!=t.csv)&&(e==="csv"?this.props.onSetData({app:e,csv:u,store:r,params:c,group:h}):(this.setState({showLoading:!0}),T&&this.props.onLoadData({app:e,source:n,store:r,params:c,group:h}),S&&this.props.waitForFilters?(console.log("initial filters has been updated",o,c),clearTimeout(this.debounceTimeout),clearTimeout(this.fallbackTimeout),this.debounceTimeout=setTimeout(()=>{this.dataLoaded=!0,this.setState({showLoading:!1}),console.log("Loading data "+e+" "+n),this.props.onLoadData({app:e,source:n,store:r,params:c,group:h}),setTimeout(this.checkLoadingTime,100)},100)):x?(console.log("filters has been updated",o,t.filters,c,t.params,e,n,r,h),this.setState({showLoading:!1}),console.log("filters has been updated",o),this.props.onLoadData({app:e,source:n,store:r,params:c,group:h}),setTimeout(this.checkLoadingTime,100)):console.log("no changes detected ............"))):p&&(console.log("reloading -----"),this.props.onLoadData({app:e,source:n,store:r,params:c,group:h}),this.setState({showLoading:!1}),setTimeout(this.checkLoadingTime,100))}checkLoadingTime(){const{data:t,loading:i,time:a,error:e}=this.props,o=Date.now()-a;i&&a&&o>1e3?this.setState({showLoading:!0}):i&&setTimeout(this.checkLoadingTime,100)}render(){const{data:t,style:i,loading:a,time:e,error:o,editing:d,isSvg:n}=this.props;if(a&&this.state.showLoading&&!d){const r={width:"100%",height:"100%",background:"transparent",verticalAlign:"middle",overflow:"hidden"},c=Object.assign({},i,{height:"90%",background:"transparent",textAlign:"center",margin:"30px"}),u=s.jsx(g.Segment,{basic:!0,padded:!0,style:c,children:s.jsx(g.Dimmer,{active:!0,inverted:!0,style:{background:"transparent"},children:s.jsx(g.Loader,{size:"medium",style:{background:"transparent"}})})});return n?s.jsx("foreignObject",{style:r,children:s.jsx(g.Container,{style:i,className:"loading",children:u})}):s.jsx(g.Container,{style:i,className:"loading",children:u})}else return o?o?s.jsxs(g.Segment,{color:"red",children:[s.jsx("h1",{children:"500"}),s.jsx("p",{children:"Wasn't able to load data"})]}):s.jsx(g.Container,{children:s.jsxs(g.Segment,{color:"red",children:[s.jsx("h1",{children:"404"}),s.jsx("p",{children:"Can't find this page"})]})}):s.jsx(C.DataContext.Provider,{value:t,children:this.props.children})}}const w=(l,t)=>{const{store:i,group:a,app:e}=t;return{lastUserFilterChange:l.getIn(["data","filters-settings",e,a,"lastUserFilterChange"]),lastInitialFilterChange:l.getIn(["data","filters-settings",e,a,"lastInitialFilterChange"]),data:l.getIn(["data",...i,"data"]),filters:l.getIn(["data","filters",e,a]),autoApply:l.getIn(["data","filters-settings",e,a,"autoApply"]),apply:l.getIn(["data","filters-settings",e,a,"apply"]),error:l.getIn(["data",...i,"error"]),loading:l.getIn(["data",...i,"loading"]),time:l.getIn(["data",...i,"time"])}},I={onSetData:m.setData,onLoadData:m.getData},F=y.connect(w,I)(D.injectIntl(k));exports.default=F;