@builder.io/react 2.0.4-6 → 2.0.4-7

package/src/components/builder-block.component.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 
 import { Builder, builder, BuilderElement, Component } from '@builder.io/sdk';
-import { ClassNames, jsx } from '@emotion/react';
+import { ClassNames, jsx } from '@emotion/core';
 import React from 'react';
 import { Size, sizeNames, sizes } from '../constants/device-sizes.constant';
 import { set } from '../functions/set';
@@ -11,6 +11,7 @@ import { BuilderStoreContext } from '../store/builder-store';
 import { applyPatchWithMinimalMutationChain } from '../functions/apply-patch-with-mutation';
 import { blockToHtmlString } from '../functions/block-to-html-string';
 import { Link } from './Link';
+import traverse from 'traverse';
 
 const camelCaseToKebabCase = (str?: string) =>
   str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
@@ -18,6 +19,19 @@ const camelCaseToKebabCase = (str?: string) =>
 const kebabCaseToCamelCase = (str = '') =>
   str.replace(/-([a-z])/g, match => match[1].toUpperCase());
 
+const localizedType = '@builder.io/core:LocalizedValue';
+const resolveLocalizedOptions = (options?: any, locale?: string) => {
+  if (!locale || !options) {
+    return options;
+  }
+
+  return traverse(options).map(function(el) {
+    if (el && el['@type'] === localizedType) {
+      this.update(el[locale] || el.Default)
+    }
+  });
+}
+
 const Device = { desktop: 0, tablet: 1, mobile: 2 };
 
 const voidElements = new Set([
@@ -452,10 +466,10 @@ export class BuilderBlock extends React.Component<
       }
     }
 
-    const innerComponentProperties = (options.component || options.options) && {
+    const innerComponentProperties = resolveLocalizedOptions( (options.component || options.options) && {
       ...options.options,
       ...(options.component.options || options.component.data),
-    };
+    }, this.privateState.state.locale)
 
     const isVoid = voidElements.has(TagName);
 

package/src/components/builder-blocks.component.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx } from '@emotion/core';
 import React from 'react';
 import { Builder } from '@builder.io/sdk';
 import { BuilderBlock } from './builder-block.component';

package/src/components/builder-component.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { jsx, css, CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
+import { jsx, css } from '@emotion/core';
 import { BuilderContent, getContentWithInfo } from './builder-content.component';
 import { BuilderBlocks } from './builder-blocks.component';
 import {
@@ -101,7 +100,6 @@ const sizeMap = {
 
 const fetchCache: { [key: string]: any } = {};
 
-const cache = createCache({ key: 'builder'});
 export interface BuilderComponentProps {
   /**
    * @package
@@ -944,7 +942,6 @@ export class BuilderComponent extends React.Component<
         key={this.state.key}
         ref={ref => (this.ref = ref)}
       >
-        <CacheProvider value={cache}>
         <BuilderMetaContext.Consumer>
           {value => (
             <BuilderMetaContext.Provider
@@ -1116,7 +1113,6 @@ export class BuilderComponent extends React.Component<
             </BuilderMetaContext.Provider>
           )}
         </BuilderMetaContext.Consumer>
-        </CacheProvider>
       </WrapComponent>
     );
   }

package/src/components/insert-spacer.component.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx } from '@emotion/core';
 
 import React from 'react';
 import { Builder } from '@builder.io/sdk';