feat: add <WindowWidthQuery> component

streamich · Mar 4, 2018 · 41e4f3c · 41e4f3c
1 parent 88b6ff8
commit 41e4f3c
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 0 deletions.
diff --git a/src/WidthQuery/__story__/story.tsx b/src/WidthQuery/__story__/story.tsx
@@ -21,3 +21,33 @@ storiesOf('UI/WidthQuery', module)
       </WidthQuery>
     }</WindowSizeSensor>
   )
+  .add('100px increments', () =>
+    <WindowSizeSensor>{({width}) =>
+      <WidthQuery width={width}>
+        <View maxWidth={100}>
+          Up to 100px
+        </View>
+        <View maxWidth={200}>
+          100px - 200px
+        </View>
+        <View maxWidth={300}>
+          200px - 300px
+        </View>
+        <View maxWidth={400}>
+          300px - 400px
+        </View>
+        <View maxWidth={500}>
+          400px - 500px
+        </View>
+        <View maxWidth={600}>
+          500px - 600px
+        </View>
+        <View maxWidth={700}>
+          600px - 700px
+        </View>
+        <View>
+          700px+
+        </View>
+      </WidthQuery>
+    }</WindowSizeSensor>
+  )
diff --git a/src/WindowWidthQuery/__story__/story.tsx b/src/WindowWidthQuery/__story__/story.tsx
@@ -0,0 +1,49 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {WindowWidthQuery} from '..';
+import {View} from '../../View';
+import {WindowSizeSensor} from '../../WindowSizeSensor';
+import ShowDocs from '../../../.storybook/ShowDocs';
+
+storiesOf('UI/WindowWidthQuery', module)
+  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/WindowWidthQuery.md')}))
+  .add('Example', () =>
+    <WindowWidthQuery>
+      <View maxWidth={300}>
+        Up to 300px
+      </View>
+      <View>
+        More than 300px
+      </View>
+    </WindowWidthQuery>
+  )
+  .add('100px increments', () =>
+    <WindowWidthQuery>
+      <View maxWidth={100}>
+        Up to 100px
+      </View>
+      <View maxWidth={200}>
+        100px - 200px
+      </View>
+      <View maxWidth={300}>
+        200px - 300px
+      </View>
+      <View maxWidth={400}>
+        300px - 400px
+      </View>
+      <View maxWidth={500}>
+        400px - 500px
+      </View>
+      <View maxWidth={600}>
+        500px - 600px
+      </View>
+      <View maxWidth={700}>
+        600px - 700px
+      </View>
+      <View>
+        700px+
+      </View>
+    </WindowWidthQuery>
+  )
diff --git a/src/WindowWidthQuery/index.tsx b/src/WindowWidthQuery/index.tsx
@@ -0,0 +1,5 @@
+import {h} from '../util';
+import {WidthQuery} from '../WidthQuery';
+import {WindowSizeSensor} from '../WindowSizeSensor';
+
+export const WindowWidthQuery = (props) => h(WindowSizeSensor, null, (state) => h(WidthQuery, state, props.children));