Merge pull request #185 from houdiniproject/fix_for_column_layouts
Fix for column layouts being wonky
This commit is contained in:
commit
da5c74d5d5
2 changed files with 50 additions and 18 deletions
|
@ -10,49 +10,78 @@ import ReactTextarea from "./form/ReactTextarea";
|
||||||
import ReactMaskedInput from "./form/ReactMaskedInput";
|
import ReactMaskedInput from "./form/ReactMaskedInput";
|
||||||
import createNumberMask from "../../lib/createNumberMask";
|
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
|
let field = props.field as HoudiniField
|
||||||
return <LabeledFieldComponent
|
return <LabeledFieldComponent
|
||||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
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 || ''}`}/>
|
<ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`}/>
|
||||||
</LabeledFieldComponent>
|
</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
|
let field = props.field as HoudiniField
|
||||||
return <LabeledFieldComponent
|
return <LabeledFieldComponent
|
||||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
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}/>
|
<ReactSelect field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} options={props.options}/>
|
||||||
|
|
||||||
</LabeledFieldComponent>
|
</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
|
let field = props.field as HoudiniField
|
||||||
return <LabeledFieldComponent
|
return <LabeledFieldComponent
|
||||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
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}/>
|
<ReactTextarea field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames}`} rows={props.rows}/>
|
||||||
|
|
||||||
</LabeledFieldComponent>
|
</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 field = props.field as HoudiniField
|
||||||
let currencySymbol = props.mustBeNegative ? "-$" : "$"
|
let currencySymbol = props.mustBeNegative ? "-$" : "$"
|
||||||
let allowNegative = props.allowNegative || !props.mustBeNegative
|
let allowNegative = props.allowNegative || !props.mustBeNegative
|
||||||
return <LabeledFieldComponent
|
return <LabeledFieldComponent
|
||||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
inStickyError={field.hasServerError} stickyError={field.serverError}
|
||||||
className={props.wrapperClassName} >
|
className={props.className} >
|
||||||
|
|
||||||
<ReactMaskedInput field={field} label={props.label} placeholder={props.placeholder}
|
<ReactMaskedInput field={field} label={props.label} placeholder={props.placeholder}
|
||||||
className={`form-control ${props.inputClassNames}`} guide={true}
|
className={`form-control ${props.inputClassNames}`} guide={true}
|
||||||
|
|
|
@ -2,22 +2,25 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {observer} from "mobx-react";
|
import {observer} from "mobx-react";
|
||||||
import * as _ from 'lodash'
|
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]
|
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)
|
const children = arrayify(props.children)
|
||||||
return <Row>
|
return <Row>
|
||||||
{
|
{
|
||||||
children.map((i:React.ReactElement<any>) => {
|
children.map((i:React.ReactElement<ClassNameable>) => {
|
||||||
let className = ""
|
let className = ""
|
||||||
if (_.last(children) !== i){
|
if (_.last(children) !== i){
|
||||||
className += " u-paddingRight--10"
|
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'}>
|
return <Column colSpan={6} breakSize={'sm'}>
|
||||||
{React.cloneElement(i, {className: className})}
|
{React.cloneElement(i, {className: className})}
|
||||||
|
@ -28,17 +31,17 @@ export const TwoColumnFields: React.StatelessComponent<{}> = (props:{children:Ar
|
||||||
|
|
||||||
TwoColumnFields.displayName = 'TwoColumnFields'
|
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)
|
const children = arrayify(props.children)
|
||||||
return <Row>
|
return <Row>
|
||||||
{
|
{
|
||||||
children.map((i:React.ReactElement<any>) => {
|
children.map((i:React.ReactElement<ClassNameable>) => {
|
||||||
let className = ""
|
let className = ""
|
||||||
if (_.last(children) !== i){
|
if (_.last(children) !== i){
|
||||||
className += " u-paddingRight--10"
|
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'}>
|
return <Column colSpan={4} breakSize={'sm'}>
|
||||||
{React.cloneElement(i, {className: className})}
|
{React.cloneElement(i, {className: className})}
|
||||||
|
@ -50,7 +53,7 @@ export const ThreeColumnFields: React.StatelessComponent<{}> = (props:{children:
|
||||||
ThreeColumnFields.displayName = 'ThreeColumnFields'
|
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">
|
return <div className="row">
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue