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

package/build/main.css

@@ -58,6 +58,61 @@
   margin-right: 25px;
 }
 
+.association-dropdown {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.association-dropdown .buttons {
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 0.1;
+}
+.association-dropdown .dropdown-container {
+  flex-grow: 1;
+}
+.association-dropdown .inline-dropdown {
+  width: 100%;
+}
+.association-dropdown .ui.search.selection.dropdown > input.search {
+  width: 100%;
+}
+.association-dropdown div[role="listbox"] div[role="option"] span.text {
+  display: block;
+}
+.association-dropdown div[role="alert"] {
+  max-width: 100%;
+}
+.ui.form.field .ui.input .association-dropdown input.dropdown-search-input {
+  width: 100%;
+}
+.ui.form .wide.field .ui.input .association-dropdown input.dropdown-search-input {
+  width: 100%;
+}
+.ui.dropdown:not(.button) > .default.text {
+  color: rgba(95, 95, 95, 0.86);
+}
+
+.date-input.ui.icon.input > i.icon.right {
+  cursor: pointer;
+  pointer-events: inherit;
+  left: auto;
+  right: 1px;
+}
+
+.fuzzy-date-modal .accuracy-container .ui.radio.checkbox {
+  padding-right: 10px;
+}
+.fuzzy-date-modal .button-container {
+  margin-left: 8px;
+  margin-top: 23px;
+}
+
+.filter-labels {
+  margin-top: 1em;
+}
+
 .header .flex-end-menu {
   justify-content: flex-end;
 }
@@ -65,6 +120,12 @@
 .header .per-page-menu {
   flex-shrink: 0;
 }
+.header .ui.grid.filter-labels > .row:first-child {
+  padding-bottom: 0px;
+}
+.header .ui.grid > .row:nth-child(2) {
+  padding-top: 0px;
+}
 
 .accordion-data-list {
   margin-bottom: 1em;
@@ -110,42 +171,6 @@
   padding-right: 15px;
 }
 
-.association-dropdown {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-}
-.association-dropdown .buttons {
-  display: flex;
-  flex-wrap: wrap;
-  flex-grow: 0.1;
-}
-.association-dropdown .dropdown-container {
-  flex-grow: 1;
-}
-.association-dropdown .inline-dropdown {
-  width: 100%;
-}
-.association-dropdown .ui.search.selection.dropdown > input.search {
-  width: 100%;
-}
-.association-dropdown div[role="listbox"] div[role="option"] span.text {
-  display: block;
-}
-.association-dropdown div[role="alert"] {
-  max-width: 100%;
-}
-.ui.form.field .ui.input .association-dropdown input.dropdown-search-input {
-  width: 100%;
-}
-.ui.form .wide.field .ui.input .association-dropdown input.dropdown-search-input {
-  width: 100%;
-}
-.ui.dropdown:not(.button) > .default.text {
-  color: rgba(95, 95, 95, 0.86);
-}
-
 .audio-player.ui.modal > .content > audio {
   width: 100%;
 }
@@ -252,13 +277,6 @@
   margin-top: 20px;
 }
 
