All components moved to themr 😱

2016-05-26 21:17:25 +02:00 · 2016-05-26 21:17:25 +02:00 · a9e8304a84
parent d6bc5f5436
commit a9e8304a84
5 changed files with 87 additions and 64 deletions
--- a/components/tooltip/Tooltip.js
+++ b/components/tooltip/Tooltip.js
@ -1,67 +1,77 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';

-const Tooltip = (ComposedComponent) => class extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.any,
-    className: React.PropTypes.string,
-    onClick: React.PropTypes.func,
-    onMouseEnter: React.PropTypes.func,
-    onMouseLeave: React.PropTypes.func,
-    tooltip: React.PropTypes.string,
-    tooltipDelay: React.PropTypes.number,
-    tooltipHideOnClick: React.PropTypes.bool
-  };
+const Tooltip = (ComposedComponent) => {
+  class TooltippedComponent extends React.Component {
+    static propTypes = {
+      children: React.PropTypes.any,
+      className: React.PropTypes.string,
+      onClick: React.PropTypes.func,
+      onMouseEnter: React.PropTypes.func,
+      onMouseLeave: React.PropTypes.func,
+      theme: React.PropTypes.shape({
+        tooltip: React.PropTypes.string,
+        tooltipActive: React.PropTypes.string,
+        tooltipWrapper: React.PropTypes.string
+      }),
+      tooltip: React.PropTypes.string,
+      tooltipDelay: React.PropTypes.number,
+      tooltipHideOnClick: React.PropTypes.bool
+    };

-  static defaultProps = {
-    className: '',
-    tooltipDelay: 0,
-    tooltipHideOnClick: true
-  };
+    static defaultProps = {
+      className: '',
+      tooltipDelay: 0,
+      tooltipHideOnClick: true
+    };

-  state = {
-    active: false
-  };
+    state = {
+      active: false
+    };

-  handleMouseEnter = (event) => {
-    if (this.timeout) clearTimeout(this.timeout);
-    this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
-    if (this.props.onMouseEnter) this.props.onMouseEnter(event);
-  };
+    handleMouseEnter = (event) => {
+      if (this.timeout) clearTimeout(this.timeout);
+      this.timeout = setTimeout(() =>this.setState({active: true}), this.props.tooltipDelay);
+      if (this.props.onMouseEnter) this.props.onMouseEnter(event);
+    };

-  handleMouseLeave = (event) => {
-    if (this.timeout) clearTimeout(this.timeout);
-    if (this.state.active) this.setState({active: false});
-    if (this.props.onMouseLeave) this.props.onMouseLeave(event);
-  };
+    handleMouseLeave = (event) => {
+      if (this.timeout) clearTimeout(this.timeout);
+      if (this.state.active) this.setState({active: false});
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };

-  handleClick = (event) => {
-    if (this.timeout) clearTimeout(this.timeout);
-    if (this.props.tooltipHideOnClick) this.setState({active: false});
-    if (this.props.onClick) this.props.onClick(event);
-  };
+    handleClick = (event) => {
+      if (this.timeout) clearTimeout(this.timeout);
+      if (this.props.tooltipHideOnClick) this.setState({active: false});
+      if (this.props.onClick) this.props.onClick(event);
+    };

-  render () {
-    const {children, className, tooltip, tooltipDelay, tooltipHideOnClick, ...other} = this.props; //eslint-disable-line no-unused-vars
-    const composedClassName = ClassNames(style.root, className);
-    const tooltipClassName = ClassNames(style.tooltip, {
-      [style.active]: this.state.active
-    });
+    render () {
+      const {children, className, tooltip,
+        tooltipDelay, tooltipHideOnClick, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
+      const composedClassName = classnames(this.props.theme.tooltipWrapper, className);
+      const tooltipClassName = classnames(this.props.theme.tooltip, {
+        [this.props.theme.tooltipActive]: this.state.active
+      });

-    return (
-      <ComposedComponent
-        {...other}
-        className={composedClassName}
-        onClick={this.handleClick}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-      >
-        {children ? children : null}
-        <span data-react-toolbox="tooltip" className={tooltipClassName}>{tooltip}</span>
-      </ComposedComponent>
-    );
+      return (
+        <ComposedComponent
+          {...other}
+          className={composedClassName}
+          onClick={this.handleClick}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        >
+          {children ? children : null}
+          <span data-react-toolbox="tooltip" className={tooltipClassName}>{tooltip}</span>
+        </ComposedComponent>
+      );
+    }
  }
+
+  return themr('ToolboxTooltip')(TooltippedComponent);
 };

 export default Tooltip;
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@ -2,11 +2,14 @@

 A Tooltip is useful to show information on hover in any kind of component. We have a component that can be used as a **decorator** for any kind of component. You just have to take into account that the overflow in the component should be visible.

+Tooltips are themeable under the key `ToolboxTooltip`. Check the configuration at github.
+
 <!-- example -->
 ```jsx
 import Button from 'react-toolbox/lib/button';
 import Tooltip from 'react-toolbox/lib/tooltip';
 import Link from 'react-toolbox/lib/link';
+// Remember to provide a default theme using the provider

 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
@ -35,3 +38,11 @@ In any component you decorate with the Tooltip you'd get some additional props:
 | `tooltip`             | `String`      |               | The text string to use for the tooltip.|
 | `tooltipDelay`        | `Number`      |               | Amount of time in miliseconds spent before the tooltip is visible.|
 | `tooltipHideOnClick`  | `Boolean`     | `true`        | If true, the Tooltip hides after a click in the host component.|
+
+## Theming
+
+| Name     | Description|
+|:---------|:-----------|
+| `tooltip` | Added to the tooltip element.|
+| `tooltipActive` | Added to the root when the tooltip is active.|
+| `tooltipWrapper` | Wrapper for the root element used to position the tooltip.|
--- a/components/tooltip/theme.scss
+++ b/components/tooltip/theme.scss
@ -1,7 +1,7 @@
@import "../base";
@import "./config";

-.root {
+.tooltipWrapper {
  position: relative;
 }

@ -26,7 +26,7 @@
  transition: $animation-curve-default $tooltip-animation-duration transform;
  transform: scale(0) translateX(-50%);
  transform-origin: top left;
-  &.active {
+  &.tooltipActive {
    transform: scale(1) translateX(-50%);
  }
 }
--- a/spec/root.js
+++ b/spec/root.js
@ -3,11 +3,11 @@ import React from 'react';
 import { ThemeProvider } from 'react-css-themr';
 import theme from './theme';

-import AppBarToolbox from '../components/app_bar';
-import Avatar from './components/avatar';
-import ButtonToolbox from '../components/button';
+import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
+import Avatar from './components/avatar';
 import Button from './components/button';
+import ButtonToolbox from '../components/button';
 import Card from './components/card';
 import Checkbox from './components/checkbox';
 import Chip from './components/chip';
@ -22,18 +22,19 @@ import Menu from './components/menu';
 import Pickers from './components/pickers';
 import Progress from './components/progress';
 import Radio from './components/radio';
-import Snackbar from './components/snackbar';
 import Slider from './components/slider';
+import Snackbar from './components/snackbar';
 import Switch from './components/switch';
 import Table from './components/table';
 import Tabs from './components/tabs';
 import Tooltip from './components/tooltip';
+
 import style from './style';

 const Root = () => (
  <ThemeProvider theme={theme}>
    <div className={style.app}>
-      <AppBarToolbox className={style.appbar} fixed flat>
+      <AppBar className={style.appbar} fixed flat>
        <h1>React Toolbox <small>Spec {VERSION}</small></h1>
        <ButtonToolbox
          accent
@ -42,8 +43,7 @@ const Root = () => (
          floating
          onClick={() => {window.href = 'http://react-toolbox';}}
        />
-      </AppBarToolbox>
-
+      </AppBar>
      <Autocomplete />
      <Avatar />
      <Button />
--- a/spec/theme.js
+++ b/spec/theme.js
@ -26,6 +26,7 @@ import ToolboxSwitch from '../components/switch/theme.scss';
 import ToolboxTable from '../components/table/theme.scss';
 import ToolboxTabs from '../components/tabs/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
+import ToolboxTooltip from '../components/tooltip/theme.scss';

 export default defineTheme({
  ToolboxAppBar,
@ -54,5 +55,6 @@ export default defineTheme({
  ToolboxSwitch,
  ToolboxTable,
  ToolboxTabs,
-  ToolboxTimePicker
+  ToolboxTimePicker,
+  ToolboxTooltip
 });