diff --git a/package.json b/package.json index f643d433..97e241d8 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,6 @@ "lodash": "^4.17.4", "object-path": "^0.11.4", "react": "^16.2.0", - "react-collapse": "^4.0.3", "react-dom": "^16.2.0", "react-i18next": "^7.3.1", "react-mortal": "^3.0.1", diff --git a/src/components/SettingsPage.js b/src/components/SettingsPage/Profile.js similarity index 96% rename from src/components/SettingsPage.js rename to src/components/SettingsPage/Profile.js index 9cc1dbb0..64eb6f08 100644 --- a/src/components/SettingsPage.js +++ b/src/components/SettingsPage/Profile.js @@ -16,7 +16,7 @@ import type { Settings } from 'types/common' import { saveSettings } from 'actions/settings' import { unlock } from 'reducers/application' -import Box from 'components/base/Box' +import Box, { Card } from 'components/base/Box' import Input from 'components/base/Input' import Button from 'components/base/Button' @@ -33,6 +33,7 @@ type Props = { unlock: Function, } type State = { + tab: number, inputValue: InputValue, } @@ -93,11 +94,9 @@ class SettingsPage extends PureComponent { render() { const { inputValue } = this.state - return (
- - {'settings'} + { - + ) } diff --git a/src/components/SettingsPage/index.js b/src/components/SettingsPage/index.js new file mode 100644 index 00000000..52f85f8b --- /dev/null +++ b/src/components/SettingsPage/index.js @@ -0,0 +1,70 @@ +// @flow + +import React, { PureComponent } from 'react' + +import Box from 'components/base/Box' +import Text from 'components/base/Text' +import Tabs from 'components/base/Tabs' + +import TabProfile from './Profile' + +class SettingsPage extends PureComponent { + state = { + tab: 'profile', + } + + handleChangeTab = tab => this.setState({ tab }) + + render() { + const { tab } = this.state + + return ( + + {'Settings'} +
{'Affichage'}
, + }, + { + key: 'money', + title: 'Monnaie', + render: () =>
{'Monnaie'}
, + }, + { + key: 'material', + title: 'Matériel', + render: () =>
{'Matériel'}
, + }, + { + key: 'app', + title: 'App (beta)', + render: () =>
{'App (beta)'}
, + }, + { + key: 'tools', + title: 'Outils', + render: () =>
{'Outils'}
, + }, + { + key: 'blockchain', + title: 'Blockchain', + render: () =>
{'Blockchain'}
, + }, + { + key: 'profile', + title: 'Profil', + render: () => , + }, + ]} + /> +
+ ) + } +} + +export default SettingsPage diff --git a/src/components/base/Tabs/index.js b/src/components/base/Tabs/index.js index d2b6040f..1615ff81 100644 --- a/src/components/base/Tabs/index.js +++ b/src/components/base/Tabs/index.js @@ -1,8 +1,8 @@ // @flow import React, { Fragment } from 'react' -import { Collapse } from 'react-collapse' import styled from 'styled-components' +import isString from 'lodash/isString' import type { Element } from 'react' @@ -13,6 +13,7 @@ const Tab = styled(Tabbable).attrs({ pb: 1, align: 'center', justify: 'center', + fontSize: 1, })` border-bottom: 2px solid transparent; border-bottom-color: ${p => (p.isActive ? p.theme.colors.blue : '')}; @@ -20,6 +21,7 @@ const Tab = styled(Tabbable).attrs({ font-weight: ${p => (p.isActive ? 'bold' : '')}; margin-bottom: -1px; outline: none; + cursor: ${p => (p.isActive ? 'default' : 'pointer')}; ` type Item = { @@ -34,17 +36,24 @@ type Props = { onTabClick: number => void, } -const Tabs = ({ items, index, onTabClick }: Props) => ( - - - {items.map((item, i) => ( - onTabClick(i)}> - {item.title} - - ))} - - {items[index] && {items[index].render()}} - -) +const Tabs = ({ items, index, onTabClick }: Props) => { + const item = isString(index) ? items.find(item => item.key === index) : items[index] + return ( + + + {items.map((item, i) => ( + onTabClick(i)} + > + {item.title} + + ))} + + {item && item.render()} + + ) +} export default Tabs diff --git a/yarn.lock b/yarn.lock index d476edf8..ddd2614e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7164,12 +7164,6 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.1.7, rc@^1.2.1: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-collapse@^4.0.3: - version "4.0.3" - resolved "https://registry.yarnpkg.com/react-collapse/-/react-collapse-4.0.3.tgz#b96de959ed0092a43534630b599a4753dd76d543" - dependencies: - prop-types "^15.5.8" - react-color@^2.11.4: version "2.13.8" resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.13.8.tgz#bcc58f79a722b9bfc37c402e68cd18f26970aee4"