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

web: Components: Reworked Row.People component. Changed name to RowContent.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-08-20 16:08:07 +03:00
parent babcf26442
commit c8a020346e
7 changed files with 232 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
web/ASC.Web.Components/src/components/row-content/index.js Normal file
View File

@ -0,0 +1,135 @@
import React from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import device from '../device';
const truncateCss = css`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
const commonCss = css`
margin: 0 8px;
font-family: Open Sans;
font-size: 12px;
font-style: normal;
font-weight: 600;
`;
const RowContainer = styled.div`
width: 100%
display: inline-flex;
@media ${device.tablet} {
display: block;
}
`;
const MainContainerWrapper = styled.div`
${commonCss};
display: flex;
align-self: center;
margin-right: auto;
min-width: 140px;
@media ${device.tablet} {
min-width: 140px;
margin-right: 8px;
margin-top: 6px;
}
`;
const MainContainer = styled.div`
${truncateCss};
height: 20px;
margin-right: 8px;
`;
const MainIcons = styled.div`
align-self: center;
white-space: nowrap;
`;
const SideContainerWrapper = styled.div`
${truncateCss};
${commonCss};
align-self: center;
width: 160px;
color: ${props => props.color && props.color};
@media ${device.tablet} {
display: none;
}
`;
const TabletSideInfo = styled.div`
display: none;
@media ${device.tablet} {
display: block;
min-width: 160px;
margin: 0 8px;
color: ${props => props.color && props.color};
${commonCss};
${truncateCss};
}
`;
const getSideInfo = content => {
let info = '';
const lastIndex = content.length - 1;
content.map((element, index) => {
const delimiter = (index === lastIndex) ? '' : ' | ';
if (index > 1) {
info += (element.props && element.props.children)
? element.props.children + delimiter
: '';
}
});
return info;
};
const RowContent = props => {
//console.log("RowContent render");
const { children } = props;
const sideInfo = getSideInfo(children);
return (
<RowContainer>
<MainContainerWrapper>
<MainContainer>
{children[0]}
</MainContainer>
<MainIcons>
{children[1]}
</MainIcons>
</MainContainerWrapper>
{children.map((element, index) => {
if (index > 1) {
return (
<SideContainerWrapper key={'side-' + index} >
{element}
</SideContainerWrapper>
);
}
})}
<TabletSideInfo >
{sideInfo}
</TabletSideInfo>
</RowContainer>
)
};
RowContent.propTypes = {
children: PropTypes.node.isRequired
};
export default RowContent;

3
web/ASC.Web.Components/src/components/row/rows/index.js
View File

@ -1,3 +0,0 @@
import createPeople from './people';
export const People = createPeople();

215
web/ASC.Web.Components/src/components/row/rows/people.js
View File

@ -1,215 +0,0 @@
import React from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import device from '../../device';
import Link from '../../link';
import { Icons } from '../../icons';
export default function createPeople() {
const truncateCss = css`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
const commonCss = css`
margin: 0 8px;
font-family: Open Sans;
font-size: 12px;
font-style: normal;
font-weight: 600;
`;
const RowContainer = styled.div`
width: 100%
height: 50px;
display: inline-flex;
@media ${device.tablet} {
display: block;
}
`;
const NameWrapper = styled.div`
${commonCss};
display: flex;
align-self: center;
margin-right: auto;
min-width: 140px;
@media ${device.tablet} {
min-width: 140px;
margin-right: 8px;
margin-top: 6px;
}
`;
const Name = styled.div`
${truncateCss};
height: 20px;
margin-right: 8px;
`;
const StatusIcon = styled.div`
align-self: center;
`;
const DepartmentWrapper = styled.div`
${truncateCss};
${commonCss};
align-self: center;
width: 160px;
color: ${props => props.color && props.color};
@media ${device.tablet} {
display: none;
}
`;
const PhoneWrapper = styled.div`
${truncateCss};
${commonCss};
align-self: center;
width: 100px;
color: ${props => props.color && props.color};
@media ${device.tablet} {
display: none;
}
`;
const EmailWrapper = styled.div`
${truncateCss};
${commonCss};
align-self: center;
width: 160px;
color: ${props => props.color && props.color};
@media ${device.tablet} {
display: none;
}
`;
const TabletSideInfo = styled.div`
display: none;
@media ${device.tablet} {
display: block;
min-width: 160px;
margin: 0 8px;
color: ${props => props.color && props.color};
${commonCss};
${truncateCss};
}
`;
const PeopleRow = props => {
const { status, displayName, department, phone, email, onDisplayNameClick, onDepartmentClick, onPhoneClick, onEmailClick } = props;
const nameColor = status === 'pending' ? '#A3A9AE' : '#333333';
const sideInfoColor = status === 'pending' ? '#D0D5DA' : '#A3A9AE';
return (
<RowContainer>
<NameWrapper>
<Name>
{displayName && displayName !== '' &&
<Link
type='page'
title={displayName}
isBold={true}
fontSize={15}
color={nameColor}
onClick={onDisplayNameClick}
>
{displayName}
</Link>
}
</Name>
<StatusIcon>
{status === 'pending' &&
<Icons.SendClockIcon
size='small'
isfill={true}
color='#3B72A7'
/>
}
{status === 'disabled' &&
<Icons.CatalogSpamIcon
size='small'
isfill={true}
color='#3B72A7'
/>
}
</StatusIcon>
</NameWrapper>
<DepartmentWrapper>
{department && department !== '' &&
<Link
type='action'
title={department}
fontSize={12}
color={sideInfoColor}
onClick={onDepartmentClick}
>
{department}
</Link>
}
</DepartmentWrapper>
<PhoneWrapper color={sideInfoColor}>
{phone && phone !== '' &&
<Link
type='page'
title={email}
fontSize={12}
color={sideInfoColor}
onClick={onPhoneClick}
>
{phone}
</Link>
}
</PhoneWrapper>
<EmailWrapper color={sideInfoColor}>
{email && email !== '' &&
<Link
type='page'
title={email}
fontSize={12}
color={sideInfoColor}
onClick={onEmailClick}
>
{email}
</Link>
}
</EmailWrapper>
<TabletSideInfo color={sideInfoColor}>
{department && department !== '' && department + ' | '}
{phone && phone !== '' && phone + ' | '}
{email && email !== '' && email}
</TabletSideInfo>
</RowContainer>
)
};
PeopleRow.propTypes = {
status: PropTypes.string,
displayName: PropTypes.string,
department: PropTypes.string,
phone: PropTypes.string,
email: PropTypes.string,
onDisplayNameClick: PropTypes.func,
onDepartmentClick: PropTypes.func,
onPhoneClick: PropTypes.func,
onEmailClick: PropTypes.func
};
return PeopleRow;
}

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

@ -21,7 +21,7 @@ export { default as ModalDialog } from './components/modal-dialog'
export { default as Layout } from './components/layout'
export { default as PageLayout } from './components/page-layout'
export { default as NewPageLayout } from './components/page-layout/new'
export { default as ContentRow } from './components/content-row'
export { default as Row } from './components/row'
export { default as Badge } from './components/badge'
export { default as ErrorContainer } from './components/error-container'
export { default as InputBlock } from './components/input-block'
@ -47,4 +47,4 @@ export { default as Calendar } from './components/calendar'
export { default as Label} from './components/label'
export { default as EmptyScreenContainer} from './components/empty-screen-container'
export { default as CustomScrollbarsVirtualList } from './components/scrollbar/custom-scrollbars-virtual-list'
export { Row } from './components/row'
export { default as RowContent } from './components/row-content'

41
web/ASC.Web.Storybook/stories/row-content/base/README.md Normal file
View File

@ -0,0 +1,41 @@
# RowContent
## Usage
```js
import { RowContent } from 'asc-web-components';
```
#### Description
Required for formatted output of elements inside Row.
To correctly display components inside RowContent, you must specify them in a certain order.
The first and second specified components will be interpreted as Main elements.
First will be MainTitle and second MainIcons.
All subsequent components will be located on the right and are considered SideElements.
***Consider location of components in advance, since when viewing in tablet mode, the markup will shift SideElements to second line.***
#### Usage
```js
<RowContent>
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
<>
<Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />
<Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />
</>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
</RowContent>
```
#### Properties
| Props | Type | Required | Values | Default | Description |
| ---------------- | ---------- | :------: | ------ | ------- | --------------------------------------------------------- |
| `children` | `node` | ✅ | | ` ` | Components displayed inside RowContent |

