Merge pull request #3971 from Automattic/add/component-file-picker

Components: add `FilePicker` component

client/components/file-picker/README.md

@@ -0,0 +1,28 @@
+FilePicker
+==========
+
+This component opens a native file picker when its children are clicked on.
+It is a very thin wrapper around
+[`component/file-picker`](https://github.com/component/file-picker)
+
+#### How to use:
+
+```js
+var FilePicker = require( 'components/file-picker' );
+
+render: function() {
+	return (
+		<FilePicker multiple accept="image/*" onPick={ console.log.bind(console) } >
+			<a href="#">Select a few images!</a>
+		</FilePicker>
+	);
+}
+```
+
+#### Props
+
+* `multiple`: (bool) Allow selecting multiple files (Defaults to `false`).
+* `directory`: (bool) Allow selecting of a directory (Defaults to `false`).
+* `accept`: (string) Content type MIME to accept. Wildcards (`*`) are supported.
+* `onPick`: (func) Function to call when the user has selected one or more files.
+

client/components/file-picker/docs/example.jsx

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import Card from 'components/card';
+import Button from 'components/button';
+import FilePicker from 'components/file-picker';
+
+export default class FilePickers extends React.Component {
+	constructor( props ) {
+		super( props );
+	}
+
+	onSingle( files ) {
+		alert( 'Selected file: ' + JSON.stringify( files[0].name ) );
+	}
+
+	onMulti( files ) {
+		alert( 'Selected files:\n' + [].slice.call( files ).map( ( file ) => {
+			return '  ' + JSON.stringify( file.name );
+		} ).join( '\n' ) );
+	}
+
+	render() {
+		return (
+			<div className="design-assets__group">
+				<h2>
+					<a href="/devdocs/design/file-pickers">File Picker</a>
+				</h2>
+
+				<Card>
+
+					<h4>Select a single file:</h4>
+					<FilePicker onPick={ this.onSingle } >
+						<Button>Single Item</Button>
+					</FilePicker>
+
+					<h4>Select a multiple files:</h4>
+					<FilePicker multiple onPick={ this.onMulti } >
+						<Button>Multiple Items</Button>
+					</FilePicker>
+
+					<h4>Select a directory:</h4>
+					<FilePicker directory onPick={ this.onMulti } >
+						<Button>Directory</Button>
+					</FilePicker>
+
+					<h4>Select an image file:</h4>
+					<FilePicker accept="image/*" onPick={ this.onSingle } >
+						<Button>JPEG / PNG / GIF</Button>
+					</FilePicker>
+
+					<h4>Any internal content works:</h4>
+					<FilePicker onPick={ this.onSingle } >
+						<a href="#">Select File…</a>
+					</FilePicker>
+
+				</Card>
+			</div>
+		);
+	}
+}
+
+FilePickers.displayName = 'FilePickers';

client/components/file-picker/index.jsx

@@ -0,0 +1,44 @@
+/** @ssr-ready **/
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import assign from 'lodash/assign';
+import noop from 'lodash/noop';
+import pick from 'component-file-picker';
+
+export default class FilePicker extends React.Component {
+	constructor( props ) {
+		super( props );
+		this.showPicker = this.showPicker.bind( this );
+	}
+
+	showPicker() {
+		pick( assign( {}, this.props ), this.props.onPick );
+	}
+
+	render() {
+		return (
+			<span className="file-picker" onClick={ this.showPicker } >
+				{ this.props.children }
+			</span>
+		);
+	}
+}
+
+FilePicker.displayName = 'FilePicker';
+
+FilePicker.propTypes = {
+	multiple: React.PropTypes.bool,
+	directory: React.PropTypes.bool,
+	accept: React.PropTypes.string,
+	onPick: React.PropTypes.func
+};
+
+FilePicker.defaultProps = {
+	multiple: false,
+	directory: false,
+	accept: null,
+	onPick: noop
+};

client/devdocs/design/index.jsx

@@ -48,6 +48,7 @@ import Version from 'components/version/docs/example';
 import BulkSelect from 'components/bulk-select/docs/example';
 import ExternalLink from 'components/external-link/docs/example';
 import FeatureGate from 'components/feature-example/docs/example';
+import FilePickers from 'components/file-picker/docs/example';
 import Collection from 'devdocs/design/search-collection';
 
 export default React.createClass( {
@@ -94,6 +95,7 @@ export default React.createClass( {
 					<DropZones searchKeywords="drag" />
 					<ExternalLink />
 					<FeatureGate />
+					<FilePickers />
 					<FoldableCard />
 					<FormFields searchKeywords="input textbox textarea radio"/>
 					<Gauge />

package.json

@@ -28,6 +28,7 @@
     "commander": "2.3.0",
     "component-classes": "1.2.1",
     "component-closest": "0.1.4",
+    "component-file-picker": "0.2.1",
     "component-tip": "2.5.0",
     "component-uid": "0.0.2",
     "cookie": "0.1.2",