`
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 |
--------------------------------------------------------------------------------
/src/card/actions/README.md:
--------------------------------------------------------------------------------
1 | # CardActions
2 |
3 | http://www.getmdl.io/components/index.html#cards-section
4 |
5 |
6 | ## Usage
7 |
8 | ```javascript
9 | import Card from 'material-design-react/card';
10 |
11 | let myCard = (
12 |
13 | {/* ... */}
14 |
15 | Action!
16 |
17 | {/* ... */}
18 |
19 | );
20 | ```
21 |
22 | You may also import and use `CardActions` directly.
23 |
24 | ```javascript
25 | // import { CardActions } from 'material-design-react';
26 | import CardActions from 'material-design-react/card/actions';
27 |
28 | let myCardActions = (
29 |
30 | Button?
31 |
32 | );
33 | ```
34 |
35 |
36 | ## Properties
37 |
38 | Property | Type | Default | Effect | Remarks
39 | -------- | -----| ------- | ------ | -------
40 | border | bool | undefined | Adds border to section | -
41 |
42 |
43 | ## Parent
44 |
45 | [Card](../README.md)
46 |
47 |
48 | ## Notes
49 | *none*
50 |
--------------------------------------------------------------------------------
/src/card/actions/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mdlHook from '../../lib/mdl-hook';
3 |
4 | @mdlHook({
5 | displayName: 'MDR:CardActions',
6 | blockClassName: 'mdl-card__actions',
7 | modifiers: [
8 | {
9 | prop: 'border',
10 | className: 'mdl-card--border',
11 | type: React.PropTypes.bool
12 | }
13 | ]
14 | })
15 | class CardActions extends React.Component {
16 |
17 | render() {
18 | return
;
19 | }
20 | }
21 |
22 | export default CardActions;
23 |
--------------------------------------------------------------------------------
/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/card/media/README.md:
--------------------------------------------------------------------------------
1 | # CardMedia
2 |
3 | http://www.getmdl.io/components/index.html#cards-section
4 |
5 |
6 | ## Usage
7 |
8 | ```javascript
9 | import Card from 'material-design-react/card';
10 |
11 | let myCard = (
12 |
13 | {/* ... */}
14 |
15 | {/* ... */}
16 |
17 | {/* ... */}
18 |
19 | );
20 | ```
21 |
22 | You may also import and use `CardMedia` directly.
23 |
24 | ```javascript
25 | // import { CardMedia } from 'material-design-react';
26 | import CardMedia from 'material-design-react/card/media';
27 |
28 | let myCardMedia = (
29 |
30 | {/* ... */}
31 |
32 | );
33 | ```
34 |
35 |
36 | ## Properties
37 |
38 | *none*
39 |
40 |
41 | ## Parent
42 |
43 | [Card](../README.md)
44 |
45 |
46 | ## Notes
47 | *none*
48 |
--------------------------------------------------------------------------------
/src/card/media/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mdlHook from '../../lib/mdl-hook';
3 |
4 | @mdlHook({
5 | displayName: 'MDR:CardMedia',
6 | blockClassName: 'mdl-card__media'
7 | })
8 | class CardMedia extends React.Component {
9 |
10 | render() {
11 | return ;
12 | }
13 | }
14 |
15 | export default CardMedia;
16 |
--------------------------------------------------------------------------------
/src/card/menu/README.md:
--------------------------------------------------------------------------------
1 | # CardMenu
2 |
3 | http://www.getmdl.io/components/index.html#cards-section
4 |
5 |
6 | ## Usage
7 |
8 | ```javascript
9 | import Card from 'material-design-react/card';
10 |
11 | let myCard = (
12 |
13 | {/* ... */}
14 |
15 | {/* ... */}
16 |
17 | {/* ... */}
18 |
19 | );
20 | ```
21 |
22 | You may also import and use `CardMenu` directly.
23 |
24 | ```javascript
25 | // import { CardMenu } from 'material-design-react';
26 | import CardMenu from 'material-design-react/card/menu';
27 |
28 | let myCardMenu = (
29 |
30 | {/* ... */}
31 |
32 | );
33 | ```
34 |
35 |
36 | ## Properties
37 |
38 | *none*
39 |
40 |
41 | ## Parent
42 |
43 | [Card](../README.md)
44 |
45 |
46 | ## Notes
47 | *none*
48 |
--------------------------------------------------------------------------------
/src/card/menu/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mdlHook from '../../lib/mdl-hook';
3 |
4 | @mdlHook({
5 | displayName: 'MDR:CardMenu',
6 | blockClassName: 'mdl-card__menu'
7 | })
8 | class CardMenu extends React.Component {
9 |
10 | render() {
11 | return ;
12 | }
13 | }
14 |
15 | export default CardMenu;
16 |
--------------------------------------------------------------------------------
/src/card/subtitle-text/README.md:
--------------------------------------------------------------------------------
1 | # CardSubtitleText
2 |
3 | http://www.getmdl.io/components/index.html#cards-section
4 |
5 |
6 | ## Usage
7 |
8 | ```javascript
9 | import Card from 'material-design-react/card';
10 |
11 | let myCard = (
12 |
13 |
14 |
15 | A Title
16 |
17 |
18 |
19 | A subtitle
20 |
21 |
22 |
23 | {/* ... */}
24 |
25 | );
26 | ```
27 |
28 | You may also import and use `CardSubtitleText` directly.
29 |
30 | ```javascript
31 | // import { CardSubtitleText } from 'material-design-react';
32 | import CardSubtitleText from 'material-design-react/card/subtitle-text';
33 |
34 | let myCardSubtitleText = (
35 |
36 | {/* ... */}
37 |
38 | )
39 | );
40 | ```
41 |
42 |
43 | ## Properties
44 |
45 | *none*
46 |
47 |
48 | ## Parent
49 |
50 | [Card](../README.md)
51 |
52 |
53 | ## Notes
54 | *none*
55 |
--------------------------------------------------------------------------------
/src/card/subtitle-text/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mdlHook from '../../lib/mdl-hook';
3 |
4 | @mdlHook({
5 | displayName: 'MDR:CardSubtitleText',
6 | blockClassName: 'mdl-card__subtitle-text'
7 | })
8 | class CardSubtitleText extends React.Component {
9 |
10 | render() {
11 | return ;
12 | }
13 | }
14 |
15 | export default CardSubtitleText;
16 |
--------------------------------------------------------------------------------
/src/card/supporting-text/README.md:
--------------------------------------------------------------------------------
1 | # CardSupportingText
2 |
3 | http://www.getmdl.io/components/index.html#cards-section
4 |
5 |
6 | ## Usage
7 |
8 | ```javascript
9 | import Card from 'material-design-react/card';
10 |
11 | let myCard = (
12 |
13 | {/* ... */}
14 |
15 | Some supporting text
16 |
17 | {/* ... */}
18 |
19 | );
20 | ```
21 |
22 | You may also import and use `CardSupportingText` directly.
23 |
24 | ```javascript
25 | // import { CardSupportingText } from 'material-design-react';
26 | import CardSupportingText from 'material-design-react/card/subtitle-text';
27 |
28 | let myCardSupportingText = (
29 |
30 | {/* ... */}
31 |
32 | )
33 | );
34 | ```
35 |
36 |
37 | ## Properties
38 |
39 | *none*
40 |
41 |
42 | ## Parent
43 |
44 | [Card](../README.md)
45 |
46 |
47 | ## Notes
48 | *none*
49 |
--------------------------------------------------------------------------------
/src/card/supporting-text/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mdlHook from '../../lib/mdl-hook';
3 |
4 | @mdlHook({
5 | displayName: 'MDR:CardSupportingText',
6 | blockClassName: 'mdl-card__supporting-text'
7 | })
8 | class CardSupportingText extends React.Component {
9 |
10 | render() {
11 | return ;
12 | }
13 | }
14 |
15 | export default CardSupportingText;
16 |
--------------------------------------------------------------------------------
/src/card/title-text/README.md:
--------------------------------------------------------------------------------
1 | # CardTitleText
2 |
3 | http://www.getmdl.io/components/index.html#cards-section
4 |
5 |
6 | ## Usage
7 |
8 | ```javascript
9 | import Card from 'material-design-react/card';
10 |
11 | let myCard = (
12 |
13 |
14 |
15 | A Card's Title
16 |
17 |
18 | {/* ... */}
19 |
20 | );
21 | ```
22 |
23 | You may also import and use `CardTitleText` directly.
24 |
25 | ```javascript
26 | // import { CardTitleText } from 'material-design-react';
27 | import CardTitleText from 'material-design-react/card/title-text';
28 |
29 | let myCardTitleText = (
30 |
31 | A Card's Title
32 |
33 | );
34 | ```
35 |
36 |
37 | ## Properties
38 |
39 | Property | Type | Default | Effect | Remarks
40 | -------- | ---- | ------- | ------ | -------
41 | level | one of: 1, 2, 3, 4, 5, 6 | 1 | Sets heading level | Defines DOM element `` through ``
42 |
43 |
44 | ## Parent
45 |
46 | [Card](../README.md)
47 |
48 |
49 | ## Notes
50 | *none*
51 |
--------------------------------------------------------------------------------
/src/card/title-text/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mdlHook from '../../lib/mdl-hook';
3 |
4 | @mdlHook({
5 | displayName: 'MDR:CardTitleText',
6 | blockClassName: 'mdl-card__title-text'
7 | })
8 | class CardTitleText extends React.Component {
9 | static propTypes = {
10 | level: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6])
11 | }
12 | static defaultProps = {
13 | level: 1
14 | }
15 |
16 | render() {
17 | let { level, ...otherProps } = this.props;
18 |
19 | return React.DOM[`h${level}`](otherProps);
20 | }
21 | }
22 |
23 | export default CardTitleText;
24 |
--------------------------------------------------------------------------------
/src/card/title/README.md:
--------------------------------------------------------------------------------
1 | # CardTitle
2 |
3 | http://www.getmdl.io/components/index.html#cards-section
4 |
5 |
6 | ## Usage
7 |
8 | ```javascript
9 | import Card from 'material-design-react/card';
10 |
11 | let myCard = (
12 |
13 |
14 | {/* ... */}
15 |
16 | {/* ... */}
17 |
18 | );
19 | ```
20 |
21 | You may also import and use `CardTitle` directly.
22 |
23 | ```javascript
24 | // import { CardTitle } from 'material-design-react';
25 | import CardTitle from 'material-design-react/card/title';
26 |
27 | let myCardTitle = (
28 |
29 | {/* ... */}
30 |
31 | );
32 | ```
33 |
34 |
35 | ## Properties
36 |
37 | Property | Type | Default | Effect | Remarks
38 | -------- | -----| ------- | ------ | -------
39 | border | bool | undefined | Adds border to section | -
40 |
41 |
42 | ## Parent
43 |
44 | [Card](../README.md)
45 |
46 |
47 | ## Notes
48 | *none*
49 |
--------------------------------------------------------------------------------
/src/card/title/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import mdlHook from '../../lib/mdl-hook';
3 |
4 | @mdlHook({
5 | displayName: 'MDR:CardTitle',
6 | blockClassName: 'mdl-card__title',
7 | modifiers: [
8 | {
9 | prop: 'border',
10 | className: 'mdl-card--border',
11 | type: React.PropTypes.bool
12 | }
13 | ]
14 | })
15 | class CardTitle extends React.Component {
16 |
17 | render() {
18 | return
;
19 | }
20 | }
21 |
22 | export default CardTitle;
23 |
--------------------------------------------------------------------------------
/src/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | MDR Examples
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/examples/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Button,
4 | Card,
5 | CardTitle,
6 | CardTitleText,
7 | CardSubtitleText,
8 | CardSupportingText,
9 | CardMedia,
10 | CardMenu,
11 | CardActions
12 | } from '../index'; // material-design-react
13 |
14 | class Examples extends React.Component {
15 | render() {
16 | let children = React.Children.map(this.props.children, (child) => {
17 | return {child}
;
18 | });
19 | return (
20 | {children}
21 | );
22 | }
23 | }
24 |
25 | class App extends React.Component {
26 | render() {
27 | return (
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Card.TitleText
43 |
44 |
45 |
46 |
47 |
48 |
49 | CardTitleText level 1
50 |
51 |
52 | Subtitle
53 |
54 |
55 |
56 | CardMedia
57 |
58 |
59 | A man once sat under a tree
60 |
61 |
62 |
63 |
64 |
65 |
68 |
69 |
70 |
71 | Some media}
76 | supporting="supporting text"
77 | actions={[]}
78 | actionsBorder
79 | shadow="8" />
80 |
81 | );
82 | }
83 | }
84 |
85 | React.render(, document.getElementById('app'));
86 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Button from './button';
2 | import Card from './card';
3 | import CardMenu from './card/menu';
4 | import CardMedia from './card/media';
5 | import CardTitle from './card/title';
6 | import CardActions from './card/actions';
7 | import CardTitleText from './card/title-text';
8 | import CardSubtitleText from './card/subtitle-text';
9 | import CardSupportingText from './card/supporting-text';
10 |
11 | export default {
12 | Button,
13 | Card,
14 | CardTitle,
15 | CardTitleText,
16 | CardSubtitleText,
17 | CardSupportingText,
18 | CardMedia,
19 | CardActions,
20 | CardMenu
21 | };
22 |
--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | import makeClassName from './make-class-name';
2 | import prepareProps from './prepare-props';
3 | import mdlHook from './mdl-hook';
4 |
5 | export default {
6 | makeClassName,
7 | prepareProps,
8 | mdlHook
9 | };
10 |
--------------------------------------------------------------------------------
/src/lib/make-class-name.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Return className with mdl css classes and className from props
3 | * @param {Object} props props defined on Component
4 | * @param {Object} config config for className creation
5 | * @return {String} the final className
6 | */
7 | export default function makeClassName(props, config) {
8 | let {blockClassName, modifierClassNameFns} = config;
9 |
10 | let propClassNameFn = (prop) => modifierClassNameFns[prop];
11 | let propValue = (prop) => props[prop];
12 |
13 | let prepareClassName = (prop) => {
14 | let classNameFn = propClassNameFn(prop);
15 | let value = propValue(prop);
16 |
17 | return classNameFn(value);
18 | };
19 |
20 | let modifiersClassName = Object.keys(modifierClassNameFns)
21 | .filter(propValue)
22 | .map(prepareClassName)
23 | .join(' ');
24 |
25 | return `${blockClassName} ${modifiersClassName} ${props.className || ''}`;
26 | }
27 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/lib/prepare-props.js:
--------------------------------------------------------------------------------
1 | import makeClassName from './make-class-name';
2 | import omit from 'omit';
3 |
4 | export default function prepareProps(props, config) {
5 | let modKeys = Object.keys(config.modifierClassNameFns);
6 | let omitModKeys = omit(modKeys);
7 |
8 | return Object.assign(
9 | omitModKeys(props),
10 | {className: makeClassName(props, config)}
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This file configures the examples application's webpack build
3 | */
4 | var path = require('path');
5 | var webpack = require('webpack');
6 |
7 | module.exports = {
8 | entry: {
9 | bundle: './src/examples/index.js'
10 | },
11 |
12 | output: {
13 | path: path.join(__dirname, 'examples'),
14 | filename: '[name].js',
15 | chunkFilename: '[chunkhash].js',
16 | sourceMapFilename: 'debug/[file].map',
17 | },
18 |
19 | devtool: '#cheap-module-source-map',
20 |
21 | debug: true,
22 |
23 | module: {
24 | loaders: [
25 | // JS(X)
26 | {test: /\.(jsx?(\?.*)?)$/, loaders: ['babel?stage=0'], exclude: /node_modules/},
27 | ],
28 | },
29 |
30 | resolve: {
31 | extensions: ['', '.js', '.jsx']
32 | },
33 |
34 | plugins: [
35 | new webpack.NoErrorsPlugin()
36 | ],
37 |
38 | stats: {
39 | chunks: false
40 | }
41 | };
42 |
--------------------------------------------------------------------------------