@performant-software/semantic-components 1.1.5-beta.1 → 1.1.5

package/types/components/List.js.flow

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

package/types/components/ViewPDFButton.js.flow

@@ -0,0 +1,68 @@
+// @flow
+
+import React, { useMemo } from 'react';
+import { Icon, Button } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  basic?: boolean,
+  className?: string,
+  color?: string,
+  compact?: boolean,
+  primary?: boolean,
+  size?: string,
+  secondary?: boolean,
+  url: string,
+};
+
+const ViewPDFButton = (props: Props) => {
+  /**
+   * Sets the appropriate class names based on the formatting props.
+   *
+   * @type {string}
+   */
+  const className = useMemo(() => {
+    const classNames = ['ui', 'button'];
+
+    if (props.basic) {
+      classNames.push('basic');
+    }
+
+    if (props.className) {
+      classNames.push(...props.className.split(' '));
+    }
+
+    if (props.color) {
+      classNames.push(props.color);
+    }
+
+    if (props.compact) {
+      classNames.push('compact');
+    }
+
+    if (props.primary) {
+      classNames.push('primary');
+    }
+
+    if (props.secondary) {
+      classNames.push('secondary');
+    }
+
+    if (props.size) {
+      classNames.push(props.size);
+    }
+
+    return classNames.join(' ');
+  }, [props.basic, props.color]);
+
+  return (
+    <Button className={className} onClick={() => window.open(props.url, '_blank')}>
+      <Icon
+        name='file pdf'
+      />
+      {i18n.t('Common.buttons.pdf')}
+    </Button>
+  );
+};
+
+export default ViewPDFButton;

package/types/index.js.flow

@@ -99,6 +99,7 @@ export { default as Toaster } from './components/Toaster';
 export { default as VideoFrameSelector } from './components/VideoFrameSelector';
 export { default as VideoPlayer } from './components/VideoPlayer';
 export { default as VideoPlayerButton } from './components/VideoPlayerButton';
+export { default as ViewPDFButton } from './components/ViewPDFButton';
 export { default as ViewXML } from './components/ViewXML';
 
 // Context

package/webpack.config.js

@@ -10,6 +10,10 @@ module.exports = configure(__dirname, {
       './react-calendar/dist/Calendar.css$': path.resolve(
         __dirname,
         '../../node_modules/react-calendar/dist/Calendar.css'
+      ),
+      './rc-slider/assets/index.css$': path.resolve(
+        __dirname,
+        '../../node_modules/rc-slider/assets/index.css'
       )
     }
   },