@bigbinary/neeto-folders-frontend 2.0.0 → 2.0.2

package/app/javascript/src/translations/en.json

@@ -5,6 +5,7 @@
     "edit": "Edit",
     "move": "Move",
     "save": "Save",
+    "name": "Name",
     "folder": "Folder",
     "folders": "Folders",
     "item": "Item",
@@ -35,5 +36,9 @@
   },
   "reorderFolder": {
     "title": "Reorder {{ folders }}"
+  },
+
+  "errors": {
+    "blank": "{{entity}} cannot be blank"
   }
 }

package/dist/cjs/components.js

@@ -22,6 +22,8 @@ var formik = require('formik');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var i18next = require('i18next');
+var yup = require('yup');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var Switch = require('@bigbinary/neetoui/formik/Switch');
 var Textarea = require('@bigbinary/neetoui/formik/Textarea');
@@ -41,7 +43,6 @@ var reactDom = require('react-dom');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Tree = require('@bigbinary/neetoui/Tree');
-require('i18next');
 require('zustand');
 
 function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -134,6 +135,12 @@ var FoldersAlerts = function FoldersAlerts(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(Alert, _objectSpread$d({}, alertProps));
 };
 
+var FORM_VALIDATION_SCHEMA = yup.object().shape({
+  name: yup.string().required(i18next.t("errors.blank", {
+    entity: i18next.t("common.name")
+  }))
+});
+
 var _excluded$6 = ["type"];
 function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -399,6 +406,7 @@ var AddEditPane = function AddEditPane(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(formik.Formik, {
       initialValues: initialValues,
       enableReinitialize: true,
+      validationSchema: FORM_VALIDATION_SCHEMA,
       onSubmit: onSubmitForm,
       children: function children() {
         return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -407,6 +415,7 @@ var AddEditPane = function AddEditPane(_ref) {
             children: /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
               className: "w-full space-y-5",
               children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+                required: true,
                 label: t("folders.name"),
                 name: "name",
                 ref: setFocusField
@@ -565,7 +574,7 @@ var PaneBody = function PaneBody(_ref) {
     onSubmit = _ref.onSubmit,
     onClose = _ref.onClose,
     onRemove = _ref.onRemove;
-  var _useState = React.useState(null),
+  var _useState = React.useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
@@ -580,6 +589,13 @@ var PaneBody = function PaneBody(_ref) {
     folders = _useFetchFolders$data === void 0 ? [] : _useFetchFolders$data;
   var _useTranslation = useTranslation(config),
     t = _useTranslation.t;
+  var tree = React.useMemo(function () {
+    return [{
+      name: "/",
+      id: null,
+      children: folders
+    }];
+  }, [folders]);
   var folderDepth = 0;
   if (item) {
     // If item is a folder, measure the current depth from current folder to longest leaf.
@@ -587,7 +603,7 @@ var PaneBody = function PaneBody(_ref) {
     var folder = foldersMap[item.id];
     if (folder) folderDepth = utils.measureDepth(folder);
   }
-  var maxDepth = config.maxDepth - folderDepth;
+  var maxDepth = config.maxDepth - folderDepth + 1;
   var onAddFolder = function onAddFolder() {
     setFolderState({
       paneState: {
@@ -610,7 +626,7 @@ var PaneBody = function PaneBody(_ref) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
       className: "pb-6",
-      children: folders.map(function (folder) {
+      children: tree.map(function (folder) {
         return /*#__PURE__*/React.createElement(_SelectableNode, {
           config: config,
           folder: folder,
@@ -630,7 +646,7 @@ var PaneBody = function PaneBody(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-1 space-x-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$8({
-          disabled: !selection,
+          disabled: selection === undefined,
           label: t("common.save"),
           style: "primary",
           onClick: function onClick() {