From f77a63c1d98e79322860e1a1f01d103c66dcdaaa Mon Sep 17 00:00:00 2001
From: macintoshhelper <macintoshhelper@users.noreply.github.com>
Date: Sat, 18 Apr 2020 20:18:35 +0100
Subject: [PATCH] create Page.Container component #342

---
 src/components/Page.tsx          |  2 ++
 src/components/PageContainer.tsx | 27 +++++++++++++++++++++++++++
 src/render.tsx                   |  5 +++++
 src/types/intrinsic.d.ts         |  1 +
 4 files changed, 35 insertions(+)
 create mode 100644 src/components/PageContainer.tsx

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 606cb272..94aac738 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { or } from 'airbnb-prop-types';
 import StyleSheet from '../stylesheet';
+import PageContainer from './PageContainer';
 import PageStylePropTypes from './PageStylePropTypes';
 
 export const PagePropTypes = {
@@ -14,6 +15,7 @@ type Props = PropTypes.InferProps<typeof PagePropTypes>;
 
 export default class Page extends React.Component<Props> {
   static propTypes = PagePropTypes;
+  static Container = PageContainer;
 
   render() {
     const { name, children, style, ...otherProps } = this.props;
diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
new file mode 100644
index 00000000..724a5033
--- /dev/null
+++ b/src/components/PageContainer.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { or } from 'airbnb-prop-types';
+import StyleSheet from '../stylesheet';
+import PageStylePropTypes from './PageStylePropTypes';
+
+export const PagePropTypes = {
+  children: PropTypes.node,
+  style: or([PropTypes.shape(PageStylePropTypes), PropTypes.number]),
+};
+
+type Props = PropTypes.InferProps<typeof PagePropTypes>;
+
+export default class PageContainer extends React.Component<Props> {
+  static propTypes = PagePropTypes;
+
+  render() {
+    const { children, style, ...otherProps } = this.props;
+    const _style = StyleSheet.flatten(style);
+
+    return (
+      <sketch_pagecontainer style={_style} {...otherProps}>
+        {children}
+      </sketch_pagecontainer>
+    );
+  }
+}
diff --git a/src/render.tsx b/src/render.tsx
index c190f4d3..dab8782c 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -41,6 +41,11 @@ const getDefaultPage = (): SketchLayer => {
 };
 
 const renderContents = (tree: TreeNode | string, container: SketchLayer): SketchLayer => {
+  if (typeof tree !== 'string' && tree.type === 'sketch_pagecontainer') {
+    const children = tree.children || [];
+
+    return children.map(child => renderContents(child, container));
+  }
   const json = flexToSketchJSON(tree);
   const layer = fromSJSON(json, '119');
 
diff --git a/src/types/intrinsic.d.ts b/src/types/intrinsic.d.ts
index a5a7ace7..1f2472a3 100644
--- a/src/types/intrinsic.d.ts
+++ b/src/types/intrinsic.d.ts
@@ -5,6 +5,7 @@ declare module JSX {
     sketch_view: any;
     sketch_text: any;
     sketch_page: any;
+    sketch_pagecontainer: any;
     sketch_image: any;
     sketch_document: any;
     sketch_artboard: any;