Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

Commit b828083

Browse files
valentijnniemanvalentijnnieman
authored
Merge pull request #213 from plotly/improved_tabs
Improved Tabs component
2 parents d23db91 + a50ba4d commit b828083

File tree

12 files changed

+934
-177
lines changed

12 files changed

+934
-177
lines changed

‎.babelrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"extends": "./node_modules/dash-components-archetype/config/babel/babelrc"
2+
"extends": "./node_modules/dash-components-archetype/config/babel/babelrc",
3+
"plugins": [
4+
"styled-jsx/babel"
5+
]
36
}

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
All notable changes to this project will be documented in this file.
33
This project adheres to [Semantic Versioning](http://semver.org/).
44

5+
## [0.26.0]
6+
### Added
7+
- New Tabs and Tab components! [#213](https://github.com/plotly/dash-core-components/pull/213#pullrequestreview-135893345)
8+
59
## [0.25.1]
610
### Fixed
711
- `__init__` version formatting for unpkg.

‎dash_core_components/bundle.js

Lines changed: 42 additions & 41 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dash_core_components/metadata.json

Lines changed: 313 additions & 95 deletions
Large diffs are not rendered by default.

‎dash_core_components/version.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
__version__ = '0.25.1'
1+
__version__ = '0.26.0'

‎demo/index.html

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css"/>
6-
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/xq-light.min.css"/>
7-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-select.css"/>
8-
<link rel="stylesheet" href="https://cdn.rawgit.com/chriddyp/abcbc02565dd495b676c3269240e09ca/raw/816de7d5c5d5626e3f3cac8e967070aa15da77e2/rc-slider.css"/>
9-
</head>
103

11-
<body>
12-
<div id="react-demo-entry-point"></div>
13-
</body>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css" />
8+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/xq-light.min.css" />
9+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-select.css" />
10+
<link rel="stylesheet" href="https://cdn.rawgit.com/chriddyp/abcbc02565dd495b676c3269240e09ca/raw/816de7d5c5d5626e3f3cac8e967070aa15da77e2/rc-slider.css"
11+
/>
12+
</head>
1413

15-
<footer>
16-
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
17-
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
18-
<script type="text/javascript" src="https://unpkg.com/react@15/dist/react.js"></script>
19-
<script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
20-
<script type="text/javascript" src="/lib/bundle.js"></script>
21-
</footer>
22-
</html>
14+
<body>
15+
<div id="react-demo-entry-point"></div>
16+
</body>
17+
18+
<footer>
19+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
20+
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
21+
<script type="text/javascript" src="https://unpkg.com/react@15/dist/react.js"></script>
22+
<script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
23+
<script type="text/javascript" src="/lib/bundle.js"></script>
24+
</footer>
25+
26+
</html>

‎package-lock.json

Lines changed: 49 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dash-core-components",
3-
"version": "0.25.1",
3+
"version": "0.26.0",
44
"description": "Core component suite for Dash",
55
"repository": {
66
"type": "git",
@@ -40,7 +40,8 @@
4040
"react-select": "^1.0.0-rc.10",
4141
"react-select-fast-filter-options": "^0.2.2",
4242
"react-syntax-highlighter": "^5.0.0",
43-
"react-virtualized-select": "^3.1.0"
43+
"react-virtualized-select": "^3.1.0",
44+
"styled-jsx": "^2.2.6"
4445
},
4546
"devDependencies": {
4647
"component-playground": "^2.0.0",

‎src/components/Tab.react.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
const Tab = ({ children }) => <div>{children}</div>;
5+
6+
/**
7+
* Part of dcc.Tabs - this is the child Tab component used to render a tabbed page.
8+
* Its children will be set as the content of that tab, which if clicked will become visible.
9+
*/
10+
Tab.propTypes = {
11+
/**
12+
* The ID of this component, used to identify dash components
13+
* in callbacks. The ID needs to be unique across all of the
14+
* components in an app.
15+
*/
16+
id: PropTypes.string,
17+
18+
/**
19+
* The tab's label
20+
*/
21+
label: PropTypes.children,
22+
23+
/**
24+
* The content of the tab - will only be displayed if this tab is selected
25+
*/
26+
children: PropTypes.node,
27+
28+
/**
29+
* Value for determining which Tab is currently selected
30+
*/
31+
value: PropTypes.string,
32+
33+
/**
34+
* Determines if tab is disabled or not - defaults to false
35+
*/
36+
disabled: PropTypes.bool,
37+
38+
/**
39+
* Overrides the default (inline) styles when disabled
40+
*/
41+
disabled_style: PropTypes.object,
42+
43+
/**
44+
* Appends a class to the Tab component when it is disabled.
45+
*/
46+
disabled_className: PropTypes.string,
47+
48+
/**
49+
* Appends a class to the Tab component.
50+
*/
51+
className: PropTypes.string,
52+
53+
/**
54+
* Appends a class to the Tab component when it is selected.
55+
*/
56+
selected_className: PropTypes.string,
57+
58+
/**
59+
* Overrides the default (inline) styles for the Tab component.
60+
*/
61+
style: PropTypes.object,
62+
63+
/**
64+
* Overrides the default (inline) styles for the Tab component when it is selected.
65+
*/
66+
selected_style: PropTypes.object
67+
};
68+
69+
Tab.defaultProps = {
70+
disabled: false,
71+
disabled_style: {
72+
color: '#d6d6d6'
73+
}
74+
}
75+
76+
export default Tab;

0 commit comments

Comments
 (0)