Merge pull request #35 from gustavoFreireS/feat/tab-header-component

tabHeader prop, alongside with closeIcon
EvoluxBR · Aug 16, 2019 · 2a31320 · 2a31320
2 parents 6f1360a + 5274930
commit 2a31320
Show file tree

Hide file tree

Showing 13 changed files with 494 additions and 202 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,20 @@
+const { defaults: tsjPreset } = require('ts-jest/presets');
+module.exports = {
+  ...tsjPreset,
+  "setupFiles": [
+    "<rootDir>/test-shim.js",
+    "<rootDir>/test-setup.js"
+  ],
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js"
+  ],
+  "collectCoverageFrom": [
+    "src/components/tabs/**/*.{ts,tsx}"
+  ],
+  "transform": {
+    ...tsjPreset.transform,
+    "^.+\\.svg$": "<rootDir>/svgTransform.js"
+  }
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,28 +4,13 @@
   "description": "A tab component with drag and drop functionality, add and close",
   "main": "dist/bundle.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "dev": "webpack-dev-server --content-base ./dist --host 0.0.0.0  --hot --inline --colors --port 3000 --open",
     "build": "rollup -c"
   },
-  "jest": {
-    "setupFiles": [
-      "<rootDir>/test-shim.js",
-      "<rootDir>/test-setup.js"
-    ],
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
-    "mapCoverage": true,
-    "collectCoverageFrom": [
-      "src/components/tabs/**/*.{ts,tsx}"
-    ],
-    "transform": {
-      "^.+\\.(ts|tsx)$": "<rootDir>/test-preprocessor.js",
-      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
-    }
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/EvoluxBR/react-smart-tabs"
   },
   "keywords": [
     "React",
@@ -36,7 +21,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/enzyme": "^3.10.1",
-    "@types/jest": "^24.0.15",
+    "@types/jest": "^24.0.17",
     "@types/react": "^16.8.23",
     "@types/react-dom": "^16.8.4",
     "awesome-typescript-loader": "^5.2.1",
@@ -51,6 +36,7 @@
     "source-map-loader": "^0.2.4",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.2.0",
+    "ts-jest": "^24.0.2",
     "ts-loader": "^6.0.4",
     "tslib": "^1.10.0",
     "tslint-config-airbnb": "^5.11.1",
@@ -62,16 +48,19 @@
   "dependencies": {
     "@types/uuid": "^3.4.5",
     "autoprefixer": "^9.6.1",
+    "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
     "postcss": "^7.0.17",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.1.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-svg": "^10.0.17",
     "rollup-plugin-terser": "^5.1.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "tslint": "^5.18.0",
+    "url-loader": "^2.1.0",
     "uuid": "^3.3.2"
   }
 }
diff --git a/src/components/tabs/cancel.svg b/src/components/tabs/cancel.svg
diff --git a/src/components/tabs/tab-bar.tsx b/src/components/tabs/tab-bar.tsx
@@ -1,15 +1,15 @@
-// tslint:disable-next-line:import-name
-import React, {
-  Fragment,
-  useState,
-  useRef,
-  useEffect,
-  ReactElement,
-  createRef,
-  ReactChildren,
-  ReactChild,
-} from 'react';
-// tslint:disable-next-line:import-name
+import {
+        default as React,
+        Fragment,
+        useState,
+        useRef,
+        useEffect,
+        ReactElement,
+        createRef,
+        ReactChildren,
+       } from 'react';
+import ReactSVG from 'react-svg';
+import cancelSvg from './cancel.svg';
 import Tab from './tab';
 import uuid from 'uuid';
 import { arrayMove } from './utils';
@@ -27,9 +27,9 @@ export interface TabBarProps {
   onTabClick?: (tab: ReactElement) => void;
   // Function to be called when the tab List changes it receives the modified tabList
   onTabsChange?: (modifiedList: Tab[], tabList?: ReactChildren) => void;
+  closeIcon?: ReactElement;
 }
 
