Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
fbd1719898
@ -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*/ };
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
});
|
Loading…
Reference in New Issue
Block a user