diff --git a/app/pages/embedded-widget/index.tsx b/app/pages/embedded-widget/index.tsx index d45de2b..101fdbe 100644 --- a/app/pages/embedded-widget/index.tsx +++ b/app/pages/embedded-widget/index.tsx @@ -30,6 +30,7 @@ import { TextField, Theme, Typography, + darken, } from '@material-ui/core' import HomeIcon from '@material-ui/icons/Home' import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore' @@ -130,10 +131,16 @@ const useStyles = makeStyles((theme: Theme) => paddingLeft: theme.spacing(4), }, parameterLayout: { - height: '100%', + // height: '100%', + overflow: 'auto', + height: '75vh', padding: theme.spacing(2), }, root: {}, + structureJsonContainer: { + backgroundColor: darken(theme.palette.background.paper, 0.06), + width: '100%', + }, tabContainer: { backgroundColor: theme.palette.background.paper || '', }, @@ -332,6 +339,21 @@ const WidgetManager: IStatelessPage<{ type: 'IFRAME_QUERY_PARAMS_CHANGE', }) } + React.useEffect(() => { + const iframeObject = _.get(iframeRef, 'current') + ? (_.get(iframeRef, 'current') as HTMLIFrameElement) + : null + if (iframeObject && iframeObject.contentWindow) { + const newStructureData = structure + iframeObject.contentWindow.postMessage( + { + action: 'setStructure', + data: newStructureData, + }, + '*', + ) + } + }, [structure]) const handleStructureChange = (name: string, type: string, value: any) => { dispatch({ @@ -523,12 +545,7 @@ const WidgetManager: IStatelessPage<{ onParameterChange={handleQueryParamChange} type='queryParams' /> - + + + + + {JSON.stringify(structure, null, 2)} + + )} diff --git a/app/utils/index.ts b/app/utils/index.ts index fd67723..d1d1885 100644 --- a/app/utils/index.ts +++ b/app/utils/index.ts @@ -2,7 +2,7 @@ import environment from '@environment' import * as _ from 'lodash' import qs from 'qs' import { MessageListenerService } from '@services/MessageListenerService' - +import defaultsDeep from 'lodash/defaultsDeep' interface IPostMessage { message?: string name?: string @@ -16,7 +16,7 @@ interface IPostMessage { export function toNaturalName(s: string) { return _.chain(s) .words() - .map(v => _.capitalize(v)) + .map((v) => _.capitalize(v)) .join(' ') .value() } @@ -84,9 +84,9 @@ export const validQueryParams = ( prefixError = 'Need the', ) => { return _.chain(neededParams) - .filter(value => !_.get(queryParams, value)) + .filter((value) => !_.get(queryParams, value)) .map((v, k) => { return `${prefixError} ${v}` }) .value() -} +} \ No newline at end of file
{JSON.stringify(structure, null, 2)}