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

Web:Common:PageLayout: add catalog in readme and storybook

Browse Source
This commit is contained in:
Timofey Boyko 2021-11-08 17:23:56 +08:00
parent d37aa52f09
commit a876ce8b67
3 changed files with 146 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/asc-web-common/components/PageLayout/README.md
View File

@ -5,19 +5,23 @@ Default page layout
### Usage ### Usage
```js ```js
import PageLayout from "@appserver/common/components/PageLayout"; import PageLayout from '@appserver/common/components/PageLayout';
``` ```
```jsx ```jsx
<PageLayout withBodyScroll={true}> <PageLayout withBodyScroll={true}>
<PageLayout.ArticleHeader>{articleHeaderContent}</PageLayout.ArticleHeader> <PageLayout.ArticleHeader>{articleHeaderContent}</PageLayout.ArticleHeader>
<PageLayout.ArticleMainButton> <PageLayout.ArticleMainButton>{articleMainButtonContent}</PageLayout.ArticleMainButton>
{articleMainButtonContent}
</PageLayout.ArticleMainButton>
<PageLayout.ArticleBody>{articleBodyContent}</PageLayout.ArticleBody> <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.SectionHeader>{sectionHeaderContent}</PageLayout.SectionHeader>
<PageLayout.SectionFilter>{sectionFilterContent}</PageLayout.SectionFilter> <PageLayout.SectionFilter>{sectionFilterContent}</PageLayout.SectionFilter>
@ -35,6 +39,9 @@ import PageLayout from "@appserver/common/components/PageLayout";
| `articleHeaderContent` | `bool` | - | - | - | Article header content | | `articleHeaderContent` | `bool` | - | - | - | Article header content |
| `articleMainButtonContent` | `bool` | - | - | - | Article main button content | | `articleMainButtonContent` | `bool` | - | - | - | Article main button content |
| `articleBodyContent` | `bool` | - | - | - | Article body 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 | | `sectionHeaderContent` | `bool` | - | - | - | Section header content |
| `sectionFilterContent` | `bool` | - | - | - | Section filter content | | `sectionFilterContent` | `bool` | - | - | - | Section filter content |
| `sectionBodyContent` | `bool` | - | - | - | Section body content | | `sectionBodyContent` | `bool` | - | - | - | Section body content |

214
packages/asc-web-common/components/PageLayout/page-layout.stories.js
View File

