Autoinject theme for Link
parent
e911a9f116
commit
731153da00
|
@ -9,6 +9,7 @@ export const DIALOG = 'RTDialog';
|
||||||
export const DROPDOWN = 'RTDropdown';
|
export const DROPDOWN = 'RTDropdown';
|
||||||
export const INPUT = 'RTInput';
|
export const INPUT = 'RTInput';
|
||||||
export const LAYOUT = 'RTLayout';
|
export const LAYOUT = 'RTLayout';
|
||||||
|
export const LINK = 'RTLink';
|
||||||
export const OVERLAY = 'RTOverlay';
|
export const OVERLAY = 'RTOverlay';
|
||||||
export const PROGRESS_BAR = 'RTProgressBar';
|
export const PROGRESS_BAR = 'RTProgressBar';
|
||||||
export const RIPPLE = 'RTRipple';
|
export const RIPPLE = 'RTRipple';
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import React from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import FontIcon from '../font_icon';
|
|
||||||
import { themr } from 'react-css-themr';
|
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 Link = ({active, children, className, count, icon, label, theme, ...others}) => {
|
||||||
const _className = classnames(theme.link, {
|
const _className = classnames(theme.link, {
|
||||||
|
@ -19,19 +20,19 @@ const Link = ({active, children, className, count, icon, label, theme, ...others
|
||||||
};
|
};
|
||||||
|
|
||||||
Link.propTypes = {
|
Link.propTypes = {
|
||||||
active: React.PropTypes.bool,
|
active: PropTypes.bool,
|
||||||
children: React.PropTypes.node,
|
children: PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: PropTypes.string,
|
||||||
count: React.PropTypes.number,
|
count: PropTypes.number,
|
||||||
icon: React.PropTypes.oneOfType([
|
icon: PropTypes.oneOfType([
|
||||||
React.PropTypes.string,
|
PropTypes.string,
|
||||||
React.PropTypes.element
|
PropTypes.element
|
||||||
]),
|
]),
|
||||||
label: React.PropTypes.string,
|
label: PropTypes.string,
|
||||||
theme: React.PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
active: React.PropTypes.string.isRequired,
|
active: PropTypes.string.isRequired,
|
||||||
icon: React.PropTypes.string.isRequired,
|
icon: PropTypes.string.isRequired,
|
||||||
link: React.PropTypes.string.isRequired
|
link: PropTypes.string.isRequired
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -40,4 +41,5 @@ Link.defaultProps = {
|
||||||
className: ''
|
className: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
export default themr('ToolboxLink')(Link);
|
export default themr(LINK)(Link);
|
||||||
|
export { Link };
|
||||||
|
|
|
@ -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 };
|
||||||
|
|
|
@ -5,32 +5,31 @@ The link is a very simple component that acts mostly as a wrapper for the HTML a
|
||||||
<!-- example -->
|
<!-- example -->
|
||||||
```jsx
|
```jsx
|
||||||
import Link from 'react-toolbox/lib/link';
|
import Link from 'react-toolbox/lib/link';
|
||||||
import theme from 'react-toolbox/lib/link/theme';
|
|
||||||
|
|
||||||
const LinksTest = () => (
|
const LinksTest = () => (
|
||||||
<nav>
|
<nav>
|
||||||
<Link active href="/#/components/link" label="Work" count={4} icon='business' theme={theme} />
|
<Link active href="/#/components/link" label="Work" count={4} icon='business' />
|
||||||
<Link href="/#/components/link" label="Blog" icon='speaker_notes' theme={theme} />
|
<Link href="/#/components/link" label="Blog" icon='speaker_notes' />
|
||||||
<Link href="/#/components/link" label="Explore" icon='explore' theme={theme} />
|
<Link href="/#/components/link" label="Explore" icon='explore' />
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
If you want to provide a theme via context, the component key is `RTLink`.
|
||||||
|
|
||||||
## Properties
|
## 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:
|
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|
|
| Name | Type | Default | Description|
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
| `active` | `Boolean` | `false` | If true, adds active style to link.|
|
| `active` | `Boolean` | `false` | If true, adds active style to link.|
|
||||||
| `className` | `String` | `''` | Sets a custom class name to add styles to the link.|
|
| `className` | `String` | `''` | Sets a custom class name to add styles to the link.|
|
||||||
| `count` | `Number` | | Sets a count number.|
|
| `count` | `Number` | | Sets a count number.|
|
||||||
| `icon` | `String` or `Element` | | An icon key string to include a `FontIcon` component in front of the text.|
|
| `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.|
|
| `label` | `String` | | The text string used for the text content of the link.|
|
||||||
|
|
||||||
## Theming
|
## Theme
|
||||||
|
|
||||||
You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxLink`, it should implement the following interface:
|
|
||||||
|
|
||||||
| Name | Description|
|
| Name | Description|
|
||||||
|:---------|:-----------|
|
|:---------|:-----------|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import '../components/commons.scss';
|
import '../components/commons.scss';
|
||||||
|
|
||||||
import ToolboxLink from '../components/link/theme.scss';
|
|
||||||
import ToolboxList from '../components/list/theme.scss';
|
import ToolboxList from '../components/list/theme.scss';
|
||||||
import ToolboxMenu from '../components/menu/theme.scss';
|
import ToolboxMenu from '../components/menu/theme.scss';
|
||||||
import ToolboxNavigation from '../components/navigation/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';
|
import ToolboxTooltip from '../components/tooltip/theme.scss';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
ToolboxLink,
|
|
||||||
ToolboxList,
|
ToolboxList,
|
||||||
ToolboxMenu,
|
ToolboxMenu,
|
||||||
ToolboxNavigation,
|
ToolboxNavigation,
|
||||||
|
|
Loading…
Reference in New Issue