Web:Common:PageLayout: add catalog in readme and storybook
This commit is contained in:
parent
d37aa52f09
commit
a876ce8b67
@ -5,19 +5,23 @@ Default page layout
|
||||
### Usage
|
||||
|
||||
```js
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import PageLayout from '@appserver/common/components/PageLayout';
|
||||
```
|
||||
|
||||
```jsx
|
||||
<PageLayout withBodyScroll={true}>
|
||||
<PageLayout.ArticleHeader>{articleHeaderContent}</PageLayout.ArticleHeader>
|
||||
|
||||
<PageLayout.ArticleMainButton>
|
||||
{articleMainButtonContent}
|
||||
</PageLayout.ArticleMainButton>
|
||||
<PageLayout.ArticleMainButton>{articleMainButtonContent}</PageLayout.ArticleMainButton>
|
||||
|
||||
<PageLayout.ArticleBody>{articleBodyContent}</PageLayout.ArticleBody>
|
||||
|
||||
<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>
|
||||
@ -35,6 +39,9 @@ import PageLayout from "@appserver/common/components/PageLayout";
|
||||
| `articleHeaderContent` | `bool` | - | - | - | Article header content |
|
||||
| `articleMainButtonContent` | `bool` | - | - | - | Article main button content |
|
||||
| `articleBodyContent` | `bool` | - | - | - | Article body content |
|
||||
| `catalogHeaderContent` | `bool` | - | - | - | Article header content |
|
||||
| `catalogMainButtonContent` | `bool` | - | - | - | Article main button content |
|
||||
| `catalogBodyContent` | `bool` | - | - | - | Article body content |
|
||||
| `sectionHeaderContent` | `bool` | - | - | - | Section header content |
|
||||
| `sectionFilterContent` | `bool` | - | - | - | Section filter content |
|
||||
| `sectionBodyContent` | `bool` | - | - | - | Section body content |
|
||||
|
||||
@ -1,23 +1,24 @@
|
||||
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 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";
|
||||
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';
|
||||
const { authStore } = store;
|
||||
|
||||
const HeaderContent = styled.div`
|
||||
@ -31,61 +32,101 @@ const HeaderContent = styled.div`
|
||||
|
||||
const pageItems = [
|
||||
{
|
||||
key: "1",
|
||||
label: "1 of 2",
|
||||
onClick: (e) => action("set paging 1 of 2")(e),
|
||||
key: '1',
|
||||
label: '1 of 2',
|
||||
onClick: (e) => action('set paging 1 of 2')(e),
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
label: "2 of 2",
|
||||
onClick: (e) => action("set paging 2 of 2")(e),
|
||||
key: '2',
|
||||
label: '2 of 2',
|
||||
onClick: (e) => action('set paging 2 of 2')(e),
|
||||
},
|
||||
];
|
||||
|
||||
const perPageItems = [
|
||||
{
|
||||
key: "1-1",
|
||||
label: "25 per page",
|
||||
onClick: (e) => action("set paging 25 action")(e),
|
||||
key: '1-1',
|
||||
label: '25 per page',
|
||||
onClick: (e) => action('set paging 25 action')(e),
|
||||
},
|
||||
{
|
||||
key: "1-2",
|
||||
label: "50 per page",
|
||||
onClick: (e) => action("set paging 50 action")(e),
|
||||
key: '1-2',
|
||||
label: '50 per page',
|
||||
onClick: (e) => action('set paging 50 action')(e),
|
||||
},
|
||||
];
|
||||
|
||||
const articleHeaderContent = <Headline type="menu">Article Header</Headline>;
|
||||
|
||||
const catalogHeaderContent = <>Catalog Header</>;
|
||||
|
||||
const articleMainButtonContent = (
|
||||
<MainButton
|
||||
text="Actions"
|
||||
clickAction={(e) => action("MainButton Clicked")(e)}
|
||||
/>
|
||||
<MainButton text="Actions" clickAction={(e) => action('MainButton Clicked')(e)} />
|
||||
);
|
||||
|
||||
const catalogMainButtonContent = (
|
||||
<MainButton text="Actions" clickAction={(e) => action('MainButton Clicked')(e)} />
|
||||
);
|
||||
|
||||
const articleBodyContent = <p style={{ padding: 40 }}>Article Content</p>;
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
|
||||
const sectionHeaderContent = (
|
||||
<HeaderContent>
|
||||
<IconButton
|
||||
iconName={"ArrowPathIcon"}
|
||||
iconName={'ArrowPathIcon'}
|
||||
size="16"
|
||||
onClick={(e) => action("ArrowPathIcon Clicked")(e)}
|
||||
onClick={(e) => action('ArrowPathIcon Clicked')(e)}
|
||||
/>
|
||||
<Headline type="content">Section Header</Headline>
|
||||
<IconButton
|
||||
iconName={"static/images/actions.header.touch.react.svg"}
|
||||
iconName={'static/images/actions.header.touch.react.svg'}
|
||||
size="16"
|
||||
onClick={(e) => action("PlusIcon Clicked")(e)}
|
||||
onClick={(e) => action('PlusIcon Clicked')(e)}
|
||||
/>
|
||||
<ContextMenuButton
|
||||
title="Actions"
|
||||
getData={() => [
|
||||
{
|
||||
key: "key",
|
||||
label: "label",
|
||||
onClick: (e) => action("label Clicked")(e),
|
||||
key: 'key',
|
||||
label: 'label',
|
||||
onClick: (e) => action('label Clicked')(e),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -97,15 +138,15 @@ const sectionFilterContent = (
|
||||
isNeedFilter={true}
|
||||
getFilterData={() => [
|
||||
{
|
||||
key: "filter-example",
|
||||
group: "filter-example",
|
||||
label: "example group",
|
||||
key: 'filter-example',
|
||||
group: 'filter-example',
|
||||
label: 'example group',
|
||||
isHeader: true,
|
||||
},
|
||||
{
|
||||
key: "filter-example-test",
|
||||
group: "filter-example",
|
||||
label: "Test",
|
||||
key: 'filter-example-test',
|
||||
group: 'filter-example',
|
||||
label: 'Test',
|
||||
},
|
||||
]}
|
||||
onSearchClick={(result) => {
|
||||
@ -129,55 +170,70 @@ const sectionPagingContent = (
|
||||
selectedCountItem={perPageItems[0]}
|
||||
onSelectPage={(a) => console.log(a)}
|
||||
onSelectCount={(a) => console.log(a)}
|
||||
previousAction={(e) => action("Prev Clicked")(e)}
|
||||
nextAction={(e) => action("Next Clicked")(e)}
|
||||
previousAction={(e) => action('Prev Clicked')(e)}
|
||||
nextAction={(e) => action('Next Clicked')(e)}
|
||||
openDirection="top"
|
||||
/>
|
||||
);
|
||||
|
||||
storiesOf("Components|PageLayout", module)
|
||||
storiesOf('Components|PageLayout', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("base", () => (
|
||||
.add('base', () => (
|
||||
<MobxProvider auth={authStore}>
|
||||
<Router history={history}>
|
||||
<NavMenu
|
||||
isBackdropVisible={boolean("isBackdropVisible", false)}
|
||||
isNavHoverEnabled={boolean("isNavHoverEnabled", true)}
|
||||
isNavOpened={boolean("isNavOpened", false)}
|
||||
isAsideVisible={boolean("isAsideVisible", false)}
|
||||
isBackdropVisible={boolean('isBackdropVisible', false)}
|
||||
isNavHoverEnabled={boolean('isNavHoverEnabled', true)}
|
||||
isNavOpened={boolean('isNavOpened', false)}
|
||||
isAsideVisible={boolean('isAsideVisible', false)}
|
||||
/>
|
||||
<Main>
|
||||
<PageLayout withBodyScroll={true}>
|
||||
<PageLayout.ArticleHeader>
|
||||
{articleHeaderContent}
|
||||
</PageLayout.ArticleHeader>
|
||||
<PageLayout.ArticleHeader>{articleHeaderContent}</PageLayout.ArticleHeader>
|
||||
|
||||
<PageLayout.ArticleMainButton>
|
||||
{articleMainButtonContent}
|
||||
</PageLayout.ArticleMainButton>
|
||||
<PageLayout.ArticleMainButton>{articleMainButtonContent}</PageLayout.ArticleMainButton>
|
||||
|
||||
<PageLayout.ArticleBody>
|
||||
{articleBodyContent}
|
||||
</PageLayout.ArticleBody>
|
||||
<PageLayout.ArticleBody>{articleBodyContent}</PageLayout.ArticleBody>
|
||||
|
||||
<PageLayout.SectionHeader>
|
||||
{sectionHeaderContent}
|
||||
</PageLayout.SectionHeader>
|
||||
<PageLayout.SectionHeader>{sectionHeaderContent}</PageLayout.SectionHeader>
|
||||
|
||||
<PageLayout.SectionFilter>
|
||||
{sectionFilterContent}
|
||||
</PageLayout.SectionFilter>
|
||||
<PageLayout.SectionFilter>{sectionFilterContent}</PageLayout.SectionFilter>
|
||||
|
||||
<PageLayout.SectionBody>
|
||||
{sectionBodyContent}
|
||||
</PageLayout.SectionBody>
|
||||
<PageLayout.SectionBody>{sectionBodyContent}</PageLayout.SectionBody>
|
||||
|
||||
<PageLayout.SectionPaging>
|
||||
{sectionPagingContent}
|
||||
</PageLayout.SectionPaging>
|
||||
<PageLayout.SectionPaging>{sectionPagingContent}</PageLayout.SectionPaging>
|
||||
</PageLayout>
|
||||
</Main>
|
||||
</Router>
|
||||
</MobxProvider>
|
||||
));
|
||||
))
|
||||
.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>;
|
||||
});
|
||||
|
||||
@ -39,7 +39,6 @@ const HeaderNavigationIcon = ({
|
||||
...rest
|
||||
}) => {
|
||||
const color = active ? activeColor : baseColor;
|
||||
console.log(iconUrl);
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '20px', height: '20px', marginRight: '22px' }}>
|
||||
<StyledReactSVG src={iconUrl} href={url} onClick={onItemClick} {...rest} color={color} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user