Skip to content

Commit

Permalink
Merge pull request #5 from oskar-binary/shared_components
Browse files Browse the repository at this point in the history 
Shared components
  • Loading branch information
@klyanyi
klyanyi committed Sep 11, 2019
2 parents ccbfd2d + 81e236c commit 3239207
Show file tree
Hide file tree
Showing 11 changed files with 881 additions and 376 deletions.
184 changes: 106 additions & 78 deletions packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import MenuAccordion from 'App/Components/Elements/MenuAccordion';
import Lazy from 'App/Containers/Lazy';
import UILoader from '../../Elements/ui-loader.jsx';
import Icon from 'Assets/icon.jsx';
import { connect } from 'Stores/connect';

// Profile
const PersonalDetails = () => import('App/Containers/AccountManagementModal/Profile/personal-details.jsx');
Expand All @@ -18,13 +19,13 @@ const ProofOfIdentity = () => import('App/Containers/AccountManagementModal/Veri

// Security and Safety
const AccountLimits = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx');
const ApiToken = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/api-token.jsx');
const ConnectedApps = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/connected-apps.jsx');
const DerivPassword = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/DerivPassword');
const LoginHistory = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/login-history.jsx');
const SelfExclusion = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/self-exclusion.jsx');
const TwoFactorAuthentication = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/two-factor-authentication.jsx');
const Vpn = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/vpn.jsx');
// const ApiToken = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/api-token.jsx');
// const ConnectedApps = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/connected-apps.jsx');
const DerivPassword = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/DerivPassword/');
// const LoginHistory = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/login-history.jsx');
// const SelfExclusion = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/self-exclusion.jsx');
// const TwoFactorAuthentication = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/two-factor-authentication.jsx');
// const Vpn = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/vpn.jsx');

const modal_content = [
{
Expand Down Expand Up @@ -100,18 +101,18 @@ const modal_content = [
/>
)
},
{
label: localize('Self-exclusion'),
// eslint-disable-next-line react/display-name
value: () => (
<Lazy
ctor={SelfExclusion}
should_load={true}
has_progress={true}
/>
)
// {
// label: localize('Self-exclusion'),
// // eslint-disable-next-line react/display-name
// value: () => (
// <Lazy
// ctor={SelfExclusion}
// should_load={true}
// has_progress={true}
// />
// )

},
// },
{
label: localize('Account limits'),
// eslint-disable-next-line react/display-name
Expand All @@ -124,79 +125,102 @@ const modal_content = [
)

},
{
label: localize('Login history'),
// eslint-disable-next-line react/display-name
value: () => (
<Lazy
ctor={LoginHistory}
should_load={true}
has_progress={true}
/>
)
// {
// label: localize('Login history'),
// // eslint-disable-next-line react/display-name
// value: () => (
// <Lazy
// ctor={LoginHistory}
// should_load={true}
// has_progress={true}
// />
// )

},
{
label: localize('API token'),
// eslint-disable-next-line react/display-name
value: () => (
<Lazy
ctor={ApiToken}
should_load={true}
has_progress={true}
/>
)
// },
// {
// label: localize('API token'),
// // eslint-disable-next-line react/display-name
// value: () => (
// <Lazy
// ctor={ApiToken}
// should_load={true}
// has_progress={true}
// />
// )

},
{
label: localize('Connected apps'),
// eslint-disable-next-line react/display-name
value: () => (
<Lazy
ctor={ConnectedApps}
should_load={true}
has_progress={true}
/>
)
// },
// {
// label: localize('Connected apps'),
// // eslint-disable-next-line react/display-name
// value: () => (
// <Lazy
// ctor={ConnectedApps}
// should_load={true}
// has_progress={true}
// />
// )

},
{
label: localize('Two-factor authentication'),
// eslint-disable-next-line react/display-name
value: () => (
<Lazy
ctor={TwoFactorAuthentication}
should_load={true}
has_progress={true}
/>
)
// },
// {
// label: localize('Two-factor authentication'),
// // eslint-disable-next-line react/display-name
// value: () => (
// <Lazy
// ctor={TwoFactorAuthentication}
// should_load={true}
// has_progress={true}
// />
// )

},
{
label: localize('VPN'),
// eslint-disable-next-line react/display-name
value: () => (
<Lazy
ctor={Vpn}
should_load={true}
has_progress={true}
/>
)
// },
// {
// label: localize('VPN'),
// // eslint-disable-next-line react/display-name
// value: () => (
// <Lazy
// ctor={Vpn}
// should_load={true}
// has_progress={true}
// />
// )

}
// }
],
}
];

