diff --git a/appveyor.yml b/appveyor.yml
new file mode 100644
index 0000000..5cf1f0e
--- /dev/null
+++ b/appveyor.yml
@@ -0,0 +1,21 @@
+# Test against the latest version of this Node.js version
+environment:
+ nodejs_version: "6"
+
+# Install scripts. (runs after repo cloning)
+install:
+ # Get the latest stable version of Node.js or io.js
+ - ps: Install-Product node $env:nodejs_version
+ # install modules
+ - npm install
+
+# Post-install test scripts.
+test_script:
+ # Output useful info for debugging.
+ - node --version
+ - npm --version
+ # run tests
+ - npm test
+
+# Don't actually build.
+build: off
diff --git a/compositor.json b/compositor.json
deleted file mode 100644
index abdd18d..0000000
--- a/compositor.json
+++ /dev/null
@@ -1,147 +0,0 @@
-{
- "name": "ctxhou/react-tabtab",
- "version": "0.1.4",
- "libraries": {
- "xv": "^1.1.25"
- },
- "title": "",
- "branch": "",
- "style": {
- "name": "Default",
- "componentSet": {
- "nav": "nav/BasicNav",
- "header": "header/BannerHeader",
- "article": "article/BasicArticle",
- "footer": "footer/BasicFooter"
- },
- "fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
- "fontWeight": 400,
- "bold": 600,
- "lineHeight": 1.5,
- "typeScale": [
- 72,
- 48,
- 24,
- 20,
- 16,
- 14,
- 12
- ],
- "monospace": "Menlo, monospace",
- "heading": {
- "fontFamily": null,
- "fontStyle": null,
- "fontWeight": 600,
- "lineHeight": 1.25,
- "textTransform": null,
- "letterSpacing": null
- },
- "h0": {},
- "h1": {},
- "h2": {},
- "h3": {},
- "h4": {},
- "h5": {},
- "h6": {},
- "alternativeText": {},
- "space": [
- 0,
- 8,
- 16,
- 32,
- 48,
- 64,
- 96
- ],
- "layout": {
- "maxWidth": 1024,
- "centered": false
- },
- "colors": {
- "text": "#111",
- "background": "#fff",
- "primary": "#08e",
- "secondary": "#059",
- "highlight": "#e08",
- "border": "#ddd",
- "muted": "#eee"
- },
- "border": {
- "width": 1,
- "radius": 2
- },
- "link": {},
- "button": {
- "hover": {
- "boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
- }
- },
- "input": {},
- "body": {
- "margin": 0
- },
- "breakpoints": {
- "xs": "@media screen and (max-width:40em)",
- "sm": "@media screen and (min-width:40em)",
- "md": "@media screen and (min-width:52em)",
- "lg": "@media screen and (min-width:64em)"
- }
- },
- "content": [
- {
- "component": "nav",
- "links": [
- {
- "href": "http://ctxhou.github.io/react-tabtab/",
- "text": "Home"
- },
- {
- "href": "https://github.com/ctxhou/react-tabtab",
- "text": "GitHub"
- },
- {
- "href": "https://npmjs.com/package/react-tabtab",
- "text": "npm"
- }
- ]
- },
- {
- "component": "header",
- "heading": "react-tabtab",
- "subhead": "An api based react tab.",
- "children": [
- {
- "component": "ui/TweetButton",
- "text": "react-tabtab: An api based react tab.",
- "url": "http://ctxhou.github.io/react-tabtab/"
- },
- {
- "component": "ui/GithubButton",
- "user": "ctxhou",
- "repo": "react-tabtab"
- }
- ],
- "text": "v0.8.0"
- },
- {
- "component": "article",
- "metadata": {
- "source": "github.readme"
- },
- "html": "\n![](\"https://img.shields.io/npm/v/react-tabtab.svg?maxAge=2592000\")
\n![](\"https://david-dm.org/ctxhou/react-tabtab.svg\")
\n![](\"https://img.shields.io/npm/dm/react-tabtab.svg?maxAge=2592000\")
\nreact-tabtab is an api based react tab.
\nDemo
\nFeatures
\n![](\"http://i.imgur.com/r5ssaiM.png\")
\n\n- Add tab
\n- Delete tab
\n- Drag and Drop tab
\n
\nUsage
\nNow only available the commonjs module.
\nInstall it with npm.
\nnpm install react-tabtab --save
Simple example:
\nvar Tabs = require('react-tabtab').Tabs;\nvar Panel = require('react-tabtab').Panel;\n\nvar App = React.createClass({\n render: function() {\n return (\n <Tabs>\n <Panel title="hi">\n Hi!\n </Panel>\n <Panel title="yo" lazy={true}>\n yo yo\n </Panel>\n </Tabs>\n )\n }\n})\n\nReact.render(<App/>, document.getElementById('container'));Advanced Usage
\nAdd tab
\n![](\"http://i.imgur.com/55GxKoR.png\")
\nTrigger event on the add tab. Check the example code.
\nprops
\n\n- addBackTab (boolean)
\n- true : show add tab
\n- false: hide add tab
\n
\n \n- handleAddBackClick (function): trigger the event when user click the tab.
\n
\nDelete tab
\n![](\"http://i.imgur.com/znf3CJA.png\")
\nTrigger event on the delete button. Check the example code.
\nprops
\n\n- tabDeleteButton (boolean)
\n- true : show delete button
\n- false: hide delete button
\n
\n \n- handleTabDeleteButton (function): trigger the event when user click delete button.
\n
\nDrag and Drop:
\n![](\"http://i.imgur.com/crMwvdr.gif\")
\nThe drag and drop feature is based on react-dnd. You can drag the tab to change the sequence.
\nBecause react-dnd can't have two HTML5 backends at the same time (this issue), react-tabtab doesn't wrap the HTML5 in the library.
\nReact-tabtab only wrap the DragSource and DropTarget on the tab, so if you want to use drag and drop, you need to wrap the DragDropContext on your top compoennt. (in case in your project you already have another html5 backend)
\nIn this way, the drag and drop feature in react-tabtab can fit with other dnd library.
\nCheck out the example code and the top component.
\nprops
\n\n- draggable (boolean)
\n- true : tab can drag
\n- false: tab can't drag
\n
\n \n- beginDrag (function): do something when start to drag
\n- setMoveData (function)
\n- return value {dragIndex, hoverIndex}
\n- dragIndex: current drag tab index
\n- hoverIndex: current hove tab index
\n
\n \n
\n \n
\nAdvanced example
\nCheck the advanced.jsx.
\nThis example show how to add tab, delete tab, and drag and drop.
\nAll API
\n\n\n\n| property | \ntype | \ndefault | \nrequired | \ndescription | \n
\n\n\n\n| activeKey | \nint | \n0 | \nno | \nset the active key of the tab | \n
\n\n| addBackTab | \nboolean | \nfalse | \nno | \nwhether show a add tab at the end | \n
\n\n| handleAddBackClick | \nfunction | \nn/a | \nno | \ncallback function when user click the add tab | \n
\n\n| deleteButton | \nboolean | \nfalse | \nno | \nwhether show a delete button at each panel | \n
\n\n| handleDeleteButton | \nfunction | \nfalse | \nno | \ncallback function when user click the delete button | \n
\n\n| handleTabClick | \nfunction | \nn/a | \nno | \nreturn the key which user clicks | \n
\n\n| tabDeleteButton | \nboolean | \nfalse | \nno | \nwhether each tab show delete button | \n
\n\n| handleTabDeleteButton | \nfunction | \nn/a | \nno | \ncallback function when click tabDeleteButton | \n
\n\n| style | \nstring | \ntabtabdefault | \nno | \nthe class prefix | \n
\n\n| deleteAllClassname | \nstring | \nn/a | \nno | \n | \n
\n\n| draggable | \nboolean | \nfalse | \nno | \nwhether tab can drag and drop | \n
\n\n| beginDrag | \nfunction | \nn/a | \nno | \ncallback function when start drag | \n
\n\n| setMoveData | \nfunction | \nn/a | \nno | \ncallback function to get current index and hover index | \n
\n\n
\nStyle
\nnow only use css as style.
\nif you want to use the same style as teh demo, just clone the stylesheets/folder.css and inlcude in you project.
\nDevelopment
\n npm run build:watch\n node devServer.js
\nLicense
\nMIT @ctxhou
\n"
- },
- {
- "component": "footer",
- "links": [
- {
- "href": "https://github.com/ctxhou/react-tabtab",
- "text": "GitHub"
- },
- {
- "href": "https://github.com/ctxhou",
- "text": "ctxhou"
- }
- ]
- }
- ]
-}
\ No newline at end of file