-.date-input.ui.icon.input > i.icon.right {
-  cursor: pointer;
-  pointer-events: inherit;
-  left: auto;
-  right: 1px;
-}
-
 .react-calendar {
   width: 350px;
   max-width: 100%;
@@ -504,14 +522,6 @@ div.react-calendar {
   margin-bottom: 0;
 }
 
-.fuzzy-date-modal .accuracy-container .ui.radio.checkbox {
-  padding-right: 10px;
-}
-.fuzzy-date-modal .button-container {
-  margin-left: 8px;
-  margin-top: 23px;
-}
-
 .horizontal-cards .ui.cards {
   display: flex;
   flex-direction: row;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.10-beta.0",
+  "version": "1.0.10-beta.2",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.10-beta.0",
+    "@performant-software/shared-components": "^1.0.10-beta.2",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

package/src/components/DataList.js

@@ -51,7 +51,8 @@ type Props = {
     component: ComponentType<any>,
     defaults?: any,
     props?: any,
-    onChange?: (filter: any) => Promise<any>
+    onChange?: (filter: any) => Promise<any>,
+    showLabels?: boolean
   },
 
   /**
@@ -530,7 +531,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      */
     render() {
       const { filters = {} } = this.props;
-      const { component, props } = filters;
+      const { component, props, showLabels } = filters;
 
       return (
         <>
@@ -541,6 +542,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
               active: this.isFilterActive(),
               component,
               onChange: this.onFilterChange.bind(this),
+              showLabels,
               props: {
                 ...props,
                 onCreateFilter: this.onCreateFilter.bind(this),

package/src/components/FileUploadModal.js

@@ -28,6 +28,11 @@ type Props = {
    */
   closeOnComplete?: boolean,
 
+  /**
+   * Component to render at top of modal.
+   */
+  headerComponent?: ComponentType<any>,
+
   /**
    * Component to render within the modal.
    */
@@ -343,6 +348,13 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
     );
   }, [statuses, props.strategy]);
 
+  /**
+   * Memoization and case correction for the <code>headerComponent</code> prop.
+   *
+   * @type {React$AbstractComponent<*, *>}
+   */
+  const HeaderComponent = useMemo(() => props.headerComponent, [props.headerComponent]);
+
   /**
    * Memoization and case correction for the <code>itemComponent</code> prop.
    *
@@ -404,6 +416,13 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
             <FileUpload
               onFilesAdded={onAddFiles}
             />
+            { HeaderComponent && (
+              <HeaderComponent
+                items={items}
+                onSetItems={setItems}
+                uploading={uploading}
+              />
+            )}
             <Item.Group
               as={Form}
               divided

package/src/components/FilterLabels.css

@@ -0,0 +1,3 @@
+.filter-labels {
+  margin-top: 1em;
+}

package/src/components/FilterLabels.js

@@ -0,0 +1,64 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import { Button, Label } from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import { FilterOperatorOptions, type Filter } from './ListFilters';
+import './FilterLabels.css';
+
+type Props = {
+  filters: Array<Filter>,
+  onClear?: () => void,
+  onClick: (filter: Filter) => void
+};
+
+const FilterLabels = (props: Props) => {
+  /**
+   * Returns the content string for the passed filter.
+   *
+   * @type {function(*): string}
+   */
+  const getContent = useCallback((filter) => {
+    // Content will always container the label
+    const content = [filter.label];
+
+    // If an option can be found, use the text from the operator
+    const option = _.findWhere(FilterOperatorOptions, { key: filter.operator });
+    if (option) {
+      content.push(option.text);
+    }
+
+    // Append the value in quotes, if present
+    if (filter.value) {
+      content.push(`"${filter.value}"`);
+    }
+
+    return content.join(' ');
+  }, []);
+
+  return (
+    <Label.Group
+      className='filter-labels'
+    >
+      { _.map(props.filters, (filter) => (
+        <Label
+          basic
+          content={getContent(filter)}
+          onRemove={() => props.onClick(filter)}
+        />
+      ))}
+      { props.onClear && (
+        <Label
+          as={Button}
+          color='red'
+          content={i18n.t('FilterLabels.buttons.clear')}
+          icon='times'
+          onClick={props.onClear}
+        />
+      )}
+    </Label.Group>
+  );
+};
+
+export default FilterLabels;

package/src/components/List.css

@@ -6,3 +6,11 @@
 .header .per-page-menu {
   flex-shrink: 0;
 }
+
+.header .ui.grid.filter-labels > .row:first-child {
+  padding-bottom: 0px;
+}
+
+.header .ui.grid > .row:nth-child(2) {
+  padding-top: 0px;
+}

package/src/components/List.js

@@ -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/src/components/ListFilters.js

@@ -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/src/i18n/en.json

@@ -140,6 +140,11 @@
     "loader": "Uploading files...",
     "title": "Upload Files"
   },
+  "FilterLabels": {
+    "buttons": {
+      "clear": "Clear all"
+    }
+  },
   "FuzzyDate": {
     "accuracy": {
       "date": "Date",

package/src/index.js

@@ -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';

package/types/components/DataList.js.flow

@@ -51,7 +51,8 @@ type Props = {
     component: ComponentType<any>,
     defaults?: any,
     props?: any,
-    onChange?: (filter: any) => Promise<any>
+    onChange?: (filter: any) => Promise<any>,
+    showLabels?: boolean
   },
 
   /**
@@ -530,7 +531,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      */
     render() {
       const { filters = {} } = this.props;
-      const { component, props } = filters;
+      const { component, props, showLabels } = filters;
 
       return (
         <>
@@ -541,6 +542,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
               active: this.isFilterActive(),
               component,
               onChange: this.onFilterChange.bind(this),
+              showLabels,
               props: {
                 ...props,
                 onCreateFilter: this.onCreateFilter.bind(this),

package/types/components/FileUploadModal.js.flow

@@ -28,6 +28,11 @@ type Props = {
    */
   closeOnComplete?: boolean,
 
+  /**
+   * Component to render at top of modal.
+   */
+  headerComponent?: ComponentType<any>,
+
   /**
    * Component to render within the modal.
    */
@@ -343,6 +348,13 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
     );
   }, [statuses, props.strategy]);
 
+  /**
+   * Memoization and case correction for the <code>headerComponent</code> prop.
+   *
+   * @type {React$AbstractComponent<*, *>}
+   */
+  const HeaderComponent = useMemo(() => props.headerComponent, [props.headerComponent]);
+
   /**
    * Memoization and case correction for the <code>itemComponent</code> prop.
    *
@@ -404,6 +416,13 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
             <FileUpload
               onFilesAdded={onAddFiles}
             />
+            { HeaderComponent && (
+              <HeaderComponent
+                items={items}
+                onSetItems={setItems}
+                uploading={uploading}
+              />
+            )}
             <Item.Group
               as={Form}
               divided

package/types/components/FilterLabels.js.flow

@@ -0,0 +1,64 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import { Button, Label } from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import { FilterOperatorOptions, type Filter } from './ListFilters';
+import './FilterLabels.css';
+
+type Props = {
+  filters: Array<Filter>,
+  onClear?: () => void,
+  onClick: (filter: Filter) => void
+};
+
+const FilterLabels = (props: Props) => {
+  /**
+   * Returns the content string for the passed filter.
+   *
+   * @type {function(*): string}
+   */
+  const getContent = useCallback((filter) => {
+    // Content will always container the label
+    const content = [filter.label];
+
+    // If an option can be found, use the text from the operator
+    const option = _.findWhere(FilterOperatorOptions, { key: filter.operator });
+    if (option) {
+      content.push(option.text);
+    }
+
+    // Append the value in quotes, if present
+    if (filter.value) {
+      content.push(`"${filter.value}"`);
+    }
+
+    return content.join(' ');
+  }, []);
+
+  return (
+    <Label.Group
+      className='filter-labels'
+    >
+      { _.map(props.filters, (filter) => (
+        <Label
+          basic
+          content={getContent(filter)}
+          onRemove={() => props.onClick(filter)}
+        />
+      ))}
+      { props.onClear && (
+        <Label
+          as={Button}
+          color='red'
+          content={i18n.t('FilterLabels.buttons.clear')}
+          icon='times'
+          onClick={props.onClear}
+        />
+      )}
+    </Label.Group>
+  );
+};
+
+export default FilterLabels;