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 inStickyError?:boolean
stickyError?:string stickyError?:string
className?:string className?:string
style?:React.CSSProperties
} }
@observer @observer
@ -31,7 +32,7 @@ export default class LabeledFieldComponent extends React.Component<LabeledFieldC
classNames.push("has-error") 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> <StandardFieldComponent inError={inError} error={this.props.error} inStickyError={inStickyError} stickyError={this.props.stickyError}>{this.props.children}</StandardFieldComponent>
</fieldset>; </fieldset>;
} }

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

@ -41,7 +41,9 @@ interface FieldProps extends ClassNameable {
field: Field, field: Field,
placeholder?: string, placeholder?: string,
label?: string label?: string
inputClassNames?: string inputClassNames?: string,
style?: React.CSSProperties
inputStyle?: React.CSSProperties
} }
interface BasicFieldProps extends FieldProps { interface BasicFieldProps extends FieldProps {
@ -54,8 +56,8 @@ export const BasicField = observer((props: BasicFieldProps) => {
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.className} > className={props.className} style={props.style}>
{wrapInInputGroupWhenNeeded({ input: <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`} />, prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })} {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> </LabeledFieldComponent>
}) })
@ -68,9 +70,9 @@ export const SelectField = observer((props: SelectFieldProps) => {
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.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> </LabeledFieldComponent>
}) })
@ -84,9 +86,9 @@ export const TextareaField = observer((props: TextareaFieldProps) => {
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.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> </LabeledFieldComponent>
}) })
@ -105,7 +107,7 @@ export const CurrencyField = observer((props: CurrencyFieldProps) => {
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.className}> className={props.className} style={props.style}>
<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}
@ -115,7 +117,7 @@ export const CurrencyField = observer((props: CurrencyFieldProps) => {
allowNegative:allowNegative, allowNegative:allowNegative,
fixedDecimalScale:true fixedDecimalScale:true
})} })}
showMask={true} placeholderChar={'0'} showMask={true} placeholderChar={'0'} style={props.inputStyle}
/> />
</LabeledFieldComponent> </LabeledFieldComponent>