docs: add <DropArea> reference

Author: streamich

README.md

@@ -77,6 +77,7 @@ const MyComponent = mock();
      - [`<Portal>`](./docs/en/Portal.md), [`<Overlay>`](./docs/en/Overlay.md), and [`<Modal>`](./docs/en/Modal.md)
      - [`<FullScreen>`](./docs/en/FullScreen.md)
      - [`<Slider>`](./docs/en/Slider.md)
+     - [`<DropArea>`](./docs/en/DropArea.md)
      - [`<Ripple>`](./docs/en/Ripple.md) and [`withRipple()`](./docs/en/Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Audio>`](./docs/en/Audio.md) and [`<Video>`](./docs/en/Video.md)
      - [`<Speak>`](./docs/en/Speak.md), [`<Vibrate>`](./docs/en/Vibrate.md), [`<Alert>`](./docs/en/Alert.md), `<Prompt>`, `<Confirm>`

docs/en/DropArea.md

@@ -0,0 +1,27 @@
+# `<DropArea>`
+
+Catches file and text drop and paste events.
+
+
+## Usage
+
+```jsx
+import {DropArea} from 'libreact/lib/DropArea';
+
+<DropArea
+  onFiles={(files, event) => console.log(files)}
+  onUri={(uri, event) => console.log(uri)}
+  onText={(text, event) => console.log(text)}
+>
+  <div style={{border: '1px solid tomato'}}>
+    Drop it like a bomb!
+  </div>
+</DropArea>
+```
+
+
+## Props
+
+- `onFiles` &mdash; called when files are dropped or pasted into the area.
+- `onUri` &mdash; called an URI from another tab is dropped in the area.
+- `onText` &mdash; called when text is paste in the area.

docs/en/README.md

@@ -46,6 +46,7 @@
      - [`<Portal>`](./Portal.md), [`<Overlay>`](./Overlay.md), and [`<Modal>`](./Modal.md)
      - [`<FullScreen>`](./FullScreen.md)
      - [`<Slider>`](./Slider.md)
+     - [`<DropArea>`](./DropArea.md)
      - [`<Ripple>`](./Ripple.md) and [`withRipple()`](./Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<Audio>`](./Audio.md) and [`<Video>`](./Video.md)
      - [`<Speak>`](./Speak.md), [`<Vibrate>`](./Vibrate.md), [`<Alert>`](./Alert.md), `<Prompt>`, `<Confirm>`

docs/en/SUMMARY.md

@@ -54,7 +54,8 @@
   * [Overlay](Overlay.md)
   * [Modal](Modal.md)
   * [FullScreen](FullScreen.md)
-  * [Slider](Slider.md)
+  * [Slider](Slider.m
+  * [`<DropArea>`](DropArea.md)
   * [Ripple](Ripple.md)
   * [Audio](Audio.md)
   * [Video](Video.md)

src/DropArea/__story__/story.tsx

@@ -6,7 +6,7 @@ import {DropArea} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
 storiesOf('UI/DropArea', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Toggle.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/DropArea.md')}))
   .add('Example', () =>
     <DropArea
       onUri={action('onUri')}

src/index.ts

@@ -38,6 +38,7 @@ export * from './Modal';
 export * from './FullScreen';
 export * from './Ripple';
 export * from './Slider';
+export * from './DropArea';
 
 // Other
 export * from './Resolve';