@cntrl-site/sdk-nextjs 1.9.71-9 → 1.9.72

package/src/components/StructuredBlockItem/StructuredComponent/StructuredComponent.tsx

@@ -1,66 +0,0 @@
-import JSXStyle from 'styled-jsx/style';
-import { StructuredBlock, StructuredBlockType, getLayoutStyles } from '@cntrl-site/sdk';
-import { FC, useState } from 'react';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { useLayoutContext } from '../../useLayoutContext';
-import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-
-interface Props {
-  block: StructuredBlock<StructuredBlockType.Component>;
-}
-
-export const StructuredComponent: FC<Props> = ({ block }) => {
-  const sdk = useCntrlContext();
-  const { layouts } = sdk;
-  const layout = useLayoutContext();
-  const fallbackLayout = layouts[0]?.id;
-  const effectiveLayout = layout ?? fallbackLayout;
-  const layoutValues: Record<string, any>[] = [block.layoutParams];
-  const component = sdk.getComponent(block.commonParams.componentId);
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useItemGeometry(block.id, ref);
-  const Element = component ? component.element : undefined;
-  const layoutParameters = effectiveLayout ? block.layoutParams[effectiveLayout]?.parameters : undefined;
-  const commonParameters = block.commonParams.parameters;
-  const parameters = layoutParameters ? {
-    ...layoutParameters,
-    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
-  } : undefined;
-
-  return (
-    <>
-      <div
-        className={`custom-component-${block.id}`}
-        ref={setRef}
-      >
-        {parameters && Element && (
-          <Element
-            metadata={{
-              itemId: block.id,
-              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
-            }}
-            portalId="component-portal"
-            content={block.commonParams.content}
-            {...parameters}
-          />
-        )}
-      </div>
-      <JSXStyle id={block.id}>{`
-      .custom-component-${block.id} {
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-      }
-      ${getLayoutStyles(layouts, layoutValues, ([layoutParams]) => {
-      return (`
-          .custom-component-${block.id} {
-            opacity: ${layoutParams.opacity};
-            filter: blur(${layoutParams.blur}vw);
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-        `);
-    })}`}
-      </JSXStyle>
-    </>
-  );
-};

package/src/components/StructuredContent/StructuredContent.tsx

@@ -1,42 +0,0 @@
-import { getLayoutStyles, Section } from '@cntrl-site/sdk';
-import { FC, useId } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { StructuredBlockItem } from '../StructuredBlockItem/StructuredBlockItem';
-
-interface Props {
-  section: Section;
-}
-
-export const StructuredContent: FC<Props> = ({ section }) => {
-  const reactId = useId();
-  const id = `${reactId}-structured-content-${section.id}`;
-  const { layouts } = useCntrlContext();
-  const structuredContentLength = section.structuredContent.length;
-  const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
-  const layoutValues: Record<string, any>[] = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
-  if (structuredContentLength === 0) return null;
-  return (
-    <div className={`structured-content-${section.id}`}>
-      {section.structuredContent.map(block => (
-        <StructuredBlockItem block={block} key={block.id} maxWidthMap={defaultWidthRecord} />
-      ))}
-      <JSXStyle id={id}>
-        {`
-          ${getLayoutStyles(layouts, layoutValues, ([paddingBottom, defaultWidth]) => {
-            return (`
-              .structured-content-${section.id} {
-                padding-bottom: ${paddingBottom * 100}vw;
-                max-width: ${defaultWidth < 1 ? `${defaultWidth * 100}vw` : 'unset'};
-                display: flex;
-                flex-direction: column;
-                margin: 0 auto;
-                width: 100%;
-              }
-            `);
-          })}
-        `}
-      </JSXStyle>
-    </div>
-  );
-};