54
web/ASC.Web.Storybook/stories/row-content/base/base.row-content.stories.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import withReadme from 'storybook-readme/with-readme'
import Readme from './README.md'
import { RowContent, Link, Icons } from 'asc-web-components';
storiesOf('Components|RowContent', module)
.addDecorator(withReadme(Readme))
.add('base', () => {
return (
<>
<RowContent>
<Link type='page' title='Demo' isBold={true} fontSize={15} color='#333333' >Demo</Link>
<>
<Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />
<Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />
</>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo@demo.com' fontSize={12} color='#A3A9AE' >demo@demo.com</Link>
</RowContent>
<RowContent>
<Link type='page' title='Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo</Link>
<>
<Icons.CatalogSpamIcon size='small' isfill={true} color='#3B72A7' />
</>
<></>
<Link type='action' title='Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo@demo.com</Link>
</RowContent>
<RowContent>
<Link type='page' title='Demo Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo Demo</Link>
<></>
<></>
<Link type='action' title='Demo Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo.demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo.demo@demo.com</Link>
</RowContent>
<RowContent>
<Link type='page' title='Demo Demo Demo Demo' isBold={true} fontSize={15} color='#333333' >Demo Demo Demo Demo</Link>
<>
<Icons.SendClockIcon size='small' isfill={true} color='#3B72A7' />
</>
<Link type='page' title='Demo' fontSize={12} color='#A3A9AE' >Demo</Link>
<Link type='action' title='Demo Demo Demo Demo' fontSize={12} color='#A3A9AE' >Demo Demo Demo Demo</Link>
<Link type='page' title='0 000 0000000' fontSize={12} color='#A3A9AE' >0 000 0000000</Link>
<Link type='page' title='demo.demo.demo.demo@demo.com' fontSize={12} color='#A3A9AE' >demo.demo.demo.demo@demo.com</Link>
</RowContent>
</>
);
});

47
web/ASC.Web.Storybook/stories/row/people/people-row.stories.js
View File

@ -1,47 +0,0 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
//import withReadme from 'storybook-readme/with-readme'
//import Readme from './README.md'
import { Row } from 'asc-web-components';
storiesOf('Components|Row', module)
//.addDecorator(withReadme(Readme))
.add('people', () => (
<>
<Row.People
displayName='Ashley Kinney'
department='Direction'
phone='+1 816 5792792'
email='amos2006@yahoo.com'
/>
<Row.People
status='pending'
displayName='Jesus Reddin'
phone='+1 231 7887107'
email='brock2008@gmail.com'
/>
<Row.People
status='disabled'
displayName='Daniel Michael Blake Day-Lewis'
phone='+1 804 3391052'
email='nestor.langwor@gmail.com'
/>
<Row.People
displayName='Mel Colm-Cille Gerard Gibson'
department='Dev, Lorem'
phone='+1 480 6038269'
email='jarrett.hil@hotmail.com'
/>
<Row.People
displayName='William Grant'
department='Managment'
phone='+1 253 8468015'
email='austyn_dar10@gmail.com'
/>
<Row.People
displayName='Adrian A Boyd'
phone='+1 510 3328530'
email='annetta.runolfsdott@yahoo.com'
/>
</>
));