-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathcompositor.json
90 lines (90 loc) · 10.2 KB
/
compositor.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{
"name": "themre/react-closeable-tabs",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "hm",
"branch": "master",
"style": {
"name": "Material",
"componentSet": {
"nav": "nav/DarkAbsoluteNav",
"header": "header/GradientHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "Roboto, sans-serif",
"heading": {
"fontWeight": 500,
"letterSpacing": "-0.01em"
},
"colors": {
"text": "#212121",
"background": "#fff",
"primary": "#2196f3",
"secondary": "#1565c0",
"highlight": "#ff4081",
"border": "#e0e0e0",
"muted": "#f5f5f5"
},
"layout": {
"centered": true,
"bannerHeight": "80vh",
"maxWidth": 896
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "https://github.com/themre/react-closeable-tabs",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/react-closeable-tabs",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "react-closeable-tabs",
"subhead": "Simple react tabs that have close function",
"children": [
{
"component": "ui/TweetButton",
"text": "react-closeable-tabs: Simple react tabs that have close function",
"url": null
},
{
"component": "ui/GithubButton",
"user": "themre",
"repo": "react-closeable-tabs"
}
],
"text": "v1.0.3"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n<p>Simple Closeable tabs with React. </p>\n<h2>Usage</h2>\n<p>First install package</p>\n<pre>npm i -S react-closeable-<span class=\"hljs-keyword\">tabs</span> (yarn <span class=\"hljs-built_in\">add</span> react-closeable-<span class=\"hljs-keyword\">tabs</span>)</pre><p>To start using closeable tabs, you need to pass <code>data</code> prop which is an array of objects. Each object has the following properties:</p>\n<pre>{\n <span class=\"hljs-attribute\">tab</span>: <span class=\"hljs-string\">'Tab text'</span>, \n component: <YourComponent />, \n id: <span class=\"hljs-string\">'uniqueId'</span>, \n closeable: true\n}</pre><p>If you don't want tab to be closeable (not to have X to close it), you can set <code>closeable</code> property to <code>false</code>.</p>\n<h2>Example</h2>\n<pre><span class=\"hljs-keyword\">import</span> React <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react'</span>;\n<span class=\"hljs-keyword\">import</span> { render } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react-dom'</span>;\n\n<span class=\"hljs-keyword\">import</span> CloseableTabs <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react-closeable-tabs'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n state = {\n <span class=\"hljs-attr\">data</span>: [\n {\n <span class=\"hljs-attr\">tab</span>: <span class=\"hljs-string\">'List'</span>,\n <span class=\"hljs-attr\">component</span>: <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span><span class=\"hljs-tag\"><<span class=\"hljs-name\">h1</span>></span>Your list<span class=\"hljs-tag\"></<span class=\"hljs-name\">h1</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span></span>,\n <span class=\"hljs-attr\">id</span>: <span class=\"hljs-number\">0</span>\n },\n {\n <span class=\"hljs-attr\">tab</span>: <span class=\"hljs-string\">'Item detail 1'</span>,\n <span class=\"hljs-attr\">component</span>: <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>Item details for 1<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span></span>,\n <span class=\"hljs-attr\">id</span>: <span class=\"hljs-number\">1</span>,\n <span class=\"hljs-attr\">closeable</span>: <span class=\"hljs-literal\">true</span>\n },\n {\n <span class=\"hljs-attr\">tab</span>: <span class=\"hljs-string\">'Item detail 2'</span>,\n <span class=\"hljs-attr\">component</span>: <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>Item details for 2<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span></span>,\n <span class=\"hljs-attr\">id</span>: <span class=\"hljs-number\">2</span>,\n <span class=\"hljs-attr\">closeable</span>: <span class=\"hljs-literal\">true</span>\n },\n {\n <span class=\"hljs-attr\">tab</span>: <span class=\"hljs-string\">'Item detail 3'</span>,\n <span class=\"hljs-attr\">component</span>: <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>Item details for 3<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span></span>,\n <span class=\"hljs-attr\">id</span>: <span class=\"hljs-number\">3</span>,\n <span class=\"hljs-attr\">closeable</span>: <span class=\"hljs-literal\">true</span>\n }\n ]\n };\n\n addItem = <span class=\"hljs-function\"><span class=\"hljs-params\">()</span> =></span> {\n <span class=\"hljs-keyword\">const</span> id = <span class=\"hljs-keyword\">new</span> <span class=\"hljs-built_in\">Date</span>().valueOf();\n <span class=\"hljs-keyword\">this</span>.setState({\n <span class=\"hljs-attr\">data</span>: <span class=\"hljs-keyword\">this</span>.state.data.concat({\n <span class=\"hljs-attr\">tab</span>: <span class=\"hljs-string\">'New item '</span> + id,\n <span class=\"hljs-attr\">component</span>: (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>\n Your new component data for {id.toString().substring(6, 10)}\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span></span>\n ),\n <span class=\"hljs-attr\">id</span>: id,\n <span class=\"hljs-attr\">closeable</span>: <span class=\"hljs-literal\">true</span>\n }),\n <span class=\"hljs-attr\">activeIndex</span>: <span class=\"hljs-keyword\">this</span>.state.data.length\n });\n };\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">button</span> <span class=\"hljs-attr\">onClick</span>=<span class=\"hljs-string\">{this.addItem}</span>></span>Add item<span class=\"hljs-tag\"></<span class=\"hljs-name\">button</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">CloseableTabs</span>\n <span class=\"hljs-attr\">tabPanelColor</span>=<span class=\"hljs-string\">'lightgray'</span>\n <span class=\"hljs-attr\">data</span>=<span class=\"hljs-string\">{this.state.data}</span>\n <span class=\"hljs-attr\">onCloseTab</span>=<span class=\"hljs-string\">{(id,</span> <span class=\"hljs-attr\">newIndex</span>) =></span> {\n this.setState({\n data: this.state.data.filter(item => item.id !== id),\n activeIndex: newIndex\n });\n }}\n activeIndex={this.state.activeIndex}\n />\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n );\n }\n}\n\nrender(<span class=\"hljs-tag\"><<span class=\"hljs-name\">Demo</span> /></span>, document.querySelector('#demo'));</span></pre><h2>API</h2>\n<table>\n<thead>\n<tr>\n<th>Prop</th>\n<th>Type</th>\n<th>Default</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>data</td>\n<td>Array</td>\n<td>[]</td>\n<td>Array of objects that need to be in the following format: <code>{tab: 'Tab text', component: <YourComponent />, id: 'uniqueId', closeable: true}</code></td>\n</tr>\n<tr>\n<td>activeIndex</td>\n<td>Number</td>\n<td>0</td>\n<td>Define which tab is active by default</td>\n</tr>\n<tr>\n<td>identifier</td>\n<td>String</td>\n<td>id</td>\n<td>You can define new key for unique ID in your data object</td>\n</tr>\n<tr>\n<td>onCloseTab</td>\n<td>Function(id, newIndex)</td>\n<td>null</td>\n<td>Callback function that is invoked after clicking close tab. It passes id of closed object tab</td>\n</tr>\n<tr>\n<td>onTabClick</td>\n<td>Function(id, newIndex, oldIndex)</td>\n<td>null</td>\n<td>Callback function that is invoked after clicking tab. It passes id of clicked tab</td>\n</tr>\n<tr>\n<td>onBeforeTabClick</td>\n<td>Function(id, newIndex, oldIndex)</td>\n<td>null</td>\n<td>Callback function that is invoked before clicking tab. It passes id of clicked tab</td>\n</tr>\n<tr>\n<td>tabPanelColor</td>\n<td>String</td>\n<td>#f2f2f2</td>\n<td>Background of tabPanel holder</td>\n</tr>\n<tr>\n<td>renderClose</td>\n<td>Function</td>\n<td>'X'</td>\n<td>Custom content render of close button</td>\n</tr>\n<tr>\n<td>closeTitle</td>\n<td>String</td>\n<td>'Close tab'</td>\n<td>Close button tooltip text</td>\n</tr>\n<tr>\n<td>mainClassName</td>\n<td>String</td>\n<td>''</td>\n<td>Option to add additional class to main wrapping panel</td>\n</tr>\n<tr>\n<td>tabPanelClass</td>\n<td>String</td>\n<td>''</td>\n<td>Option to add additional class to tabPanel</td>\n</tr>\n<tr>\n<td>tabContentClass</td>\n<td>String</td>\n<td>''</td>\n<td>Option to add additional class to contentPanel</td>\n</tr>\n</tbody>\n</table>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/themre/react-closeable-tabs",
"text": "GitHub"
},
{
"href": "https://github.com/themre",
"text": "themre"
}
]
}
]
}