@oneblink/apps-react 5.11.0-beta.3 → 5.11.0-beta.5
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/dist/components/ArcGISWebMap.js +10 -1
- package/dist/components/ArcGISWebMap.js.map +1 -1
- package/dist/form-elements/FormElementArcGISWebMap.js +3 -1
- package/dist/form-elements/FormElementArcGISWebMap.js.map +1 -1
- package/dist/styles.css +43 -0
- package/dist/styles.scss +1 -0
- package/package.json +1 -1
@@ -7,10 +7,12 @@ import Zoom from '@arcgis/core/widgets/Zoom';
|
|
7
7
|
import LayerList from '@arcgis/core/widgets/LayerList';
|
8
8
|
import Expand from '@arcgis/core/widgets/Expand';
|
9
9
|
import BaseMapGallery from '@arcgis/core/widgets/BasemapGallery';
|
10
|
+
import OnLoading from '../components/renderer/OnLoading';
|
10
11
|
import '../styles/arcgis-external.css';
|
11
12
|
function FormElementArcGISWebMap({ element }) {
|
12
13
|
const [loadError, setLoadError] = React.useState();
|
13
14
|
const ref = React.useRef(null);
|
15
|
+
const [isLoading, setIsLoading] = React.useState(true);
|
14
16
|
React.useEffect(() => {
|
15
17
|
let view;
|
16
18
|
const loadMap = async () => {
|
@@ -56,10 +58,15 @@ function FormElementArcGISWebMap({ element }) {
|
|
56
58
|
content: baseMapGallery,
|
57
59
|
mode: 'floating',
|
58
60
|
}), 'bottom-right');
|
61
|
+
// once the view has loaded
|
62
|
+
view.when(() => {
|
63
|
+
setIsLoading(false);
|
64
|
+
});
|
59
65
|
}
|
60
66
|
catch (e) {
|
61
67
|
console.warn('Error while trying to load arcgis web map ', e);
|
62
68
|
setLoadError(e);
|
69
|
+
setIsLoading(false);
|
63
70
|
}
|
64
71
|
};
|
65
72
|
loadMap();
|
@@ -76,7 +83,9 @@ function FormElementArcGISWebMap({ element }) {
|
|
76
83
|
React.createElement("h4", { className: "title is-4" }, "We were unable to display your web map"),
|
77
84
|
React.createElement("p", null, loadError.message))));
|
78
85
|
}
|
79
|
-
return React.createElement(
|
86
|
+
return (React.createElement(React.Fragment, null,
|
87
|
+
isLoading && React.createElement(OnLoading, null),
|
88
|
+
React.createElement("div", { className: "arcgis-web-map", ref: ref })));
|
80
89
|
}
|
81
90
|
export default React.memo(FormElementArcGISWebMap);
|
82
91
|
//# sourceMappingURL=ArcGISWebMap.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ArcGISWebMap.js","sourceRoot":"","sources":["../../src/components/ArcGISWebMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,OAAO,MAAM,4BAA4B,CAAA;AAChD,OAAO,MAAM,MAAM,qBAAqB,CAAA;AACxC,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAC5C,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAChD,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAC5C,OAAO,SAAS,MAAM,gCAAgC,CAAA;AACtD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAChD,OAAO,cAAc,MAAM,qCAAqC,CAAA;AAChE,OAAO,+BAA+B,CAAA;AAMtC,SAAS,uBAAuB,CAAC,EAAE,OAAO,EAAS;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAS,CAAA;IACzD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAA;
|
1
|
+
{"version":3,"file":"ArcGISWebMap.js","sourceRoot":"","sources":["../../src/components/ArcGISWebMap.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport MapView from '@arcgis/core/views/MapView'\nimport WebMap from '@arcgis/core/WebMap'\nimport Home from '@arcgis/core/widgets/Home'\nimport Search from '@arcgis/core/widgets/Search'\nimport Zoom from '@arcgis/core/widgets/Zoom'\nimport LayerList from '@arcgis/core/widgets/LayerList'\nimport Expand from '@arcgis/core/widgets/Expand'\nimport BaseMapGallery from '@arcgis/core/widgets/BasemapGallery'\nimport OnLoading from '../components/renderer/OnLoading'\nimport '../styles/arcgis-external.css'\n\ntype Props = {\n element: FormTypes.ArcGISWebMapElement\n}\n\nfunction FormElementArcGISWebMap({ element }: Props) {\n const [loadError, setLoadError] = React.useState<Error>()\n const ref = React.useRef<HTMLDivElement | null>(null)\n const [isLoading, setIsLoading] = React.useState<boolean>(true)\n\n React.useEffect(() => {\n let view: MapView\n\n const loadMap = async () => {\n try {\n const map = new WebMap({\n portalItem: {\n id: element.webMapId,\n },\n })\n await map.load()\n\n view = new MapView({\n map: map,\n container: ref.current || undefined,\n })\n\n // remove default widgets\n const components = view.ui.getComponents()\n for (const component of components) {\n view.ui.remove(component)\n }\n\n view.ui.add(\n new Search({\n view,\n }),\n 'top-left',\n )\n view.ui.add(\n new Home({\n view,\n }),\n 'top-left',\n )\n view.ui.add(\n new Zoom({\n view,\n }),\n 'bottom-left',\n )\n\n const layerList = new LayerList({\n view,\n })\n\n view.ui.add(\n new Expand({\n expandIcon: 'layers',\n view,\n content: layerList,\n expanded: element.showLayerPanel,\n mode: 'floating',\n }),\n 'top-right',\n )\n\n const baseMapGallery = new BaseMapGallery({ view })\n\n view.ui.add(\n new Expand({\n expandIcon: 'basemap',\n view,\n content: baseMapGallery,\n mode: 'floating',\n }),\n 'bottom-right',\n )\n\n // once the view has loaded\n view.when(() => {\n setIsLoading(false)\n })\n } catch (e) {\n console.warn('Error while trying to load arcgis web map ', e)\n setLoadError(e as Error)\n setIsLoading(false)\n }\n }\n\n loadMap()\n\n return () => {\n if (view) {\n view.destroy()\n }\n }\n }, [element])\n\n if (loadError) {\n return (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <i className=\"material-icons icon-large has-margin-bottom-6 has-text-warning\">\n error\n </i>\n <h4 className=\"title is-4\">We were unable to display your web map</h4>\n <p>{loadError.message}</p>\n </div>\n </figure>\n )\n }\n\n return (\n <>\n {isLoading && <OnLoading />}\n <div className=\"arcgis-web-map\" ref={ref} />\n </>\n )\n}\n\nexport default React.memo(FormElementArcGISWebMap)\n"]}
|
@@ -13,7 +13,9 @@ function FormElementArcGISWebMap({ id, element }) {
|
|
13
13
|
return (React.createElement("div", { className: "cypress-arcgis-web-map" },
|
14
14
|
React.createElement(FormElementLabelContainer, { className: "ob-arcgis-web-map", id: id, element: element, required: false }, isOffline ? (React.createElement("figure", { className: "ob-figure" },
|
15
15
|
React.createElement("div", { className: "figure-content has-text-centered" },
|
16
|
-
React.createElement("h4", { className: "title is-4" }, "This Web Map is not available as you are currently offline")))) : (React.createElement(Suspense, { fallback: React.createElement(
|
16
|
+
React.createElement("h4", { className: "title is-4" }, "This Web Map is not available as you are currently offline")))) : (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null,
|
17
|
+
React.createElement(OnLoading, null),
|
18
|
+
React.createElement("div", { className: "arcgis-web-map" })) },
|
17
19
|
React.createElement(ArcGISWebMap, { element: element }))))));
|
18
20
|
}
|
19
21
|
export default React.memo(FormElementArcGISWebMap);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormElementArcGISWebMap.js","sourceRoot":"","sources":["../../src/form-elements/FormElementArcGISWebMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,SAAS,MAAM,kCAAkC,CAAA;AACxD,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAChD,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAE1D,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAAA;AAO3E,SAAS,uBAAuB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAS;IACrD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAE1C,IAAI,cAAc,EAAE;QAClB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,mBAAmB,EAC7B,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,IAEd,SAAS,CAAC,CAAC,CAAC,CACX,gCAAQ,SAAS,EAAC,WAAW;YAC3B,6BAAK,SAAS,EAAC,kCAAkC;gBAC/C,4BAAI,SAAS,EAAC,YAAY,iEAErB,CACD,CACC,CACV,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,
|
1
|
+
{"version":3,"file":"FormElementArcGISWebMap.js","sourceRoot":"","sources":["../../src/form-elements/FormElementArcGISWebMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,SAAS,MAAM,kCAAkC,CAAA;AACxD,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAChD,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAE1D,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAAA;AAO3E,SAAS,uBAAuB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAS;IACrD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAE1C,IAAI,cAAc,EAAE;QAClB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,mBAAmB,EAC7B,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,IAEd,SAAS,CAAC,CAAC,CAAC,CACX,gCAAQ,SAAS,EAAC,WAAW;YAC3B,6BAAK,SAAS,EAAC,kCAAkC;gBAC/C,4BAAI,SAAS,EAAC,YAAY,iEAErB,CACD,CACC,CACV,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IACP,QAAQ,EACN;gBACE,oBAAC,SAAS,OAAG;gBACb,6BAAK,SAAS,EAAC,gBAAgB,GAAG,CACjC;YAGL,oBAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,CACzB,CACZ,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA","sourcesContent":["import React, { Suspense } from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport OnLoading from '../components/renderer/OnLoading'\nimport useIsOffline from '../hooks/useIsOffline'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useFormIsReadOnly from '../hooks/useFormIsReadOnly'\n\nconst ArcGISWebMap = React.lazy(() => import('../components/ArcGISWebMap'))\n\ntype Props = {\n id: string\n element: FormTypes.ArcGISWebMapElement\n}\n\nfunction FormElementArcGISWebMap({ id, element }: Props) {\n const isOffline = useIsOffline()\n const isFormReadOnly = useFormIsReadOnly()\n\n if (isFormReadOnly) {\n return null\n }\n\n return (\n <div className=\"cypress-arcgis-web-map\">\n <FormElementLabelContainer\n className=\"ob-arcgis-web-map\"\n id={id}\n element={element}\n required={false}\n >\n {isOffline ? (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <h4 className=\"title is-4\">\n This Web Map is not available as you are currently offline\n </h4>\n </div>\n </figure>\n ) : (\n <Suspense\n fallback={\n <>\n <OnLoading />\n <div className=\"arcgis-web-map\" />\n </>\n }\n >\n <ArcGISWebMap element={element} />\n </Suspense>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementArcGISWebMap)\n"]}
|
package/dist/styles.css
CHANGED
@@ -6147,6 +6147,49 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
|
6147
6147
|
font-size: 1.25rem;
|
6148
6148
|
}
|
6149
6149
|
}
|
6150
|
+
.icon {
|
6151
|
+
align-items: center;
|
6152
|
+
display: inline-flex;
|
6153
|
+
justify-content: center;
|
6154
|
+
height: 1.5rem;
|
6155
|
+
width: 1.5rem;
|
6156
|
+
}
|
6157
|
+
.icon.is-small {
|
6158
|
+
height: 1rem;
|
6159
|
+
width: 1rem;
|
6160
|
+
}
|
6161
|
+
.icon.is-medium {
|
6162
|
+
height: 2rem;
|
6163
|
+
width: 2rem;
|
6164
|
+
}
|
6165
|
+
.icon.is-large {
|
6166
|
+
height: 3rem;
|
6167
|
+
width: 3rem;
|
6168
|
+
}
|
6169
|
+
|
6170
|
+
.icon-text {
|
6171
|
+
align-items: flex-start;
|
6172
|
+
color: inherit;
|
6173
|
+
display: inline-flex;
|
6174
|
+
flex-wrap: wrap;
|
6175
|
+
line-height: 1.5rem;
|
6176
|
+
vertical-align: top;
|
6177
|
+
}
|
6178
|
+
.icon-text .icon {
|
6179
|
+
flex-grow: 0;
|
6180
|
+
flex-shrink: 0;
|
6181
|
+
}
|
6182
|
+
.icon-text .icon:not(:last-child) {
|
6183
|
+
margin-right: 0.25em;
|
6184
|
+
}
|
6185
|
+
.icon-text .icon:not(:first-child) {
|
6186
|
+
margin-left: 0.25em;
|
6187
|
+
}
|
6188
|
+
|
6189
|
+
div.icon-text {
|
6190
|
+
display: flex;
|
6191
|
+
}
|
6192
|
+
|
6150
6193
|
.title,
|
6151
6194
|
.subtitle {
|
6152
6195
|
word-break: break-word;
|
package/dist/styles.scss
CHANGED
@@ -63,6 +63,7 @@ $slider-thumb-border: 1px solid $primary;
|
|
63
63
|
@import 'bulma/sass/elements/container.sass';
|
64
64
|
@import 'bulma/sass/elements/other.sass';
|
65
65
|
@import 'bulma/sass/elements/button.sass';
|
66
|
+
@import 'bulma/sass/elements/icon.sass';
|
66
67
|
|
67
68
|
$title-color: $black;
|
68
69
|
$title-weight: 200;
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@oneblink/apps-react",
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
4
|
-
"version": "5.11.0-beta.
|
4
|
+
"version": "5.11.0-beta.5",
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
6
6
|
"bugs": {
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|