Add option to not render the menu content when closed

Author: JelteMX

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dropdowncontainer",
   "widgetName": "DropdownContainer",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Place Mendix components in a dropdown",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",

src/DropdownContainer.xml

@@ -32,6 +32,10 @@
                 <caption>Menu self-close</caption>
                 <description>If set to true: clicking on the menu or it's buttons will close the dropdown menu.</description>
             </property>
+            <property key="renderMenuContentWhenClosed" type="boolean" defaultValue="true">
+                <caption>Render closed content</caption>
+                <description>This can be set to false if you happen to have a lot of content to be rendered. This could impact the performance of your page. Only disable when having performance issues.</description>
+            </property>
         </propertyGroup>
         <propertyGroup caption="Elements">
             <property key="content" type="widgets" required="false">

src/components/DropDown.tsx

@@ -18,6 +18,7 @@ export interface DropDownProps {
     isRightAligned: boolean;
     startOpen: boolean;
     autoClose: boolean;
+    renderClosed: boolean;
     content?: ReactNode;
     buttonSize: AppearanceButtonSizeEnum;
     buttonType: AppearanceButtonTypeEnum;
@@ -117,14 +118,15 @@ export class DropDownInternal extends Component<DropDownProps, DropDownState> {
     }
 
     private renderMenu(): ReactNode {
-        const { content, isRightAligned } = this.props;
+        const { content, isRightAligned, renderClosed } = this.props;
+        const { open } = this.state;
 
         return (
             <div
                 className={classNames("dropdown-menu", { "dropdown-menu-right": isRightAligned })}
                 onClick={this.handleMenuClick}
             >
-                {content}
+                {!open && !renderClosed ? null : content}
             </div>
         );
     }
@@ -209,31 +211,33 @@ export class DropDownInternal extends Component<DropDownProps, DropDownState> {
 export const DropDown = onClickOutside(DropDownInternal);
 
 export const getFilteredProps = (
-    props: DropdownContainerContainerProps | DropdownContainerPreviewProps,
-    isWebModeler = false
-): DropDownProps => {
-    const {
+    {
+        renderMenuContentWhenClosed,
         generalButtonGlyphicon,
         generalIsDropUp,
         generalIsRightAligned,
         generalStartOpen,
         generalAutoClose,
         content,
+        class: className,
         appearanceButtonSize,
         appearanceButtonType,
         splitButtonSplitButtonActive
-    } = props;
+    }: DropdownContainerContainerProps | DropdownContainerPreviewProps,
+    isWebModeler = false
+): DropDownProps => {
     const returnProps: DropDownProps = {
         glyphicon: generalButtonGlyphicon,
         isDropUp: generalIsDropUp,
         isRightAligned: generalIsRightAligned,
         startOpen: generalStartOpen,
         autoClose: generalAutoClose,
+        renderClosed: renderMenuContentWhenClosed,
         content,
         buttonSize: appearanceButtonSize,
         buttonType: appearanceButtonType,
         splitButtonActive: splitButtonSplitButtonActive,
-        extraClasses: props.class,
+        extraClasses: className,
         isWebModeler
     };
     return returnProps;

src/components/__tests__/DropDown.spec.tsx

@@ -6,6 +6,7 @@ import { DropDown, DropDownProps } from "../DropDown";
 describe("DropDown", () => {
     it("should render the structure correctly", () => {
         const props: DropDownProps = {
+            renderClosed: true,
             isDropUp: true,
             isRightAligned: true,
             extraClasses: "",

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DropdownContainer" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DropdownContainer" version="1.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DropdownContainer.xml"/>
         </widgetFiles>

typings/DropdownContainerProps.d.ts

@@ -26,6 +26,7 @@ export interface DropdownContainerContainerProps extends CommonProps {
     generalIsRightAligned: boolean;
     generalStartOpen: boolean;
     generalAutoClose: boolean;
+    renderMenuContentWhenClosed: boolean;
     content?: ReactNode;
     appearanceButtonSize: AppearanceButtonSizeEnum;
     appearanceButtonType: AppearanceButtonTypeEnum;
@@ -43,6 +44,7 @@ export interface DropdownContainerPreviewProps {
     generalIsRightAligned: boolean;
     generalStartOpen: boolean;
     generalAutoClose: boolean;
+    renderMenuContentWhenClosed: boolean;
     content?: ReactNode;
     appearanceButtonSize: AppearanceButtonSizeEnum;
     appearanceButtonType: AppearanceButtonTypeEnum;
@@ -57,6 +59,7 @@ export interface VisibilityMap {
     generalIsRightAligned: boolean;
     generalStartOpen: boolean;
     generalAutoClose: boolean;
+    renderMenuContentWhenClosed: boolean;
     content: boolean;
     appearanceButtonSize: boolean;
     appearanceButtonType: boolean;