web: Components: Fixed structure of PeopleRow component on Row.People
This commit is contained in:
Ilya Oleshko
parent
b757ee5217
commit
0ad354b05f
@ -1,6 +1,6 @@
|
||||
import React, { useCallback } from "react";
|
||||
import { withRouter } from "react-router";
|
||||
import { PeopleRow } from "asc-web-components";
|
||||
import { Row } from "asc-web-components";
|
||||
import { connect } from "react-redux";
|
||||
import { getUserStatus } from "../../../../../store/people/selectors";
|
||||
|
||||
@ -34,7 +34,7 @@ const UserContent = ({user, history,settings }) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<PeopleRow
|
||||
<Row.People
|
||||
status={status}
|
||||
displayName={displayName}
|
||||
department={department}
|
||||
|
||||
1
web/ASC.Web.Components/src/components/row/index.js
Normal file
1
web/ASC.Web.Components/src/components/row/index.js
Normal file
@ -0,0 +1 @@
|
||||
export * as Row from './rows';
|
||||
@ -1,212 +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'
|
||||
|
||||
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
|
||||
};
|
||||
|
||||
export default PeopleRow;
|
||||
3
web/ASC.Web.Components/src/components/row/rows/index.js
Normal file
3
web/ASC.Web.Components/src/components/row/rows/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import createPeople from './people';
|
||||
|
||||
export const People = createPeople();
|
||||
215
web/ASC.Web.Components/src/components/row/rows/people.js
Normal file
215
web/ASC.Web.Components/src/components/row/rows/people.js
Normal file
@ -0,0 +1,215 @@
|
||||
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;
|
||||
}
|
||||
@ -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 { default as PeopleRow } from './components/row/people'
|
||||
export { Row } from './components/row'
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { ContentRow, PeopleRow } from 'asc-web-components';
|
||||
import { ContentRow, Row } from 'asc-web-components';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
|
||||
const users = [
|
||||
@ -128,7 +128,7 @@ storiesOf('EXAMPLES|ContentRow', module)
|
||||
avatarName={user.userName}
|
||||
contextOptions={user.contextOptions}
|
||||
>
|
||||
<PeopleRow
|
||||
<Row.People
|
||||
status={user.status}
|
||||
displayName={user.userName}
|
||||
department={user.department}
|
||||
|
||||
@ -1,44 +1,44 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
//import withReadme from 'storybook-readme/with-readme'
|
||||
//import Readme from './README.md'
|
||||
import { PeopleRow } from 'asc-web-components'
|
||||
import { Row } from 'asc-web-components';
|
||||
|
||||
storiesOf('Components|Row', module)
|
||||
//.addDecorator(withReadme(Readme))
|
||||
.add('people', () => (
|
||||
<>
|
||||
<PeopleRow
|
||||
<Row.People
|
||||
displayName='Ashley Kinney'
|
||||
department='Direction'
|
||||
phone='+1 816 5792792'
|
||||
email='amos2006@yahoo.com'
|
||||
/>
|
||||
<PeopleRow
|
||||
<Row.People
|
||||
status='pending'
|
||||
displayName='Jesus Reddin'
|
||||
phone='+1 231 7887107'
|
||||
email='brock2008@gmail.com'
|
||||
/>
|
||||
<PeopleRow
|
||||
<Row.People
|
||||
status='disabled'
|
||||
displayName='Daniel Michael Blake Day-Lewis'
|
||||
phone='+1 804 3391052'
|
||||
email='nestor.langwor@gmail.com'
|
||||
/>
|
||||
<PeopleRow
|
||||
<Row.People
|
||||
displayName='Mel Colm-Cille Gerard Gibson'
|
||||
department='Dev, Lorem'
|
||||
phone='+1 480 6038269'
|
||||
email='jarrett.hil@hotmail.com'
|
||||
/>
|
||||
<PeopleRow
|
||||
<Row.People
|
||||
displayName='William Grant'
|
||||
department='Managment'
|
||||
phone='+1 253 8468015'
|
||||
email='austyn_dar10@gmail.com'
|
||||
/>
|
||||
<PeopleRow
|
||||
<Row.People
|
||||
displayName='Adrian A Boyd'
|
||||
phone='+1 510 3328530'
|
||||
email='annetta.runolfsdott@yahoo.com'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user