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

Add support for input addon (from Bootstrap)

Browse source
This commit is contained in:
Eric Schultz 2019-04-18 13:38:37 -05:00
parent da5c74d5d5
commit dd5fcce79b
2 changed files with 85 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,9 @@
// License: LGPL-3.0-or-later // License: LGPL-3.0-or-later
import * as React from 'react'; import * as React from 'react';
import {observer} from "mobx-react"; import { observer } from "mobx-react";
import {Field} from "../../../../types/mobx-react-form"; import { Field } from "../../../../types/mobx-react-form";
import LabeledFieldComponent from "./LabeledFieldComponent"; import LabeledFieldComponent from "./LabeledFieldComponent";
import {HoudiniField} from "../../lib/houdini_form"; import { HoudiniField } from "../../lib/houdini_form";
import ReactInput from "./form/ReactInput"; import ReactInput from "./form/ReactInput";
import ReactSelect from './form/ReactSelect'; import ReactSelect from './form/ReactSelect';
import ReactTextarea from "./form/ReactTextarea"; import ReactTextarea from "./form/ReactTextarea";
@ -11,77 +11,101 @@ import ReactMaskedInput from "./form/ReactMaskedInput";
import createNumberMask from "../../lib/createNumberMask"; import createNumberMask from "../../lib/createNumberMask";
export interface ClassNameable { export interface ClassNameable {
className?:string className?: string
} }
interface FieldProps extends ClassNameable{ const InputGroupAddon: React.StatelessComponent<{ children: JSX.Element }> = (props) => {
field:Field, return <span className="input-group-addon">{props.children}</span>
placeholder?:string, }
label?:string
inputClassNames?:string 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 { interface BasicFieldProps extends FieldProps {
prefixInputAddon?: JSX.Element
postfixInputAddon?: JSX.Element
} }
export const BasicField = observer((props:BasicFieldProps) =>{ 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.className} > className={props.className} >
<ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`}/> {wrapInInputGroupWhenNeeded({ input: <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`} />, prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })}
</LabeledFieldComponent> </LabeledFieldComponent>
}) })
interface SelectFieldProps extends FieldProps { 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 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.className} > 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>
}) })
interface TextareaFieldProps extends FieldProps { 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 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.className} > 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>
}) })
interface CurrencyFieldProps extends FieldProps { interface CurrencyFieldProps extends FieldProps {
currencySymbol?:string, currencySymbol?: string,
mustBeNegative?:boolean, mustBeNegative?: boolean,
allowNegative?:boolean allowNegative?: boolean
} }
export const CurrencyField = observer((props:CurrencyFieldProps) => { 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.className} > 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}

41
package-lock.json generated
View file

@ -9731,7 +9731,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -9752,12 +9753,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -9772,17 +9775,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -9899,7 +9905,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -9911,6 +9918,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -9925,6 +9933,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -9932,12 +9941,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -9956,6 +9967,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -10036,7 +10048,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -10048,6 +10061,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -10133,7 +10147,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -10169,6 +10184,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -10188,6 +10204,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -10231,12 +10248,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },