Merge pull request #267 from epilgrim/feature/custom-icons
Enable any Component to behave as Iconold
commit
b2eca47c63
|
@ -2,7 +2,10 @@ import React from 'react';
|
||||||
import ClassNames from 'classnames';
|
import ClassNames from 'classnames';
|
||||||
|
|
||||||
const FontIcon = ({ children, className, value, ...other}) => {
|
const FontIcon = ({ children, className, value, ...other}) => {
|
||||||
const classes = ClassNames('material-icons', className);
|
const classes = ClassNames(
|
||||||
|
{'material-icons': !React.isValidElement(value)},
|
||||||
|
className
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<span className={classes} {...other} >
|
<span className={classes} {...other} >
|
||||||
{value}
|
{value}
|
||||||
|
@ -14,7 +17,7 @@ const FontIcon = ({ children, className, value, ...other}) => {
|
||||||
FontIcon.propTypes = {
|
FontIcon.propTypes = {
|
||||||
children: React.PropTypes.any,
|
children: React.PropTypes.any,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
value: React.PropTypes.string
|
value: React.PropTypes.any
|
||||||
};
|
};
|
||||||
|
|
||||||
FontIcon.defaultProps = {
|
FontIcon.defaultProps = {
|
||||||
|
|
|
@ -10,7 +10,7 @@ class Input extends React.Component {
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
error: React.PropTypes.string,
|
error: React.PropTypes.string,
|
||||||
floating: React.PropTypes.bool,
|
floating: React.PropTypes.bool,
|
||||||
icon: React.PropTypes.string,
|
icon: React.PropTypes.any,
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
maxLength: React.PropTypes.number,
|
maxLength: React.PropTypes.number,
|
||||||
multiline: React.PropTypes.bool,
|
multiline: React.PropTypes.bool,
|
||||||
|
|
|
@ -5,7 +5,8 @@ class InputTest extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
normal: 'Tony Stark',
|
normal: 'Tony Stark',
|
||||||
fixedLabel: '',
|
fixedLabel: '',
|
||||||
withIcon: ''
|
withIcon: '',
|
||||||
|
withCustomIcon: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChange = (name, value) => {
|
handleChange = (name, value) => {
|
||||||
|
@ -27,6 +28,7 @@ class InputTest extends React.Component {
|
||||||
<Input type='text' value='Read only' readOnly label='Phone Number' />
|
<Input type='text' value='Read only' readOnly label='Phone Number' />
|
||||||
<Input type='text' label='Disabled field' disabled />
|
<Input type='text' label='Disabled field' disabled />
|
||||||
<Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
|
<Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
|
||||||
|
<Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>A</span>} />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue