Skip to content

Commit

Permalink
Components: inline the FilePicker doc examples
Browse files Browse the repository at this point in the history
No need for an extracted `renderPickers()` function that
only gets called once, that's an anti-pattern.
  • Loading branch information
TooTallNate committed Mar 17, 2016
1 parent 68e1d26 commit 94a6832
Showing 1 changed file with 23 additions and 30 deletions.
53 changes: 23 additions & 30 deletions client/components/file-picker/docs/example.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import FilePicker from 'components/file-picker';
export default class FilePickers extends React.Component {
constructor( props ) {
super( props );
this.onSingle = this.onSingle.bind( this );
this.onMulti = this.onMulti.bind( this );
}

onSingle( files ) {
Expand All @@ -33,41 +31,36 @@ export default class FilePickers extends React.Component {
<h2>
<a href="/devdocs/design/file-pickers">File Picker</a>
</h2>
{ this.renderPickers() }
</div>
);
}

renderPickers() {
return (
<Card>
<Card>

<h4>Select a single file:</h4>
<FilePicker onPick={ this.onSingle } >
<Button>Single Item</Button>
</FilePicker>
<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 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 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>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>
<h4>Any internal content works:</h4>
<FilePicker onPick={ this.onSingle } >
<a href="#">Select File…</a>
</FilePicker>

</Card>
</Card>
</div>
);
}
}
Expand Down

0 comments on commit 94a6832

Please sign in to comment.