eslint: Enable more react/jsx-* rules (#7592)

MetaMask · Dec 3, 2019 · 2e69f32 · 2e69f32
1 parent 2c33ad3
commit 2e69f32
Show file tree

Hide file tree

Showing 97 changed files with 1,244 additions and 963 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -156,6 +156,25 @@
     "react/jsx-equals-spacing": 2,
     "react/no-deprecated": 0,
     "react/default-props-match-prop-types": 2,
+    "react/jsx-closing-tag-location": 2,
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-closing-bracket-location": 2,
+    "react/jsx-first-prop-new-line": 2,
+    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline"} ],
+    "react/jsx-tag-spacing": [2, {
+      "closingSlash": "never",
+      "beforeSelfClosing": "always",
+      "afterOpening": "never"
+    }],
+    "react/jsx-wrap-multilines": [2, {
+      "declaration": "parens-new-line",
+      "assignment": "parens-new-line",
+      "return": "parens-new-line",
+      "arrow": "parens-new-line",
+      "condition": "parens-new-line",
+      "logical": "parens-new-line",
+      "prop": "parens-new-line"
+    }],
     "semi": [2, "never"],
     "semi-spacing": [2, { "before": false, "after": true }],
     "space-before-blocks": [2, "always"],

diff --git a/development/mock-dev.js b/development/mock-dev.js
@@ -135,7 +135,7 @@ function startApp () {
           margin: '20px',
         }}
       >
-        <Root store={store}/>
+        <Root store={store} />
       </div>
     </div>,
     container,

diff --git a/ui/app/components/app/account-menu/account-menu.component.js b/ui/app/components/app/account-menu/account-menu.component.js
@@ -253,12 +253,12 @@ export default class AccountMenu extends PureComponent {
             })
             history.push(NEW_ACCOUNT_ROUTE)
           }}
-          icon={
+          icon={(
             <img
               className="account-menu__item-icon"
               src="images/plus-btn-white.svg"
             />
-          }
+          )}
           text={t('createAccount')}
         />
         <Item
@@ -273,12 +273,12 @@ export default class AccountMenu extends PureComponent {
             })
             history.push(IMPORT_ACCOUNT_ROUTE)
           }}
-          icon={
+          icon={(
             <img
               className="account-menu__item-icon"
               src="images/import-account.svg"
             />
-          }
+          )}
           text={t('importAccount')}
         />
         <Item
@@ -297,12 +297,12 @@ export default class AccountMenu extends PureComponent {
               history.push(CONNECT_HARDWARE_ROUTE)
             }
           }}
-          icon={
+          icon={(
             <img
               className="account-menu__item-icon"
               src="images/connect-icon.svg"
             />
-          }
+          )}
           text={t('connectHardwareWallet')}
         />
         <Divider />
@@ -328,12 +328,12 @@ export default class AccountMenu extends PureComponent {
               },
             })
           }}
-          icon={
+          icon={(
             <img
               className="account-menu__item-icon"
               src="images/settings.svg"
             />
-          }
+          )}
           text={t('settings')}
         />
       </Menu>

diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js
@@ -89,7 +89,8 @@ export default class AppHeader extends PureComponent {
 
     return (
       <div
-        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
+        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}
+      >
         <div className="app-header__contents">
           <MetaFoxLogo
             unsetIconHeight

diff --git a/...tainer-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/...tainer-content/confirm-page-container-summary/confirm-page-container-summary.component.js
@@ -47,9 +47,11 @@ const ConfirmPageContainerSummary = props => {
         </div>
       </div>
       {
-        hideSubtitle || <div className="confirm-page-container-summary__subtitle">
-          { subtitleComponent || subtitle }
-        </div>
+        hideSubtitle || (
+          <div className="confirm-page-container-summary__subtitle">
+            { subtitleComponent || subtitle }
+          </div>
+        )
       }
     </div>
   )

diff --git a/...m-page-container/confirm-page-container-header/confirm-page-container-header.component.js b/...m-page-container/confirm-page-container-header/confirm-page-container-header.component.js
@@ -34,36 +34,40 @@ export default class ConfirmPageContainerHeader extends Component {
     return (
       <div className="confirm-page-container-header__row">
         { !showAccountInHeader
-          ? <div
-            className="confirm-page-container-header__back-button-container"
-            style={{
-              visibility: showEdit ? 'initial' : 'hidden',
-            }}
-          >
-            <img
-              src="/images/caret-left.svg"
-            />
-            <span
-              className="confirm-page-container-header__back-button"
-              onClick={() => onEdit()}
+          ? (
+            <div
+              className="confirm-page-container-header__back-button-container"
+              style={{
+                visibility: showEdit ? 'initial' : 'hidden',
+              }}
             >
-              { this.context.t('edit') }
-            </span>
-          </div>
+              <img
+                src="/images/caret-left.svg"
+              />
+              <span
+                className="confirm-page-container-header__back-button"
+                onClick={() => onEdit()}
+              >
+                { this.context.t('edit') }
+              </span>
+            </div>
+          )
           : null
         }
         { showAccountInHeader
-          ? <div className="confirm-page-container-header__address-container">
-            <div className="confirm-page-container-header__address-identicon">
-              <Identicon
-                address={accountAddress}
-                diameter={24}
-              />
-            </div>
-            <div className="confirm-page-container-header__address">
-              { addressSlicer(accountAddress) }
+          ? (
+            <div className="confirm-page-container-header__address-container">
+              <div className="confirm-page-container-header__address-identicon">
+                <Identicon
+                  address={accountAddress}
+                  diameter={24}
+                />
+              </div>
+              <div className="confirm-page-container-header__address">
+                { addressSlicer(accountAddress) }
+              </div>
             </div>
-          </div>
+          )
           : null
         }
         { !isFullScreen && <NetworkDisplay /> }

diff --git a/...ontainer/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/...ontainer/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@@ -5,23 +5,28 @@ const ConfirmPageContainerNavigation = props => {
   const { onNextTx, totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, firstTx, lastTx, ofText, requestsWaitingText } = props
 
   return (
-    <div className="confirm-page-container-navigation"
+    <div
+      className="confirm-page-container-navigation"
       style={{
         display: showNavigation ? 'flex' : 'none',
       }}
     >
-      <div className="confirm-page-container-navigation__container"
+      <div
+        className="confirm-page-container-navigation__container"
         style={{
           visibility: prevTxId ? 'initial' : 'hidden',
-        }}>
+        }}
+      >
         <div
           className="confirm-page-container-navigation__arrow"
-          onClick={() => onNextTx(firstTx)}>
+          onClick={() => onNextTx(firstTx)}
+        >
           <img src="/images/double-arrow.svg" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
-          onClick={() => onNextTx(prevTxId)}>
+          onClick={() => onNextTx(prevTxId)}
+        >
           <img src="/images/single-arrow.svg" />
         </div>
       </div>
@@ -37,15 +42,18 @@ const ConfirmPageContainerNavigation = props => {
         className="confirm-page-container-navigation__container"
         style={{
           visibility: nextTxId ? 'initial' : 'hidden',
-        }}>
+        }}
+      >
         <div
           className="confirm-page-container-navigation__arrow"
-          onClick={() => onNextTx(nextTxId)}>
+          onClick={() => onNextTx(nextTxId)}
+        >
           <img className="confirm-page-container-navigation__imageflip" src="/images/single-arrow.svg" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
-          onClick={() => onNextTx(lastTx)}>
+          onClick={() => onNextTx(lastTx)}
+        >
           <img className="confirm-page-container-navigation__imageflip" src="/images/double-arrow.svg" />
         </div>
       </div>

diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
@@ -133,15 +133,17 @@ export default class ConfirmPageContainer extends Component {
         >
           { hideSenderToRecipient
             ? null
-            : <SenderToRecipient
-              senderName={fromName}
-              senderAddress={fromAddress}
-              recipientName={toName}
-              recipientAddress={toAddress}
-              recipientEns={toEns}
-              recipientNickname={toNickname}
-              assetImage={renderAssetImage ? assetImage : undefined}
-            />
+            : (
+              <SenderToRecipient
+                senderName={fromName}
+                senderAddress={fromAddress}
+                recipientName={toName}
+                recipientAddress={toAddress}
+                recipientEns={toEns}
+                recipientNickname={toNickname}
+                assetImage={renderAssetImage ? assetImage : undefined}
+              />
+            )
           }
         </ConfirmPageContainerHeader>
         {

diff --git a/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js b/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js
@@ -15,9 +15,11 @@ export default function RecipientGroup ({ label, items, onSelect, selectedAddres
 
   return (
     <div className="send__select-recipient-wrapper__group">
-      {label && <div className="send__select-recipient-wrapper__group-label">
-        {label}
-      </div>}
+      {label && (
+        <div className="send__select-recipient-wrapper__group-label">
+          {label}
+        </div>
+      )}
       {
         items.map(({ address, name }) => (
           <div

diff --git a/ui/app/components/app/dropdowns/components/network-dropdown-icon.js b/ui/app/components/app/dropdowns/components/network-dropdown-icon.js
@@ -25,12 +25,14 @@ function NetworkDropdownIcon (props) {
     )
     : (
       <div className={`menu-icon-circle${isSelected ? '--active' : ''}`}>
-        <div style={{
-          background: backgroundColor,
-          border: innerBorder,
-          height: `${diameter}px`,
-          width: `${diameter}px`,
-        }} />
+        <div
+          style={{
+            background: backgroundColor,
+            border: innerBorder,
+            height: `${diameter}px`,
+            width: `${diameter}px`,
+          }}
+        />
       </div>
     )
 }

diff --git a/ui/app/components/app/dropdowns/tests/menu.test.js b/ui/app/components/app/dropdowns/tests/menu.test.js
@@ -11,7 +11,7 @@ describe('Dropdown Menu Components', () => {
 
     beforeEach(() => {
       wrapper = shallow(
-        <Menu className="Test Class" isShowing/>
+        <Menu className="Test Class" isShowing />
       )
     })
 
@@ -73,9 +73,11 @@ describe('Dropdown Menu Components', () => {
     const onClickSpy = sinon.spy()
 
     beforeEach(() => {
-      wrapper = shallow(<CloseArea
-        onClick={onClickSpy}
-      />)
+      wrapper = shallow((
+        <CloseArea
+          onClick={onClickSpy}
+        />
+      ))
     })
 
     it('simulates click', () => {

diff --git a/ui/app/components/app/dropdowns/tests/network-dropdown.test.js b/ui/app/components/app/dropdowns/tests/network-dropdown.test.js
@@ -57,7 +57,7 @@ describe('Network Dropdown', () => {
 
     beforeEach(() => {
       wrapper = mountWithRouter(
-        <NetworkDropdown store={store}/>,
+        <NetworkDropdown store={store} />,
       )
     })
 

diff --git a/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
@@ -119,10 +119,12 @@ export default class AdvancedGasInputs extends Component {
             value={value}
             onChange={onChange}
           />
-          <div className={classnames('advanced-gas-inputs__gas-edit-row__input-arrows', {
-            'advanced-gas-inputs__gas-edit-row__input--error': errorType === 'error',
-            'advanced-gas-inputs__gas-edit-row__input--warning': errorType === 'warning',
-          })}>
+          <div
+            className={classnames('advanced-gas-inputs__gas-edit-row__input-arrows', {
+              'advanced-gas-inputs__gas-edit-row__input--error': errorType === 'error',
+              'advanced-gas-inputs__gas-edit-row__input--warning': errorType === 'warning',
+            })}
+          >
             <div
               className="advanced-gas-inputs__gas-edit-row__input-arrows__i-wrap"
               onClick={() => onChange({ target: { value: value + 1 } })}
@@ -159,21 +161,21 @@ export default class AdvancedGasInputs extends Component {
       errorText: gasPriceErrorText,
       errorType: gasPriceErrorType,
     } = this.gasPriceError({ insufficientBalance, customPriceIsSafe, isSpeedUp, gasPrice })
-    const gasPriceErrorComponent = gasPriceErrorType ?
+    const gasPriceErrorComponent = gasPriceErrorType ? (
       <div className={`advanced-gas-inputs__gas-edit-row__${gasPriceErrorType}-text`}>
         { gasPriceErrorText }
-      </div> :
-      null
+      </div>
+    ) : null
 
     const {
       errorText: gasLimitErrorText,
       errorType: gasLimitErrorType,
     } = this.gasLimitError({ insufficientBalance, gasLimit })
-    const gasLimitErrorComponent = gasLimitErrorType ?
+    const gasLimitErrorComponent = gasLimitErrorType ? (
       <div className={`advanced-gas-inputs__gas-edit-row__${gasLimitErrorType}-text`}>
         { gasLimitErrorText }
-      </div> :
-      null
+      </div>
+    ) : null
 
     return (
       <div className="advanced-gas-inputs__gas-edit-rows">