@micromag/core 0.2.412 → 0.3.3
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/assets/css/styles.css +10 -9
- package/assets/css/vendor.css +2 -2
- package/es/components.js +71 -49
- package/es/contexts.js +178 -117
- package/es/hooks.js +28 -26
- package/es/index.js +14 -7
- package/es/utils.js +15 -8
- package/lib/components.js +71 -49
- package/lib/contexts.js +183 -118
- package/lib/hooks.js +28 -26
- package/lib/index.js +14 -7
- package/lib/utils.js +15 -8
- package/package.json +3 -3
- package/scss/_theme.scss +8 -0
- package/scss/_variables.scss +1 -0
package/es/contexts.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
2
|
-
import React, { useContext, useMemo, useState, useEffect, useCallback, useRef } from 'react';
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
2
|
import isString from 'lodash/isString';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import React, { useContext, useMemo, useState, useEffect, useCallback, useRef } from 'react';
|
|
5
5
|
import { ComponentsManager, PropTypes as PropTypes$1, FieldsManager, ScreensManager, ColorsParser, Tracking } from '@micromag/core';
|
|
6
6
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
7
7
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
8
8
|
import uniqBy from 'lodash/uniqBy';
|
|
9
9
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
10
|
-
import isObject from 'lodash/isObject';
|
|
11
10
|
import { getJSON } from '@folklore/fetch';
|
|
11
|
+
import isObject from 'lodash/isObject';
|
|
12
12
|
import { loadGoogleApi, loadGoogleMaps } from '@folklore/services';
|
|
13
13
|
import { getDisplayName, getScreenExtraField } from '@micromag/core/utils';
|
|
14
14
|
import { generatePath, useHistory } from 'react-router';
|
|
@@ -17,6 +17,7 @@ import { TrackingContext, TrackingContainer } from '@folklore/tracking';
|
|
|
17
17
|
export { TrackingContext } from '@folklore/tracking';
|
|
18
18
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
19
19
|
import { v1 } from 'uuid';
|
|
20
|
+
import EventEmitter from 'wolfy87-eventemitter';
|
|
20
21
|
|
|
21
22
|
var MODALS_NAMESPACE = 'modals';
|
|
22
23
|
var FIELDS_NAMESPACE = 'fields';
|
|
@@ -321,7 +322,8 @@ var EditorProvider = function EditorProvider(_ref2) {
|
|
|
321
322
|
}, [parser]);
|
|
322
323
|
var getColors = useCallback(function () {
|
|
323
324
|
return parse(story);
|
|
324
|
-
}, [parse, story]);
|
|
325
|
+
}, [parse, story]); // eslint-disable-next-line react/jsx-no-constructed-context-values
|
|
326
|
+
|
|
325
327
|
return /*#__PURE__*/React.createElement(EditorContext.Provider, {
|
|
326
328
|
value: {
|
|
327
329
|
getColors: getColors
|
|
@@ -376,10 +378,13 @@ var GoogleKeysProvider = function GoogleKeysProvider(_ref) {
|
|
|
376
378
|
var _useGoogleKeys = useGoogleKeys(),
|
|
377
379
|
previousApiKey = _useGoogleKeys.apiKey;
|
|
378
380
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
+
var value = useMemo(function () {
|
|
382
|
+
return {
|
|
381
383
|
apiKey: apiKey || previousApiKey
|
|
382
|
-
}
|
|
384
|
+
};
|
|
385
|
+
}, [apiKey, previousApiKey]);
|
|
386
|
+
return /*#__PURE__*/React.createElement(GoogleKeysContext.Provider, {
|
|
387
|
+
value: value
|
|
383
388
|
}, children);
|
|
384
389
|
};
|
|
385
390
|
GoogleKeysProvider.propTypes = propTypes$c;
|
|
@@ -710,14 +715,17 @@ var ModalsProvider = function ModalsProvider(_ref2) {
|
|
|
710
715
|
modalsRef.current = newModals;
|
|
711
716
|
}
|
|
712
717
|
}, [modals, setModals]);
|
|
713
|
-
|
|
714
|
-
|
|
718
|
+
var value = useMemo(function () {
|
|
719
|
+
return {
|
|
715
720
|
modals: modals,
|
|
716
721
|
container: container,
|
|
717
722
|
setContainer: setContainer,
|
|
718
723
|
register: register,
|
|
719
724
|
unregister: unregister
|
|
720
|
-
}
|
|
725
|
+
};
|
|
726
|
+
}, [modals, container, setContainer, register, unregister]);
|
|
727
|
+
return /*#__PURE__*/React.createElement(ModalsContext.Provider, {
|
|
728
|
+
value: value
|
|
721
729
|
}, children);
|
|
722
730
|
};
|
|
723
731
|
ModalsProvider.propTypes = propTypes$8;
|
|
@@ -798,14 +806,17 @@ var PanelsProvider = function PanelsProvider(_ref2) {
|
|
|
798
806
|
panelsRef.current = newPanels;
|
|
799
807
|
}
|
|
800
808
|
}, [panels, setPanels]);
|
|
801
|
-
|
|
802
|
-
|
|
809
|
+
var value = useMemo(function () {
|
|
810
|
+
return {
|
|
803
811
|
panels: panels,
|
|
804
812
|
setContainer: setContainer,
|
|
805
813
|
container: container,
|
|
806
814
|
register: register,
|
|
807
815
|
unregister: unregister
|
|
808
|
-
}
|
|
816
|
+
};
|
|
817
|
+
}, [panels, setContainer, container, register, unregister]);
|
|
818
|
+
return /*#__PURE__*/React.createElement(PanelsContext.Provider, {
|
|
819
|
+
value: value
|
|
809
820
|
}, children);
|
|
810
821
|
};
|
|
811
822
|
PanelsProvider.propTypes = propTypes$7;
|
|
@@ -877,11 +888,14 @@ var RoutesProvider = function RoutesProvider(_ref2) {
|
|
|
877
888
|
var routes = _ref2.routes,
|
|
878
889
|
basePath = _ref2.basePath,
|
|
879
890
|
children = _ref2.children;
|
|
880
|
-
|
|
881
|
-
|
|
891
|
+
var value = useMemo(function () {
|
|
892
|
+
return {
|
|
882
893
|
routes: routes,
|
|
883
894
|
basePath: basePath
|
|
884
|
-
}
|
|
895
|
+
};
|
|
896
|
+
}, []);
|
|
897
|
+
return /*#__PURE__*/React.createElement(RoutesContext.Provider, {
|
|
898
|
+
value: value
|
|
885
899
|
}, children);
|
|
886
900
|
};
|
|
887
901
|
RoutesProvider.propTypes = propTypes$6;
|
|
@@ -938,48 +952,61 @@ var useScreenRenderContext = function useScreenRenderContext() {
|
|
|
938
952
|
isCapture: isCapture
|
|
939
953
|
};
|
|
940
954
|
};
|
|
955
|
+
var useScreenState = function useScreenState() {
|
|
956
|
+
var _ref5 = useScreen() || {},
|
|
957
|
+
screenState = _ref5.screenState;
|
|
958
|
+
|
|
959
|
+
return screenState;
|
|
960
|
+
};
|
|
941
961
|
var propTypes$5 = {
|
|
942
962
|
children: PropTypes.node.isRequired,
|
|
943
963
|
data: PropTypes$1.screen,
|
|
944
964
|
definition: PropTypes$1.screenDefinition,
|
|
945
|
-
renderContext: PropTypes$1.renderContext
|
|
965
|
+
renderContext: PropTypes$1.renderContext,
|
|
966
|
+
screenState: PropTypes.string
|
|
946
967
|
};
|
|
947
968
|
var defaultProps$5 = {
|
|
948
969
|
data: null,
|
|
949
970
|
definition: null,
|
|
950
|
-
renderContext: null
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
971
|
+
renderContext: null,
|
|
972
|
+
screenState: null
|
|
973
|
+
};
|
|
974
|
+
var ScreenProvider = function ScreenProvider(_ref6) {
|
|
975
|
+
var data = _ref6.data,
|
|
976
|
+
definition = _ref6.definition,
|
|
977
|
+
renderContext = _ref6.renderContext,
|
|
978
|
+
screenState = _ref6.screenState,
|
|
979
|
+
children = _ref6.children;
|
|
980
|
+
|
|
981
|
+
var _ref7 = useScreen() || {},
|
|
982
|
+
_ref7$data = _ref7.data,
|
|
983
|
+
previousData = _ref7$data === void 0 ? null : _ref7$data,
|
|
984
|
+
_ref7$definition = _ref7.definition,
|
|
985
|
+
previousDefinition = _ref7$definition === void 0 ? null : _ref7$definition,
|
|
986
|
+
_ref7$renderContext = _ref7.renderContext,
|
|
987
|
+
previousContext = _ref7$renderContext === void 0 ? null : _ref7$renderContext,
|
|
988
|
+
_ref7$screenState = _ref7.screenState,
|
|
989
|
+
previousScreenState = _ref7$screenState === void 0 ? null : _ref7$screenState;
|
|
965
990
|
|
|
966
991
|
var finalData = data || previousData || null;
|
|
967
992
|
|
|
968
|
-
var
|
|
969
|
-
|
|
970
|
-
type =
|
|
993
|
+
var _ref8 = finalData || {},
|
|
994
|
+
_ref8$type = _ref8.type,
|
|
995
|
+
type = _ref8$type === void 0 ? null : _ref8$type;
|
|
971
996
|
|
|
972
997
|
var screensManager = useScreensManager();
|
|
973
998
|
var contextDefinition = screensManager !== null ? screensManager.getDefinition(type) : null;
|
|
974
999
|
var finalDefinition = definition || contextDefinition || previousDefinition;
|
|
975
1000
|
var finalRenderContext = renderContext || previousContext || 'view';
|
|
1001
|
+
var finalScreenState = screenState || previousScreenState || null;
|
|
976
1002
|
var value = useMemo(function () {
|
|
977
1003
|
return {
|
|
978
1004
|
data: finalData,
|
|
979
1005
|
definition: finalDefinition,
|
|
980
|
-
renderContext: finalRenderContext
|
|
1006
|
+
renderContext: finalRenderContext,
|
|
1007
|
+
screenState: finalScreenState
|
|
981
1008
|
};
|
|
982
|
-
}, [finalData, finalDefinition, finalRenderContext]);
|
|
1009
|
+
}, [finalData, finalDefinition, finalRenderContext, finalScreenState]);
|
|
983
1010
|
return /*#__PURE__*/React.createElement(ScreenContext.Provider, {
|
|
984
1011
|
value: value
|
|
985
1012
|
}, children);
|
|
@@ -1157,70 +1184,6 @@ var _excluded$2 = ["default"];
|
|
|
1157
1184
|
|
|
1158
1185
|
var packagesCache$1 = {};
|
|
1159
1186
|
var defaultPackagesMap$1 = {
|
|
1160
|
-
transloadit: null,
|
|
1161
|
-
// Disabled for compatibility reasons
|
|
1162
|
-
tus: function tus() {
|
|
1163
|
-
return import('@uppy/tus');
|
|
1164
|
-
},
|
|
1165
|
-
xhr: function xhr() {
|
|
1166
|
-
return import('@uppy/xhr-upload');
|
|
1167
|
-
}
|
|
1168
|
-
};
|
|
1169
|
-
|
|
1170
|
-
var useUppyTransport = function useUppyTransport(transport) {
|
|
1171
|
-
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1172
|
-
_ref$packagesMap = _ref.packagesMap,
|
|
1173
|
-
packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap$1 : _ref$packagesMap;
|
|
1174
|
-
|
|
1175
|
-
// transport
|
|
1176
|
-
var _useState = useState({
|
|
1177
|
-
"package": packagesCache$1[transport] || null
|
|
1178
|
-
}),
|
|
1179
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1180
|
-
loadedPackage = _useState2[0]["package"],
|
|
1181
|
-
setLoadedPackage = _useState2[1];
|
|
1182
|
-
|
|
1183
|
-
var packageLoader = packagesMap[transport] || null;
|
|
1184
|
-
useEffect(function () {
|
|
1185
|
-
var canceled = false;
|
|
1186
|
-
|
|
1187
|
-
if (loadedPackage !== null || packageLoader === null) {
|
|
1188
|
-
return function () {
|
|
1189
|
-
canceled = true;
|
|
1190
|
-
};
|
|
1191
|
-
}
|
|
1192
|
-
|
|
1193
|
-
packageLoader().then(function (_ref2) {
|
|
1194
|
-
var pack = _ref2["default"],
|
|
1195
|
-
others = _objectWithoutProperties(_ref2, _excluded$2);
|
|
1196
|
-
|
|
1197
|
-
var dep = Object.keys(others).reduce(function (map, key) {
|
|
1198
|
-
map[key] = others[key]; // eslint-disable-line no-param-reassign
|
|
1199
|
-
|
|
1200
|
-
return map;
|
|
1201
|
-
}, pack);
|
|
1202
|
-
packagesCache$1[transport] = dep;
|
|
1203
|
-
|
|
1204
|
-
if (!canceled) {
|
|
1205
|
-
setLoadedPackage({
|
|
1206
|
-
"package": dep
|
|
1207
|
-
});
|
|
1208
|
-
}
|
|
1209
|
-
});
|
|
1210
|
-
return function () {
|
|
1211
|
-
canceled = true;
|
|
1212
|
-
};
|
|
1213
|
-
}, [packageLoader, loadedPackage, setLoadedPackage]);
|
|
1214
|
-
return loadedPackage;
|
|
1215
|
-
};
|
|
1216
|
-
|
|
1217
|
-
var _excluded$1 = ["default"];
|
|
1218
|
-
/**
|
|
1219
|
-
* Locale loader
|
|
1220
|
-
*/
|
|
1221
|
-
|
|
1222
|
-
var packagesCache = {};
|
|
1223
|
-
var defaultPackagesMap = {
|
|
1224
1187
|
webcam: function webcam() {
|
|
1225
1188
|
return import('@uppy/webcam');
|
|
1226
1189
|
},
|
|
@@ -1241,12 +1204,12 @@ var defaultPackagesMap = {
|
|
|
1241
1204
|
var useUppySources = function useUppySources(sources) {
|
|
1242
1205
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1243
1206
|
_ref$packagesMap = _ref.packagesMap,
|
|
1244
|
-
packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap : _ref$packagesMap;
|
|
1207
|
+
packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap$1 : _ref$packagesMap;
|
|
1245
1208
|
|
|
1246
1209
|
// transport
|
|
1247
1210
|
var _useState = useState({
|
|
1248
1211
|
packages: sources.reduce(function (map, source) {
|
|
1249
|
-
var sourcePackage = packagesCache[source] || null;
|
|
1212
|
+
var sourcePackage = packagesCache$1[source] || null;
|
|
1250
1213
|
|
|
1251
1214
|
if (sourcePackage === null) {
|
|
1252
1215
|
return map;
|
|
@@ -1288,7 +1251,7 @@ var useUppySources = function useUppySources(sources) {
|
|
|
1288
1251
|
var newLoadedPackages = sourcesToLoad.reduce(function (map, source, index) {
|
|
1289
1252
|
var _packagesLoaded$index = packagesLoaded[index],
|
|
1290
1253
|
pack = _packagesLoaded$index["default"],
|
|
1291
|
-
others = _objectWithoutProperties(_packagesLoaded$index, _excluded$
|
|
1254
|
+
others = _objectWithoutProperties(_packagesLoaded$index, _excluded$2);
|
|
1292
1255
|
|
|
1293
1256
|
return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, source, Object.keys(others).reduce(function (otherMap, key) {
|
|
1294
1257
|
otherMap[key] = others[key]; // eslint-disable-line no-param-reassign
|
|
@@ -1296,7 +1259,7 @@ var useUppySources = function useUppySources(sources) {
|
|
|
1296
1259
|
return otherMap;
|
|
1297
1260
|
}, pack)));
|
|
1298
1261
|
}, {});
|
|
1299
|
-
packagesCache = _objectSpread(_objectSpread({}, packagesCache), newLoadedPackages);
|
|
1262
|
+
packagesCache$1 = _objectSpread(_objectSpread({}, packagesCache$1), newLoadedPackages);
|
|
1300
1263
|
|
|
1301
1264
|
if (!canceled) {
|
|
1302
1265
|
setLoadedPackages({
|
|
@@ -1311,6 +1274,70 @@ var useUppySources = function useUppySources(sources) {
|
|
|
1311
1274
|
return sourcesToLoad.length === 0 ? loadedPackages : null;
|
|
1312
1275
|
};
|
|
1313
1276
|
|
|
1277
|
+
var _excluded$1 = ["default"];
|
|
1278
|
+
/**
|
|
1279
|
+
* Locale loader
|
|
1280
|
+
*/
|
|
1281
|
+
|
|
1282
|
+
var packagesCache = {};
|
|
1283
|
+
var defaultPackagesMap = {
|
|
1284
|
+
transloadit: null,
|
|
1285
|
+
// Disabled for compatibility reasons
|
|
1286
|
+
tus: function tus() {
|
|
1287
|
+
return import('@uppy/tus');
|
|
1288
|
+
},
|
|
1289
|
+
xhr: function xhr() {
|
|
1290
|
+
return import('@uppy/xhr-upload');
|
|
1291
|
+
}
|
|
1292
|
+
};
|
|
1293
|
+
|
|
1294
|
+
var useUppyTransport = function useUppyTransport(transport) {
|
|
1295
|
+
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
1296
|
+
_ref$packagesMap = _ref.packagesMap,
|
|
1297
|
+
packagesMap = _ref$packagesMap === void 0 ? defaultPackagesMap : _ref$packagesMap;
|
|
1298
|
+
|
|
1299
|
+
// transport
|
|
1300
|
+
var _useState = useState({
|
|
1301
|
+
"package": packagesCache[transport] || null
|
|
1302
|
+
}),
|
|
1303
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1304
|
+
loadedPackage = _useState2[0]["package"],
|
|
1305
|
+
setLoadedPackage = _useState2[1];
|
|
1306
|
+
|
|
1307
|
+
var packageLoader = packagesMap[transport] || null;
|
|
1308
|
+
useEffect(function () {
|
|
1309
|
+
var canceled = false;
|
|
1310
|
+
|
|
1311
|
+
if (loadedPackage !== null || packageLoader === null) {
|
|
1312
|
+
return function () {
|
|
1313
|
+
canceled = true;
|
|
1314
|
+
};
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1317
|
+
packageLoader().then(function (_ref2) {
|
|
1318
|
+
var pack = _ref2["default"],
|
|
1319
|
+
others = _objectWithoutProperties(_ref2, _excluded$1);
|
|
1320
|
+
|
|
1321
|
+
var dep = Object.keys(others).reduce(function (map, key) {
|
|
1322
|
+
map[key] = others[key]; // eslint-disable-line no-param-reassign
|
|
1323
|
+
|
|
1324
|
+
return map;
|
|
1325
|
+
}, pack);
|
|
1326
|
+
packagesCache[transport] = dep;
|
|
1327
|
+
|
|
1328
|
+
if (!canceled) {
|
|
1329
|
+
setLoadedPackage({
|
|
1330
|
+
"package": dep
|
|
1331
|
+
});
|
|
1332
|
+
}
|
|
1333
|
+
});
|
|
1334
|
+
return function () {
|
|
1335
|
+
canceled = true;
|
|
1336
|
+
};
|
|
1337
|
+
}, [packageLoader, loadedPackage, setLoadedPackage]);
|
|
1338
|
+
return loadedPackage;
|
|
1339
|
+
};
|
|
1340
|
+
|
|
1314
1341
|
var convertToMedia = function convertToMedia(it) {
|
|
1315
1342
|
// console.log('upload', it);
|
|
1316
1343
|
var type = it.data.type.split('/')[0];
|
|
@@ -1593,8 +1620,8 @@ var UppyProvider = function UppyProvider(_ref5) {
|
|
|
1593
1620
|
return newUppy;
|
|
1594
1621
|
};
|
|
1595
1622
|
}, [Uppy, uppyLocale, uppyTransport, uppySources, transport, sources, transloadit, companion, tus, xhr]);
|
|
1596
|
-
|
|
1597
|
-
|
|
1623
|
+
var value = useMemo(function () {
|
|
1624
|
+
return {
|
|
1598
1625
|
transport: transport,
|
|
1599
1626
|
locale: locale,
|
|
1600
1627
|
sources: sources,
|
|
@@ -1607,7 +1634,10 @@ var UppyProvider = function UppyProvider(_ref5) {
|
|
|
1607
1634
|
uppySources: uppySources,
|
|
1608
1635
|
uppyLocale: uppyLocale,
|
|
1609
1636
|
buildUppy: buildUppy
|
|
1610
|
-
}
|
|
1637
|
+
};
|
|
1638
|
+
}, [transport, locale, sources, transloadit, companion, tus, xhr, Uppy, uppyTransport, uppySources, uppyLocale, buildUppy]);
|
|
1639
|
+
return /*#__PURE__*/React.createElement(UppyContext.Provider, {
|
|
1640
|
+
value: value
|
|
1611
1641
|
}, children);
|
|
1612
1642
|
};
|
|
1613
1643
|
UppyProvider.propTypes = propTypes$2;
|
|
@@ -1655,19 +1685,25 @@ var UserInteractionProvider = function UserInteractionProvider(_ref) {
|
|
|
1655
1685
|
document.removeEventListener('pointerup', set);
|
|
1656
1686
|
};
|
|
1657
1687
|
}, [userInteracted, setUserInteracted]);
|
|
1658
|
-
|
|
1659
|
-
|
|
1688
|
+
var value = useMemo(function () {
|
|
1689
|
+
return {
|
|
1660
1690
|
userInteracted: userInteracted,
|
|
1661
1691
|
setUserInteracted: setUserInteracted
|
|
1662
|
-
}
|
|
1692
|
+
};
|
|
1693
|
+
}, [userInteracted, setUserInteracted]);
|
|
1694
|
+
return /*#__PURE__*/React.createElement(UserInteractionContext.Provider, {
|
|
1695
|
+
value: value
|
|
1663
1696
|
}, children);
|
|
1664
1697
|
};
|
|
1665
1698
|
UserInteractionProvider.propTypes = propTypes$1;
|
|
1666
1699
|
UserInteractionProvider.defaultProps = defaultProps$1;
|
|
1667
1700
|
|
|
1668
1701
|
var defaultValue = {
|
|
1702
|
+
events: new EventEmitter(),
|
|
1669
1703
|
menuVisible: false,
|
|
1670
|
-
menuSize: 0
|
|
1704
|
+
menuSize: 0,
|
|
1705
|
+
disableInteraction: null,
|
|
1706
|
+
enableInteraction: null
|
|
1671
1707
|
};
|
|
1672
1708
|
var ViewerContext = /*#__PURE__*/React.createContext(defaultValue);
|
|
1673
1709
|
var useViewer = function useViewer() {
|
|
@@ -1683,30 +1719,55 @@ var useViewerNavigation = function useViewerNavigation() {
|
|
|
1683
1719
|
gotoPreviousScreen: gotoPreviousScreen
|
|
1684
1720
|
};
|
|
1685
1721
|
};
|
|
1722
|
+
var useViewerEvents = function useViewerEvents() {
|
|
1723
|
+
var _useViewer2 = useViewer(),
|
|
1724
|
+
events = _useViewer2.events;
|
|
1725
|
+
|
|
1726
|
+
return events;
|
|
1727
|
+
};
|
|
1728
|
+
var useViewerInteraction = function useViewerInteraction() {
|
|
1729
|
+
var _useViewer3 = useViewer(),
|
|
1730
|
+
disableInteraction = _useViewer3.disableInteraction,
|
|
1731
|
+
enableInteraction = _useViewer3.enableInteraction;
|
|
1732
|
+
|
|
1733
|
+
return {
|
|
1734
|
+
disableInteraction: disableInteraction,
|
|
1735
|
+
enableInteraction: enableInteraction
|
|
1736
|
+
};
|
|
1737
|
+
};
|
|
1686
1738
|
var propTypes = {
|
|
1687
1739
|
children: PropTypes.node.isRequired,
|
|
1740
|
+
events: PropTypes.instanceOf(EventEmitter),
|
|
1688
1741
|
menuVisible: PropTypes.bool,
|
|
1689
1742
|
menuSize: PropTypes.number,
|
|
1690
1743
|
gotoNextScreen: PropTypes.func.isRequired,
|
|
1691
|
-
gotoPreviousScreen: PropTypes.func.isRequired
|
|
1744
|
+
gotoPreviousScreen: PropTypes.func.isRequired,
|
|
1745
|
+
disableInteraction: PropTypes.func,
|
|
1746
|
+
enableInteraction: PropTypes.func
|
|
1692
1747
|
};
|
|
1693
1748
|
|
|
1694
1749
|
var defaultProps = _objectSpread({}, defaultValue);
|
|
1695
1750
|
|
|
1696
1751
|
var ViewerProvider = function ViewerProvider(_ref) {
|
|
1697
1752
|
var children = _ref.children,
|
|
1753
|
+
events = _ref.events,
|
|
1698
1754
|
menuVisible = _ref.menuVisible,
|
|
1699
1755
|
menuSize = _ref.menuSize,
|
|
1700
1756
|
gotoNextScreen = _ref.gotoNextScreen,
|
|
1701
|
-
gotoPreviousScreen = _ref.gotoPreviousScreen
|
|
1757
|
+
gotoPreviousScreen = _ref.gotoPreviousScreen,
|
|
1758
|
+
disableInteraction = _ref.disableInteraction,
|
|
1759
|
+
enableInteraction = _ref.enableInteraction;
|
|
1702
1760
|
var value = useMemo(function () {
|
|
1703
1761
|
return {
|
|
1762
|
+
events: events,
|
|
1704
1763
|
menuVisible: menuVisible,
|
|
1705
1764
|
menuSize: menuSize,
|
|
1706
1765
|
gotoNextScreen: gotoNextScreen,
|
|
1707
|
-
gotoPreviousScreen: gotoPreviousScreen
|
|
1766
|
+
gotoPreviousScreen: gotoPreviousScreen,
|
|
1767
|
+
disableInteraction: disableInteraction,
|
|
1768
|
+
enableInteraction: enableInteraction
|
|
1708
1769
|
};
|
|
1709
|
-
}, [menuVisible, menuSize, gotoNextScreen, gotoPreviousScreen]);
|
|
1770
|
+
}, [events, menuVisible, menuSize, gotoNextScreen, gotoPreviousScreen, disableInteraction, enableInteraction]);
|
|
1710
1771
|
return /*#__PURE__*/React.createElement(ViewerContext.Provider, {
|
|
1711
1772
|
value: value
|
|
1712
1773
|
}, children);
|
|
@@ -1714,4 +1775,4 @@ var ViewerProvider = function ViewerProvider(_ref) {
|
|
|
1714
1775
|
ViewerProvider.propTypes = propTypes;
|
|
1715
1776
|
ViewerProvider.defaultProps = defaultProps;
|
|
1716
1777
|
|
|
1717
|
-
export { ComponentsContext, ComponentsProvider, ELEMENTS_NAMESPACE, EditorContext, EditorProvider, FIELDS_NAMESPACE, FORMS_NAMESPACE, FieldContext, FieldContextProvider, FieldsContext, FieldsProvider, FontsContext, FontsProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, RoutesContext, RoutesProvider, SCREENS_NAMESPACE, ScreenContext, ScreenProvider, ScreenSizeContext, ScreenSizeProvider, ScreensContext, ScreensProvider, StoryContext, StoryProvider, TrackingProvider, UppyContext, UppyProvider, UserInteractionContext, UserInteractionProvider, ViewerContext, ViewerProvider, useComponent, useComponents, useComponentsManager, useEditor, useElementComponent, useElementsComponents, useElementsComponentsManager, useFieldComponent, useFieldContext, useFieldDefinition, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFonts, useFormComponent, useFormsComponents, useFormsComponentsManager, useGetColors, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, usePanels, useRouteBack, useRoutePush, useRoutes, useScreen, useScreenComponent, useScreenData, useScreenDefinition, useScreenRenderContext, useScreenSize, useScreensComponents, useScreensComponentsManager, useScreensManager, useStory, useStoryContext, useTracking, useUppy, useUrlGenerator, useUserInteracted, useViewer, useViewerNavigation, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };
|
|
1778
|
+
export { ComponentsContext, ComponentsProvider, ELEMENTS_NAMESPACE, EditorContext, EditorProvider, FIELDS_NAMESPACE, FORMS_NAMESPACE, FieldContext, FieldContextProvider, FieldsContext, FieldsProvider, FontsContext, FontsProvider, GoogleApiClientContext, GoogleApiClientProvider, GoogleKeysContext, GoogleKeysProvider, GoogleMapsClientContext, GoogleMapsClientProvider, MODALS_NAMESPACE, ModalsContext, ModalsProvider, PanelsContext, PanelsProvider, RoutesContext, RoutesProvider, SCREENS_NAMESPACE, ScreenContext, ScreenProvider, ScreenSizeContext, ScreenSizeProvider, ScreensContext, ScreensProvider, StoryContext, StoryProvider, TrackingProvider, UppyContext, UppyProvider, UserInteractionContext, UserInteractionProvider, ViewerContext, ViewerProvider, useComponent, useComponents, useComponentsManager, useEditor, useElementComponent, useElementsComponents, useElementsComponentsManager, useFieldComponent, useFieldContext, useFieldDefinition, useFieldsComponents, useFieldsComponentsManager, useFieldsManager, useFonts, useFormComponent, useFormsComponents, useFormsComponentsManager, useGetColors, useGoogleApiClient, useGoogleFonts, useGoogleKeys, useGoogleMapsClient, useModalComponent, useModals, useModalsComponents, useModalsComponentsManager, usePanels, useRouteBack, useRoutePush, useRoutes, useScreen, useScreenComponent, useScreenData, useScreenDefinition, useScreenRenderContext, useScreenSize, useScreenState, useScreensComponents, useScreensComponentsManager, useScreensManager, useStory, useStoryContext, useTracking, useUppy, useUrlGenerator, useUserInteracted, useViewer, useViewerEvents, useViewerInteraction, useViewerNavigation, withGoogleApiClient, withGoogleMapsClient, withModals, withPanels };
|
package/es/hooks.js
CHANGED
|
@@ -1075,33 +1075,32 @@ var useScreenSize = function useScreenSize(_ref) {
|
|
|
1075
1075
|
mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
|
|
1076
1076
|
_ref$media = _ref.media,
|
|
1077
1077
|
providedMedia = _ref$media === void 0 ? null : _ref$media;
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
return providedMedia !== null ? providedMedia : {
|
|
1078
|
+
var screenSize = useMemo(function () {
|
|
1079
|
+
var media = providedMedia !== null ? providedMedia : {
|
|
1081
1080
|
type: mediaType,
|
|
1082
1081
|
width: "".concat(width, "px"),
|
|
1083
1082
|
height: "".concat(height, "px")
|
|
1084
1083
|
};
|
|
1085
|
-
}, [providedMedia, mediaType, width, height]); // Get matching screens
|
|
1086
1084
|
|
|
1087
|
-
|
|
1088
|
-
return _toConsumableArray(screens).reverse().filter(function (_ref2) {
|
|
1085
|
+
var matchingScreens = _toConsumableArray(screens).reverse().filter(function (_ref2) {
|
|
1089
1086
|
var _ref2$mediaQuery = _ref2.mediaQuery,
|
|
1090
1087
|
mediaQuery = _ref2$mediaQuery === void 0 ? null : _ref2$mediaQuery;
|
|
1091
1088
|
return mediaQuery === null || match(mediaQuery, media);
|
|
1092
1089
|
});
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1090
|
+
|
|
1091
|
+
return {
|
|
1092
|
+
screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
|
|
1093
|
+
screens: _toConsumableArray(matchingScreens).reverse().map(function (_ref3) {
|
|
1094
|
+
var name = _ref3.name;
|
|
1095
|
+
return name;
|
|
1096
|
+
}),
|
|
1097
|
+
width: width,
|
|
1098
|
+
height: height,
|
|
1099
|
+
landscape: landscape,
|
|
1100
|
+
menuOverScreen: menuOverScreen
|
|
1101
|
+
};
|
|
1102
|
+
}, [screens, providedMedia, mediaType, width, height, landscape, menuOverScreen]);
|
|
1103
|
+
return screenSize;
|
|
1105
1104
|
};
|
|
1106
1105
|
|
|
1107
1106
|
var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
@@ -1124,28 +1123,31 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
|
|
|
1124
1123
|
|
|
1125
1124
|
var fullWidth = width !== null ? width : calculatedWidth;
|
|
1126
1125
|
var fullHeight = height !== null ? height : calculatedHeight;
|
|
1127
|
-
var landscape = fullHeight > 0 && fullWidth > fullHeight;
|
|
1128
1126
|
|
|
1129
1127
|
var _ref6 = opts || {},
|
|
1130
1128
|
_ref6$withoutMaxSize = _ref6.withoutMaxSize,
|
|
1131
1129
|
withoutMaxSize = _ref6$withoutMaxSize === void 0 ? false : _ref6$withoutMaxSize,
|
|
1132
|
-
_ref6$
|
|
1133
|
-
|
|
1134
|
-
_ref6$
|
|
1135
|
-
|
|
1130
|
+
_ref6$landscapeMinHei = _ref6.landscapeMinHeight,
|
|
1131
|
+
landscapeMinHeight = _ref6$landscapeMinHei === void 0 ? 600 : _ref6$landscapeMinHei,
|
|
1132
|
+
_ref6$landscapeHeight = _ref6.landscapeHeightRatio,
|
|
1133
|
+
landscapeHeightRatio = _ref6$landscapeHeight === void 0 ? 3 / 4 : _ref6$landscapeHeight,
|
|
1136
1134
|
_ref6$screenRatio = _ref6.screenRatio,
|
|
1137
|
-
screenRatio = _ref6$screenRatio === void 0 ?
|
|
1135
|
+
screenRatio = _ref6$screenRatio === void 0 ? 360 / 480 : _ref6$screenRatio,
|
|
1136
|
+
_ref6$landscapeMinRat = _ref6.landscapeMinRatio,
|
|
1137
|
+
landscapeMinRatio = _ref6$landscapeMinRat === void 0 ? 3 / 4 : _ref6$landscapeMinRat;
|
|
1138
1138
|
|
|
1139
|
+
var elementRatio = fullWidth / fullHeight;
|
|
1140
|
+
var landscape = fullHeight > 0 && elementRatio > (landscapeMinRatio || screenRatio);
|
|
1139
1141
|
var landscapeWithMaxSize = landscape && !withoutMaxSize;
|
|
1140
1142
|
var finalWidth = fullWidth;
|
|
1141
1143
|
var finalHeight = fullHeight;
|
|
1142
1144
|
var menuOverScreen = !landscape;
|
|
1143
1145
|
|
|
1144
1146
|
if (landscapeWithMaxSize) {
|
|
1145
|
-
if (fullHeight <
|
|
1147
|
+
if (fullHeight < landscapeMinHeight) {
|
|
1146
1148
|
menuOverScreen = true;
|
|
1147
1149
|
} else {
|
|
1148
|
-
finalHeight = Math.round(fullHeight *
|
|
1150
|
+
finalHeight = Math.round(fullHeight * landscapeHeightRatio);
|
|
1149
1151
|
}
|
|
1150
1152
|
|
|
1151
1153
|
finalWidth = Math.round(finalHeight * screenRatio);
|
package/es/index.js
CHANGED
|
@@ -63,6 +63,10 @@ var target = PropTypes$1.oneOf(['_blank', '_self', '_parent']);
|
|
|
63
63
|
var interaction = PropTypes$1.oneOf(['tap', 'swipe']);
|
|
64
64
|
var interactions = PropTypes$1.arrayOf(interaction);
|
|
65
65
|
var trackingVariables = PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number, PropTypes$1.array]));
|
|
66
|
+
var progress = PropTypes$1.shape({
|
|
67
|
+
currentTime: PropTypes$1.number,
|
|
68
|
+
duration: PropTypes$1.number
|
|
69
|
+
});
|
|
66
70
|
/**
|
|
67
71
|
* Site
|
|
68
72
|
*/
|
|
@@ -110,7 +114,7 @@ var bootstrapThemes = PropTypes$1.oneOf(bootstrapThemeStrings);
|
|
|
110
114
|
var buttonTheme = PropTypes$1.oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
|
|
111
115
|
var buttonSize = PropTypes$1.oneOf(['lg', 'sm', null]);
|
|
112
116
|
var formControlSize = PropTypes$1.oneOf(['lg', 'sm', null]);
|
|
113
|
-
var dropdownAlign = PropTypes$1.oneOf(['
|
|
117
|
+
var dropdownAlign = PropTypes$1.oneOf(['start', 'end']);
|
|
114
118
|
var componentNames = function componentNames(Components) {
|
|
115
119
|
return PropTypes$1.oneOf(Object.keys(Components).map(function (it) {
|
|
116
120
|
return snakeCase(it);
|
|
@@ -232,7 +236,7 @@ var borderStyle = PropTypes$1.shape({
|
|
|
232
236
|
radius: PropTypes$1.number,
|
|
233
237
|
color: color
|
|
234
238
|
});
|
|
235
|
-
var
|
|
239
|
+
var boxStyle = PropTypes$1.shape({
|
|
236
240
|
backgroundColor: color,
|
|
237
241
|
borderRadius: PropTypes$1.number,
|
|
238
242
|
borderWidth: PropTypes$1.number,
|
|
@@ -467,7 +471,8 @@ var screenSize = PropTypes$1.shape({
|
|
|
467
471
|
screen: PropTypes$1.string,
|
|
468
472
|
screens: PropTypes$1.arrayOf(PropTypes$1.string),
|
|
469
473
|
width: PropTypes$1.number,
|
|
470
|
-
height: PropTypes$1.number
|
|
474
|
+
height: PropTypes$1.number,
|
|
475
|
+
landscape: PropTypes$1.number
|
|
471
476
|
});
|
|
472
477
|
var renderContext = PropTypes$1.oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
|
|
473
478
|
/**
|
|
@@ -574,6 +579,7 @@ var PropTypes = /*#__PURE__*/Object.freeze({
|
|
|
574
579
|
interaction: interaction,
|
|
575
580
|
interactions: interactions,
|
|
576
581
|
trackingVariables: trackingVariables,
|
|
582
|
+
progress: progress,
|
|
577
583
|
user: user,
|
|
578
584
|
menuItem: menuItem,
|
|
579
585
|
menuItems: menuItems,
|
|
@@ -621,7 +627,7 @@ var PropTypes = /*#__PURE__*/Object.freeze({
|
|
|
621
627
|
textStyle: textStyle,
|
|
622
628
|
borderTypes: borderTypes,
|
|
623
629
|
borderStyle: borderStyle,
|
|
624
|
-
|
|
630
|
+
boxStyle: boxStyle,
|
|
625
631
|
margin: margin,
|
|
626
632
|
gridLayout: gridLayout,
|
|
627
633
|
objectFitSize: objectFitSize,
|
|
@@ -844,7 +850,7 @@ var ColorsParser = /*#__PURE__*/function () {
|
|
|
844
850
|
colors: color !== null ? [].concat(_toConsumableArray(currentColors || []), _toConsumableArray(subColors || []), [color]) : [].concat(_toConsumableArray(currentColors || []), _toConsumableArray(subColors || []))
|
|
845
851
|
};
|
|
846
852
|
}, {
|
|
847
|
-
data: null,
|
|
853
|
+
data: keys.length === 0 ? data : null,
|
|
848
854
|
colors: colors
|
|
849
855
|
});
|
|
850
856
|
}
|
|
@@ -1329,7 +1335,8 @@ var MediasParser = /*#__PURE__*/function () {
|
|
|
1329
1335
|
var medias = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
|
1330
1336
|
var keyPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
1331
1337
|
var dataIsArray = isArray(data);
|
|
1332
|
-
|
|
1338
|
+
var dataKeys = MediasParser.keys(data);
|
|
1339
|
+
return dataKeys.reduce(function (_ref9, key) {
|
|
1333
1340
|
var currentData = _ref9.data,
|
|
1334
1341
|
currentMedias = _ref9.medias;
|
|
1335
1342
|
var path = [keyPrefix, key].filter(function (it) {
|
|
@@ -1360,7 +1367,7 @@ var MediasParser = /*#__PURE__*/function () {
|
|
|
1360
1367
|
medias: media !== null ? _objectSpread(_objectSpread(_objectSpread({}, currentMedias), subMedias), {}, _defineProperty({}, newValue, media)) : _objectSpread(_objectSpread({}, currentMedias), subMedias)
|
|
1361
1368
|
};
|
|
1362
1369
|
}, {
|
|
1363
|
-
data: null,
|
|
1370
|
+
data: dataKeys.length === 0 ? data : null,
|
|
1364
1371
|
medias: medias
|
|
1365
1372
|
});
|
|
1366
1373
|
}
|