From 243644c144e70b9b9b8fab9010e79a2f1739a145 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Sat, 21 May 2016 18:57:49 +0200 Subject: [PATCH] Migrate input to themr --- components/input/Input.js | 48 +++++++++++++-------- components/input/readme.md | 20 +++++++-- components/input/{style.scss => theme.scss} | 8 ++-- spec/components/input.js | 4 +- 4 files changed, 53 insertions(+), 27 deletions(-) rename components/input/{style.scss => theme.scss} (98%) diff --git a/components/input/Input.js b/components/input/Input.js index 13f5d646..a587eb3e 100644 --- a/components/input/Input.js +++ b/components/input/Input.js @@ -1,7 +1,7 @@ import React from 'react'; -import ClassNames from 'classnames'; +import classnames from 'classnames'; +import { themr } from 'react-css-themr'; import FontIcon from '../font_icon'; -import style from './style'; class Input extends React.Component { static propTypes = { @@ -23,6 +23,20 @@ class Input extends React.Component { onFocus: React.PropTypes.func, onKeyPress: React.PropTypes.func, required: React.PropTypes.bool, + theme: React.PropTypes.shape({ + bar: React.PropTypes.string.isRequired, + counter: React.PropTypes.string.isRequired, + disabled: React.PropTypes.string.isRequired, + error: React.PropTypes.string.isRequired, + errored: React.PropTypes.string.isRequired, + hidden: React.PropTypes.string.isRequired, + hint: React.PropTypes.string.isRequired, + icon: React.PropTypes.string.isRequired, + input: React.PropTypes.string.isRequired, + inputElement: React.PropTypes.string.isRequired, + required: React.PropTypes.string.isRequired, + withIcon: React.PropTypes.string.isRequired + }), type: React.PropTypes.string, value: React.PropTypes.any }; @@ -52,22 +66,22 @@ class Input extends React.Component { render () { const { children, disabled, error, floating, hint, icon, label: labelText, maxLength, multiline, required, - type, value, ...others} = this.props; + theme, type, value, ...others} = this.props; const length = maxLength && value ? value.length : 0; - const labelClassName = ClassNames(style.label, {[style.fixed]: !floating}); + const labelClassName = classnames(theme.label, {[theme.fixed]: !floating}); - const className = ClassNames(style.root, { - [style.disabled]: disabled, - [style.errored]: error, - [style.hidden]: type === 'hidden', - [style.withIcon]: icon + const className = classnames(theme.input, { + [theme.disabled]: disabled, + [theme.errored]: error, + [theme.hidden]: type === 'hidden', + [theme.withIcon]: icon }, this.props.className); const valuePresent = value !== null && value !== undefined && value !== '' && !Number.isNaN(value); const InputElement = React.createElement(multiline ? 'textarea' : 'input', { ...others, - className: ClassNames(style.input, {[style.filled]: valuePresent}), + className: classnames(theme.inputElement, {[theme.filled]: valuePresent}), onChange: this.handleChange, ref: 'input', role: 'input', @@ -81,21 +95,21 @@ class Input extends React.Component { return (
{InputElement} - {icon ? : null} - + {icon ? : null} + {labelText ? : null} - {hint ? {hint} : null} - {error ? {error} : null} - {maxLength ? {length}/{maxLength} : null} + {hint ? {hint} : null} + {error ? {error} : null} + {maxLength ? {length}/{maxLength} : null} {children}
); } } -export default Input; +export default themr('ToolboxInput')(Input); diff --git a/components/input/readme.md b/components/input/readme.md index 630c2ebc..b5711138 100644 --- a/components/input/readme.md +++ b/components/input/readme.md @@ -48,9 +48,21 @@ class InputTest extends React.Component { | `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type| | `value` | `Any` | | Current value of the input element.| -## Methods +## Theming -The input is stateless but it includes two methods to be able to communicate with the DOM input node: +The input component uses `ToolboxInput` as theme context id and the configuration is available in the `_config.scss` as usual. Here is the class interface: -- `blur` to blur the input field. -- `focus` to focus the input field. +| Name | Description| +|:-----------|:-----------| +| `bar` | Used for the bar under the input.| +| `counter` | Used for the counter element.| +| `disabled` | Added to the root class when input is disabled.| +| `error` | Used for the text error.| +| `errored` | Added to the root class when input is errored.| +| `hidden` | Used when the input is hidden.| +| `hint` | Used for the hint text.| +| `icon` | Used for the icon in case the input has icon.| +| `input` | Used as root class for the component.| +| `inputElement` | Used for the HTML input element.| +| `required` | Used in case the input is required.| +| `withIcon` | Added to the root class if the input has icon.| diff --git a/components/input/style.scss b/components/input/theme.scss similarity index 98% rename from components/input/style.scss rename to components/input/theme.scss index 0e5f9b64..06913179 100644 --- a/components/input/style.scss +++ b/components/input/theme.scss @@ -1,7 +1,7 @@ @import "../base"; @import "./config"; -.root { +.input { position: relative; padding: $input-padding 0; &.withIcon { @@ -23,7 +23,7 @@ transition: color $animation-duration $animation-curve-default; } -.input { +.inputElement { display: block; width: 100%; padding: $input-field-padding 0; @@ -126,14 +126,14 @@ color: $input-text-label-color; } -.disabled > .input { +.disabled > .inputElement { color: $input-text-disabled-text-color; border-bottom-style: dotted; } .errored { padding-bottom: 0; - > .input { + > .inputElement { margin-top: 1px; border-bottom-color: $input-text-error-color; } diff --git a/spec/components/input.js b/spec/components/input.js index ecbe42d6..88da57c7 100644 --- a/spec/components/input.js +++ b/spec/components/input.js @@ -31,8 +31,8 @@ class InputTest extends React.Component { - P} /> - J} /> + + ); }