Merge pull request #1200 from swaterkamp/Pagination

Fix Pagination
greenbone · Mar 5, 2019 · 3d9b630 · 3d9b630
2 parents 77c46ac + 83f604f
commit 3d9b630
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/gsa/src/web/components/icon/restoreicon.js b/gsa/src/web/components/icon/restoreicon.js
@@ -20,9 +20,7 @@ import withSvgIcon from './withSvgIcon';
 
 import {ReactComponent as Icon} from './svg/restore.svg';
 
-const RestoreIcon = withSvgIcon({
-  active: true,
-})(Icon);
+const RestoreIcon = withSvgIcon()(Icon);
 
 export default RestoreIcon;
 

diff --git a/gsa/src/web/components/icon/svgicon.js b/gsa/src/web/components/icon/svgicon.js
@@ -46,12 +46,20 @@ const Styled = styled.span`
   }
 `;
 
-const SvgIcon = ({active = true, children, to, value, onClick, ...other}) => (
+const SvgIcon = ({
+  disabled = false,
+  active = !disabled,
+  children,
+  to,
+  value,
+  onClick,
+  ...other
+}) => (
   <Styled
     {...other}
     active={active}
     onClick={
-      isDefined(onClick)
+      isDefined(onClick) && !disabled
         ? event => {
             event.preventDefault();
             event.stopPropagation();

diff --git a/gsa/src/web/components/icon/testing.js b/gsa/src/web/components/icon/testing.js
@@ -21,6 +21,7 @@
 import React from 'react';
 
 import {render, fireEvent} from 'web/utils/testing';
+import Theme from 'web/utils/theme';
 
 import {ICON_SIZE_SMALL_PIXELS} from './withIconSize';
 
@@ -42,6 +43,23 @@ export const testIcon = Icon => {
 
     expect(handler).toHaveBeenCalledWith('1');
   });
+
+  test('should change appearance when disabled', () => {
+    const {element} = render(<Icon disabled={true} />);
+
+    expect(element).toHaveStyleRule('fill', Theme.inputBorderGray, {
+      modifier: '& svg path',
+    });
+  });
+
+  test('should not call clickhandler when disabled', () => {
+    const handler = jest.fn();
+    const {element} = render(<Icon disabled={true} onClick={handler} />);
+
+    fireEvent.click(element);
+
+    expect(handler).not.toHaveBeenCalled();
+  });
 };
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/gsa/src/web/components/pagination/pagination.js b/gsa/src/web/components/pagination/pagination.js
@@ -63,12 +63,12 @@ const Pagination = ({
     <PaginationLayout flex align={['end', 'center']}>
       <IconDivider>
         <FirstIcon
-          active={counts.hasPrevious()}
+          disabled={!counts.hasPrevious()}
           title={_('First')}
           onClick={onFirstClick}
         />
         <PreviousIcon
-          active={counts.hasPrevious()}
+          disabled={!counts.hasPrevious()}
           title={_('Previous')}
           onClick={onPreviousClick}
         />
@@ -78,12 +78,12 @@ const Pagination = ({
       </PaginationText>
       <IconDivider>
         <NextIcon
-          active={counts.hasNext()}
+          disabled={!counts.hasNext()}
           title={_('Next')}
           onClick={onNextClick}
         />
         <LastIcon
-          active={counts.hasNext()}
+          disabled={!counts.hasNext()}
           title={_('Last')}
           onClick={onLastClick}
         />