Multiline Input and consistent alignment

shared/common-adapters/dumb.desktop.js

@@ -3,7 +3,7 @@ import React, {Component} from 'react'
 import _ from 'lodash'
 import type {DumbComponentMap} from '../constants/types/more'
 import type {IconType} from './icon.constants'
-import {Avatar, Button, Box, Checkbox, ChoiceList, Icon, ListItem, PopupMenu, StandardScreen, TabBar, Text} from './index'
+import {Avatar, Button, Box, Checkbox, ChoiceList, Icon, Input, SmallInput, ListItem, PopupMenu, StandardScreen, TabBar, Text} from './index'
 import {TabBarButton, TabBarItem} from './tab-bar'
 import {globalStyles, globalColors} from '../styles'
 import {iconMeta} from './icon.constants'
@@ -65,6 +65,92 @@ const iconMap: DumbComponentMap<IconHolder> = {
   },
 }
 
+const inputMap: DumbComponentMap<Input> = {
+  component: Input,
+  mocks: {
+    'Default Empty': {},
+    'Default Filled': {
+      value: 'Hello, World!',
+    },
+    'Hint Empty': {
+      hintText: 'Hello...',
+    },
+    'Floating Label Empty': {
+      floatingLabelText: 'Hello...',
+    },
+    'Floating Label Filled': {
+      floatingLabelText: 'Hello...',
+      value: 'Hello, World!',
+    },
+    'Floating Label Error': {
+      floatingLabelText: 'Hello...',
+      value: 'Hello, Worl',
+      errorText: 'Check your spelling',
+    },
+    'Floating Label Hint Empty': {
+      hintText: 'Hello!',
+      floatingLabelText: 'Hello...',
+    },
+    'Hint Multiline Empty': {
+      hintText: 'This is a very long hint that will hopefully wrap to two lines',
+      multiline: true,
+    },
+    'Floating Label Multiline Empty': {
+      floatingLabelText: 'Hello...',
+      multiline: true,
+    },
+    'Floating Label Multiline Filled': {
+      floatingLabelText: 'Hello...',
+      multiline: true,
+      value: 'Hello, World!',
+    },
+    'Floating Label Multiline Filled Long': {
+      floatingLabelText: 'Hello...',
+      multiline: true,
+      value: 'Hello,\nMy name is Max\nHow are you?',
+    },
+    'Small Empty': {
+      small: true,
+    },
+    'Small Filled': {
+      small: true,
+      value: 'Hello, World!',
+    },
+    'Small Hint Empty': {
+      small: true,
+      hintText: 'Hello...',
+    },
+  },
+}
+
+const smallInputMap: DumbComponentMap<SmallInput> = {
+  component: SmallInput,
+  mocks: {
+    'Default Empty': {
+      label: 'Greet:',
+      hintText: 'Hello...',
+      value: null,
+    },
+    'Default Filled': {
+      label: 'Greet:',
+      hintText: 'Hello...',
+      value: 'Hello, World!',
+    },
+    'Error Empty': {
+      label: 'Greet:',
+      hintText: 'Hello...',
+      errorState: true,
+      value: null,
+    },
+    'Error Filled': {
+      label: 'Greet:',
+      hintText: 'Hello...',
+      value: 'Hello, World!',
+      errorState: true,
+    },
+  },
+}
+
 const tabBarCustomButtons = selectedIndex => {
   const IconButton = ({selected, icon, badgeNumber, label}: any) => <TabBarButton label={label} source={{type: 'icon', icon}} selected={selected} badgeNumber={badgeNumber} style={{height: 40}} />
   const AvatarButton = ({selected, avatar, badgeNumber}: any) => <TabBarButton source={{type: 'avatar', avatar}} selected={selected} badgeNumber={badgeNumber} style={{flex: 1}} styleContainer={{height: 40}} />
@@ -246,6 +332,8 @@ export default {
   Checkbox: checkboxMap,
   ChoiceList: choiceListMap,
   Icon: iconMap,
+  Input: inputMap,
+  SmallInput: smallInputMap,
   ListItem: listItemMap,
   PopupMenu: popupMenuMap,
   StandardScreen: standardScreenMap,

shared/common-adapters/input.desktop.js

@@ -1,5 +1,4 @@
 // @flow
-import MultiLineInput from './multi-line-input.desktop'
 import React, {Component} from 'react'
 import type {Props} from './input'
 import {TextField} from 'material-ui'
@@ -65,31 +64,23 @@ class Input extends Component<void, Props, State> {
   }
 
   render () {
-    if (this.props.multiline) {
-      return (
-        <MultiLineInput
-          autoFocus={this.props.autoFocus}
-          errorText={this.props.errorText}
-          errorStyle={this.props.errorStyle}
-          onChange={event => this.onChange(event)}
-          onEnterKeyDown={this.props.onEnterKeyDown}
-          hintText={this.props.hintText}
-          style={this.props.style} />
-      )
-    }
-
     const style = this.props.small ? styles.containerSmall : styles.container
     const textStyle = this.props.small ? styles.inputSmall : styles.input
+    const textHeight = this.props.small ? 32 : (this.props.floatingLabelText ? 79 : 50)
+    const hintBottom = this.props.small ? 11 : (this.props.multiline ? 16 : 14)
 
     // HACK: We can't reset the text area style, so we need to counteract it by moving the wrapper up
     const multilineStyleFix = {
       height: 'auto',
       position: 'relative',
       // Other HACK: having a floating label affects position, but only in multiline
-      bottom: (this.props.floatingLabelText ? 30 : 5),
-      marginTop: 6,
+      bottom: (this.props.floatingLabelText ? 30 : 6),
+      // tweak distance between entered text and floating label to match single-line
+      marginTop: 1,
+      // tweak distance between entered text and underline to match single-line
+      marginBottom: -2,
     }
-    const inputStyle = this.props.multiline ? multilineStyleFix : {height: 'auto'}
+    const inputStyle = this.props.multiline ? multilineStyleFix : {height: 'auto', top: 3}
     const alignStyle = this.props.style && this.props.style.textAlign ? {textAlign: this.props.style.textAlign} : {textAlign: 'center'}
 
     const passwordVisible = this.props.type === 'passwordVisible'
@@ -106,18 +97,20 @@ class Input extends Component<void, Props, State> {
           floatingLabelStyle={styles.floatingLabelStyle}
           floatingLabelText={this.props.small ? undefined : this.props.floatingLabelText}
           fullWidth={true}
-          hintStyle={{...styles.hintStyle, ...(this.props.multiline ? {textAlign: 'center'} : {top: 3, bottom: 'auto'}), ...this.props.hintStyle}}
+          hintStyle={{bottom: hintBottom, ...styles.hintStyle, ...this.props.hintStyle}}
           hintText={this.props.hintText}
-          inputStyle={{...(this.props.small ? {} : {marginTop: 6}), ...inputStyle, ...alignStyle, ...this.props.inputStyle}}
+          inputStyle={{...(this.props.small ? {} : {marginTop: 4}), ...inputStyle, ...alignStyle, ...this.props.inputStyle}}
+          textareaStyle={{...alignStyle, overflow: 'overlay'}}
           name='name'
+          multiLine={this.props.multiline}
           onBlur={() => this.setState({focused: false})}
           onChange={event => this.onChange(event)}
           onFocus={() => this.setState({focused: true})}
           onKeyDown={e => this._onKeyDown(e)}
           ref={textField => (this._textField = textField)}
           rows={this.props.rows}
           rowsMax={this.props.rowsMax}
-          style={{...textStyle, ...globalStyles.flexBoxColumn, ...this.props.textStyle}}
+          style={{...textStyle, height: textHeight, transition: 'none', ...globalStyles.flexBoxColumn, ...this.props.textStyle}}
           type={password ? 'password' : 'text'}
           underlineFocusStyle={{...styles.underlineFocusStyle, ...this.props.underlineStyle}}
           underlineShow={this.props.underlineShow}
@@ -139,13 +132,11 @@ export const styles = {
   },
   input: {
     ...specialStyles.textInput,
-    height: 80,
   },
   inputSmall: {
     ...TextStyles.textBody,
     ...TextStyles.textSmallMixin,
-    height: 40,
-    lineHeight: '11px',
+    lineHeight: '16px',
   },
   underlineFocusStyle: {
     marginTop: 4,
@@ -173,7 +164,9 @@ export const styles = {
     color: globalColors.black_10,
     width: '100%',
     textAlign: 'center',
-    marginTop: -3,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
   },
   floatingLabelStyle: {
     ...globalStyles.fontSemibold,
@@ -182,6 +175,7 @@ export const styles = {
     fontSize: 24,
     lineHeight: '29px',
     position: 'inherit',
+    top: 36,
     transform: 'scale(1) translate3d(0, 0, 0)',
     transition: 'color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
   },
@@ -192,7 +186,7 @@ export const styles = {
     fontSize: 14,
     lineHeight: '29px',
     position: 'inherit',
-    transform: 'perspective(1px) scale(1) translate3d(2px, -29px, 0)',
+    transform: 'perspective(1px) scale(1) translate3d(2px, -26px, 0)',
     transformOrigin: 'center top',
   },
 }

shared/common-adapters/small-input.desktop.js

@@ -31,7 +31,7 @@ const styleContainer = {
 
 const styleLabel = (hasError: boolean) => ({
   position: 'absolute',
-  bottom: 6,
+  bottom: 7,
   left: 2,
   color: (hasError ? globalColors.red : globalColors.blue),
 })
@@ -45,7 +45,7 @@ const styleInputHint = {
   textAlign: 'left',
   marginLeft: 60,
   marginTop: 6,
-  top: undefined,
+  bottom: undefined,
 }
 
 const styleInputUser = {

shared/common-adapters/small-input.js.flow

@@ -6,7 +6,7 @@ export type SmallInputProps = {
   hintText: string,
   label: string,
   value: ?string,
-  onChange: (next: string) => void,
+  onChange?: (next: string) => void,
   errorState?: boolean,
   style?: Object,
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters', // Native only

shared/login/register/paper-key/index.render.desktop.js

@@ -14,6 +14,7 @@ const Render = ({onBack, onSubmit, onChangePaperKey, error, paperKey, waitingFor
       <Input
         autoFocus={true}
         multiline={true}
+        rowsMax={3}
         style={styles.input}
         errorText={error}
         hintText='opp blezzard tofi pando agg whi pany yaga jocket daubt bruwnstane hubit yas'
@@ -44,11 +45,11 @@ const styles = {
   },
   icon: {
     marginTop: 45,
-    marginBottom: 65,
   },
   input: {
     alignSelf: 'stretch',
     marginBottom: 55,
+    height: '4em',
   },
 }