kradio3 / react-mdc-web

Material Design Components for React
https://kradio3.github.io/react-mdc-web/
MIT License
174 stars 25 forks source link

Where to write the <script/> required to run "lastRowFixedOnly" in Toolbar of mdc? #64

Open prakharrke opened 6 years ago

prakharrke commented 6 years ago

I am stuck as to lastRowFixedOnly requires a javascript to be run in order to make it work. Where should I write it? While defining the Component ToolBar, I wrote it in componentDidMount method but it gives me an error of mdc is not defined.

import React from "react";
import Toolbar from "react-mdc-web/lib/Toolbar/Toolbar";
import ToolbarRow from "react-mdc-web/lib/Toolbar/ToolbarRow";
import ToolbarSection from "react-mdc-web/lib/Toolbar/ToolbarSection";
import ToolbarTitle from "react-mdc-web/lib/Toolbar/ToolbarTitle";

export class Header extends React.Component{
  componentDidMount() {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.innerHTML = "var toolbar = mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar')); toolbar.fixedAdjustElement = document.querySelector('.mdc-toolbar-fixed-adjust');";
  document.body.appendChild(s);
  }
render(){

return(

  <Toolbar fixed fixedLastRowOnly>
  <ToolbarRow>
  <ToolbarSection>
  <h1>This is row 1</h1>
  </ToolbarSection>
</ToolbarRow>
 <ToolbarRow>
    <ToolbarSection>
    <ToolbarTitle>Title</ToolbarTitle>
   </ToolbarSection>
    </ToolbarRow>
    <ToolbarRow>
    <ToolbarSection>
    <ToolbarTitle>Title</ToolbarTitle>
  </ToolbarSection>
    </ToolbarRow>
  </Toolbar>
);
}
}
kradio3 commented 6 years ago

yes, that is exactly what i'm removing now, don't use it at the moment