Enforce a single boolean attr notation in JSX (#7465)

This changeset enables the ESLint rule enforcing a single notation for boolean attributes in JSX—explictly setting the value to `true` is no longer allowed (as it was never needed).[1] From the docs for JSX:[2] > If you pass no value for a prop, it defaults to `true`. [1]:https://github.com/yannickcr/eslint-plugin-react/blob/80935658/docs/rules/jsx-boolean-value.md [2]:https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true I have chosen to use this default as it the most consistent with HTML (a la `checked` and `disabled`).
5 years ago · b0890b6b32
parent 86b165ea83
commit b0890b6b32
26 changed files with 35 additions and 34 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -148,6 +148,7 @@
    "operator-linebreak": [2, "after", { "overrides": { "?": "ignore", ":": "ignore" } }],
    "padded-blocks": "off",
    "quotes": [2, "single", {"avoidEscape": true, "allowTemplateLiterals": true}],
+    "react/jsx-boolean-value": 2,
    "react/jsx-curly-brace-presence": [2, { "props": "never", "children": "never" }],
    "react/jsx-equals-spacing": 2,
    "react/no-deprecated": 0,
--- a/ui/app/components/app/app-header/app-header.component.js
+++ b/ui/app/components/app/app-header/app-header.component.js
@ -71,7 +71,7 @@ export default class AppHeader extends PureComponent {
        <Identicon
          address={selectedAddress}
          diameter={32}
-          addBorder={true}
+          addBorder
        />
      </div>
    )
@ -92,7 +92,7 @@ export default class AppHeader extends PureComponent {
        className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
        <div className="app-header__contents">
          <MetaFoxLogo
-            unsetIconHeight={true}
+            unsetIconHeight
            onClick={() => history.push(DEFAULT_ROUTE)}
          />
          <div className="app-header__account-menu-container">
--- 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={true}/>
+        <Menu className="Test Class" isShowing/>
      )
    })

--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@ -26,9 +26,9 @@ describe('AdvancedTabContent Component', function () {
      timeRemaining="21500"
      transactionFee="$0.25"
      insufficientBalance={false}
-      customPriceIsSafe={true}
+      customPriceIsSafe
      isSpeedUp={false}
-      isEthereumNetwork={true}
+      isEthereumNetwork
    />)
  })

