Skip to content

Commit

Permalink
Revert "feat(filter-panel): add view all button for filter groups (#8188
Browse files Browse the repository at this point in the history 
)"

This reverts commit 6a55992.
  • Loading branch information
@IgnacioBecerra
IgnacioBecerra committed Feb 11, 2022
1 parent 0a0c5ea commit 8bcc2e1
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 509 deletions.
19 changes: 4 additions & 15 deletions packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,25 @@
/**
* @license
*
* Copyright IBM Corp. 2020, 2022
* Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import { html } from 'lit-element';
import { text, select, number } from '@storybook/addon-knobs';
import { text, select } from '@storybook/addon-knobs';
import '../index';
import readme from './README.stories.mdx';

export const Default = ({ parameters }) => {
const { heading, filterCutoff, maxFilters, viewAllText, gridKnobs } = parameters?.props?.FilterPanel ?? {};
const { heading, gridKnobs } = parameters?.props?.FilterPanel ?? {};
return html`
<div class="${gridKnobs === '3 columns' ? 'bx--col-lg-3' : 'bx--col-lg-4'}" style="padding-right: 1rem;">
<dds-filter-panel-composite>
<dds-filter-panel-heading slot="heading">${heading}</dds-filter-panel-heading>
<dds-filter-group>
<dds-filter-group-item
title-text="Product types"
filter-cutoff="${filterCutoff}"
max-filters="${maxFilters}"
view-all-text="${viewAllText}"
>
<dds-filter-group-item title-text="Product types">
<dds-filter-panel-checkbox value="API">API</dds-filter-panel-checkbox>
<dds-filter-panel-checkbox value="Application">Application</dds-filter-panel-checkbox>
<dds-filter-panel-checkbox value="Data Set">Data Set</dds-filter-panel-checkbox>
Expand Down Expand Up @@ -114,19 +109,13 @@ export default {
knobs: {
FilterPanel: ({ groupId }) => ({
heading: text('heading', 'Filter', groupId),
filterCutoff: number('Filter cutoff', 5, {}, groupId),
maxFilters: number('Max filters', 7, {}, groupId),
viewAllText: text('View all text', 'View all', groupId),
gridKnobs: select('Grid alignment', ['3 columns', '4 columns'], '4 columns', groupId),
}),
},
propsSet: {
default: {
FilterPanel: {
heading: 'Filter',
filterCutoff: 5,
maxFilters: 7,
viewAllText: 'View all',
gridKnobs: '4 columns',
},
},
Expand Down
213 changes: 2 additions & 211 deletions packages/web-components/src/components/filter-panel/filter-group-item.ts
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,19 @@
/**
* @license
*
* Copyright IBM Corp. 2020, 2022
* Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import { customElement, property, query, state } from 'lit-element';
import settings from 'carbon-components/es/globals/js/settings';
import { customElement } from 'lit-element';
import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
import BXAccordionItem from 'carbon-web-components/es/components/accordion/accordion-item';
import styles from './filter-panel.scss';
import StableSelectorMixin from '../../globals/mixins/stable-selector';
import DDSFilterPanelComposite from './filter-panel-composite';
import DDSFilterPanelCheckbox from './filter-panel-checkbox';
import DDSFilterPanelInputSelectItem from './filter-panel-input-select-item';
import DDSFilterPanelInputSelect from './filter-panel-input-select';

const { stablePrefix: ddsPrefix } = ddsSettings;
const { prefix } = settings;

const viewAllClassName = `${ddsPrefix}-filter-group-item__view-all`;

/**
* DDSFilterGroupItem renders each individual accordion
Expand All @@ -38,207 +30,6 @@ class DDSFilterGroupItem extends StableSelectorMixin(BXAccordionItem) {
}

static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader

static get viewAllSelector(): string {
return `button.${viewAllClassName}`;
}

/**
* The element containing the default slot.
*/
@query(`.${prefix}--accordion__content`)
accordionContent: any;

/**
* The text for the button that reveals all filters in the group.
*/
@property({ type: String, attribute: 'view-all-text' })
viewAllText: string = 'View all';

/**
* The number of filters that can be shown without needing to hide any.
*/
@property({ type: Number, attribute: 'max-filters' })
maxFilters: number = 7;

/**
* The number of filters to show when not all filters are visible.
*/
@property({ type: Number, attribute: 'filter-cutoff' })
filterCutoff: number = 5;

/**
* Whether or not any hidden filters have been revealed.
*/
@property({ type: Boolean })
allRevealed = false;

