@pepperi-addons/ngx-composite-lib-react 0.5.7 → 0.5.9

package/index.d.ts

@@ -15,3 +15,4 @@ export { PepManageParameters } from './pep-manage-parameters.js';
 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';

package/index.js

@@ -15,4 +15,5 @@ export { PepManageParameters } from './pep-manage-parameters.js';
 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';
 //# sourceMappingURL=index.js.map

package/package.json

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

package/pep-layout-builder.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+export interface PepLayoutBlockConfig {
+    navigateToEditorAfterBlockAdded?: boolean;
+    blocksLimitNumber?: number;
+    getBlockTitle?: (blockKey: string) => string;
+}
+export interface PepLayoutBlockAddedEvent {
+    BlockKey: string;
+    DraggableItem: unknown;
+}
+export declare type PepLayoutEditorType = 'layout-builder' | 'section' | 'block';
+export interface PepLayoutEditor {
+    id: string;
+    title: string;
+    type: PepLayoutEditorType;
+    hostObject?: unknown;
+}
+export interface PepLayoutView {
+    Layout: {
+        MaxWidth?: number;
+        VerticalSpacing?: unknown;
+        HorizontalSpacing?: unknown;
+        SectionsGap?: unknown;
+        ColumnsGap?: unknown;
+        Sections: Array<{
+            Key: string;
+            Name?: string;
+            Split?: string;
+            Height?: number;
+            CollapseOnTablet?: boolean;
+            FillHeight?: boolean;
+            Hide?: unknown[];
+            Columns: Array<{
+                BlockContainer?: {
+                    BlockKey: string;
+                    Hide?: unknown[];
+                };
+            }>;
+        }>;
+    };
+}
+export interface PepLayoutBuilderProps {
+    availableBlocksForDrag?: unknown[];
+    blocksLayoutConfig?: PepLayoutBlockConfig;
+    layoutEditorTitle?: string;
+    lockScreen?: boolean;
+    updateShellRouterData?: boolean;
+    manageGlobalCursor?: boolean;
+    layoutView?: PepLayoutView;
+    onBackClick?: () => void;
+    onEditorChange?: (editor: PepLayoutEditor) => void;
+    onBlockAdded?: (event: PepLayoutBlockAddedEvent) => void;
+    onBlocksRemoved?: (blockKeys: string[]) => void;
+    onEditableStateChange?: (isEditable: boolean) => void;
+    layoutEditorTopContent?: React.ReactNode;
+    headerEndContent?: React.ReactNode;
+    blockEditorContent?: React.ReactNode;
+    layoutContent?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare class PepLayoutBuilder extends React.Component<PepLayoutBuilderProps> {
+    private readonly elementRef;
+    private unsubs;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PepLayoutBuilderProps): void;
+    componentWillUnmount(): void;
+    private applyPropsToElement;
+    private bindEvents;
+    private unbindEvents;
+    render(): React.ReactNode;
+}

package/pep-layout-builder.js

@@ -0,0 +1,88 @@
+import React from 'react';
+export class PepLayoutBuilder extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.elementRef = React.createRef();
+        this.unsubs = [];
+    }
+    componentDidMount() {
+        this.applyPropsToElement();
+        this.bindEvents();
+    }
+    componentDidUpdate(prevProps) {
+        this.applyPropsToElement();
+        const handlersChanged = prevProps.onBackClick !== this.props.onBackClick ||
+            prevProps.onEditorChange !== this.props.onEditorChange ||
+            prevProps.onBlockAdded !== this.props.onBlockAdded ||
+            prevProps.onBlocksRemoved !== this.props.onBlocksRemoved ||
+            prevProps.onEditableStateChange !== this.props.onEditableStateChange;
+        if (handlersChanged) {
+            this.unbindEvents();
+            this.bindEvents();
+        }
+    }
+    componentWillUnmount() {
+        this.unbindEvents();
+    }
+    applyPropsToElement() {
+        const el = this.elementRef.current;
+        if (!el)
+            return;
+        const { availableBlocksForDrag, blocksLayoutConfig, layoutEditorTitle, lockScreen, updateShellRouterData, manageGlobalCursor, layoutView, } = this.props;
+        if (availableBlocksForDrag !== undefined)
+            el.availableBlocksForDrag = availableBlocksForDrag;
+        if (blocksLayoutConfig !== undefined)
+            el.blocksLayoutConfig = blocksLayoutConfig;
+        if (layoutEditorTitle !== undefined)
+            el.layoutEditorTitle = layoutEditorTitle;
+        if (lockScreen !== undefined)
+            el.lockScreen = lockScreen;
+        if (updateShellRouterData !== undefined)
+            el.updateShellRouterData = updateShellRouterData;
+        if (manageGlobalCursor !== undefined)
+            el.manageGlobalCursor = manageGlobalCursor;
+        if (layoutView !== undefined)
+            el.layoutView = layoutView;
+    }
+    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('backClick', this.props.onBackClick ? () => this.props.onBackClick?.() : undefined),
+            bind('editorChange', this.props.onEditorChange),
+            bind('blockAdded', this.props.onBlockAdded),
+            bind('blocksRemoved', this.props.onBlocksRemoved),
+            bind('editableStateChange', this.props.onEditableStateChange),
+        ];
+    }
+    unbindEvents() {
+        this.unsubs.forEach((u) => u());
+        this.unsubs = [];
+    }
+    render() {
+        const { layoutEditorTopContent, headerEndContent, blockEditorContent, layoutContent, className, style, } = this.props;
+        const children = [];
+        if (layoutEditorTopContent) {
+            children.push(React.createElement('div', { ['layout-editor-top-content']: '' }, layoutEditorTopContent));
+        }
+        if (headerEndContent) {
+            children.push(React.createElement('div', { ['header-end-content']: '' }, headerEndContent));
+        }
+        if (blockEditorContent) {
+            children.push(React.createElement('div', { ['block-editor-content']: '' }, blockEditorContent));
+        }
+        if (layoutContent) {
+            children.push(React.createElement('div', { ['layout-content']: '' }, layoutContent));
+        }
+        return React.createElement('pep-layout-builder-element', { ref: this.elementRef, class: className, style }, children.length > 0 ? children : undefined);
+    }
+}
+//# sourceMappingURL=pep-layout-builder.js.map