Web: Fixed ContentRow component
This commit is contained in:
Ilya Oleshko
parent
824f88d5cc
commit
e9dfc9946e
@ -2,6 +2,9 @@ import React from 'react'
|
||||
import styled, { css } from 'styled-components'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import Avatar from '../avatar'
|
||||
import Checkbox from '../checkbox'
|
||||
import ContextMenuButton from '../context-menu-button'
|
||||
|
||||
const StyledContentRow = styled.div`
|
||||
font-family: Open Sans;
|
||||
@ -54,8 +57,6 @@ const StyledCheckbox = styled.div`
|
||||
flex-basis: 16px;
|
||||
display: flex;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 8px;
|
||||
`;
|
||||
|
||||
const StyledAvatar = styled.div`
|
||||
@ -69,22 +70,47 @@ const StyledOptionButton = styled.div`
|
||||
margin-left: 16px;
|
||||
`;
|
||||
|
||||
const ContentRow = props => {
|
||||
const { checkBox, avatar, contextButton, children } = props;
|
||||
return (
|
||||
<StyledContentRow {...props}>
|
||||
{checkBox && <StyledCheckbox>{checkBox}</StyledCheckbox>}
|
||||
{avatar && <StyledAvatar>{avatar}</StyledAvatar>}
|
||||
<StyledContent>{children}</StyledContent>
|
||||
{contextButton && <StyledOptionButton>{contextButton}</StyledOptionButton>}
|
||||
</StyledContentRow>
|
||||
);
|
||||
class ContentRow extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('contextmenu', this.handleContextMenu);
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('contextmenu', this.handleContextMenu);
|
||||
}
|
||||
|
||||
handleContextMenu = (event) => {
|
||||
|
||||
}
|
||||
|
||||
render () {
|
||||
const { checked, onSelect, avatarRole, avatarSource, avatarName, contextOptions, data, children } = this.props;
|
||||
|
||||
return (
|
||||
<StyledContentRow {...this.props}>
|
||||
{checked !== undefined &&
|
||||
<StyledCheckbox>
|
||||
<Checkbox id={avatarName} value={avatarName} isChecked={checked} onChange={onSelect} />
|
||||
</StyledCheckbox>
|
||||
}
|
||||
{(avatarRole !== '' || avatarSource !== '' || avatarName !== '') &&
|
||||
<StyledAvatar>
|
||||
<Avatar size='small' role={avatarRole || ''} source={avatarSource || ''} userName={avatarName || ''} />
|
||||
</StyledAvatar>
|
||||
}
|
||||
<StyledContent>{children}</StyledContent>
|
||||
{contextOptions &&
|
||||
<StyledOptionButton>
|
||||
<ContextMenuButton direction='right' getData={() => contextOptions} />
|
||||
</StyledOptionButton>
|
||||
}
|
||||
</StyledContentRow>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
ContentRow.propTypes = {
|
||||
checkBox: PropTypes.element,
|
||||
avatar: PropTypes.element,
|
||||
contextButton: PropTypes.element
|
||||
};
|
||||
|
||||
ContentRow.defaultProps = {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { BooleanValue } from 'react-values'
|
||||
import { ContentRow, Checkbox, Avatar, Link, ContextMenuButton } from 'asc-web-components';
|
||||
import { ContentRow, Link} from 'asc-web-components';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
|
||||
@ -211,66 +211,91 @@ const users = [
|
||||
}
|
||||
];
|
||||
|
||||
const peopleContent = (userName, department, phone, email, headDepartment, status) => {
|
||||
return(
|
||||
<Container fluid={true}>
|
||||
<Row className="justify-content-start no-gutters">
|
||||
<Col className="col-12 col-sm-12 col-lg-4 text-truncate">
|
||||
<Link style={status === 'pending' ? {color: '#A3A9AE'} : {color: '#333333'}} type='action' title={userName} text={userName} isBold={true} fontSize={15} onClick={()=> console.log('User name action')} />
|
||||
</Col>
|
||||
<Col className={`${headDepartment ? 'col-3': 'col-auto' } col-sm-auto col-lg-2 text-truncate`}>
|
||||
<Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}} type='action' isHovered title={headDepartment ? 'Head of department' : ''} text={headDepartment ? 'Head of department' : ''} onClick={() => console.log('Head of department action')} />
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{headDepartment && <span className="d-lg-none" style={{margin: '0 4px'}}>{department.title ? '|' : ''}</span>}
|
||||
<Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}} type='action' isHovered title={department.title} text={department.title} onClick={department.action} />
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{department.title && <span className="d-lg-none" style={{margin: '0 4px'}}>{phone.title ? '|' : ''}</span>}
|
||||
<Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}} type='action' title={phone.title} text={phone.title} onClick={phone.action} />
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{phone.title && <span className="d-lg-none" style={{margin: '0 4px'}}>{email.title ? '|' : ''}</span>}
|
||||
<Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}} type='action' isHovered title={email.title} text={email.title} onClick={email.action} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
)};
|
||||
|
||||
|
||||
storiesOf('EXAMPLES|ContentRow', module)
|
||||
.add('people row', () => {
|
||||
|
||||
const peopleContent = (userName, department, phone, email, headDepartment, status) => {
|
||||
return(
|
||||
<Container fluid={true}>
|
||||
<Row className="justify-content-start no-gutters">
|
||||
<Col className="col-12 col-sm-12 col-lg-4 text-truncate">
|
||||
<Link style={status === 'pending' ? {color: '#A3A9AE'} : {color: '#333333'}}
|
||||
type='action'
|
||||
title={userName}
|
||||
text={userName}
|
||||
isBold={true}
|
||||
fontSize={15}
|
||||
onClick={()=> console.log('User name action')} />
|
||||
</Col>
|
||||
<Col className={`${headDepartment ? 'col-3': 'col-auto' } col-sm-auto col-lg-2 text-truncate`}>
|
||||
<Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}}
|
||||
type='action'
|
||||
isHovered
|
||||
title={headDepartment ? 'Head of department' : ''}
|
||||
text={headDepartment ? 'Head of department' : ''}
|
||||
onClick={() => console.log('Head of department action')} />
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{headDepartment &&
|
||||
<span className="d-lg-none" style={{margin: '0 4px'}}>{department.title ? '|' : ''}</span>
|
||||
}
|
||||
<Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}}
|
||||
type='action'
|
||||
isHovered
|
||||
title={department.title}
|
||||
text={department.title}
|
||||
onClick={department.action} />
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{department.title &&
|
||||
<span className="d-lg-none" style={{margin: '0 4px'}}>{phone.title ? '|' : ''}</span>
|
||||
}
|
||||
<Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}}
|
||||
type='action'
|
||||
title={phone.title}
|
||||
text={phone.title}
|
||||
onClick={phone.action} />
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{phone.title &&
|
||||
<span className="d-lg-none" style={{margin: '0 4px'}}>{email.title ? '|' : ''}</span>
|
||||
}
|
||||
<Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}}
|
||||
type='action'
|
||||
isHovered
|
||||
title={email.title}
|
||||
text={email.title}
|
||||
onClick={email.action} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
)
|
||||
};
|
||||
|
||||
return(
|
||||
return (
|
||||
<Section>
|
||||
{users.map(user => {
|
||||
return (
|
||||
<ContentRow status={user.status}
|
||||
checkBox={
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox isChecked={value}
|
||||
onChange={e => {
|
||||
console.log('Item with id: '+ e.target.value + ' Checked!')
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
isDisabled={false}
|
||||
value={user.id}
|
||||
id={user.id} />)}
|
||||
</BooleanValue>
|
||||
}
|
||||
avatar={
|
||||
<Avatar size='small'
|
||||
role={user.role}
|
||||
source={user.avatar}
|
||||
userName={user.userName} />
|
||||
}
|
||||
contextButton={
|
||||
<ContextMenuButton direction='right'
|
||||
getData={() => user.contextOptions} />
|
||||
}
|
||||
>
|
||||
{peopleContent(user.userName, user.departments[0], user.phones[0], user.emails[0], user.isHead, user.status)}
|
||||
</ContentRow>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<ContentRow key={user.id}
|
||||
status={user.status}
|
||||
checked={value}
|
||||
data={user}
|
||||
onSelect={(e) => {
|
||||
toggle(e.target.checked);
|
||||
console.log(user, !value);
|
||||
}}
|
||||
avatarRole={user.role}
|
||||
avatarSource={user.avatar}
|
||||
avatarName={user.userName}
|
||||
contextOptions={user.contextOptions}>
|
||||
{peopleContent(user.userName, user.departments[0], user.phones[0], user.emails[0], user.isHead, user.status)}
|
||||
</ContentRow>
|
||||
)}
|
||||
</BooleanValue>
|
||||
);
|
||||
})}
|
||||
</Section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user