94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
// Copyright 2017-2020 @polkadot/react-components authors & contributors
|
|
// This software may be modified and distributed under the terms
|
|
// of the Apache-2.0 license. See the LICENSE file for details.
|
|
|
|
import React, { useState } from 'react';
|
|
import styled from 'styled-components';
|
|
import { useDebounce } from '@polkadot/react-hooks';
|
|
|
|
import { useTranslation } from './translate';
|
|
import AddressToggle from './AddressToggle';
|
|
import Input from './Input';
|
|
|
|
interface Props {
|
|
available: string[];
|
|
className?: string;
|
|
help: React.ReactNode;
|
|
label: React.ReactNode;
|
|
maxCount: number;
|
|
onChange: (values: string[]) => void;
|
|
value: string[];
|
|
}
|
|
|
|
function InputAddressMulti ({ available, className, help, label, maxCount, onChange, value }: Props): React.ReactElement<Props> {
|
|
const { t } = useTranslation();
|
|
const [_filter, setFilter] = useState<string>('');
|
|
const filter = useDebounce(_filter);
|
|
|
|
const _onClick = (key: string): (isChecked: boolean) => void =>
|
|
(isChecked: boolean): void => {
|
|
let newValues = value.filter((address): boolean => address !== key);
|
|
|
|
if (isChecked) {
|
|
newValues = [key].concat(newValues).slice(0, maxCount);
|
|
}
|
|
|
|
onChange(newValues);
|
|
};
|
|
|
|
return (
|
|
<div className={`ui--InputAddressMulti ${className}`}>
|
|
<Input
|
|
autoFocus
|
|
className='ui--InputAddressMulti-Input'
|
|
help={help}
|
|
label={label}
|
|
onChange={setFilter}
|
|
placeholder={t('partial name, address or account index')}
|
|
value={_filter}
|
|
/>
|
|
<div className='ui--InputAddressMulti-container'>
|
|
{available.map((key): React.ReactNode => (
|
|
<AddressToggle
|
|
address={key}
|
|
filter={filter}
|
|
key={key}
|
|
onChange={_onClick(key)}
|
|
value={value.includes(key)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default styled(InputAddressMulti)`
|
|
.ui--InputAddressMulti-Input {
|
|
.ui.input {
|
|
margin-bottom: 0rem;
|
|
|
|
input {
|
|
border-bottom-width: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui--InputAddressMulti-container {
|
|
background: white;
|
|
border: 1px solid rgba(34,36,38,.15);
|
|
border-top-width: 0px;
|
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
margin-left: 2rem;
|
|
max-height: 15rem;
|
|
overflow-y: scroll;
|
|
padding: 0.25rem 0.5rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
.ui--AddressToggle {}
|
|
}
|
|
`;
|