@pepperi-addons/ngx-composite-lib-react 0.5.8 → 0.5.10

package/index.d.ts

@@ -16,3 +16,4 @@ export { PepMappingParameters } from './pep-mapping-parameters.js';
 export { PepGenericFieldsBuilder } from './pep-generic-fields-builder.js';
 export { PepAssetPickerButton } from './pep-asset-picker-button.js';
 export { PepLayoutBuilder } from './pep-layout-builder.js';
+export { PepLayout } from './pep-layout.js';

package/index.js

@@ -16,4 +16,5 @@ export { PepMappingParameters } from './pep-mapping-parameters.js';
 export { PepGenericFieldsBuilder } from './pep-generic-fields-builder.js';
 export { PepAssetPickerButton } from './pep-asset-picker-button.js';
 export { PepLayoutBuilder } from './pep-layout-builder.js';
+export { PepLayout } from './pep-layout.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib-react",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "description": "React wrappers for Pepperi ngx-composite-lib Angular Elements.",
   "license": "MIT",
   "author": "Pepperi",

package/pep-layout-builder.d.ts

@@ -56,6 +56,7 @@ export interface PepLayoutBuilderProps {
     headerEndContent?: React.ReactNode;
     blockEditorContent?: React.ReactNode;
     layoutContent?: React.ReactNode;
+    layoutSlot?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
 }

package/pep-layout-builder.js

@@ -68,7 +68,7 @@ export class PepLayoutBuilder extends React.Component {
         this.unsubs = [];
     }
     render() {
-        const { layoutEditorTopContent, headerEndContent, blockEditorContent, layoutContent, className, style, } = this.props;
+        const { layoutEditorTopContent, headerEndContent, blockEditorContent, layoutContent, layoutSlot, className, style, } = this.props;
         const children = [];
         if (layoutEditorTopContent) {
             children.push(React.createElement('div', { ['layout-editor-top-content']: '' }, layoutEditorTopContent));
@@ -82,6 +82,9 @@ export class PepLayoutBuilder extends React.Component {
         if (layoutContent) {
             children.push(React.createElement('div', { ['layout-content']: '' }, layoutContent));
         }
+        if (layoutSlot) {
+            children.push(React.createElement('div', { key: 'layout-content', 'layout-content': '' }, layoutSlot));
+        }
         return React.createElement('pep-layout-builder-element', { ref: this.elementRef, class: className, style }, children.length > 0 ? children : undefined);
     }
 }

package/pep-layout.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export declare type PepLayoutSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface PepLayoutSection {
+    Key: string;
+    Name?: string;
+    Split?: string;
+    Height?: number;
+    CollapseOnTablet?: boolean;
+    FillHeight?: boolean;
+    Hide?: unknown[];
+    Columns: Array<{
+        BlockContainer?: {
+            BlockKey: string;
+            Hide?: unknown[];
+        };
+    }>;
+}
+export interface PepLayoutView {
+    Layout: {
+        MaxWidth?: number;
+        VerticalSpacing?: PepLayoutSizeType;
+        HorizontalSpacing?: PepLayoutSizeType;
+        SectionsGap?: PepLayoutSizeType;
+        ColumnsGap?: PepLayoutSizeType;
+        Sections: PepLayoutSection[];
+    };
+}
+export interface PepLayoutProps {
+    editorMode?: boolean;
+    layoutView?: PepLayoutView;
+    renderSkeleton?: boolean;
+    showSkeleton?: boolean;
+    onLayoutViewChange?: (layoutView: PepLayoutView) => void;
+    onScreenTypeChange?: (screenType: string) => void;
+    blockTemplate?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare class PepLayout extends React.Component<PepLayoutProps> {
+    private readonly elementRef;
+    private unsubs;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PepLayoutProps): void;
+    componentWillUnmount(): void;
+    private applyPropsToElement;
+    private bindEvents;
+    private unbindEvents;
+    render(): React.ReactNode;
+}

package/pep-layout.js

@@ -0,0 +1,70 @@
+import React from 'react';
+export class PepLayout extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.elementRef = React.createRef();
+        this.unsubs = [];
+    }
+    componentDidMount() {
+        this.applyPropsToElement();
+        this.bindEvents();
+    }
+    componentDidUpdate(prevProps) {
+        this.applyPropsToElement();
+        const handlersChanged = prevProps.onLayoutViewChange !== this.props.onLayoutViewChange ||
+            prevProps.onScreenTypeChange !== this.props.onScreenTypeChange;
+        if (handlersChanged) {
+            this.unbindEvents();
+            this.bindEvents();
+        }
+    }
+    componentWillUnmount() {
+        this.unbindEvents();
+    }
+    applyPropsToElement() {
+        const el = this.elementRef.current;
+        if (!el)
+            return;
+        const { editorMode, layoutView, renderSkeleton, showSkeleton, } = this.props;
+        if (editorMode !== undefined)
+            el.editorMode = editorMode;
+        if (layoutView !== undefined)
+            el.layoutView = layoutView;
+        if (renderSkeleton !== undefined)
+            el.renderSkeleton = renderSkeleton;
+        if (showSkeleton !== undefined)
+            el.showSkeleton = showSkeleton;
+    }
+    bindEvents() {
+        const el = this.elementRef.current;
+        if (!el)
+            return;
+        const bind = (name, cb) => {
+            if (!cb)
+                return () => { };
+            const handler = (e) => cb(e.detail);
+            el.addEventListener(name, handler);
+            return () => el.removeEventListener(name, handler);
+        };
+        this.unsubs = [
+            bind('layoutViewChange', this.props.onLayoutViewChange),
+            bind('screenTypeChange', this.props.onScreenTypeChange),
+        ];
+    }
+    unbindEvents() {
+        this.unsubs.forEach((u) => u());
+        this.unsubs = [];
+    }
+    render() {
+        const { blockTemplate, children, className, style } = this.props;
+        const childElements = [];
+        if (blockTemplate) {
+            childElements.push(React.createElement('div', { key: 'block-template', slot: 'block-template' }, blockTemplate));
+        }
+        if (children) {
+            childElements.push(children);
+        }
+        return React.createElement('pep-layout', { ref: this.elementRef, class: className, style }, childElements.length > 0 ? childElements : undefined);
+    }
+}
+//# sourceMappingURL=pep-layout.js.map