CDC #114 - IIIF Manifests

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,8 +12,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.1.4",
-    "@performant-software/shared-components": "^1.1.4",
+    "@performant-software/semantic-components": "^1.1.5",
+    "@performant-software/shared-components": "^1.1.5",
     "i18next": "^21.9.2",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/geospatial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "TODO: ADD",
   "license": "MIT",
   "main": "./build/index.js",

packages/semantic-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "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.1.4",
+    "@performant-software/shared-components": "^1.1.5",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

packages/semantic-ui/src/components/DataTableColumnSelector.js

@@ -144,9 +144,7 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
           {...this.props}
           className={`data-table-column-selector ${this.props.className}`}
           columns={this.state.columns}
-          renderListHeader={this.props.configurable
-            ? this.renderHeader.bind(this)
-            : undefined}
+          renderListHeader={this.renderHeader.bind(this)}
         />
       );
     }
@@ -157,45 +155,51 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
      * @returns {*}
      */
     renderHeader() {
+      if (!(this.props.configurable || this.props.renderListHeader)) {
+        return null;
+      }
+
       return (
         <>
           { this.props.renderListHeader && this.props.renderListHeader() }
-          <Dropdown
-            aria-label='Select Columns'
-            basic
-            button
-            icon='cog'
-            className='icon configure-button open-right'
-            closeOnBlur={false}
-          >
-            <Dropdown.Menu>
-              { this.state.columns
-                .filter((c) => c.label && c.label.length)
-                .map((c, index) => (
-                  <Draggable
-                    id={c.name}
-                    index={index}
-                    key={c.name}
-                    onDrag={this.onDrag.bind(this)}
-                  >
-                    <Dropdown.Item
-                      aria-dropeffect='move'
-                      onClick={(e) => e.stopPropagation()}
+          { this.props.configurable && (
+            <Dropdown
+              aria-label='Select Columns'
+              basic
+              button
+              icon='cog'
+              className='icon configure-button open-right'
+              closeOnBlur={false}
+            >
+              <Dropdown.Menu>
+                { this.state.columns
+                  .filter((c) => c.label && c.label.length)
+                  .map((c, index) => (
+                    <Draggable
+                      id={c.name}
+                      index={index}
+                      key={c.name}
+                      onDrag={this.onDrag.bind(this)}
                     >
-                      <Icon
-                        name='bars'
-                      />
-                      <Checkbox
-                        aria-label='Select Column'
-                        checked={!c.hidden}
-                        label={c.label}
-                        onClick={this.onColumnCheckbox.bind(this, c)}
-                      />
-                    </Dropdown.Item>
-                  </Draggable>
-                ))}
-            </Dropdown.Menu>
-          </Dropdown>
+                      <Dropdown.Item
+                        aria-dropeffect='move'
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Icon
+                          name='bars'
+                        />
+                        <Checkbox
+                          aria-label='Select Column'
+                          checked={!c.hidden}
+                          label={c.label}
+                          onClick={this.onColumnCheckbox.bind(this, c)}
+                        />
+                      </Dropdown.Item>
+                    </Draggable>
+                  ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
         </>
       );
     }

packages/semantic-ui/src/components/ItemsToggle.js

@@ -17,6 +17,7 @@ type Props = {
   defaultView?: number,
   hideToggle?: boolean,
   onSort?: (sortColumn: string, sortDirection?: ?string) => void,
+  renderListHeader?: () => JSX.Element,
   sort?: Array<Sort>,
   sortColor?: string,
   sortColumn?: string,
@@ -80,7 +81,7 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
      * @returns {boolean|*}
      */
     isHidden() {
-      return this.props.hideToggle && _.isEmpty(this.props.sort);
+      return this.props.hideToggle && _.isEmpty(this.props.sort) && !this.props.renderListHeader;
     }
 
     /**
@@ -110,14 +111,10 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
      * @returns {*}
      */
     render() {
-      const renderListHeader = this.isHidden()
-        ? undefined
-        : this.renderHeader.bind(this);
-
       return (
         <WrappedComponent
           {...this.props}
-          renderListHeader={renderListHeader}
+          renderListHeader={this.renderHeader.bind(this)}
           view={this.state.view}
         />
       );
@@ -139,6 +136,7 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
 
       return (
         <>
+          { this.props.renderListHeader && this.props.renderListHeader() }
           { !this.props.hideToggle && (
             <>
               <Button

packages/semantic-ui/src/components/List.js

@@ -197,6 +197,11 @@ type Props = {
    */
   renderSearch?: () => Element<any>,
 
+  /**
+   * Returns true if the renderSearch prop should be used to render a search input element.
+   */
+  searchable?: boolean,
+
   /**
    * If set to <code>true</code>, checkboxes will render as the first table column, allowing each row to be selectable.
    * The consuming component is responsible for tracking the selected items.
@@ -841,10 +846,15 @@ const useList = (WrappedComponent: ComponentType<any>) => (
         filters,
         perPageOptions,
         renderListHeader,
-        renderSearch
+        renderSearch,
+        searchable
       } = this.props;
 
-      if (filters || perPageOptions || renderListHeader || renderSearch) {
+      const hasFilters = filters && filters.component;
+      const hasSearch = searchable && renderSearch;
+      const headerContent = renderListHeader && renderListHeader();
+
+      if (hasFilters || perPageOptions || headerContent || hasSearch) {
         renderHeader = true;
       }
 
@@ -879,9 +889,9 @@ const useList = (WrappedComponent: ComponentType<any>) => (
                   secondary
                   className='flex-end-menu'
                 >
-                  { renderListHeader && (
+                  { headerContent && (
                     <Menu.Menu className='list-header-menu'>
-                      { renderListHeader() }
+                      { headerContent }
                     </Menu.Menu>
                   )}
                   <Menu.Menu>

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./build/index.js",

packages/storybook/src/semantic-ui/ItemList.stories.js

@@ -395,3 +395,49 @@ export const SortDescending = useDragDrop(() => (
     }]}
   />
 ));
+
+export const CustomListHeader = useDragDrop(() => (
+  <ItemList
+    actions={actions}
+    collectionName='items'
+    onCopy={action('copy')}
+    onLoad={(params) => Api.onLoad(_.extend(params, {
+      items,
+      perPage: number('Per page', 10)
+    }))}
+    hideToggle
+    onDelete={action('delete')}
+    onSave={action('save')}
+    renderDescription={(item) => item.vin}
+    renderExtra={(item) => item.address}
+    renderHeader={(item) => <Header content={item.model} />}
+    renderListHeader={() => (
+      <Button
+        icon='world'
+        onClick={action('custom-list-header')}
+      />
+    )}
+    renderMeta={(item) => item.make}
+    searchable={boolean('Searchable', true)}
+  />
+));
+
+export const NoListHeader = useDragDrop(() => (
+  <ItemList
+    actions={actions}
+    collectionName='items'
+    onCopy={action('copy')}
+    onLoad={(params) => Api.onLoad(_.extend(params, {
+      items,
+      perPage: number('Per page', 10)
+    }))}
+    hideToggle
+    onDelete={action('delete')}
+    onSave={action('save')}
+    renderDescription={(item) => item.vin}
+    renderExtra={(item) => item.address}
+    renderHeader={(item) => <Header content={item.model} />}
+    renderMeta={(item) => item.make}
+    searchable={false}
+  />
+));

packages/storybook/src/semantic-ui/ListTable.stories.js

@@ -611,4 +611,4 @@ export const NoColumnSelector = useDragDrop(() => (
     onSave={action('save')}
     searchable={boolean('Searchable', true)}
   />
-));
+));

packages/user-defined-fields/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/user-defined-fields",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -9,8 +9,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.1.4",
-    "@performant-software/shared-components": "^1.1.4",
+    "@performant-software/semantic-components": "^1.1.5",
+    "@performant-software/shared-components": "^1.1.5",
     "i18next": "^21.9.1",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/visualize",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A package of components used for data visualization",
   "license": "MIT",
   "main": "./build/index.js",

react-components.json

@@ -7,5 +7,5 @@
     "packages/user-defined-fields",
     "packages/visualize"
   ],
-  "version": "1.1.4"
-}
+  "version": "1.1.5"
+}