diff --git a/src/component/list.js b/src/component/list.js index c3ebd078e..c343f93bb 100644 --- a/src/component/list.js +++ b/src/component/list.js @@ -1,10 +1,18 @@ import React, { Component, PureComponent } from 'react'; -import { View, ListView, TouchableOpacity, StyleSheet } from 'react-native'; +import { + View, + ListView, + Picker, + TouchableOpacity, + StyleSheet, +} from 'react-native'; import PropTypes from 'prop-types'; import Text from './text'; import ForwardIcon from '../asset/icon/forward'; import { color, font } from './style'; +const SETTING_ITEM_HEIGHT = 60; + // // List Content // @@ -123,7 +131,7 @@ ListHeader.propTypes = { const iStyles = StyleSheet.create({ item: { - height: 60, + height: SETTING_ITEM_HEIGHT, }, name: { flex: 1, @@ -161,6 +169,38 @@ SettingItem.propTypes = { children: PropTypes.node, }; +// +// Setting Picker +// + +const settingPickerStyle = [ + itemStyles.item, + iStyles.item, + iStyles.name, + { + backgroundColor: 'transparent', + border: 'none', + fontFamily: 'OpenSans Regular', + maxHeight: SETTING_ITEM_HEIGHT, + }, +]; + +export const SettingPicker = ({ selectedValue, onValueChange, children }) => ( + + {children} + +); + +SettingPicker.propTypes = { + selectedValue: PropTypes.string.isRequired, + onValueChange: PropTypes.func.isRequired, + children: PropTypes.node, +}; + // // Setting Header // diff --git a/src/computed/setting.js b/src/computed/setting.js index 08cd52815..989e7d4a5 100644 --- a/src/computed/setting.js +++ b/src/computed/setting.js @@ -13,9 +13,6 @@ const ComputedSetting = store => { satUnitLabel: computed(() => getUnitLabel('sat')), bitUnitLabel: computed(() => getUnitLabel('bit')), btcUnitLabel: computed(() => getUnitLabel('btc')), - usdFiatLabel: computed(() => FIATS['usd'].displayLong), - eurFiatLabel: computed(() => FIATS['eur'].displayLong), - gbpFiatLabel: computed(() => FIATS['gbp'].displayLong), }); }; diff --git a/src/config.js b/src/config.js index f80868f5c..0db4a52d3 100644 --- a/src/config.js +++ b/src/config.js @@ -29,6 +29,24 @@ module.exports.FIATS = { usd: { display: '$', displayLong: 'US Dollar' }, eur: { display: '€', displayLong: 'Euro' }, gbp: { display: '£', displayLong: 'British Pound' }, + aud: { display: '$', displayLong: 'Australian Dollar' }, + brl: { display: 'R$', displayLong: 'Brazilian Real' }, + cad: { display: '$', displayLong: 'Canadian Dollar' }, + chf: { display: 'CHF', displayLong: 'Swiss Franc' }, + clp: { display: '$', displayLong: 'Chilean Peso' }, + cny: { display: '¥', displayLong: 'Chinese Yuan' }, + dkk: { display: 'kr', displayLong: 'Danish Krone' }, + hkd: { display: '$', displayLong: 'Hong Kong Dollar' }, + inr: { display: '₹', displayLong: 'Indian Rupee' }, + isk: { display: 'kr', displayLong: 'Icelandic Króna' }, + jpy: { display: '¥', displayLong: 'Japanese Yen' }, + krw: { display: '₩', displayLong: 'South Korean Won' }, + nzd: { display: '$', displayLong: 'New Zealand Dollar' }, + rub: { display: 'RUB', displayLong: 'Russian Ruble' }, + sek: { display: 'kr', displayLong: 'Swedish Krona' }, + sgd: { display: '$', displayLong: 'Singapore Dollar' }, + thb: { display: '฿', displayLong: 'Thai Baht' }, + twd: { display: 'NT$', displayLong: 'New Taiwan Dollar' }, }; module.exports.DEFAULT_UNIT = 'btc'; module.exports.DEFAULT_FIAT = 'usd'; diff --git a/src/view/setting-fiat.js b/src/view/setting-fiat.js index 73a1f1ec0..cc58f16b2 100644 --- a/src/view/setting-fiat.js +++ b/src/view/setting-fiat.js @@ -1,13 +1,14 @@ import React from 'react'; -import { StyleSheet, View } from 'react-native'; +import { Picker, StyleSheet, View } from 'react-native'; import { observer } from 'mobx-react'; import PropTypes from 'prop-types'; import Background from '../component/background'; import MainContent from '../component/main-content'; import { Header, Title } from '../component/header'; -import { Button, BackButton, RadioButton } from '../component/button'; -import { SettingItem } from '../component/list'; +import { Button, BackButton } from '../component/button'; +import { SettingPicker } from '../component/list'; import { color } from '../component/style'; +import { FIATS } from '../config'; // // Setting Fiat View @@ -26,6 +27,8 @@ const styles = StyleSheet.create({ }, }); +const fiatEntries = Object.entries(FIATS); + const SettingFiatView = ({ store, nav, setting }) => { return ( @@ -36,24 +39,21 @@ const SettingFiatView = ({ store, nav, setting }) => { - setting.setFiatCurrency({ fiat: 'usd' })} - > - - - setting.setFiatCurrency({ fiat: 'eur' })} - > - - - setting.setFiatCurrency({ fiat: 'gbp' })} + { + setting.setFiatCurrency({ fiat: itemValue }); + }} > - - + {fiatEntries.map(([fiatKey, { displayLong }]) => ( + + ))} + diff --git a/stories/component/list-story.js b/stories/component/list-story.js index 2dcd5ba0d..ec3ccd551 100644 --- a/stories/component/list-story.js +++ b/stories/component/list-story.js @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; +import { Picker, View } from 'react-native'; import { storiesOf } from '../storybook-react'; import { action } from '@storybook/addon-actions'; import Text from '../../src/component/text'; @@ -8,23 +9,46 @@ import { List, ListItem, ListHeader, + SettingItem, + SettingPicker, } from '../../src/component/list'; import { color } from '../../src/component/style'; -storiesOf('List', module).add('List Content', () => ( - - ({ id: String(i), data: 'foo' }))} - renderHeader={() => ( - - ID - Data - - )} - renderItem={item => } - /> - -)); +storiesOf('List', module) + .add('List Content', () => ( + + ({ id: String(i), data: 'foo' }))} + renderHeader={() => ( + + ID + Data + + )} + renderItem={item => } + /> + + )) + .add('Setting Item', () => ( + + + + + + + + + + + + )) + .add('Setting Picker', () => ( + + + + + + )); class CustomListItem extends PureComponent { render() { diff --git a/test/unit/action/setting.spec.js b/test/unit/action/setting.spec.js index d4ecc859e..34abf8df9 100644 --- a/test/unit/action/setting.spec.js +++ b/test/unit/action/setting.spec.js @@ -76,7 +76,7 @@ describe('Action Setting Unit Test', () => { }); it('should fall back to USD for unsupported fiat', async () => { - ipc.send.resolves('jp'); + ipc.send.resolves('no'); await setting.detectLocalCurrency(); expect(store.settings.fiat, 'to equal', 'usd'); expect(logger.error, 'was called with', /Detecting/, /Invalid fiat/); diff --git a/test/unit/computed/setting.spec.js b/test/unit/computed/setting.spec.js index dd5551c96..fc19ac18d 100644 --- a/test/unit/computed/setting.spec.js +++ b/test/unit/computed/setting.spec.js @@ -16,9 +16,6 @@ describe('Computed Settings Unit Tests', () => { expect(store.satUnitLabel, 'to be ok'); expect(store.bitUnitLabel, 'to be ok'); expect(store.btcUnitLabel, 'to be ok'); - expect(store.usdFiatLabel, 'to be ok'); - expect(store.eurFiatLabel, 'to be ok'); - expect(store.gbpFiatLabel, 'to be ok'); }); it('should display satoshis denominated in BTC', () => {