fix(conditional filter): remove hidden elements

Hyperkid123 · Aug 23, 2021 · 2157b1a · 2157b1a
1 parent db12258
commit 2157b1a
Showing 1 changed file with 61 additions and 38 deletions.
diff --git a/packages/components/src/ConditionalFilter/ConditionalFilter.js b/packages/components/src/ConditionalFilter/ConditionalFilter.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Dropdown, DropdownItem, DropdownToggle, SplitItem, Split, ToolbarItem, ToolbarGroup, ToolbarToggleGroup } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
+import globalBreakpointMd from '@patternfly/react-tokens/dist/js/global_breakpoint_md';
 import Text from './TextFilter';
 import { conditionalFilterType, typeMapper } from './conditionalFilterConstants';
 import PropTypes from 'prop-types';
@@ -10,11 +11,18 @@ import classNames from 'classnames';
 
 class ConditionalFilter extends Component {
     constructor(props) {
+        if (!props.useMobileLayout) {
+            console.warn(`The prop "useMobileLayout" is set to false. You are using an outdated mobile layout of conditional filter.
+            Please switch to new layout by adding "useMobileLayout=true" prop to the PrimaryToolbar or ConditionalFilter directly.
+            The new mobile layout will become the default in next minor release.`);
+        }
+
         super(props);
+        this.breakpointConstant = parseInt(globalBreakpointMd.value.replace('px', ''));
         this.state = {
             isOpen: false,
             stateValue: undefined,
-            Wrapper: this.getWrapper()
+            isMobile: this.updateFilterViewport(window.innerWidth)
         };
     }
 
@@ -30,19 +38,27 @@ class ConditionalFilter extends Component {
         });
     }
 
-    getWrapper = () => this.props.useMobileLayout ? (props) => <ToolbarToggleGroup {...props} breakpoint="md" toggleIcon={<FilterIcon />}></ToolbarToggleGroup> : Fragment
+    getWrapper = () => this.props.useMobileLayout && this.state.isMobile
+        ? (props) => <ToolbarToggleGroup {...props} breakpoint="md" toggleIcon={<FilterIcon />}></ToolbarToggleGroup>
+        : Fragment
+
+    updateFilterViewport = (width) => width <= this.breakpointConstant
+
+    componentDidMount() {
+        this.resizeListener = window.addEventListener('resize', (event) => {
+            this.setState(prev => ({ ...prev, isMobile: this.updateFilterViewport(event.target.innerWidth) }));
+        });
+    }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.useMobileLayout !== prevProps.useMobileLayout) {
-            this.setState({
-                Wrapper: this.getWrapper()
-            });
+    componentWillUnmount() {
+        if (this.resizeListener) {
+            window.removeEventListener(this.resizeListener);
         }
     }
 
     render() {
         const { items, value, onChange, placeholder, hideLabel, isDisabled, ...props } = this.props;
-        const { isOpen, stateValue, Wrapper } = this.state;
+        const { isOpen, stateValue, isMobile } = this.state;
         const currentValue = onChange ? value : stateValue;
         const activeItem = items && items.length && (
             items.find((item, key) => item.value === currentValue || key === currentValue) ||
@@ -52,9 +68,11 @@ class ConditionalFilter extends Component {
         const ActiveComponent = activeItem && (typeMapper[activeItem.type] || typeMapper.text);
         const capitalize = (string) => string[0].toUpperCase() + string.substring(1);
 
+        const shouldRenderNewLayout = this.props.useMobileLayout && isMobile;
+        const Wrapper = this.getWrapper();
         return (
             <Wrapper>
-                {this.props.useMobileLayout && (
+                {this.props.useMobileLayout && isMobile && (
                     <ToolbarGroup className="ins-c-conditional-filter mobile">
                         {items.map((activeItem, key) => {
                             const ActiveComponent = activeItem && (typeMapper[activeItem.type] || typeMapper.text);
@@ -78,22 +96,25 @@ class ConditionalFilter extends Component {
                     </ToolbarGroup>
 
                 )}
-                {
-                    !items || (items && items.length <= 0) ?
-                        <div className={classNames('ins-c-conditional-filter', {
-                            desktop: this.props.useMobileLayout
-                        })}>
-                            <Text { ...props }
-                                value={ currentValue }
-                                onChange={ (e) => onChangeCallback(e, e.target.value) }
-                                placeholder={ placeholder }
-                                widget-type='InsightsInput'
-                            />
-                        </div> :
-                        <Split className={classNames('ins-c-conditional-filter', {
-                            desktop: this.props.useMobileLayout
-                        })}>
-                            { items.length > 1 &&
+                {!shouldRenderNewLayout && (
+                    <Fragment>
+
+                        {
+                            !items || (items && items.length <= 0) ?
+                                <div className={classNames('ins-c-conditional-filter', {
+                                    desktop: this.props.useMobileLayout
+                                })}>
+                                    <Text { ...props }
+                                        value={ currentValue }
+                                        onChange={ (e) => onChangeCallback(e, e.target.value) }
+                                        placeholder={ placeholder }
+                                        widget-type='InsightsInput'
+                                    />
+                                </div> :
+                                <Split className={classNames('ins-c-conditional-filter', {
+                                    desktop: this.props.useMobileLayout
+                                })}>
+                                    { items.length > 1 &&
                                 <SplitItem>
                                     <Dropdown
                                         className="ins-c-conditional-filter__group"
@@ -124,23 +145,25 @@ class ConditionalFilter extends Component {
                                         }
                                     />
                                 </SplitItem>
-                            }
-                            {
-                                ActiveComponent && <SplitItem isFilled>
-                                    <ActiveComponent
-                                        {
-                                            ...activeItem.type !== conditionalFilterType.custom &&
+                                    }
+                                    {
+                                        ActiveComponent && <SplitItem isFilled>
+                                            <ActiveComponent
+                                                {
+                                                    ...activeItem.type !== conditionalFilterType.custom &&
                                             {
                                                 placeholder: placeholder || activeItem.placeholder || `Filter by ${activeItem.label}`,
                                                 id: (activeItem.filterValues && activeItem.filterValues.id) || currentValue
                                             }
-                                        }
-                                        { ...activeItem.filterValues }
-                                    />
-                                </SplitItem>
-                            }
-                        </Split>
-                }
+                                                }
+                                                { ...activeItem.filterValues }
+                                            />
+                                        </SplitItem>
+                                    }
+                                </Split>
+                        }
+                    </Fragment>
+                )}
             </Wrapper>
         );
     }