Merge pull request #185 from houdiniproject/fix_for_column_layouts

Fix for column layouts being wonky

javascripts/src/components/common/fields.tsx

@@ -10,49 +10,78 @@ import ReactTextarea from "./form/ReactTextarea";
 import ReactMaskedInput from "./form/ReactMaskedInput";
 import createNumberMask from "../../lib/createNumberMask";
 
+export interface ClassNameable {
+  className?:string
+}
 
-export const BasicField = observer((props:{field:Field, placeholder?:string, label?:string, wrapperClassName?:string, inputClassNames?:string}) =>{
+interface FieldProps extends ClassNameable{
+  field:Field,
+  placeholder?:string,
+  label?:string
+  inputClassNames?:string
+}
+
+interface BasicFieldProps extends FieldProps {
+
+}
+
+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.wrapperClassName} >
+        className={props.className} >
         <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`}/>
     </LabeledFieldComponent>
 })
 
-export const SelectField = observer((props:{field:Field, placeholder?:string, label?:string, wrapperClassName?:string, inputClassNames?:string,  options?:Array<{id:any, name:string}>}) =>{
+interface SelectFieldProps extends FieldProps {
+  options?:Array<{id:any, name:string}>
+}
+
+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.wrapperClassName} >
+    className={props.className} >
 
     <ReactSelect field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} options={props.options}/>
 
   </LabeledFieldComponent>
 })
 
-export const TextareaField = observer((props:{field:Field, placeholder?:string, label?:string, wrapperClassName?:string, inputClassNames?:string, rows?:number}) =>{
+interface TextareaFieldProps extends FieldProps {
+    rows?:number
+}
+
+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.wrapperClassName} >
+    className={props.className} >
 
     <ReactTextarea field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} rows={props.rows}/>
 
   </LabeledFieldComponent>
 })
 
-export const CurrencyField = observer((props:{field:Field,placeholder?:string, label?:string, currencySymbol?:string, wrapperClassName?:string, inputClassNames?:string, mustBeNegative?:boolean, allowNegative?:boolean}) => {
+interface CurrencyFieldProps extends FieldProps {
+  currencySymbol?:string, 
+  mustBeNegative?:boolean, 
+  allowNegative?:boolean
+}
+
+
+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.wrapperClassName} >
+  className={props.className} >
 
       <ReactMaskedInput field={field} label={props.label} placeholder={props.placeholder}
                         className={`form-control ${props.inputClassNames}`} guide={true}

javascripts/src/components/common/layout.tsx

@@ -2,22 +2,25 @@
 import * as React from 'react';
 import {observer} from "mobx-react";
 import * as _ from 'lodash'
+import { ClassNameable } from './fields';
 
-function arrayify<T>(items: Array<T>|T){
+function arrayify<T>(items: T[]|T){
   return items instanceof Array ? items : [items]
 }
 
-export const TwoColumnFields: React.StatelessComponent<{}> = (props:{children:Array<React.ReactElement<any>>|React.ReactElement<any>}) => {
+type ClassNameableChildren = React.ReactElement<ClassNameable>[]|React.ReactElement<ClassNameable>
+
+export const TwoColumnFields: React.StatelessComponent<{children:ClassNameableChildren}> = (props) => {
     const children = arrayify(props.children)
     return <Row>
         {
-            children.map((i:React.ReactElement<any>) => {
+            children.map((i:React.ReactElement<ClassNameable>) => {
                 let className = ""
                 if (_.last(children) !== i){
                     className += " u-paddingRight--10"
                 }
-                if (i.props['className']){
+                if (i.props.className){
-                    className += i.props['className']
+                    className += i.props.className
                 }
                 return <Column colSpan={6} breakSize={'sm'}>
                  {React.cloneElement(i, {className: className})}
@@ -28,17 +31,17 @@ export const TwoColumnFields: React.StatelessComponent<{}> = (props:{children:Ar
 
 TwoColumnFields.displayName = 'TwoColumnFields'
 
-export const ThreeColumnFields: React.StatelessComponent<{}> = (props:{children:Array<React.ReactElement<any>>|React.ReactElement<any>}) => {
+export const ThreeColumnFields: React.StatelessComponent<{children:ClassNameableChildren}> = (props) => {
   const children = arrayify(props.children)
     return <Row>
         {
-          children.map((i:React.ReactElement<any>) => {
+          children.map((i:React.ReactElement<ClassNameable>) => {
                 let className = ""
                 if (_.last(children) !== i){
                     className += " u-paddingRight--10"
                 }
-                if (i.props['className']){
+                if (i.props.className){
-                    className += i.props['className']
+                    className += i.props.className
                 }
                 return <Column colSpan={4} breakSize={'sm'}>
                     {React.cloneElement(i, {className: className})}
@@ -50,7 +53,7 @@ export const ThreeColumnFields: React.StatelessComponent<{}> = (props:{children:
 ThreeColumnFields.displayName = 'ThreeColumnFields'
 
 
-export const Row: React.StatelessComponent<{}> = (props:{children:Array<React.ReactElement<any>>|React.ReactElement<any>}) => {
+export const Row: React.StatelessComponent<{}> = (props:{children:React.ReactElement<any>[]|React.ReactElement<any>}) => {
     return <div className="row">
         {props.children}
     </div>