From 731153da0026a7d9ead4e70a84f1adfe6b323523 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Sun, 29 May 2016 20:03:41 +0200 Subject: [PATCH] Autoinject theme for Link --- components/identifiers.js | 1 + components/link/Link.js | 32 +++++++++++++++++--------------- components/link/index.js | 10 +++++++++- components/link/readme.md | 23 +++++++++++------------ spec/theme.js | 2 -- 5 files changed, 38 insertions(+), 30 deletions(-) diff --git a/components/identifiers.js b/components/identifiers.js index fec4219a..1738d962 100644 --- a/components/identifiers.js +++ b/components/identifiers.js @@ -9,6 +9,7 @@ export const DIALOG = 'RTDialog'; export const DROPDOWN = 'RTDropdown'; export const INPUT = 'RTInput'; export const LAYOUT = 'RTLayout'; +export const LINK = 'RTLink'; export const OVERLAY = 'RTOverlay'; export const PROGRESS_BAR = 'RTProgressBar'; export const RIPPLE = 'RTRipple'; diff --git a/components/link/Link.js b/components/link/Link.js index 15810dcb..b7d076af 100644 --- a/components/link/Link.js +++ b/components/link/Link.js @@ -1,7 +1,8 @@ -import React from 'react'; +import React, { PropTypes } from 'react'; import classnames from 'classnames'; -import FontIcon from '../font_icon'; import { themr } from 'react-css-themr'; +import { LINK } from '../identifiers.js'; +import FontIcon from '../font_icon/FontIcon.js'; const Link = ({active, children, className, count, icon, label, theme, ...others}) => { const _className = classnames(theme.link, { @@ -19,19 +20,19 @@ const Link = ({active, children, className, count, icon, label, theme, ...others }; Link.propTypes = { - active: React.PropTypes.bool, - children: React.PropTypes.node, - className: React.PropTypes.string, - count: React.PropTypes.number, - icon: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.element + active: PropTypes.bool, + children: PropTypes.node, + className: PropTypes.string, + count: PropTypes.number, + icon: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element ]), - label: React.PropTypes.string, - theme: React.PropTypes.shape({ - active: React.PropTypes.string.isRequired, - icon: React.PropTypes.string.isRequired, - link: React.PropTypes.string.isRequired + label: PropTypes.string, + theme: PropTypes.shape({ + active: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired, + link: PropTypes.string.isRequired }) }; @@ -40,4 +41,5 @@ Link.defaultProps = { className: '' }; -export default themr('ToolboxLink')(Link); +export default themr(LINK)(Link); +export { Link }; diff --git a/components/link/index.js b/components/link/index.js index 5bda4e74..3dcfcf1b 100644 --- a/components/link/index.js +++ b/components/link/index.js @@ -1 +1,9 @@ -export default from './Link'; +import { themr } from 'react-css-themr'; +import { LINK } from '../identifiers.js'; +import { Link } from './Link.js'; +import theme from './theme.scss'; + +const ThemedLink = themr(LINK, theme)(Link); + +export default ThemedLink; +export { ThemedLink as Link }; diff --git a/components/link/readme.md b/components/link/readme.md index 5a6e0ec2..1de725eb 100644 --- a/components/link/readme.md +++ b/components/link/readme.md @@ -5,32 +5,31 @@ The link is a very simple component that acts mostly as a wrapper for the HTML a ```jsx import Link from 'react-toolbox/lib/link'; -import theme from 'react-toolbox/lib/link/theme'; const LinksTest = () => ( ); ``` +If you want to provide a theme via context, the component key is `RTLink`. + ## Properties You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties: | Name | Type | Default | Description| |:-----|:-----|:-----|:-----| -| `active` | `Boolean` | `false` | If true, adds active style to link.| -| `className` | `String` | `''` | Sets a custom class name to add styles to the link.| -| `count` | `Number` | | Sets a count number.| -| `icon` | `String` or `Element` | | An icon key string to include a `FontIcon` component in front of the text.| -| `label` | `String` | | The text string used for the text content of the link.| +| `active` | `Boolean` | `false` | If true, adds active style to link.| +| `className` | `String` | `''` | Sets a custom class name to add styles to the link.| +| `count` | `Number` | | Sets a count number.| +| `icon` | `String` or `Element` | | An icon key string to include a `FontIcon` component in front of the text.| +| `label` | `String` | | The text string used for the text content of the link.| -## Theming - -You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxLink`, it should implement the following interface: +## Theme | Name | Description| |:---------|:-----------| diff --git a/spec/theme.js b/spec/theme.js index ccc8d1ea..3684b4fe 100644 --- a/spec/theme.js +++ b/spec/theme.js @@ -1,6 +1,5 @@ import '../components/commons.scss'; -import ToolboxLink from '../components/link/theme.scss'; import ToolboxList from '../components/list/theme.scss'; import ToolboxMenu from '../components/menu/theme.scss'; import ToolboxNavigation from '../components/navigation/theme.scss'; @@ -15,7 +14,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss'; import ToolboxTooltip from '../components/tooltip/theme.scss'; export default { - ToolboxLink, ToolboxList, ToolboxMenu, ToolboxNavigation,