From dd5fcce79bfdfa62b6a80b0ecf0349fe51ac7432 Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Thu, 18 Apr 2019 13:38:37 -0500 Subject: [PATCH 1/2] 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 {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}> Date: Thu, 18 Apr 2019 13:53:11 -0500 Subject: [PATCH 2/2] Add style support to labels and inputs --- .../common/LabeledFieldComponent.tsx | 3 ++- javascripts/src/components/common/fields.tsx | 20 ++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/javascripts/src/components/common/LabeledFieldComponent.tsx b/javascripts/src/components/common/LabeledFieldComponent.tsx index 7ee200ab..fd6b0815 100644 --- a/javascripts/src/components/common/LabeledFieldComponent.tsx +++ b/javascripts/src/components/common/LabeledFieldComponent.tsx @@ -14,6 +14,7 @@ export interface LabeledFieldComponentProps inStickyError?:boolean stickyError?:string className?:string + style?:React.CSSProperties } @observer @@ -31,7 +32,7 @@ export default class LabeledFieldComponent extends React.Component + return
{this.props.children}
; } diff --git a/javascripts/src/components/common/fields.tsx b/javascripts/src/components/common/fields.tsx index 5bbee8a8..fa8be668 100644 --- a/javascripts/src/components/common/fields.tsx +++ b/javascripts/src/components/common/fields.tsx @@ -41,7 +41,9 @@ interface FieldProps extends ClassNameable { field: Field, placeholder?: string, label?: string - inputClassNames?: string + inputClassNames?: string, + style?: React.CSSProperties + inputStyle?: React.CSSProperties } interface BasicFieldProps extends FieldProps { @@ -54,8 +56,8 @@ export const BasicField = observer((props: BasicFieldProps) => { return - {wrapInInputGroupWhenNeeded({ input: , prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })} + className={props.className} style={props.style}> + {wrapInInputGroupWhenNeeded({ input: , prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })} }) @@ -68,9 +70,9 @@ export const SelectField = observer((props: SelectFieldProps) => { return + className={props.className} style={props.style}> - + }) @@ -84,9 +86,9 @@ export const TextareaField = observer((props: TextareaFieldProps) => { return + className={props.className} style={props.style}> - + }) @@ -105,7 +107,7 @@ export const CurrencyField = observer((props: CurrencyFieldProps) => { return + className={props.className} style={props.style}> { allowNegative:allowNegative, fixedDecimalScale:true })} - showMask={true} placeholderChar={'0'} + showMask={true} placeholderChar={'0'} style={props.inputStyle} />