diff options
Diffstat (limited to 'packages/forms/src/label')
-rw-r--r-- | packages/forms/src/label/index.tsx | 49 | ||||
-rw-r--r-- | packages/forms/src/label/styles.ts | 13 |
2 files changed, 62 insertions, 0 deletions
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx new file mode 100644 index 000000000..348b820c5 --- /dev/null +++ b/packages/forms/src/label/index.tsx | |||
@@ -0,0 +1,49 @@ | |||
1 | import classnames from 'classnames'; | ||
2 | import { Classes } from 'jss'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import React, { Component } from 'react'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import { IFormField } from '../typings/generic'; | ||
8 | |||
9 | import styles from './styles'; | ||
10 | |||
11 | interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> { | ||
12 | classes: Classes; | ||
13 | } | ||
14 | |||
15 | @observer | ||
16 | class Label extends Component<ILabel> { | ||
17 | static defaultProps = { | ||
18 | showLabel: true, | ||
19 | }; | ||
20 | |||
21 | render() { | ||
22 | const { | ||
23 | title, | ||
24 | showLabel, | ||
25 | classes, | ||
26 | className, | ||
27 | children, | ||
28 | htmlFor, | ||
29 | } = this.props; | ||
30 | |||
31 | return ( | ||
32 | <label | ||
33 | className={classnames({ | ||
34 | [`${className}`]: className, | ||
35 | })} | ||
36 | htmlFor={htmlFor} | ||
37 | > | ||
38 | {showLabel && ( | ||
39 | <span className={classes.label}>{title}</span> | ||
40 | )} | ||
41 | <div className={classes.content}> | ||
42 | {children} | ||
43 | </div> | ||
44 | </label> | ||
45 | ); | ||
46 | } | ||
47 | } | ||
48 | |||
49 | export default injectSheet(styles)(Label); | ||
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts new file mode 100644 index 000000000..64011a93d --- /dev/null +++ b/packages/forms/src/label/styles.ts | |||
@@ -0,0 +1,13 @@ | |||
1 | import { Theme } from '../../../theme/lib'; | ||
2 | |||
3 | export default (theme: Theme) => ({ | ||
4 | content: { | ||
5 | marginTop: 5, | ||
6 | }, | ||
7 | label: { | ||
8 | color: theme.labelColor, | ||
9 | }, | ||
10 | hasError: { | ||
11 | color: theme.brandDanger, | ||
12 | }, | ||
13 | }); | ||