@guillotinaweb/react-gmi 0.24.0 → 0.24.1

package/dist/components/fields/renderField.d.ts

@@ -1,6 +1,7 @@
-export function RenderField({ value, Widget }: {
+export function RenderField({ value, Widget, schema }: {
     value: any;
     Widget: any;
+    schema: any;
 }): any;
 export function RenderFieldComponent({ schema, field, val, modifyContent }: {
     schema: any;
@@ -8,3 +9,8 @@ export function RenderFieldComponent({ schema, field, val, modifyContent }: {
     val: any;
     modifyContent: any;
 }): JSX.Element;
+export function VocabularyRenderField({ schema, value, modifyContent }: {
+    schema: any;
+    value: any;
+    modifyContent: any;
+}): JSX.Element;

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from "./input/dropdown";
 export * from "./fields/editableField";
 export * from "./fields/renderField";
 export * from "./fields/downloadField";
+export * from "./fields/editComponent";
 export * from "./behaviors/iattachment";
 export * from "./behaviors/imultiattachment";
 export * from "./behaviors/iimageattachment";

package/dist/react-gmi.esm.js

@@ -3755,12 +3755,14 @@ function useVocabulary(vocabularyName, path) {
 var plain = ['string', 'number', 'boolean'];
 function RenderField(_ref) {
   var value = _ref.value,
-      Widget = _ref.Widget;
+      Widget = _ref.Widget,
+      schema = _ref.schema;
   if (value === null || value === undefined) return '';
 
   if (Widget) {
     return /*#__PURE__*/React.createElement(Widget, {
-      value: value
+      value: value,
+      schema: schema
     });
   }
 
@@ -3807,23 +3809,68 @@ var FieldValue = function FieldValue(_ref2) {
   })));
 };
 
-function RenderFieldComponent(_ref3) {
-  var schema = _ref3.schema,
-      field = _ref3.field,
-      val = _ref3.val,
-      modifyContent = _ref3.modifyContent;
-  var intl = useIntl();
-  var DEFAULT_VALUE_EDITABLE_FIELD = intl.formatMessage({
+var DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
+
+var getDefaultValueEditableField = function getDefaultValueEditableField(intl) {
+  return intl.formatMessage({
     id: "default_value_editable_field",
     defaultMessage: [{
       "type": 0,
       "value": "Click to edit"
     }]
   });
-  var DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- ';
+};
+
+var VocabularyRenderField = function VocabularyRenderField(_ref3) {
+  var _schema$items;
+
+  var schema = _ref3.schema,
+      value = _ref3.value,
+      modifyContent = _ref3.modifyContent;
+  var intl = useIntl();
+  var DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
+  var vocabularyName = (schema == null ? void 0 : (_schema$items = schema.items) == null ? void 0 : _schema$items.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
+  var vocabulary = useVocabulary(vocabularyName);
+
+  var getRenderProps = function getRenderProps() {
+    var renderProps = {
+      value: value != null ? value : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
+    };
+
+    if (schema != null && schema.vocabularyName) {
+      var _vocabularyValue$titl;
+
+      var vocabularyValue = get$1(vocabulary, 'data.items', []).find(function (item) {
+        return item.token === value;
+      });
+      renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
+    } else {
+      var _renderProps$value;
+
+      renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(function (value) {
+        var _get$find$title, _get$find;
+
+        return (_get$find$title = (_get$find = get$1(vocabulary, 'data.items', []).find(function (item) {
+          return item.token === value;
+        })) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
+      });
+    }
+
+    return renderProps;
+  };
+
+  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
+};
+function RenderFieldComponent(_ref4) {
+  var schema = _ref4.schema,
+      field = _ref4.field,
+      val = _ref4.val,
+      modifyContent = _ref4.modifyContent;
+  var intl = useIntl();
+  var DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl);
 
   var getRenderProps = function getRenderProps() {
-    var _schema$items;
+    var _schema$items2;
 
     var renderProps = {
       value: val != null ? val : modifyContent ? DEFAULT_VALUE_EDITABLE_FIELD : DEFAULT_VALUE_NO_EDITABLE_FIELD
@@ -3841,37 +3888,220 @@ function RenderFieldComponent(_ref3) {
       renderProps['value'] = (_val$toString = val == null ? void 0 : val.toString()) != null ? _val$toString : renderProps['value'];
     } else if (val && (schema == null ? void 0 : schema.type) === 'datetime') {
       renderProps['value'] = new Date(val).toLocaleString();
-    } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabularyName || schema != null && schema.vocabularyName) {
-      var _schema$items2;
+    } else if (schema != null && (_schema$items2 = schema.items) != null && _schema$items2.vocabularyName || schema != null && schema.vocabularyName) {
+      renderProps['Widget'] = VocabularyRenderField;
+      renderProps['schema'] = schema;
+    }
 
-      var vocabularyName = (schema == null ? void 0 : (_schema$items2 = schema.items) == null ? void 0 : _schema$items2.vocabularyName) || (schema == null ? void 0 : schema.vocabularyName);
-      var vocabulary = useVocabulary(vocabularyName);
+    return renderProps;
+  };
 
-      if (schema != null && schema.vocabularyName) {
-        var _vocabularyValue$titl;
+  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
+}
 
-        var vocabularyValue = get$1(vocabulary, 'data.items', []).find(function (item) {
-          return item.token === val;
-        });
-        renderProps['value'] = (_vocabularyValue$titl = vocabularyValue == null ? void 0 : vocabularyValue.title) != null ? _vocabularyValue$titl : '';
-      } else {
-        var _renderProps$value;
+var SelectVocabulary = React.forwardRef(function (_ref, ref) {
+  var vocabularyName = _ref.vocabularyName,
+      className = _ref.className,
+      classWrap = _ref.classWrap,
+      val = _ref.val,
+      dataTest = _ref.dataTest,
+      multiple = _ref.multiple,
+      rest = _objectWithoutPropertiesLoose(_ref, ["vocabularyName", "className", "classWrap", "val", "dataTest", "multiple"]);
 
-        renderProps['value'] = ((_renderProps$value = renderProps['value']) != null ? _renderProps$value : []).map(function (value) {
-          var _get$find$title, _get$find;
+  var vocabulary = useVocabulary(vocabularyName);
 
-          return (_get$find$title = (_get$find = get$1(vocabulary, 'data.items', []).find(function (item) {
-            return item.token === value;
-          })) == null ? void 0 : _get$find.title) != null ? _get$find$title : '';
-        });
+  var getOptions = function getOptions() {
+    if (get$1(vocabulary, 'data.items', null)) {
+      var vocData = vocabulary.data.items.map(function (item) {
+        var _item$title$default;
+
+        return {
+          text: (_item$title$default = item.title.default) != null ? _item$title$default : item.title,
+          value: item.token
+        };
+      });
+      return vocData;
+    }
+
+    return [];
+  };
+
+  var getProps = function getProps() {
+    if (multiple) {
+      var 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 /*#__PURE__*/React.createElement("div", null);
+  }
+
+  return /*#__PURE__*/React.createElement(Select, _extends({}, getProps(), {
+    className: className,
+    classWrap: classWrap || 'is-fullwidth',
+    dataTest: dataTest,
+    ref: ref
+  }, rest));
+});
+Select.propTypes = {
+  error: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  isSubmitted: PropTypes.bool,
+  size: PropTypes.number,
+  onChange: PropTypes.func,
+  multiple: PropTypes.bool,
+  className: PropTypes.string,
+  vocabularyName: PropTypes.string
+};
+
+var EditComponent = React.forwardRef(function (_ref, ref) {
+  var schema = _ref.schema,
+      val = _ref.val,
+      setValue = _ref.setValue,
+      dataTest = _ref.dataTest,
+      className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "val", "setValue", "dataTest", "className"]);
+
+  if ((schema == null ? void 0 : schema.widget) === 'textarea' || (schema == null ? void 0 : schema.widget) === 'richtext') {
+    return /*#__PURE__*/React.createElement(Textarea, _extends({
+      value: val || '',
+      className: className,
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+      value: !!val,
+      className: className,
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.type) === 'array') {
+    if (schema.items && schema.items.type === 'string') {
+      var _schema$items;
+
+      if (schema.items.vocabularyName) {
+        return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
+          vocabularyName: get$1(schema, 'items.vocabularyName', null),
+          val: val || [],
+          className: className,
+          classWrap: "is-fullwidth",
+          dataTest: dataTest
+        }, rest, {
+          onChange: setValue,
+          multiple: true
+        }));
+      } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabulary) {
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          value: val || [],
+          className: className,
+          classWrap: "is-fullwidth",
+          dataTest: dataTest,
+          options: schema == null ? void 0 : schema.items.vocabulary.map(function (item) {
+            return {
+              text: item,
+              value: item
+            };
+          }),
+          multiple: true,
+          onChange: setValue
+        }, rest));
       }
     }
 
-    return renderProps;
+    return /*#__PURE__*/React.createElement(InputList, _extends({
+      value: val || [],
+      className: className,
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      ref: ref,
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.widget) === 'file') {
+    return /*#__PURE__*/React.createElement(FileUpload, _extends({
+      onChange: function onChange(ev) {
+        return setValue(ev);
+      },
+      label: get$1(val, 'filename', null),
+      dataTest: dataTest
+    }, rest));
+  } else if ((schema == null ? void 0 : schema.widget) === 'select' && schema.type === 'string') {
+    if (schema != null && schema.vocabularyName) {
+      return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
+        val: val || '',
+        className: className,
+        appendDefault: true,
+        classWrap: "is-fullwidth",
+        dataTest: dataTest,
+        onChange: setValue,
+        vocabularyName: get$1(schema, 'vocabularyName', null)
+      }, rest));
+    }
+
+    return /*#__PURE__*/React.createElement(Select, _extends({
+      value: val || '',
+      className: className,
+      appendDefault: true,
+      classWrap: "is-fullwidth",
+      dataTest: dataTest,
+      options: schema == null ? void 0 : schema.vocabulary.map(function (item) {
+        return {
+          text: item,
+          value: item
+        };
+      }),
+      onChange: setValue
+    }, rest));
+  }
+
+  var getInputType = function getInputType() {
+    switch (schema == null ? void 0 : schema.type) {
+      case 'integer':
+        return 'number';
+
+      case 'date':
+        return 'date';
+
+      case 'datetime':
+        return 'datetime-local';
+
+      default:
+        return 'text';
+    }
   };
 
-  return /*#__PURE__*/React.createElement(RenderField, getRenderProps());
-}
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    value: val || '',
+    className: className,
+    dataTest: dataTest,
+    onChange: function onChange(ev) {
+      return setValue(ev);
+    },
+    ref: ref,
+    type: getInputType()
+  }, rest));
+});
+EditComponent.displayName = 'EditComponent';
 
 function IAttachment(_ref) {
   var properties = _ref.properties,
@@ -6085,74 +6315,6 @@ function SearchVocabularyLabels(props) {
   return null;
 }
 
-var SelectVocabulary = React.forwardRef(function (_ref, ref) {
-  var vocabularyName = _ref.vocabularyName,
-      className = _ref.className,
-      classWrap = _ref.classWrap,
-      val = _ref.val,
-      dataTest = _ref.dataTest,
-      multiple = _ref.multiple,
-      rest = _objectWithoutPropertiesLoose(_ref, ["vocabularyName", "className", "classWrap", "val", "dataTest", "multiple"]);
-
-  var vocabulary = useVocabulary(vocabularyName);
-
-  var getOptions = function getOptions() {
-    if (get$1(vocabulary, 'data.items', null)) {
-      var vocData = vocabulary.data.items.map(function (item) {
-        var _item$title$default;
-
-        return {
-          text: (_item$title$default = item.title.default) != null ? _item$title$default : item.title,
-          value: item.token
-        };
-      });
-      return vocData;
-    }
-
-    return [];
-  };
-
-  var getProps = function getProps() {
-    if (multiple) {
-      var 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 /*#__PURE__*/React.createElement("div", null);
-  }
-
-  return /*#__PURE__*/React.createElement(Select, _extends({}, getProps(), {
-    className: className,
-    classWrap: classWrap || 'is-fullwidth',
-    dataTest: dataTest,
-    ref: ref
-  }, rest));
-});
-Select.propTypes = {
-  error: PropTypes.string,
-  disabled: PropTypes.bool,
-  loading: PropTypes.bool,
-  isSubmitted: PropTypes.bool,
-  size: PropTypes.number,
-  onChange: PropTypes.func,
-  multiple: PropTypes.bool,
-  className: PropTypes.string,
-  vocabularyName: PropTypes.string
-};
-
 var initialState$1 = {
   page: 0,
   items: [],
@@ -9208,142 +9370,6 @@ var buildPaths = function buildPaths(segments) {
   return results;
 };
 
-var EditComponent = React.forwardRef(function (_ref, ref) {
-  var schema = _ref.schema,
-      val = _ref.val,
-      setValue = _ref.setValue,
-      dataTest = _ref.dataTest,
-      className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["schema", "val", "setValue", "dataTest", "className"]);
-
-  if ((schema == null ? void 0 : schema.widget) === 'textarea' || (schema == null ? void 0 : schema.widget) === 'richtext') {
-    return /*#__PURE__*/React.createElement(Textarea, _extends({
-      value: val || '',
-      className: className,
-      onChange: function onChange(ev) {
-        return setValue(ev);
-      },
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.type) === 'boolean') {
-    return /*#__PURE__*/React.createElement(Checkbox, _extends({
-      value: !!val,
-      className: className,
-      onChange: function onChange(ev) {
-        return setValue(ev);
-      },
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.type) === 'array') {
-    if (schema.items && schema.items.type === 'string') {
-      var _schema$items;
-
-      if (schema.items.vocabularyName) {
-        return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
-          vocabularyName: get$1(schema, 'items.vocabularyName', null),
-          val: val || [],
-          className: className,
-          classWrap: "is-fullwidth",
-          dataTest: dataTest
-        }, rest, {
-          onChange: setValue,
-          multiple: true
-        }));
-      } else if (schema != null && (_schema$items = schema.items) != null && _schema$items.vocabulary) {
-        return /*#__PURE__*/React.createElement(Select, _extends({
-          value: val || [],
-          className: className,
-          classWrap: "is-fullwidth",
-          dataTest: dataTest,
-          options: schema == null ? void 0 : schema.items.vocabulary.map(function (item) {
-            return {
-              text: item,
-              value: item
-            };
-          }),
-          multiple: true,
-          onChange: setValue
-        }, rest));
-      }
-    }
-
-    return /*#__PURE__*/React.createElement(InputList, _extends({
-      value: val || [],
-      className: className,
-      onChange: function onChange(ev) {
-        return setValue(ev);
-      },
-      ref: ref,
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.widget) === 'file') {
-    return /*#__PURE__*/React.createElement(FileUpload, _extends({
-      onChange: function onChange(ev) {
-        return setValue(ev);
-      },
-      label: get$1(val, 'filename', null),
-      dataTest: dataTest
-    }, rest));
-  } else if ((schema == null ? void 0 : schema.widget) === 'select' && schema.type === 'string') {
-    if (schema != null && schema.vocabularyName) {
-      return /*#__PURE__*/React.createElement(SelectVocabulary, _extends({
-        val: val || '',
-        className: className,
-        appendDefault: true,
-        classWrap: "is-fullwidth",
-        dataTest: dataTest,
-        onChange: setValue,
-        vocabularyName: get$1(schema, 'vocabularyName', null)
-      }, rest));
-    }
-
-    return /*#__PURE__*/React.createElement(Select, _extends({
-      value: val || '',
-      className: className,
-      appendDefault: true,
-      classWrap: "is-fullwidth",
-      dataTest: dataTest,
-      options: schema == null ? void 0 : schema.vocabulary.map(function (item) {
-        return {
-          text: item,
-          value: item
-        };
-      }),
-      onChange: setValue
-    }, rest));
-  }
-
-  var getInputType = function getInputType() {
-    switch (schema == null ? void 0 : schema.type) {
-      case 'integer':
-        return 'number';
-
-      case 'date':
-        return 'date';
-
-      case 'datetime':
-        return 'datetime-local';
-
-      default:
-        return 'text';
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(Input, _extends({
-    value: val || '',
-    className: className,
-    dataTest: dataTest,
-    onChange: function onChange(ev) {
-      return setValue(ev);
-    },
-    ref: ref,
-    type: getInputType()
-  }, rest));
-});
-EditComponent.displayName = 'EditComponent';
-
 var registry = {
   paths: {},
   views: {
@@ -13074,5 +13100,5 @@ var Auth = /*#__PURE__*/function () {
   return Auth;
 }();
 
-export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DatabaseCtx, Delete, DownloadField, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, SearchOptionsLabels, SearchVocabularyLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getActionsObject, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, messages$4 as messages, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal, useVocabulary };
+export { AddItem, AddPermission, AllItemsCheckbox, ApplicationCtx, Auth, AuthContext, BaseForm, BehaviorNotImplemented, BehaviorsView, Button, Checkbox, ClientContext, ClientProvider, Config, Confirm, ContainerCtx, ContextToolbar, CreateButton, CreateContainer, DatabaseCtx, Delete, DownloadField, EditComponent, EditableField, EmailInput, FileUpload, Flash, FolderCtx, Form, FormBuilder, GroupCtx, GroupToolbar, GroupsCtx, Guillotina, GuillotinaClient, IAttachment, IImageAttachment, IMultiAttachment, IMultiImageAttachment, IMultiImageOrderedAttachment, IWorkflow, Icon, Input, InputList, Item, ItemCheckbox, ItemCtx, ItemModel, ItemTitle, ItemsActionsDropdown, ItemsActionsProvider, Layout, Link, Loading, Login, Modal, NotAllowed, Notification, Pagination, PanelActions, PanelAddons, PanelBehaviors, PanelItems, PanelNotImplemented, PanelPermissions, PanelProperties, PasswordInput, Path, PathTree, PermissionPrinperm, PermissionPrinrole, PermissionRoleperm, Permissions, PropertiesButtonView, PropertiesView, REGEX_EMAIL, REGEX_HEX_COLOR, REGEX_NUMBER, REGEX_URL, RItem, RemoveItems, RenderField, RenderFieldComponent, RequiredFieldsForm, RestClient, SearchInput, SearchLabels, SearchOptionsLabels, SearchVocabularyLabels, Select, Sharing, Table, TabsPanel, Tag, TagsWidget, TdLink, Textarea, TraversalContext, TraversalProvider, UserCtx, UserForm, UsersCtx, UsersToolbar, VocabularyRenderField, base64ToArrayBuffer, buildQs, classnames, defaultComponent, formatDate, generateUID, get$1 as get, getActionsObject, getClient, getNewId, isEmail, isEmpty, isHexColor, isNumber, isURL, lightFileReader, maxLength, messages$4 as messages, minLength, noop, notEmpty, parser, sleep, stringToSlug, toQueryString, useConfig, useCrudContext, useGuillotinaClient, useLocation, useRegistry, useRemoteField, useTraversal, useVocabulary };
 //# sourceMappingURL=react-gmi.esm.js.map