implimenting toggle on person status and refactoring rendering of table components

This commit is contained in:
Alex Windett 2017-01-24 10:10:13 +00:00
parent 2e873796aa
commit acab4ed01a
8 changed files with 133 additions and 20 deletions

View File

@ -14,7 +14,6 @@ const buttonStyle = {
const People = (props) => { const People = (props) => {
const { const {
people = [],
orgUI = {}, orgUI = {},
handleToggle, handleToggle,
} = props; } = props;
@ -37,9 +36,7 @@ const People = (props) => {
<Row> <Row>
<Column xs={12}> <Column xs={12}>
<PeopleTable <PeopleTable {...props} />
people={people}
/>
</Column> </Column>
</Row> </Row>
</div> </div>
@ -49,7 +46,6 @@ const People = (props) => {
People.propTypes = { People.propTypes = {
handleToggle: React.PropTypes.func, handleToggle: React.PropTypes.func,
orgUI: React.PropTypes.object, orgUI: React.PropTypes.object,
people: React.PropTypes.array
}; };
module.exports = People; module.exports = People;

View File

@ -0,0 +1,18 @@
const React = require('react');
const PersonRole = (props) => {
const {
role
} = props;
return (
<span>{role}</span>
);
};
PersonRole.propTypes = {
role: React.PropTypes.string
};
module.exports = PersonRole;

View File

@ -0,0 +1,65 @@
const React = require('react');
const Styled = require('styled-components');
const fns = require('@ui/shared/functions');
const composers = require('@ui/shared/composers');
const {
pseudoEl
} = composers;
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
const borderSide = props => props.toggled
? 'bottom'
: 'top';
const StyledWrapper = styled.div`
position: relative;
&:after {
border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent;
border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({
top: '50%',
right: remcalc(10)
})}
}
`;
const PersonStatus = (props) => {
const {
toggled,
person,
handleStatusTooltip
} = props;
return (
<StyledWrapper toggled={toggled}>
<a
onClick={handleStatusTooltip}
role="tooltip"
tabIndex="0"
>
{person.status}
</a>
</StyledWrapper>
);
};
PersonStatus.propTypes = {
handleStatusTooltip: React.PropTypes.bool,
person: React.PropTypes.object,
toggled: React.PropTypes.bool,
};
module.exports = PersonStatus;

View File

@ -3,9 +3,16 @@ const React = require('react');
const Table = require('@ui/components/table-data-table'); const Table = require('@ui/components/table-data-table');
const Checkbox = require('@ui/components/checkbox'); const Checkbox = require('@ui/components/checkbox');
const PeopleTable = ({ const PersonStatus = require('./person-status');
people = [] const PersonRole = require('./person-role');
}) => {
const PeopleTable = (props) => {
const {
handleStatusTooltip,
people = [],
orgUI = {}
} = props;
const columns = [{ const columns = [{
title: <Checkbox />, title: <Checkbox />,
@ -24,13 +31,23 @@ const PeopleTable = ({
width: '10%' // Empty title for delete width: '10%' // Empty title for delete
}]; }];
const data = people.map( (person) => ({ const data = people.map( (person) => {
checkbox: <Checkbox />, const status = (person) => (
name: person.name, <PersonStatus
status: person.status, handleStatusTooltip={handleStatusTooltip}
role: person.role, person={person}
bin: '' toggled={orgUI.member_role_tooltip}
})); />
);
return {
checkbox: <Checkbox />,
name: person.name,
status: status(person),
role: <PersonRole role={person.role} />,
bin: ''
};
});
return ( return (
<Table <Table
@ -41,7 +58,9 @@ const PeopleTable = ({
}; };
PeopleTable.propTypes = { PeopleTable.propTypes = {
people: React.PropTypes.array handleStatusTooltip: React.PropTypes.bool,
orgUI: React.PropTypes.object,
people: React.PropTypes.array,
}; };
module.exports = PeopleTable; module.exports = PeopleTable;

View File

@ -16,7 +16,8 @@ const {
} = selectors; } = selectors;
const { const {
handleInviteToggle handleInviteToggle,
handlePeopleStatusTooltip
} = actions; } = actions;
const People = (props) => { const People = (props) => {
@ -37,7 +38,8 @@ const mapStateToProps = (state, {
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(handleInviteToggle()) handleToggle: () => dispatch(handleInviteToggle()),
handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip())
}); });
module.exports = connect( module.exports = connect(

View File

@ -199,6 +199,7 @@
"orgs": { "orgs": {
"ui": { "ui": {
"invite_toggled": true, "invite_toggled": true,
"member_role_tooltip": false,
"sections": [ "sections": [
"projects", "projects",
"people", "people",

View File

@ -16,5 +16,7 @@ module.exports = {
toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`), toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`), toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`), switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`) handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`),
handlePeopleStatusTooltip:
createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
}; };

View File

@ -7,7 +7,8 @@ const {
} = ReduxActions; } = ReduxActions;
const { const {
handleInviteToggle handleInviteToggle,
handlePeopleStatusTooltip
} = actions; } = actions;
module.exports = handleActions({ module.exports = handleActions({
@ -19,5 +20,14 @@ module.exports = handleActions({
invite_toggled: !state.ui.invite_toggled invite_toggled: !state.ui.invite_toggled
} }
}; };
},
[handlePeopleStatusTooltip.toString()]: (state, action) => {
return {
...state,
ui: {
...state.ui,
member_role_tooltip: !state.ui.member_role_tooltip
}
};
} }
}, {}); }, {});