Browse Source

Add tabs to SettingsPage

master
meriadec 7 years ago
parent
commit
543e115a42
No known key found for this signature in database GPG Key ID: 1D2FC2305E2CB399
  1. 1
      package.json
  2. 9
      src/components/SettingsPage/Profile.js
  3. 70
      src/components/SettingsPage/index.js
  4. 35
      src/components/base/Tabs/index.js
  5. 6
      yarn.lock

1
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",

9
src/components/SettingsPage.js → 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<Props, State> {
render() {
const { inputValue } = this.state
return (
<form onSubmit={this.handleSubmit}>
<Box p={3}>
<Box>{'settings'}</Box>
<Card>
<Box horizontal>
<input
type="checkbox"
@ -119,7 +118,7 @@ class SettingsPage extends PureComponent<Props, State> {
<Box>
<Button type="submit">Save</Button>
</Box>
</Box>
</Card>
</form>
)
}

70
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<Props, State> {
state = {
tab: 'profile',
}
handleChangeTab = tab => this.setState({ tab })
render() {
const { tab } = this.state
return (
<Box p={3} flow={4}>
<Text fontSize={5}>{'Settings'}</Text>
<Tabs
index={tab}
onTabClick={this.handleChangeTab}
items={[
{
key: 'display',
title: 'Affichage',
render: () => <div>{'Affichage'}</div>,
},
{
key: 'money',
title: 'Monnaie',
render: () => <div>{'Monnaie'}</div>,
},
{
key: 'material',
title: 'Matériel',
render: () => <div>{'Matériel'}</div>,
},
{
key: 'app',
title: 'App (beta)',
render: () => <div>{'App (beta)'}</div>,
},
{
key: 'tools',
title: 'Outils',
render: () => <div>{'Outils'}</div>,
},
{
key: 'blockchain',
title: 'Blockchain',
render: () => <div>{'Blockchain'}</div>,
},
{
key: 'profile',
title: 'Profil',
render: () => <TabProfile />,
},
]}
/>
</Box>
)
}
}
export default SettingsPage

35
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) => (
<Fragment>
<Box horizontal borderBottom borderWidth={1} borderColor="argile">
{items.map((item, i) => (
<Tab key={item.key} isActive={index === i} onClick={() => onTabClick(i)}>
{item.title}
</Tab>
))}
</Box>
{items[index] && <Collapse isOpened>{items[index].render()}</Collapse>}
</Fragment>
)
const Tabs = ({ items, index, onTabClick }: Props) => {
const item = isString(index) ? items.find(item => item.key === index) : items[index]
return (
<Fragment>
<Box horizontal borderBottom borderWidth={1} borderColor="argile">
{items.map((item, i) => (
<Tab
key={item.key}
isActive={isString(index) ? index === item.key : index === i}
onClick={() => onTabClick(i)}
>
{item.title}
</Tab>
))}
</Box>
{item && item.render()}
</Fragment>
)
}
export default Tabs

6
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"

Loading…
Cancel
Save