react-draggable-tab - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

 ## Change Log
 
+### Ver 0.4.1
+
+  * #33 [Add hover effect on mouseOver like chrome](https://github.com/georgeOsdDev/react-draggable-tab/issues/33)
+  * #38 [Publish transpiled code](https://github.com/georgeOsdDev/react-draggable-tab/issues/38)
+  * #40 [Tab start moving from strange position](https://github.com/georgeOsdDev/react-draggable-tab/issues/33)
+
 ### Ver 0.4.0
@@ -4,0 +10,0 @@

example/app.js

@@ -10,6 +10,4 @@ 'use strict';
 let ThemeManager = Styles.ThemeManager;
+import {Tabs, Tab} from '../lib/index.js';
 
-import Tabs from '../components/Tabs';
-import Tab from '../components/Tab';
-
 import DynamicTabContent from './DynamicTabContent';
@@ -124,2 +122,10 @@ import DynamicTabBadge from './DynamicTabBadge';
 
+  handleTabMouseEnter(e, key) {
+    console.log('tab mouseEnter key:', key);
+  }
+
+  handleTabMouseLeave(e, key) {
+    console.log('tab mouseLeave key:', key);
+  }
+
   _onDialogSubmit() {
@@ -177,2 +183,4 @@ let title = this.refs.input.getValue();
           onTabDoubleClick={this.handleTabDoubleClick.bind(this)}
+          onTabMouseEnter={this.handleTabMouseEnter.bind(this)}
+          onTabMouseLeave={this.handleTabMouseLeave.bind(this)}
           tabs={this.state.tabs}
@@ -179,0 +187,0 @@ shortCutKeys={

example/DynamicTabBadge.js

@@ -5,6 +5,4 @@ 'use strict';
 import React from 'react';
-import NotificationBadge from 'react-notification-badge';
-import {Effect} from 'react-notification-badge';
+import NotificationBadge, {Effect} from 'react-notification-badge';
 
-
 class DynamicTabContent extends React.Component {
@@ -11,0 +9,0 @@ constructor(props) {

package.json

 {
   "name": "react-draggable-tab",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Draggable chrome like tab react component ",
-  "main": "index.js",
+  "main": "./lib/index.js",
   "scripts": {
@@ -11,3 +11,5 @@ "browser": "browser-sync start --files example/* --server example",
     "test:local": "karma start",
-    "test": "./node_modules/.bin/karma start --browsers Firefox --single-run"
+    "test": "./node_modules/.bin/karma start --browsers Firefox --single-run",
+    "clean": "rimraf lib",
+    "build": "babel src --out-dir lib"
   },
@@ -14,0 +16,0 @@ "repository": {

README.md

@@ -55,2 +55,3 @@ # React-draggable-tab [![Build Status](https://travis-ci.org/georgeOsdDev/react-draggable-tab.svg?branch=develop)](https://travis-ci.org/georgeOsdDev/react-draggable-tab) [![npm version](https://badge.fury.io/js/react-draggable-tab.svg)](http://badge.fury.io/js/react-draggable-tab)
    * `tabActive`: selected tab's `li`, before, after (defult: `rdTabActive`)
+   * `tabHover`: selected tab's `li`, before, after (defult: `rdTabHover`)
 
@@ -66,2 +67,6 @@ * `tabStyles`: Inline styles which will be **overwritten** default and common-tabs inline styles.
    * `tabTitleActive`: selected tab's title
+   * `tabOnHover`: hovered tab's `li`
+   * `tabBeforeOnHover`: hovered tab's `li` before
+   * `tabAfterOnHover`: hovered tab's `li` after
+   * `tabTitleOnHover`: hovered tab's title
    * `tabCloseIcon`: base `span` element of close icon
@@ -68,0 +73,0 @@ * `tabCloseIconOnHover`: base `span` element of close icon when hover

test/components/CloseIcon_spec.js

@@ -7,3 +7,3 @@ 'use strict';
 let expect = chai.expect;
-import CloseIcon from '../../components/CloseIcon';
+import CloseIcon from '../../src/components/CloseIcon';
 
@@ -47,3 +47,3 @@ describe('Test of CloseIcon', () => {
 
-  describe('handle mouseOver/mouseOut', () => {
+  describe('handle mouseEnter/mouseLeave', () => {
     beforeEach(() => {
@@ -55,5 +55,5 @@ component = ReactTestUtils.renderIntoDocument(
 
-    it('should update style and className on mouseOver', function () {
+    it('should update style and className on mouseEnter', function () {
       const span = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'span');
-      ReactTestUtils.SimulateNative.mouseOver(span);
+      ReactTestUtils.Simulate.mouseEnter(span);
       expect(ReactDom.findDOMNode(span).classList.contains('hover')).to.be.equal(true);
@@ -63,5 +63,5 @@ expect(ReactDom.findDOMNode(span).style.color).to.be.equal('yellow');
 
-    it('should update style and className on mouseOut', function () {
+    it('should update style and className on mouseLeave', function () {
       const span = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'span');
-      ReactTestUtils.SimulateNative.mouseOut(span);
+      ReactTestUtils.Simulate.mouseLeave(span);
       expect(ReactDom.findDOMNode(span).classList.contains('hover')).to.be.equal(false);
@@ -68,0 +68,0 @@ expect(ReactDom.findDOMNode(span).style.color).to.be.equal('red');

test/components/Tab_spec.js

@@ -7,3 +7,3 @@ 'use strict';
 let expect = chai.expect;
-import Tab from '../../components/Tab';
+import Tab from '../../src/components/Tab';
 
@@ -30,2 +30,3 @@ describe('Test of Tab', () => {
     expect(component.props.tabClassNames.tabActive).to.be.equal('');
+    expect(component.props.tabClassNames.tabHover).to.be.equal('');
 
@@ -32,0 +33,0 @@ expect(component.props.tabStyles).to.be.empty;

test/components/Tabs_spec.js

@@ -10,4 +10,4 @@ 'use strict';
 
-import Tabs from '../../components/Tabs';
-import Tab from '../../components/Tab';
+import Tabs from '../../src/components/Tabs';
+import Tab from '../../src/components/Tab';
 
@@ -35,2 +35,3 @@ describe('Test of Tabs', () => {
     expect(component.props.tabsClassNames.tabActive).to.be.equal('');
+    expect(component.props.tabsClassNames.tabHover).to.be.equal('');
 
@@ -48,3 +49,4 @@ expect(component.props.tabsStyles).to.be.empty;
     expect(typeof component.props.onTabDoubleClick).to.be.equal('function');
-
+    expect(typeof component.props.onTabMouseEnter).to.be.equal('function');
+    expect(typeof component.props.onTabMouseLeave).to.be.equal('function');
   });
@@ -293,3 +295,7 @@
       tabAfterActive: {fontSize: '110px'},
-      tabCloseIcon: {fontSize: '111px'}
+      tabCloseIcon: {fontSize: '111px'},
+      tabOnHover: {fontSize: '112px'},
+      tabTitleOnHover: {fontSize: '113px'},
+      tabBeforeOnHover: {fontSize: '114px'},
+      tabAfterOnHover: {fontSize: '115px'}
     };
@@ -1326,2 +1332,149 @@
 
+  describe('handle mouseEnter/mouseLeave', () => {
+    const tabsClassNames = {
+      tabHover: 'myTabHover'
+    };
+    const tab2ClassNames = {
+      tabHover: 'mySpecialTabHover'
+    };
+
+    const tabsStyles = {
+      tabOnHover: {fontSize: '101px'},
+      tabBeforeOnHover: {fontSize: '102px'},
+      tabAfterOnHover: {fontSize: '103px'},
+      tabTitleOnHover: {fontSize: '104px'}
+    };
+
+    const tab2Styles = {
+      tabOnHover: {fontSize: '201px'},
+      tabBeforeOnHover: {fontSize: '202px'},
+      tabAfterOnHover: {fontSize: '203px'},
+      tabTitleOnHover: {fontSize: '204px'}
+    };
+
+    let called1 = false;
+    let enteredKey;
+    let called2 = false;
+    let leavedKey;
+    let onMouseEnter = (e, key) => {
+      called1 = true;
+      enteredKey = key;
+    }
+    let onMouseLeave = (e, key) => {
+      called2 = true;
+      leavedKey = key;
+    }
+
+    const tabs = [
+      (<Tab key={'tab1'} title={'tab1'} >
+        <div>
+          <h1>tab1Content</h1>
+        </div>
+      </Tab>),
+      (<Tab key={'tab2'} title={'tab2'} tabClassNames={tab2ClassNames} tabStyles={tab2Styles}>
+        <div>
+          <h1>tab2Content</h1>
+        </div>
+      </Tab>),
+      (<Tab key={'tab3'} title={'tab3'} >
+        <div>
+          <h1>tab3Content</h1>
+        </div>
+      </Tab>)
+    ];
+
+    beforeEach(() => {
+      component = ReactTestUtils.renderIntoDocument(
+        <Tabs
+          tabsClassNames={tabsClassNames}
+          tabsStyles={tabsStyles}
+          selectedTab="tab3"
+          onTabMouseEnter={onMouseEnter}
+          onTabMouseLeave={onMouseLeave}
+          tabs={tabs} />);
+    });
+
+    it('should update style and className on mouseEnter', function () {
+      let rdTabs = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTab');
+      ReactTestUtils.Simulate.mouseEnter(rdTabs[0]);
+      expect(ReactDom.findDOMNode(rdTabs[0]).classList.contains('rdTabHover')).to.be.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[0]).classList.contains('myTabHover')).to.be.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[0]).style.fontSize).to.be.equal('101px');
+
+      let rdTabBefore = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabBefore');
+      expect(rdTabBefore[0].style.fontSize).to.be.eql('102px');
+
+      let rdTabAfter = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabAfter');
+      expect(rdTabAfter[0].style.fontSize).to.be.eql('103px');
+
+      let rdTabTitle = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabTitle');
+      expect(rdTabTitle[0].style.fontSize).to.be.eql('104px');
+    });
+
+    it('should trigger props.onTabMouseEnter', function () {
+      expect(called1).to.be.eql(true);
+      expect(enteredKey).to.be.eql('tab1');
+      expect(called2).to.be.eql(false);
+    });
+
+    it('should update style and className on mouseLeave', function () {
+      let rdTabs = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTab');
+      ReactTestUtils.Simulate.mouseLeave(rdTabs[0]);
+      expect(ReactDom.findDOMNode(rdTabs[0]).classList.contains('rdTabHover')).to.be.not.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[0]).classList.contains('myTabHover')).to.be.not.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[0]).style.fontSize).to.be.not.equal('101px');
+
+      let rdTabBefore = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabBefore');
+      expect(rdTabBefore[0].style.fontSize).to.be.not.eql('102px');
+
+      let rdTabAfter = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabAfter');
+      expect(rdTabAfter[0].style.fontSize).to.be.not.eql('103px');
+
+      let rdTabTitle = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabTitle');
+      expect(rdTabTitle[0].style.fontSize).to.be.not.eql('104px');
+    });
+
+    it('should trigger props.onTabMouseLeave', function () {
+      expect(called2).to.be.eql(true);
+      expect(leavedKey).to.be.eql('tab1');
+    });
+
+    it('should update style and className with tab customized value on mouseEnter', function () {
+      let rdTabs = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTab');
+      ReactTestUtils.Simulate.mouseEnter(rdTabs[1]);
+      expect(ReactDom.findDOMNode(rdTabs[1]).classList.contains('rdTabHover')).to.be.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[1]).classList.contains('myTabHover')).to.be.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[1]).classList.contains('mySpecialTabHover')).to.be.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[1]).style.fontSize).to.be.equal('201px');
+
+      let rdTabBefore = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabBefore');
+      expect(rdTabBefore[1].style.fontSize).to.be.eql('202px');
+
+      let rdTabAfter = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabAfter');
+      expect(rdTabAfter[1].style.fontSize).to.be.eql('203px');
+
+      let rdTabTitle = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabTitle');
+      expect(rdTabTitle[1].style.fontSize).to.be.eql('204px');
+    });
+
+    it('should not update style and className on mouseEnter over active tab', function () {
+      let rdTabs = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTab');
+      ReactTestUtils.Simulate.mouseEnter(rdTabs[2]);
+      expect(ReactDom.findDOMNode(rdTabs[2]).classList.contains('rdTabHover')).to.be.not.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[2]).classList.contains('myTabHover')).to.be.not.equal(true);
+      expect(ReactDom.findDOMNode(rdTabs[2]).style.fontSize).to.be.not.equal('101px');
+
+      let rdTabBefore = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabBefore');
+      expect(rdTabBefore[2].style.fontSize).to.be.not.eql('102px');
+
+      let rdTabAfter = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabAfter');
+      expect(rdTabAfter[2].style.fontSize).to.be.not.eql('103px');
+
+      let rdTabTitle = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'rdTabTitle');
+      expect(rdTabTitle[2].style.fontSize).to.be.not.eql('104px');
+    });
+
+
+  });
+
 });

test/components/TabTemplate_spec.js

@@ -7,3 +7,3 @@ 'use strict';
 let expect = chai.expect;
-import TabTemplate from '../../components/TabTemplate';
+import TabTemplate from '../../src/components/TabTemplate';
 
@@ -10,0 +10,0 @@ describe('Test of TabTemplate', () => {

No alert changes

Improved metrics

Total package byte prevSize

175331

increased by48.71%

Number of package files

47

increased by27.03%

Lines of code

3969

increased by50.63%

Number of lines in readme file

277

increased by1.84%

No dependency changes