Skip to content

Commit

Permalink
Merge pull request #3817 from smcvey7/mcvey-23-12-23
Browse files Browse the repository at this point in the history
WV-90
  • Loading branch information
DaleMcGrew authored Jan 26, 2024
2 parents 382aa0f + e44ecb0 commit aec3ca6
Showing 1 changed file with 59 additions and 56 deletions.
115 changes: 59 additions & 56 deletions src/js/components/Widgets/FriendsOnlyIndicator.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import React from 'react';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Tooltip from 'react-bootstrap/Tooltip';
import { ReactSVG } from 'react-svg';
Expand All @@ -11,66 +11,69 @@ import normalizedImagePath from '../../common/utils/normalizedImagePath';
const groupIcon = '../../../img/global/svg-icons/group-icon.svg';
const publicIcon = '../../../img/global/svg-icons/public-icon.svg';

export default class FriendsOnlyIndicator extends Component {
constructor (props) {
super(props);
this.state = {};
}

render () {
renderLog('FriendsOnlyIndicator'); // Set LOG_RENDER_EVENTS to log all renders
let { isFriendsOnly } = this.props;
if (isFriendsOnly === undefined) {
isFriendsOnly = true;
}
export default function FriendsOnlyIndicator({ isFriendsOnly }){
renderLog('FriendsOnlyIndicator'); // Set LOG_RENDER_EVENTS to log all renders

let labelText = '';
let visibilityIcon = '';

let labelText = '';
let visibilityIcon = '';
if (isFriendsOnly) {
labelText = 'This is only visible to We Vote friends.';
visibilityIcon = (
<ReactSVG
src={normalizedImagePath(groupIcon)}
// beforeInjection={(svg) => svg.setAttribute('style',
// { backgroundColor: '#fff', borderRadius: '3px', fill: '#555', width: '16px', height: '16px', display: 'flex', verticalAlign: 'unset' })}
beforeInjection={(svg) => {
// Background color not working and needs to be fixed
// svg.setAttribute('backgroundColor', '#fff');
// svg.setAttribute('borderRadius', '3px');
svg.setAttribute('fill', '#555');
}}
alt="Visible to Friends Only"
/>
);
} else {
labelText = 'This is visible to the public.';
visibilityIcon = (
<ReactSVG
src={normalizedImagePath(publicIcon)}
// beforeInjection={(svg) => svg.setAttribute('style',
// { backgroundColor: '#fff', borderRadius: '3px', fill: '#555', width: '16px', height: '16px', display: 'flex', verticalAlign: 'unset' })}
beforeInjection={(svg) => {
// Background color not working and needs to be fixed
// svg.setAttribute('backgroundColor', '#fff');
// svg.setAttribute('borderRadius', '3px');
svg.setAttribute('fill', '#555');
}}
alt="Visible to Public"
/>
);
}
if (isFriendsOnly === undefined) {
isFriendsOnly = true;
}

const tooltip = isMobileScreenSize() ? (<span />) : (
<Tooltip id="tooltip">{labelText}</Tooltip>
if (isFriendsOnly) {
labelText = 'This is only visible to We Vote friends.';
visibilityIcon = (
<ReactSVG
src={normalizedImagePath(groupIcon)}
// beforeInjection={(svg) => svg.setAttribute('style',
// { backgroundColor: '#fff', borderRadius: '3px', fill: '#555', width: '16px', height: '16px', display: 'flex', verticalAlign: 'unset' })}
beforeInjection={(svg) => {
// Background color not working and needs to be fixed
// svg.setAttribute('backgroundColor', '#fff');
// svg.setAttribute('borderRadius', '3px');
svg.setAttribute('fill', '#555');
}}
alt="Visible to Friends Only"
/>
);

return (
<OverlayTrigger placement="top" overlay={tooltip}>
<PublicFriendsIndicator>{visibilityIcon}</PublicFriendsIndicator>
</OverlayTrigger>
} else {
labelText = 'This is visible to the public.';
visibilityIcon = (
<ReactSVG
src={normalizedImagePath(publicIcon)}
// beforeInjection={(svg) => svg.setAttribute('style',
// { backgroundColor: '#fff', borderRadius: '3px', fill: '#555', width: '16px', height: '16px', display: 'flex', verticalAlign: 'unset' })}
beforeInjection={(svg) => {
// Background color not working and needs to be fixed
// svg.setAttribute('backgroundColor', '#fff');
// svg.setAttribute('borderRadius', '3px');
svg.setAttribute('fill', '#555');
}}
alt="Visible to Public"
/>
);
}
}

const tooltip = isMobileScreenSize() ? (<span />) : (
<Tooltip id="tooltip">{labelText}</Tooltip>
);

const FriendsOnlyOverlayTrigger = React.forwardRef((props, ref) => (
<OverlayTrigger ref={ref} placement="top" overlay={tooltip}>
{props.children}
</OverlayTrigger>
));

return (
<FriendsOnlyOverlayTrigger>
<PublicFriendsIndicator>{visibilityIcon}</PublicFriendsIndicator>
</FriendsOnlyOverlayTrigger>
);

};

FriendsOnlyIndicator.propTypes = {
isFriendsOnly: PropTypes.bool,
};
Expand All @@ -80,4 +83,4 @@ const PublicFriendsIndicator = styled('span')`
display: inline-block;
margin-top: -5px;
height: 18px;
`;
`;

0 comments on commit aec3ca6

Please sign in to comment.