Move NamedFieldSelect into field-mobile component to fix storybook

Author: tanx

src/component/field-mobile.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { StyleSheet, View, ViewPropTypes } from 'react-native';
+import RNPickerSelect from 'react-native-picker-select';
+import PropTypes from 'prop-types';
+import Text from './text';
+import ArrowDownIcon from '../asset/icon/arrow-down';
+import { color, font } from './style';
+
+//
+// Named Field Select
+//
+
+const namedSelectStyles = StyleSheet.create({
+  content: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderBottomColor: color.blackText,
+    borderBottomWidth: 1,
+  },
+  name: {
+    color: color.blackText,
+    fontSize: font.sizeM,
+    lineHeight: font.lineHeightM + 2 * 12,
+    marginRight: 15,
+  },
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+const pickerStyles = StyleSheet.create({
+  inputIOS: {
+    fontFamily: 'OpenSans Regular',
+    fontSize: font.sizeM,
+    lineHeight: font.lineHeightM + 3,
+    height: font.lineHeightM + 2 * 12,
+    color: color.blackText,
+    opacity: 0.75,
+  },
+  inputAndroid: {
+    fontFamily: 'OpenSans Regular',
+    fontSize: font.sizeM,
+    lineHeight: font.lineHeightM + 3,
+    height: font.lineHeightM + 2 * 12,
+    color: color.blackText,
+    opacity: 0.75,
+    padding: 0,
+  },
+});
+
+export const NamedFieldSelect = ({ name, style, ...props }) => (
+  <View style={[namedSelectStyles.content, style]}>
+    <Text style={namedSelectStyles.name}>{name}</Text>
+    <View style={namedSelectStyles.wrapper}>
+      <RNPickerSelect placeholder={{}} style={pickerStyles} {...props} />
+      <ArrowDownIcon height={22} width={22} stroke="#969596" />
+    </View>
+  </View>
+);
+
+NamedFieldSelect.propTypes = {
+  name: PropTypes.string,
+  style: ViewPropTypes.style,
+};

src/component/field.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import { Text as RNText, StyleSheet, View, ViewPropTypes } from 'react-native';
-import RNPickerSelect from 'react-native-picker-select';
 import PropTypes from 'prop-types';
 import { createStyles, maxWidth } from './media-query';
 import Text from './text';
-import ArrowDownIcon from '../asset/icon/arrow-down';
 import { TextInput, HorizontalExpandingTextInput } from './input';
 import { color, font, breakWidth } from './style';
 
@@ -102,52 +100,6 @@ NamedField.propTypes = {
   style: ViewPropTypes.style,
 };
 
-//
-// Named Field Select
-//
-
-const namedSelectStyles = StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
-
-const pickerStyles = StyleSheet.create({
-  inputIOS: {
-    fontFamily: 'OpenSans Regular',
-    fontSize: font.sizeM,
-    lineHeight: font.lineHeightM + 3,
-    height: font.lineHeightM + 2 * 12,
-    color: color.blackText,
-    opacity: 0.75,
-  },
-  inputAndroid: {
-    fontFamily: 'OpenSans Regular',
-    fontSize: font.sizeM,
-    lineHeight: font.lineHeightM + 3,
-    height: font.lineHeightM + 2 * 12,
-    color: color.blackText,
-    opacity: 0.75,
-    padding: 0,
-  },
-});
-
-export const NamedFieldSelect = ({ name, style, ...props }) => (
-  <View style={[namedStyles.content, style]}>
-    <Text style={namedStyles.name}>{name}</Text>
-    <View style={namedSelectStyles.wrapper}>
-      <RNPickerSelect placeholder={{}} style={pickerStyles} {...props} />
-      <ArrowDownIcon height={22} width={22} stroke="#969596" />
-    </View>
-  </View>
-);
-
-NamedFieldSelect.propTypes = {
-  name: PropTypes.string,
-  style: ViewPropTypes.style,
-};
-
 //
 // Detail Field
 //

src/view/pay-bitcoin-confirm-mobile.js

@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Background from '../component/background';
 import MainContent from '../component/main-content';
-import { NamedField, NamedFieldSelect } from '../component/field';
+import { NamedField } from '../component/field';
+import { NamedFieldSelect } from '../component/field-mobile';
 import { Header, Title } from '../component/header';
 import { CancelButton, BackButton, SmallGlasButton } from '../component/button';
 import Card from '../component/card';

stories/component/field-story.js

@@ -4,7 +4,6 @@ import { action } from '@storybook/addon-actions';
 import {
   InputField,
   NamedField,
-  NamedFieldSelect,
   DetailField,
   AmountInputField,
 } from '../../src/component/field';
@@ -14,11 +13,6 @@ storiesOf('Field', module)
     <InputField placeholder="Input Field" onChangeText={action('input')} />
   ))
   .add('Named Field', () => <NamedField name="Label">Named field</NamedField>)
-  .add('Named Field Select', () => (
-    <NamedFieldSelect name="Label" onPress={action('select')}>
-      Named field Select
-    </NamedFieldSelect>
-  ))
   .add('Detail Field', () => (
     <DetailField name="Label">Detail field</DetailField>
   ))

stories/screen-story.js

@@ -53,7 +53,6 @@ import PayLightningDoneMobile from '../src/view/pay-lightning-done-mobile';
 import PayBitcoin from '../src/view/pay-bitcoin';
 import PayBitcoinMobile from '../src/view/pay-bitcoin-mobile';
 import PayBitcoinConfirm from '../src/view/pay-bitcoin-confirm';
-import PayBitcoinConfirmMobile from '../src/view/pay-bitcoin-confirm-mobile';
 import PayBitcoinDone from '../src/view/pay-bitcoin-done';
 import PayBitcoinDoneMobile from '../src/view/pay-bitcoin-done-mobile';
 import PaymentFailed from '../src/view/payment-failed';
@@ -304,9 +303,6 @@ storiesOf('Screens', module)
   .add('Pay Bitcoin Confirm', () => (
     <PayBitcoinConfirm store={store} payment={payment} nav={nav} />
   ))
-  .add('Pay Bitcoin Confirm (Mobile)', () => (
-    <PayBitcoinConfirmMobile store={store} payment={payment} nav={navMobile} />
-  ))
   .add('Pay Bitcoin Done', () => <PayBitcoinDone payment={payment} nav={nav} />)
   .add('Pay Bitcoin Done (Mobile)', () => (
     <PayBitcoinDoneMobile payment={payment} nav={navMobile} />