-// tslint:disable-next-line:variable-name
 const TabBar = (props: TabBarProps) => {
   const [tabId, setTabId] = useState('');
   const tabBar = useRef(null);
@@ -80,9 +80,9 @@ const TabBar = (props: TabBarProps) => {
 
   function dragMouseDown(e: React.MouseEvent<HTMLElement>, tab: any) {
     const elemn = getRef(tab).current;
-    setDrag(tab);
     setActive(tab);
     if (!props.reorderable) return;
+    setDrag(tab);
       // get the mouse cursor position at startup:
     pos3.current =  e.clientX;
     elemn.style.left = `${elemn.getBoundingClientRect().left}px`;
@@ -94,7 +94,7 @@ const TabBar = (props: TabBarProps) => {
       nextElement.style.marginLeft = `${elemn.getBoundingClientRect().width - 1}px`;
     } else if (previousElement) {
       previousElement.style.marginRight = `${elemn.getBoundingClientRect().width - 2}px`;
-    } else if (nextElement) {
+    } else {
       nextElement.style.marginLeft = `${elemn.getBoundingClientRect().width - 1}px`;
     }
   }
@@ -119,7 +119,8 @@ const TabBar = (props: TabBarProps) => {
       nextElement.className = 'animated';
       arrayMove(tabList, tabList.indexOf(dragged), tabList.indexOf(dragged) + 1);
       setTabList([...tabList]);
-    } else if (previousElement && previousElement.getBoundingClientRect().right - 80 > position) {
+    }
+    if (previousElement && previousElement.getBoundingClientRect().right - 80 > position) {
       if (nextElement) {
         nextElement.style.marginRight = '-1px';
         nextElement.style.marginLeft = '0';
@@ -203,9 +204,6 @@ const TabBar = (props: TabBarProps) => {
       return true;
     }
     if (!currentTab && tabId === '' && !active) {
-      if (!props.children.length) {
-        return true;
-      }
       if (React.Children.toArray(props.children)[0].key === child.tabComponent.key) {
         return true;
       }
@@ -230,11 +228,18 @@ const TabBar = (props: TabBarProps) => {
                 onMouseDown={e => dragMouseDown(e, child)}
                 onMouseUp={closeDragElement}
               >
-                {child.tabComponent.props.text}
+                {child.tabComponent.props.tabHeader || child.tabComponent.props.text}
                 {props.closeable &&
                   <span
                     className="close"
-                    onClick={e => removeTab(child.id, e, child)}>x</span>
+                    onClick={e => removeTab(child.id, e, child)}>
+                      {props.closeIcon || (
+                            <ReactSVG
+                              className="close-icon"
+                              src={(cancelSvg.toString())}
+                            />
+                      )}
+                    </span>
                 }
               </li>
           );

diff --git a/src/components/tabs/tab.scss b/src/components/tabs/tab.scss
@@ -6,34 +6,41 @@
     transform: translateX(0%);
   }
 }
-  @keyframes move-before {
-    0% {
-      transform: translateX(-8%);
-    }
-    100% {
-      transform: translateX(0%);
-    }
+@keyframes move-before {
+  0% {
+    transform: translateX(-8%);
+  }
+  100% {
+    transform: translateX(0%);
   }
+}
 body {
   margin: 0;
 }
 .close {
   display: flex;
   margin-left: auto;
-  min-height: 15px;
-  max-height: 15px;
-  min-width: 15px;
-  max-width: 15px;
+  width: 16px;
+  height: 16px;
+  padding-bottom: 2px;
   text-align: center;
   justify-content: center;
   align-items: center;
-  padding-bottom: 2px;
   border-radius: 20%;
   transition: background 0.05s ease-in;
+  .close-icon {
+    svg {
+      height: 8px;
+      width: 8px;
+      * {
+        fill: #fff;
+      }
+    }
+  }
   &:hover {
     background-color: #666;
   }
-  &:before{
+  &:before {
     content: "";
     display: block;
     width: 1px;
@@ -45,7 +52,7 @@ body {
     z-index: 0;
   }
 }
-.tab__bar{
+.tab__bar {
   display: flex;
   flex-direction: row;
   background: transparent;
@@ -59,7 +66,7 @@ body {
   min-height: 40px;
   max-height: inherit;
   margin: 0;
-  *{
+  * {
     user-select: none;
   }
   li {
@@ -81,7 +88,7 @@ body {
     justify-content: center;
     &.active {
       &:after {
-        content: '';
+        content: "";
         position: absolute;
         bottom: -1px;
         right: -3px;
@@ -94,7 +101,7 @@ body {
         width: 3px;
       }
       &:before {
-        content: '';
+        content: "";
         position: absolute;
         bottom: -1px;
         left: -3px;
@@ -110,7 +117,7 @@ body {
     &:hover {
       background: #292929;
 
-      &>.close {
+      & > .close {
         &:before {
           background: transparent;
         }
@@ -137,14 +144,14 @@ body {
 .deanimated {
   animation: move-before 0.12s ease-out;
 }
-.addButton{
+.addButton {
   color: white;
   cursor: pointer;
   padding-top: 6px;
   padding-right: 10px;
 }
 
-.bar__wrapper{
+.bar__wrapper {
   display: flex;
   background: #222;
   min-height: 45px;

diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
@@ -1,15 +1,14 @@
-// tslint:disable-next-line:import-name
-import React from 'react';
+import React, { ReactElement } from 'react';
 import uuid from 'uuid';
 
 export interface TabProps {
   resourceData?: object;
   children: any;
-  text: string;
   active?: boolean;
+  tabHeader?: ReactElement;
+  text?: string;
 }
 
-// tslint:disable-next-line:variable-name
 const Tab = (props: TabProps) => {
   return (
     <div