ctxhou / react-tabtab Goto Github PK

Draggable tabs not working on touch devices. Can be reproduced with Chrome device simulator.

When I starting implemented the "react-tabtab" component worked well and on the beginning don't appear it to me this, but on the progress of the project somehow this starting to showing.

How can I remove them?

On first click i want to show corresponding content panel but on clicking again i want to show drop down to select option from.

Hello all,

I've been playing few hours with this library, very easy to instantiate tabs and panels however, I am having an issue with the customStyle that somehow I am not able to define.

The style has been defined in a separate file called tabConfiguration.js (I copied the css section from the material theme and then tried to change it to see changes on the UI).

import {styled} from 'react-tabtab';
let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styled;

TabListStyle = TabListStyle.extend`
    background-color: #009988;
`;

TabStyle = TabStyle.extend`
    background-color: #009988;
    transition: color .28s ease;
${props => props.active && !props.vertical ?
    ` border-bottom: 2px solid #f6b2b5;` : null}
        &:hover {
            background-color: transparent;
        }
`;

ActionButtonStyle = ActionButtonStyle.extend`
    background-color: #009988;
    border-radius: 0;
    &:hover {
        background-color: #eee;
    }
`;

PanelStyle = PanelStyle.extend`
    background-color: #009988;
    border-left: 1px solid rgba(0,0,0,0.12);
    border-right: 1px solid rgba(0,0,0,0.12);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding: 30px 30px;
    transition: box-shadow .25s, -webkit-box-shadow .25s;
    border-radius: 2px;
