NPO-Accounting/houdini
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add style support to labels and inputs

Browse source
This commit is contained in:
Eric Schultz 2019-04-18 13:53:11 -05:00
parent dd5fcce79b
commit e68239b3ee
2 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
javascripts/src/components/common/LabeledFieldComponent.tsx
View file

@ -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<LabeledFieldC
classNames.push("has-error")
}
return <fieldset className={classNames.join(" ")}><label htmlFor={this.props.inputId} className="control-label">{this.props.labelText}</label>
return <fieldset className={classNames.join(" ")} style={this.props.style}><label htmlFor={this.props.inputId} className="control-label">{this.props.labelText}</label>
<StandardFieldComponent inError={inError} error={this.props.error} inStickyError={inStickyError} stickyError={this.props.stickyError}>{this.props.children}</StandardFieldComponent>
</fieldset>;
}

20
javascripts/src/components/common/fields.tsx
View file

@ -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 <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 })}
className={props.className} style={props.style}>
{wrapInInputGroupWhenNeeded({ input: <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`} style={props.inputStyle}/>, prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })}
</LabeledFieldComponent>
})
@ -68,9 +70,9 @@ export const SelectField = observer((props: SelectFieldProps) => {
return <LabeledFieldComponent
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
inStickyError={field.hasServerError} stickyError={field.serverError}
className={props.className} >
className={props.className} style={props.style}>
<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} style={props.inputStyle}/>
</LabeledFieldComponent>
})
@ -84,9 +86,9 @@ export const TextareaField = observer((props: TextareaFieldProps) => {
return <LabeledFieldComponent
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
inStickyError={field.hasServerError} stickyError={field.serverError}
className={props.className} >
className={props.className} style={props.style}>
<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} style={props.inputStyle}/>
</LabeledFieldComponent>
})
@ -105,7 +107,7 @@ export const CurrencyField = observer((props: CurrencyFieldProps) => {
return <LabeledFieldComponent
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
inStickyError={field.hasServerError} stickyError={field.serverError}
className={props.className}>
className={props.className} style={props.style}>
<ReactMaskedInput field={field} label={props.label} placeholder={props.placeholder}
className={`form-control ${props.inputClassNames}`} guide={true}
@ -115,7 +117,7 @@ export const CurrencyField = observer((props: CurrencyFieldProps) => {
allowNegative:allowNegative,
fixedDecimalScale:true
})}
showMask={true} placeholderChar={'0'}
showMask={true} placeholderChar={'0'} style={props.inputStyle}
/>
</LabeledFieldComponent>