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-08-06 09:09:02 +03:00
commit fbd1719898
3 changed files with 39 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/ASC.Web.Components/src/components/tabs/index.js
View File

@ -1,32 +1,14 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Icons } from '../icons';
import { getCssFromSvg } from '../icons/get-css-from-svg';
import ReactDOMServer from 'react-dom/server';
var tabsIcon/*, tabsIcon2*/;
(function () { tabsIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.TabsIcon />)); }());
//tabsIcon2 = getCssFromSvg(ReactDOMServer.renderToString(<Icons.TabsIcon />));
// Основной контейнер
const TabsContainer = styled.div``;
// Шапка
const NavItem = styled.div`
position: relative;
box-shadow: 0px 5px 20px rgba(0,0,0,0.13);
white-space: nowrap;
`;
//Исправить!!!
const hoverCss = css`
width: 80px;
height: 32px;
background-color: #F8F9F9;
border-radius: 16px;
`;
// Заголовки шапки
const Label = styled.label`
margin:0;
min-width: 80px;
@ -37,18 +19,26 @@ const Label = styled.label`
label {margin:0}
${props => props.selected ?
`background-image: url("data:image/svg+xml,${tabsIcon}"); cursor: default; p {color: #fff}` :
`width: 80px;
height: 32px;
background-color: #265A8F;
border-radius: 16px;
cursor: default;
p {color: #fff}` :
`background-image: none;
&:hover{
cursor: pointer;
${hoverCss}
width: 80px;
height: 32px;
background-color: #F8F9F9;
border-radius: 16px;
}`
}
`;
// Контенn в зависимости от шапки
const BodyContainer = styled.div``;
const BodyContainer = styled.div`
margin: 24px 16px 0px 16px;
`;
class Tabs extends Component {
constructor(props) {
@ -61,12 +51,10 @@ class Tabs extends Component {
labelClick = (tab) => {
if (this.state.activeTab !== tab.id) {
this.setState({ activeTab: tab.id });
console.log('My update setState()');
}
};
render() {
//console.log(this.props.selected);
return (
<TabsContainer>
<NavItem>
@ -81,7 +69,7 @@ class Tabs extends Component {
</Label>
)}
</NavItem>
<BodyContainer> {this.props.children[this.state.activeTab].body} </BodyContainer>
<BodyContainer> {this.props.children[this.state.activeTab].content} </BodyContainer>
</TabsContainer>
);
}
@ -92,4 +80,4 @@ export default Tabs;
Tabs.propTypes = {
children: PropTypes.object
};
Tabs.defaultProps = {/*isChecked: false*/ };

15
web/ASC.Web.Storybook/stories/tabs/README.md
View File

@ -1,19 +1,24 @@
# Scrollbar
# Tabs
#### Description
Scrollbar is used for displaying custom scroollbar
Custom Tabs menu
#### Usage
```js
import { Scrollbar } from 'asc-web-components';
import { Tabs } from 'asc-web-components';
<Scrollbar>Some content</Scrollbar>
<Tabs>array objects</Tabs>
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ---------- | ----------- | :------: | ----------------------------------------- | ------------ | --------------------- |
| `stype` | `string` | | `smallWhite`, `smallBlack`, `preMediumBlack`, `mediumBlack` | `smallBlack` | Scroollbar style type |
| `id` | `string` | true | - | - | Index of object array
| `title` | `string` | true | - | - | Tabs title
| `content` | `object` | true | - | - | Content in Tab

40
web/ASC.Web.Storybook/stories/tabs/index.stories.js
View File

@ -1,21 +1,17 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import { action } from '@storybook/addon-actions';
import { withKnobs } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Tabs, Text } from 'asc-web-components';
import Section from '../../.storybook/decorators/section';
import { BooleanValue } from 'react-values';
//<Text.Body tag="span">{text("Body text", "Try again later")}</Text.Body>
const something_items = [
{
id: "0",
title: <Text.Body> Title1 </Text.Body>,
body:
content:
<div >
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
@ -25,7 +21,7 @@ const something_items = [
{
id: "1",
title: <Text.Body> Title2 </Text.Body>,
body:
content:
<div >
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
@ -35,7 +31,7 @@ const something_items = [
{
id: "2",
title: <Text.Body> Title3 </Text.Body>,
body:
content:
<div>
<div> <input></input> <input></input> <input></input> </div>
<div> <input></input> <input></input> <input></input> </div>
@ -45,7 +41,7 @@ const something_items = [
{
id: "3",
title: <Text.Body> Title4 </Text.Body>,
body:
content:
<div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
@ -55,7 +51,7 @@ const something_items = [
{
id: "4",
title: <Text.Body> Title5 </Text.Body>,
body:
content:
<div>
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
@ -63,28 +59,18 @@ const something_items = [
</div>
}
];
/*
const item = [{
id: "0",
something_title: <Text.Body>{text("Title text", "Title1")} </Text.Body>,
something_body:
<div >
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
</div>
}];
*/
storiesOf('Components|Tabs', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => {
return (
<BooleanValue>
<Tabs>
{something_items}
</Tabs>
</BooleanValue>
<Section>
<BooleanValue>
<Tabs>
{something_items}
</Tabs>
</BooleanValue>
</Section>
);
});