@plasmicpkgs/antd 0.0.78 → 0.0.81

package/dist/antd.esm.js

@@ -22,7 +22,7 @@ import { Option, OptGroup } from 'rc-select';
 import Select from 'antd/lib/select';
 import AntdSlider from 'antd/lib/slider';
 import Switch from 'antd/lib/switch';
-import { Input as Input$1, Button as Button$1 } from 'antd';
+import { Button as Button$1 } from 'antd';
 import AntdTabs from 'antd/lib/tabs';
 import { TabPane } from 'rc-tabs';
 
@@ -1703,25 +1703,19 @@ function Tabs(props) {
   }));
 }
 
-function AddTab(_ref) {
-  var studioOps = _ref.studioOps;
-
-  var _React$useState = React.useState(""),
-      tabKey = _React$useState[0],
-      setTabKey = _React$useState[1];
-
-  var appendNewTab = function appendNewTab(tabKey) {
-    if (tabKey !== "") {
-      studioOps.appendToSlot({
-        type: "component",
-        name: "AntdTabPane",
-        props: {
-          key: tabKey
-        }
-      }, "children");
+function NavigateTabs(_ref) {
+  var componentProps = _ref.componentProps,
+      studioOps = _ref.studioOps;
+  var tabPanes = [];
+  traverseReactEltTree(componentProps.children, function (elt) {
+    if ((elt == null ? void 0 : elt.type) === TabPane && typeof (elt == null ? void 0 : elt.key) === "string") {
+      tabPanes.push(elt.key);
     }
-  };
-
+  });
+  var activeKey = componentProps.activeKey;
+  var currTabPos = activeKey ? tabPanes.findIndex(function (tabKey) {
+    return tabKey === activeKey;
+  }) : 0;
   return React.createElement("div", {
     style: {
       width: "100%",
@@ -1730,18 +1724,35 @@ function AddTab(_ref) {
       gap: "10px",
       justifyContent: "space-between"
     }
-  }, React.createElement(Input$1, {
-    placeholder: "Tab key",
-    onChange: function onChange(e) {
-      return setTabKey(e.target.value);
+  }, React.createElement(Button$1, {
+    style: {
+      width: "100%"
     },
-    value: tabKey
-  }), React.createElement(Button$1, {
     onClick: function onClick() {
-      appendNewTab(tabKey);
-      setTabKey("");
+      if (tabPanes.length > 0) {
+        var prevTabPos = (currTabPos - 1 + tabPanes.length) % tabPanes.length;
+        studioOps.updateProps({
+          activeKey: tabPanes[prevTabPos]
+        });
+      }
+    }
+  }, "Prev tab"), React.createElement(Button$1, {
+    style: {
+      width: "100%"
+    },
+    onClick: function onClick() {
+      if (tabPanes.length > 0) {
+        var nextTabPos = (currTabPos + 1) % tabPanes.length;
+        studioOps.updateProps({
+          activeKey: tabPanes[nextTabPos]
+        });
+      }
     }
-  }, "Add tab"));
+  }, "Next tab"));
+}
+
+function OutlineMessage() {
+  return React.createElement("div", null, "* To re-arrange tab panes, use the Outline panel");
 }
 
 var tabsMeta = {
@@ -1849,14 +1860,53 @@ var tabsMeta = {
   },
   actions: [{
     type: "custom-action",
-    control: AddTab
+    control: NavigateTabs
   }, {
     type: "button-action",
-    label: "Delete current tab",
+    label: "Add new tab",
     onClick: function onClick(_ref2) {
       var componentProps = _ref2.componentProps,
           studioOps = _ref2.studioOps;
 
+      // Get the first positive integer that isn't already a key
+      var generateNewKey = function generateNewKey() {
+        var keysSet = new Set();
+        traverseReactEltTree(componentProps.children, function (elt) {
+          if ((elt == null ? void 0 : elt.type) === TabPane && typeof (elt == null ? void 0 : elt.key) === "string") {
+            keysSet.add(elt.key);
+          }
+        });
+
+        for (var keyCandidate = 1; keyCandidate <= keysSet.size + 1; keyCandidate++) {
+          var strKey = keyCandidate.toString();
+
+          if (!keysSet.has(strKey)) {
+            return strKey;
+          }
+        }
+
+        return undefined;
+      };
+
+      var tabKey = generateNewKey();
+      studioOps.appendToSlot({
+        type: "component",
+        name: "AntdTabPane",
+        props: {
+          key: tabKey
+        }
+      }, "children");
+      studioOps.updateProps({
+        activeKey: tabKey
+      });
+    }
+  }, {
+    type: "button-action",
+    label: "Delete current tab",
+    onClick: function onClick(_ref3) {
+      var componentProps = _ref3.componentProps,
+          studioOps = _ref3.studioOps;
+
       if (componentProps.activeKey) {
         var tabPanes = [];
         traverseReactEltTree(componentProps.children, function (elt) {
@@ -1864,15 +1914,26 @@ var tabsMeta = {
             tabPanes.push(elt.key);
           }
         });
-        var currentTabPos = tabPanes.findIndex(function (tabKey) {
-          return tabKey === componentProps.activeKey;
+        var activeKey = componentProps.activeKey;
+        var currTabPos = tabPanes.findIndex(function (tabKey) {
+          return tabKey === activeKey;
         });
 
-        if (currentTabPos !== -1) {
-          studioOps.removeFromSlotAt(currentTabPos, "children");
+        if (currTabPos !== -1) {
+          studioOps.removeFromSlotAt(currTabPos, "children");
+
+          if (tabPanes.length - 1 > 0) {
+            var prevTabPos = (currTabPos - 1 + tabPanes.length) % tabPanes.length;
+            studioOps.updateProps({
+              activeKey: tabPanes[prevTabPos]
+            });
+          }
         }
       }
     }
+  }, {
+    type: "custom-action",
+    control: OutlineMessage
   }],
   importPath: "@plasmicpkgs/antd/skinny/registerTabs",
   importName: "Tabs"