Adjust Menu.Item with label prop (#7413)

2022-04-21 09:52:48 +02:00 · 2022-04-21 09:52:48 +02:00 · 374bb47335
commit 374bb47335
parent 6f1534d945
6 changed files with 89 additions and 120 deletions
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@ -234,37 +234,33 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
        <Menu.Item
          icon='link'
          key='identityMain'
+          label={t('Set on-chain identity')}
          onClick={toggleIdentityMain}
-        >
-          {t('Set on-chain identity')}
-        </Menu.Item>
+        />
      ),
      isFunction(api.api.tx.identity?.setSubs) && identity?.display && !isHardware && (
        <Menu.Item
          icon='vector-square'
          key='identitySub'
+          label={t('Set on-chain sub-identities')}
          onClick={toggleIdentitySub}
-        >
-          {t('Set on-chain sub-identities')}
-        </Menu.Item>
+        />
      ),
      isFunction(api.api.tx.democracy?.unlock) && democracyUnlockTx && (
        <Menu.Item
          icon='broom'
          key='clearDemocracy'
+          label={t('Clear expired democracy locks')}
          onClick={_clearDemocracyLocks}
-        >
-          {t('Clear expired democracy locks')}
-        </Menu.Item>
+        />
      ),
      isFunction(api.api.tx.vesting?.vest) && vestingVestTx && (
        <Menu.Item
          icon='unlock'
          key='vestingVest'
+          label={t('Unlock vested amount')}
          onClick={_vestingVest}
-        >
-          {t('Unlock vested amount')}
-        </Menu.Item>
+        />
      )
    ], t('Identity')),
    createMenuGroup('deriveGroup', [
@ -272,19 +268,17 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
        <Menu.Item
          icon='download'
          key='deriveAccount'
+          label={t('Derive account via derivation path')}
          onClick={toggleDerive}
-        >
-          {t('Derive account via derivation path')}
-        </Menu.Item>
+        />
      ),
      isHardware && (
        <Menu.Item
          icon='eye'
          key='showHwAddress'
+          label={t('Show address on hardware device')}
          onClick={_showOnHardware}
-        >
-          {t('Show address on hardware device')}
-        </Menu.Item>
+        />
      )
    ], t('Derive')),
    createMenuGroup('backupGroup', [
@ -292,28 +286,25 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
        <Menu.Item
          icon='database'
          key='backupJson'
+          label={t('Create a backup file for this account')}
          onClick={toggleBackup}
-        >
-          {t('Create a backup file for this account')}
-        </Menu.Item>
+        />
      ),
      !(isExternal || isHardware || isInjected || isMultisig || isDevelopment) && (
        <Menu.Item
          icon='edit'
          key='changePassword'
+          label={t("Change this account's password")}
          onClick={togglePassword}
-        >
-          {t("Change this account's password")}
-        </Menu.Item>
+        />
      ),
      !(isInjected || isDevelopment) && (
        <Menu.Item
          icon='trash-alt'
          key='forgetAccount'
+          label={t('Forget this account')}
          onClick={toggleForget}
-        >
-          {t('Forget this account')}
-        </Menu.Item>
+        />
      )
    ], t('Backup')),
    isFunction(api.api.tx.recovery?.createRecovery) && createMenuGroup('reoveryGroup', [
@ -321,67 +312,59 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
        <Menu.Item
          icon='redo'
          key='makeRecoverable'
+          label={t('Make recoverable')}
          onClick={toggleRecoverSetup}
-        >
-          {t('Make recoverable')}
-        </Menu.Item>
+        />
      ),
      <Menu.Item
        icon='screwdriver'
        key='initRecovery'
+        label={t('Initiate recovery for another')}
        onClick={toggleRecoverAccount}
-      >
-        {t('Initiate recovery for another')}
-      </Menu.Item>
+      />
    ], t('Recovery')),
    isFunction(api.api.tx.multisig?.asMulti) && isMultisig && createMenuGroup('multisigGroup', [
      <Menu.Item
        icon='file-signature'
        isDisabled={!multiInfos || !multiInfos.length}
        key='multisigApprovals'
+        label={t('Multisig approvals')}
        onClick={toggleMultisig}
-      >
-        {t('Multisig approvals')}
-      </Menu.Item>
+      />
    ], t('Multisig')),
    isFunction(api.api.query.democracy?.votingOf) && delegation?.accountDelegated && createMenuGroup('undelegateGroup', [
      <Menu.Item
        icon='user-edit'
        key='changeDelegate'
+        label={t('Change democracy delegation')}
        onClick={toggleDelegate}
-      >
-        {t('Change democracy delegation')}
-      </Menu.Item>,
+      />,
      <Menu.Item
        icon='user-minus'
        key='undelegate'
+        label= {t('Undelegate')}
        onClick={toggleUndelegate}
-      >
-        {t('Undelegate')}
-      </Menu.Item>
+      />
    ], t('Undelegate')),
    createMenuGroup('delegateGroup', [
      isFunction(api.api.query.democracy?.votingOf) && !delegation?.accountDelegated && (
        <Menu.Item
          icon='user-plus'
          key='delegate'
+          label={t('Delegate democracy votes')}
          onClick={toggleDelegate}
-        >
-
-          {t('Delegate democracy votes')}
-        </Menu.Item>
+        />
      ),
      isFunction(api.api.query.proxy?.proxies) && (
        <Menu.Item
          icon='sitemap'
          key='proxy-overview'
-          onClick={toggleProxyOverview}
-        >
-          {proxy?.[0].length
+          label={proxy?.[0].length
            ? t('Manage proxies')
            : t('Add proxy')
          }
-        </Menu.Item>
+          onClick={toggleProxyOverview}
+        />
      )
    ], t('Delegate')),
    isEditable && !api.isDevelopment && createMenuGroup('genesisGroup', [
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/packages/page-addresses/src/Contacts/Address.tsx
@ -144,10 +144,9 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
    <Menu>
      <Menu.Item
        isDisabled={!isEditable}
+        label={t<string>('Forget this address')}
        onClick={_toggleForget}
-      >
-        {t<string>('Forget this address')}
-      </Menu.Item>
+      />
      {isEditable && !api.isDevelopment && (
        <>
          <Menu.Divider />
--- a/packages/page-bounties/src/BountyExtraActions/index.tsx
+++ b/packages/page-bounties/src/BountyExtraActions/index.tsx
@ -118,43 +118,38 @@ function Index ({ bestNumber, className, description, index, proposals, status }
              {showCloseBounty &&
              <Menu.Item
                key='closeBounty'
+                label={t<string>('Close')}
                onClick={toggleCloseBounty}
-              >
-                {t<string>('Close')}
-              </Menu.Item>
+              />
              }
-              {showRejectCurator &&
-              <Menu.Item
-                key='rejectCurator'
-                onClick={toggleRejectCurator}
-              >
-                {t<string>('Reject curator')}
-              </Menu.Item>
-              }
-              {showExtendExpiry &&
-              <Menu.Item
-                key='extendExpiry'
-                onClick={toggleExtendExpiry}
-              >
-                {t<string>('Extend expiry')}
-              </Menu.Item>
-              }
-              {showGiveUpCurator &&
-              <Menu.Item
-                key='giveUpCurator'
-                onClick={toggleGiveUpCurator}
-              >
-                {t<string>('Give up')}
-              </Menu.Item>
-              }
-              {showSlashCurator && availableSlashActions.map((actionName) =>
+              {showRejectCurator && (
+                <Menu.Item
+                  key='rejectCurator'
+                  label={t<string>('Reject curator')}
+                  onClick={toggleRejectCurator}
+                />
+              )}
+              {showExtendExpiry && (
+                <Menu.Item
+                  key='extendExpiry'
+                  label={t<string>('Extend expiry')}
+                  onClick={toggleExtendExpiry}
+                />
+              )}
+              {showGiveUpCurator && (
+                <Menu.Item
+                  key='giveUpCurator'
+                  label={t<string>('Give up')}
+                  onClick={toggleGiveUpCurator}
+                />
+              )}
+              {showSlashCurator && availableSlashActions.map((actionName) => (
                <Menu.Item
                  key={actionName}
+                  label={slashCuratorActionNames.current[actionName]}
                  onClick={slashCurator(actionName)}
-                >
-                  {slashCuratorActionNames.current[actionName]}
-                </Menu.Item>
-              )}
+                />
+              ))}
            </Menu>
          }
        >
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@ -305,56 +305,48 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
                <Menu>
                  <Menu.Item
                    isDisabled={!isOwnStash || !balancesAll?.freeBalance.gtn(0)}
+                    label={t<string>('Bond more funds')}
                    onClick={toggleBondExtra}
-                  >
-                    {t<string>('Bond more funds')}
-                  </Menu.Item>
+                  />
                  <Menu.Item
                    isDisabled={!isOwnController || !stakingAccount || !stakingAccount.stakingLedger || stakingAccount.stakingLedger.active?.isEmpty}
+                    label={t<string>('Unbond funds')}
                    onClick={toggleUnbond}
-                  >
-                    {t<string>('Unbond funds')}
-                  </Menu.Item>
+                  />
                  <Menu.Item
                    isDisabled={!isOwnController || !stakingAccount || !stakingAccount.unlocking || !stakingAccount.unlocking.length}
+                    label={t<string>('Rebond funds')}
                    onClick={toggleRebond}
-                  >
-                    {t<string>('Rebond funds')}
-                  </Menu.Item>
+                  />
                  <Menu.Item
                    isDisabled={!isOwnController || !stakingAccount || !stakingAccount.redeemable || !stakingAccount.redeemable.gtn(0)}
+                    label={t<string>('Withdraw unbonded funds')}
                    onClick={withdrawFunds}
-                  >
-                    {t<string>('Withdraw unbonded funds')}
-                  </Menu.Item>
+                  />
                  <Menu.Divider />
                  <Menu.Item
                    isDisabled={!isOwnStash}
+                    label={t<string>('Change controller account')}
                    onClick={toggleSetController}
-                  >
-                    {t<string>('Change controller account')}
-                  </Menu.Item>
+                  />
                  <Menu.Item
                    isDisabled={!isOwnController}
+                    label={t<string>('Change reward destination')}
                    onClick={toggleRewardDestination}
-                  >
-                    {t<string>('Change reward destination')}
-                  </Menu.Item>
+                  />
                  {isStashValidating && (
                    <>
                      <Menu.Item
                        isDisabled={!isOwnController}
+                        label={t<string>('Change validator preferences')}
                        onClick={toggleValidate}
-                      >
-                        {t<string>('Change validator preferences')}
-                      </Menu.Item>
+                      />
                      {isFunction(api.tx.staking.kick) && (
                        <Menu.Item
                          isDisabled={!isOwnController}
+                          label={t<string>('Remove nominees')}
                          onClick={toggleKick}
-                        >
-                          {t<string>('Remove nominees')}
-                        </Menu.Item>
+                        />
                      )}
                    </>
                  )}
@ -362,23 +354,22 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
                  {!isStashNominating && (
                    <Menu.Item
                      isDisabled={!isOwnController}
+                      label={t<string>('Change session keys')}
                      onClick={toggleSetSession}
-                    >
-                      {t<string>('Change session keys')}
-                    </Menu.Item>
+                    />
                  )}
                  {isStashNominating && (
                    <Menu.Item
                      isDisabled={!isOwnController || !targets.validators?.length}
+                      label={t<string>('Set nominees')}
                      onClick={toggleNominate}
-                    >
-                      {t<string>('Set nominees')}
-                    </Menu.Item>
+                    />
                  )}
                  {!isStashNominating && (
-                    <Menu.Item onClick={toggleInject}>
-                      {t<string>('Inject session keys (advanced)')}
-                    </Menu.Item>
+                    <Menu.Item
+                      label={t<string>('Inject session keys (advanced)')}
+                      onClick={toggleInject}
+                    />
                  )}
                </Menu>
              }
--- a/packages/react-components/src/Menu/Item.tsx
+++ b/packages/react-components/src/Menu/Item.tsx
@ -8,7 +8,7 @@ import styled from 'styled-components';

 import Icon from '../Icon';

-function Item ({ children, className = '', icon, isDisabled, onClick }: ItemProps): React.ReactElement<ItemProps> {
+function Item ({ children, className = '', icon, isDisabled, label, onClick }: ItemProps): React.ReactElement<ItemProps> {
  const _onClick = useCallback(
    (): void => {
      !isDisabled && onClick && onClick();
@ -27,7 +27,7 @@ function Item ({ children, className = '', icon, isDisabled, onClick }: ItemProp
          icon={icon}
        />
      )}
-      {children}
+      {label}{children}
    </div>
  );
 }
--- a/packages/react-components/src/Menu/types.ts
+++ b/packages/react-components/src/Menu/types.ts
@ -14,6 +14,7 @@ export interface ItemProps {
  className?: string;
  icon?: IconName;
  isDisabled?: boolean;
+  label?: React.ReactNode;
  onClick?: () => void | Promise<void> | null;
 }