Merge pull request #501 from macintoshhelper/feat/artboard-dimensions

useWindowDimensions hook for Artboard viewport

Author: mathieudutour

docs/API.md

@@ -11,6 +11,8 @@
   - [`<Svg>`](#svg)
   - [`<Text>`](#text)
   - [`<View>`](#view)
+- [`Hooks`](#hooks)
+  - [`useWindowDimensions`](#usewindowdimensions)
 - [`Platform`](#platform)
   - [`OS`](#os)
   - [`Version`](#version)
@@ -25,7 +27,7 @@
   - [`create`](#createstyleoptionsstyles)
   - [`resolve`](#resolvestyle)
 - [`Symbols`](#symbols)
-  - [`makeSymbol`](#makesymbolnode-name)
+  - [`makeSymbol`](#makesymbolnode-props-document)
 
 ### `render(element, container)`
 
@@ -147,9 +149,11 @@ Wrapper for Sketch's Artboards. Requires a [`<Page>`](#page) component as a pare
 | `name` | `String` |  | The name to be displayed in the Sketch Layer List |
 | `children` | `Node` |  |  |
 | `style` | [`Style`](/docs/styling.md) |  |  |
-| `viewport` | `Viewport` |  | Object: { name: string, width: number, height: number} |
+| `viewport` | `Viewport` |  | Object: { name: string, width: number, height: number, scale?: number, fontScale?: number } |
 | `isHome` | `Boolean` |  | Is prototype home screen if true |
 
+The `scale` and `fontScale` attributes in the `viewport` prop are not used by Sketch, but can be used together with the [`useWindowDimensions`](#usewindowdimensions) hook for conditional styling/rendering.
+
 #### Examples
 
 Hello world with width of 480px.
@@ -382,6 +386,61 @@ View primitives
 </Document>
 ```
 
+## Hooks
+
+### `useWindowDimensions()`
+
+Returns the window dimensions of the parent `<Artboard>`. Returns `{ width: number, height: number, fontScale: number, scale: number }`.
+
+#### Example
+
+```js
+import { Page, Artboard, View, Text, useWindowDimensions } from 'react-sketchapp';
+
+const HomePage = () => {
+  const { height, width } = useWindowDimensions();
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ height, width }}>
+        <Text>Hello World</Text>
+      </View>
+      {(width >= 768) && (
+        <View style={{ height, width, backgroundColor: 'blue' }}>
+          <Text style={{ color: 'white' }}>
+            You can only see this text on tablet/desktop
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const devices = [{
+  name: 'Mobile',
+  width: 360,
+  height: 640,
+}, {
+  name: 'Tablet',
+  width: 768
+  height: 1024,
+}, {
+  name: 'Desktop',
+  width: 1024
+  height: 1280,
+}];
+
+render(
+  <Page style={{ flexDirection: 'row' }}>
+    {devices.map(viewport => (
+      <Artboard viewport={viewport} style={{ marginRight: 80 }}>
+        <HomePage />
+      </Artboard>
+    ))}
+  </Page>,
+);
+```
+
 ## Platform
 
 ### `OS`
@@ -734,7 +793,7 @@ export default () => {
 };
 ```
 
-####Nested symbol + override example
+#### Nested symbol + override example
 
 ```js
 import sketch from 'sketch';

src/components/Artboard.tsx

@@ -3,11 +3,14 @@ import * as PropTypes from 'prop-types';
 import { or } from 'airbnb-prop-types';
 import StyleSheet from '../stylesheet';
 import ViewStylePropTypes from './ViewStylePropTypes';
+import { ArtboardProvider } from '../context';
 
 const ViewportPropTypes = {
   name: PropTypes.string,
   width: PropTypes.number,
   height: PropTypes.number,
+  scale: PropTypes.number,
+  fontScale: PropTypes.number,
 };
 
 export const ArtboardPropTypes = {
@@ -28,15 +31,18 @@ export default class Artboard extends React.Component<Props> {
   };
 
   render() {
+    const style = StyleSheet.flatten(this.props.style);
     return (
-      <sketch_artboard
-        style={StyleSheet.flatten(this.props.style)}
-        name={this.props.name}
-        viewport={this.props.viewport}
-        isHome={this.props.isHome}
-      >
-        {this.props.children}
-      </sketch_artboard>
+      <ArtboardProvider viewport={this.props.viewport} style={style}>
+        <sketch_artboard
+          style={style}
+          name={this.props.name}
+          viewport={this.props.viewport}
+          isHome={this.props.isHome}
+        >
+          {this.props.children}
+        </sketch_artboard>
+      </ArtboardProvider>
     );
   }
 }

src/context.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+import { Style } from './stylesheet/types';
+
+const initialArtboardState = {
+  width: 0,
+  height: 0,
+  scale: 1,
+  fontScale: 1,
+};
+
+const ArtboardContext = React.createContext({
+  state: initialArtboardState,
+});
+
+export const useWindowDimensions = () => {
+  const { state } = React.useContext(ArtboardContext);
+  const { width, height, scale, fontScale } = state || {};
+
+  return { width, height, scale, fontScale };
+}
+
+const ArtboardPropTypes = {
+  viewport: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number,
+    name: PropTypes.string,
+    scale: PropTypes.number,
+    fontScale: PropTypes.number,
+  }),
+  children: PropTypes.node,
+};
+
+type ArtboardProps = PropTypes.InferProps<typeof ArtboardPropTypes> & {
+  children: any,
+  style?: Style,
+};
+
+export const ArtboardProvider = ({ children, viewport, style }: ArtboardProps) => {
+  if (!viewport) {
+    return children;
+  }
+
+  const { state: oState } = React.useContext(ArtboardContext);
+
+  const state = {
+    ...oState,
+    width: viewport.width || (style || {}).width || oState.width,
+    height: viewport.height || (style || {}).height || oState.height,
+    scale: viewport.scale || oState.scale,
+    fontScale: viewport.fontScale || oState.scale,
+  };
+
+  return (
+    <ArtboardContext.Provider value={{ state }}>
+      {children}
+    </ArtboardContext.Provider>
+  )
+}
+
+export default ArtboardContext;

src/index.ts

@@ -16,6 +16,7 @@ import {
   getSymbolMasterByName as _getSymbolMasterByName,
   injectSymbols as _injectSymbols,
 } from './symbol';
+import { useWindowDimensions as _useWindowDimensions } from './context';
 
 export const render = _render;
 export const renderToJSON = _renderToJSON;
@@ -34,6 +35,7 @@ export const makeSymbol = _makeSymbol;
 export const getSymbolComponentByName = _getSymbolComponentByName;
 export const getSymbolMasterByName = _getSymbolMasterByName;
 export const injectSymbols = _injectSymbols;
+export const useWindowDimensions = _useWindowDimensions;
 
 export default {
   render,
@@ -53,4 +55,5 @@ export default {
   getSymbolComponentByName,
   getSymbolMasterByName,
   injectSymbols,
+  useWindowDimensions,
 };

src/renderers/ArtboardRenderer.ts

@@ -26,7 +26,10 @@ export default class ArtboardRenderer extends SketchRenderer {
         presetDictionary: {
           allowResizedMatching: 0,
           offersLandscapeVariant: 1,
-          ...props.viewport,
+
+          name: props.viewport.name,
+          width: props.viewport.width,
+          height: props.viewport.height,
         },
       }),
       isFlippedHorizontal: false,