vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge and solve conflicts

old
Javi Velasco 2015-11-21 12:27:25 +01:00
parent ac5501b9a5 3507bcf5f4
commit af05a71544
12 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/button/index.jsx
View File

@ -21,6 +21,7 @@ class Button extends React.Component {
ripple: React.PropTypes.bool,
toggle: React.PropTypes.bool,
tooltip: React.PropTypes.string,
tooltipDelay: React.PropTypes.number,
type: React.PropTypes.string
};
@ -51,7 +52,7 @@ class Button extends React.Component {
render () {
const {accent, flat, floating, href, icon, label, loading, mini,
primary, raised, ripple, toggle, tooltip, ...others} = this.props;
primary, raised, ripple, toggle, tooltip, tooltipDelay, ...others} = this.props;
const element = href ? 'a' : 'button';
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
@ -70,8 +71,8 @@ class Button extends React.Component {
};
return React.createElement(element, props,
ripple ? <Ripple ref='ripple' loading={loading} /> : null,
tooltip ? <Tooltip className={style.tooltip} label={tooltip}/> : null,
ripple ? <Ripple ref='ripple' loading={loading}/> : null,
tooltip ? <Tooltip className={style.tooltip} delay={tooltipDelay} label={tooltip}/> : null,
icon ? <FontIcon className={style.icon} value={icon}/> : null,
label ? label : this.props.children
);

1
components/button/readme.md
View File

@ -51,6 +51,7 @@ const TestButtons = () => (
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
| `toggle` | `Boolean` | `false` | If true, the button will have a toggle icon look. |
| `tooptip` | `String` | | The value will be shown as a tooltip when the button is hovered. |
| `tooltipDelay` | `Number` | | Amount of time in milliseconds before the tooltip is visible.|
By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.

4
components/input/index.jsx
View File

@ -18,6 +18,8 @@ class Input extends React.Component {
onFocus: React.PropTypes.func,
onKeyPress: React.PropTypes.func,
required: React.PropTypes.bool,
tooltip: React.PropTypes.string,
tooltipDelay: React.PropTypes.number,
type: React.PropTypes.string,
value: React.PropTypes.any
};
@ -68,7 +70,7 @@ class Input extends React.Component {
<span className={style.bar}></span>
{ this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
{ this.renderUnderline() }
{ this.props.tooltip ? <Tooltip label={this.props.tooltip}/> : null }
{ this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null }
</div>
);
}

2
components/input/readme.md
View File

@ -45,6 +45,8 @@ class InputTest extends React.Component {
| `onFocus` | `Function` | | Callback function that is fired when components is focused.|
| `onKeyPress` | `Function` | | Callback function that is fired when a key is pressed.|
| `required` | `Boolean` | `false` | If true, the html input has a required value.|
| `tooptip` | `String` | | The value will be shown as a tooltip when the button is hovered. |
| `tooltipDelay` | `Number` | | Amount of time in milliseconds before the tooltip is visible.|
| `type` | `String` | `text` | Type of the input element. It can be a valid HTML5 input type|
| `value` | `String` | | Current value of the input element.|

2
components/snackbar/index.jsx
View File

@ -21,7 +21,7 @@ class Snackbar extends React.Component {
if (this.props.active && this.props.timeout) {
setTimeout(() => {
this.props.onTimeout(event, this);
}, this.props.timeout * 1000);
}, this.props.timeout);
}
}

2
components/snackbar/readme.md
View File

@ -44,5 +44,5 @@ class SnackbarTest extends React.Component {
| `label` | `String` | | Text to display in the content.|
| `onClick` | `Function` | | Callback function that will be called when the button action is clicked.|
| `onTimeout` | `Function` | | Callback function when finish the set timeout.|
| `timeout` | `Number` | | Amount of time after the Snackbar will be automatically hidden.|
| `timeout` | `Number` | | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
| `type` | `String` | | Indicates the action type. Can be `accept`, `warning` or `cancel`|

25
components/tooltip/index.jsx
View File

@ -7,11 +7,13 @@ const HIDE_TIMEOUT = 100;
class Tooltip extends React.Component {
static propTypes = {
className: React.PropTypes.string,
delay: React.PropTypes.number,
label: React.PropTypes.string
};
static defaultProps = {
className: ''
className: '',
delay: 0
};
state = {
@ -30,17 +32,18 @@ class Tooltip extends React.Component {
};
handleParentMouseOver = () => {
if (this.deferredHide) clearTimeout(this.deferredHide);
setTimeout(() => {
if (this.deferredHide) clearTimeout(this.deferredHide);
const node = ReactDOM.findDOMNode(this);
const parent = node.parentNode;
const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
const position = parent.getBoundingClientRect();
const node = ReactDOM.findDOMNode(this);
const parent = node.parentNode;
const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
const position = parent.getBoundingClientRect();
node.style.top = `${position.height - offset}px`;
node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
if (!this.state.active) this.setState({ active: true});
node.style.top = `${position.height - offset}px`;
node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
if (!this.state.active) this.setState({ active: true});
}, this.props.delay);
};
handleParentMouseOut = () => {

1
components/tooltip/readme.md
View File

@ -20,4 +20,5 @@ const TooltipTest = () => (
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Set a class to style the Component.|
| `delay` | `Number` | | Amount of time in miliseconds before the tooltip is visible.|
| `label` | `String` | | The text string to use for the tooltip.|

2
docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
View File

@ -26,7 +26,7 @@ class SnackbarTest extends React.Component {
active={this.state.active}
icon='question-answer'
label='Snackbar action cancel'
timeout={2}
timeout={2000}
onClick={this.handleSnackbarClick}
onTimeout={this.handleSnackbarTimeout}
type='cancel'

4
docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
View File

@ -1,7 +1,7 @@
const TooltipTest = () => (
<div>
<p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
<Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
<p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' delay={500}/></strong> adipiscing elit.</p>
<Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' tooltipDelay={100}/>
</div>
);

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-toolbox",
"version": "0.12.11",
"version": "0.12.12",
"homepage": "www.react-toolbox.com",
"description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
"author": "React Toolbox Team (http://github.com/react-toolbox)",

8
spec/components/tooltip.jsx
View File

@ -7,12 +7,12 @@ const TooltipTest = () => (
<section>
<h5>Tooltip</h5>
<p>Give information on :hover</p>
<Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' />
<Button icon='add' floating accent tooltip='Floating Tooltip' />
<Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' tooltipDelay={1000} />
<Button icon='add' floating accent tooltip='Floating Tooltip'/>
<Button icon='add' floating disabled tooltip='Floating can not be shown' />
<Input tooltip='lorem ipsum...'/>
<Input tooltip='lorem ipsum...' />
<p>
Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' delay={300} /></strong> adipiscing elit.
</p>
</section>
);