Prepare for selectable groups (#6842)

packages/page-staking/src/Actions/Account/index.tsx

@@ -12,7 +12,7 @@ import React, { useCallback, useContext, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { ApiPromise } from '@polkadot/api';
-import { AddressInfo, AddressMini, AddressSmall, Badge, Button, Menu, Popup, StakingBonded, StakingRedeemable, StakingUnbonding, StatusContext, TxButton } from '@polkadot/react-components';
+import { AddressInfo, AddressMini, AddressSmall, Badge, Button, Checkbox, Menu, Popup, StakingBonded, StakingRedeemable, StakingUnbonding, StatusContext, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 import { BN, formatNumber, isFunction } from '@polkadot/util';
 
@@ -34,8 +34,10 @@ interface Props {
   allSlashes?: [BN, UnappliedSlash[]][];
   className?: string;
   isDisabled?: boolean;
+  isSelectable: boolean;
   info: StakerState;
   next?: string[];
+  onSelect: (stashId: string, controllerId: string, isSelected: boolean) => void;
   stashId: string;
   targets: SortedTargets;
   validators?: string[];
@@ -68,7 +70,7 @@ function useStashCalls (api: ApiPromise, stashId: string) {
   return { balancesAll, spanCount, stakingAccount };
 }
 
-function Account ({ allSlashes, className = '', info: { controllerId, destination, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isOwnStash, isStashNominating, isStashValidating, nominating, sessionIds, stakingLedger, stashId }, isDisabled, targets }: Props): React.ReactElement<Props> {
+function Account ({ allSlashes, className = '', info: { controllerId, destination, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isOwnStash, isStashNominating, isStashValidating, nominating, sessionIds, stakingLedger, stashId }, isDisabled, isSelectable, onSelect, targets }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { queueExtrinsic } = useContext(StatusContext);
@@ -84,6 +86,13 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
   const [isValidateOpen, toggleValidate] = useToggle();
   const { balancesAll, spanCount, stakingAccount } = useStashCalls(api, stashId);
 
+  const _onSelect = useCallback(
+    (isSelected: boolean) => controllerId && onSelect(stashId, controllerId, isSelected),
+    [controllerId, stashId, onSelect]
+  );
+
+  const [isSelected, , setSelected] = useToggle(false, _onSelect);
+
   const slashes = useMemo(
     () => extractSlashes(stashId, allSlashes),
     [allSlashes, stashId]
@@ -375,6 +384,14 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
           </>
         )}
       </td>
+      <td className='hidden'>
+        {isSelectable && controllerId && (
+          <Checkbox
+            onChange={setSelected}
+            value={isSelected}
+          />
+        )}
+      </td>
     </tr>
   );
 }
@@ -385,4 +402,8 @@ export default React.memo(styled(Account)`
     margin-right: 0.25rem;
     vertical-align: inherit;
   }
+
+  .hidden {
+    display: none;
+  }
 `);

packages/page-staking/src/Actions/index.tsx

@@ -4,7 +4,7 @@
 import type { StakerState } from '@polkadot/react-hooks/types';
 import type { SortedTargets } from '../types';
 
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Button, Table, ToggleGroup } from '@polkadot/react-components';
 import { useAvailableSlashes } from '@polkadot/react-hooks';
@@ -113,6 +113,7 @@ function Actions ({ className = '', isInElection, ownStashes, targets }: Props):
   const { t } = useTranslation();
   const allSlashes = useAvailableSlashes();
   const [typeIndex, setTypeIndex] = useState(0);
+  const [, setSelected] = useState<[string, string][]>([]);
 
   const headerRef = useRef([
     [t('stashes'), 'start', 2],
@@ -134,19 +135,36 @@ function Actions ({ className = '', isInElection, ownStashes, targets }: Props):
     [ownStashes]
   );
 
-  const footer = useMemo(() => (
-    <tr>
-      <td colSpan={4} />
-      <td className='number'>{formatTotal(typeIndex, state)}</td>
-      <td colSpan={2} />
-    </tr>
-  ), [state, typeIndex]);
-
-  const filtered = useMemo(
-    () => state.foundStashes && filterStashes(typeIndex, state.foundStashes),
+  const [isSelectable, filtered, footer] = useMemo(
+    () => [
+      false, // [1, 2].includes(typeIndex)
+      state.foundStashes && filterStashes(typeIndex, state.foundStashes),
+      (
+        <tr key='footer'>
+          <td colSpan={4} />
+          <td className='number'>{formatTotal(typeIndex, state)}</td>
+          <td colSpan={2} />
+        </tr>
+      )
+    ],
     [state, typeIndex]
   );
 
+  const onSelectStash = useCallback(
+    (stashId: string, controllerId: string, isSelected: boolean) =>
+      setSelected((prev) =>
+        isSelected
+          ? [...prev, [stashId, controllerId]]
+          : prev.filter(([s]) => s !== stashId)
+      ),
+    []
+  );
+
+  useEffect(
+    () => setSelected([]),
+    [typeIndex]
+  );
+
   return (
     <div className={className}>
       <Button.Group>
@@ -176,7 +194,9 @@ function Actions ({ className = '', isInElection, ownStashes, targets }: Props):
             allSlashes={allSlashes}
             info={info}
             isDisabled={isInElection}
+            isSelectable={isSelectable}
             key={info.stashId}
+            onSelect={onSelectStash}
             targets={targets}
           />
         ))}

packages/page-staking/src/Payouts/index.tsx

@@ -226,16 +226,16 @@ function Payouts ({ className = '', isInElection, ownValidators }: Props): React
   return (
     <div className={className}>
       <Button.Group>
-        <ToggleGroup
-          onChange={setEraSelectionIndex}
-          options={eraSelection}
-          value={eraSelectionIndex}
-        />
         <ToggleGroup
           onChange={setMyStashesIndex}
           options={valOptions}
           value={myStashesIndex}
         />
+        <ToggleGroup
+          onChange={setEraSelectionIndex}
+          options={eraSelection}
+          value={eraSelectionIndex}
+        />
         <PayButton
           isAll
           isDisabled={isInElection}

packages/react-components/src/Button/Group.tsx

@@ -34,4 +34,8 @@ export default React.memo(styled(ButtonGroup)`
   .ui--CopyButton {
     display: inline-block;
   }
+
+  .ui--ToggleGroup {
+    float: left;
+  }
 `);