--- a/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
@ -23,7 +23,7 @@ export default class BasicTabContent extends Component {
        {!gasPriceButtonGroupProps.loading
          ? <GasPriceButtonGroup
            className="gas-price-button-group--alt"
-            showCheck={true}
+            showCheck
            {...gasPriceButtonGroupProps}
          />
          : <Loading />
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@ -204,7 +204,7 @@ export default class GasModalPageContainer extends Component {
          }}
          submitText={this.context.t('save')}
          headerCloseText={this.context.t('close')}
-          hideCancel={true}
+          hideCancel
        />
      </div>
    )
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
@ -200,7 +200,7 @@ describe('GasModalPageContainer Component', function () {
        customGasLimitInHex="mockCustomGasLimitInHex"
        insufficientBalance={false}
        disableSave={false}
-        hideBasic={true}
+        hideBasic
      />)
      const renderTabsResult = wrapper.instance().renderTabs()

--- a/ui/app/components/app/modal/tests/modal.component.test.js
+++ b/ui/app/components/app/modal/tests/modal.component.test.js
@ -110,7 +110,7 @@ describe('Modal Component', () => {
        cancelText="Cancel"
        onSubmit={handleSubmit}
        submitText="Submit"
-        submitDisabled={true}
+        submitDisabled
        headerText="My Header"
        onClose={handleCancel}
      />
--- a/ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.component.test.js
+++ b/ui/app/components/app/transaction-activity-log/tests/transaction-activity-log.component.test.js
@ -90,7 +90,7 @@ describe('TransactionActivityLog Component', () => {
        onCancel={() => {}}
        onRetry={() => {}}
        primaryTransactionStatus="pending"
-        isEarliestNonce={true}
+        isEarliestNonce
      />,
      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
    )
--- a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
+++ b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@ -70,7 +70,7 @@ describe('TransactionListItemDetails Component', () => {
    const wrapper = shallow(
      <TransactionListItemDetails
        transactionGroup={transactionGroup}
-        showSpeedUp={true}
+        showSpeedUp
      />,
      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
    )
--- a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
+++ b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
@ -53,7 +53,7 @@ export default class TransactionViewBalance extends PureComponent {
                value={balance}
                type={PRIMARY}
                ethNumberOfDecimals={4}
-                hideTitle={true}
+                hideTitle
              />
              {
                balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
@ -69,7 +69,7 @@ export default class TransactionViewBalance extends PureComponent {
                  value={balance}
                  type={SECONDARY}
                  ethNumberOfDecimals={4}
-                  hideTitle={true}
+                  hideTitle
                />
              )
            }
--- a/ui/app/components/app/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js
+++ b/ui/app/components/app/user-preferenced-currency-display/tests/user-preferenced-currency-display.component.test.js
@ -18,7 +18,7 @@ describe('UserPreferencedCurrencyDisplay Component', () => {
    it('should pass all props to the CurrencyDisplay child component', () => {
      const wrapper = shallow(
        <UserPreferencedCurrencyDisplay
-          prop1={true}
+          prop1
          prop2="test"
          prop3={1}
        />
--- a/ui/app/components/ui/currency-input/tests/currency-input.component.test.js
+++ b/ui/app/components/ui/currency-input/tests/currency-input.component.test.js
@ -130,7 +130,7 @@ describe('CurrencyInput Component', () => {
            fiatSuffix="USD"
            nativeSuffix="ETH"
            useFiat
-            hideFiat={true}
+            hideFiat
            nativeCurrency="ETH"
            currentCurrency="usd"
            conversionRate={231.06}
--- a/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js
+++ b/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js
@ -16,7 +16,7 @@ describe('MetaFoxLogo', () => {

  it('does not set icon height and width when unsetIconHeight is true', () => {
    const wrapper = mount(
-      <MetaFoxLogo unsetIconHeight={true} />
+      <MetaFoxLogo unsetIconHeight />
    )

    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), null)
--- a/ui/app/components/ui/page-container/page-container-header/tests/page-container-header.component.test.js
+++ b/ui/app/components/ui/page-container/page-container-header/tests/page-container-header.component.test.js
@ -13,7 +13,7 @@ describe('Page Container Header', () => {
    onClose = sinon.spy()

    wrapper = shallow(<PageContainerHeader
-      showBackButton={true}
+      showBackButton
      onBackButtonClick={onBackButtonClick}
      backButtonStyles={style}
      title="Test Title"
--- a/ui/app/pages/confirm-approve/confirm-approve.component.js
+++ b/ui/app/pages/confirm-approve/confirm-approve.component.js
@ -78,7 +78,7 @@ export default class ConfirmApprove extends Component {
      <ConfirmTransactionBase
        toAddress={toAddress}
        identiconAddress={tokenAddress}
-        showAccountInHeader={true}
+        showAccountInHeader
        title={tokensText}
        contentComponent={<ConfirmApproveContent
          siteImage={siteImage}
@ -98,7 +98,7 @@ export default class ConfirmApprove extends Component {
          ethTransactionTotal={ethTransactionTotal}
          fiatTransactionTotal={fiatTransactionTotal}
        />}
-        hideSenderToRecipient={true}
+        hideSenderToRecipient
        customTxParamsData={customPermissionAmount
          ? getCustomTxParamsData(data, { customPermissionAmount, tokenAmount, decimals })
          : null
--- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
@ -261,7 +261,7 @@ export default class ConfirmTransactionBase extends Component {
                customGasPrice={customGas.gasPrice}
                customGasLimit={customGas.gasLimit}
                insufficientBalance={insufficientBalance}
-                customPriceIsSafe={true}
+                customPriceIsSafe
                isSpeedUp={false}
              />
              : null
--- a/ui/app/pages/create-account/create-account.component.js
+++ b/ui/app/pages/create-account/create-account.component.js
@ -47,17 +47,17 @@ export default class CreateAccountPage extends Component {
        <div className="new-account__form">
          <Switch>
            <Route
-              exact={true}
+              exact
              path={NEW_ACCOUNT_ROUTE}
              component={NewAccountCreateForm}
            />
            <Route
-              exact={true}
+              exact
              path={IMPORT_ACCOUNT_ROUTE}
              component={NewAccountImportForm}
            />
            <Route
-              exact={true}
+              exact
              path={CONNECT_HARDWARE_ROUTE}
              component={ConnectHardwareForm}
            />
--- a/ui/app/pages/create-account/new-account.component.js
+++ b/ui/app/pages/create-account/new-account.component.js
@ -58,13 +58,13 @@ export default class NewAccountCreateForm extends Component {
        <div className="new-account-create-form__buttons">
          <Button
            type="default"
-            large={true}
+            large
            className="new-account-create-form__button"
            onClick={() => history.push(DEFAULT_ROUTE)}
          >{this.context.t('cancel')}</Button>
          <Button
            type="secondary"
-            large={true}
+            large
            className="new-account-create-form__button"
            onClick={createClick}
          >{this.context.t('create')}</Button>
--- a/ui/app/pages/send/account-list-item/account-list-item.component.js
+++ b/ui/app/pages/send/account-list-item/account-list-item.component.js
@ -83,7 +83,7 @@ export default class AccountListItem extends Component {
                <UserPreferencedCurrencyDisplay
                  type={PRIMARY}
                  value={balance}
-                  hideTitle={true}
+                  hideTitle
                />
                {
                  balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
@ -94,7 +94,7 @@ export default class AccountListItem extends Component {
                  <UserPreferencedCurrencyDisplay
                    type={SECONDARY}
                    value={balance}
-                    hideTitle={true}
+                    hideTitle
                  />
                )
              }
--- a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
@ -130,7 +130,7 @@ export default class SendGasRow extends Component {
        customGasPrice={gasPrice}
        customGasLimit={gasLimit}
        insufficientBalance={insufficientBalance}
-        customPriceIsSafe={true}
+        customPriceIsSafe
        isSpeedUp={false}
      />
      { this.renderAdvancedOptionsButton() }
--- a/ui/app/pages/send/send-content/tests/send-content-component.test.js
+++ b/ui/app/pages/send/send-content/tests/send-content-component.test.js
@ -16,7 +16,7 @@ describe('SendContent Component', function () {
  beforeEach(() => {
    wrapper = shallow(
      <SendContent
-        showHexData={true}
+        showHexData
      />,
      { context: { t: str => str + '_t' } }
    )
--- a/ui/app/pages/send/send-footer/tests/send-footer-component.test.js
+++ b/ui/app/pages/send/send-footer/tests/send-footer-component.test.js
@ -29,7 +29,7 @@ describe('SendFooter Component', function () {
      addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
      amount="mockAmount"
      clearSend={propsMethodSpies.clearSend}
-      disabled={true}
+      disabled
      editingTransactionId="mockEditingTransactionId"
      errors={{}}
      from={ { address: 'mockAddress', balance: 'mockBalance' } }
@ -186,7 +186,7 @@ describe('SendFooter Component', function () {
        addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
        amount="mockAmount"
        clearSend={propsMethodSpies.clearSend}
-        disabled={true}
+        disabled
        editingTransactionId="mockEditingTransactionId"
        errors={{}}
        from={ { address: 'mockAddress', balance: 'mockBalance' } }
--- a/ui/app/pages/send/tests/send-component.test.js
+++ b/ui/app/pages/send/tests/send-component.test.js
@ -58,7 +58,7 @@ describe('Send Component', function () {
      recentBlocks={['mockBlock']}
      selectedAddress="mockSelectedAddress"
      selectedToken="mockSelectedToken"
-      showHexData={true}
+      showHexData
      tokenBalance="mockTokenBalance"
      tokenContract="mockTokenContract"
      updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
--- a/ui/app/pages/send/to-autocomplete.component.js
+++ b/ui/app/pages/send/to-autocomplete.component.js
@ -61,7 +61,7 @@ export default class ToAutoComplete extends Component {
              }}
              icon={this.getListItemIcon(account.address, to)}
              displayBalance={false}
-              displayAddress={true}
+              displayAddress
            />
          ))}
        </div>
--- a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
+++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
@ -100,7 +100,7 @@ export default class EditContact extends PureComponent {
              onChange={e => this.setState({ newMemo: e.target.value })}
              fullWidth
              margin="dense"
-              multiline={true}
+              multiline
              rows={3}
              classes={{
                inputMultiline: 'address-book__view-contact__text-area',