2021-11-08 09:23:56 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
|
|
|
import { action } from '@storybook/addon-actions';
|
|
|
|
import styled from '@emotion/styled';
|
|
|
|
import NavMenu from '../NavMenu';
|
|
|
|
import Main from 'studio/Main';
|
|
|
|
import PageLayout from '.';
|
|
|
|
import history from '../../history';
|
|
|
|
import Headline from '../Headline';
|
|
|
|
import CatalogItem from '@appserver/components/catalog-item';
|
|
|
|
import store from '../../store';
|
|
|
|
import { Provider as MobxProvider } from 'mobx-react';
|
|
|
|
import IconButton from '@appserver/components/icon-button';
|
|
|
|
import ContextMenuButton from '@appserver/components/context-menu-button';
|
|
|
|
import MainButton from '@appserver/components/main-button';
|
|
|
|
import SearchInput from '@appserver/components/search-input';
|
|
|
|
import Paging from '@appserver/components/paging';
|
|
|
|
import withReadme from 'storybook-readme/with-readme';
|
|
|
|
import { boolean, withKnobs } from '@storybook/addon-knobs/react';
|
|
|
|
import Readme from './README.md';
|
|
|
|
import { Router } from 'react-router-dom';
|
2021-02-23 09:46:01 +00:00
|
|
|
const { authStore } = store;
|
2019-11-25 11:17:53 +00:00
|
|
|
|
|
|
|
const HeaderContent = styled.div`
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
& > * {
|
|
|
|
margin-right: 8px !important;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const pageItems = [
|
|
|
|
{
|
2021-11-08 09:23:56 +00:00
|
|
|
key: '1',
|
|
|
|
label: '1 of 2',
|
|
|
|
onClick: (e) => action('set paging 1 of 2')(e),
|
2019-11-25 11:17:53 +00:00
|
|
|
},
|
|
|
|
{
|
2021-11-08 09:23:56 +00:00
|
|
|
key: '2',
|
|
|
|
label: '2 of 2',
|
|
|
|
onClick: (e) => action('set paging 2 of 2')(e),
|
2020-10-16 12:38:04 +00:00
|
|
|
},
|
2019-11-25 11:17:53 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
const perPageItems = [
|
|
|
|
{
|
2021-11-08 09:23:56 +00:00
|
|
|
key: '1-1',
|
|
|
|
label: '25 per page',
|
|
|
|
onClick: (e) => action('set paging 25 action')(e),
|
2019-11-25 11:17:53 +00:00
|
|
|
},
|
|
|
|
{
|
2021-11-08 09:23:56 +00:00
|
|
|
key: '1-2',
|
|
|
|
label: '50 per page',
|
|
|
|
onClick: (e) => action('set paging 50 action')(e),
|
2020-10-16 12:38:04 +00:00
|
|
|
},
|
2019-11-25 11:17:53 +00:00
|
|
|
];
|
|
|
|
|
2019-12-20 11:35:53 +00:00
|
|
|
const articleHeaderContent = <Headline type="menu">Article Header</Headline>;
|
2019-11-25 11:17:53 +00:00
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
const catalogHeaderContent = <>Catalog Header</>;
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
const articleMainButtonContent = (
|
2021-11-08 09:23:56 +00:00
|
|
|
<MainButton text="Actions" clickAction={(e) => action('MainButton Clicked')(e)} />
|
|
|
|
);
|
|
|
|
|
|
|
|
const catalogMainButtonContent = (
|
|
|
|
<MainButton text="Actions" clickAction={(e) => action('MainButton Clicked')(e)} />
|
2020-10-16 12:38:04 +00:00
|
|
|
);
|
2019-11-25 11:17:53 +00:00
|
|
|
|
|
|
|
const articleBodyContent = <p style={{ padding: 40 }}>Article Content</p>;
|
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
const catalogBodyContent = (
|
|
|
|
<>
|
|
|
|
<CatalogItem
|
|
|
|
key={1}
|
|
|
|
id={1}
|
|
|
|
icon={'static/images/actions.header.touch.react.svg'}
|
|
|
|
showText={true}
|
|
|
|
text={'Test item'}
|
|
|
|
isActive={true}
|
|
|
|
onClick={() => {
|
|
|
|
console.log('click');
|
|
|
|
}}
|
|
|
|
isEndOfBlock={true}
|
|
|
|
showBadge={false}
|
|
|
|
labelBadge={false ? item.newItems : null}
|
|
|
|
onClickBadge={() => {
|
|
|
|
console.log('badge clicked');
|
|
|
|
}}></CatalogItem>
|
|
|
|
<CatalogItem
|
|
|
|
key={2}
|
|
|
|
id={2}
|
|
|
|
icon={'static/images/actions.header.touch.react.svg'}
|
|
|
|
showText={true}
|
|
|
|
text={'Test item'}
|
|
|
|
isActive={false}
|
|
|
|
onClick={() => {
|
|
|
|
console.log('click 2');
|
|
|
|
}}
|
|
|
|
isEndOfBlock={true}
|
|
|
|
showBadge={true}
|
|
|
|
labelBadge={false ? 2 : null}
|
|
|
|
onClickBadge={() => {
|
|
|
|
console.log('badge clicked');
|
|
|
|
}}></CatalogItem>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
const sectionHeaderContent = (
|
|
|
|
<HeaderContent>
|
|
|
|
<IconButton
|
2021-11-08 09:23:56 +00:00
|
|
|
iconName={'ArrowPathIcon'}
|
2020-10-16 12:38:04 +00:00
|
|
|
size="16"
|
2021-11-08 09:23:56 +00:00
|
|
|
onClick={(e) => action('ArrowPathIcon Clicked')(e)}
|
2020-10-16 12:38:04 +00:00
|
|
|
/>
|
|
|
|
<Headline type="content">Section Header</Headline>
|
|
|
|
<IconButton
|
2021-11-08 09:23:56 +00:00
|
|
|
iconName={'static/images/actions.header.touch.react.svg'}
|
2020-10-16 12:38:04 +00:00
|
|
|
size="16"
|
2021-11-08 09:23:56 +00:00
|
|
|
onClick={(e) => action('PlusIcon Clicked')(e)}
|
2020-10-16 12:38:04 +00:00
|
|
|
/>
|
|
|
|
<ContextMenuButton
|
|
|
|
title="Actions"
|
|
|
|
getData={() => [
|
|
|
|
{
|
2021-11-08 09:23:56 +00:00
|
|
|
key: 'key',
|
|
|
|
label: 'label',
|
|
|
|
onClick: (e) => action('label Clicked')(e),
|
2020-10-16 12:38:04 +00:00
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
</HeaderContent>
|
|
|
|
);
|
|
|
|
|
|
|
|
const sectionFilterContent = (
|
|
|
|
<SearchInput
|
|
|
|
isNeedFilter={true}
|
|
|
|
getFilterData={() => [
|
|
|
|
{
|
2021-11-08 09:23:56 +00:00
|
|
|
key: 'filter-example',
|
|
|
|
group: 'filter-example',
|
|
|
|
label: 'example group',
|
2020-10-16 12:38:04 +00:00
|
|
|
isHeader: true,
|
|
|
|
},
|
2019-11-25 11:17:53 +00:00
|
|
|
{
|
2021-11-08 09:23:56 +00:00
|
|
|
key: 'filter-example-test',
|
|
|
|
group: 'filter-example',
|
|
|
|
label: 'Test',
|
2020-10-16 12:38:04 +00:00
|
|
|
},
|
2019-11-25 11:17:53 +00:00
|
|
|
]}
|
2020-10-16 12:38:04 +00:00
|
|
|
onSearchClick={(result) => {
|
|
|
|
console.log(result);
|
|
|
|
}}
|
|
|
|
onChangeFilter={(result) => {
|
|
|
|
console.log(result);
|
|
|
|
}}
|
2019-11-25 11:17:53 +00:00
|
|
|
/>
|
2020-10-16 12:38:04 +00:00
|
|
|
);
|
2019-11-25 11:17:53 +00:00
|
|
|
|
|
|
|
const sectionBodyContent = <p style={{ padding: 40 }}>Section Content</p>;
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
const sectionPagingContent = (
|
|
|
|
<Paging
|
|
|
|
previousLabel="Previous"
|
|
|
|
nextLabel="Next"
|
|
|
|
pageItems={pageItems}
|
|
|
|
perPageItems={perPageItems}
|
|
|
|
selectedPageItem={pageItems[0]}
|
|
|
|
selectedCountItem={perPageItems[0]}
|
|
|
|
onSelectPage={(a) => console.log(a)}
|
|
|
|
onSelectCount={(a) => console.log(a)}
|
2021-11-08 09:23:56 +00:00
|
|
|
previousAction={(e) => action('Prev Clicked')(e)}
|
|
|
|
nextAction={(e) => action('Next Clicked')(e)}
|
2020-10-16 12:38:04 +00:00
|
|
|
openDirection="top"
|
|
|
|
/>
|
|
|
|
);
|
2019-11-25 11:17:53 +00:00
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
storiesOf('Components|PageLayout', module)
|
2019-11-25 11:17:53 +00:00
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.addDecorator(withReadme(Readme))
|
2021-11-08 09:23:56 +00:00
|
|
|
.add('base', () => (
|
2021-02-23 09:46:01 +00:00
|
|
|
<MobxProvider auth={authStore}>
|
|
|
|
<Router history={history}>
|
|
|
|
<NavMenu
|
2021-11-08 09:23:56 +00:00
|
|
|
isBackdropVisible={boolean('isBackdropVisible', false)}
|
|
|
|
isNavHoverEnabled={boolean('isNavHoverEnabled', true)}
|
|
|
|
isNavOpened={boolean('isNavOpened', false)}
|
|
|
|
isAsideVisible={boolean('isAsideVisible', false)}
|
2021-02-23 09:46:01 +00:00
|
|
|
/>
|
|
|
|
<Main>
|
|
|
|
<PageLayout withBodyScroll={true}>
|
2021-11-08 09:23:56 +00:00
|
|
|
<PageLayout.ArticleHeader>{articleHeaderContent}</PageLayout.ArticleHeader>
|
2021-02-23 09:46:01 +00:00
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
<PageLayout.ArticleMainButton>{articleMainButtonContent}</PageLayout.ArticleMainButton>
|
2021-02-23 09:46:01 +00:00
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
<PageLayout.ArticleBody>{articleBodyContent}</PageLayout.ArticleBody>
|
2021-02-23 09:46:01 +00:00
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
<PageLayout.SectionHeader>{sectionHeaderContent}</PageLayout.SectionHeader>
|
2021-02-23 09:46:01 +00:00
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
<PageLayout.SectionFilter>{sectionFilterContent}</PageLayout.SectionFilter>
|
2021-02-23 09:46:01 +00:00
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
<PageLayout.SectionBody>{sectionBodyContent}</PageLayout.SectionBody>
|
2021-02-23 09:46:01 +00:00
|
|
|
|
2021-11-08 09:23:56 +00:00
|
|
|
<PageLayout.SectionPaging>{sectionPagingContent}</PageLayout.SectionPaging>
|
2021-02-23 09:46:01 +00:00
|
|
|
</PageLayout>
|
|
|
|
</Main>
|
|
|
|
</Router>
|
|
|
|
</MobxProvider>
|
2021-11-08 09:23:56 +00:00
|
|
|
))
|
|
|
|
.add('catalog', () => {
|
|
|
|
<MobxProvider auth={authStore}>
|
|
|
|
<Router history={history}>
|
|
|
|
<NavMenu
|
|
|
|
isBackdropVisible={boolean('isBackdropVisible', false)}
|
|
|
|
isNavHoverEnabled={boolean('isNavHoverEnabled', true)}
|
|
|
|
isNavOpened={boolean('isNavOpened', false)}
|
|
|
|
isAsideVisible={boolean('isAsideVisible', false)}
|
|
|
|
/>
|
|
|
|
<Main>
|
|
|
|
<PageLayout withBodyScroll={true}>
|
|
|
|
<PageLayout.CatalogHeader>{catalogHeaderContent}</PageLayout.CatalogHeader>
|
|
|
|
|
|
|
|
<PageLayout.CatalogMainButton>{catalogMainButtonContent}</PageLayout.CatalogMainButton>
|
|
|
|
|
|
|
|
<PageLayout.CatalogBody>{catalogBodyContent}</PageLayout.CatalogBody>
|
|
|
|
|
|
|
|
<PageLayout.SectionHeader>{sectionHeaderContent}</PageLayout.SectionHeader>
|
|
|
|
|
|
|
|
<PageLayout.SectionFilter>{sectionFilterContent}</PageLayout.SectionFilter>
|
|
|
|
|
|
|
|
<PageLayout.SectionBody>{sectionBodyContent}</PageLayout.SectionBody>
|
|
|
|
|
|
|
|
<PageLayout.SectionPaging>{sectionPagingContent}</PageLayout.SectionPaging>
|
|
|
|
</PageLayout>
|
|
|
|
</Main>
|
|
|
|
</Router>
|
|
|
|
</MobxProvider>;
|
|
|
|
});
|