const Header = ({ text, currency }) => (
<>
{currency ?
<div className='account-management-modal-header'>
<h1>{text}</h1>
<div className='account-management-modal-header__icon-wrapper'>
<span>For your {currency} account</span>
<Icon icon='IconAccountsCurrency' type={currency.toLowerCase()} />
</div>
</div>
: <h1>{text}</h1>
}
</>)

const makeHeader = (header_text, currency) => {
const has_currency = header_text === 'Account limits';

if (has_currency) return <Header text={header_text} currency={currency} />

return <Header text={header_text} />
}

class ToggleAccountManagement extends React.PureComponent {
state = {
header: modal_content[0].sub_tab_list[0].label,
};

onChangeHeader = (header) => this.setState({ header });
onChangeHeader = header => this.setState({ header });

render() {
const { disableApp, enableApp, is_open } = this.props;
const { disableApp, enableApp, is_open, currency } = this.props;
const HeaderComponent = makeHeader(this.state.header, currency);

return (
<React.Suspense fallback={<UILoader />}>
Expand All @@ -207,12 +231,13 @@ class ToggleAccountManagement extends React.PureComponent {
className='account-management'
disableApp={disableApp}
enableApp={enableApp}
header={this.state.header}
header={HeaderComponent}
menu_type='accordion'
modal_content={modal_content}
is_open={is_open}
title={localize('Settings')}
toggleModal={this.props.toggleModal}
id='account-management-modal'
>
<MenuAccordion
alignment='center'
Expand All @@ -233,5 +258,8 @@ ToggleAccountManagement.propTypes = {
is_open : PropTypes.bool,
toggleModal: PropTypes.func,
};

export default ToggleAccountManagement;
export default connect(
({ client }) => ({
currency : client.currency,
})
)(ToggleAccountManagement);
36 changes: 26 additions & 10 deletions packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,33 @@
import React from 'react';
import { Scrollbars } from 'tt-react-custom-scrollbars';
import classNames from 'classnames';
import React from 'react';
import { Scrollbars } from 'tt-react-custom-scrollbars';

export const FormFooter = ({ children }) => (
<div className='account-management-form-footer'>{children}</div>
);

export const FormBody = ({ children, scroll_offset }) => (
<Scrollbars
autoHide
style={{
height: scroll_offset ? `calc(100% - ${scroll_offset})` : '100%',
}}
>
<div className='account-management-form-body'>{children}</div>
</Scrollbars>
<Scrollbars
autoHide
style={{
height: scroll_offset ? `calc(100% - ${scroll_offset})` : '100%',
}}
>
<div className='account-management-form-body'>{children}</div>
</Scrollbars>
);

export const FormSubHeader = ({ text }) => (
<h2 className='account-management-form-header'>{text}</h2>
);

export const TextContainer = ({ children }) => <div className='account-management-text-container'>{children}</div>

export const Text = ({ children, size, color, className }) => (
<p
className={classNames('account-management-text', className, {
'account-management-text--xsmall': size === 'xsmall',
'account-management-text--small': size === 'small',
'account-management-text--grey': color === 'grey',
})}>{children}</p>
);
Loading

0 comments on commit 3239207

Please sign in to comment.