@guillotinaweb/react-gmi 0.29.0 → 0.29.2-alpha.2

package/dist/react-gmi.modern.js

@@ -92,6 +92,7 @@ class Traversal {
   }
 
   apply(data) {
+    // apply a optimistic update to context
     this.dispatch({
       type: 'APPLY',
       payload: data
@@ -682,8 +683,10 @@ function base64ToArrayBuffer(base64) {
   return bytes;
 }
 function stringToSlug(str) {
-  str = str.replace(/^\s+|\s+$/g, '');
-  str = str.toLowerCase();
+  str = str.replace(/^\s+|\s+$/g, ''); // trim
+
+  str = str.toLowerCase(); // remove accents, swap ñ for n, etc
+
   const from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
   const to = 'aaaaeeeeiiiioooouuuunc------';
 
@@ -691,7 +694,10 @@ function stringToSlug(str) {
     str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
   }
 
-  str = str.replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
+  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
+  .replace(/\s+/g, '-') // collapse whitespace and replace by -
+  .replace(/-+/g, '-'); // collapse dashes
+
   return str;
 }
 function sleep(ms) {
@@ -814,7 +820,8 @@ function Confirm({
       })]
     })]
   });
-}
+} // @todo Improve it... Replacing the inputText to a tree
+
 function PathTree({
   title,
   defaultPath,
@@ -1062,6 +1069,7 @@ const Config = {
   DelayActions: 200,
   Permissions: Permissions,
   SearchEngine: 'PostreSQL',
+  // Elasticsearch
   fieldHaveDeleteButton: schema => {
     return (schema == null ? void 0 : schema.widget) === 'file' || (schema == null ? void 0 : schema.widget) === 'select' || (schema == null ? void 0 : schema.type) === 'array';
   }
@@ -1113,7 +1121,9 @@ function RemoveItems(props) {
         const err = await res.json();
         errors.push(err);
       }
-    });
+    }); // this sleep is here, to let elasticsearch, wait for
+    // index our operations... (will work 99% of use cases)
+
     actions.push(sleep(cfg.DelayActions));
     await Promise.all(actions);
 
@@ -1257,6 +1267,9 @@ const useInput = (onChange, value, validator) => {
   };
 };
 
+// From github.com/protonmail/proton-shared
+
+/* eslint-disable no-useless-escape */
 const REGEX_EMAIL = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/i;
 const REGEX_URL = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
 const REGEX_HEX_COLOR = /^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/i;
