mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-09-19 18:25:36 +05:30
103 lines
3.3 KiB
JavaScript
103 lines
3.3 KiB
JavaScript
|
// @flow
|
|||
|
import type { OauthAppResponse } from 'services/api/oauth';
|
|||
|
import React from 'react';
|
|||
|
import { restoreScroll } from 'components/ui/scroll/scroll';
|
|||
|
import { FormattedMessage as Message } from 'react-intl';
|
|||
|
import { LinkButton } from 'components/ui/form';
|
|||
|
import { COLOR_GREEN } from 'components/ui';
|
|||
|
|
|||
|
import messages from '../ApplicationsIndex.intl.json';
|
|||
|
import styles from '../applicationsIndex.scss';
|
|||
|
import ApplicationItem from './ApplicationItem';
|
|||
|
|
|||
|
type Props = {
|
|||
|
applications: Array<OauthAppResponse>,
|
|||
|
deleteApp: string => Promise<any>,
|
|||
|
resetApp: (string, bool) => Promise<any>,
|
|||
|
clientId: ?string
|
|||
|
};
|
|||
|
|
|||
|
type State = {
|
|||
|
expandedApp: ?string
|
|||
|
};
|
|||
|
|
|||
|
export default class ApplicationsList extends React.Component<Props, State> {
|
|||
|
state = {
|
|||
|
expandedApp: null
|
|||
|
};
|
|||
|
|
|||
|
appsRefs: { [key: string]: ?HTMLDivElement } = {};
|
|||
|
|
|||
|
componentDidMount() {
|
|||
|
this.checkForActiveApp();
|
|||
|
}
|
|||
|
|
|||
|
componentDidUpdate() {
|
|||
|
this.checkForActiveApp();
|
|||
|
}
|
|||
|
|
|||
|
render() {
|
|||
|
const { applications, resetApp, deleteApp } = this.props;
|
|||
|
const { expandedApp } = this.state;
|
|||
|
|
|||
|
return (
|
|||
|
<div>
|
|||
|
<div className={styles.appsListTitleContainer}>
|
|||
|
<div className={styles.appsListTitle}>
|
|||
|
<Message {...messages.yourApplications} />
|
|||
|
</div>
|
|||
|
<LinkButton
|
|||
|
to="/dev/applications/new"
|
|||
|
label={messages.addNew}
|
|||
|
color={COLOR_GREEN}
|
|||
|
className={styles.appsListAddNewAppBtn}
|
|||
|
/>
|
|||
|
</div>
|
|||
|
<div className={styles.appsListContainer}>
|
|||
|
{applications.map((app) => (
|
|||
|
<div
|
|||
|
key={app.clientId}
|
|||
|
ref={(elem) => {
|
|||
|
this.appsRefs[app.clientId] = elem;
|
|||
|
}}
|
|||
|
>
|
|||
|
<ApplicationItem
|
|||
|
application={app}
|
|||
|
expand={app.clientId === expandedApp}
|
|||
|
onTileClick={this.onTileClick}
|
|||
|
onResetSubmit={resetApp}
|
|||
|
onDeleteSubmit={deleteApp}
|
|||
|
/>
|
|||
|
</div>
|
|||
|
))}
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
checkForActiveApp() {
|
|||
|
const { applications, clientId } = this.props;
|
|||
|
const { expandedApp } = this.state;
|
|||
|
|
|||
|
if (
|
|||
|
clientId
|
|||
|
&& expandedApp !== clientId
|
|||
|
&& applications.some((app) => app.clientId === clientId)
|
|||
|
) {
|
|||
|
requestAnimationFrame(() => this.onTileClick(clientId));
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
onTileClick = (clientId: string) => {
|
|||
|
const expandedApp
|
|||
|
= this.state.expandedApp === clientId ? null : clientId;
|
|||
|
|
|||
|
this.setState({ expandedApp }, () => {
|
|||
|
if (expandedApp !== null) {
|
|||
|
// TODO: @SleepWalker: мб у тебя есть идея, как это сделать более правильно и менее дёргано?
|
|||
|
setTimeout(() => restoreScroll(this.appsRefs[clientId]), 150);
|
|||
|
}
|
|||
|
});
|
|||
|
};
|
|||
|
}
|