diff --git a/src/components/ui/Form.jsx b/src/components/ui/Form.jsx index 0d671ec..23af7ac 100644 --- a/src/components/ui/Form.jsx +++ b/src/components/ui/Form.jsx @@ -70,6 +70,62 @@ export class Input extends Component { } } +export class LabeledInput extends Component { + static displayName = 'LabeledInput'; + + static propTypes = { + label: PropTypes.oneOfType([ + PropTypes.shape({ + id: PropTypes.string + }), + PropTypes.string + ]).isRequired, + id: PropTypes.string, + icon: PropTypes.string, + skin: PropTypes.oneOf(['dark', 'light']), + color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue']) + }; + + static contextTypes = { + intl: intlShape.isRequired + }; + + render() { + let { label } = this.props; + + let props = Object.assign({}, this.props); + + if (!props.id) { + props.id = uniqueId('input'); + } + + if (label && label.id) { + label = this.context.intl.formatMessage(label); + } + + return ( +
+ + +
+ ); + } + + setEl = (el) => { + this.el = el; + }; + + getValue() { + return this.el.getValue(); + } + + focus() { + this.el.focus(); + } +} + export class Checkbox extends Component { static displayName = 'Checkbox'; @@ -185,3 +241,9 @@ export class Form extends Component { } }; } + + +let lastId = 0; +function uniqueId(prefix = 'id') { + return `${prefix}${++lastId}`; +} diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss index 1ce8386..a209918 100644 --- a/src/components/ui/form.scss +++ b/src/components/ui/form.scss @@ -111,6 +111,12 @@ @include form-transition(); } +.textFieldLabel { + font-family: $font-family-title; + color: #666; + font-size: 18px; +} + @include input-theme('green', $green); @include input-theme('blue', $blue); @include input-theme('red', $red);