From 33dbf5f37f2238f799816b83d77f3d5271e8974d Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrey@okonet.ru>
Date: Wed, 3 Apr 2019 14:05:58 +0200
Subject: [PATCH] fix: Set frameName as a context when Frame is used

Setting `frameName` in the context of the query ensures that
the components inside the `<Frame>` are getting proper styles
that are defined inside appropriate Figma frames.

Closes #1
---
 src/File.tsx  |  6 ++++--
 src/Frame.tsx | 17 ++++++++++++++++-
 src/Query.tsx |  9 +++------
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/File.tsx b/src/File.tsx
index 48d5a20..8a585da 100644
--- a/src/File.tsx
+++ b/src/File.tsx
@@ -4,7 +4,8 @@ import gql from "graphql-tag"
 
 export const FigmaContext = React.createContext({
 	fileId: null,
-	pageName: null
+	pageName: null,
+	frameName: null
 })
 
 export const rectFragment = gql`
@@ -142,7 +143,8 @@ export default function File({ fileId, pageName, children }: IFile) {
 					<FigmaContext.Provider
 						value={{
 							fileId,
-							pageName
+							pageName,
+							frameName: null
 						}}
 					>
 						{children({ data })}
diff --git a/src/Frame.tsx b/src/Frame.tsx
index 52ebbad..ecc9e92 100644
--- a/src/Frame.tsx
+++ b/src/Frame.tsx
@@ -1,5 +1,6 @@
 import * as React from "react"
 import Query from "./Query"
+import { FigmaContext } from "./File"
 
 export interface INode {
 	nodeName: string
@@ -30,7 +31,21 @@ export default function Frame({ frameName, nodeName, children }: IFrame) {
 					backgroundSize: "cover"
 				}
 
-				return children(styles)
+				return (
+					<FigmaContext.Consumer>
+						{({ fileId, pageName }) => (
+							<FigmaContext.Provider
+								value={{
+									fileId,
+									pageName,
+									frameName
+								}}
+							>
+								{children(styles)}
+							</FigmaContext.Provider>
+						)}
+					</FigmaContext.Consumer>
+				)
 			}}
 		</Query>
 	)
diff --git a/src/Query.tsx b/src/Query.tsx
index 9d44008..67d8141 100644
--- a/src/Query.tsx
+++ b/src/Query.tsx
@@ -6,16 +6,13 @@ interface IQuery {
 	variables: any
 	children?: any
 }
-export default function Query({
-	children,
-	variables,
-}: IQuery) {
+export default function Query({ children, variables }: IQuery) {
 	return (
 		<FigmaContext.Consumer>
-			{({ fileId, pageName }) => (
+			{({ fileId, pageName, frameName }) => (
 				<ApolloQuery
 					query={FIGMA_FILE_QUERY}
-					variables={{ fileId, pageName, ...variables }}
+					variables={{ fileId, pageName, frameName, ...variables }}
 				>
 					{({ loading, data, error }) => {
 						if (error) {