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

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

@ -14,6 +14,29 @@ export interface ClassNameable {
className?: 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,
@ -22,7 +45,8 @@ interface FieldProps extends ClassNameable{
}
interface BasicFieldProps extends FieldProps {
prefixInputAddon?: JSX.Element
postfixInputAddon?: JSX.Element
}
export const BasicField = observer((props: BasicFieldProps) => {
@ -31,7 +55,7 @@ export const BasicField = observer((props:BasicFieldProps) =>{
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 || ''}`}/>
{wrapInInputGroupWhenNeeded({ input: <ReactInput field={field} label={props.label} placeholder={props.placeholder} className={`form-control ${props.inputClassNames || ''}`} />, prefixInputAddon: props.prefixInputAddon, postfixInputAddon: props.postfixInputAddon })}
</LabeledFieldComponent>
})

41
package-lock.json generated
View file

@ -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
}
}
},