Add support for input addon (from Bootstrap)
This commit is contained in:
Eric Schultz
parent
da5c74d5d5
commit
dd5fcce79b
2 changed files with 85 additions and 42 deletions
|
|
@ -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 <span className="input-group-addon">{props.children}</span>
|
||||
}
|
||||
|
||||
InputGroupAddon.displayName = "InputGroupAddon"
|
||||
|
||||
function wrapInInputGroupWhenNeeded({ input, prefixInputAddon, postfixInputAddon }: { input: JSX.Element; prefixInputAddon?: JSX.Element; postfixInputAddon?: JSX.Element; }): JSX.Element {
|
||||
const prefix = prefixInputAddon ? <InputGroupAddon>{prefixInputAddon}</InputGroupAddon> : false;
|
||||
|
||||
const postfix = postfixInputAddon ? <InputGroupAddon>{postfixInputAddon}</InputGroupAddon> : false;
|
||||
|
||||
if (prefix || postfix) {
|
||||
return <div className="input-group">
|
||||
{prefix}
|
||||
{input}
|
||||
{postfix}
|
||||
</div>
|
||||
}
|
||||
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 <LabeledFieldComponent
|
||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
||||
className={props.className} >
|
||||
<ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`}/>
|
||||
</LabeledFieldComponent>
|
||||
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.className} >
|
||||
{wrapInInputGroupWhenNeeded({ input: <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`} />, prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })}
|
||||
</LabeledFieldComponent>
|
||||
})
|
||||
|
||||
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 <LabeledFieldComponent
|
||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
||||
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>
|
||||
})
|
||||
|
||||
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 <LabeledFieldComponent
|
||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
||||
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>
|
||||
})
|
||||
|
||||
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 <LabeledFieldComponent
|
||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
||||
className={props.className} >
|
||||
inputId={props.field.id} labelText={field.label} inError={field.hasError} error={field.error}
|
||||
inStickyError={field.hasServerError} stickyError={field.serverError}
|
||||
className={props.className}>
|
||||
|
||||
<ReactMaskedInput field={field} label={props.label} placeholder={props.placeholder}
|
||||
className={`form-control ${props.inputClassNames}`} guide={true}
|
||||
|
|
|
|||
41
package-lock.json
generated
41
package-lock.json
generated
|
|
@ -9731,7 +9731,8 @@
|
|||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -9752,12 +9753,14 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -9772,17 +9775,20 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -9899,7 +9905,8 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -9911,6 +9918,7 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -9925,6 +9933,7 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
|
@ -9932,12 +9941,14 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -9956,6 +9967,7 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -10036,7 +10048,8 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -10048,6 +10061,7 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -10133,7 +10147,8 @@
|
|||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -10169,6 +10184,7 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -10188,6 +10204,7 @@
|
|||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -10231,12 +10248,14 @@
|
|||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue