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

Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

Browse Source
This commit is contained in:
Andrey Savihin 2019-06-28 15:40:53 +03:00
commit 7911d0e3d8
30 changed files with 321 additions and 548 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/ASC.Web.Components/example/package.json
View File

@ -3,8 +3,8 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/core": "10.0.10",
"@emotion/styled": "10.0.11",
"@emotion/core": "10.0.14",
"@emotion/styled": "10.0.14",
"asc-web-components": "file:..",
"bootstrap": "^4.3.1",
"lodash": "4.17.11",
@ -15,7 +15,7 @@
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"reactstrap": "^8.0.0",
"styled-components": "^4.2.0"
"styled-components": "^4.3.2"
},
"scripts": {
"start": "start-storybook -p 6006 -s ./public",

2
web/ASC.Web.Components/example/stories/avatar/base/README.md
View File

@ -23,5 +23,5 @@ Required to display user avatar on page.
| `size` | `oneOf` | - | `max`, `big`, `medium`, `small` | `medium` | Tells what size avatar should be displayed |
| `role` | `oneOf` | - | `owner`, `admin`, `guest`, `user` | ` ` | Adds a user role table |
| `source` | `string` | - | - | ` ` | Avatar image source |
| `userName` | `string` | - | - | ` ` | If you want to generate an avatar with initials |
| `userName` | `string` | - | - | ` ` | If you want to create an avatar with initials. Only the first letter of the first two words of the line is used.|
| `editing` | `bool` | - | - | `false` | Displays avatar edit layer |

2
web/ASC.Web.Components/example/stories/avatar/base/avatar.stories.js → web/ASC.Web.Components/example/stories/avatar/base/base.avatar.stories.js
View File

@ -14,7 +14,7 @@ storiesOf('Components|Avatar', module)
.addDecorator(withReadme(Readme))
.add('base', () => {
const size = select('size', sizeOptions, 'max');
const editing = size === 'max' ? boolean('editing', false) : {};
const editing = size === 'max' ? boolean('editing', false) : false;
return (
<Section>

12
web/ASC.Web.Components/example/stories/buttons/base/README.md
View File

@ -8,7 +8,7 @@ import { Button } from 'asc-web-components';
#### Description
Base Button is used for a action on a page.
Button is used for a action on a page.
#### Usage
@ -20,8 +20,10 @@ Base Button is used for a action on a page.
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `isLoading` | `bool` | - | - | - | Tells when the button should show loader icon |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |

3
web/ASC.Web.Components/example/stories/buttons/base/base.button.stories.js
View File

@ -14,11 +14,12 @@ storiesOf('Components|Buttons', module)
.addDecorator(withReadme(Readme))
.add('base', () => (
<Section>
<Button
<Button
size={select('size', sizeOptions, 'base')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
isLoading={boolean('isLoading', false)}
label={text('label', 'Base button')}
/>
</Section>

27
web/ASC.Web.Components/example/stories/buttons/big/README.md
View File

@ -1,27 +0,0 @@
# Buttons: Button
## Usage
```js
import { Button } from 'asc-web-components';
```
#### Description
Big Button is used for a action on a page.
#### Usage
```js
<Button size='big' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |

25
web/ASC.Web.Components/example/stories/buttons/big/big.button.stories.js
View File

@ -1,25 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Button } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('big', () => (
<Section>
<Button
size={select('size', sizeOptions, 'big')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
label={text('label', 'Base button')}
/>
</Section>
));

27
web/ASC.Web.Components/example/stories/buttons/huge/README.md
View File

@ -1,27 +0,0 @@
# Buttons: Button
## Usage
```js
import { Button } from 'asc-web-components';
```
#### Description
Huge Button is used for a action on a page.
#### Usage
```js
<Button size='huge' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |

25
web/ASC.Web.Components/example/stories/buttons/huge/huge.button.stories.js
View File

@ -1,25 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Button } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('huge', () => (
<Section>
<Button
size={select('size', sizeOptions, 'huge')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
label={text('label', 'Base button')}
/>
</Section>
));

28
web/ASC.Web.Components/example/stories/buttons/middle/README.md
View File

@ -1,28 +0,0 @@
# Buttons: Button
## Usage
```js
import { Button } from 'asc-web-components';
```
#### Description
Middle Button is used for a action on a page.
#### Usage
```js
<Button size='middle' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |

25
web/ASC.Web.Components/example/stories/buttons/middle/middle.button.stories.js
View File

@ -1,25 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Button } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('middle', () => (
<Section>
<Button
size={select('size', sizeOptions, 'middle')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
label={text('label', 'Base button')}
/>
</Section>
));

28
web/ASC.Web.Components/example/stories/buttons/with-Loader/README.md
View File

@ -1,28 +0,0 @@
# Buttons: Button
## Usage
```js
import { Button } from 'asc-web-components';
```
#### Description
Middle Button is used for a action on a page.
#### Usage
```js
<Button size='middle' isDisabled={false} onClick={() => alert('Button clicked')} label="OK" />
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `primary` | `bool` | - | - | - | Tells when the button should be primary |
| `isDisabled` | `bool` | - | - | - | Tells when the button should present a disabled state |
| `onClick` | `func` | ✅ | - | - | What the button will trigger when clicked |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `huge` | `base` | Size of button |
| `label` | `string` | - | - | - | Button text |

26
web/ASC.Web.Components/example/stories/buttons/with-Loader/with-loader.button.stories.js
View File

@ -1,26 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
import withReadme from 'storybook-readme/with-readme';
import Readme from './README.md';
import { Button } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
const sizeOptions = ['base', 'middle', 'big', 'huge'];
storiesOf('Components|Buttons', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('with loader', () => (
<Section>
<Button
size={select('size', sizeOptions, 'base')}
primary={boolean('primary', true)}
isDisabled={boolean('isDisabled', false)}
onClick={action('clicked')}
isLoading={boolean('isLoading', true)}
label={text('label', 'Loading...')}
/>
</Section>
));

3
web/ASC.Web.Components/example/stories/drop-down/base/README.md
View File

@ -20,4 +20,5 @@ Is a dropdown with any number of action
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
| `opened` | `bool` | - | - | `false` | Tells when the dropdown should be opened |
| `opened` | `bool` | - | - | `false` | Tells when the dropdown should be opened |
| `direction` | `oneOf` | - | `left`, `right` | `left` | Sets the opening direction relative to the parent |

101
web/ASC.Web.Components/example/stories/forms/login/login.stories.js
View File

@ -1,15 +1,94 @@
import React from 'react';
import 'reactstrap';
import React, { useState } from 'react';
import { Collapse, Container, Row, Col } from 'reactstrap';
import { storiesOf } from '@storybook/react';
import { LoginForm } from 'asc-web-components';
import { TextInput, Button } from 'asc-web-components';
function onSubmit(e, credentials) {
console.log("onSubmit", e, credentials);
}
const LoginForm = props => {
const { loginPlaceholder, passwordPlaceholder, buttonText, onSubmit, errorText } = props;
const [login, setLogin] = useState('');
const [loginValid, setLoginValid] = useState(true);
const [password, setPassword] = useState('');
const [passwordValid, setPasswordValid] = useState(true);
const validateAndSubmit = (event) => {
if (!login.trim())
setLoginValid(false);
if (!password.trim())
setPasswordValid(false);
if (loginValid && passwordValid)
return onSubmit(event, { login, password });
return false;
};
return (
<Container>
<Row style={{ margin: "23px 0 0" }}>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<TextInput
id="login"
name="login"
hasError={!loginValid}
value={login}
placeholder={loginPlaceholder}
size='huge'
scale={true}
isAutoFocussed={true}
tabIndex={1}
onChange={event => {
setLogin(event.target.value);
setLoginValid(true);
}} />
</Col>
</Row>
<Row style={{ margin: "23px 0 0" }}>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<TextInput
id="password"
name="password"
type="password"
hasError={!passwordValid}
value={password}
placeholder={passwordPlaceholder}
size='huge'
scale={true}
tabIndex={2}
onChange={event => {
setPassword(event.target.value);
setPasswordValid(true);
}} />
</Col>
</Row>
<Row style={{ margin: "23px 0 0" }}>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<Button primary size='big' tabIndex={3} onClick={validateAndSubmit} label={buttonText} />
</Col>
</Row>
<Collapse isOpen={errorText}>
<Row>
<Col>
<span>{errorText}</span>
</Col>
</Row>
</Collapse>
</Container>
);
};
storiesOf('Components|Examples. Forms', module)
// To set a default viewport for all the stories for this component
.addParameters({ viewport: { defaultViewport: 'responsive' } })
.add('login', () => (
<LoginForm loginPlaceholder='You registration email' passwordPlaceholder='Password' buttonText='Sign In' onSubmit={onSubmit} />
));
// To set a default viewport for all the stories for this component
.addParameters({ viewport: { defaultViewport: 'responsive' } })
.add('login', () => {
const onSubmit = (e, credentials) => {
console.log("onSubmit", e, credentials);
};
return (
<LoginForm
loginPlaceholder='You registration email'
passwordPlaceholder='Password'
buttonText='Sign In'
onSubmit={onSubmit} />
)
});

32
web/ASC.Web.Components/example/stories/link/all/all.link.stories.js
View File

@ -28,64 +28,64 @@ storiesOf('Components|Link', module)
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "black" href="https://github.com" isBold = {true}>Bold black page link</Link>
<Link type = "page" color = "black" href="https://github.com" isBold = {true} text = 'Bold black page link' />
</Col>
<Col>
<Link type = "action" color = "black" isBold = {true}>Bold black action link</Link>
<Link type = "action" color = "black" isBold = {true} text = 'Bold black action link' />
</Col>
<Col><Link type = "action" color = "black" dropdownType = 'alwaysDotted'>Simple dropdown</Link></Col>
<Col><Link type = "action" color = "black" dropdownType = 'alwaysDotted' text = 'Simple dropdown' /></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "black" href="https://github.com">Black page link</Link>
<Link type = "page" color = "black" href="https://github.com" text = 'Black page link' />
</Col>
<Col>
<Link type = "action" color = "black">Black action link</Link>
<Link type = "action" color = "black" text = 'Black action link' />
</Col>
<Col> <Link type = "action" color = "gray" dropdownType = 'appearDottedAfterHover'>Gray dropdown and dotted appear after hover</Link></Col>
<Col> <Link type = "action" color = "gray" dropdownType = 'appearDottedAfterHover' text = 'Gray dropdown and dotted appear after hover' /></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "black" href="https://github.com" isHovered = {true}>Black hovered page link</Link>
<Link type = "page" color = "black" href="https://github.com" isHovered = {true} text = 'Black hovered page link' />
</Col>
<Col>
<Link type = "action" color = "black" isHovered = {true}>Black hovered action link</Link>
<Link type = "action" color = "black" isHovered = {true} text = 'Black hovered action link' />
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "gray" href="https://github.com">Gray page link</Link>
<Link type = "page" color = "gray" href="https://github.com" text = 'Gray page link' />
</Col>
<Col>
<Link type = "action" color = "gray">Gray action link</Link>
<Link type = "action" color = "gray" text = 'Gray action link' />
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "gray" href="https://github.com" isHovered = {true}>Gray hovered page link</Link>
<Link type = "page" color = "gray" href="https://github.com" isHovered = {true} text = 'Gray hovered page link' />
</Col>
<Col>
<Link type = "action" color = "gray" isHovered = {true}>Gray hovered action link</Link>
<Link type = "action" color = "gray" isHovered = {true} text = 'Gray hovered action link' />
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "blue" href="https://github.com">Blue page link</Link>
<Link type = "page" color = "blue" href="https://github.com" text = 'Blue page link' />
</Col>
<Col>
<Link type = "action" color = "blue">Blue action link</Link>
<Link type = "action" color = "blue" text = 'Blue action link' />
</Col>
<Col></Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type = "page" color = "blue" href="https://github.com" isHovered = {true}>Blue hovered page link</Link>
<Link type = "page" color = "blue" href="https://github.com" isHovered = {true} text = 'Blue hovered page link' />
</Col>
<Col>
<Link type = "action" color = "blue" isHovered = {true}>Blue hovered action link</Link>
<Link type = "action" color = "blue" isHovered = {true} text = 'Blue hovered action link' />
</Col>
<Col></Col>
</Row>

2
web/ASC.Web.Components/example/stories/link/base/README.md
View File

@ -32,6 +32,8 @@ It is a link with 2 types:
| `isTextOverflow` | `bool` | - | - | `true` |Activate or deactivate *text-overflow* CSS property with ellipsis (' … ') value |
| `isHovered` | `bool` | - | - | `false` | Show hovered state of link. Only for demo |
|
| `text` | `string` | - | - | - | Text of link |
|
#### Properties (only for \'action\' type of link)

5
web/ASC.Web.Components/example/stories/link/base/base.link.stories.js
View File

@ -33,12 +33,13 @@ return (
fontSize={number('fontSize', 12)}
href={text('href', undefined)}
isBold={boolean('isBold', false)}
title={text('title', '')}
title={text('title', undefined )}
target={select('target', target, '_top')}
isTextOverflow={boolean('isTextOverflow', false)}
isHovered={boolean('isHovered', false)}
text={text('text', 'Simple link')}
{...userProps}
>Simple link</Link>
/>
</Section>
);
});

14
web/ASC.Web.Components/example/stories/tree/tree-menu-node/base/index.stories.js
View File

@ -24,16 +24,15 @@ const TreeMenuStory = props => {
width: 8px;
`;
if (obj.expanded) {
return (<StyledTreeExpanderDownIcon size="small" color="dimgray"></StyledTreeExpanderDownIcon>);
return (<StyledTreeExpanderDownIcon size="small" isfill={true} color="dimgray"></StyledTreeExpanderDownIcon>);
} else {
return (<StyledTreeExpanderRightIcon size="small" color="dimgray"></StyledTreeExpanderRightIcon>);
return (<StyledTreeExpanderRightIcon size="small" isfill={true} color="dimgray"></StyledTreeExpanderRightIcon>);
}
};
const StyledPeopleIcon = styled(Icons.PeopleIcon)`
margin: 0px 3px 2px 0px;
`;
const sizeValue = select('size', ['small', 'middle', 'big'], 'middle');
return (
<div style={{width: "250px", margin: "20px"}}>
@ -47,11 +46,8 @@ const TreeMenuStory = props => {
switcherIcon={switcherIcon}
>
<TreeNode size="big" title="Parent" key="0-0" icon={<StyledPeopleIcon size="medium" color="dimgray"/>}>
<TreeNode title="Parent" key="0-0" icon={<StyledPeopleIcon size="medium" color="dimgray"/>}>
<TreeNode
size={sizeValue}
isUnderline={boolean('isUnderline', true)}
title="Child"
key="0-0-0"
></TreeNode>
@ -62,9 +58,9 @@ const TreeMenuStory = props => {
};
storiesOf('Components|Tree', module)
/*storiesOf('Components|Tree', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('Tree menu node', () => <TreeMenuStory />);
.add('Tree menu node', () => <TreeMenuStory />);*/

34
web/ASC.Web.Components/example/stories/tree/tree-menu/base/index.stories.js
View File

@ -9,11 +9,12 @@ import { Icons } from 'asc-web-components';
import { action } from '@storybook/addon-actions';
const treeData = [
{ key: '0-0', title: 'Groups', root: true, children:
{ key: '0-0', title: 'Departments', root: true, children:
[
{ key: '0-0-0', title: 'Administration', root: false},
{ key: '0-0-1', title: 'Promotion', root: false },
{ key: '0-0-2', title: 'Advertising', root: false }
{ key: '0-0-0', title: 'Development', root: false},
{ key: '0-0-1', title: 'Direction', root: false },
{ key: '0-0-2', title: 'Marketing', root: false },
{ key: '0-0-3', title: 'Support', root: false }
],
},
];
@ -94,16 +95,23 @@ const TreeMenuStory = props => {
setAutoExpandParent(false);
}
const StyledPeopleIcon = styled(Icons.PeopleIcon)`
const StyledCatalogDepartmentsIcon = styled(Icons.CatalogDepartmentsIcon)`
height: 16px;
width: 16px;
margin: 0px 3px 2px 0px;
`;
const StyledCatalogFolderIcon = styled(Icons.CatalogFolderIcon)`
height: 16px;
width: 16px;
margin: 0px 3px 2px 0px;
`;
const loop = data => {
return data.map((item) => {
if (item.children && item.children.length) {
return <TreeNode size="big" title={item.title} key={item.key} icon={item.root ? <StyledPeopleIcon size="medium" color="dimgray"/> : ''} >{loop(item.children)}</TreeNode>;
return <TreeNode size="big" title={item.title} key={item.key} icon={item.root ? <StyledCatalogDepartmentsIcon size="medium" isfill={true} color="dimgray"/> : ''} >{loop(item.children)}</TreeNode>;
}
return <TreeNode size="middle" key={item.key} title={item.title} ></TreeNode>;
return <TreeNode size="middle" key={item.key} title={item.title} icon={!item.root ? <StyledCatalogFolderIcon size="medium" isfill={true} color="dimgray"/> : ''} ></TreeNode>;
});
};
@ -112,19 +120,19 @@ const TreeMenuStory = props => {
return null;
}
const StyledTreeExpanderDownIcon = styled(Icons.ExpanderDownIcon)`
margin: 0px 0px 8px 5px;
margin: 0 0 0 5px;
height: 8px;
width: 8px;
`;
const StyledTreeExpanderRightIcon = styled(Icons.ExpanderRightIcon)`
margin: 0px 0px 8px 5px;
height: 8px;
margin: 0 0 2px 5px;
height: 8px;
width: 8px;
`;
if (obj.expanded) {
return <StyledTreeExpanderDownIcon size="small" color="dimgray"></StyledTreeExpanderDownIcon>
return <StyledTreeExpanderDownIcon size="small" isfill={true} color="dimgray"></StyledTreeExpanderDownIcon>
} else {
return <StyledTreeExpanderRightIcon size="small" color="dimgray"></StyledTreeExpanderRightIcon>
return <StyledTreeExpanderRightIcon size="small" isfill={true} color="dimgray"></StyledTreeExpanderRightIcon>
}
};
@ -132,7 +140,7 @@ const TreeMenuStory = props => {
<div style={{width: "250px", margin: "20px"}}>
<TreeMenu
checkable={boolean('checkable', false)}
draggable={boolean('draggable', true)}
draggable={boolean('draggable', false)}
disabled={boolean('disabled', false)}
multiple={boolean('multiple', false)}
showIcon={boolean('showIcon', true)}

6
web/ASC.Web.Components/package.json
View File

@ -24,8 +24,8 @@
"react-intl": "2.x"
},
"dependencies": {
"@emotion/core": "10.0.10",
"@emotion/styled": "10.0.11",
"@emotion/core": "10.0.14",
"@emotion/styled": "10.0.14",
"bootstrap": "^4.3.1",
"lodash": "4.17.11",
"lodash-es": "4.17.11",
@ -36,7 +36,7 @@
"react-lifecycles-compat": "^3.0.4",
"reactstrap": "^8.0.0",
"rollup-plugin-postcss": "^2.0.3",
"styled-components": "^4.2.0"
"styled-components": "^4.3.2"
},
"devDependencies": {
"@babel/core": "7.4.4",

4
web/ASC.Web.Components/src/components/avatar/index.js
View File

@ -125,7 +125,7 @@ const Avatar = props => {
};
const setNamedAvatar = userName => {
let initials = userName.split(/\s/).reduce((response,word)=> response+=word.slice(0,1),'').substring(0,3)
let initials = userName.split(/\s/).reduce((response,word)=> response+=word.slice(0,1),'').substring(0,2)
return (
<NamedAvatar {...props}>{initials}</NamedAvatar>
@ -141,7 +141,7 @@ const Avatar = props => {
</AvatarWrapper>
{editing && (size === 'max') &&
<EditContainer {...props}>
<Link type='action' isHovered={true}>{editLabel}</Link>
<Link type='action' isHovered={true} text={editLabel}/>
</EditContainer>}
<RoleWrapper {... props}>
{role === 'guest' && <Icons.GuestIcon size='scale' />}

11
web/ASC.Web.Components/src/components/drop-down/index.js
View File

@ -11,7 +11,8 @@ const StyledDropdown = styled.div`
position: absolute;
top: 100%;
left: 0;
${props => (props.direction === 'right' && css`right: 0px;`)}
${props => (props.direction === 'left' && css`left: 0px;`)}
z-index: 1000;
margin-top: 0px;
display: ${props => (props.isOpen || props.opened ? 'block' : 'none')};
@ -34,4 +35,12 @@ const DropDown = props => {
);
};
DropDown.propTypes = {
direction: PropTypes.oneOf(['left', 'right'])
};
DropDown.defaultProps = {
direction: 'left'
};
export default DropDown

100
web/ASC.Web.Components/src/components/forms/login/index.js
View File

@ -1,100 +0,0 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Collapse, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
import Button from '../../button';
import TextInput from '../../text-input';
const FormRow = styled(Row)`
margin: 23px 0 0;
`
const LoginForm = props => {
const {loginPlaceholder, passwordPlaceholder, buttonText, onSubmit, errorText} = props;
const [login, setLogin] = useState('');
const [loginValid, setLoginValid] = useState(true);
const [password, setPassword] = useState('');
const [passwordValid, setPasswordValid] = useState(true);
const validateAndSubmit = (event) => {
if (!login.trim())
setLoginValid(false);
if (!password.trim())
setPasswordValid(false);
if (loginValid && passwordValid)
return onSubmit(event, { login, password });
return false;
};
return (
<Container>
<FormRow>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<TextInput
id="login"
name="login"
hasError={!loginValid}
value={login}
placeholder={loginPlaceholder}
size='huge'
scale={true}
isAutoFocussed={true}
tabIndex={1}
onChange={event => {
setLogin(event.target.value);
setLoginValid(true);
}} />
</Col>
</FormRow>
<FormRow>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<TextInput
id="password"
name="password"
type="password"
hasError={!passwordValid}
value={password}
placeholder={passwordPlaceholder}
size='huge'
scale={true}
tabIndex={2}
onChange={event => {
setPassword(event.target.value);
setPasswordValid(true);
}} />
</Col>
</FormRow>
<FormRow>
<Col sm="12" md={{ size: 6, offset: 3 }}>
<Button primary size='big' tabIndex={3} onClick={validateAndSubmit}>{buttonText}</Button>
</Col>
</FormRow>
<Collapse isOpen={errorText}>
<Row>
<Col>
<span>{errorText}</span>
</Col>
</Row>
</Collapse>
</Container>
);
}
LoginForm.propTypes = {
loginPlaceholder: PropTypes.string.isRequired,
passwordPlaceholder: PropTypes.string.isRequired,
buttonText: PropTypes.string.isRequired,
errorText: PropTypes.string,
onSubmit: PropTypes.func.isRequired
}
LoginForm.defaultProps = {
login: '',
password: ''
}
export default LoginForm

3
web/ASC.Web.Components/src/components/icons/svg/gmail.react.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 1C0.895431 1 0 1.89543 0 3V12C0 13.1046 0.895431 14 2 14H14C15.1046 14 16 13.1046 16 12V3C16 1.89543 15.1046 1 14 1H2ZM14 11.9999H12V5.5L8 8.49999L4 5.5V11.9999H2V2.99994H4L8 5.99994L12 2.99994H14V11.9999Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 339 B

5
web/ASC.Web.Components/src/components/icons/svg/index.js
View File

@ -82,6 +82,7 @@ import OrigCatalogQuestionIcon from './catalog.question.react.svg';
import OrigArrowContentIcon from './arrow.content.react.svg';
import OrigPhoneIcon from './phone.react.svg';
import OrigMobileIcon from './mobile.react.svg';
import OrigGmailIcon from './gmail.react.svg';
export const PeopleIcon = createStyledIcon(
@ -416,3 +417,7 @@ export const MobileIcon = createStyledIcon(
OrigMobileIcon,
'MobileIcon'
);
export const GmailIcon = createStyledIcon(
OrigGmailIcon,
'GmailIcon'
);

5
web/ASC.Web.Components/src/components/link/index.js
View File

@ -2,6 +2,8 @@ import React from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
const SimpleLink = ({ rel, isBold, fontSize, isTextOverflow, isHovered, type, color, text, target, dropdownType, ...props }) => <a {...props}>{text}</a>;
const arrowDropdown = css`
border-left: 4px solid transparent;
border-right: 4px solid transparent;
@ -43,7 +45,7 @@ const dottedCss = css`
border-bottom: 1px dotted;
`;
const StyledLink = styled.a.attrs((props) => ({
const StyledLink = styled(SimpleLink).attrs((props) => ({
href: props.href,
target: props.target,
rel: props.target === '_blank' && 'noopener noreferrer',
@ -125,6 +127,7 @@ Link.propTypes = {
isTextOverflow: PropTypes.bool,
onClick: PropTypes.func,
target: PropTypes.oneOf(['_blank', '_self', '_parent', '_top']),
text: PropTypes.string,
title: PropTypes.string,
type: PropTypes.oneOf(['action', 'page'])
};

169
web/ASC.Web.Components/src/components/tree-menu-node/index.js
View File

File diff suppressed because one or more lines are too long

138
web/ASC.Web.Components/src/components/tree-menu/index.js
View File

File diff suppressed because one or more lines are too long

1
web/ASC.Web.Components/src/index.js
View File

@ -1,7 +1,6 @@
export { default as Button } from './components/button'
export { default as TextInput } from './components/text-input'
export { default as DateInput } from './components/date-input'
export { default as LoginForm } from './components/forms/login'
export { default as NavLogo } from './components/nav-logo'
export { default as NavMenu } from './components/nav-menu'
export { default as ModuleTile } from './components/module-tile'