`;

// need to follow this object naming
export default {
    TabList: TabListStyle,
    ActionButton: ActionButtonStyle,
    Tab: TabStyle,
    Panel: PanelStyle
}

This file is then imported in the main file of my project

import {Tabs, TabList, Tab, PanelList, Panel} from 'react-tabtab';
import * as customStyle from './configuration/tabConfiguration';

and this is where I use the react-tabtab component

<div className="containerForTabs">
                    <Tabs customStyle={customStyle}>
                        <TabList>
                            <Tab>Adult Brain</Tab>
                            <Tab>Half Ito</Tab>
                        </TabList>
                        <PanelList>
                            <Panel>
                            <FlexLayout.Layout
                                model={this.state.model}
                                factory={this.factory.bind(this)}/>
                            </Panel>
                            <Panel>
                                Officiis commodi facilis optio eum aliquam.<br />
                                Tempore libero sit est architecto voluptate. Harum dolor modi
                                deleniti animi qui similique facilis. Sit delectus voluptatem
                                praesentium recusandae neque quo quod.
                            </Panel>
                        </PanelList>
                    </Tabs>
                </div>

Thanks in advance for any help.

Hi,

I would like to know if there is the possibility to use your library with react router?

I have app which I want to have only the active page content as every page performs ASP .NET server side processing

Thanks

tab content can send in async way

Hi,

Thanks for the really great plugin.

One slight issue I'm having is that when I mount the Tabs component with the prop defaultIndex set to the index of a Tab hidden by the container, it doesn't scroll to make it visible.

I tried to add the following code this.scrolltoIndex(this.props.activeIndex) in the componentDidMount method of the TabList component., it seems to be scrolling a little, but not enough to show the active tab, I'm suspecting an issue with the container width calcuation.

https://codesandbox.io/s/ovkn502kp5

Hi @ctxhou I'm getting an error when I try to put the code from this link https://github.com/ctxhou/react-tabtab/blob/master/docs/components/Basic.js to my project component. I'm currently using "react": "^15.4.0", as per you readme.md your component supports react v15.

is it possible to make tabs buttons, so we can change tab with keyboard?

From what I've seen you can't style ExtraButton. Can you add the option to place it in the tab row box so it's inline already looks nicer?

I recently use react-tabtab, its good for use.But in my situation, I just setData in drop event trigger not every hover.

I followed the guidelines in order to make my own style, However, I am getting the following error: TypeError: (0 , _reactTabtab2.default) is not a function
import {styled} from 'react-tabtab';
let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styled;

TabListStyle = styled(TabListStyle)// write css;

In order to fix the issue. I have to write like the following:
import styled from 'styled-components';
import {styled as themeStyled} from 'react-tabtab';
let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = themeStyled;

TabListStyle = styled(TabListStyle)// write css;

"react": "^16.8.6", "react-dom": "^16.8.6", "styled-components": "^4.0.0" "react-tabtab": "^2.0.0",

I have used the tabs as per the documentation. But the arrow button icon is not getting displayed. I have imported bootstrap style in my component. do i need to install any extra dependency for arrow button.

I am not using font awesome and I cannot see the left and right arrows. How to use custom arrow icons. For other modifications, I cannot even add css as it having dynamic classNames.

I think it would be nice having the ability to init a scroll (left or right) when a tab is dragged over an Arrow Button.

Happy to work on a PR for this, if it makes sense.

Should be able to pass disabled to ExtraButton when user isn't allowed to make new tabs. Although I guess you can just use a custom button.

Hi there,
Into my project I tossed some code just to see it in action which was basically a duplicate of the add and close. Upon running I received the following error.

85 | var ActionButtonStyle = _styledComponents2.default.div(_templateObject4, buttonWidth);
 86 | 
 87 | var makeScrollButton = function makeScrollButton(ActionButton) {
> 88 |   return ActionButton.extend(_templateObject5, function (props) {
 89 |     return props.left ? props.showModalButton ? 'left: ' + (buttonWidth + 2) + 'px' : 'left: 0' : 'right: 0';
 90 |   });
 91 | };

and

TabList.js:88 Uncaught TypeError: ActionButton.extend is not a function
    at makeScrollButton (TabList.js:88)
    at TabListComponent.render (TabList.js:353)
    at finishClassComponent (react-dom.development.js:13538)
    at updateClassComponent (react-dom.development.js:13501)
    at beginWork (react-dom.development.js:14090)
    at performUnitOfWork (react-dom.development.js:16416)
    at workLoop (react-dom.development.js:16454)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145) ....

The issue was resolved by reverting back from styled-components 4.0.2 to 3.4.10.
Just FYI.

Working with styles and styled components does not work for everybody (and to be honnest I think that's one of the worst tools for react that was ever created, but nevermind). If you just added the ability to pass a classname to various components it would make it easier to extend for various users like I do

Hey guys,

I want to create an own style. Unfortunately it does not work.
Would be great, if you can share an example...

Thanks in advance

Suppose we have a couple of components that are stateful, now we mount them to tab content.

I know I can change the state of one component, when the tab that contains it is activated. But after switching to another tab and back, the component is re-mounted and the modified state of it is gone.

Maybe it is too much for react-tabtab, but is there a way to maintain the states of all tab content ?

I just installed and it crashes with the following message.

"./node_modules/react-tabtab/lib/TabList.js
Module not found: Can't resolve 'styled-components' in 'node_modules\react-tabtab\lib' "

Not sure if that's an OS, browser, or library limitation. Most of my DnD apps drag images, so I've never noticed it before if it's OS or browser.

Since we're using Draggable Tab to display dynamic content , we expect all tabs to have a fixed height and width （80vh, 100vw for example）

However setting style seperately for every Panel content is not working.

Any help will be appreciated.

Version: ^1.81 (npm)
If change dragTab to Tab then close event is fine.

And official mix all feature example has same issue (Windows 7 / Chrome 66.0.3359 )

When I attempt to close the Modal and there are no tabs open, because the user closes all tabs they have from the Modal, I get a TypeError: tab is undefined and the relevant stack being:

getTabNode
scrollToIndex
toggleModal

I know that this isn't a typical case because generally we disallow tabs to be closable if there is just one, but in my case I need to allow all tabs to be closable from any point in this component's use.

Otherwise, great component, saved my skin. 👍

Hello,

I have tested remove(close) buttons on your demo site, https://ctxhou.github.io/react-tabtab/#add-close.

When I intentionally clicked remove buttons in tabs again and again, sometimes nothing happened.

That's it. Is there a possibility to fix it ?

Shouldn't tabDeleteButton property make tabtab__folder__circCont visible on each tab? It is only visible on the active one.

From official samples[here], I found that when ExtraButton was set, closable could not work properly.

Here are some code revealing the problem. https://codesandbox.io/s/vvnkr7p50y

Only when ExtraButton is removed, closable starts to work.

Is this a bug or an usage issue ?

In addition to text, it would be great to be able to put an icon into tabs.

If i add custom style as follows

import * as customStyle from 'react-tabtab/lib/themes/bootstrap';

This works fine.

However, if i create my own style following instructions and put into themes/index.js. Import as follows

import * as customStyle from '../themes';

Then it does not work. Not work meaning the styles are not picked up from my index.js, there are no errors either.

My index.js is exact copy of https://github.com/ctxhou/react-tabtab/tree/master/src/themes/bootstrap

if set the tab in state and push the new tab then re-set state, the new tab cant work (cant click).

Thank you for this awesome package! It's really great, and works as expected and without any hassle. My only concern is a lot of unnecessary updates, originating from react-tabtab components. I use the why-did-you-update package, to monitor updates that could be avoided, since props and/or state are the same.

Any ideas on how to avoid this?

Hi, I'm using react-tabtab with Electron, and when loading themes, webpack reports erros:

ERROR in ./node_modules/[email protected]@react-tabtab/src/DragTab.js
Module parse failed: Unexpected token (6:51)
You may need an appropriate loader to handle this file type.
| import Tab from './Tab';
| 
| const DragTabElement = SortableElement(({children, ...props}) => {
|   return (
|     <Tab index={props.tabIndex} {...props}>
 @ ./node_modules/[email protected]@react-tabtab/src/index.js 6:0-32
 @ ./node_modules/[email protected]@react-tabtab/src/themes/material-design/index.js
 @ ./app/pages/tabs/containers/themes.js
 @ ./app/pages/tabs/containers/index.js
 @ ./app/pages/tabs/index.js
 @ ./app/routes.js
 @ ./app/pages/root/containers/index.js
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:1212 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:1212/ webpack/hot/only-dev-server ./app/index.js

devDependencies of package.json:

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.1.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-dev-expression": "^0.2.1",
    "babel-plugin-flow-runtime": "^0.15.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "chalk": "^2.3.0",
    "concurrently": "^3.5.1",
    "cross-env": "^5.1.3",
    "cross-spawn": "^6.0.4",
    "css-loader": "^0.28.9",
    "detect-port": "^1.2.2",
    "electron": "^1.7.11",
    "electron-builder": "^19.55.3",
    "electron-devtools-installer": "^2.2.3",
    "electron-rebuild": "^1.7.3",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.1",
    "eslint": "^4.16.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-formatter-pretty": "^1.3.0",
    "eslint-import-resolver-webpack": "^0.8.4",
    "eslint-plugin-compat": "^2.2.0",
    "eslint-plugin-flowtype": "^2.42.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jest": "^21.7.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^7.6.1",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "fbjs-scripts": "^0.8.1",
    "file-loader": "^1.1.6",
    "flow-bin": "^0.64.0",
    "flow-runtime": "^0.16.0",
    "flow-typed": "^2.3.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^22.1.4",
    "minimist": "^1.2.0",
    "node-sass": "^4.7.2",
    "npm-logical-tree": "^1.2.1",
    "react-test-renderer": "^16.2.0",
    "redux-logger": "^3.0.6",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "sinon": "^4.2.2",
    "spectron": "^3.8.0",
    "style-loader": "^0.20.1",
    "stylefmt": "^6.0.0",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^18.0.0",
    "uglifyjs-webpack-plugin": "1.1.8",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-bundle-analyzer": "^2.9.2",
    "webpack-dev-server": "^2.11.1",
    "webpack-merge": "^4.1.1"
  }

Could any show me why this occurs and how to solve it? Very much appreciated.

I have a chat client, where a user has several columns of tabs.

I wish the user to be able to drag a tab between columns.

1. Would react-tabtab support this?
   If not,
2. Would it be a very complex change to support it?

(I'm happy to sponsor such a new capability, if necessary)

I have created style for panellist. remove animation . it not working

I try to set modalIsOpen = true on Tabs Component. It is no effective.
thk ~

Hey.

I've just tried the examples of basic tabs view and draggable ones, and got the following error, with no real ability to change it as the stack is inside the package:

Uncaught TypeError: Cannot read property 'EventPluginHub' of undefined

Uncaught TypeError: Cannot read property 'EventPluginHub' of undefined
at injectTapEventPlugin
at Object.
at webpack_require
at Object._typeof
at webpack_require
at Object.defineProperty.value
at webpack_require
at Object.defineProperty.value
at webpack_require
at Object._typeof

Issues were solved when I've commented out the tabs components.

Using DragTabs - when first implemented, this method works fine. As soon as I made a change anywhere in the codebase, saved these changes (hot reload fired) - this method no longer worked and the tags were no longer "draggable". Any suggestions?

You can replicate in your Advanced Tabs demo.
Close all the tabs and the entire component disappears.

the MyComponent.extend function will be removed in 4.0.0 and will throw a warning.

you can use styled(MyComponent) instead.

When the last tab gets removed, because of property updates (i create tabs by iterating over an array and then i remove an entry from the array), i get this error:

TypeError: Cannot read property '__INTERNAL_NODE' of undefined
    at TabListComponent.getTabNode (/node_modules/react-tabtab/lib/TabList.js:166:15)
    at TabListComponent.scrollToIndex (/node_modules/react-tabtab/lib/TabList.js:212:28)
    at TabListComponent.componentDidUpdate (/node_modules/react-tabtab/lib/TabList.js:147:14)