@panneau/core 1.0.1-alpha.0 → 1.0.3-alpha.0

package/lib/hooks.js

@@ -0,0 +1,1167 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var reactIntl = require('react-intl');
+var isString = require('lodash/isString');
+var dayjs = require('dayjs');
+var core = require('@panneau/core');
+var utils = require('@panneau/core/utils');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var fetch = require('@folklore/fetch');
+var get = require('lodash/get');
+var isArray = require('lodash/isArray');
+var isObject = require('lodash/isObject');
+var contexts = require('@panneau/core/contexts');
+var cssMediaquery = require('css-mediaquery');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
+var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
+var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
+var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
+
+var useAnimationFrame = function useAnimationFrame(onFrame) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+
+  var requestRef = react.useRef(null);
+  var startTimeRef = react.useRef(null);
+
+  var callback = function callback(time) {
+    if (!startTimeRef.current) {
+      startTimeRef.current = time;
+    }
+
+    var progress = time - startTimeRef.current;
+    onFrame(progress);
+    requestRef.current = requestAnimationFrame(callback);
+  };
+
+  react.useEffect(function () {
+    if (!disabled) {
+      requestRef.current = requestAnimationFrame(callback);
+    }
+
+    return function () {
+      if (requestRef.current !== null) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+  }, [disabled]);
+};
+
+var useFormattedDate = function useFormattedDate() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$format = _ref.format,
+      format = _ref$format === void 0 ? null : _ref$format,
+      _ref$showToday = _ref.showToday,
+      showToday = _ref$showToday === void 0 ? true : _ref$showToday;
+
+  var intl = reactIntl.useIntl();
+  var today = dayjs__default["default"]();
+  return react.useCallback(function (date) {
+    var dateToFormat = isString__default["default"](date) ? dayjs__default["default"](date) : date;
+
+    if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
+      return intl.formatMessage({
+        "id": "v4Qtl9",
+        "defaultMessage": [{
+          "type": 0,
+          "value": "Today"
+        }]
+      });
+    }
+
+    return intl.formatDate(dayjs__default["default"](date).toDate(), _objectSpread__default["default"]({
+      year: 'numeric',
+      month: 'long',
+      day: '2-digit'
+    }, format));
+  }, [today, showToday, format]);
+};
+var useFormattedTime = function useFormattedTime() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$format = _ref2.format,
+      format = _ref2$format === void 0 ? null : _ref2$format,
+      _ref2$showNow = _ref2.showNow,
+      showNow = _ref2$showNow === void 0 ? true : _ref2$showNow,
+      _ref2$timeGap = _ref2.timeGap,
+      timeGap = _ref2$timeGap === void 0 ? 2 : _ref2$timeGap;
+
+  var intl = reactIntl.useIntl();
+  var now = dayjs__default["default"]();
+  return react.useCallback(function (date) {
+    var dateToFormat = isString__default["default"](date) ? dayjs__default["default"](date) : date;
+
+    if (showNow && dateToFormat.format('YYYY-MM-DD') === now.format('YYYY-MM-DD') && dateToFormat.hour() === now.hour() && dateToFormat.minute() > now.minute() - timeGap && dateToFormat.minute() < now.minute() + timeGap) {
+      return intl.formatMessage({
+        "id": "3na7F8",
+        "defaultMessage": [{
+          "type": 0,
+          "value": "Now"
+        }]
+      });
+    }
+
+    return intl.formatTime(dateToFormat.toDate(), _objectSpread__default["default"]({
+      hour: 'numeric',
+      minute: 'numeric'
+    }, format));
+  }, [now, showNow, timeGap, format]);
+};
+
+var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
+var useDocumentEvent = utils.createUseEvent(eventsManager$1);
+
+var _excluded$1 = ["value", "errors", "onChange"];
+
+var getFieldsPropsFromFields = function getFieldsPropsFromFields(fields, _ref) {
+  var value = _ref.value,
+      errors = _ref.errors,
+      _onChange = _ref.onChange,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+
+  var locales = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return fields.reduce(function (allFields, field) {
+    var _ref2 = isObject__default["default"](field) ? field : {},
+        _ref2$name = _ref2.name,
+        name = _ref2$name === void 0 ? isString__default["default"](field) ? field : null : _ref2$name,
+        _ref2$component = _ref2.component,
+        component = _ref2$component === void 0 ? null : _ref2$component;
+
+    var fieldErrors = errors !== null ? errors[name] || [] : [];
+    var localizedErrors = component === 'localized' ? (locales || []).reduce(function (previousErrors, locale) {
+      var items = errors !== null ? get__default["default"](errors, "".concat(name, ".").concat(locale), []) || [] : [];
+      var finalItems = isArray__default["default"](items) ? items : [items];
+      var finalPrevious = isArray__default["default"](previousErrors) ? previousErrors : [];
+      return [].concat(_toConsumableArray__default["default"](finalPrevious), _toConsumableArray__default["default"](finalItems));
+    }, fieldErrors) : fieldErrors;
+    return [].concat(_toConsumableArray__default["default"](allFields), [_objectSpread__default["default"](_objectSpread__default["default"]({}, isObject__default["default"](field) ? field : null), {}, {
+      name: name,
+      component: component,
+      value: value !== null ? value[name] || null : null,
+      errors: localizedErrors.length > 0 ? localizedErrors : null,
+      onChange: function onChange(fieldValue) {
+        return _onChange(name, fieldValue);
+      }
+    }, props)]);
+  }, []);
+};
+
+var useForm = function useForm() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _opts$fields = opts.fields,
+      fields = _opts$fields === void 0 ? [] : _opts$fields,
+      _opts$action = opts.action,
+      action = _opts$action === void 0 ? null : _opts$action,
+      _opts$postForm = opts.postForm,
+      postForm = _opts$postForm === void 0 ? null : _opts$postForm,
+      _opts$initialErrors = opts.initialErrors,
+      initialErrors = _opts$initialErrors === void 0 ? null : _opts$initialErrors,
+      _opts$errors = opts.errors,
+      providedErrors = _opts$errors === void 0 ? null : _opts$errors,
+      _opts$setErrors = opts.setErrors,
+      setProvidedErrors = _opts$setErrors === void 0 ? null : _opts$setErrors,
+      _opts$initialGeneralE = opts.initialGeneralError,
+      initialGeneralError = _opts$initialGeneralE === void 0 ? null : _opts$initialGeneralE,
+      _opts$generalError = opts.generalError,
+      providedGeneralError = _opts$generalError === void 0 ? null : _opts$generalError,
+      _opts$setGeneralError = opts.setGeneralError,
+      setProvidedGeneralError = _opts$setGeneralError === void 0 ? null : _opts$setGeneralError,
+      _opts$initialValue = opts.initialValue,
+      initialValue = _opts$initialValue === void 0 ? null : _opts$initialValue,
+      _opts$value = opts.value,
+      providedValue = _opts$value === void 0 ? null : _opts$value,
+      _opts$setValue = opts.setValue,
+      setProvidedValue = _opts$setValue === void 0 ? null : _opts$setValue,
+      _opts$onComplete = opts.onComplete,
+      onComplete = _opts$onComplete === void 0 ? null : _opts$onComplete,
+      _opts$locales = opts.locales,
+      locales = _opts$locales === void 0 ? [] : _opts$locales;
+
+  var _useState = react.useState(initialValue || providedValue),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      stateValue = _useState2[0],
+      setStateValue = _useState2[1];
+
+  var _useState3 = react.useState(initialErrors || providedErrors),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      stateErrors = _useState4[0],
+      setStateErrors = _useState4[1];
+
+  var _useState5 = react.useState(initialGeneralError || providedGeneralError),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      stateGeneralError = _useState6[0],
+      setStateGeneralError = _useState6[1];
+
+  var _useState7 = react.useState({
+    success: false,
+    loading: false,
+    error: false
+  }),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
+      requestState = _useState8[0],
+      setRequestState = _useState8[1];
+
+  var _useState9 = react.useState(null),
+      _useState10 = _slicedToArray__default["default"](_useState9, 2),
+      response = _useState10[0],
+      setResponse = _useState10[1];
+
+  var hasProvidedValue = setProvidedValue !== null;
+  var value = hasProvidedValue ? providedValue : stateValue;
+  var setValue = hasProvidedValue ? setProvidedValue : setStateValue;
+  var hasProvidedErrors = setProvidedErrors !== null;
+  var errors = hasProvidedErrors ? providedErrors : stateErrors;
+  var setErrors = hasProvidedErrors ? setProvidedErrors : setStateErrors;
+  var hasProvidedGeneralError = setProvidedGeneralError !== null;
+  var generalError = hasProvidedGeneralError ? providedGeneralError : stateGeneralError;
+  var setGeneralError = hasProvidedGeneralError ? setProvidedGeneralError : setStateGeneralError;
+  var fieldsKey = [value, errors, locales].concat(fields);
+  var onFieldChange = react.useCallback(function (fieldName, fieldValue) {
+    var fieldErrors = errors !== null ? errors[fieldName] || null : null;
+
+    if (fieldErrors !== null) {
+      setErrors(_objectSpread__default["default"](_objectSpread__default["default"]({}, errors), {}, _defineProperty__default["default"]({}, fieldName, null)));
+    }
+
+    setValue(_objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, _defineProperty__default["default"]({}, fieldName, fieldValue)));
+  }, fieldsKey);
+  var fieldsProps = react.useMemo(function () {
+    return getFieldsPropsFromFields(fields, {
+      value: value,
+      errors: errors,
+      onChange: onFieldChange
+    }, locales);
+  }, fieldsKey);
+  var csrfToken = react.useMemo(function () {
+    return fetch.getCsrfToken();
+  }, []);
+
+  var onSubmitError = function onSubmitError(error) {
+    setRequestState({
+      success: false,
+      loading: false,
+      error: true
+    });
+
+    if (error.name === 'ValidationError') {
+      var _error$getResponseDat = error.getResponseData(),
+          _error$getResponseDat2 = _error$getResponseDat.errors,
+          validationErrors = _error$getResponseDat2 === void 0 ? null : _error$getResponseDat2;
+
+      setErrors(validationErrors);
+    } else {
+      setGeneralError(error.message);
+    }
+  };
+
+  var onSubmitSuccess = function onSubmitSuccess(resp) {
+    setRequestState({
+      success: true,
+      loading: false,
+      error: false
+    });
+    setResponse(resp);
+
+    if (onComplete !== null) {
+      onComplete(resp);
+    }
+  };
+
+  var finalPostForm = react.useCallback(function (postAction, postData) {
+    return postForm !== null ? postForm(postAction, postData) : fetch.postJSON(postAction, postData, {
+      credentials: 'include',
+      headers: fetch.getCSRFHeaders()
+    });
+  }, [postForm, fetch.postJSON, fetch.getCSRFHeaders]);
+  var submit = react.useCallback(function () {
+    var submitValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : value;
+    setRequestState({
+      success: false,
+      loading: true,
+      error: false
+    });
+    setGeneralError(null);
+    setErrors(null);
+    finalPostForm(action, _objectSpread__default["default"](_objectSpread__default["default"]({}, submitValue), {}, {
+      _token: csrfToken
+    })).then(onSubmitSuccess)["catch"](onSubmitError);
+  }, [finalPostForm, action, value]);
+  var onSubmit = react.useCallback(function (e) {
+    e.preventDefault();
+    submit();
+  }, [submit]);
+  var status = null;
+
+  if (requestState.loading) {
+    status = 'loading';
+  } else if (requestState.success) {
+    status = 'success';
+  } else if (requestState.error) {
+    status = 'error';
+  }
+
+  return _objectSpread__default["default"](_objectSpread__default["default"]({
+    value: value,
+    setValue: setValue,
+    csrfToken: csrfToken,
+    submit: submit,
+    onSubmit: onSubmit
+  }, requestState), {}, {
+    status: status,
+    response: response,
+    fields: fieldsProps,
+    errors: errors,
+    generalError: generalError
+  });
+};
+
+var buildThresholdArray = function buildThresholdArray() {
+  return [0, 1.0];
+};
+
+var observersCache = new Map();
+
+var getOptionsKey = function getOptionsKey(_ref) {
+  var _ref$root = _ref.root,
+      root = _ref$root === void 0 ? null : _ref$root,
+      rootMargin = _ref.rootMargin,
+      _ref$threshold = _ref.threshold,
+      threshold = _ref$threshold === void 0 ? null : _ref$threshold;
+  return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
+};
+
+var createObserver = function createObserver(Observer) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var subscribers = [];
+
+  var addSubscriber = function addSubscriber(element, callback) {
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+
+    if (currentSubscriber !== null) {
+      return subscribers.map(function (it) {
+        return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
+          callbacks: [].concat(_toConsumableArray__default["default"](it.callbacks), [callback])
+        }) : it;
+      }).filter(function (it) {
+        return it.callbacks.length > 0;
+      });
+    }
+
+    return [].concat(_toConsumableArray__default["default"](subscribers), [{
+      element: element,
+      callbacks: [callback]
+    }]);
+  };
+
+  var removeSubscriber = function removeSubscriber(element, callback) {
+    return subscribers.map(function (it) {
+      return it.element === element ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
+        callbacks: it.callbacks.filter(function (subCallback) {
+          return subCallback !== callback;
+        })
+      }) : it;
+    }).filter(function (it) {
+      return it.callbacks.length > 0;
+    });
+  };
+
+  var onUpdate = function onUpdate(entries) {
+    entries.forEach(function (entry) {
+      subscribers.forEach(function (_ref2) {
+        var element = _ref2.element,
+            callbacks = _ref2.callbacks;
+
+        if (element === entry.target) {
+          callbacks.forEach(function (callback) {
+            callback(entry);
+          });
+        }
+      });
+    });
+  };
+
+  var observer = new Observer(onUpdate, options);
+
+  var unsubscribe = function unsubscribe(element) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    subscribers = removeSubscriber(element, callback);
+
+    if (typeof observer.unobserve === 'undefined') {
+      observer.disconnect();
+      subscribers.forEach(function (subscriber) {
+        observer.observe(subscriber.element);
+      });
+      return;
+    }
+
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+
+    if (currentSubscriber === null) {
+      observer.unobserve(element);
+    }
+  };
+
+  var subscribe = function subscribe(element, callback) {
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+    subscribers = addSubscriber(element, callback);
+
+    if (currentSubscriber === null) {
+      observer.observe(element);
+    }
+  };
+
+  return {
+    subscribe: subscribe,
+    unsubscribe: unsubscribe,
+    observer: observer
+  };
+};
+
+var getObserver = function getObserver(Observer) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var observerKey = getOptionsKey(options);
+
+  if (!observersCache.has(Observer)) {
+    observersCache.set(Observer, {});
+  }
+
+  var observers = observersCache.get(Observer);
+
+  if (typeof observers[observerKey] === 'undefined') {
+    observers[observerKey] = createObserver(Observer, options);
+    observersCache.set(Observer, observers);
+  }
+
+  return observers[observerKey];
+};
+var useObserver = function useObserver(Observer) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _opts$root = opts.root,
+      root = _opts$root === void 0 ? null : _opts$root,
+      _opts$rootMargin = opts.rootMargin,
+      rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
+      _opts$threshold = opts.threshold,
+      threshold = _opts$threshold === void 0 ? null : _opts$threshold,
+      _opts$disabled = opts.disabled,
+      disabled = _opts$disabled === void 0 ? false : _opts$disabled;
+
+  var _useState = react.useState(initialEntry),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      entry = _useState2[0],
+      setEntry = _useState2[1];
+
+  var nodeRef = react.useRef(null);
+  var currentElement = react.useRef(null);
+  var elementChanged = nodeRef.current !== currentElement.current;
+  react.useEffect(function () {
+    var nodeElement = nodeRef.current;
+
+    var callback = function callback(newEntry) {
+      return setEntry(newEntry);
+    };
+
+    var unsubscribe = null;
+
+    if (nodeElement !== null) {
+      var newOpts = {};
+
+      if (root !== null) {
+        newOpts.root = root;
+      }
+
+      if (rootMargin !== null) {
+        newOpts.rootMargin = rootMargin;
+      }
+
+      if (threshold !== null) {
+        newOpts.threshold = threshold;
+      }
+
+      var _getObserver = getObserver(Observer, newOpts),
+          subscribe = _getObserver.subscribe,
+          localUnsubscribe = _getObserver.unsubscribe;
+
+      unsubscribe = localUnsubscribe;
+      subscribe(nodeElement, callback);
+    }
+
+    currentElement.current = nodeElement;
+    return function () {
+      if (unsubscribe !== null) {
+        unsubscribe(nodeElement, callback);
+      }
+    };
+  }, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
+  return {
+    ref: nodeRef,
+    entry: entry
+  };
+};
+/**
+ * Intersection Observer
+ */
+
+var thresholdArray = buildThresholdArray();
+var intersectionObserverInitialEntry = {
+  target: null,
+  time: null,
+  isVisible: false,
+  isIntersecting: false,
+  intersectionRatio: 0,
+  intersectionRect: null,
+  boundingClientRect: null,
+  rootBounds: null
+};
+var useIntersectionObserver = function useIntersectionObserver() {
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref3$root = _ref3.root,
+      root = _ref3$root === void 0 ? null : _ref3$root,
+      _ref3$rootMargin = _ref3.rootMargin,
+      rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
+      _ref3$threshold = _ref3.threshold,
+      threshold = _ref3$threshold === void 0 ? thresholdArray : _ref3$threshold,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+
+  return useObserver(typeof window !== 'undefined' ? IntersectionObserver : null, {
+    root: root,
+    rootMargin: rootMargin,
+    threshold: threshold,
+    disabled: disabled
+  }, intersectionObserverInitialEntry);
+};
+/**
+ * Resize Observer
+ */
+
+var resizeObserverInitialEntry = {
+  target: null,
+  contentRect: null,
+  contentBoxSize: null,
+  borderBoxSize: null
+};
+var useResizeObserver = function useResizeObserver() {
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
+
+  return useObserver(typeof window !== 'undefined' ? ResizeObserver : null, {
+    disabled: disabled
+  }, resizeObserverInitialEntry);
+};
+
+var useIsVisible = function useIsVisible() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      rootMargin = _ref.rootMargin,
+      _ref$threshold = _ref.threshold,
+      threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
+      _ref$persist = _ref.persist,
+      persist = _ref$persist === void 0 ? false : _ref$persist;
+
+  var _useIntersectionObser = useIntersectionObserver({
+    rootMargin: rootMargin,
+    threshold: threshold
+  }),
+      ref = _useIntersectionObser.ref,
+      isIntersecting = _useIntersectionObser.entry.isIntersecting;
+
+  var wasIntersecting = react.useRef(isIntersecting);
+
+  if (isIntersecting && !wasIntersecting.current) {
+    wasIntersecting.current = isIntersecting;
+  }
+
+  var isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
+  return {
+    ref: ref,
+    visible: isVisible
+  };
+};
+
+var fontsMap = {
+  loading: [],
+  active: []
+};
+
+var isFontLoading = function isFontLoading(name) {
+  return fontsMap.loading.indexOf(name) !== -1;
+};
+
+var isFontActive = function isFontActive(name) {
+  return fontsMap.active.indexOf(name) !== -1;
+};
+
+var addFontLoading = function addFontLoading(name) {
+  fontsMap.active = fontsMap.active.filter(function (it) {
+    return it !== name;
+  });
+  fontsMap.loading = [].concat(_toConsumableArray__default["default"](fontsMap.loading), [name]);
+};
+
+var removeFontLoading = function removeFontLoading(name) {
+  fontsMap.loading = fontsMap.loading.filter(function (it) {
+    return it !== name;
+  });
+};
+
+var addFontActive = function addFontActive(name) {
+  fontsMap.loading = fontsMap.loading.filter(function (it) {
+    return it !== name;
+  });
+  fontsMap.active = [].concat(_toConsumableArray__default["default"](fontsMap.active), [name]);
+};
+
+var useLoadedFonts = function useLoadedFonts(fonts) {
+  var _useState = react.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      loaded = _useState2[0],
+      setLoaded = _useState2[1];
+
+  react.useEffect(function () {
+    var config = fonts.reduce(function (newConfig, font) {
+      var _ref = isObject__default["default"](font) ? font : {
+        type: 'system',
+        name: font
+      },
+          type = _ref.type,
+          name = _ref.name;
+
+      if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
+        return _objectSpread__default["default"](_objectSpread__default["default"]({}, newConfig), {}, _defineProperty__default["default"]({}, type, {
+          families: [].concat(_toConsumableArray__default["default"](newConfig !== null ? (newConfig[type] || {}).families || [] : []), [name])
+        }));
+      }
+
+      return newConfig;
+    }, null);
+    var hasConfig = config !== null;
+
+    if (hasConfig && typeof window !== 'undefined') {
+      Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); }).then(function (_ref2) {
+        var WebFont = _ref2["default"];
+        return WebFont.load(_objectSpread__default["default"](_objectSpread__default["default"]({}, config), {}, {
+          timeout: 3000,
+          active: function active() {
+            return setLoaded(true);
+          },
+          fontloading: function fontloading(name) {
+            return addFontLoading(name);
+          },
+          fontactive: function fontactive(name) {
+            return addFontActive(name);
+          },
+          fontinactive: function fontinactive(name) {
+            return removeFontLoading(name);
+          }
+        }));
+      });
+    } else {
+      setLoaded(true);
+    }
+  }, [fonts, setLoaded]);
+  return {
+    loaded: loaded
+  };
+};
+
+var progressSteps = [0.1, 0.25, 0.5, 0.75, 0.9];
+
+var useMediaApi = function useMediaApi() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? null : _ref$url,
+      _ref$initialMuted = _ref.initialMuted,
+      initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
+      _ref$onTimeUpdate = _ref.onTimeUpdate,
+      onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
+      _ref$onProgressStep = _ref.onProgressStep,
+      onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
+      _ref$onDurationChange = _ref.onDurationChanged,
+      onDurationChanged = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
+      _ref$onVolumeChanged = _ref.onVolumeChanged,
+      onVolumeChanged = _ref$onVolumeChanged === void 0 ? null : _ref$onVolumeChanged,
+      _ref$onPlay = _ref.onPlay,
+      onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
+      _ref$onPause = _ref.onPause,
+      onPause = _ref$onPause === void 0 ? null : _ref$onPause,
+      _ref$onEnded = _ref.onEnded,
+      onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
+      _ref$onSeeked = _ref.onSeeked,
+      onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
+      _ref$onLoadStart = _ref.onLoadStart,
+      onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
+      _ref$onCanPlayThough = _ref.onCanPlayThough,
+      onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough;
+
+  var ref = react.useRef(null);
+
+  var _useState = react.useState(initialMuted),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      muted = _useState2[0],
+      setMuted = _useState2[1];
+
+  var _useState3 = react.useState(null),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      currentTime = _useState4[0],
+      setCurrentTime = _useState4[1];
+
+  var _useState5 = react.useState(null),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      duration = _useState6[0],
+      setDuration = _useState6[1];
+
+  var _useState7 = react.useState(false),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
+      playing = _useState8[0],
+      setPlaying = _useState8[1];
+
+  var _useState9 = react.useState(false),
+      _useState10 = _slicedToArray__default["default"](_useState9, 2),
+      ready = _useState10[0],
+      setReady = _useState10[1];
+
+  var _useState11 = react.useState(true),
+      _useState12 = _slicedToArray__default["default"](_useState11, 2),
+      initialPlay = _useState12[0],
+      setInitialPlay = _useState12[1];
+
+  var progressStepsReached = react.useRef({});
+  var paused = !playing; // Exposed methods
+
+  var play = react.useCallback(function () {
+    var media = ref.current;
+
+    if (media !== null) {
+      media.play();
+    }
+  }, []);
+  var pause = react.useCallback(function () {
+    var media = ref.current;
+
+    if (media !== null) {
+      media.pause();
+    }
+  }, []);
+  var togglePlay = react.useCallback(function () {
+    var media = ref.current;
+
+    if (media !== null) {
+      if (playing) {
+        media.pause();
+      } else {
+        media.play();
+      }
+    }
+  }, [playing]);
+  var stop = react.useCallback(function () {
+    var media = ref.current;
+
+    if (media !== null) {
+      media.pause();
+      media.currentTime = 0;
+    }
+  }, []);
+  var seek = react.useCallback(function (time) {
+    var media = ref.current;
+
+    if (media !== null) {
+      media.currentTime = time;
+    }
+  }, []);
+  var mute = react.useCallback(function () {
+    var media = ref.current;
+
+    if (media !== null) {
+      media.muted = true;
+    }
+  }, []);
+  var unMute = react.useCallback(function () {
+    var media = ref.current;
+
+    if (media !== null) {
+      media.muted = false;
+    }
+  }, []);
+  var toggleMute = react.useCallback(function () {
+    var media = ref.current;
+
+    if (media !== null) {
+      media.muted = !muted;
+    }
+  }, [muted]); // Media events callbacks
+
+  var onCustomPlay = react.useCallback(function () {
+    if (onPlay !== null) {
+      onPlay({
+        initial: initialPlay
+      });
+    }
+
+    if (initialPlay) {
+      setInitialPlay(false);
+    }
+
+    setPlaying(true);
+  }, [initialPlay, setPlaying, onPlay]);
+  var onCustomPause = react.useCallback(function () {
+    var media = ref.current;
+    setPlaying(false);
+
+    if (onPause !== null) {
+      onPause({
+        midway: media.currentTime > 0 && media.currentTime < media.duration
+      });
+    }
+  }, [setPlaying, onPause]);
+  var onCustomEnded = react.useCallback(function () {
+    var media = ref.current;
+    media.currentTime = 0;
+
+    if (onEnded !== null) {
+      onEnded();
+    }
+
+    setInitialPlay(true);
+  }, [setInitialPlay, onEnded]);
+  var onCustomTimeUpdate = react.useCallback(function () {
+    var media = ref.current;
+    setCurrentTime(media.currentTime);
+
+    if (onTimeUpdate !== null) {
+      onTimeUpdate(media.currentTime);
+    }
+
+    var progress = media.currentTime / media.duration;
+    var currentSteps = progressStepsReached.current;
+    var stepsToTrack = progressSteps.filter(function (step) {
+      return progress > step && typeof currentSteps[step] === 'undefined';
+    });
+    stepsToTrack.forEach(function (step) {
+      if (onProgressStep !== null) {
+        onProgressStep(step);
+      }
+
+      currentSteps[step] = true;
+    });
+  }, [setCurrentTime, onTimeUpdate, onProgressStep]);
+  var onCustomDurationChange = react.useCallback(function () {
+    var media = ref.current;
+    setDuration(media.duration);
+
+    if (onDurationChanged !== null) {
+      onDurationChanged(media.duration);
+    }
+  }, [setDuration, onDurationChanged]);
+  var onCustomSeeked = react.useCallback(function () {
+    var media = ref.current;
+
+    if (onSeeked !== null) {
+      onSeeked(media.currentTime);
+    }
+  }, [onSeeked]);
+  var onCustomVolumeChange = react.useCallback(function () {
+    var media = ref.current;
+    setMuted(media.muted);
+
+    if (onVolumeChanged !== null) {
+      onVolumeChanged(media.muted, media.volume);
+    }
+  }, [setMuted, onVolumeChanged]);
+  var onCustomLoadStart = react.useCallback(function () {
+    setReady(false);
+
+    if (onLoadStart !== null) {
+      onLoadStart();
+    }
+  }, [setReady, onLoadStart]);
+  var onCustomCanPlayThrough = react.useCallback(function () {
+    setReady(true);
+
+    if (onCanPlayThough !== null) {
+      onCanPlayThough();
+    }
+  }, [setReady, onCanPlayThough]);
+  react.useEffect(function () {
+    var media = ref.current;
+
+    if (media !== null) {
+      media.addEventListener('timeupdate', onCustomTimeUpdate);
+      media.addEventListener('durationchange', onCustomDurationChange);
+      media.addEventListener('volumechange', onCustomVolumeChange);
+      media.addEventListener('play', onCustomPlay);
+      media.addEventListener('pause', onCustomPause);
+      media.addEventListener('ended', onCustomEnded);
+      media.addEventListener('seeked', onCustomSeeked);
+      media.addEventListener('loadstart', onCustomLoadStart);
+      media.addEventListener('canplaythrough', onCustomCanPlayThrough);
+    }
+
+    return function () {
+      if (media !== null) {
+        media.removeEventListener('timeupdate', onCustomTimeUpdate);
+        media.removeEventListener('durationchange', onCustomDurationChange);
+        media.removeEventListener('volumechange', onCustomVolumeChange);
+        media.removeEventListener('play', onCustomPlay);
+        media.removeEventListener('pause', onCustomPause);
+        media.removeEventListener('ended', onCustomEnded);
+        media.removeEventListener('seeked', onCustomSeeked);
+        media.removeEventListener('loadstart', onCustomLoadStart);
+        media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
+      }
+    };
+  }, [url]);
+  return {
+    ref: ref,
+    play: play,
+    pause: pause,
+    togglePlay: togglePlay,
+    stop: stop,
+    seek: seek,
+    mute: mute,
+    unMute: unMute,
+    toggleMute: toggleMute,
+    muted: muted,
+    currentTime: currentTime,
+    duration: duration,
+    playing: playing,
+    paused: paused,
+    ready: ready
+  };
+};
+
+var useMediasParser = function useMediasParser() {
+  // const screensManager = useScreensManager();
+  var fieldsManager = contexts.useFieldsManager(); // Convert medias object to path
+
+  var parser = react.useMemo(function () {
+    return new core.MediasParser({
+      // screensManager,
+      fieldsManager: fieldsManager
+    });
+  }, [fieldsManager]);
+  var toPath = react.useCallback(function (story) {
+    return parser.toPath(story);
+  }, [parser]);
+  var fromPath = react.useCallback(function (story) {
+    return parser.fromPath(story);
+  }, [parser]);
+  return {
+    toPath: toPath,
+    fromPath: fromPath,
+    parser: parser
+  };
+};
+
+var getResource = function getResource(resources, resourceId) {
+  return resourceId !== null && !isObject__default["default"](resourceId) ? resources.find(function (it) {
+    return it.id === resourceId;
+  }) || null : resourceId;
+};
+
+var useResourceUrlGenerator = function useResourceUrlGenerator() {
+  var resourceId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var resources = contexts.usePanneauResources();
+  var contextResource = contexts.useResource();
+  var resource = getResource(resources, resourceId) || contextResource;
+  var route = contexts.useUrlGenerator();
+  return function (routeResourceId) {
+    var routeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var finalRouteName = resourceId !== null ? routeResourceId : routeName;
+    var finalParams = resourceId !== null ? routeName : params;
+    var finalResource = getResource(resources, routeResourceId) || resource;
+
+    var _ref = finalResource || {},
+        _ref$id = _ref.id,
+        id = _ref$id === void 0 ? null : _ref$id; // console.log('gen', finalRouteName, route(`resources.${finalRouteName}`, {
+    //     ...finalParams,
+    //     resource: id,
+    // }));
+
+
+    return id !== null ? route("resources.".concat(finalRouteName), _objectSpread__default["default"](_objectSpread__default["default"]({}, finalParams), {}, {
+      resource: id
+    })) : null;
+  };
+};
+
+var _excluded = ["width", "height"];
+
+var useScreenSize = function useScreenSize(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? null : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? null : _ref$height,
+      _ref$landscape = _ref.landscape,
+      landscape = _ref$landscape === void 0 ? false : _ref$landscape,
+      _ref$screens = _ref.screens,
+      screens = _ref$screens === void 0 ? [] : _ref$screens,
+      _ref$mediaType = _ref.mediaType,
+      mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
+      _ref$media = _ref.media,
+      providedMedia = _ref$media === void 0 ? null : _ref$media;
+  // Get media
+  var media = react.useMemo(function () {
+    return providedMedia !== null ? providedMedia : {
+      type: mediaType,
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    };
+  }, [providedMedia, mediaType, width, height]); // Get matching screens
+
+  var matchingScreens = react.useMemo(function () {
+    return _toConsumableArray__default["default"](screens).reverse().filter(function (_ref2) {
+      var _ref2$mediaQuery = _ref2.mediaQuery,
+          mediaQuery = _ref2$mediaQuery === void 0 ? null : _ref2$mediaQuery;
+      return mediaQuery === null || cssMediaquery.match(mediaQuery, media);
+    });
+  }, [screens, media]);
+  return {
+    screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
+    screens: _toConsumableArray__default["default"](matchingScreens).reverse().map(function (_ref3) {
+      var name = _ref3.name;
+      return name;
+    }),
+    width: width,
+    height: height,
+    landscape: landscape
+  };
+};
+
+var useScreenSizeFromElement = function useScreenSizeFromElement() {
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref4$width = _ref4.width,
+      width = _ref4$width === void 0 ? null : _ref4$width,
+      _ref4$height = _ref4.height,
+      height = _ref4$height === void 0 ? null : _ref4$height,
+      opts = _objectWithoutProperties__default["default"](_ref4, _excluded);
+
+  var _useResizeObserver = useResizeObserver(),
+      ref = _useResizeObserver.ref,
+      contentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref5 = contentRect || {},
+      _ref5$width = _ref5.width,
+      calculatedWidth = _ref5$width === void 0 ? 0 : _ref5$width,
+      _ref5$height = _ref5.height,
+      calculatedHeight = _ref5$height === void 0 ? 0 : _ref5$height;
+
+  var semiFinalWidth = width !== null ? width : calculatedWidth;
+  var semiFinalHeight = height !== null ? height : calculatedHeight;
+  var landscape = semiFinalHeight > 0 && semiFinalWidth > semiFinalHeight;
+  var _opts$withoutMaxSize = opts.withoutMaxSize,
+      withoutMaxSize = _opts$withoutMaxSize === void 0 ? false : _opts$withoutMaxSize;
+  var finalWidth = landscape && !withoutMaxSize ? Math.round(Math.max(320, 0.45 * semiFinalHeight)) : semiFinalWidth;
+  var finalHeight = landscape && !withoutMaxSize ? Math.round(Math.max(533, 0.75 * semiFinalHeight)) : semiFinalHeight;
+
+  if (finalWidth % 2 === 1) {
+    finalWidth -= 1;
+  }
+
+  if (finalHeight % 2 === 1) {
+    finalHeight -= 1;
+  }
+
+  var screenSize = useScreenSize(_objectSpread__default["default"]({
+    width: finalWidth,
+    height: finalHeight,
+    landscape: landscape
+  }, opts));
+  return {
+    ref: ref,
+    screenSize: screenSize
+  };
+};
+
+var getWindowSize = function getWindowSize() {
+  return {
+    width: typeof window !== 'undefined' ? window.innerWidth : null,
+    height: typeof window !== 'undefined' ? window.innerHæeight : null
+  };
+};
+
+var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
+  var _useState = react.useState(getWindowSize()),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      windowSize = _useState2[0],
+      setWindowSize = _useState2[1];
+
+  react.useEffect(function () {
+    var onResize = function onResize() {
+      return setWindowSize(getWindowSize());
+    };
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', onResize);
+    }
+
+    return function () {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', onResize);
+      }
+    };
+  }, [setWindowSize]);
+  return useScreenSize(_objectSpread__default["default"](_objectSpread__default["default"]({}, opts), windowSize));
+};
+
+var eventsManager = typeof window !== 'undefined' ? new core.EventsManager(window) : null;
+var useWindowEvent = utils.createUseEvent(eventsManager);
+
+exports.getObserver = getObserver;
+exports.useAnimationFrame = useAnimationFrame;
+exports.useDocumentEvent = useDocumentEvent;
+exports.useForm = useForm;
+exports.useFormattedDate = useFormattedDate;
+exports.useFormattedTime = useFormattedTime;
+exports.useIntersectionObserver = useIntersectionObserver;
+exports.useIsVisible = useIsVisible;
+exports.useLoadedFonts = useLoadedFonts;
+exports.useMediaApi = useMediaApi;
+exports.useMediasParser = useMediasParser;
+exports.useObserver = useObserver;
+exports.useResizeObserver = useResizeObserver;
+exports.useResourceUrlGenerator = useResourceUrlGenerator;
+exports.useScreenSizeFromElement = useScreenSizeFromElement;
+exports.useScreenSizeFromWindow = useScreenSizeFromWindow;
+exports.useWindowEvent = useWindowEvent;