@performant-software/semantic-components 1.0.10-beta.0 → 1.0.10-beta.2

package/types/components/List.js.flow

@@ -15,6 +15,7 @@ import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import DropdownButton from './DropdownButton';
 import EditModal from './EditModal';
+import FilterLabels from './FilterLabels';
 import './List.css';
 
 type Action = {
@@ -105,7 +106,8 @@ type Props = {
     component: Component<{}>,
     props?: any,
     state?: any,
-    onChange: (params: any) => Promise<any>
+    onChange: (params: any) => Promise<any>,
+    showLabels?: boolean
   },
 
   /**
@@ -383,6 +385,18 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       this.setState({ modalFilter: true });
     }
 
+    /**
+     * Calls the filter onChange function with the passed filter removed.
+     *
+     * @param filter
+     *
+     * @returns {*}
+     */
+    onRemoveFilter(filter) {
+      const { onChange, props: { item } } = this.props.filters;
+      return onChange({ filters: _.filter(item.filters, (f) => f.uid !== filter.uid) });
+    }
+
     /**
      * Saves the passed item and closes the add/edit modal.
      *
@@ -754,6 +768,8 @@ const useList = (WrappedComponent: ComponentType<any>) => (
         renderHeader = true;
       }
 
+      const hasLabels = filters && filters.showLabels && !_.isEmpty(filters.props.item.filters);
+
       if (!renderHeader) {
         return null;
       }
@@ -763,41 +779,58 @@ const useList = (WrappedComponent: ComponentType<any>) => (
           className='header'
         >
           <Grid
-            columns={2}
-            verticalAlign='bottom'
+            className={hasLabels ? 'filter-labels' : undefined}
+            verticalAlign='top'
           >
-            <Grid.Column
-              textAlign='left'
+            <Grid.Row
+              columns={2}
             >
-              { _.map(buttons, this.renderButton.bind(this)) }
-            </Grid.Column>
-            <Grid.Column
-              textAlign='right'
-            >
-              <Menu
-                compact
-                borderless
-                secondary
-                className='flex-end-menu'
+              <Grid.Column
+                textAlign='left'
+              >
+                { _.map(buttons, this.renderButton.bind(this)) }
+              </Grid.Column>
+              <Grid.Column
+                textAlign='right'
               >
-                { renderListHeader && (
-                  <Menu.Menu className='list-header-menu'>
-                    { renderListHeader() }
+                <Menu
+                  compact
+                  borderless
+                  secondary
+                  className='flex-end-menu'
+                >
+                  { renderListHeader && (
+                    <Menu.Menu className='list-header-menu'>
+                      { renderListHeader() }
+                    </Menu.Menu>
+                  )}
+                  <Menu.Menu>
+                    { filters && this.renderFilterButton() }
                   </Menu.Menu>
-                )}
-                <Menu.Menu>
-                  { filters && this.renderFilterButton() }
-                </Menu.Menu>
-                { perPageOptions && (
-                  <Menu.Menu className='per-page-menu'>
-                    { this.renderPerPage() }
+                  { perPageOptions && (
+                    <Menu.Menu className='per-page-menu'>
+                      { this.renderPerPage() }
+                    </Menu.Menu>
+                  )}
+                  <Menu.Menu>
+                    { renderSearch && renderSearch() }
                   </Menu.Menu>
-                )}
-                <Menu.Menu>
-                  { renderSearch && renderSearch() }
-                </Menu.Menu>
-              </Menu>
-            </Grid.Column>
+                </Menu>
+              </Grid.Column>
+            </Grid.Row>
+            { hasLabels && (
+              <Grid.Row
+                columns={1}
+              >
+                <Grid.Column>
+                  <FilterLabels
+                    filters={filters.props.item.filters}
+                    onClear={() => filters.onChange({ filters: [] })}
+                    onClick={(filter) => this.onRemoveFilter(filter)}
+                  />
+                </Grid.Column>
+              </Grid.Row>
+            )}
           </Grid>
         </div>
       );

package/types/components/ListFilters.js.flow

@@ -75,6 +75,40 @@ const FilterOperators = {
   lessThan: 'less_than'
 };
 
+const FilterOperatorOptions = [{
+  key: FilterOperators.equal,
+  value: FilterOperators.equal,
+  text: i18n.t('ListFilters.operators.equal')
+}, {
+  key: FilterOperators.notEqual,
+  value: FilterOperators.notEqual,
+  text: i18n.t('ListFilters.operators.notEqual')
+}, {
+  key: FilterOperators.contain,
+  value: FilterOperators.contain,
+  text: i18n.t('ListFilters.operators.contain')
+}, {
+  key: FilterOperators.notContain,
+  value: FilterOperators.notContain,
+  text: i18n.t('ListFilters.operators.notContain')
+}, {
+  key: FilterOperators.empty,
+  value: FilterOperators.empty,
+  text: i18n.t('ListFilters.operators.empty')
+}, {
+  key: FilterOperators.notEmpty,
+  value: FilterOperators.notEmpty,
+  text: i18n.t('ListFilters.operators.notEmpty')
+}, {
+  key: FilterOperators.greaterThan,
+  value: FilterOperators.greaterThan,
+  text: i18n.t('ListFilters.operators.greaterThan')
+}, {
+  key: FilterOperators.lessThan,
+  value: FilterOperators.lessThan,
+  text: i18n.t('ListFilters.operators.lessThan')
+}];
+
 const OperatorsByType = {
   [FilterTypes.boolean]: [
     FilterOperators.equal
@@ -110,40 +144,6 @@ const OperatorsByType = {
   ]
 };
 
-const OperatorOptions = [{
-  key: FilterOperators.equal,
-  value: FilterOperators.equal,
-  text: i18n.t('ListFilters.operators.equal')
-}, {
-  key: FilterOperators.notEqual,
-  value: FilterOperators.notEqual,
-  text: i18n.t('ListFilters.operators.notEqual')
-}, {
-  key: FilterOperators.contain,
-  value: FilterOperators.contain,
-  text: i18n.t('ListFilters.operators.contain')
-}, {
-  key: FilterOperators.notContain,
-  value: FilterOperators.notContain,
-  text: i18n.t('ListFilters.operators.notContain')
-}, {
-  key: FilterOperators.empty,
-  value: FilterOperators.empty,
-  text: i18n.t('ListFilters.operators.empty')
-}, {
-  key: FilterOperators.notEmpty,
-  value: FilterOperators.notEmpty,
-  text: i18n.t('ListFilters.operators.notEmpty')
-}, {
-  key: FilterOperators.greaterThan,
-  value: FilterOperators.greaterThan,
-  text: i18n.t('ListFilters.operators.greaterThan')
-}, {
-  key: FilterOperators.lessThan,
-  value: FilterOperators.lessThan,
-  text: i18n.t('ListFilters.operators.lessThan')
-}];
-
 const ListFilters = (props: Props) => {
   /**
    * Returns the available operators for the passed filter type.
@@ -152,7 +152,7 @@ const ListFilters = (props: Props) => {
    */
   const getOperatorsByType = useCallback((type: string) => {
     const operators = OperatorsByType[type];
-    return _.filter(OperatorOptions, (option) => !operators || _.contains(operators, option.key));
+    return _.filter(FilterOperatorOptions, (option) => !operators || _.contains(operators, option.key));
   }, []);
 
   /**
@@ -400,5 +400,10 @@ export default ListFilters;
 
 export {
   FilterTypes,
-  FilterOperators
+  FilterOperators,
+  FilterOperatorOptions
+};
+
+export type {
+  Filter
 };

package/types/index.js.flow

@@ -96,4 +96,4 @@ export type { BatchEditProps } from './hooks/BatchEdit';
 // Constants
 export { Views as ItemViews } from './components/ItemsToggle';
 export { SORT_ASCENDING, SORT_DESCENDING } from './components/DataList';
-export { FilterTypes, FilterOperators } from './components/ListFilters';
+export { FilterTypes, FilterOperators, FilterOperatorOptions } from './components/ListFilters';