1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

updating toggle to take person uuid instead of bool

This commit is contained in:
Alex Windett 2017-01-24 11:01:48 +00:00
parent 858bb79d3a
commit 019ecd4d96
4 changed files with 46 additions and 11 deletions

View File

@ -1,6 +1,7 @@
const React = require('react');
const Styled = require('styled-components');
const Tooltip = require('@ui/components/tooltip');
const fns = require('@ui/shared/functions');
const composers = require('@ui/shared/composers');
@ -35,23 +36,56 @@ const StyledWrapper = styled.div`
}
`;
const arrowPosition = {
bottom: '100%',
right: '10%'
};
const tooltipStyle = {
position: 'absolute',
top: 0,
'z-index': 1
};
const PlainButton = styled.button`
background: transparent;
font-size: inherit;
border: none;
z-index: 0;
font-family: inherit;
color: inherit;
`;
const tooltip = (person) => (
<Tooltip
arrowPosition={arrowPosition}
key={person.uuid}
style={tooltipStyle}
>
<li>Admin</li>
<li>Read Only</li>
<li>Unassigned</li>
</Tooltip>
);
const PersonStatus = (props) => {
const {
toggled,
toggledID,
person,
handleStatusTooltip
} = props;
const toggled = toggledID;
const handleClick = () => handleStatusTooltip(person.uuid);
return (
<StyledWrapper toggled={toggled}>
<a
onClick={handleStatusTooltip}
role="tooltip"
tabIndex="0"
>
<PlainButton onClick={handleClick} >
{person.status}
</a>
</PlainButton>
{toggledID === person.uuid ? tooltip(person) : null}
</StyledWrapper>
);
};
@ -59,7 +93,7 @@ const PersonStatus = (props) => {
PersonStatus.propTypes = {
handleStatusTooltip: React.PropTypes.func,
person: React.PropTypes.object,
toggled: React.PropTypes.bool,
toggledID: React.PropTypes.string,
};
module.exports = PersonStatus;

View File

@ -36,7 +36,7 @@ const PeopleTable = (props) => {
<PersonStatus
handleStatusTooltip={handleStatusTooltip}
person={person}
toggled={orgUI.member_role_tooltip}
toggledID={orgUI.member_role_tooltip}
/>
);

View File

@ -39,7 +39,7 @@ const mapStateToProps = (state, {
const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(handleInviteToggle()),
handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip())
handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id))
});
module.exports = connect(

View File

@ -26,7 +26,8 @@ module.exports = handleActions({
...state,
ui: {
...state.ui,
member_role_tooltip: !state.ui.member_role_tooltip
member_role_tooltip:
action.payload === state.ui.member_role_tooltip ? '' : action.payload
}
};
}