@panneau/core 1.0.0-alpha.97 → 1.0.3-alpha.0

package/lib/hooks.js

@@ -14,6 +14,8 @@ 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');
@@ -29,14 +31,12 @@ function _interopNamespace(e) {
                 var d = Object.getOwnPropertyDescriptor(e, k);
                 Object.defineProperty(n, k, d.get ? d : {
                     enumerable: true,
-                    get: function () {
-                        return e[k];
-                    }
+                    get: function () { return e[k]; }
                 });
             }
         });
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
@@ -47,6 +47,8 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 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) {
@@ -88,9 +90,9 @@ var useFormattedDate = function useFormattedDate() {
       showToday = _ref$showToday === void 0 ? true : _ref$showToday;
 
   var intl = reactIntl.useIntl();
-  var today = dayjs__default['default']();
+  var today = dayjs__default["default"]();
   return react.useCallback(function (date) {
-    var dateToFormat = isString__default['default'](date) ? dayjs__default['default'](date) : 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({
@@ -102,7 +104,7 @@ var useFormattedDate = function useFormattedDate() {
       });
     }
 
-    return intl.formatDate(dayjs__default['default'](date).toDate(), _objectSpread__default['default']({
+    return intl.formatDate(dayjs__default["default"](date).toDate(), _objectSpread__default["default"]({
       year: 'numeric',
       month: 'long',
       day: '2-digit'
@@ -119,9 +121,9 @@ var useFormattedTime = function useFormattedTime() {
       timeGap = _ref2$timeGap === void 0 ? 2 : _ref2$timeGap;
 
   var intl = reactIntl.useIntl();
-  var now = dayjs__default['default']();
+  var now = dayjs__default["default"]();
   return react.useCallback(function (date) {
-    var dateToFormat = isString__default['default'](date) ? dayjs__default['default'](date) : 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({
@@ -133,7 +135,7 @@ var useFormattedTime = function useFormattedTime() {
       });
     }
 
-    return intl.formatTime(dateToFormat.toDate(), _objectSpread__default['default']({
+    return intl.formatTime(dateToFormat.toDate(), _objectSpread__default["default"]({
       hour: 'numeric',
       minute: 'numeric'
     }, format));
@@ -143,24 +145,34 @@ var useFormattedTime = function useFormattedTime() {
 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, ["value", "errors", "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 : {},
+    var _ref2 = isObject__default["default"](field) ? field : {},
         _ref2$name = _ref2.name,
-        name = _ref2$name === void 0 ? isString__default['default'](field) ? field : null : _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;
 
-    return [].concat(_toConsumableArray__default['default'](allFields), [_objectSpread__default['default'](_objectSpread__default['default']({}, isObject__default['default'](field) ? field : null), {}, {
+    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: errors !== null ? errors[name] || null : null,
+      errors: localizedErrors.length > 0 ? localizedErrors : null,
       onChange: function onChange(fieldValue) {
         return _onChange(name, fieldValue);
       }
@@ -195,20 +207,22 @@ var useForm = function useForm() {
       _opts$setValue = opts.setValue,
       setProvidedValue = _opts$setValue === void 0 ? null : _opts$setValue,
       _opts$onComplete = opts.onComplete,
-      onComplete = _opts$onComplete === void 0 ? null : _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),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
       stateValue = _useState2[0],
       setStateValue = _useState2[1];
 
   var _useState3 = react.useState(initialErrors || providedErrors),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
       stateErrors = _useState4[0],
       setStateErrors = _useState4[1];
 
   var _useState5 = react.useState(initialGeneralError || providedGeneralError),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
       stateGeneralError = _useState6[0],
       setStateGeneralError = _useState6[1];
 
@@ -217,12 +231,12 @@ var useForm = function useForm() {
     loading: false,
     error: false
   }),
-      _useState8 = _slicedToArray__default['default'](_useState7, 2),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
       requestState = _useState8[0],
       setRequestState = _useState8[1];
 
   var _useState9 = react.useState(null),
-      _useState10 = _slicedToArray__default['default'](_useState9, 2),
+      _useState10 = _slicedToArray__default["default"](_useState9, 2),
       response = _useState10[0],
       setResponse = _useState10[1];
 
@@ -235,22 +249,22 @@ var useForm = function useForm() {
   var hasProvidedGeneralError = setProvidedGeneralError !== null;
   var generalError = hasProvidedGeneralError ? providedGeneralError : stateGeneralError;
   var setGeneralError = hasProvidedGeneralError ? setProvidedGeneralError : setStateGeneralError;
-  var fieldsKey = [value, errors].concat(fields);
+  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)));
+      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)));
+    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();
@@ -281,7 +295,10 @@ var useForm = function useForm() {
       error: false
     });
     setResponse(resp);
-    onComplete(resp);
+
+    if (onComplete !== null) {
+      onComplete(resp);
+    }
   };
 
   var finalPostForm = react.useCallback(function (postAction, postData) {
@@ -299,7 +316,7 @@ var useForm = function useForm() {
     });
     setGeneralError(null);
     setErrors(null);
-    finalPostForm(action, _objectSpread__default['default'](_objectSpread__default['default']({}, submitValue), {}, {
+    finalPostForm(action, _objectSpread__default["default"](_objectSpread__default["default"]({}, submitValue), {}, {
       _token: csrfToken
     })).then(onSubmitSuccess)["catch"](onSubmitError);
   }, [finalPostForm, action, value]);
@@ -317,7 +334,7 @@ var useForm = function useForm() {
     status = 'error';
   }
 
-  return _objectSpread__default['default'](_objectSpread__default['default']({
+  return _objectSpread__default["default"](_objectSpread__default["default"]({
     value: value,
     setValue: setValue,
     csrfToken: csrfToken,
@@ -358,15 +375,15 @@ var createObserver = function createObserver(Observer) {
 
     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])
+        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), [{
+    return [].concat(_toConsumableArray__default["default"](subscribers), [{
       element: element,
       callbacks: [callback]
     }]);
@@ -374,7 +391,7 @@ var createObserver = function createObserver(Observer) {
 
   var removeSubscriber = function removeSubscriber(element, callback) {
     return subscribers.map(function (it) {
-      return it.element === element ? _objectSpread__default['default'](_objectSpread__default['default']({}, it), {}, {
+      return it.element === element ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
         callbacks: it.callbacks.filter(function (subCallback) {
           return subCallback !== callback;
         })
@@ -470,7 +487,7 @@ var useObserver = function useObserver(Observer) {
       disabled = _opts$disabled === void 0 ? false : _opts$disabled;
 
   var _useState = react.useState(initialEntry),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
       entry = _useState2[0],
       setEntry = _useState2[1];
 
@@ -619,7 +636,7 @@ var addFontLoading = function addFontLoading(name) {
   fontsMap.active = fontsMap.active.filter(function (it) {
     return it !== name;
   });
-  fontsMap.loading = [].concat(_toConsumableArray__default['default'](fontsMap.loading), [name]);
+  fontsMap.loading = [].concat(_toConsumableArray__default["default"](fontsMap.loading), [name]);
 };
 
 var removeFontLoading = function removeFontLoading(name) {
@@ -632,18 +649,18 @@ var addFontActive = function addFontActive(name) {
   fontsMap.loading = fontsMap.loading.filter(function (it) {
     return it !== name;
   });
-  fontsMap.active = [].concat(_toConsumableArray__default['default'](fontsMap.active), [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),
+      _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 : {
+      var _ref = isObject__default["default"](font) ? font : {
         type: 'system',
         name: font
       },
@@ -651,8 +668,8 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
           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 _objectSpread__default["default"](_objectSpread__default["default"]({}, newConfig), {}, _defineProperty__default["default"]({}, type, {
+          families: [].concat(_toConsumableArray__default["default"](newConfig !== null ? (newConfig[type] || {}).families || [] : []), [name])
         }));
       }
 
@@ -663,7 +680,7 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
     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), {}, {
+        return WebFont.load(_objectSpread__default["default"](_objectSpread__default["default"]({}, config), {}, {
           timeout: 3000,
           active: function active() {
             return setLoaded(true);
@@ -720,32 +737,32 @@ var useMediaApi = function useMediaApi() {
   var ref = react.useRef(null);
 
   var _useState = react.useState(initialMuted),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
       muted = _useState2[0],
       setMuted = _useState2[1];
 
   var _useState3 = react.useState(null),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
       currentTime = _useState4[0],
       setCurrentTime = _useState4[1];
 
   var _useState5 = react.useState(null),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
       duration = _useState6[0],
       setDuration = _useState6[1];
 
   var _useState7 = react.useState(false),
-      _useState8 = _slicedToArray__default['default'](_useState7, 2),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
       playing = _useState8[0],
       setPlaying = _useState8[1];
 
   var _useState9 = react.useState(false),
-      _useState10 = _slicedToArray__default['default'](_useState9, 2),
+      _useState10 = _slicedToArray__default["default"](_useState9, 2),
       ready = _useState10[0],
       setReady = _useState10[1];
 
   var _useState11 = react.useState(true),
-      _useState12 = _slicedToArray__default['default'](_useState11, 2),
+      _useState12 = _slicedToArray__default["default"](_useState11, 2),
       initialPlay = _useState12[0],
       setInitialPlay = _useState12[1];
 
@@ -977,7 +994,7 @@ var useMediasParser = function useMediasParser() {
 };
 
 var getResource = function getResource(resources, resourceId) {
-  return resourceId !== null && !isObject__default['default'](resourceId) ? resources.find(function (it) {
+  return resourceId !== null && !isObject__default["default"](resourceId) ? resources.find(function (it) {
     return it.id === resourceId;
   }) || null : resourceId;
 };
@@ -1003,12 +1020,14 @@ var useResourceUrlGenerator = function useResourceUrlGenerator() {
     // }));
 
 
-    return id !== null ? route("resources.".concat(finalRouteName), _objectSpread__default['default'](_objectSpread__default['default']({}, finalParams), {}, {
+    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,
@@ -1032,7 +1051,7 @@ var useScreenSize = function useScreenSize(_ref) {
   }, [providedMedia, mediaType, width, height]); // Get matching screens
 
   var matchingScreens = react.useMemo(function () {
-    return _toConsumableArray__default['default'](screens).reverse().filter(function (_ref2) {
+    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);
@@ -1040,7 +1059,7 @@ var useScreenSize = function useScreenSize(_ref) {
   }, [screens, media]);
   return {
     screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
-    screens: _toConsumableArray__default['default'](matchingScreens).reverse().map(function (_ref3) {
+    screens: _toConsumableArray__default["default"](matchingScreens).reverse().map(function (_ref3) {
       var name = _ref3.name;
       return name;
     }),
@@ -1056,7 +1075,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
       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, ["width", "height"]);
+      opts = _objectWithoutProperties__default["default"](_ref4, _excluded);
 
   var _useResizeObserver = useResizeObserver(),
       ref = _useResizeObserver.ref,
@@ -1084,7 +1103,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     finalHeight -= 1;
   }
 
-  var screenSize = useScreenSize(_objectSpread__default['default']({
+  var screenSize = useScreenSize(_objectSpread__default["default"]({
     width: finalWidth,
     height: finalHeight,
     landscape: landscape
@@ -1104,7 +1123,7 @@ var getWindowSize = function getWindowSize() {
 
 var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
   var _useState = react.useState(getWindowSize()),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
       windowSize = _useState2[0],
       setWindowSize = _useState2[1];
 
@@ -1123,7 +1142,7 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
       }
     };
   }, [setWindowSize]);
-  return useScreenSize(_objectSpread__default['default'](_objectSpread__default['default']({}, opts), windowSize));
+  return useScreenSize(_objectSpread__default["default"](_objectSpread__default["default"]({}, opts), windowSize));
 };
 
 var eventsManager = typeof window !== 'undefined' ? new core.EventsManager(window) : null;