Create `Cell.Input` component

1 files changed, 37 insertions, 1 deletions

diff --git a/gui/packages/desktop/src/renderer/components/Cell.js b/gui/packages/desktop/src/renderer/components/Cell.js
index 95259568eb..5653af0ae3 100644
--- a/gui/packages/desktop/src/renderer/components/Cell.js
+++ b/gui/packages/desktop/src/renderer/components/Cell.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Button, Text, Component, Styles, Types, View } from 'reactxp';
+import { Button, Component, Styles, Text, TextInput, Types, View } from 'reactxp';
 import PlainImg from './Img';
 import { colors } from '../../config';
 
@@ -61,6 +61,29 @@ const styles = {
     }),
   },
 
+  input: {
+    view: Styles.createViewStyle({
+      flexGrow: 1,
+      paddingLeft: 12,
+      paddingRight: 12,
+      paddingTop: 8,
+      paddingBottom: 8,
+      marginRight: 3,
+      borderWidth: 2,
+      borderRadius: 8,
+      borderColor: 'transparent',
+    }),
+    text: Styles.createTextStyle({
+      color: colors.blue,
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      textAlign: 'center',
+    }),
+  },
+
   cellHover: Styles.createViewStyle({
     backgroundColor: colors.blue80,
   }),
@@ -149,6 +172,19 @@ export function Label({
   );
 }
 
+export function Input({ style, ...otherProps }: Types.TextInputProps) {
+  return (
+    <TextInput
+      maxLength={10}
+      placeholderTextColor={colors.blue40}
+      autoCorrect={false}
+      autoFocus={false}
+      style={[styles.input.text, styles.input.view, style]}
+      {...otherProps}
+    />
+  );
+}
+
 export type SubTextProps = {
   children: React.Node,
   cellHoverStyle?: Types.ViewStyle,