@bloomreach/react-sdk - npm Package Compare versions

Comparing version 14.3.3 to 14.4.0

dist/cms/BrManageContentButton.d.ts

 import React from 'react';
-import { Content, Document } from '@bloomreach/spa-sdk';
+import { ManageContentButton } from '@bloomreach/spa-sdk';
 import { BrPageContext } from '../page/BrPageContext';
-interface BrManageContentButtonProps {
-    /**
-     * The content entity to open for editing.
-     */
-    content: Content | Document;
-}
 /**
  * The button component that opens for editing a content.
  */
-export declare class BrManageContentButton extends React.Component<BrManageContentButtonProps> {
+export declare class BrManageContentButton extends React.Component<ManageContentButton> {
     static contextType: React.Context<import("@bloomreach/spa-sdk").Page | undefined>;
@@ -18,2 +12,1 @@ context: React.ContextType<typeof BrPageContext>;
 }
-export {};

dist/index.js

@@ -6,50 +6,39 @@ (function(global, factory) {
     "use strict";
-    React = React && Object.prototype.hasOwnProperty.call(React, "default") ? React["default"] : React;
+    function _interopDefaultLegacy(e) {
+        return e && typeof e === "object" && "default" in e ? e : {
+            default: e
+        };
+    }
+    var React__default = _interopDefaultLegacy(React);
     /**
    * The React Context holding the current brXM Component.
-   */    const BrComponentContext = React.createContext(undefined);
-    class BrMeta extends React.Component {
-        constructor() {
-            super(...arguments);
-            this.headRef = React.createRef();
-            this.tailRef = React.createRef();
-        }
-        componentDidMount() {
-            this.renderMeta();
-        }
-        componentDidUpdate(prevProps) {
-            prevProps.meta.clear();
-            this.renderMeta();
-        }
-        componentWillUnmount() {
-            this.props.meta.clear();
-        }
-        renderMeta() {
-            var _a, _b, _c;
-            const head = (_b = (_a = this.headRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.nextSibling;
-            const tail = (_c = this.tailRef) === null || _c === void 0 ? void 0 : _c.current;
-            if (!head || !tail) {
+   */    const BrComponentContext = React__default["default"].createContext(undefined);
+    function BrMeta({children, meta}) {
+        var _a;
+        const head = React.useRef(null);
+        const tail = React.useRef(null);
+        React.useEffect((() => {
+            var _a;
+            if (!((_a = head.current) === null || _a === void 0 ? void 0 : _a.nextSibling) || !tail.current) {
                 return;
             }
-            this.props.meta.render(head, tail);
-        }
-        render() {
-            return React.createElement(React.Fragment, null, this.props.meta.length > 0 && React.createElement("span", {
-                style: {
-                    display: "none"
-                },
-                ref: this.headRef
-            }), this.props.children, this.props.meta.length > 0 && React.createElement("span", {
-                style: {
-                    display: "none"
-                },
-                ref: this.tailRef
-            }));
-        }
+            return meta.render(head.current.nextSibling, tail.current);
+        }), [ meta, (_a = head.current) === null || _a === void 0 ? void 0 : _a.nextSibling, tail.current ]);
+        return React__default["default"].createElement(React__default["default"].Fragment, null, meta.length > 0 && React__default["default"].createElement("span", {
+            style: {
+                display: "none"
+            },
+            ref: head
+        }), children, meta.length > 0 && React__default["default"].createElement("span", {
+            style: {
+                display: "none"
+            },
+            ref: tail
+        }));
     }
     /**
    * The React Context holding the current brXM Page.
-   */    const BrPageContext = React.createContext(undefined);
-    const BrMappingContext = React.createContext({});
-    class BrNodeComponent extends React.Component {
+   */    const BrPageContext = React__default["default"].createContext(undefined);
+    const BrMappingContext = React__default["default"].createContext({});
+    class BrNodeComponent extends React__default["default"].Component {
         getMapping() {
@@ -67,3 +56,3 @@ return this.props.component.getName();
             }
-            return React.createElement(component, this.props);
+            return React__default["default"].createElement(component, this.props);
         }
@@ -73,46 +62,43 @@ }
     function BrContainerBox(props) {
-        return React.createElement("div", {
+        return React__default["default"].createElement("div", {
             className: props.page.isPreview() ? "hst-container" : undefined
-        }, React.Children.map(props.children, child => React.createElement("div", {
+        }, React__default["default"].Children.map(props.children, (child => React__default["default"].createElement("div", {
             className: props.page.isPreview() ? "hst-container-item" : undefined
-        }, child)));
+        }, child))));
     }
     function BrContainerInline(props) {
-        return React.createElement("div", {
+        return React__default["default"].createElement("div", {
             className: props.page.isPreview() ? "hst-container" : undefined
-        }, React.Children.map(props.children, child => React.createElement("span", {
+        }, React__default["default"].Children.map(props.children, (child => React__default["default"].createElement("span", {
             className: props.page.isPreview() ? "hst-container-item" : undefined
-        }, child)));
+        }, child))));
     }
     function BrContainerNoMarkup(props) {
-        return React.createElement(React.Fragment, null, props.children);
+        return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
     }
     function BrContainerOrderedList(props) {
-        return React.createElement("ol", {
+        return React__default["default"].createElement("ol", {
             className: props.page.isPreview() ? "hst-container" : undefined
-        }, React.Children.map(props.children, child => React.createElement("li", {
+        }, React__default["default"].Children.map(props.children, (child => React__default["default"].createElement("li", {
             className: props.page.isPreview() ? "hst-container-item" : undefined
-        }, child)));
+        }, child))));
     }
     function BrContainerUnorderedList(props) {
-        return React.createElement("ul", {
+        return React__default["default"].createElement("ul", {
             className: props.page.isPreview() ? "hst-container" : undefined
-        }, React.Children.map(props.children, child => React.createElement("li", {
+        }, React__default["default"].Children.map(props.children, (child => React__default["default"].createElement("li", {
             className: props.page.isPreview() ? "hst-container-item" : undefined
-        }, child)));
+        }, child))));
     }
     function BrContainerItemUndefined(props) {
-        return React.createElement(React.Fragment, null, 'Component "', props.component.getType(), '" is not defined.');
+        return React__default["default"].createElement(React__default["default"].Fragment, null, 'Component "', props.component.getType(), '" is not defined.');
     }
     /**
    * The button component that opens for editing a content.
-   */    class BrManageContentButton extends React.Component {
+   */    class BrManageContentButton extends React__default["default"].Component {
         render() {
             var _a;
-            if (!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isPreview())) {
-                return null;
-            }
-            return React.createElement(BrMeta, {
-                meta: this.props.content.getMeta()
-            });
+            return ((_a = this.context) === null || _a === void 0 ? void 0 : _a.isPreview()) ? React__default["default"].createElement(BrMeta, {
+                meta: this.context.getButton(spaSdk.TYPE_MANAGE_CONTENT_BUTTON, this.props)
+            }) : null;
         }
@@ -123,11 +109,7 @@ }
    * The button component that opens a menu editor.
-   */    class BrManageMenuButton extends React.Component {
+   */    class BrManageMenuButton extends React__default["default"].Component {
         render() {
             var _a;
-            if (!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isPreview())) {
-                return null;
-            }
-            const meta = spaSdk.isMenu(this.props.menu) ? this.props.menu.getMeta() : this.props.menu._meta && this.context.getMeta(this.props.menu._meta);
-            return meta ? React.createElement(BrMeta, {
-                meta
+            return ((_a = this.context) === null || _a === void 0 ? void 0 : _a.isPreview()) ? React__default["default"].createElement(BrMeta, {
+                meta: this.context.getButton(spaSdk.TYPE_MANAGE_MENU_BUTTON, this.props.menu)
             }) : null;
@@ -144,15 +126,15 @@ }
               case spaSdk.TYPE_CONTAINER_INLINE:
-                return React.createElement(BrContainerInline, Object.assign({}, this.props));
+                return React__default["default"].createElement(BrContainerInline, Object.assign({}, this.props));
 
               case spaSdk.TYPE_CONTAINER_NO_MARKUP:
-                return React.createElement(BrContainerNoMarkup, Object.assign({}, this.props));
+                return React__default["default"].createElement(BrContainerNoMarkup, Object.assign({}, this.props));
 
               case spaSdk.TYPE_CONTAINER_ORDERED_LIST:
-                return React.createElement(BrContainerOrderedList, Object.assign({}, this.props));
+                return React__default["default"].createElement(BrContainerOrderedList, Object.assign({}, this.props));
 
               case spaSdk.TYPE_CONTAINER_UNORDERED_LIST:
-                return React.createElement(BrContainerUnorderedList, Object.assign({}, this.props));
+                return React__default["default"].createElement(BrContainerUnorderedList, Object.assign({}, this.props));
 
               default:
-                return React.createElement(BrContainerBox, Object.assign({}, this.props));
+                return React__default["default"].createElement(BrContainerBox, Object.assign({}, this.props));
             }
@@ -182,19 +164,19 @@ }
         fallback() {
-            return React.createElement(BrContainerItemUndefined, Object.assign({}, this.props));
+            return React__default["default"].createElement(BrContainerItemUndefined, Object.assign({}, this.props));
         }
         onUpdate() {
-            this.forceUpdate(() => this.props.page.sync());
+            this.forceUpdate((() => this.props.page.sync()));
         }
     }
-    class BrNode extends React.Component {
+    class BrNode extends React__default["default"].Component {
         renderNode() {
-            if (React.Children.count(this.props.children)) {
+            if (React__default["default"].Children.count(this.props.children)) {
                 return this.props.children;
             }
-            const children = this.props.component.getChildren().map((child, index) => React.createElement(BrNode, {
+            const children = this.props.component.getChildren().map(((child, index) => React__default["default"].createElement(BrNode, {
                 key: index,
                 component: child
-            }));
+            })));
             if (spaSdk.isContainer(this.props.component)) {
-                return React.createElement(BrNodeContainer, {
+                return React__default["default"].createElement(BrNodeContainer, {
                     component: this.props.component,
@@ -205,3 +187,3 @@ page: this.context
             if (spaSdk.isContainerItem(this.props.component)) {
-                return React.createElement(BrNodeContainerItem, {
+                return React__default["default"].createElement(BrNodeContainerItem, {
                     component: this.props.component,
@@ -211,3 +193,3 @@ page: this.context
             }
-            return React.createElement(BrNodeComponent, {
+            return React__default["default"].createElement(BrNodeComponent, {
                 component: this.props.component,
@@ -218,5 +200,5 @@ page: this.context
         render() {
-            return React.createElement(BrComponentContext.Provider, {
+            return React__default["default"].createElement(BrComponentContext.Provider, {
                 value: this.props.component
-            }, React.createElement(BrMeta, {
+            }, React__default["default"].createElement(BrMeta, {
                 meta: this.props.component.getMeta()
@@ -229,3 +211,3 @@ }, this.renderNode()));
    * The brXM component.
-   */    class BrComponent extends React.Component {
+   */    class BrComponent extends React__default["default"].Component {
         getComponents() {
@@ -242,9 +224,9 @@ if (!this.context) {
         renderComponents() {
-            return this.getComponents().map((component, index) => React.createElement(BrNode, {
+            return this.getComponents().map(((component, index) => React__default["default"].createElement(BrNode, {
                 key: index,
                 component
-            }, this.props.children));
+            }, this.props.children)));
         }
         render() {
-            return React.createElement(React.Fragment, null, this.renderComponents());
+            return React__default["default"].createElement(React__default["default"].Fragment, null, this.renderComponents());
         }
@@ -289,3 +271,3 @@ }
    * The brXM page.
-   */    class BrPage extends React.Component {
+   */    class BrPage extends React__default["default"].Component {
         /**
@@ -313,6 +295,6 @@ * @param props {BrPageProps}
             if (this.state.page !== prevState.page) {
-                this.forceUpdate(() => {
+                this.forceUpdate((() => {
                     var _a;
                     return (_a = this.state.page) === null || _a === void 0 ? void 0 : _a.sync();
-                });
+                }));
             }
@@ -331,5 +313,5 @@ }
                 } catch (error) {
-                    this.setState(() => {
+                    this.setState((() => {
                         throw error;
-                    });
+                    }));
                 }
@@ -348,7 +330,7 @@ }));
             }
-            return React.createElement(BrPageContext.Provider, {
+            return React__default["default"].createElement(BrPageContext.Provider, {
                 value: this.state.page
-            }, React.createElement(BrMappingContext.Provider, {
+            }, React__default["default"].createElement(BrMappingContext.Provider, {
                 value: this.props.mapping
-            }, React.createElement(BrNode, {
+            }, React__default["default"].createElement(BrNode, {
                 component: this.state.page.getComponent()
@@ -355,0 +337,0 @@ }, this.props.children)));

dist/meta/BrMeta.d.ts

@@ -6,11 +6,3 @@ import React from 'react';
 }
-export declare class BrMeta extends React.Component<BrMetaProps> {
-    private headRef;
-    private tailRef;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: BrMetaProps): void;
-    componentWillUnmount(): void;
-    private renderMeta;
-    render(): JSX.Element;
-}
+export declare function BrMeta({ children, meta }: React.PropsWithChildren<BrMetaProps>): JSX.Element;
 export {};

package.json

 {
   "name": "@bloomreach/react-sdk",
-  "version": "14.3.3",
+  "version": "14.4.0",
   "description": "Bloomreach SPA SDK for React",
@@ -14,4 +14,4 @@ "keywords": [
     "type": "git",
-    "url": "https://code.onehippo.org/cms-community/bloomreach-spa-sdk",
-    "directory": "packages/react-sdk"
+    "url": "https://github.com/bloomreach/brxm.git",
+    "directory": "spa-sdk/packages/react-sdk"
   },
@@ -42,14 +42,15 @@ "bugs": {
   "dependencies": {
-    "@bloomreach/spa-sdk": "^14.3.3"
+    "@bloomreach/spa-sdk": "^14.4.0"
   },
   "peerDependencies": {
-    "react": "^16.13"
+    "react": "^16.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.9",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9",
-    "@babel/preset-env": "^7.9",
-    "@babel/preset-react": "^7.9",
+    "@babel/core": "^7.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12",
+    "@babel/preset-env": "^7.12",
+    "@babel/preset-react": "^7.12",
+    "@rollup/plugin-babel": "^5.2",
     "@types/enzyme": "^3.10",
-    "@types/jest": "^25.2",
+    "@types/jest": "^26.0",
     "@types/react": "^16.9",
@@ -60,16 +61,16 @@ "@types/react-dom": "^16.9",
     "enzyme-adapter-react-16": "^1.15",
-    "jest": "^26.0",
+    "jest": "^26.6",
     "jest-environment-enzyme": "^7.1",
     "jest-enzyme": "^7.1",
-    "jest-junit": "^11.1",
-    "react": "^16.12",
-    "rollup": "^2.10",
-    "rollup-plugin-babel": "^4.4",
-    "rollup-plugin-terser": "^5.3",
-    "rollup-plugin-typescript2": "^0.27",
-    "ts-jest": "^26.0",
+    "jest-junit": "^12.0",
+    "react": "^16.14",
+    "react-dom": "^16.14",
+    "rollup": "^2.32",
+    "rollup-plugin-terser": "^7.0",
+    "rollup-plugin-typescript2": "^0.28",
+    "ts-jest": "^26.4",
     "tslint": "^6.1",
     "tslint-config-airbnb": "^5.11",
     "tslint-react": "^5.0",
-    "typescript": "^3.8"
+    "typescript": "^4.0"
   },
@@ -76,0 +77,0 @@ "jest": {

README.md

@@ -156,2 +156,84 @@ # Bloomreach React SDK
 
+### Buttons
+- Manage menu button can be placed inside a menu component using `BrManageMenuButton` component.
+  ```tsx
+  import React from 'react';
+  import { Menu, Reference } from '@bloomreach/spa-sdk';
+  import { BrComponentContext, BrManageMenuButton, BrPageContext } from '@bloomreach/react-sdk';
+
+  interface MenuModels {
+    menu: Reference;
+  }
+
+  export default function MenuComponent() {
+    const component = React.useContext(BrComponentContext);
+    const page = React.useContext(BrPageContext);
+    const menuRef = component?.getModels<MenuModels>().menu;
+    const menu = menuRef && page?.getContent<Menu>(menuRef);
+
+    if (!menu) {
+      return null;
+    }
+
+    return (
+      <ul className={page?.isPreview() ? 'has-edit-button' : ''}>
+        {/* ... */}
+
+        <BrManageMenuButton menu={menu} />
+      </ul>
+    );
+  }
+  ```
+- Manage content button can be placed inside a component using `BrManageContentButton` component with non-empty `content` property.
+  ```tsx
+  import React from 'react';
+  import { Document, Reference } from '@bloomreach/spa-sdk';
+  import { BrManageContentButton, BrProps } from '@bloomreach/react-sdk';
+
+  interface BannerModels {
+    document: Reference;
+  }
+
+  export default function Banner({ component, page }: BrProps) {
+    const { document: documentRef } = component.getModels<BannerModels>();
+    const document = documentRef && page.getContent<Document>(documentRef);
+
+    return (
+      <div className={page.isPreview() ? 'has-edit-button' : ''}>
+        {/* ... */}
+
+        <BrManageContentButton
+          content={document}
+          documentTemplateQuery="new-banner-document"
+          folderTemplateQuery="new-banner-folder"
+          parameter="document"
+          root="banners"
+          relative
+        />
+      </div>
+    );
+  }
+  ```
+- Add new content button can be placed inside a component using `BrManageContentButton` directive but without passing a content entity.
+  ```tsx
+  import React from 'react';
+  import { BrManageContentButton, BrProps } from '@bloomreach/react-sdk';
+
+  export default function News({ component, page }: BrProps) {
+    // ...
+
+    return (
+      <div className={page.isPreview() ? 'has-edit-button' : ''}>
+        {/* ... */}
+
+        <BrManageContentButton
+          documentTemplateQuery="new-news-document"
+          folderTemplateQuery="new-news-folder"
+          root="news"
+        />
+      </div>
+    );
+  }
+  ```
+
 ### Reference
@@ -180,3 +262,3 @@ The React SDK is using [Bloomreach SPA SDK](https://www.npmjs.com/package/@bloomreach/spa-sdk#reference) to interact with the brXM.
 #### BrManageContentButton
-This component places a button on the page that opens the linked content in the document editor.
+This component places a button on the page that opens the linked content in the document editor or opens a document editor to create a new one.
 The button will only be shown in preview mode.
@@ -186,3 +268,9 @@
 --- | :---: | ---
-`content` | _yes_ | The content entity to open for editing.
+`content` | _no_ | The content entity to open for editing.
+`documentTemplateQuery` | _no_ | Template query to use for creating new documents.
+`folderTemplateQuery` | _no_ | Template query to use in case folders specified by `path` do not yet exist and must be created.
+`path` | _no_ | Initial location of a new document, relative to the `root`.
+`parameter` | _no_ | Name of the component parameter in which the document path is stored.
+`relative` | _no_ | Flag indicating that the picked value should be stored as a relative path.
+`root` | _no_ | Path to the root folder of selectable document locations.
 
@@ -189,0 +277,0 @@ #### BrManageMenuButton

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67046

increased by2.87%

Number of lines in readme file

299

increased by41.71%

Worsened metrics

Dev dependency count

26

increased by4%

Lines of code

1176

decreased by-6.29%

Dependency changes

• Updated@bloomreach/spa-sdk@^14.4.0