@@ -1307,7 +1320,8 @@ const Input = forwardRef(({
         handlers = _objectWithoutPropertiesLoose(_useInput, ["state"]);
 
   const [uid] = useState(generateUID('input'));
-  const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = useState(false); // eslint-disable-next-line
+
   ref = ref || useRef();
   useEffect(() => {
     setMounted(true);
@@ -1372,7 +1386,8 @@ const EmailInput = ({
   value: _value = '',
   dataTest,
   placeholder,
-  id
+  id,
+  onChange
 }) => {
   const intl = useIntl();
   return jsx(Input, {
@@ -1391,7 +1406,8 @@ const EmailInput = ({
       icon: "fas fa-envelope"
     }),
     id: id,
-    placeholder: placeholder
+    placeholder: placeholder,
+    onChange: onChange
   });
 };
 
@@ -1466,17 +1482,19 @@ function FormBuilder({
     properties,
     required
   } = schema;
-  const values = Object.assign({}, formData || {});
+  const values = Object.assign({}, formData || {}); // build initial state
+
   const initialState = {};
   const fields = Object.keys(properties).filter(x => !exclude.includes(x));
   fields.forEach(element => {
     initialState[element] = values[element] || undefined;
-  });
+  }); // Register remotes
 
   if (!ref.current) {
     ref.current = {};
     Object.keys(remotes).forEach(item => ref.current[item] = remotes[item]);
   } else {
+    // apply remote changes
     Object.keys(remotes).forEach(key => {
       if (JSON.stringify(ref.current[key]) !== JSON.stringify(remotes[key])) {
         ref.current[key] = remotes[key];
@@ -1621,128 +1639,7 @@ const Select = forwardRef(({
 });
 Select.displayName = 'Select';
 
-const formatDate = str => {
-  const d = new Date(str);
-  const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
-  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()} ${d.getHours()}:${minutes}`;
-};
-const get$1 = (obj, path, defValue) => {
-  var _pathArray$reduce;
-
-  if (!path) return undefined;
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
-  return (_pathArray$reduce = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)) != null ? _pathArray$reduce : defValue;
-};
-function getNewId(id = '') {
-  const suffix = '-copy-';
-  const rgx = new RegExp(`($|${suffix}\\d*)`);
-  return stringToSlug(id).replace(rgx, r => {
-    const num = parseInt(r.replace(suffix, '') || '0');
-    return `${suffix}${num + 1}`;
-  });
-}
-
-function useVocabulary(vocabularyName, path = null) {
-  const traversal = useTraversal();
-  const [vocabulary, setVocabulary] = useSetState({
-    data: undefined,
-    loading: false,
-    error: undefined
-  });
-
-  const getPath = () => {
-    if (path) return path;
-    return `${traversal.path}@vocabularies/${vocabularyName}`;
-  };
-
-  useEffect(() => {
-    const getVocabulary = async () => {
-      if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
-        try {
-          setVocabulary({
-            loading: true
-          });
-          const data = await traversal.client.get(getPath());
-          const dataJson = await data.json();
-          setVocabulary({
-            loading: false,
-            data: dataJson
-          });
-        } catch (err) {
-          setVocabulary({
-            loading: false,
-            error: err,
-            data: undefined
-          });
-        }
-      }
-    };
-
-    getVocabulary();
-  }, [vocabularyName, vocabulary, path]);
-  return vocabulary;
-}
-
-const SelectVocabulary = forwardRef(({
-  vocabularyName,
-  className,
-  classWrap,
-  val,
-  dataTest,
-  multiple,
-  onChange,
-  id,
-  placeholder
-}, ref) => {
-  const vocabulary = useVocabulary(vocabularyName);
-
-  const getOptions = () => {
-    if (get$1(vocabulary, 'data.items', null)) {
-      const vocData = vocabulary.data.items.map(item => {
-        return {
-          text: item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
-
-    return [];
-  };
-
-  const getProps = () => {
-    if (multiple) {
-      const currentValue = val || [];
-      return {
-        multiple: true,
-        size: 5,
-        value: currentValue,
-        options: getOptions()
-      };
-    }
-
-    return {
-      value: val != null ? val : '',
-      appendDefault: true,
-      options: getOptions()
-    };
-  };
-
-  if (vocabulary.data === undefined || vocabulary.loading) {
-    return jsx("div", {});
-  }
-
-  return jsx(Select, _extends({}, getProps(), {
-    className: className,
-    classWrap: classWrap || 'is-fullwidth',
-    dataTest: dataTest,
-    ref: ref,
-    onChange: onChange,
-    id: id,
-    placeholder: placeholder
-  }));
-});
-SelectVocabulary.displayName = 'SelectVocabulary';
+// https://github.com/molefrog/wouter
 
 const setURLParams = p => {
   return window.history.pushState(0, '0', '' + '?' + p.toString().replace(/%2F/g, '/'));
@@ -1758,7 +1655,10 @@ const useLocation = () => {
   const [path, update] = useState(currentSearchParams());
   const prevPath = useRef(path);
   useEffect(() => {
-    patchHistoryEvents();
+    patchHistoryEvents(); // this function checks if the location has been changed since the
+    // last render and updates the state only when needed.
+    // unfortunately, we can't rely on `path` value here, since it can be stale,
+    // that's why we store the last pathname in a ref.
 
     const checkForUpdates = () => {
       const pathname = currentSearchParams();
@@ -1766,12 +1666,20 @@ const useLocation = () => {
     };
 
     const events = ['popstate', 'pushState', 'replaceState'];
-    events.map(e => window.addEventListener(e, checkForUpdates));
+    events.map(e => window.addEventListener(e, checkForUpdates)); // it's possible that an update has occurred between render and the effect handler,
+    // so we run additional check on mount to catch these updates. Based on:
+    // https://gist.github.com/bvaughn/e25397f70e8c65b0ae0d7c90b731b189
+
     checkForUpdates();
     return () => {
       events.map(e => window.removeEventListener(e, checkForUpdates));
     };
-  }, []);
+  }, []); // the 2nd argument of the `useLocation` return value is a function
+  // that allows to perform a navigation.
+  //
+  // the function reference should stay the same between re-renders, so that
+  // it can be passed down as an element prop without any performance concerns.
+
   const navigate = useCallback((to, replace) => {
     if (replace) {
       clean(to);
@@ -1788,7 +1696,12 @@ const useLocation = () => {
     setURLParams(current);
   }, [path]);
   return [path, navigate, remove];
-};
+}; // While History API does have `popstate` event, the only
+// proper way to listen to changes via `push/replaceState`
+// is to monkey-patch these methods.
+//
+// See https://stackoverflow.com/a/4585031
+
 let patched = 0;
 
 const patchHistoryEvents = () => {
@@ -1797,7 +1710,8 @@ const patchHistoryEvents = () => {
     const original = window.history[type];
 
     window.history[type] = function (...args) {
-      const result = original.apply(this, args);
+      const result = original.apply(this, args); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
       const event = new Event(type);
       event.arguments = args;
       dispatchEvent(event);
@@ -2232,7 +2146,8 @@ class GuillotinaClient {
         children: m.updated
       })
     }];
-  }
+  } // BBB API changes. Compat G5 and G6
+
 
   applyCompat(data) {
     data.member = data.items;
@@ -2320,7 +2235,8 @@ class GuillotinaClient {
 
   async getTypeSchema(path, name) {
     if (!cacheSchemas[name]) {
-      const url = this.getContainerFromPath(path);
+      const url = this.getContainerFromPath(path); // todo: handle db case (only addable containers)
+
       const res = await this.rest.get(`${url}@types/${name}`);
       cacheSchemas[name] = await res.json();
     }
@@ -2370,6 +2286,7 @@ class GuillotinaClient {
   }
 
   async getAllPermissions(path) {
+    // paths used to query the API always has to start without a "/"
     if (path.startsWith('/')) {
       path = path.slice(1);
     }
@@ -2554,10 +2471,37 @@ function useClickAway(ref, onClickAway, events = defaultEvents) {
   }, [events, ref]);
 }
 
+const formatDate = str => {
+  const d = new Date(str);
+  const minutes = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
+  return `${d.getDate()}/${d.getMonth() + 1}/${d.getFullYear()} ${d.getHours()}:${minutes}`;
+};
+const get$1 = (obj, path, defValue) => {
+  var _pathArray$reduce;
+
+  // If path is not defined or it has false value
+  if (!path) return undefined; // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
+  // Regex explained: https://regexr.com/58j0k
+
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g); // Find value if exist return otherwise return undefined value;
+
+  return (_pathArray$reduce = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)) != null ? _pathArray$reduce : defValue;
+};
+function getNewId(id = '') {
+  const suffix = '-copy-';
+  const rgx = new RegExp(`($|${suffix}\\d*)`);
+  return stringToSlug(id).replace(rgx, r => {
+    const num = parseInt(r.replace(suffix, '') || '0');
+    return `${suffix}${num + 1}`;
+  });
+}
+
 function debounce(func, wait) {
   let timeout;
   return function () {
-    const context = this;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const context = this; // eslint-disable-next-line prefer-rest-params
+
     const args = arguments;
 
     const later = function later() {
@@ -2838,7 +2782,9 @@ const SearchInput = ({
 function debounce$1(func, wait) {
   let timeout;
   return function () {
-    const context = this;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const context = this; // eslint-disable-next-line prefer-rest-params
+
     const args = arguments;
 
     const later = function later() {
@@ -3433,7 +3379,8 @@ const DownloadField = ({
     const blob = new Blob([text], {
       type: data.content_type
     });
-    const url = window.URL.createObjectURL(blob);
+    const url = window.URL.createObjectURL(blob); // Create blob link to download
+
     const link = document.createElement('a');
     link.href = url;
 
@@ -3448,6 +3395,7 @@ const DownloadField = ({
     setTimeout(function () {
       var _link$parentNode;
 
+      // For Firefox it is necessary to delay revoking the ObjectURL
       window.URL.revokeObjectURL(url);
       (_link$parentNode = link.parentNode) == null ? void 0 : _link$parentNode.removeChild(link);
     }, 100);
@@ -3487,6 +3435,47 @@ const DownloadField = ({
   });
 };
 
+function useVocabulary(vocabularyName, path = null) {
+  const traversal = useTraversal();
+  const [vocabulary, setVocabulary] = useSetState({
+    data: undefined,
+    loading: false,
+    error: undefined
+  });
+
+  const getPath = () => {
+    if (path) return path;
+    return `${traversal.path}@vocabularies/${vocabularyName}`;
+  };
+
+  useEffect(() => {
+    const getVocabulary = async () => {
+      if (vocabularyName && vocabulary.data === undefined && !vocabulary.loading) {
+        try {
+          setVocabulary({
+            loading: true
+          });
+          const data = await traversal.client.get(getPath());
+          const dataJson = await data.json();
+          setVocabulary({
+            loading: false,
+            data: dataJson
+          });
+        } catch (err) {
+          setVocabulary({
+            loading: false,
+            error: err,
+            data: undefined
+          });
+        }
+      }
+    };
+
+    getVocabulary();
+  }, [vocabularyName, vocabulary, path]);
+  return vocabulary;
+}
+
 const plain = ['string', 'number', 'boolean'];
 function RenderField({
   value,
@@ -3715,6 +3704,67 @@ function RenderFieldComponent({
   return jsx(RenderField, _extends({}, getRenderProps()));
 }
 
+const SelectVocabulary = forwardRef(({
+  vocabularyName,
+  className,
+  classWrap,
+  val,
+  dataTest,
+  multiple,
+  onChange,
+  id,
+  placeholder
+}, ref) => {
+  const vocabulary = useVocabulary(vocabularyName);
+
+  const getOptions = () => {
+    if (get$1(vocabulary, 'data.items', null)) {
+      const vocData = vocabulary.data.items.map(item => {
+        return {
+          text: item.title,
+          value: item.token
+        };
+      });
+      return vocData;
+    }
+
+    return [];
+  };
+
+  const getProps = () => {
+    if (multiple) {
+      const currentValue = val || [];
+      return {
+        multiple: true,
+        size: 5,
+        value: currentValue,
+        options: getOptions()
+      };
+    }
+
+    return {
+      value: val != null ? val : '',
+      appendDefault: true,
+      options: getOptions()
+    };
+  };
+
+  if (vocabulary.data === undefined || vocabulary.loading) {
+    return jsx("div", {});
+  }
+
+  return jsx(Select, _extends({}, getProps(), {
+    className: className,
+    classWrap: classWrap || 'is-fullwidth',
+    dataTest: dataTest,
+    ref: ref,
+    onChange: onChange,
+    id: id,
+    placeholder: placeholder
+  }));
+});
+SelectVocabulary.displayName = 'SelectVocabulary';
+
 const EditComponent = forwardRef(({
   schema,
   val,
@@ -4680,6 +4730,7 @@ class ItemModel {
   }
 
   get path() {
+    // Compat
     const item = this.item['@id'] ? this.item['@id'] : this.item['@absolute_url'];
     let path = item.split('//')[1].split('/').splice(1).join('/');
     path = `/${path}/`;
@@ -4700,6 +4751,7 @@ class ItemModel {
   }
 
   get icon() {
+    // eslint-disable-next-line
     const cfg = useConfig();
 
     if (cfg.icons && cfg.icons[this.type]) {
@@ -4964,7 +5016,8 @@ const messages$2 = defineMessages({
       "value": "Installed Addons"
     }]
   }
-});
+}); // TODO: Refactor without useAsync... just crudContext
+
 function PanelAddons() {
   var _state$data$available, _state$data, _state$data$available2, _state$data2, _state$data$installed, _state$data3, _state$data$installed2, _state$data4;
 
@@ -5243,6 +5296,11 @@ function ItemsActionsProvider({
     children: children
   });
 }
+/**
+ * Checkbox component without props that consume the ItemsActionsContext
+ * and it select/unselect all items of the page.
+ */
+
 function AllItemsCheckbox({
   dataTest
 }) {
@@ -5272,6 +5330,10 @@ function ItemCheckbox({
     dataTest: dataTest
   });
 }
+/**
+ * Dropdown to choose some action to apply to the selected items.
+ */
+
 function ItemsActionsDropdown() {
   const intl = useIntl();
   const ACTIONS_OBJECT = getActionsObject(intl, true);
@@ -5355,6 +5417,7 @@ function Pagination({
       "aria-label": "pagination",
       children: [jsx("a", {
         className: "pagination-previous is-small",
+        // disabled={current === 0}
         onClick: () => current > 0 ? doPaginate(current - 1) : null,
         children: jsx("span", {
           className: "icon",
@@ -5364,6 +5427,7 @@ function Pagination({
         })
       }), jsx("a", {
         className: "pagination-next is-small",
+        // disabled={current >= maxPages - 1}
         onClick: () => doPaginate(current + 1),
         children: jsx("span", {
           className: "icon",
@@ -5676,7 +5740,7 @@ function PanelItems() {
           key: 'id',
           direction: 'des'
         });
-        sortParsed = parser(`_sort_${defaultSortValue.direction}=${defaultSortValue.key}}`);
+        sortParsed = parser(`_sort_${defaultSortValue.direction}=${defaultSortValue.key}`);
       }
 
       const qsParsed = Ctx.client[fnName]({
@@ -5686,12 +5750,14 @@ function PanelItems() {
       });
       let qs = '';
 
-      if (search || type || sort || resultQueryParams.length > 0) {
+      if (search || type || resultQueryParams.length > 0) {
         var _searchParsed, _typeParsed, _sortParsed;
 
         qs = buildQs([...qsParsed, ...((_searchParsed = searchParsed) != null ? _searchParsed : []), ...((_typeParsed = typeParsed) != null ? _typeParsed : []), ...((_sortParsed = sortParsed) != null ? _sortParsed : []), ...resultQueryParams]);
       } else {
-        qs = buildQs(qsParsed);
+        var _sortParsed2;
+
+        qs = buildQs([...qsParsed, ...((_sortParsed2 = sortParsed) != null ? _sortParsed2 : [])]);
       }
 
       const {
@@ -6870,7 +6936,8 @@ function CreateButton() {
 
   if (state.types && state.types.length === 0) {
     return null;
-  }
+  } // Implement some kind of filtering
+
 
   return jsx(Dropdown, {
     id: "dropdown-menu",
@@ -7021,12 +7088,17 @@ function TabsPanel({
   } else {
     currentTab = currentTab || Object.keys(tabs)[0];
   }
+  /*if (!Object.keys(tabs).includes(currentTab)) {
+    setLocation(defaultTab)
+    currentTab = defaultTab
+  }*/
+
 
   const [current, setTab] = useState(currentTab);
   const CurrentComp = tabs[current] || fallback;
   React.useEffect(() => {
     if (Object.keys(tabs).includes(currentTab)) {
-      setTab(currentTab);
+      setTab(currentTab); // setLocation({tab: currentTab})
     }
   }, [currentTab, tabs]);
 
@@ -7412,7 +7484,8 @@ function UsersToolbar() {
       page: 0
     });
     ev.preventDefault();
-  };
+  }; // cleanup form on state.search change
+
 
   useEffect(() => {
     if (!searchText || searchText === '') {
@@ -8057,7 +8130,8 @@ function GroupToolbar() {
       page: 0
     });
     ev.preventDefault();
-  };
+  }; // cleanup form on state.search change
+
 
   useEffect(() => {
     if (!searchText || searchText === '') {
@@ -8601,11 +8675,13 @@ const get$2 = (key, param, fallback = undefined) => {
 };
 
 const getComponent = (context, path, fallback = undefined) => {
-  if (!context) return;
+  if (!context) return; // console.log("Component for path", path)
+  // lookup by path
 
   if (registry.paths[path]) {
     return registry.paths[path];
-  }
+  } // by type
+
 
   if (registry.views[context['@type']]) {
     return registry.views[context['@type']];
@@ -8646,6 +8722,17 @@ const getProperties = type => {
 
 const getSchemas = type => {
   return registry.schemas[type] || {};
+  /*
+    filters: [
+      {
+        attribute_key: string,
+        label: string,
+        type: 'select' | 'input'
+        vocabulary: string | undefined
+        values: {[key:string]:any}[]
+      }
+    ]
+  */
 };
 
 const getFieldsToFilter = (type, fallback) => {
@@ -8660,6 +8747,7 @@ const defaultComponent = context => {
   return context.is_folderish ? FolderCtx : ItemCtx;
 };
 function useRegistry(data) {
+  // if data is provided we need to merge it into actual registry
   const ref = React.useRef();
 
   if (data && !ref.current) {
@@ -8681,6 +8769,22 @@ function useRegistry(data) {
     getSchemas
   };
 }
+/*
+
+const registry = {
+  paths: {
+    "/db/guillotina/tags/": TagsContext
+  },
+  forms: {
+    Tag: AddTagForm
+  }
+}
+
+
+<guillotina registry={registry} />
+
+
+*/
 
 const initialState$4 = {
   path: '',
@@ -11570,14 +11674,17 @@ function Guillotina(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, ["auth", "locale"]);
 
   const messages = loadLocaleData(locale);
-  const url = props.url || 'http://localhost:8080';
+  const url = props.url || 'http://localhost:8080'; // without trailing slash
+
   const config = props.config || {};
   const client = useGuillotinaClient();
   const {
     Permissions
   } = useConfig(config);
-  const registry = useRegistry(props.registry || {});
-  const [location] = useLocation();
+  const registry = useRegistry(props.registry || {}); // Location is cooked routing solution (only uses search params)
+
+  const [location] = useLocation(); // if there is no path provided just go to root
+
   const searchPath = location.get('path') || '/';
 
   if (searchPath && searchPath !== '') {
@@ -12106,6 +12213,7 @@ class Auth {
     });
 
     if (data.status === 401) {
+      // invalid token
       this.cleanAuth();
       this.logout();
       return;