Validate input fields

Summary: Adds basic non-empty validation to title and description.

Reviewed By: mweststrate

Differential Revision: D18762778

fbshipit-source-id: 4bdbb550f4e740d399fbeaa9fb8170b801fc500e

src/ui/components/Input.tsx

@@ -10,14 +10,19 @@
 import styled from 'react-emotion';
 import {colors} from './colors';
 
-export const inputStyle = (compact: boolean, readOnly: boolean) => ({
+export const inputStyle = (props: {
-  border: `1px solid ${colors.light15}`,
+  compact: boolean;
+  valid: boolean;
+  readOnly: boolean;
+}) => ({
+  border: `1px solid ${props.valid ? colors.light15 : colors.red}`,
   borderRadius: 4,
   font: 'inherit',
   fontSize: '1em',
-  height: compact ? '17px' : '28px',
+
-  lineHeight: compact ? '17px' : '28px',
+  height: props.compact ? '17px' : '28px',
-  backgroundColor: readOnly ? colors.light02 : undefined,
+  lineHeight: props.compact ? '17px' : '28px',
+  backgroundColor: props.readOnly ? colors.light02 : undefined,
   '&:disabled': {
     backgroundColor: '#ddd',
     borderColor: '#ccc',
@@ -26,8 +31,20 @@ export const inputStyle = (compact: boolean, readOnly: boolean) => ({
 });
 
 const Input = styled('input')(
-  ({compact, readOnly}: {compact?: boolean; readOnly?: boolean}) => ({
+  ({
-    ...inputStyle(compact || false, readOnly || false),
+    compact,
+    valid,
+    readOnly,
+  }: {
+    compact?: boolean;
+    valid?: boolean;
+    readOnly?: boolean;
+  }) => ({
+    ...inputStyle({
+      compact: compact || false,
+      valid: valid !== false,
+      readOnly: readOnly === true,
+    }),
     padding: compact ? '0 5px' : '0 10px',
   }),
 );

src/ui/components/MultiLineInput.tsx

@@ -10,8 +10,8 @@
 import styled from 'react-emotion';
 import {colors} from './colors';
 
-export const multilineStyle = {
+export const multilineStyle = (props: {valid: boolean}) => ({
-  border: `1px solid ${colors.light15}`,
+  border: `1px solid ${props.valid === false ? colors.red : colors.light15}`,
   borderRadius: 4,
   font: 'inherit',
   fontSize: '1em',
@@ -24,12 +24,12 @@ export const multilineStyle = {
     borderColor: '#ccc',
     cursor: 'not-allowed',
   },
-};
-
-const MultiLineInput = styled('textarea')({
-  ...multilineStyle,
-  padding: '0 10px',
 });
+
+const MultiLineInput = styled('textarea')((props: {valid?: boolean}) => ({
+  ...multilineStyle({valid: props.valid === undefined || props.valid}),
+  padding: '0 10px',
+}));
 MultiLineInput.displayName = 'MultiLineInput';
 
 export default MultiLineInput;

src/ui/components/Textarea.tsx

@@ -11,8 +11,20 @@ import styled from 'react-emotion';
 import {inputStyle} from './Input';
 
 const Textarea = styled('textarea')(
-  ({compact, readOnly}: {compact?: boolean; readOnly?: boolean}) => ({
+  ({
-    ...inputStyle(compact || false, readOnly || false),
+    compact,
+    readOnly,
+    valid,
+  }: {
+    compact?: boolean;
+    readOnly?: boolean;
+    valid?: boolean;
+  }) => ({
+    ...inputStyle({
+      compact: compact || false,
+      readOnly: readOnly || false,
+      valid: valid !== false,
+    }),
     lineHeight: 'normal',
     padding: compact ? '5px' : '8px',
     resize: 'none',