@ -1,23 +1,24 @@
import React from "react"; import React from 'react';
import { storiesOf } from "@storybook/react"; import { storiesOf } from '@storybook/react';
import { action } from "@storybook/addon-actions"; import { action } from '@storybook/addon-actions';
import styled from "@emotion/styled"; import styled from '@emotion/styled';
import NavMenu from "../NavMenu"; import NavMenu from '../NavMenu';
import Main from "studio/Main"; import Main from 'studio/Main';
import PageLayout from "."; import PageLayout from '.';
import history from "../../history"; import history from '../../history';
import Headline from "../Headline"; import Headline from '../Headline';
import store from "../../store"; import CatalogItem from '@appserver/components/catalog-item';
import { Provider as MobxProvider } from "mobx-react"; import store from '../../store';
import IconButton from "@appserver/components/icon-button"; import { Provider as MobxProvider } from 'mobx-react';
import ContextMenuButton from "@appserver/components/context-menu-button"; import IconButton from '@appserver/components/icon-button';
import MainButton from "@appserver/components/main-button"; import ContextMenuButton from '@appserver/components/context-menu-button';
import SearchInput from "@appserver/components/search-input"; import MainButton from '@appserver/components/main-button';
import Paging from "@appserver/components/paging"; import SearchInput from '@appserver/components/search-input';
import withReadme from "storybook-readme/with-readme"; import Paging from '@appserver/components/paging';
import { boolean, withKnobs } from "@storybook/addon-knobs/react"; import withReadme from 'storybook-readme/with-readme';
import Readme from "./README.md"; import { boolean, withKnobs } from '@storybook/addon-knobs/react';
import { Router } from "react-router-dom"; import Readme from './README.md';
import { Router } from 'react-router-dom';
const { authStore } = store; const { authStore } = store;
const HeaderContent = styled.div` const HeaderContent = styled.div`
@ -31,61 +32,101 @@ const HeaderContent = styled.div`
const pageItems = [ const pageItems = [
{ {
key: "1", key: '1',
label: "1 of 2", label: '1 of 2',
onClick: (e) => action("set paging 1 of 2")(e), onClick: (e) => action('set paging 1 of 2')(e),
}, },
{ {
key: "2", key: '2',
label: "2 of 2", label: '2 of 2',
onClick: (e) => action("set paging 2 of 2")(e), onClick: (e) => action('set paging 2 of 2')(e),
}, },
]; ];
const perPageItems = [ const perPageItems = [
{ {
key: "1-1", key: '1-1',
label: "25 per page", label: '25 per page',
onClick: (e) => action("set paging 25 action")(e), onClick: (e) => action('set paging 25 action')(e),
}, },
{ {
key: "1-2", key: '1-2',
label: "50 per page", label: '50 per page',
onClick: (e) => action("set paging 50 action")(e), onClick: (e) => action('set paging 50 action')(e),
}, },
]; ];
const articleHeaderContent = <Headline type="menu">Article Header</Headline>; const articleHeaderContent = <Headline type="menu">Article Header</Headline>;
const catalogHeaderContent = <>Catalog Header</>;
const articleMainButtonContent = ( const articleMainButtonContent = (
<MainButton <MainButton text="Actions" clickAction={(e) => action('MainButton Clicked')(e)} />
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 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 = ( const sectionHeaderContent = (
<HeaderContent> <HeaderContent>
<IconButton <IconButton
iconName={"ArrowPathIcon"} iconName={'ArrowPathIcon'}
size="16" size="16"
onClick={(e) => action("ArrowPathIcon Clicked")(e)} onClick={(e) => action('ArrowPathIcon Clicked')(e)}
/> />
<Headline type="content">Section Header</Headline> <Headline type="content">Section Header</Headline>
<IconButton <IconButton
iconName={"static/images/actions.header.touch.react.svg"} iconName={'static/images/actions.header.touch.react.svg'}
size="16" size="16"
onClick={(e) => action("PlusIcon Clicked")(e)} onClick={(e) => action('PlusIcon Clicked')(e)}
/> />
<ContextMenuButton <ContextMenuButton
title="Actions" title="Actions"
getData={() => [ getData={() => [
{ {
key: "key", key: 'key',
label: "label", label: 'label',
onClick: (e) => action("label Clicked")(e), onClick: (e) => action('label Clicked')(e),
}, },
]} ]}
/> />
@ -97,15 +138,15 @@ const sectionFilterContent = (
isNeedFilter={true} isNeedFilter={true}
getFilterData={() => [ getFilterData={() => [
{ {
key: "filter-example", key: 'filter-example',
group: "filter-example", group: 'filter-example',
label: "example group", label: 'example group',
isHeader: true, isHeader: true,
}, },
{ {
key: "filter-example-test", key: 'filter-example-test',
group: "filter-example", group: 'filter-example',
label: "Test", label: 'Test',
}, },
]} ]}
onSearchClick={(result) => { onSearchClick={(result) => {
@ -129,55 +170,70 @@ const sectionPagingContent = (
selectedCountItem={perPageItems[0]} selectedCountItem={perPageItems[0]}
onSelectPage={(a) => console.log(a)} onSelectPage={(a) => console.log(a)}
onSelectCount={(a) => console.log(a)} onSelectCount={(a) => console.log(a)}
previousAction={(e) => action("Prev Clicked")(e)} previousAction={(e) => action('Prev Clicked')(e)}
nextAction={(e) => action("Next Clicked")(e)} nextAction={(e) => action('Next Clicked')(e)}
openDirection="top" openDirection="top"
/> />
); );
storiesOf("Components|PageLayout", module) storiesOf('Components|PageLayout', module)
.addDecorator(withKnobs) .addDecorator(withKnobs)
.addDecorator(withReadme(Readme)) .addDecorator(withReadme(Readme))
.add("base", () => ( .add('base', () => (
<MobxProvider auth={authStore}> <MobxProvider auth={authStore}>
<Router history={history}> <Router history={history}>
<NavMenu <NavMenu
isBackdropVisible={boolean("isBackdropVisible", false)} isBackdropVisible={boolean('isBackdropVisible', false)}
isNavHoverEnabled={boolean("isNavHoverEnabled", true)} isNavHoverEnabled={boolean('isNavHoverEnabled', true)}
isNavOpened={boolean("isNavOpened", false)} isNavOpened={boolean('isNavOpened', false)}
isAsideVisible={boolean("isAsideVisible", false)} isAsideVisible={boolean('isAsideVisible', false)}
/> />
<Main> <Main>
<PageLayout withBodyScroll={true}> <PageLayout withBodyScroll={true}>
<PageLayout.ArticleHeader> <PageLayout.ArticleHeader>{articleHeaderContent}</PageLayout.ArticleHeader>
{articleHeaderContent}
</PageLayout.ArticleHeader>
<PageLayout.ArticleMainButton> <PageLayout.ArticleMainButton>{articleMainButtonContent}</PageLayout.ArticleMainButton>
{articleMainButtonContent}
</PageLayout.ArticleMainButton>
<PageLayout.ArticleBody> <PageLayout.ArticleBody>{articleBodyContent}</PageLayout.ArticleBody>
{articleBodyContent}
</PageLayout.ArticleBody>
<PageLayout.SectionHeader> <PageLayout.SectionHeader>{sectionHeaderContent}</PageLayout.SectionHeader>
{sectionHeaderContent}
</PageLayout.SectionHeader>
<PageLayout.SectionFilter> <PageLayout.SectionFilter>{sectionFilterContent}</PageLayout.SectionFilter>
{sectionFilterContent}
</PageLayout.SectionFilter>
<PageLayout.SectionBody> <PageLayout.SectionBody>{sectionBodyContent}</PageLayout.SectionBody>
{sectionBodyContent}
</PageLayout.SectionBody>
<PageLayout.SectionPaging> <PageLayout.SectionPaging>{sectionPagingContent}</PageLayout.SectionPaging>
{sectionPagingContent}
</PageLayout.SectionPaging>
</PageLayout> </PageLayout>
</Main> </Main>
</Router> </Router>
</MobxProvider> </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>;
});

1
web/ASC.Web.Client/src/components/NavMenu/sub-components/header-navigation-icon.js
View File

@ -39,7 +39,6 @@ const HeaderNavigationIcon = ({
...rest ...rest
}) => { }) => {
const color = active ? activeColor : baseColor; const color = active ? activeColor : baseColor;
console.log(iconUrl);
return ( return (
<div style={{ position: 'relative', width: '20px', height: '20px', marginRight: '22px' }}> <div style={{ position: 'relative', width: '20px', height: '20px', marginRight: '22px' }}>
<StyledReactSVG src={iconUrl} href={url} onClick={onItemClick} {...rest} color={color} /> <StyledReactSVG src={iconUrl} href={url} onClick={onItemClick} {...rest} color={color} />