tleunen / react-mdl Goto Github PK
View Code? Open in Web Editor NEWReact Components for Material Design Lite
Home Page: https://tleunen.github.io/react-mdl/
License: MIT License
React Components for Material Design Lite
Home Page: https://tleunen.github.io/react-mdl/
License: MIT License
How do I add an onClick function to a MDL Button?
<Button primary={true} raised={true} ripple={true} onClick={this.doSomething}>Login</Button>
doSomething never gets called. It does work with onChange on a Checkbox. I checked the sources and it seems that the checkbox adds the onChange to the props, but button does not. Is that it, or should it work out of the box?
React 0.14 is out today.
I think we should write for it now and leave a note in readme for people still using 0.13.
Just have run tabs demo and found out this issue. Appears at least in chrome and firefox, didn't test in other browsers. Can you reproduce it?
I'm going to use that area to output some additional controls and see no problem except warning in the console.
Probably related: #8
Hi,
I've just started playing with react-mdl
and it looks quite promising !
One question though: as we only have CSS version of the modified MDL styles, I was wondering how best to change the styling, like the $color-primary
without going everywhere and replace all occurrences in the compiled CSS?
It would be awesome to have the modified SCSS files in this repo so that we can integrate them directly in our pipeline. SCSS files could be compiled into extra/material.css
for those wanting to use CSS directly and for backward compatibility.
For now, field errors can only be triggered by the pattern
props. But pattern
checks are limited (for instance. we cannot ask a server for field validity).
I found it useful to add an invalid
props to Textfield that triggers displaying error
props when it is set to true
Would you be willing to accept such PR ?
How can I change the primary color?
Thanks!
Errors are never shown because the is-invalid
className is not added when an error is set.
As documented on the mdl website .mdl-textfield__label
is required, it also contains the pseudo element that draws the underline.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="sample6" />
<label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
</div>
</div>
When using Textfield like
<MDL.Textfield
onChange={()=>{}}
className="home-page__search"
label="Search"
expandable={true}
expandableIcon={"search"}
/>
The .mdl-textfield__label
is not injected and the resultant dom looks like the following thus the underline is not rendered.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable home-page__search is-upgraded is-dirty" data-reactid=".0.$=1$/.0.0.2" data-upgraded=",MaterialTextfield">
<label class="mdl-button mdl-js-button mdl-button--icon" for="textfield-Search" data-reactid=".0.$=1$/.0.0.2.0" data-upgraded=",MaterialButton">
<i class="material-icons" data-reactid=".0.$=1$/.0.0.2.0.0">search</i>
</label>
<div class="mdl-textfield__expandable-holder" data-reactid=".0.$=1$/.0.0.2.1">
<input class="mdl-textfield__input" id="textfield-Search" data-reactid=".0.$=1$/.0.0.2.1.$textfield-Search">
</div>
</div>
PS: Excuse my english.
It would be great to allow passing needed component as a prop to use something other than button
.
For example I'd like to have a link that looks like a button and would be cool if react-mdl
could handle that.
See https://facebook.github.io/react/docs/animation.html#rendering-a-different-component
Also would be cool if it could "guess" what I'm trying to do based on passed props, i.e. if I pass href
then I want it to render a
tag.
See http://react-bootstrap.github.io/components.html#buttons-tags
Some examples:
<Button>button</Button>
<Button component="a">anchor tag</Button>
<Button href="#">anchor tag</Button>
<Button component={Link}>Link component from react-router</Button>
If you like the idea, but you're busy I could submit pull request.
I am running into an issue with the Tooltip
component in the latest release v0.14.0 where if there is an onClick handler on the child element it gets ignored like the tooltip is preventing propagation or something else.
Consider this sample code where the onClick never fires:
<Tooltip label="Delete this item">
<IconButton name="delete" onClick={() => console.log('TEST')} />
</Tooltip>
Could it be the new MDLComponent
or how the mdlUpgrade
is upgrading the tooltip which breaks any child events?
Before I upgraded, the tooltip never worked but it did not break the child events, but now it is the opposite. I was happy to see that the Tooltip works now, but had to rip it out as it broke the apps functionality. I am hoping there is a fix for this. Let me know your thoughts.
I'm trying react-mdl, but I get a error message in the console on some components like Card and Footer. For example, this is my class:
import React from 'react'
import { CardTitle, CardText, CardActions, CardMenu, Card, Icon, Button, IconButton } from 'react-mdl'
export default class Cards extends React.Component {
render() {
return (
<Card shadowLevel={0} style={{width: '320px', height: '320px'}}>
<CardTitle expand={true} style={{color: '#fff', background: 'url(http://www.getmdl.io/assets/demos/dog.png) bottom right 15% no-repeat #46B6AC'}}>Update</CardTitle>
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
</CardText>
<CardActions border={true}>
<Button colored={true}>View Updates</Button>
</CardActions>
</Card>
)
}
}
The MDL components are working fine when using MDL directly with div classes, but not with the react-mdl components.
I don't know what I'm doing wrong, I'm using these versions:
⇒ npm list | grep react
│ ├── [email protected]
│ ├── [email protected]
├── [email protected]
│ └── [email protected]
├─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
├─┬ [email protected]
├─┬ [email protected]
├─┬ [email protected]
├── [email protected]
UPDATE: Just found that importing the source file directly fixes the problem, but importing it from the npm lib does not work..
# works
import Card from '../../../node_modules/react-mdl/lib/card/Card'
# does not work
import Card from 'react-mdl'
# with class
export default class Cards extends React.Component {
render() {
return (
<Card shadowLevel={0} style={{width: '320px', height: '320px'}}>
test
</Card>
)
}
}
Want to open discussion on using the implicit attr=true syntax
Example:
<Button raised accent disabled>
// vs
<Button raised={ true } accent={ true } disabled={ true }>
As HTML generally accepts the former, and is much less verbose, I think having the implicit form would be appropriate
We should add tests to make sure there are no regressions when changing/adding new code...
Problem like in #8 the Navigation component injecting mdl-navigation__link class
when i try this
<Header title="Title">
<IconButton name="more_vert" id="demo-menu-lower-right" />
<Menu target="demo-menu-lower-right" align="right">
<MenuItem>Some Action</MenuItem>
<MenuItem>Another Action</MenuItem>
<MenuItem disabled={true}>Disabled Action</MenuItem>
<MenuItem>Yet Another Action</MenuItem>
</Menu>
</Header>
I get such a result
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-navigation__link" id="demo-menu-lower-right" data-reactid=".0.0.0.2.$=10:0" data-upgraded=",MaterialButton,MaterialRipple"><i class="material-icons" data-reactid=".0.0.0.2.$=10:0.0">more_vert</i><span class="mdl-button__ripple-container"><span class="mdl-ripple is-animating" style="width: 117.377640814848px; height: 117.377640814848px; transform: translate(-50%, -50%) translate(21px, 13px);"></span></span></button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect mdl-navigation__link mdl-js-ripple-effect--ignore-events" for="demo-menu-lower-right" data-reactid=".0.0.0.2.$=11:0" data-upgraded=",MaterialMenu,MaterialRipple" style="clip: rect(0px 196.765625px 192px 0px);"><li class="mdl-menu__item mdl-js-ripple-effect" data-reactid=".0.0.0.2.$=11:0.0" tabindex="-1" style="transition-delay: 0s;">Some Action<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li><li class="mdl-menu__item mdl-js-ripple-effect" data-reactid=".0.0.0.2.$=11:0.1" tabindex="-1" style="transition-delay: 0.06s;">Another Action<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li><li class="mdl-menu__item mdl-js-ripple-effect" disabled="" data-reactid=".0.0.0.2.$=11:0.2" tabindex="-1" style="transition-delay: 0.12s;">Disabled Action<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li><li class="mdl-menu__item mdl-js-ripple-effect" data-reactid=".0.0.0.2.$=11:0.3" tabindex="-1" style="transition-delay: 0.18s;">Yet Another Action<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li></ul>
function myHandler ( event ) {}
<input type='checkbox' onChange={ myHandler } />
Then, if I were to switch to use this library,
/* <input type='checkbox' onChange={ myHandler } /> */
<Checkbox onChange={ myHandler } />
it breaks.
It fires twice: once with the value, once with the Event.
I would much prefer to have my event handling all work the same: handle the event, let the handler work out what they find useful.
Please change to not intercept the native events.
Same request for Textfield and others.
Thanks for the library, by the way. It's so much easier than using all the mdl classnames
The Navigation:L10 component in injecting mdl-navigation__link class into the input tag in the Textfield component:
<div class="mdl-textfield__expandable-holder" data-reactid=".0.7.0.0.0.2.$=10:0.1">
<input class="mdl-textfield__input mdl-navigation__link" id="textfield-Search" value="" data-reactid=".0.7.0.0.0.2.$=10:0.1.$textfield-Search">
</div>
Create a gitter channel to discuss roadmap, issues, etc
I am using the react-model and react-mdl have an error when called
upgradeElement(React.findDOMNode(this))
TypeError: Cannot read property 'firstChild' of undefined
at Object.ReactMount.findComponentRoot
It may be replaced upgradeElement(React.findDOMNode(this)) by upgradeDom(), this solves the problem. What are some other ideas?
componentWillUnmount
is never called if the application uses the Layout component.
The Layout component in MDL modify the tree because it creates a container and move the initial node inside the newly created container, which seems to cause some issues for React.
The result of this is that componentWillUnmount
for the components inside Layout (which means all the components)
Not a lot of solutions here... Either we re-create the component ourselves, or we can find a good way to fix the initial MDL component. I'm for the later, and I'll try to find a good way to fix it.
cc @darkyen
It takes an option as the second parameter which can be "double" or "single" for double-quotes or single-quotes respectively. There is no default.
So what's the preferred style?
I'm asking because that rule is deprecated and should be replaced by native eslint option.
Since the comment from Garbee on google/material-design-lite#1210 (comment) and some troubles with how the table is setup currently I rewrote the DataTable to deliver more flexibility, for example having more interactivity with the checkbox'es, or giving specific widths to a column, I rewrote the DataTable.
I think there are certainly some improvements to make to my implementation, but was wondering if you'd be up for me refactoring it. My current (rudimentary) implementation can be found in this gist:
https://gist.github.com/janpieterz/6a74182debfaa61db7df
mdl is a micro-library which specifically states that it is not a framework and hence it does not deal with the framework savvy stuff. But react-mdl
differs to that as it is a binding of mdl into react.
As per md spec, meaningful transitions are extremely important to material design and though for mdl it is out-of-scope to dicuss that, I think we should either have some helpers or atleast a discussion on various animation techniques that can be used for material transitions in react.
In the material.css there is
.mdl-layout__header--seamed {
box-shadow: none;
}
It seems to me in the docs the mdl-layout__header--transparent has been written twice instead of mdl-layout__header-seemed for no shadow ? Maybe Add it I am also mentioning this issue on mdl page
I know that you just upgraded it to use stateless components, but I think it would be better to set displayName
as it will make debugging much easier for us and everyone else.
We can set displayName
as a static prop on class or as a name of a function (so babel will set it for us).
But I'm not sure if we can use stateless components and set function name dynamically.
Per the current README projects integrating react-mdl should use the material.js from the /demo/
but it is excluded using .npmignore
.
It would be nice if the customized material.js
is made available in the npm package. Maybe in a different folder?
I'm trying to implement http://www.getmdl.io/templates/dashboard/index.html with the react-mdl
module.
All of it except the header part of the drawer is possible to do. The top part of the drawer looks like this;
...
<header class="demo-drawer-header">
<img src="images/user.jpg" class="demo-avatar">
<div class="demo-avatar-dropdown">
<span>[email protected]</span>
<div class="mdl-layout-spacer"></div>
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons" role="presentation">arrow_drop_down</i>
<span class="visuallyhidden">Accounts</span>
<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span>
</button>
<div class="mdl-menu__container is-upgraded">
...stripped...
</div>
</div>
</header>
...
If I try to do this with the <Header>
component, it required one of the children to be a <HeaderTabs>
or <HeaderRow>
or it will just wrap it with a <HeaderRow>
.
I would like to avoid that wrapping. Can that be done?
When I use the linkState mixin:
Uncaught Error: Invariant Violation: Cannot provide a valueLink and a value or onChange event. If you want to use value or onChange, you probably don't want to use valueLink.
Any idea?
This might not be an error perse with react-mdl, but I'm unsure where else it would lie as off now.
I've got a couple of components, one is a header and the other one is a specific page.
The header component renders the MDL header tabs components. These work well and seem to be initialized ok (since if you don't they look different).
Then the page content has the tab panels in them.
What happens is that it actually does work, but it does not de-activate the other tabs. So effectively if you switch tabs, it only shows new tabs and keeps the other tabs content also rendered (the .is-active class stays on them).
I'm using React-Router and besides that there's not a lot of things that I think might have any relevance.
If I copy and paste the 'default' example made by mdl it works fine.
Any thoughts?
EDIT:
An image showing it happened in real life. After pressing all tabs this is shown. The content per tab is literally Tab x, and obviously in the image Tab 1- Tab 5 should not be visible there.
It does however 'enable' the tabs, so on first visit withouth pressing any tab button it looks like:
Hi,
I have "react": "0.14.0-rc1" in my project's package.json. When I try to install react-mdl, I get an error because of the peerDependency on react.
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected] || ^0.14.0
Thanks
a page contains Textfield and when hit a link change the route, it will throw this Error:
Uncaught Error: Invariant Violation: ReactMount: Root element ID differed from reactRootID.
the problem is in react's ReactMount.js: 631 findReactContainerForID(id)
var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(id);
var container = containersByReactRootID[reactRootID];
if ("production" !== process.env.NODE_ENV) {
var rootElement = rootElementsByReactRootID[reactRootID];
if (rootElement && rootElement.parentNode !== container) {
/*
the problem is here:
container == <body>
rootElement === <div class="mdl-layout__container">
rootElement.parentNode === null, but why ???? it should be the <body>
*/
It would make life much easier if the utils were exported, so you can make custom mdl components.
What's your vision on this?
Add a contributing guideline
Installed the package via npm. When trying to import it:
import { Button } from 'react-mdl';
I get the following errors:
ERROR in ./~/react-mdl/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/Spinner in G:\findx\node_modules\react-mdl
@ ./~/react-mdl/index.js 42:13-37
ERROR in ./~/react-mdl/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/Switch in G:\findx\node_modules\react-mdl
@ ./~/react-mdl/index.js 43:12-35
ERROR in ./~/react-mdl/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/Textfield in G:\findx\node_modules\react-mdl
@ ./~/react-mdl/index.js 46:15-41
ERROR in ./~/react-mdl/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/Tooltip in G:\findx\node_modules\react-mdl
@ ./~/react-mdl/index.js 47:13-37
There's no lib
folder in the package directory:
Pleasure to use this library. Just wondering if tab rippling is a planned feature? I tried just adding mdl-js-ripple-effect
to the tabs, evidently there is more to it than that.
Hi,
I would love to see this project directly intergarted with meteor.
The wrapper is nice ! but i wonder why are you not using the way recommended for dynamic content generation by material design team ?
Would be awesome if project jumps from 1.0.4 to latest.
The last of the 1.0x version released yesterday.
https://github.com/google/material-design-lite/releases
The Checkbox component doesn't ripple, compared to the Switch component that takes a ripple property.
Because of https://github.com/tleunen/react-mdl/blob/master/src/Textfield.js#L39 when there is no onchange handler connected to a textfield, it throws an error.
Here is an example that reproduces the error https://gist.github.com/Graf009/ddef4109d157046ac62a
Solution: #22
Right now you are forced to use onChange on all fields.
I would prefer to use valueLink instead and making onChange optional.
valueLink={this.linkState('name')}
Any plans to support this?
Seems like the order of the elements in the expandable textfield decides which direction it will expand is there a switch to control this ?
I noticed that some components (in my case tooltips) do not work after remount.
After some investigation I noticed that mdl expects root node of component as an argument, but tooltip returns wrapper around that node.
So I think we should try to upgrade/downgrade DOM node found using something like this:
React.findDOMNode(this.refs.mdlComponent || this)
Right now it uses a bunch of labels, just saying shouldn't it be ul ? seperate li's make it much simpler to style.
If in result of component render we've got empty attribute in DOM now, attribute should not be rendered at all.
So it should not be required too.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.