81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faEyeSlash, faEye } from '@fortawesome/free-regular-svg-icons';
|
|
|
|
import messages from './Visibility.messages';
|
|
|
|
|
|
function Visibility({ to, intl }) {
|
|
const icon = to === 'private' ? faEyeSlash : faEye;
|
|
const label = to === 'private' ?
|
|
intl.formatMessage(messages['profile.visibility.who.just.me']) :
|
|
intl.formatMessage(messages['profile.visibility.who.everyone']);
|
|
|
|
return (
|
|
<span className="ml-auto small text-muted">
|
|
<FontAwesomeIcon icon={icon} /> {label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
Visibility.propTypes = {
|
|
to: PropTypes.oneOf(['private', 'all_users']),
|
|
|
|
// i18n
|
|
intl: intlShape.isRequired,
|
|
};
|
|
Visibility.defaultProps = {
|
|
to: 'private',
|
|
};
|
|
|
|
|
|
function VisibilitySelect({ intl, className, ...props }) {
|
|
const { value } = props;
|
|
const icon = value === 'private' ? faEyeSlash : faEye;
|
|
|
|
return (
|
|
<span className={className}>
|
|
<span className="d-inline-block ml-1 mr-2" style={{ width: '1.5rem' }}>
|
|
<FontAwesomeIcon icon={icon} />
|
|
</span>
|
|
<select className="d-inline-block w-auto form-control" {...props}>
|
|
<option key="private" value="private">
|
|
{intl.formatMessage(messages['profile.visibility.who.just.me'])}
|
|
</option>
|
|
<option key="all_users" value="all_users">
|
|
{intl.formatMessage(messages['profile.visibility.who.everyone'])}
|
|
</option>
|
|
</select>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
VisibilitySelect.propTypes = {
|
|
id: PropTypes.string,
|
|
className: PropTypes.string,
|
|
name: PropTypes.string,
|
|
value: PropTypes.oneOf(['private', 'all_users']),
|
|
onChange: PropTypes.func,
|
|
|
|
// i18n
|
|
intl: intlShape.isRequired,
|
|
};
|
|
VisibilitySelect.defaultProps = {
|
|
id: null,
|
|
className: null,
|
|
name: 'visibility',
|
|
value: null,
|
|
onChange: null,
|
|
};
|
|
|
|
const intlVisibility = injectIntl(Visibility);
|
|
const intlVisibilitySelect = injectIntl(VisibilitySelect);
|
|
|
|
|
|
export {
|
|
intlVisibility as Visibility,
|
|
intlVisibilitySelect as VisibilitySelect,
|
|
};
|