Upload Component (#73)

* upload component 🎉 * integration test * update circle python requirements * lint * ✨ sort imports
plotly · Oct 14, 2017 · b7f776f · b7f776f
1 parent fbfe532
commit b7f776f
Show file tree

Hide file tree

Showing 17 changed files with 687 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.14.0] - 2017-10-13
+### :sparkles: Added
+- An `Upload` component! :tada:
+
 ## [0.13.0] - 2017-10-05
 ### Added
 - Bumped [plotly.js](https://github.com/plotly/plotly.js) from `v1.29.3` to `v1.30.0`.
@@ -53,7 +57,6 @@ The following improvements from this version update apply to dash:
 -  Non-ascii characters, like chinese characters, are now supported as
    search strings in the `dcc.Dropdown` component (https://github.com/plotly/dash-core-components/pull/75)
 
-
 ## [0.12.5] - 2017-09-11
 ### :bug: Fixed
 -  The `Interval` component was constantly resetting its interval on every update. Initially reported in https://community.plot.ly/t/multiple-interval-object-in-a-single-page/5699/3

diff --git a/dash_core_components/__init__.py b/dash_core_components/__init__.py
@@ -21,9 +21,9 @@
     {
         "relative_package_path": "bundle.js",
         "external_url": (
-            "https://unpkg.com/dash-core-components@{}"
+            "https://unpkg.com/dash-core-components@0.13.0-rc3"
             "/dash_core_components/bundle.js"
-        ).format(__version__),
+        ),
         "namespace": "dash_core_components"
     }
 ]

diff --git a/dash_core_components/metadata.json b/dash_core_components/metadata.json
@@ -2567,5 +2567,241 @@
         "description": ""
       }
     }
+  },
+  "src/components/Upload.react.js": {
+    "description": "",
+    "methods": [
+      {
+        "name": "onDrop",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "files",
+            "type": null
+          }
+        ],
+        "returns": null
+      }
+    ],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "ID of the component. Used to identify component\nin Dash callback functions."
+      },
+      "contents": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
+            }
+          ]
+        },
+        "required": false,
+        "description": "The contents of the uploaded file as a binary string"
+      },
+      "filename": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
+            }
+          ]
+        },
+        "required": false,
+        "description": "The name of the file(s) that was(were) uploaded.\nNote that this does not include the path of the file\n(for security reasons)."
+      },
+      "last_modified": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "number"
+            },
+            {
+              "name": "arrayOf",
+              "value": {
+                "name": "number"
+              }
+            }
+          ]
+        },
+        "required": false,
+        "description": "The last modified date of the file that was uploaded in unix time\n(seconds since 1970)."
+      },
+      "children": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "node"
+            },
+            {
+              "name": "string"
+            }
+          ]
+        },
+        "required": false,
+        "description": "Contents of the upload component"
+      },
+      "accept": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Allow specific types of files.\nSee https://github.com/okonet/attr-accept for more information.\nKeep in mind that mime type determination is not reliable across\nplatforms. CSV files, for example, are reported as text/plain\nunder macOS but as application/vnd.ms-excel under Windows.\nIn some cases there might not be a mime type set at all.\nSee: https://github.com/react-dropzone/react-dropzone/issues/276"
+      },
+      "disabled": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Enable/disable the upload component entirely",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "disable_click": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Disallow clicking on the component to open the file dialog",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "max_size": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "Maximum file size. If `-1`, then infinite",
+        "defaultValue": {
+          "value": "-1",
+          "computed": false
+        }
+      },
+      "min_size": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "Minimum file size",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
+      "multiple": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Allow dropping multiple files",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "HTML class name of the component"
+      },
+      "className_active": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "HTML class name of the component while active"
+      },
+      "className_reject": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "HTML class name of the component if rejected"
+      },
+      "className_disabled": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "HTML class name of the component if disabled"
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "CSS styles to apply",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "style_active": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "CSS styles to apply while active",
+        "defaultValue": {
+          "value": "{\n    borderStyle: 'solid',\n    borderColor: '#6c6',\n    backgroundColor: '#eee'\n}",
+          "computed": false
+        }
+      },
+      "style_reject": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "CSS styles if rejected",
+        "defaultValue": {
+          "value": "{\n    borderStyle: 'solid',\n    borderColor: '#c66',\n    backgroundColor: '#eee'\n}",
+          "computed": false
+        }
+      },
+      "style_disabled": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "CSS styles if disabled",
+        "defaultValue": {
+          "value": "{\n    opacity: 0.5\n}",
+          "computed": false
+        }
+      },
+      "setProps": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Dash-supplied function for updating props"
+      }
+    }
   }
 }
diff --git a/dash_core_components/version.py b/dash_core_components/version.py
@@ -1 +1,2 @@
-__version__ = '0.13.0'
+__version__ = '0.14.0'
+
diff --git a/demo/Demo.react.js b/demo/Demo.react.js
@@ -11,9 +11,16 @@ import {
     Slider,
     SyntaxHighlighter,
     Interval,
-    Markdown
+    Markdown,
+    Upload
 } from '../src';
 
+
+const UploadExample = `
+const properties = {};
+
+ReactDOM.render(<Upload {...properties}/>, mountNode);`
+
 const MarkdownExample = `
 
 const markdown = \`
@@ -294,6 +301,7 @@ ReactDOM.render(<Controller/>, mountNode);`
 
 
 const examples = [
+    {name: 'Upload', code: UploadExample},
     {name: 'Markdown', code: MarkdownExample},
     {name: 'Interval', code: SetTimeoutExample},
     {name: 'Graph', code: GraphExample},
@@ -318,7 +326,7 @@ class Demo extends Component {
                             <h3>{example.name}</h3>
                             <Playground
                                 codeText={example.code}
-                                scope={{Component, React, ReactDOM, Checklist, Dropdown, Graph, Input, RadioItems, RangeSlider, Slider, SyntaxHighlighter, Interval, Markdown}}
+                                scope={{Component, React, ReactDOM, Checklist, Dropdown, Graph, Input, RadioItems, RangeSlider, Slider, SyntaxHighlighter, Interval, Markdown, Upload}}
                                 noRender={false}
                                 theme={'xq-light'}
                             />

diff --git a/dev-requirements.txt b/dev-requirements.txt
@@ -1,7 +1,7 @@
 dash_html_components
 dash_renderer
 dash
-git+git://github.com/chriddyp/python-percy-client.git@print-request
+percy
 selenium
 mock
 tox
@@ -10,3 +10,6 @@ six
 plotly>=2.0.8
 requests[security]
 ipdb
+dash-table-experiments
+xlrd
+pandas
diff --git a/images/upload-component.gif b/images/upload-component.gif
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",
@@ -34,6 +34,7 @@
     "react-addons-shallow-compare": "^15.6.0",
     "react-dates": "^12.3.0",
     "react-dom": "^15.4.0",
+    "react-dropzone": "^4.1.2",
     "react-markdown": "^2.4.5",
     "react-select": "^1.0.0-rc.10",
     "react-select-fast-filter-options": "^0.2.2",