Add a quick way to make one css reference to another (reassign style to another) ?

[eromoe]

Hi,

I am facing a problem about seleted style of navigation, in reactjs (but I think feature may be very common)

The official example is:

<Drawer permanent>
  <DrawerSpacer>
    Directions
  </DrawerSpacer>
  <Navigation>
    <a href='#' selected><Icon name='directions_bus'/>Bus</a>
    <a href='#'><Icon name='directions_railway'/>Railway</a>
    <a href='#'><Icon name='directions_bike'/>Bike</a>
  </Navigation>
</Drawer>

---

I replace a with NavLink :

<Drawer permanent style={{
  "height": "inherit",
  "minHeight": "100%"
}}>
  <DrawerSpacer>
    Corpus
  </DrawerSpacer>
  <Navigation>
    <NavLink to={'/annotator'}><Icon name='insert_chart'/>Articles</NavLink>
    <NavLink to={'/'}><Icon name='library_books'/>Viewer</NavLink>
    <NavLink to={'#'}><Icon name='description'/>Viewer</NavLink>
  </Navigation>
</Drawer>

NavLink is made by { Link } from 'react-router' :

import React, { Component } from 'react';
import { Link } from 'react-router'

class NavLink extends Component {
  render() {
    let isActive = this.context.router.isActive(this.props.to, true);
    let className = isActive ? "active" : "";

    return (
      <li className={className}>
        <Link {...this.props}/>
      </li>
    );
  }
}

NavLink.contextTypes = {
  router: React.PropTypes.object
};

export default NavLink;

Since react-router 's Link doesn't accept a property named seleted, I have to apply the
[selected] style to .active .

I only know basic sass, just wonder is there any quick way to do something like

.active = Drawer.Navigation[selected]

to reassign the style.

Or, should I post such request to https://github.com/material-components/material-components-web ?
I am not sure this should be react level or sass level.

[kradio3]

Hi @eromoe , have a look at this file
https://github.com/kradio3/react-mdc-web/blob/master/docs/pages/_template.jsx
There are also react-router.Links in Navigation with selected states. All childs of Navigation will be extended for 'selected' property by navigationItem
I think the problem is because you wrap <Link> into <li>
Could you please temporary remove <li> wrapping from NavLink? And comment here does it solve "selected" issue.

[eromoe]

Nope,

Link selected(not work)

NavLink selected(works)

selected has to be attribute of Navigation's children.
I want NavLink can auto selected itself by current router path, so I need put selected inside it.

---

Detail :

l Looked your code

const Navigation = ({ className, children, temporary, ...otherProps }) => {
  const navigationItems = React.Children.map(children, item =>
    navigationItem(item, temporary),
  );

selected attribute must be set in children of Navigation . That's the problem.

I have :

LeftSideBar

const LeftSideBar = ({children}) => (
  <Drawer permanent className="sidebar-left" >
    <Navigation className="navigation">
      {children}
    </Navigation>
  </Drawer>
);

NavLink

class NavLink extends Component {
  render() {
    let isActive = this.context.router.route.location.pathname === this.props.to;
    let className = isActive ? "active" : "";

    return (
      <Link {...this.props} selected={ isActive } />
    );
  }
}

index.js

          <LeftSideBar>
            <NavLink to={`/corpus/${corpusId}/`} ><Icon name='insert_chart'/>Documents</NavLink>
            <NavLink to={`/corpus/${corpusId}/tags`}><Icon name='library_books'/>Tags</NavLink>
            <NavLink to={`/corpus/${corpusId}/annotator`}><Icon name='description'/>Annotator</NavLink>
          </LeftSideBar>

Because Navigation 's children is NavLink , not Link , so seleted not work.

[eromoe]

material-ui brings a solution,
https://material-ui-1dab0.firebaseapp.com/guides/composition/