IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore

Browse Source
This commit is contained in:
Alexey Safronov 2019-07-29 17:25:43 +03:00
commit 32e52e597a
3 changed files with 47 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/ASC.Web.Components/src/components/paging/index.js
View File

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

10
web/ASC.Web.Storybook/stories/paging/base/README.md
View File

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

16
web/ASC.Web.Storybook/stories/paging/base/base.paging.stories.js
View File

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