/**
* An element to set focus to on reveal.
*/
@state()
_focusedElement: HTMLElement | null = null;

/**
* Whether or not to add view all button functionality.
*/
protected _needsViewAll(): boolean {
return this.children.length > this.maxFilters;
}

/**
* Checks if any filters beyond the cutoff point have been selected.
*/
protected _hasHiddenActiveFilter(): boolean {
const { children, filterCutoff } = this;
let result: boolean = false;

[...children].slice(filterCutoff, children.length).forEach(elem => {
if (elem instanceof DDSFilterPanelCheckbox) {
if (elem.checked) result = true;
}
if (elem instanceof DDSFilterPanelInputSelectItem || elem instanceof DDSFilterPanelInputSelect) {
if (elem.selected) result = true;
}
});

return result;
}

/**
* Hides or reveals excess filters.
*/
protected _handleAllRevealed(revealed: boolean): void {
const { children, filterCutoff, accordionContent } = this;
const hasHiddenActiveFilter = this._hasHiddenActiveFilter();

[...children].slice(filterCutoff, children.length).forEach(elem => {
(elem as HTMLElement).style.display = revealed || hasHiddenActiveFilter ? '' : 'none';
});

if (!revealed && !hasHiddenActiveFilter) {
accordionContent.appendChild(this._renderViewAll());
}

this._dispatchViewAllEvent(revealed);
}

/**
* Generates a view all button.
*/
protected _renderViewAll(): HTMLButtonElement {
const { children, filterCutoff } = this;

const viewAll = document.createElement('button');
viewAll.classList.add(viewAllClassName, `${prefix}--btn--ghost`);
viewAll.type = 'button';
viewAll.innerText = this.viewAllText;

viewAll.addEventListener(
'click',
(e): void => {
this.allRevealed = true;
if (e.target instanceof HTMLElement) e.target.remove();

const firstHidden = children[filterCutoff];
if (firstHidden instanceof HTMLElement) {
this._focusedElement = firstHidden;
}
},
{ passive: true, once: true }
);

return viewAll;
}

/**
* Dispatches a custom event that notifies listeners whether or not this
* filter group has all options revealed.
*/
protected _dispatchViewAllEvent(removed: boolean): void {
const { eventViewAll } = this.constructor as typeof DDSFilterGroupItem;
this.dispatchEvent(
new CustomEvent(eventViewAll, {
bubbles: true,
cancelable: true,
composed: true,
detail: {
id: this.titleText,
value: removed,
},
})
);
}

/**
* Retrieves view all state stored in the filter panel composite. Returns
* internal value if no cache is found.
*/
protected _getCachedViewAllValue(): boolean {
const { allRevealed, titleText } = this;
let result: boolean = allRevealed;

const filterPanel = this.closest('dds-filter-panel');
if (filterPanel !== null) {
// Indicates this is composite's duplicated content.
let parentHost: Element | undefined;
const parent = filterPanel.parentNode;
if (parent instanceof ShadowRoot) {
parentHost = parent.host;
}
if (parentHost instanceof DDSFilterPanelComposite) {
const match = parentHost._filterGroupsAllRevealed.find(entry => {
return entry.id === titleText;
});
if (match !== undefined) {
result = match.value;
}
}
}

return result;
}

protected firstUpdated(): void {
if (this._needsViewAll()) {
this.allRevealed = this._getCachedViewAllValue();
}
}

protected updated(_changedProperties: Map<string | number | symbol, unknown>): void {
const { allRevealed, _focusedElement } = this;
if (this._needsViewAll()) {
const prevOpen = _changedProperties.get('open');
const hasAllRevealed = _changedProperties.has('allRevealed');
const prevAllRevealed = _changedProperties.get('allRevealed');

// Reset `allRevealed` on accordion close.
if (prevOpen) {
this.allRevealed = this._hasHiddenActiveFilter() || false;
}

// Respect `allRevealed` attribute.
if (hasAllRevealed) {
if (prevAllRevealed === undefined) {
this._handleAllRevealed(this._getCachedViewAllValue());
} else {
this._handleAllRevealed(allRevealed);

if (allRevealed && _focusedElement instanceof HTMLElement) {
_focusedElement.focus();
this._focusedElement = null;
}
}
}
}
}

/**
* The name of the event that fires when the view all button is toggled.
*/
static get eventViewAll() {
return `${ddsPrefix}-filter-group-view-all-toggle`;
}
}

/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
Expand Down
Loading

0 comments on commit 8bcc2e1

Please sign in to comment.