From da657554285000456f493fc10775b71f826a3320 Mon Sep 17 00:00:00 2001
From: Ilya Oleshko <oleshko.ilya@gmail.com>
Date: Mon, 29 Jul 2019 17:25:04 +0300
Subject: [PATCH] Web: Components: Added disabled property`s for paging
 component. Fixed Paging stories.

---
 .../src/components/paging/index.js            | 54 ++++++++++---------
 .../stories/paging/base/README.md             | 10 ++--
 .../paging/base/base.paging.stories.js        | 16 ++++--
 3 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/paging/index.js b/web/ASC.Web.Components/src/components/paging/index.js
index 483e3c4713..e23c811597 100644
--- a/web/ASC.Web.Components/src/components/paging/index.js
+++ b/web/ASC.Web.Components/src/components/paging/index.js
@@ -31,37 +31,41 @@ const StyledPage = styled.div`
 `;
 
 const Paging = props => {
-    //console.log("Paging render");
-    const {previousLabel, nextLabel, previousAction, nextAction, pageItems, perPageItems, openDirection} = props;
-    
-    return (
-        <StyledPaging>
-            {pageItems && 
-            <>
-                <Button size='medium' label={previousLabel} onClick={previousAction}/>
-                <StyledPage>
-                    <ComboBox directionY={openDirection} options={pageItems} />
-                </StyledPage>
-                <Button size='medium' label={nextLabel} onClick={nextAction}/>
-            </>
-            }
-            <StyledOnPage>
-                <ComboBox directionY={openDirection} options={perPageItems} />
-            </StyledOnPage>
-        </StyledPaging>
-    );
+  //console.log("Paging render");
+  const { previousLabel, nextLabel, previousAction, nextAction, pageItems, perPageItems, openDirection, disablePrevious, disableNext } = props;
+
+  return (
+    <StyledPaging>
+      <Button size='medium' label={previousLabel} onClick={previousAction} isDisabled={disablePrevious} />
+      {pageItems &&
+        <StyledPage>
+          <ComboBox directionY={openDirection} options={pageItems} />
+        </StyledPage>
+      }
+      <Button size='medium' label={nextLabel} onClick={nextAction} isDisabled={disableNext} />
+      {perPageItems && 
+      <StyledOnPage>
+        <ComboBox directionY={openDirection} options={perPageItems} />
+      </StyledOnPage>
+      }
+    </StyledPaging>
+  );
 };
 
 Paging.propTypes = {
-    previousAction: PropTypes.func,
-    nextAction: PropTypes.func,
-    previousLabel: PropTypes.string,
-    nextLabel: PropTypes.string
+  previousAction: PropTypes.func,
+  nextAction: PropTypes.func,
+  previousLabel: PropTypes.string,
+  nextLabel: PropTypes.string,
+  disablePrevious: PropTypes.bool,
+  disableNext: PropTypes.bool,
 }
 
 Paging.defaultProps = {
-    previousAction: () => console.log('Prev action'),
-    nextAction: () => console.log('Next action')
+  previousAction: () => console.log('Prev action'),
+  nextAction: () => console.log('Next action'),
+  disablePrevious: false,
+  disableNext: false
 }
 
 export default Paging;
\ No newline at end of file
diff --git a/web/ASC.Web.Storybook/stories/paging/base/README.md b/web/ASC.Web.Storybook/stories/paging/base/README.md
index 27a2443173..5bec225f00 100644
--- a/web/ASC.Web.Storybook/stories/paging/base/README.md
+++ b/web/ASC.Web.Storybook/stories/paging/base/README.md
@@ -16,10 +16,12 @@ import { Paging } from 'asc-web-components';
 
 | Props                  | Type              | Required | Values                       | Default | Description                                  |
 | ---------------------- | ----------------- | :------: | ---------------------------- | ------- | -------------------------------------------- |
-| `pageItems`            | `object`          |     -    | -                            | -       | Paging combo box items                       |
-| `perPageItems`         | `object`          |    ✅    | -                            | -       | Items per page combo box items               |
-| `previousLabel`        | `string`          |    -     | -                            | `Previous`| Label for previous button                    |
+| `pageItems`            | `array`           |    -     | -                            | -       | Paging combo box items                       |
+| `perPageItems`         | `array`           |    -     | -                            | -       | Items per page combo box items               |
+| `previousLabel`        | `string`          |    -     | -                            | `Previous`| Label for previous button                  |
 | `nextLabel`            | `string`          |    -     | -                            | `Next`  | Label for next button                        |
 | `previousAction`       | `function`        |    -     | -                            | -       | Action for previous button                   |
 | `nextAction`           | `function`        |    -     | -                            | -       | Action for next button                       |
-| `openDirection`        | `string`          |    -     | `top`, `bottom`              | `bottom`| Indicates opening direction of combo box     |
\ No newline at end of file
+| `openDirection`        | `string`          |    -     | `top`, `bottom`              | `bottom`| Indicates opening direction of combo box     |
+| `disablePrevious`      | `bool`            |    -     | -                            | `false` | Set previous button disabled                 |
+| `disableNext`          | `bool`            |    -     | -                            | `false` | Set next button disabled                     |
diff --git a/web/ASC.Web.Storybook/stories/paging/base/base.paging.stories.js b/web/ASC.Web.Storybook/stories/paging/base/base.paging.stories.js
index eb88b8cfdb..d069303b90 100644
--- a/web/ASC.Web.Storybook/stories/paging/base/base.paging.stories.js
+++ b/web/ASC.Web.Storybook/stories/paging/base/base.paging.stories.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
 import { Paging } from 'asc-web-components';
 import Section from '../../../.storybook/decorators/section';
+import { isUndefined } from 'util';
 
 storiesOf('Components|Paging', module)
+    .addDecorator(withKnobs)
     .addDecorator(withReadme(Readme))
     .add('base', () => {
 
@@ -54,13 +57,18 @@ storiesOf('Components|Paging', module)
                 onClick: () => console.log('set paging 100 action')
             }
         ];
+
+        const displayItems = boolean('Display pageItems', true);
+        const displayPerPage = boolean('Display perPageItems', true);
       
         return (
             <Section>
-                <Paging previousLabel='Previous' 
-                        nextLabel='Next' 
-                        pageItems={pageItems}
-                        perPageItems={perPageItems}
+                <Paging previousLabel={text('previousLabel', 'Previous')} 
+                        nextLabel={text('nextLabel', 'Next')} 
+                        pageItems={displayItems ? pageItems : undefined}
+                        perPageItems={displayPerPage ? perPageItems : undefined}
+                        disablePrevious={boolean('disablePrevious', false)}
+                        disableNext={boolean('disableNext', false)}
                         previousAction={ () => console.log('Prev')}
                         nextAction={ () => console.log('Next')}
                         openDirection='bottom'