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 {props.children}
+}
+
+InputGroupAddon.displayName = "InputGroupAddon"
+
+function wrapInInputGroupWhenNeeded({ input, prefixInputAddon, postfixInputAddon }: { input: JSX.Element; prefixInputAddon?: JSX.Element; postfixInputAddon?: JSX.Element; }): JSX.Element {
+ const prefix = prefixInputAddon ? {prefixInputAddon} : false;
+
+ const postfix = postfixInputAddon ? {postfixInputAddon} : false;
+
+ if (prefix || postfix) {
+ return
+ {prefix}
+ {input}
+ {postfix}
+
+ }
+ 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
-
-
+export const BasicField = observer((props: BasicFieldProps) => {
+ let field = props.field as HoudiniField
+ return
+ {wrapInInputGroupWhenNeeded({ input: , prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })}
+
})
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
-
+
})
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
-
+
})
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
+ inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
+ inStickyError={field.hasServerError} stickyError={field.serverError}
+ className={props.className}>