{markdown && (
-
+
)}
{!markdown && content}
diff --git a/app/components/InfoOverlay/index.js b/app/components/InfoOverlay/index.js
index fd87e9af3..a5a8e7364 100644
--- a/app/components/InfoOverlay/index.js
+++ b/app/components/InfoOverlay/index.js
@@ -1,12 +1,13 @@
+/* eslint-disable react/no-children-prop */
/*
*
* InfoOverlay
*
*/
-
import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
+import rehypeExternalLinks from 'rehype-external-links';
import styled from 'styled-components';
import {
@@ -98,7 +99,11 @@ function InfoOverlay({
{markdown && (
-
+
)}
{!markdown && content}
diff --git a/app/components/ItemRole/index.js b/app/components/ItemRole/index.js
index 37b06dfe5..5be5bea87 100644
--- a/app/components/ItemRole/index.js
+++ b/app/components/ItemRole/index.js
@@ -2,12 +2,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import appMessage from 'utils/app-message';
+import { injectIntl } from 'react-intl';
import Label from 'components/styled/Label';
import { find } from 'lodash/collection';
import { USER_ROLES } from 'themes/config';
+
const Role = styled(Label)`
float: right;
padding-left: 1em;
@@ -19,7 +21,7 @@ const Role = styled(Label)`
class ItemRole extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
render() {
- const { intl } = this.context;
+ const { intl } = this.props;
const role = this.props.role && parseInt(this.props.role, 10) !== USER_ROLES.DEFAULT.value
&& find(USER_ROLES, { value: parseInt(this.props.role, 10) });
@@ -38,6 +40,7 @@ class ItemRole extends React.PureComponent { // eslint-disable-line react/prefer
ItemRole.propTypes = {
role: PropTypes.number,
+ intl: PropTypes.object.isRequired,
};
-export default ItemRole;
+export default injectIntl(ItemRole);
diff --git a/app/components/ItemStatus/index.js b/app/components/ItemStatus/index.js
index 1ba9c549c..bdee3fb51 100644
--- a/app/components/ItemStatus/index.js
+++ b/app/components/ItemStatus/index.js
@@ -2,6 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { palette } from 'styled-theme';
+import { injectIntl } from 'react-intl';
+
import Label from 'components/styled/Label';
import qe from 'utils/quasi-equals';
import appMessage from 'utils/app-message';
@@ -24,6 +26,7 @@ const Status = styled(Label)`
class ItemStatus extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
render() {
const {
+
draft, // deprecated
top,
float,
@@ -31,8 +34,9 @@ class ItemStatus extends React.PureComponent { // eslint-disable-line react/pref
attribute,
options,
value,
+ intl,
} = this.props;
- const { intl } = this.context;
+
if (draft) {
return (
@@ -63,10 +67,7 @@ ItemStatus.propTypes = {
value: PropTypes.string,
entity: PropTypes.object,
options: PropTypes.array,
+ intl: PropTypes.object.isRequired,
};
-ItemStatus.contextTypes = {
- intl: PropTypes.object,
-};
-
-export default ItemStatus;
+export default injectIntl(ItemStatus);
diff --git a/app/components/ItemSupport/index.js b/app/components/ItemSupport/index.js
index ce32fa187..acb6d1c01 100644
--- a/app/components/ItemSupport/index.js
+++ b/app/components/ItemSupport/index.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl } from 'react-intl';
import appMessage from 'utils/app-message';
@@ -30,7 +30,7 @@ class ItemSupport extends React.PureComponent { // eslint-disable-line react/pre
ItemSupport.propTypes = {
supportLevel: PropTypes.object,
- intl: intlShape,
+ intl: PropTypes.object.isRequired,
};
export default injectIntl(ItemSupport);
diff --git a/app/components/Messages/index.js b/app/components/Messages/index.js
index 697dc33cd..f2cca698c 100644
--- a/app/components/Messages/index.js
+++ b/app/components/Messages/index.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { palette } from 'styled-theme';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
import { reduce } from 'lodash/collection';
@@ -70,7 +70,7 @@ class Messages extends React.PureComponent { // eslint-disable-line react/prefer
null);
translateMessage = (message) => {
- const { intl } = this.context;
+ const { intl } = this.props;
if (message === SERVER_ERRORS.RECORD_OUTDATED) {
return intl && intl.formatMessage(appMessages.forms.outdatedError);
}
@@ -93,7 +93,7 @@ class Messages extends React.PureComponent { // eslint-disable-line react/prefer
return intl && intl.formatMessage(appMessages.forms.referenceRequiredError);
}
return message;
- }
+ };
render() {
const {
@@ -181,13 +181,11 @@ Messages.propTypes = {
preMessage: PropTypes.bool,
details: PropTypes.bool,
autoDismiss: PropTypes.number,
+ intl: PropTypes.object.isRequired,
};
Messages.defaultProps = {
preMessage: true,
};
-Messages.contextTypes = {
- intl: PropTypes.object,
-};
-export default Messages;
+export default injectIntl(Messages);
diff --git a/app/components/SelectReset/index.js b/app/components/SelectReset/index.js
index 026d4b61e..7d7f63f21 100644
--- a/app/components/SelectReset/index.js
+++ b/app/components/SelectReset/index.js
@@ -6,6 +6,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { find } from 'lodash/collection';
+import { injectIntl } from 'react-intl';
import styled from 'styled-components';
import { palette } from 'styled-theme';
@@ -42,7 +43,6 @@ const Select = styled.select`
}
@media print {
appearance: none;
- text-overflow: '';
text-indent: 0.01px; /* Removes default arrow from firefox */
text-overflow: ""; /* Removes default arrow from firefox */
font-size: ${(props) => props.theme.sizes.print.small};
@@ -83,8 +83,8 @@ export class SelectReset extends React.PureComponent { // eslint-disable-line re
index,
hidePrint,
labelScreenreaderOnly,
+ intl,
} = this.props;
- const { intl } = this.context;
const optionActive = find(options, (option) => option.value === value);
return (
@@ -143,10 +143,7 @@ SelectReset.propTypes = {
onChange: PropTypes.func,
isReset: PropTypes.bool,
hidePrint: PropTypes.bool,
-};
-
-SelectReset.contextTypes = {
intl: PropTypes.object.isRequired,
};
-export default SelectReset;
+export default injectIntl(SelectReset);
diff --git a/app/components/TagSearch/index.js b/app/components/TagSearch/index.js
index c320d7c2b..11d92446a 100644
--- a/app/components/TagSearch/index.js
+++ b/app/components/TagSearch/index.js
@@ -5,7 +5,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
import styled from 'styled-components';
import { palette } from 'styled-theme';
@@ -126,13 +126,13 @@ export class TagSearch extends React.Component { // eslint-disable-line react/pr
getLabels = (labels) => reduce(labels, (memo, label) => {
if (!label.label) return memo;
- let labelValue = label.appMessage ? appMessage(this.context.intl, label.label) : label.label;
+ let labelValue = label.appMessage ? appMessage(this.props.intl, label.label) : label.label;
labelValue = label.postfix ? `${labelValue}${label.postfix}` : labelValue;
return `${memo}${label.lowerCase ? lowerCase(labelValue) : labelValue} `;
}, '').trim();
getFilterLabel = (filter) => {
- const { intl } = this.context;
+ const { intl } = this.props;
// not used I think?
if (filter.message) {
return filter.messagePrefix
@@ -152,7 +152,7 @@ export class TagSearch extends React.Component { // eslint-disable-line react/pr
} else {
title = filter.title || this.getFilterLabel(filter);
}
- return this.context.intl.formatMessage(messages.removeTag, { title });
+ return this.props.intl.formatMessage(messages.removeTag, { title });
};
focusLastFilter = () => {
@@ -169,8 +169,8 @@ export class TagSearch extends React.Component { // eslint-disable-line react/pr
resultsId,
searchAttributes,
placeholderMessageId,
+ intl,
} = this.props;
- const { intl } = this.context;
const searchHasFilters = (searchQuery || filters.length > 0);
let inputPlaceholder;
if (placeholder) {
@@ -314,7 +314,7 @@ export class TagSearch extends React.Component { // eslint-disable-line react/pr
@@ -332,7 +332,7 @@ export class TagSearch extends React.Component { // eslint-disable-line react/pr
@@ -360,10 +360,7 @@ TagSearch.propTypes = {
onClear: PropTypes.func,
multiselect: PropTypes.bool,
focusOnMount: PropTypes.bool,
-};
-
-TagSearch.contextTypes = {
intl: PropTypes.object.isRequired,
};
-export default TagSearch;
+export default injectIntl(TagSearch);
diff --git a/app/components/buttons/ButtonCancel.js b/app/components/buttons/ButtonCancel.js
index eabd3a0f6..f9bda7ded 100644
--- a/app/components/buttons/ButtonCancel.js
+++ b/app/components/buttons/ButtonCancel.js
@@ -5,7 +5,7 @@ import ButtonForm from './ButtonForm';
const ButtonCancel = styled(ButtonForm)`
color: ${palette('buttonCancel', 0)};
- &:hover, &:hover {
+ &:hover {
color: ${palette('buttonCancelHover', 0)};
}
`;
diff --git a/app/components/buttons/ButtonDefaultWithIcon/index.js b/app/components/buttons/ButtonDefaultWithIcon/index.js
index 60a312ed7..2fe127617 100644
--- a/app/components/buttons/ButtonDefaultWithIcon/index.js
+++ b/app/components/buttons/ButtonDefaultWithIcon/index.js
@@ -51,10 +51,7 @@ const Word = styled.span`
return 'inline';
}};
}
- ${(props) => props.iconRight
- ? '&:after { content: " "; }'
- : '&:before { content: " "; }'
-}
+ ${(props) => props.iconRight ? '&::after { content: " "; }' : '&::before { content: " "; }'}
`;
class ButtonDefaultWithIcon extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
diff --git a/app/components/buttons/ButtonFactory/index.js b/app/components/buttons/ButtonFactory/index.js
index 6938df650..d7110c759 100644
--- a/app/components/buttons/ButtonFactory/index.js
+++ b/app/components/buttons/ButtonFactory/index.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import { useIntl } from 'react-intl';
import Icon from 'components/Icon';
import ScreenReaderHide from 'components/styled/ScreenReaderHide';
@@ -15,7 +15,8 @@ import ButtonDefaultIconOnly from '../ButtonDefaultIconOnly';
import ButtonFlatIconOnly from '../ButtonFlatIconOnly';
import Bookmarker from '../../../containers/Bookmarker';
-const ButtonFactory = ({ button, intl }) => {
+const ButtonFactory = ({ button }) => {
+ const intl = useIntl();
let { title } = button;
switch (button.type) {
case 'primary':
@@ -172,7 +173,6 @@ const ButtonFactory = ({ button, intl }) => {
ButtonFactory.propTypes = {
button: PropTypes.object.isRequired,
- intl: intlShape.isRequired,
};
-export default injectIntl(ButtonFactory);
+export default ButtonFactory;
diff --git a/app/components/buttons/ButtonTagCategory/index.js b/app/components/buttons/ButtonTagCategory/index.js
index b1d6a8cd2..29d637233 100644
--- a/app/components/buttons/ButtonTagCategory/index.js
+++ b/app/components/buttons/ButtonTagCategory/index.js
@@ -22,7 +22,7 @@ const getColor = (props, isHover = false) => {
// eslint-disable no-nested-ternary
const ButtonTagCategory = styled(Button)`
- color: ${(props) => palette('taxonomiesTextColor', props.taxId)}};
+ color: ${(props) => palette('taxonomiesTextColor', props.taxId)};
background-color: ${(props) => getColor(props)};
margin-right: 2px;
border-radius: ${(props) => props.isSmartTag ? 9999 : 3}px;
@@ -31,7 +31,7 @@ const ButtonTagCategory = styled(Button)`
cursor:${(props) => props.disabled ? 'default' : 'pointer'};
border: 1px solid ${(props) => getColor(props)};
&:hover, &:focus-visible {
- color: ${(props) => palette('taxonomiesTextColor', props.taxId)}};
+ color: ${(props) => palette('taxonomiesTextColor', props.taxId)};
background-color: ${(props) => getColor(props, true)};
border-color: ${(props) => getColor(props, true)};
}
diff --git a/app/components/buttons/ButtonTagCategoryInverse/index.js b/app/components/buttons/ButtonTagCategoryInverse/index.js
index 5f5c4dba9..954a46f3e 100644
--- a/app/components/buttons/ButtonTagCategoryInverse/index.js
+++ b/app/components/buttons/ButtonTagCategoryInverse/index.js
@@ -51,6 +51,7 @@ const ButtonTagCategoryInverse = styled(Button)`
: palette('taxonomiesHover', props.taxId || 0)
};
}
+ }
`;
export default ButtonTagCategoryInverse;
diff --git a/app/components/categoryList/CategoryListItem/index.js b/app/components/categoryList/CategoryListItem/index.js
index c33e5b4af..3821a69d7 100644
--- a/app/components/categoryList/CategoryListItem/index.js
+++ b/app/components/categoryList/CategoryListItem/index.js
@@ -82,7 +82,7 @@ const Bar = styled.div`
}
@media print {
z-index: 0;
- &:before {
+ &::before {
content: '';
display: block;
position: absolute;
@@ -365,8 +365,4 @@ CategoryListItem.propTypes = {
frameworkId: PropTypes.string,
};
-CategoryListItem.contextTypes = {
- intl: PropTypes.object.isRequired,
-};
-
export default CategoryListItem;
diff --git a/app/components/categoryList/CategoryListItems/index.js b/app/components/categoryList/CategoryListItems/index.js
index 3fbbbd49d..9c4dfb65b 100644
--- a/app/components/categoryList/CategoryListItems/index.js
+++ b/app/components/categoryList/CategoryListItems/index.js
@@ -2,6 +2,8 @@ import React from 'react';
import Link from 'containers/Link';
import PropTypes from 'prop-types';
import { List } from 'immutable';
+import { injectIntl } from 'react-intl';
+
import styled from 'styled-components';
import { palette } from 'styled-theme';
@@ -14,6 +16,7 @@ import CategoryListItem from 'components/categoryList/CategoryListItem';
import { SORT_ORDER_OPTIONS } from 'containers/App/constants';
import appMessages from 'containers/App/messages';
import messages from '../messages';
+
const Styled = styled.div`
position: relative;
`;
@@ -56,8 +59,7 @@ class CategoryListItems extends React.PureComponent { // eslint-disable-line rea
)
);
- getHeaderAttributes = (taxonomy, frameworkId) => {
- const { intl } = this.context;
+ getHeaderAttributes = (taxonomy, frameworkId, intl) => {
// figure out if tagged directly or via child category
const tagsRecs = this.getTagsTax(taxonomy, 'tags_recommendations');
const tagsMeasures = this.getTagsTax(taxonomy, 'tags_measures');
@@ -101,7 +103,7 @@ class CategoryListItems extends React.PureComponent { // eslint-disable-line rea
});
}
return attributes;
- }
+ };
getListHeaderColumns = ({
taxonomy,
@@ -112,13 +114,13 @@ class CategoryListItems extends React.PureComponent { // eslint-disable-line rea
onSort,
userOnly,
isGrouped,
+ intl,
}) => {
- const { intl } = this.context;
const sortOptionActive = getSortOption(sortOptions, sortBy, 'query');
const titleColumnSortOption = sortOptions.find((option) => option.query === 'title');
const titleColumnActive = titleColumnSortOption.query === sortOptionActive.query;
const titleColumnSortOrderOption = SORT_ORDER_OPTIONS.find((option) => (sortOrder || titleColumnSortOption.order) === option.value);
- const headerAttributes = this.getHeaderAttributes(taxonomy, frameworkId);
+ const headerAttributes = this.getHeaderAttributes(taxonomy, frameworkId, intl);
let titleColumnSortTitle = intl.formatMessage(messages.titleColumnSortTitle);
if (titleColumnActive) {
titleColumnSortTitle = intl.formatMessage(messages.titleColumnSortTitleSorted);
@@ -197,7 +199,7 @@ class CategoryListItems extends React.PureComponent { // eslint-disable-line rea
getCategoryMaxCount = (categoryGroups, attribute) => {
const isList = !!attribute.frameworkIds;
const allCategories = categoryGroups.reduce((memo, group) => memo.concat(group.get('categories')),
- List(),);
+ List());
return allCategories.reduce(
(countsMemo, cat) => {
if (isList) {
@@ -248,7 +250,7 @@ class CategoryListItems extends React.PureComponent { // eslint-disable-line rea
});
}
return attributes;
- }
+ };
getListColumns = ({
taxonomy,
@@ -288,6 +290,7 @@ class CategoryListItems extends React.PureComponent { // eslint-disable-line rea
userOnly,
frameworks,
frameworkId,
+ intl,
} = this.props;
const headerColumns = this.getListHeaderColumns({
@@ -299,6 +302,8 @@ class CategoryListItems extends React.PureComponent { // eslint-disable-line rea
onSort,
userOnly,
isGrouped: categoryGroups.size > 0 && !!taxonomy.get('parent'),
+ frameworks,
+ intl,
});
const columns = this.getListColumns({
@@ -356,10 +361,7 @@ CategoryListItems.propTypes = {
sortOrder: PropTypes.string,
userOnly: PropTypes.bool,
frameworkId: PropTypes.string,
-};
-
-CategoryListItems.contextTypes = {
intl: PropTypes.object.isRequired,
};
-export default CategoryListItems;
+export default injectIntl(CategoryListItems);
diff --git a/app/components/categoryList/TaxonomySidebar/index.js b/app/components/categoryList/TaxonomySidebar/index.js
index 35c2f5260..2ca56362e 100644
--- a/app/components/categoryList/TaxonomySidebar/index.js
+++ b/app/components/categoryList/TaxonomySidebar/index.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
import styled, { withTheme } from 'styled-components';
import { map } from 'lodash/collection';
@@ -114,6 +115,7 @@ class TaxonomySidebar extends React.PureComponent { // eslint-disable-line react
onTaxonomyOver,
frameworkId,
frameworks,
+ intl,
} = this.props;
const taxonomyGroups = frameworks && taxonomies && prepareTaxonomyGroups(
taxonomies,
@@ -122,7 +124,6 @@ class TaxonomySidebar extends React.PureComponent { // eslint-disable-line react
frameworkId,
frameworks,
);
- const { intl } = this.context;
return (