`
61 | titleBorder | bool| undefined | Adds border to title container | -
62 | subtitle | node | undefined | Adds subtitle | -
63 | supporting | node | undefined | Adds supporting text | -
64 | media | node | undefined | Adds media content | -
65 | actions | node | undefined | Adds actions | -
66 | actionsBorder | bool | undefined | Adds border to actions container | -
67 | menu | node | undefined | Adds menu | Usually a mdl/mdr icon button (plus menu)
68 |
69 | ## Children
70 |
71 | * [Title](./title/README.md)
72 | * [TitleText](./title-text/README.md)
73 | * [SubtitleText](./subtitle-text/README.md)
74 | * [SupportingText](./supporting-text/README.md)
75 | * [Media](./media/README.md)
76 | * [Actions](./actions/README.md)
77 | * [Menu](./menu/README.md)
78 |
79 |
80 | ## Notes
81 |
82 | When using `Card` with props the order in which children are rendered is as follows:
83 |
84 | 1. `title`
85 | 2. `subtitle`
86 | 3. `supporting`
87 | 4. `media`
88 | 5. `children` (prop or actual)
89 | 6. `actions`
90 | 7. `menu`
91 |
92 | If your use case seeks a different order, use `Card` with children instead or mix as needed (as `children` will be rendered in any case).
93 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var gutil = require('gulp-util')
3 | var babel = require('gulp-babel');
4 | var del = require('del');
5 | var fs = require('fs');
6 | var eslint = require('gulp-eslint');
7 | var webpack = require('webpack');
8 | var webpackConfig = require('./webpack.config.js');
9 | var WebpackDevServer = require("webpack-dev-server");
10 | var infoColor = gutil.colors.blue;
11 |
12 | // DISTRIBUTION
13 |
14 | gulp.task('default', ['build']);
15 |
16 | // todo update .gitignore
17 | gulp.task('build', ['update-gitignore'], function() {
18 | return gulp.src('src/**/*.js?(x)')
19 | .pipe(eslint())
20 | .pipe(eslint.format())
21 | .pipe(eslint.failAfterError())
22 | .pipe(babel())
23 | .pipe(gulp.dest('./'));
24 | });
25 |
26 | // Searches src/ for files
27 | // that are not ignored when built into project root
28 | // and adds them to .gitignore
29 | gulp.task('update-gitignore', function(cb) {
30 | var ignored = fs.readFileSync('./.gitignore')
31 | .toString()
32 | .split("\n")
33 | .filter(function noEmptyString(string) {
34 | return string.length > 0;
35 | });
36 | var shouldIgnore = fs.readdirSync('./src')
37 | .map(function prefixSlash(file) {
38 | return '/' + file;
39 | })
40 | .filter(function notIgnoredYet(file) {
41 | return ignored.indexOf(file) === -1;
42 | });
43 | var willIgnore = ignored
44 | .concat(shouldIgnore)
45 | // keep it clean?
46 | .sort()
47 | // empty string adds new line at end of file
48 | .concat('');
49 |
50 | gutil.log('Adding files:', infoColor(shouldIgnore.join(', ')));
51 |
52 | fs.writeFileSync('./.gitignore', willIgnore.join('\n'))
53 |
54 | cb();
55 | })
56 |
57 |
58 | // DEVELOPMENT
59 |
60 | gulp.task('serve', ['prep-examples'], function(cb) {
61 | new WebpackDevServer(webpack(webpackConfig), {
62 | publicPath: '/',
63 | contentBase: './examples',
64 | info: false,
65 | stats: {
66 | chunks: false,
67 | colors: true
68 | },
69 | }).listen(8080, "localhost", function(err) {
70 | if(err) throw new gutil.PluginError("webpack-dev-server", err);
71 | gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
72 | });
73 | });
74 |
75 | gulp.task("webpack", ['prep-examples'], function(cb) {
76 | webpack(webpackConfig).run(function(err, stats) {
77 | if(err) throw new gutil.PluginError("webpack:build-dev", err);
78 | gutil.log("[webpack:build-dev]", stats.toString({
79 | colors: true,
80 | chunks: false
81 | }));
82 | cb();
83 | });
84 | });
85 |
86 | gulp.task('prep-examples', ['clean-examples'], function(cb) {
87 | // move index
88 | return gulp.src('src/examples/index.html')
89 | .pipe(gulp.dest('examples/'))
90 | });
91 |
92 | gulp.task('clean-examples', function(cb) {
93 | del(['./examples'], cb);
94 | });
95 |
--------------------------------------------------------------------------------
/src/card/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mdlHook from '../lib/mdl-hook';
3 | import CardMenu from './menu';
4 | import CardMedia from './media';
5 | import CardTitle from './title';
6 | import CardActions from './actions';
7 | import CardTitleText from './title-text';
8 | import CardSubtitleText from './subtitle-text';
9 | import CardSupportingText from './supporting-text';
10 |
11 | @mdlHook({
12 | displayName: 'MDR:Card',
13 | blockClassName: 'mdl-card mdl-js-card',
14 | modifiers: [
15 | {
16 | prop: 'shadow',
17 | type: React.PropTypes.oneOf([2, 3, 4, 6, 8, 16]),
18 | classNameFn: (val) => `mdl-shadow--${val}dp`
19 | }
20 | ]
21 | })
22 | class Card extends React.Component {
23 | static propTypes = {
24 | title: React.PropTypes.node,
25 | titleLevel: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
26 | titleBorder: React.PropTypes.bool,
27 | subtitle: React.PropTypes.node,
28 | supporting: React.PropTypes.node,
29 | media: React.PropTypes.node,
30 | actions: React.PropTypes.node,
31 | actionsBorder: React.PropTypes.bool,
32 | menu: React.PropTypes.node,
33 | children: React.PropTypes.node
34 | }
35 |
36 | static defaultProps = {
37 | titleLevel: 1
38 | }
39 |
40 | render() {
41 | let {
42 | title,
43 | titleLevel,
44 | titleBorder,
45 | subtitle,
46 | supporting,
47 | media,
48 | actions,
49 | actionsBorder,
50 | menu,
51 | children,
52 | ...otherProps
53 | } = this.props;
54 |
55 | let renderedTitle = renderTitle({title, titleLevel, titleBorder, subtitle});
56 | let renderedSupporting = renderSupporting({supporting});
57 | let renderedMedia = renderMedia({media});
58 | let renderedActions = renderActions({actions, actionsBorder});
59 | let renderedMenu = renderMenu({menu});
60 |
61 | return (
62 |
63 | {renderedTitle}
64 | {renderedSupporting}
65 | {renderedMedia}
66 | {children}
67 | {renderedActions}
68 | {renderedMenu}
69 |
70 | );
71 | }
72 | }
73 |
74 | function renderTitle(props) {
75 | let Subtitle = props.title && props.subtitle
76 | ?
77 | : null;
78 | if (props.title) return (
79 |
80 |
81 | {Subtitle}
82 |
83 | );
84 | return null;
85 | }
86 |
87 | function renderSupporting(props) {
88 | if (props.supporting) return (
89 |
90 | );
91 | return null;
92 | }
93 |
94 | function renderMedia(props) {
95 | if (props.media) return (
96 |
97 | );
98 | return null;
99 | }
100 |
101 | function renderActions(props) {
102 | if (props.actions) return (
103 |
104 | );
105 | return null;
106 | }
107 |
108 | function renderMenu(props) {
109 | if (props.menu) return (
110 |
111 | );
112 | return null;
113 | }
114 |
115 | Card.Title = CardTitle;
116 | Card.TitleText = CardTitleText;
117 | Card.SubtitleText = CardSubtitleText;
118 | Card.SupportingText = CardSupportingText;
119 | Card.Media = CardMedia;
120 | Card.Actions = CardActions;
121 | Card.Menu = CardMenu;
122 |
123 | export default Card;
124 |
--------------------------------------------------------------------------------
/src/lib/mdl-hook.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import prepareProps from './prepare-props';
3 |
4 | /**
5 | * # mdlHook
6 | *
7 | * wraps `Target` in higher order Component which
8 | * turns provided `config` into MDL CSS classes and provides lifecycle methods
9 | * for upgrading/ downgrading a Component via
10 | * [mdlComponentHandler](https://github.com/google/material-design-lite/blob/master/src/mdlComponentHandler.js).
11 | *
12 | * ## `config` Properties
13 | *
14 | * The `config` param takes the following properties:
15 | * 1. `displayName`: React display name of higher order element
16 | * 2. `blockClassName`: The Block -- as in BEM -- MDL CSS class (inc. js hook)
17 | * 3. `modifiers`: An array of modifier objects configuring MDL modifier (BEM) CSS classes.
18 | *
19 | * ### `modifiers[i]` Properties
20 | *
21 | * A modifier object takes the following props:
22 | * 1. `prop`: Property name
23 | * 2. `className`: MDL CSS class (mutually exclusive with `classNameFn`, takes precedence)
24 | * 3. `classNameFn`: A function returning MDL CSS class string, takes prop value as argument. ((mutually exclusive with `className`)
25 | * 4. `type`: One of React's `PropType`s (or custom)
26 | * 5. `default`: Default value (optional)
27 | */
28 | export default function mdlHook({displayName, blockClassName, modifiers = []}) {
29 |
30 | let propTypes = makePropTypes(modifiers);
31 | let defaultProps = makeDefaultProps(modifiers);
32 | let prepareTargetProps = (props) => prepareProps(props, {
33 | blockClassName,
34 | modifierClassNameFns: makeClassNameFns(modifiers)
35 | });
36 |
37 | return function decorator(Target) {
38 |
39 | return class extends React.Component {
40 | static displayName = displayName;
41 | static propTypes = propTypes;
42 | static defaultProps = defaultProps;
43 |
44 | constructor(props) {
45 | super(props);
46 |
47 | this.state = {
48 | targetProps: prepareTargetProps(props)
49 | };
50 | }
51 |
52 | componentWillReceiveProps(props) {
53 | this.setState({
54 | targetProps: prepareTargetProps(props)
55 | });
56 | }
57 |
58 | // credit: http://quaintous.com/2015/07/09/react-components-with-mdl/
59 | componentDidUpdate() {
60 | if (window.componentHandler) {
61 | window.componentHandler.upgradeDom();
62 | }
63 | }
64 |
65 | render() {
66 | return ;
67 | }
68 | };
69 | };
70 | }
71 |
72 | /**
73 | * Creates an object mapping prop names to (React style) prop types
74 | * @param {Array} modifiers List of modifier config objects
75 | * @return {Object} propTypes object
76 | */
77 | function makePropTypes(modifiers) {
78 | return modifiers.reduce((acc, {prop, type}) => {
79 | acc[prop] = type;
80 | return acc;
81 | }, {});
82 | }
83 |
84 | /**
85 | * Creates an object mapping prop names to default values
86 | * @param {Array} modifiers List of modifier config objects
87 | * @return {Object} defaultProps objects
88 | */
89 | function makeDefaultProps(modifiers) {
90 | return modifiers.reduce((acc, cur) => {
91 | if (cur.hasOwnProperty('default')) {
92 | acc[cur.prop] = cur.default;
93 | }
94 | return acc;
95 | }, {});
96 | }
97 |
98 | /**
99 | * Creates an object mapping prop names to functions returning MDL class name
100 | * @param {Array} modifiers List of modifier config objects
101 | * @return {Object} classNameFns map
102 | */
103 | function makeClassNameFns(modifiers) {
104 | return modifiers.reduce((acc, {prop, className, classNameFn}) => {
105 | acc[prop] = className ? () => className : classNameFn;
106 | return acc;
107 | }, {});
108 | }
109 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [DEPRECATED] Material Design React (MDR)
2 |
3 | :octocat: repository preserved for historical reasons :octocat:
4 |
5 | *Pragmatic* [React](https://github.com/facebook/react) wrapper for [Material Design Lite](https://github.com/google/material-design-lite) (MDL) components.
6 |
7 |
8 | ## Contents
9 |
10 | - [Introduction](#introduction)
11 | - [Getting Started](#getting-started)
12 | - [Contributing](#contributing)
13 | - [Components](#components)
14 | - [Histroy](#history)
15 | - [Credits](#credits)
16 | - [License](#license)
17 |
18 |
19 | ## Introduction
20 |
21 | *Pragmatic* – because if you know how to use MDL you already know how to use MDR.
22 |
23 | Most MDL BEM **blocks and elements translate to MDR Components** and **modifiers translate to boolean properties**. In addition Components may have added some extra sugar.
24 |
25 | ### An Example
26 |
27 | Given MDL markup:
28 |
29 | ```html
30 |
31 | ```
32 |
33 | becomes:
34 |
35 | ```html
36 |
37 | ```
38 |
39 | or – considering that
40 | *fab*, *miniFab*, *icon* and *raised* are mutually exclusive – we can use the display property:
41 |
42 | ```html
43 |
44 | ```
45 |
46 |
47 | ## Getting Started
48 |
49 | ### Installation
50 |
51 | npm:
52 | ```bash
53 | npm install --save material-design-react
54 | ```
55 |
56 | *Please file an issue if you need additional means of installation.*
57 |
58 |
59 | ### Usage
60 | Include the Material Design Lite CSS and JavaScript files in each HTML page in your project.
61 | More info: http://www.getmdl.io/started/index.html#download
62 |
63 | ```html
64 |
65 |
66 |
67 | ```
68 |
69 | In your project's JS files import the components you need.
70 |
71 | ```javascript
72 | /* app.jsx */
73 | import React from 'react';
74 | import { Button } from 'material-design-react';
75 | // or
76 | import Button from 'material-design-react/button';
77 | // or
78 | var MDR = require('material-design-react');
79 | var Button = MDR.Button;
80 |
81 | let coloredButton = ;
82 | ```
83 |
84 |
85 | ## Contributing
86 |
87 | We welcome any contribution.
88 | Please get started by reading [CONTRIBUTING.md](CONTRIBUTING.md)
89 |
90 |
91 | ## History
92 |
93 | Have a look at the [changelog](CHANGELOG.md).
94 |
95 |
96 | ## Components
97 |
98 | *Links point to a component's readme.*
99 |
100 | - [x] [Button](src/button/README.md)
101 | - [x] [Card](src/card/README.md)
102 | - [x] [CardTitle](src/card/title/README.md)
103 | - [x] [CardTitleText](src/card/title-text/README.md )
104 | - [x] [CardSubtitleText](src/card/subtitle-text/README.md)
105 | - [x] [CardMedia](src/card/media/README.md)
106 | - [x] [CardSupportingText](src/card/supporting-text/README.md)
107 | - [x] [CardActions](src/card/actions/README.md)
108 | - [x] [CardMenu](src/card/menu/README.md)
109 | - ...*[Contribute!](https://github.com/nikvm/material-design-react/issues/4)*
110 |
111 |
112 | ## Credits
113 |
114 | - [Contributors](https://github.com/nikvm/material-design-react/graphs/contributors) for contributing
115 | - [Google](https://github.com/google) for [Material Design Lite](https://github.com/google/material-design-lite)
116 | - [Facebook](https://github.com/facebook) for [React](https://github.com/facebook/react)
117 | - [Yan Foto](https://github.com/yan-foto) for his article [React Components with Material Design Lite](http://quaintous.com/2015/07/09/react-components-with-mdl/)
118 | - [Zeno Rocha](https://github.com/zenorocha) for his [README template](https://gist.github.com/zenorocha/4526327)
119 | - NPM module authors for [this project's dependencies](package.json)
120 |
121 | *Get in contact if you think you belong here.*
122 |
123 | ## License
124 |
125 | This project is licensed under the terms of the [MIT](LICENSE.md) license.
126 |
--------------------------------------------------------------------------------