Replaced React.Fragment shorthands with elements

This commit is contained in:
ireic
2020-01-23 20:16:18 +01:00
parent fffb0fed4f
commit 5566618c47
17 changed files with 55 additions and 54 deletions

View File

@@ -29,6 +29,7 @@
"react/no-array-index-key": 0,
"react/forbid-prop-types": 0,
"react/prop-types": [2, { "skipUndeclared": true }],
"react/jsx-fragments": [2, "element"],
"react/state-in-constructor": 0,
"react/jsx-props-no-spreading": 0,
"jsx-a11y/click-events-have-key-events": 0

View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import NormalizeStyles from './NormalizeStyles';
import BaseStyles from './BaseStyles';
@@ -11,12 +11,12 @@ import Routes from './Routes';
import './fontStyles.css';
const App = () => (
<>
<Fragment>
<NormalizeStyles />
<BaseStyles />
<Toast />
<Routes />
</>
</Fragment>
);
export default App;

View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Avatar, Select, Icon } from 'shared/components';
@@ -18,7 +18,7 @@ const ProjectBoardIssueDetailsAssigneesReporter = ({ issue, updateIssue, project
const userOptions = projectUsers.map(user => ({ value: user.id, label: user.name }));
return (
<>
<Fragment>
<SectionTitle>Assignees</SectionTitle>
<Select
isMulti
@@ -49,7 +49,7 @@ const ProjectBoardIssueDetailsAssigneesReporter = ({ issue, updateIssue, project
renderValue={({ value: userId }) => renderUser(getUserById(userId), true)}
renderOption={({ value: userId }) => renderUser(getUserById(userId))}
/>
</>
</Fragment>
);
};

View File

@@ -1,4 +1,4 @@
import React, { useRef } from 'react';
import React, { Fragment, useRef } from 'react';
import PropTypes from 'prop-types';
import { Textarea } from 'shared/components';
@@ -29,7 +29,7 @@ const ProjectBoardIssueDetailsCommentsBodyForm = ({
};
return (
<>
<Fragment>
<Textarea
autoFocus
placeholder="Add a comment..."
@@ -45,7 +45,7 @@ const ProjectBoardIssueDetailsCommentsBodyForm = ({
Cancel
</FormButton>
</Actions>
</>
</Fragment>
);
};

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';
import api from 'shared/utils/api';
@@ -65,7 +65,7 @@ const ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {
onCancel={() => setFormOpen(false)}
/>
) : (
<>
<Fragment>
<Body>{comment.body}</Body>
<EditLink onClick={() => setFormOpen(true)}>Edit</EditLink>
<ConfirmModal
@@ -75,7 +75,7 @@ const ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {
onConfirm={handleCommentDelete}
renderLink={modal => <DeleteLink onClick={modal.open}>Delete</DeleteLink>}
/>
</>
</Fragment>
)}
</Content>
</Comment>

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';
import api from 'shared/utils/api';
@@ -47,10 +47,10 @@ const ProjectBoardIssueDetailsCommentsCreate = ({ issueId, fetchIssue }) => {
onCancel={() => setFormOpen(false)}
/>
) : (
<>
<Fragment>
<FakeTextarea onClick={() => setFormOpen(true)}>Add a comment...</FakeTextarea>
<ProTip setFormOpen={setFormOpen} />
</>
</Fragment>
)}
</Right>
</Create>

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';
import { getTextContentsFromHtmlString } from 'shared/utils/browser';
@@ -23,10 +23,10 @@ const ProjectBoardIssueDetailsDescription = ({ issue, updateIssue }) => {
const isDescriptionEmpty = getTextContentsFromHtmlString(description).trim().length === 0;
return (
<>
<Fragment>
<Title>Description</Title>
{isEditing ? (
<>
<Fragment>
<TextEditor
placeholder="Describe the issue"
defaultValue={description}
@@ -40,17 +40,17 @@ const ProjectBoardIssueDetailsDescription = ({ issue, updateIssue }) => {
Cancel
</Button>
</Actions>
</>
</Fragment>
) : (
<>
<Fragment>
{isDescriptionEmpty ? (
<EmptyLabel onClick={() => setEditing(true)}>Add a description...</EmptyLabel>
) : (
<TextEditedContent content={description} onClick={() => setEditing(true)} />
)}
</>
</Fragment>
)}
</>
</Fragment>
);
};

View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { isNil } from 'lodash';
@@ -22,7 +22,7 @@ const propTypes = {
};
const ProjectBoardIssueDetailsEstimateTracking = ({ issue, updateIssue }) => (
<>
<Fragment>
<SectionTitle>Original Estimate (hours)</SectionTitle>
{renderHourInput('estimate', issue, updateIssue)}
@@ -57,7 +57,7 @@ const ProjectBoardIssueDetailsEstimateTracking = ({ issue, updateIssue }) => (
</ModalContents>
)}
/>
</>
</Fragment>
);
const renderHourInput = (fieldName, issue, updateIssue) => (

View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { IssuePriority, IssuePriorityCopy } from 'shared/constants/issues';
@@ -13,7 +13,7 @@ const propTypes = {
};
const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => (
<>
<Fragment>
<SectionTitle>Priority</SectionTitle>
<Select
variant="empty"
@@ -29,7 +29,7 @@ const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => (
renderValue={({ value: priority }) => renderPriorityItem(priority, true)}
renderOption={({ value: priority }) => renderPriorityItem(priority)}
/>
</>
</Fragment>
);
const renderPriorityItem = (priority, isValue) => (

View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { IssueStatus, IssueStatusCopy } from 'shared/constants/issues';
@@ -13,7 +13,7 @@ const propTypes = {
};
const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
<>
<Fragment>
<SectionTitle>Status</SectionTitle>
<Select
variant="empty"
@@ -36,7 +36,7 @@ const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
<Status color={status}>{IssueStatusCopy[status]}</Status>
)}
/>
</>
</Fragment>
);
ProjectBoardIssueDetailsStatus.propTypes = propTypes;

View File

@@ -1,4 +1,4 @@
import React, { useRef, useState } from 'react';
import React, { Fragment, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { KeyCodes } from 'shared/constants/keyCodes';
@@ -31,7 +31,7 @@ const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
};
return (
<>
<Fragment>
<TitleTextarea
minRows={1}
placeholder="Short summary"
@@ -45,7 +45,7 @@ const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
}}
/>
{error && <ErrorText>{error}</ErrorText>}
</>
</Fragment>
);
};

View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import api from 'shared/utils/api';
@@ -55,7 +55,7 @@ const ProjectBoardIssueDetails = ({
};
return (
<>
<Fragment>
<TopActions>
<Type issue={issue} updateIssue={updateIssue} />
<TopActionsRight>
@@ -85,7 +85,7 @@ const ProjectBoardIssueDetails = ({
<Dates issue={issue} />
</Right>
</Content>
</>
</Fragment>
);
};

View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Route, useRouteMatch, useHistory } from 'react-router-dom';
@@ -30,7 +30,7 @@ const ProjectBoard = ({ project, fetchProject, updateLocalProjectIssues }) => {
const [filters, mergeFilters] = useMergeState(defaultFilters);
return (
<>
<Fragment>
<Breadcrumbs items={['Projects', project.name, 'Kanban Board']} />
<Header />
<Filters
@@ -65,7 +65,7 @@ const ProjectBoard = ({ project, fetchProject, updateLocalProjectIssues }) => {
/>
)}
/>
</>
</Fragment>
);
};

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { get } from 'lodash';
@@ -60,17 +60,17 @@ const ProjectIssueSearch = ({ project }) => {
</SearchInputCont>
{isSearchTermEmpty && recentIssues.length > 0 && (
<>
<Fragment>
<SectionTitle>Recent Issues</SectionTitle>
{recentIssues.map(renderIssue)}
</>
</Fragment>
)}
{!isSearchTermEmpty && matchingIssues.length > 0 && (
<>
<Fragment>
<SectionTitle>Matching Issues</SectionTitle>
{matchingIssues.map(renderIssue)}
</>
</Fragment>
)}
{!isSearchTermEmpty && !isLoading && matchingIssues.length === 0 && (

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';
import { StyledConfirmModal, Title, Message, Actions, StyledButton } from './Styles';
@@ -52,7 +52,7 @@ const ConfirmModal = ({
withCloseIcon={false}
renderLink={renderLink}
renderContent={modal => (
<>
<Fragment>
<Title>{title}</Title>
{message && <Message>{message}</Message>}
<Actions>
@@ -67,7 +67,7 @@ const ConfirmModal = ({
{cancelText}
</StyledButton>
</Actions>
</>
</Fragment>
)}
/>
);

View File

@@ -1,4 +1,4 @@
import React, { useState, useRef, useEffect, useCallback } from 'react';
import React, { Fragment, useState, useRef, useEffect, useCallback } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
@@ -68,7 +68,7 @@ const Modal = ({
}, [isOpen]);
return (
<>
<Fragment>
{!isControlled && renderLink({ open: () => setStateOpen(true) })}
{isOpen &&
@@ -89,7 +89,7 @@ const Modal = ({
</ScrollOverlay>,
$root,
)}
</>
</Fragment>
);
};

View File

@@ -1,4 +1,4 @@
import React, { useState, useRef, useLayoutEffect } from 'react';
import React, { Fragment, useState, useRef, useLayoutEffect } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
@@ -58,7 +58,7 @@ const Tooltip = ({ className, placement, offset, width, renderLink, renderConten
}, [isOpen, offset, placement]);
return (
<>
<Fragment>
{renderLink({ ref: $linkRef, onClick: isOpen ? closeTooltip : openTooltip })}
{isOpen &&
@@ -68,7 +68,7 @@ const Tooltip = ({ className, placement, offset, width, renderLink, renderConten
</StyledTooltip>,
$root,
)}
</>
</Fragment>
);
};