ad8226a5c3
* WIP - merge edition of account name and tags * [WIP] - tests * Apply test improvements * Improve tests * Improve tests and use useCallback * WIP - add cancel button * Outside click * Add more tests * Apply styling * Add opacity on not editable elements * Remove unnecessary code and fix type of sidebar ref * Disable eslint rule * Place edit button within account menu buttons * Adjust test setup * Ato-lint fixes * Update styles * Apply review suggestions * Remove unused styles and change type of sidebar ref * Remove onCancel from useAccountInfo hook * Fix issue with edit button * Apply review suggestions, remove tests * Adjust tests * Simplify tests * Apply lint fixes * Change layout of buttons Co-authored-by: MiZiet <michalzietalak@o2.pl> Co-authored-by: Jaco Greeff <jacogr@gmail.com>
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
// Copyright 2017-2021 @polkadot/app-accounts authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import React, { useCallback, useState } from 'react';
|
|
|
|
import Sidebar from './Sidebar';
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
type State = [string | null, (() => void) | null];
|
|
|
|
type ToggleContext = undefined | (([address, onUpdateName]: State) => void);
|
|
|
|
const AccountSidebarToggle: React.Context<ToggleContext> = React.createContext<ToggleContext>(undefined);
|
|
|
|
function AccountSidebar ({ children }: Props): React.ReactElement<Props> {
|
|
const [[address, onUpdateName], setAddress] = useState<State>([null, null]);
|
|
|
|
const onClose = useCallback(
|
|
() => setAddress([null, null]),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<AccountSidebarToggle.Provider value={setAddress}>
|
|
{children}
|
|
{address && (
|
|
<Sidebar
|
|
address={address}
|
|
dataTestId='account-sidebar'
|
|
onClose={onClose}
|
|
onUpdateName={onUpdateName}
|
|
/>
|
|
)}
|
|
</AccountSidebarToggle.Provider>
|
|
);
|
|
}
|
|
|
|
export { AccountSidebarToggle };
|
|
|
|
export default React.memo(AccountSidebar);
|