Merge pull request #85

Icon only add button

Author: mavam

package.json

@@ -75,12 +75,13 @@
     },
     "resolutions": {
         "trim": ">=0.0.3",
-        "tar": ">=6.1.2",
+        "tar": ">=6.1.11",
         "prismjs": ">=1.24.0",
         "glob-parent": ">=5.1.2",
         "postcss": ">=8.2.10",
         "browserslist": ">=4.16.5",
-        "ws": ">=7.4.6"
+        "ws": ">=7.4.6",
+        "path-parse": "1.0.7"
     },
     "husky": {
         "hooks": {

src/Card.re

@@ -47,6 +47,7 @@ module Tabbed = {
         ~children=<Empty />,
         ~activeTabId: string,
         ~tabs: array(Tabs.t),
+        ~addButtonText,
         ~onAdd=?,
         ~onMove=?,
         ~onOpen=?,
@@ -66,6 +67,7 @@ module Tabbed = {
         activeTabId
         theme
         depth
+        ?addButtonText
         ?onAdd
         ?onMove
         ?onOpen

src/Tabs.re

@@ -86,7 +86,14 @@ type action =
 
 module AddTab = {
   [@react.component]
-  let make = (~dispatch: action => unit, ~depth: int, ~standalone, ~theme) => {
+  let make =
+      (
+        ~dispatch: action => unit,
+        ~depth: int,
+        ~standalone,
+        ~theme,
+        ~title=Some("New"),
+      ) => {
     /*
        The index below is technically incorrect. But by adding it to the
        list of draggable items, it means the placeholder will be correctly
@@ -103,7 +110,9 @@ module AddTab = {
         }
         onClick={_ => Add(Helpers.create("New tab"))->dispatch}>
         <span className=Styles.addIcon> <Icons.Plus /> </span>
-        <span className=Styles.addText> "Add"->React.string </span>
+        {Belt.Option.mapWithDefault(title, <Empty />, x =>
+           <span className=Styles.addText> x->React.string </span>
+         )}
       </div>
     </Dnd.Draggable>;
   };
@@ -189,6 +198,7 @@ let make =
       ~onOpen=?,
       ~onRename=?,
       ~onClose=?,
+      ~addButtonText=?,
       ~onDuplicate=?,
     ) => {
   let onDispatch = action =>
@@ -252,7 +262,13 @@ let make =
              )
            ->React.array}
           {onAdd->Belt.Option.isSome
-           <&&> <AddTab theme depth standalone dispatch=onDispatch />}
+           <&&> <AddTab
+                  theme
+                  depth
+                  standalone
+                  dispatch=onDispatch
+                  title=addButtonText
+                />}
         </div>
       </Dnd.Droppable>
     </Dnd.Context>

stories/tabs.stories.js

@@ -87,6 +87,7 @@ export const tabs = () => {
 type Tabs: (
    ~activeTabId: string;
    ~depth: option(int);
+   ~addButtonText: option(string); // Defaults to "New"
    ~onAdd: option(t -> unit);
    ~onClose: option(string -> unit);
    ~onDuplicate: option(string -> unit);
@@ -160,6 +161,53 @@ type Tabs: (
                         </p>
                     </Tabs>
                 </div>
+                <h3>All Functionality Enabled - hiding add text</h3>
+                <div style={smallCardContainerWide}>
+                    <Tabs
+                        addButtonText={null}
+                        onAdd={(newTab) => {
+                            setTabs((tabs) => Helpers.add(tabs, newTab))
+                            setActiveTabId(newTab.id)
+                        }}
+                        onOpen={setActiveTabId}
+                        onMove={([from, to]) => {
+                            setTabs(Helpers.move(tabs, from, to))
+                        }}
+                        onRename={(x) => {
+                            setTabs((tabs) => Helpers.update(tabs, x))
+                        }}
+                        onClose={(x) => {
+                            const tabIdx = tabs.findIndex((y) => y.id === x)
+                            console.log(tabIdx, x)
+                            if (tabs[tabIdx + 1]) {
+                                setActiveTabId(tabs[tabIdx + 1].id)
+                            } else if (tabs[tabIdx - 1]) {
+                                setActiveTabId(tabs[tabIdx - 1].id)
+                            } else {
+                                setActiveTabId('')
+                            }
+                            setTabs((tabs) => Helpers.removeById(tabs, x))
+                        }}
+                        onDuplicate={(x) => {
+                            const [newTabs, newId] = Helpers.duplicateById(
+                                tabs,
+                                x
+                            )
+                            setActiveTabId(newId)
+                            setTabs(newTabs)
+                        }}
+                        tabs={tabs}
+                        activeTabId={activeTabId}
+                        depth={2}
+                        theme={theme}
+                    >
+                        <h2>Tabs</h2>
+                        <p>
+                            Active Tab:{' '}
+                            {tabs.find((x) => x.id === activeTabId).title}
+                        </p>
+                    </Tabs>
+                </div>
                 <h3>No Duplication</h3>
                 <div style={smallCardContainerWide}>
                     <Tabs

yarn.lock

@@ -10619,10 +10619,10 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+path-parse@1.0.7, path-parse@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-starts-with@^1.0.0:
   version "1.0.0"
@@ -13625,10 +13625,10 @@ tapable@^2.0.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.0.tgz#5c373d281d9c672848213d0e037d1c4165ab426b"
   integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==
 
-tar@>=6.1.2, tar@^6.0.2:
-  version "6.1.6"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.6.tgz#c23d797b0a1efe5d479b1490805c5443f3560c5d"
-  integrity sha512-oaWyu5dQbHaYcyZCTfyPpC+VmI62/OM2RTUYavTk1MDr1cwW5Boi3baeYQKiZbY2uSQJGr+iMOzb/JFxLrft+g==
+tar@>=6.1.11, tar@^6.0.2:
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621"
+  integrity sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"