From dd5fcce79bfdfa62b6a80b0ecf0349fe51ac7432 Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@wwahammy.com>
Date: Thu, 18 Apr 2019 13:38:37 -0500
Subject: [PATCH] Add support for input addon (from Bootstrap)

---
 javascripts/src/components/common/fields.tsx | 86 +++++++++++++-------
 package-lock.json                            | 41 +++++++---
 2 files changed, 85 insertions(+), 42 deletions(-)

diff --git a/javascripts/src/components/common/fields.tsx b/javascripts/src/components/common/fields.tsx
index 29793e25..5bbee8a8 100644
--- a/javascripts/src/components/common/fields.tsx
+++ b/javascripts/src/components/common/fields.tsx
@@ -1,9 +1,9 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
-import {observer} from "mobx-react";
-import {Field} from "../../../../types/mobx-react-form";
+import { observer } from "mobx-react";
+import { Field } from "../../../../types/mobx-react-form";
 import LabeledFieldComponent from "./LabeledFieldComponent";
-import {HoudiniField} from "../../lib/houdini_form";
+import { HoudiniField } from "../../lib/houdini_form";
 import ReactInput from "./form/ReactInput";
 import ReactSelect from './form/ReactSelect';
 import ReactTextarea from "./form/ReactTextarea";
@@ -11,77 +11,101 @@ import ReactMaskedInput from "./form/ReactMaskedInput";
 import createNumberMask from "../../lib/createNumberMask";
 
 export interface ClassNameable {
-  className?:string
+  className?: string
 }
 
-interface FieldProps extends ClassNameable{
-  field:Field,
-  placeholder?:string,
-  label?:string
-  inputClassNames?:string
+const InputGroupAddon: React.StatelessComponent<{ children: JSX.Element }> = (props) => {
+  return <span className="input-group-addon">{props.children}</span>
+}
+
+InputGroupAddon.displayName = "InputGroupAddon"
+
+function wrapInInputGroupWhenNeeded({ input, prefixInputAddon, postfixInputAddon }: { input: JSX.Element; prefixInputAddon?: JSX.Element; postfixInputAddon?: JSX.Element; }): JSX.Element {
+  const prefix = prefixInputAddon ? <InputGroupAddon>{prefixInputAddon}</InputGroupAddon> : false;
+
+  const postfix = postfixInputAddon ? <InputGroupAddon>{postfixInputAddon}</InputGroupAddon> : false;
+
+  if (prefix || postfix) {
+    return <div className="input-group">
+      {prefix}
+      {input}
+      {postfix}
+    </div>
+  }
+  else {
+    return input
+  }
+}
+
+interface FieldProps extends ClassNameable {
+  field: Field,
+  placeholder?: string,
+  label?: string
+  inputClassNames?: string
 }
 
 interface BasicFieldProps extends FieldProps {
-
+  prefixInputAddon?: JSX.Element
+  postfixInputAddon?: JSX.Element
 }
 
-export const BasicField = observer((props:BasicFieldProps) =>{
-    let field = props.field as HoudiniField
-    return <LabeledFieldComponent
-        inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
-        inStickyError={field.hasServerError} stickyError={field.serverError}
-        className={props.className} >
-        <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`}/>
-    </LabeledFieldComponent>
+export const BasicField = observer((props: BasicFieldProps) => {
+  let field = props.field as HoudiniField
+  return <LabeledFieldComponent
+    inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
+    inStickyError={field.hasServerError} stickyError={field.serverError}
+    className={props.className} >
+    {wrapInInputGroupWhenNeeded({ input: <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`} />, prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })}
+  </LabeledFieldComponent>
 })
 
 interface SelectFieldProps extends FieldProps {
-  options?:Array<{id:any, name:string}>
+  options?: Array<{ id: any, name: string }>
 }
 
-export const SelectField = observer((props:SelectFieldProps) =>{
+export const SelectField = observer((props: SelectFieldProps) => {
   let field = props.field as HoudiniField
   return <LabeledFieldComponent
     inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
     inStickyError={field.hasServerError} stickyError={field.serverError}
     className={props.className} >
 
-    <ReactSelect field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} options={props.options}/>
+    <ReactSelect field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} options={props.options} />
 
   </LabeledFieldComponent>
 })
 
 interface TextareaFieldProps extends FieldProps {
-    rows?:number
+  rows?: number
 }
 
-export const TextareaField = observer((props:TextareaFieldProps) =>{
+export const TextareaField = observer((props: TextareaFieldProps) => {
   let field = props.field as HoudiniField
   return <LabeledFieldComponent
     inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
     inStickyError={field.hasServerError} stickyError={field.serverError}
     className={props.className} >
 
-    <ReactTextarea field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} rows={props.rows}/>
+    <ReactTextarea field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} rows={props.rows} />
 
   </LabeledFieldComponent>
 })
 
 interface CurrencyFieldProps extends FieldProps {
-  currencySymbol?:string, 
-  mustBeNegative?:boolean, 
-  allowNegative?:boolean
+  currencySymbol?: string,
+  mustBeNegative?: boolean,
+  allowNegative?: boolean
 }
 
 
-export const CurrencyField = observer((props:CurrencyFieldProps) => {
+export const CurrencyField = observer((props: CurrencyFieldProps) => {
   let field = props.field as HoudiniField
   let currencySymbol = props.mustBeNegative ? "-$" : "$"
   let allowNegative = props.allowNegative || !props.mustBeNegative
   return <LabeledFieldComponent
-  inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
-  inStickyError={field.hasServerError} stickyError={field.serverError}
-  className={props.className} >
+    inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
+    inStickyError={field.hasServerError} stickyError={field.serverError}
+    className={props.className}>
 
       <ReactMaskedInput field={field} label={props.label} placeholder={props.placeholder}
                         className={`form-control ${props.inputClassNames}`} guide={true}
diff --git a/package-lock.json b/package-lock.json
index b98ca520..903db1be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9731,7 +9731,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -9752,12 +9753,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -9772,17 +9775,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -9899,7 +9905,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -9911,6 +9918,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -9925,6 +9933,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -9932,12 +9941,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -9956,6 +9967,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -10036,7 +10048,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -10048,6 +10061,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -10133,7 +10147,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -10169,6 +10184,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -10188,6 +10204,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -10231,12 +10248,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },