47913892cd
* Expansion to pools logic * Add filtering * Pass through own pools * Allow pool nominate tx * Start with account actions * Asho pool nominees * Nomination operational * Adjust table rows * BondExtra for pools * use availableBalance in calcs (w/ existential) * Re-use isAmountError check * Pass through actual pool info * s/id/poolId/ * Display payout stashes * Display points balance * OCD cleanups * claimPayout * Calculate pool claimable * Unbond * Fix Unbond max * Display remaining witldrawal eras * Stashed/Pooled selection * Withdraw unbonded * StakingRedeemable display * Renames as per metadata * Additional * s/pool/pools/ * PoolInfo display hints * Adjust usePoolInfo hook * Ordering adjustments * Additional dedupes * Combine queries * Combinations & renames * Flatten transform * Non-existent reward * bnMax sub * lint fixes * Bump API
101 lines
2.1 KiB
TypeScript
101 lines
2.1 KiB
TypeScript
// Copyright 2017-2022 @polkadot/react-components authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import React, { useCallback, useMemo } from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import { Button } from '@polkadot/react-components';
|
|
|
|
interface Option {
|
|
isDisabled?: boolean;
|
|
text: string;
|
|
value: number;
|
|
}
|
|
|
|
interface Props {
|
|
className?: string;
|
|
onChange: (index: number) => void;
|
|
options: (Option | null | false)[];
|
|
value: number;
|
|
}
|
|
|
|
interface ToggleProps {
|
|
index: number;
|
|
isDisabled?: boolean;
|
|
isSelected: boolean;
|
|
onChange: (index: number) => void;
|
|
text: string;
|
|
}
|
|
|
|
function ToggleIndex ({ index, isDisabled, isSelected, onChange, text }: ToggleProps): React.ReactElement<ToggleProps> {
|
|
const _onClick = useCallback(
|
|
(): void => {
|
|
!isDisabled && onChange(index);
|
|
},
|
|
[isDisabled, index, onChange]
|
|
);
|
|
|
|
return (
|
|
<Button
|
|
icon={isSelected ? 'check' : 'circle'}
|
|
isBasic
|
|
isDisabled={isDisabled}
|
|
isSelected={isSelected}
|
|
key={text}
|
|
label={text}
|
|
onClick={_onClick}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const ToggleIndexMemo = React.memo(ToggleIndex);
|
|
|
|
function ToggleGroup ({ className = '', onChange, options, value }: Props): React.ReactElement<Props> | null {
|
|
const available = useMemo(
|
|
() => options.filter((o): o is Option => !!o),
|
|
[options]
|
|
);
|
|
|
|
if (!available.length || !available[0].value) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={`ui--ToggleGroup ${className}`}>
|
|
{available.map(({ isDisabled, text }, index): React.ReactNode => (
|
|
<ToggleIndexMemo
|
|
index={index}
|
|
isDisabled={isDisabled}
|
|
isSelected={value === index}
|
|
key={index}
|
|
onChange={onChange}
|
|
text={text}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default React.memo(styled(ToggleGroup)`
|
|
display: inline-block;
|
|
margin-right: 1.5rem;
|
|
|
|
.ui--Button {
|
|
margin: 0;
|
|
|
|
&:not(:first-child) {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.ui--Icon {
|
|
width: 1em;
|
|
}
|
|
}
|
|
`);
|