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:
parent
858bb79d3a
commit
019ecd4d96
@ -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;
|
@ -36,7 +36,7 @@ const PeopleTable = (props) => {
|
||||
<PersonStatus
|
||||
handleStatusTooltip={handleStatusTooltip}
|
||||
person={person}
|
||||
toggled={orgUI.member_role_tooltip}
|
||||
toggledID={orgUI.member_role_tooltip}
|
||||
/>
|
||||
);
|
||||
|
||||
|
@ -39,7 +39,7 @@ const mapStateToProps = (state, {
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
handleToggle: () => dispatch(handleInviteToggle()),
|
||||
handleStatusTooltip: () => dispatch(handlePeopleStatusTooltip())
|
||||
handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id))
|
||||
});
|
||||
|
||||
module.exports = connect(
|
||||
|
@ -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
|
||||
}
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user