├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── material-button
    └── index.js
├── material-card-action
    └── index.js
├── material-card-actions
    └── index.js
├── material-card-horizontal-block
    └── index.js
├── material-card-media-item
    └── index.js
├── material-card-media
    └── index.js
├── material-card-primary
    └── index.js
├── material-card-subtitle
    └── index.js
├── material-card-supporting-text
    └── index.js
├── material-card-title
    └── index.js
├── material-card
    └── index.js
├── material-checkbox-label
    └── index.js
├── material-checkbox
    └── index.js
├── material-drawer-content
    └── index.js
├── material-drawer-header
    └── index.js
├── material-drawer-toolbar-spacer
    └── index.js
├── material-drawer
    └── index.js
├── material-fab
    └── index.js
├── material-form-field
    └── index.js
├── material-icon-toggle
    └── index.js
├── material-list-divider
    └── index.js
├── material-list-group-divider
    └── index.js
├── material-list-group-header
    └── index.js
├── material-list-group
    └── index.js
├── material-list-item-detail
    └── index.js
├── material-list-item-text-primary
    └── index.js
├── material-list-item-text-secondary
    └── index.js
├── material-list-item-text
    └── index.js
├── material-list-item
    └── index.js
├── material-list
    └── index.js
├── material-radio
    └── index.js
├── material-ripple
    └── index.js
├── material-snackbar
    └── index.js
├── material-switch
    └── index.js
├── material-text-field
    └── index.js
├── material-toolbar-row
    └── index.js
├── material-toolbar-section
    └── index.js
├── material-toolbar-title
    └── index.js
├── material-toolbar
    └── index.js
└── package.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change log
2 | ### Version 0.1.0
3 | - First commit covers the most common controls
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | Copyright (c) 2017 Bernd Wessels
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "Software"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in
12 | all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # preact-mdc
  2 | 
  3 | ## Overview
  4 | 
  5 | This is a [preact](https://github.com/developit/preact) integration of the awesome [material-components-web](https://github.com/material-components/material-components-web) material design components library.
  6 | 
  7 | ## material-design-components-web
  8 | 
  9 | This library is the successor of the awesome but now depricated [material-design-lite](https://github.com/google/material-design-lite) library. 
 10 | 
 11 | ## Goals
 12 | 
 13 | We try to provide all available components from `material-design-components-web` as pure `preact` components.
 14 | We try to not use any of the MDC `javascript` code but only use the MDC `sass` styles.
 15 | 
 16 | ## Components
 17 | 
 18 | - Button
 19 | - Card
 20 |   - CardAction
 21 |   - CardActions
 22 |   - CardHorizontalBlock
 23 |   - CardMedia
 24 |   - CardMediaItem
 25 |   - CardPrimary
 26 |   - CardSubtitle
 27 |   - CardSupportingText
 28 |   - CardTitle
 29 | - Checkbox
 30 | - CheckboxLabel
 31 | - Drawer
 32 |   - DrawerContent
 33 |   - DrawerHeader
 34 |   - DrawerToolbarSpacer
 35 | - Fab
 36 | - FormField
 37 | - IconToggle
 38 | - List
 39 |   - ListDivider
 40 |   - ListGroup
 41 |   - ListGroupDivider
 42 |   - ListGroupHeader
 43 |   - ListItem
 44 |   - ListItemDetail
 45 |   - ListItemText
 46 |   - ListItemTextPrimary
 47 |   - ListItemTextSecondary
 48 | - Radio
 49 | - Snackbar
 50 | - Switch
 51 | - TextField
 52 | - Toolbar
 53 |   - ToolbarRow
 54 |   - ToolbarSection
 55 |   - ToolbarTitle
 56 | 
 57 | ## Demo
 58 | 
 59 | - Here is a [demo project](https://github.com/BerndWessels/preact-mdc-demo) showing all the components and how to use them.
 60 | - Here is a [live demo](https://berndwessels.github.io/preact-mdc-demo/) of that project.
 61 | 
 62 | ## Usage
 63 | 
 64 | At the moment we directly provide the components written in ES6 as individual modules.
 65 | 
 66 | - Add this library to your project
 67 | 
 68 | ` npm install --save preact-mdc`
 69 | 
 70 | This requires the following depenencies in your project:
 71 | ```json
 72 |     "material-components-web": "0.8.0",
 73 |     "material-design-icons": "^3.0.0",
 74 | ```
 75 | 
 76 | ### ES6 NPM webpack
 77 | 
 78 | Since `preact-mdc` components are ES6 components and used directly from the npm package you might need to tweak your `webpack.config`.
 79 |  
 80 | Here is an example:
 81 | 
 82 | ```js
 83 |     module: {
 84 |       noParse: /\.min\.js/,
 85 |       rules: [{
 86 |         test: /\.jsx?$/,
 87 |         exclude: [/node_modules(?![\/\\]preact-mdc)/],
 88 |         use: [{
 89 |           loader: 'babel-loader',
 90 |           options: {
 91 |             presets: [
 92 |               ['es2015', {loose: true, modules: false}]
 93 |             ],
 94 |             plugins: [
 95 |               'transform-class-properties',
 96 |               'transform-object-rest-spread',
 97 |               ['transform-react-jsx', {pragma: 'h'}]
 98 |             ]
 99 |           },
100 |         }]
101 |       }
102 | ```
103 | 
104 | 
105 | # Contributing
106 | 
107 | You are very welcome to report issues, make PRs and become a contributor.
108 | 


--------------------------------------------------------------------------------
/material-button/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Bernd Wessels (https://github.com/BerndWessels/)
  3 |  *
  4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the MIT license found in the
  7 |  * LICENSE.txt file in the root directory of this source tree.
  8 |  */
  9 | 
 10 | /**
 11 |  * Import dependencies.
 12 |  */
 13 | import {h, Component} from 'preact';
 14 | import classnames from 'classnames/dedupe';
 15 | import ripple from '../material-ripple';
 16 | 
 17 | /**
 18 |  * Import local dependencies.
 19 |  */
 20 | 
 21 | /**
 22 |  * Import styles.
 23 |  */
 24 | import '@material/button/mdc-button.scss';
 25 | 
 26 | /**
 27 |  * Create the component.
 28 |  */
 29 | export default class Button extends Component {
 30 | 
 31 |   constructor(props) {
 32 |     super(props);
 33 |     this.state = {
 34 |       focus: false,
 35 |       ripple: false,
 36 |       style: ''
 37 |     };
 38 |   }
 39 | 
 40 |   componentDidMount = () => {
 41 |     setTimeout(() => {
 42 |       const rippleInstance = ripple(this.root_);
 43 |       this.setState({style: rippleInstance.style});
 44 |     });
 45 |   };
 46 | 
 47 |   handleFocus = (e) => {
 48 |     this.setState({focus: true});
 49 |     this.props.onFocus && this.props.onFocus(e);
 50 |   };
 51 | 
 52 |   handleBlur = (e) => {
 53 |     this.setState({focus: false});
 54 |     this.props.onBlur && this.props.onBlur(e);
 55 |   };
 56 | 
 57 |   handleClick = (e) => {
 58 |     const rippleInstance = ripple(this.root_);
 59 |     this.setState({ripple: true, style: rippleInstance.style});
 60 |     setTimeout(() => {
 61 |       this.setState({ripple: false});
 62 |     }, rippleInstance.duration);
 63 |     this.props.onClick && this.props.onClick(e);
 64 |   };
 65 | 
 66 |   render({
 67 |            'class': className,
 68 |            children,
 69 |            compact,
 70 |            primary,
 71 |            accent,
 72 |            raised,
 73 |            dense,
 74 |            onFocus,
 75 |            onBlur,
 76 |            onClick,
 77 |            ...props
 78 |          }, {
 79 |            focus,
 80 |            ripple,
 81 |            style
 82 |          }, context) {
 83 | 
 84 |     const classes = classnames('mdc-button mdc-ripple-upgraded mdc-ripple-upgraded--unbounded', {
 85 |       'mdc-button--compact': compact,
 86 |       'mdc-button--primary': primary,
 87 |       'mdc-button--accent': accent,
 88 |       'mdc-button--raised': raised,
 89 |       'mdc-button--dense': dense,
 90 |       'mdc-ripple-upgraded--background-active-fill': ripple,
 91 |       'mdc-ripple-upgraded--foreground-activation': ripple,
 92 |       'mdc-ripple-upgraded--foreground-deactivation': !ripple,
 93 |       'mdc-ripple-upgraded--background-focused': focus
 94 |     }, className);
 95 | 
 96 |     return (
 97 |       <button class={classes}
 98 |               style={style}
 99 |               onFocus={this.handleFocus}
100 |               onBlur={this.handleBlur}
101 |               onClick={this.handleClick}
102 |               {...props}
103 |               ref={e => this.root_ = e}>
104 |         {children}
105 |       </button>
106 |     );
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/material-card-action/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | import Button from '../material-button';
20 | 
21 | /**
22 |  * Import styles.
23 |  */
24 | import '@material/card/mdc-card.scss';
25 | 
26 | /**
27 |  * Create the component.
28 |  */
29 | export default class CardAction extends Component {
30 |   render({
31 |            'class': className,
32 |            children,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames('mdc-card__action', className);
36 |     return (
37 |       <Button class={classes} compact {...props}>{children}</Button>
38 |     );
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/material-card-actions/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CardActions extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            vertical,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames('mdc-card__actions', {
36 |       'mdc-card__actions--vertical': vertical
37 |     }, className);
38 |     return (
39 |       <section class={classes} {...props}>{children}</section>
40 |     );
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/material-card-horizontal-block/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CardHorizontalBlock extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-card__horizontal-block', className);
35 |     return (
36 |       <div class={classes} {...props}>{children}</div>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-card-media-item/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CardMediaItem extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            x1dot5,
33 |            x2,
34 |            x3,
35 |            ...props
36 |          }, state, context) {
37 |     const classes = classnames('mdc-card__media-item', {
38 |       'mdc-card__media-item--1dot5x': x1dot5,
39 |       'mdc-card__media-item--2x': x2,
40 |       'mdc-card__media-item--3x': x3
41 |     }, className);
42 |     return (
43 |       <section class={classes} {...props}>{children}</section>
44 |     );
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/material-card-media/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CardMedia extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-card__media', className);
35 |     return (
36 |       <section class={classes} {...props}>{children}</section>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-card-primary/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CardPrimary extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-card__primary', className);
35 |     return (
36 |       <section class={classes} {...props}>{children}</section>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-card-subtitle/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CardSubTitle extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-card__subtitle', className);
35 |     return (
36 |       <h2 class={classes} {...props}>{children}</h2>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-card-supporting-text/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CardSupportingText extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-card__supporting-text', className);
35 |     return (
36 |       <section class={classes} {...props}>{children}</section>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-card-title/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CardTitle extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            large,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames('mdc-card__title', className, {'mdc-card__title--large': large});
36 |     return (
37 |       <h1 class={classes} {...props}>{children}</h1>
38 |     );
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/material-card/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/card/mdc-card.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class Card extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-card', className);
35 |     return (
36 |       <div class={classes} {...props}>{children}</div>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-checkbox-label/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/checkbox/mdc-checkbox.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class CheckboxLabel extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-checkbox-label', className);
35 |     return (
36 |       <label class={classes} {...props}>
37 |         {children}
38 |       </label>
39 |     )
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/material-checkbox/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Bernd Wessels (https://github.com/BerndWessels/)
  3 |  *
  4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the MIT license found in the
  7 |  * LICENSE.txt file in the root directory of this source tree.
  8 |  */
  9 | 
 10 | /**
 11 |  * Import dependencies.
 12 |  */
 13 | import {h, Component} from 'preact';
 14 | import classnames from 'classnames/dedupe';
 15 | import ripple from '../material-ripple';
 16 | 
 17 | /**
 18 |  * Import local dependencies.
 19 |  */
 20 | 
 21 | /**
 22 |  * Import styles.
 23 |  */
 24 | import '@material/checkbox/mdc-checkbox.scss';
 25 | 
 26 | /**
 27 |  * Create the component.
 28 |  */
 29 | export default class Checkbox extends Component {
 30 | 
 31 |   // Initialize local component state.
 32 |   constructor(props) {
 33 |     super(props);
 34 |     this.state = {
 35 |       focus: false,
 36 |       ripple: false,
 37 |       style: ''
 38 |     };
 39 |   }
 40 | 
 41 |   componentDidMount = () => {
 42 |     setTimeout(()=>{
 43 |       const rippleInstance = ripple(this.root_);
 44 |       this.setState({style: rippleInstance.style});
 45 |     });
 46 |   };
 47 | 
 48 |   handleFocus = (e) => {
 49 |     this.setState({focus: true});
 50 |     this.props.onFocus && this.props.onFocus(e);
 51 |   };
 52 | 
 53 |   handleBlur = (e) => {
 54 |     this.setState({focus: false});
 55 |     this.props.onBlur && this.props.onBlur(e);
 56 |   };
 57 | 
 58 |   handleChange = (e) => {
 59 |     const rippleInstance = ripple(this.root_);
 60 |     this.setState({ripple: true, style: rippleInstance.style});
 61 |     setTimeout(() => {
 62 |       this.setState({ripple: false});
 63 |     }, rippleInstance.duration);
 64 |     this.props.onChange && this.props.onChange(e);
 65 |   };
 66 | 
 67 |   render({
 68 |            'class': className,
 69 |            children,
 70 |            disabled,
 71 |            onFocus,
 72 |            onBlur,
 73 |            onChange,
 74 |            ...props
 75 |          }, {
 76 |            focus,
 77 |            ripple,
 78 |            style
 79 |          }, context) {
 80 |     const classes = classnames('mdc-checkbox mdc-ripple-upgraded mdc-ripple-upgraded--unbounded', {
 81 |       'mdc-checkbox--disabled': disabled,
 82 |       'mdc-ripple-upgraded--background-active-fill': ripple,
 83 |       'mdc-ripple-upgraded--foreground-activation': ripple,
 84 |       'mdc-ripple-upgraded--foreground-deactivation': !ripple,
 85 |       'mdc-ripple-upgraded--background-focused': focus
 86 |     }, className);
 87 |     return (
 88 |       <div class={classes}
 89 |            style={style}
 90 |            ref={e => this.root_ = e}>
 91 |         <input class="mdc-checkbox__native-control"
 92 |                type="checkbox"
 93 |                disabled={disabled}
 94 |                onFocus={this.handleFocus}
 95 |                onChange={this.handleChange}
 96 |                onBlur={this.handleBlur}
 97 |                {...props}
 98 |         />
 99 |         <div className="mdc-checkbox__background">
100 |           <svg className="mdc-checkbox__checkmark"
101 |                viewBox="0 0 24 24">
102 |             <path className="mdc-checkbox__checkmark__path"
103 |                   fill="none"
104 |                   stroke="white"
105 |                   d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
106 |           </svg>
107 |           <div className="mdc-checkbox__mixedmark"/>
108 |         </div>
109 |       </div>
110 |     );
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/material-drawer-content/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/drawer/mdc-drawer.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class DrawerContent extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            permanent,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames({
36 |       'mdc-permanent-drawer__content': permanent,
37 |       'mdc-temporary-drawer__content': !permanent
38 |     }, className);
39 |     return (
40 |       <div class={classes} {...props}>{children}</div>
41 |     );
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/material-drawer-header/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/drawer/mdc-drawer.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class DrawerHeader extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-temporary-drawer__header', className);
35 |     return (
36 |       <header class={classes} {...props}>
37 |         <div class="mdc-temporary-drawer__header-content">{children}</div>
38 |       </header>
39 |     );
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/material-drawer-toolbar-spacer/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/drawer/mdc-drawer.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class DrawerToolbarSpacer extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            permanent,
33 |           ...props
34 |          }, state, context) {
35 |     const classes = classnames({
36 |       'mdc-permanent-drawer__toolbar-spacer': permanent,
37 |       'mdc-temporary-drawer__toolbar-spacer': !permanent
38 |     }, className);
39 |     return (
40 |       <div class={classes} {...props}>{children}</div>
41 |     );
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/material-drawer/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/drawer/mdc-drawer.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class Drawer extends Component {
29 |   render({
30 |            'class': className,
31 |            permanent,
32 |            open,
33 |            children,
34 |            ...props
35 |          }, state, context) {
36 |     const classes = classnames({
37 |       'mdc-permanent-drawer': permanent,
38 |       'mdc-temporary-drawer': !permanent,
39 |       'mdc-temporary-drawer--animating': !permanent,
40 |       'mdc-temporary-drawer--open': !permanent && open
41 |     }, className);
42 |     if (permanent) {
43 |       return (
44 |         <div class={classes} {...props}>
45 |           {children}
46 |         </div>
47 |       );
48 |     } else {
49 |       return (
50 |         <aside class={classes} {...props}>
51 |           <div class="mdc-temporary-drawer__drawer">{children}</div>
52 |         </aside>
53 |       );
54 |     }
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/material-fab/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Bernd Wessels (https://github.com/BerndWessels/)
  3 |  *
  4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the MIT license found in the
  7 |  * LICENSE.txt file in the root directory of this source tree.
  8 |  */
  9 | 
 10 | /**
 11 |  * Import dependencies.
 12 |  */
 13 | import {h, Component} from 'preact';
 14 | import classnames from 'classnames/dedupe';
 15 | import ripple from '../material-ripple';
 16 | 
 17 | /**
 18 |  * Import local dependencies.
 19 |  */
 20 | 
 21 | /**
 22 |  * Import styles.
 23 |  */
 24 | import '@material/fab/mdc-fab.scss';
 25 | 
 26 | /**
 27 |  * Create the component.
 28 |  */
 29 | export default class Fab extends Component {
 30 | 
 31 |   constructor(props) {
 32 |     super(props);
 33 |     this.state = {
 34 |       focus: false,
 35 |       ripple: false,
 36 |       style: ''
 37 |     };
 38 |   }
 39 | 
 40 |   componentDidMount = () => {
 41 |     setTimeout(() => {
 42 |       const rippleInstance = ripple(this.root_);
 43 |       this.setState({style: rippleInstance.style});
 44 |     });
 45 |   };
 46 | 
 47 |   handleFocus = (e) => {
 48 |     this.setState({focus: true});
 49 |     this.props.onFocus && this.props.onFocus(e);
 50 |   };
 51 | 
 52 |   handleBlur = (e) => {
 53 |     this.setState({focus: false});
 54 |     this.props.onBlur && this.props.onBlur(e);
 55 |   };
 56 | 
 57 |   handleClick = (e) => {
 58 |     const rippleInstance = ripple(this.root_);
 59 |     this.setState({ripple: true, style: rippleInstance.style});
 60 |     setTimeout(() => {
 61 |       this.setState({ripple: false});
 62 |     }, rippleInstance.duration);
 63 |     this.props.onClick && this.props.onClick(e);
 64 |   };
 65 | 
 66 |   render({
 67 |            'class': className,
 68 |            children,
 69 |            icon,
 70 |            plain,
 71 |            mini,
 72 |            onFocus,
 73 |            onBlur,
 74 |            onClick,
 75 |            ...props
 76 |          }, {
 77 |            focus,
 78 |            ripple,
 79 |            style
 80 |          }, context) {
 81 | 
 82 |     const classes = classnames('mdc-fab mdc-ripple-upgraded mdc-ripple-upgraded--unbounded material-icons', {
 83 |       'mdc-fab--plain': plain,
 84 |       'mdc-fab--mini': mini,
 85 |       'mdc-ripple-upgraded--background-active-fill': ripple,
 86 |       'mdc-ripple-upgraded--foreground-activation': ripple,
 87 |       'mdc-ripple-upgraded--foreground-deactivation': !ripple,
 88 |       'mdc-ripple-upgraded--background-focused': focus
 89 |     }, className);
 90 | 
 91 |     return (
 92 |       <button class={classes}
 93 |               aria-label={icon}
 94 |               style={style}
 95 |               onFocus={this.handleFocus}
 96 |               onBlur={this.handleBlur}
 97 |               onClick={this.handleClick}
 98 |               {...props}
 99 |               ref={e => this.root_ = e}>
100 |         <span class='mdc-fab__icon'>
101 |           {icon}
102 |         </span>
103 |       </button>
104 |     );
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/material-form-field/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/form-field/mdc-form-field.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class FormField extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            alignEnd,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames('mdc-form-field', {
36 |       'mdc-form-field--align-end': alignEnd
37 |     }, className);
38 |     return (
39 |       <div className={classes} {...props}>
40 |         {children}
41 |       </div>
42 |     );
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/material-icon-toggle/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/icon-toggle/mdc-icon-toggle.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | class IconToggle extends Component {
29 | 
30 |   constructor() {
31 |     super();
32 |     this.state = {
33 |       pressed: false
34 |     };
35 |   }
36 | 
37 |   handleClick = (e) => {
38 |     let pressed = !this.state.pressed;
39 |     this.setState({pressed: pressed});
40 |     this.props.onClick && this.props.onClick(e, pressed);
41 |   };
42 | 
43 |   render({
44 |            'class': className,
45 |            children,
46 |            disabled,
47 |            primary,
48 |            accent,
49 |            icon,
50 |            iconPressed,
51 |            label,
52 |            labelPressed,
53 |            onClick,
54 |            ...props
55 |          }, {
56 |            pressed
57 |          }, context) {
58 | 
59 |     const classes = classnames('mdc-icon-toggle material-icons', {
60 |       'mdc-icon-toggle--disabled': disabled,
61 |       'mdc-icon-toggle--primary': primary,
62 |       'mdc-icon-toggle--accent': accent,
63 |     }, className);
64 | 
65 |     return (
66 |       <i class={classes}
67 |          role="button"
68 |          aria-pressed={pressed}
69 |          aria-label={pressed ? labelPressed : label}
70 |          tabindex="0"
71 |          onClick={this.handleClick}
72 |          ref={e => this.rippleElement = e}
73 |          {...props}
74 |       >
75 |         {pressed ? iconPressed : icon}
76 |       </i>
77 |     );
78 |   }
79 | }
80 | 
81 | /**
82 |  * Export the component.
83 |  */
84 | export default IconToggle;
85 | 


--------------------------------------------------------------------------------
/material-list-divider/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListDivider extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            inset,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames('mdc-list-divider', {
36 |       'mdc-list-divider--inset': inset
37 |     }, className);
38 |     return (
39 |       <li role="separator" class={classes} {...props}>{children}</li>
40 |     );
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/material-list-group-divider/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListGroupDivider extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            inset,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames('mdc-list-divider', {
36 |       'mdc-list-divider--inset': inset
37 |     }, className);
38 |     return (
39 |       <hr role="separator" class={classes} {...props}>{children}</hr>
40 |     );
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/material-list-group-header/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListGroupHeader extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-list-group__subheader', className);
35 |     return (
36 |       <h3 class={classes} {...props}>{children}</h3>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-list-group/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListGroup extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-list-group', className);
35 |     return (
36 |       <div class={classes} {...props}>{children}</div>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-list-item-detail/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListItemDetail extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            end,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames({
36 |       'mdc-list-item__start-detail': !end,
37 |       'mdc-list-item__end-detail': end
38 |     }, className);
39 |     return (
40 |       <span class={classes} {...props}>{children}</span>
41 |     );
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/material-list-item-text-primary/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListItemTextPrimary extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-list-item__text__primary', className);
35 |     return (
36 |       <span class={classes} {...props}>{children}</span>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-list-item-text-secondary/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListItemTextSecondary extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-list-item__text__secondary', className);
35 |     return (
36 |       <span class={classes} {...props}>{children}</span>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-list-item-text/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListItemText extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-list-item__text', className);
35 |     return (
36 |       <span class={classes} {...props}>{children}</span>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-list-item/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ListItem extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            link,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames('mdc-list-item', className);
36 |     return link ? <a class={classes} {...props}>{children}</a> : <li class={classes} {...props}>{children}</li>;
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/material-list/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/list/mdc-list.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class List extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            links,
33 |            dense,
34 |            twoLine,
35 |            avatar,
36 |            ...props
37 |          }, state, context) {
38 |     const classes = classnames('mdc-list', {
39 |       'mdc-list--dense': dense,
40 |       'mdc-list--two-line': twoLine,
41 |       'mdc-list--avatar-list': avatar
42 |     }, className);
43 |     return links ? <div class={classes} {...props}>{children}</div> : <ul class={classes} {...props}>{children}</ul>;
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/material-radio/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Bernd Wessels (https://github.com/BerndWessels/)
  3 |  *
  4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the MIT license found in the
  7 |  * LICENSE.txt file in the root directory of this source tree.
  8 |  */
  9 | 
 10 | /**
 11 |  * Import dependencies.
 12 |  */
 13 | import {h, Component} from 'preact';
 14 | import classnames from 'classnames/dedupe';
 15 | import ripple from '../material-ripple';
 16 | 
 17 | /**
 18 |  * Import local dependencies.
 19 |  */
 20 | 
 21 | /**
 22 |  * Import styles.
 23 |  */
 24 | import '@material/radio/mdc-radio.scss';
 25 | 
 26 | /**
 27 |  * Create the component.
 28 |  */
 29 | export default class Radio extends Component {
 30 | 
 31 |   constructor(props) {
 32 |     super(props);
 33 |     this.state = {
 34 |       focus: false,
 35 |       ripple: false,
 36 |       style: ''
 37 |     };
 38 |   }
 39 | 
 40 |   componentDidMount = () => {
 41 |     setTimeout(() => {
 42 |       const rippleInstance = ripple(this.root_);
 43 |       this.setState({style: rippleInstance.style});
 44 |     });
 45 |   };
 46 | 
 47 |   handleFocus = (e) => {
 48 |     this.setState({focus: true});
 49 |     this.props.onFocus && this.props.onFocus(e);
 50 |   };
 51 | 
 52 |   handleBlur = (e) => {
 53 |     this.setState({focus: false});
 54 |     this.props.onBlur && this.props.onBlur(e);
 55 |   };
 56 | 
 57 |   handleChange = (e) => {
 58 |     const rippleInstance = ripple(this.root_);
 59 |     this.setState({ripple: true, style: rippleInstance.style});
 60 |     setTimeout(() => {
 61 |       this.setState({ripple: false});
 62 |     }, rippleInstance.duration);
 63 |     this.props.onChange && this.props.onChange(e);
 64 |   };
 65 | 
 66 |   render({
 67 |            'class': className,
 68 |            children,
 69 |            disabled,
 70 |            onFocus,
 71 |            onBlur,
 72 |            onChange,
 73 |            ...props
 74 |          }, {
 75 |            focus,
 76 |            ripple,
 77 |            style
 78 |          }, context) {
 79 |     let classes = classnames('mdc-radio mdc-ripple-upgraded mdc-ripple-upgraded--unbounded', {
 80 |       'mdc-radio--disabled': disabled,
 81 |       'mdc-ripple-upgraded--background-active-fill': ripple,
 82 |       'mdc-ripple-upgraded--foreground-activation': ripple,
 83 |       'mdc-ripple-upgraded--foreground-deactivation': !ripple,
 84 |       'mdc-ripple-upgraded--background-focused': focus
 85 |     }, className);
 86 |     return (
 87 |       <div class={classes}
 88 |            style={style}
 89 |            ref={e => this.root_ = e}>
 90 |         <input class="mdc-radio__native-control"
 91 |                type="radio"
 92 |                disabled={disabled}
 93 |                onFocus={this.handleFocus}
 94 |                onBlur={this.handleBlur}
 95 |                onChange={this.handleChange}
 96 |                {...props}
 97 |         />
 98 |         <div class="mdc-radio__background">
 99 |           <div class="mdc-radio__outer-circle"/>
100 |           <div class="mdc-radio__inner-circle"/>
101 |         </div>
102 |       </div>
103 |     );
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/material-ripple/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | 
14 | /**
15 |  * Import local dependencies.
16 |  */
17 | 
18 | /**
19 |  * Import styles.
20 |  */
21 | import '@material/ripple/mdc-ripple.scss';
22 | 
23 | /**
24 |  * Export the ripple helper.
25 |  */
26 | export default (e) => {
27 |   if (!e || !e.getBoundingClientRect) {
28 |     return '';
29 |   }
30 |   let dimensions = e.getBoundingClientRect();
31 |   const maxDim = Math.max(dimensions.height, dimensions.width);
32 |   const surfaceDiameter = Math.sqrt(Math.pow(dimensions.width, 2) + Math.pow(dimensions.height, 2));
33 |   // 60% of the largest dimension of the surface
34 |   const fgSize = maxDim * 0.6;
35 |   // Diameter of the surface + 10px
36 |   const maxRadius = surfaceDiameter + 10;
37 |   const fgScale = maxRadius / fgSize;
38 |   return {
39 |     style: `--mdc-ripple-surface-width:${dimensions.width}px;
40 |     --mdc-ripple-surface-height:${dimensions.height}px;
41 |     --mdc-ripple-fg-size:${Math.round(fgSize)}px;
42 |     --mdc-ripple-fg-scale:${fgScale};
43 |     --mdc-ripple-left:${Math.round((dimensions.width / 2) - (fgSize / 2))}px;
44 |     --mdc-ripple-top:${Math.round((dimensions.height / 2) - (fgSize / 2))}px;`,
45 |     duration: 1000 * Math.sqrt(maxRadius / 1024)
46 |   }
47 | };
48 | 


--------------------------------------------------------------------------------
/material-snackbar/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/snackbar/mdc-snackbar.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class Snackbar extends Component {
29 | 
30 |   render({
31 |            'class': className,
32 |            children,
33 |            active,
34 |            text,
35 |            multiline,
36 |            actionOnBottom,
37 |            ...props
38 |          }, state, context) {
39 |     const classes = classnames('mdc-snackbar', {
40 |       'mdc-snackbar--active': active,
41 |       'mdc-snackbar--multiline': multiline,
42 |       'mdc-snackbar--action-on-bottom': actionOnBottom,
43 |     }, className);
44 |     return (
45 |       <div class={classes} aria-live="assertive" aria-atomic="true" aria-hidden={!active} {...props}>
46 |         <div class="mdc-snackbar__text">{text}</div>
47 |         <div class="mdc-snackbar__action-wrapper">
48 |           {children}
49 |         </div>
50 |       </div>
51 |     );
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/material-switch/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Bernd Wessels (https://github.com/BerndWessels/)
  3 |  *
  4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the MIT license found in the
  7 |  * LICENSE.txt file in the root directory of this source tree.
  8 |  */
  9 | 
 10 | /**
 11 |  * Import dependencies.
 12 |  */
 13 | import {h, Component} from 'preact';
 14 | import classnames from 'classnames/dedupe';
 15 | import ripple from '../material-ripple';
 16 | 
 17 | /**
 18 |  * Import local dependencies.
 19 |  */
 20 | 
 21 | /**
 22 |  * Import styles.
 23 |  */
 24 | import '@material/switch/mdc-switch.scss';
 25 | 
 26 | /**
 27 |  * Create the component.
 28 |  */
 29 | export default class Switch extends Component {
 30 | 
 31 |   constructor(props) {
 32 |     super(props);
 33 |     this.state = {
 34 |       focus: false,
 35 |       ripple: false,
 36 |       style: ''
 37 |     };
 38 |   }
 39 | 
 40 |   componentDidMount = () => {
 41 |     setTimeout(() => {
 42 |       const rippleInstance = ripple(this.root_);
 43 |       this.setState({style: rippleInstance.style});
 44 |     });
 45 |   };
 46 | 
 47 |   handleFocus = (e) => {
 48 |     this.setState({focus: true});
 49 |     this.props.onFocus && this.props.onFocus(e);
 50 |   };
 51 | 
 52 |   handleBlur = (e) => {
 53 |     this.setState({focus: false});
 54 |     this.props.onBlur && this.props.onBlur(e);
 55 |   };
 56 | 
 57 |   handleChange = (e) => {
 58 |     const rippleInstance = ripple(this.root_);
 59 |     this.setState({ripple: true, style: rippleInstance.style});
 60 |     setTimeout(() => {
 61 |       this.setState({ripple: false});
 62 |     }, rippleInstance.duration);
 63 |     this.props.onChange && this.props.onChange(e);
 64 |   };
 65 | 
 66 |   render({
 67 |            'class': className,
 68 |            children,
 69 |            disabled,
 70 |            onFocus,
 71 |            onBlur,
 72 |            onChange,
 73 |            ...props
 74 |          }, {
 75 |            focus,
 76 |            ripple,
 77 |            style
 78 |          }, context) {
 79 |     let classes = classnames('mdc-switch mdc-ripple-upgraded mdc-ripple-upgraded--unbounded', {
 80 |       'mdc-switch--disabled': disabled,
 81 |       'mdc-ripple-upgraded--background-active-fill': ripple,
 82 |       'mdc-ripple-upgraded--foreground-activation': ripple,
 83 |       'mdc-ripple-upgraded--foreground-deactivation': !ripple,
 84 |       'mdc-ripple-upgraded--background-focused': focus
 85 |     }, className);
 86 |     return (
 87 |       <div class={classes}
 88 |            style={style}
 89 |            ref={e => this.root_ = e}>
 90 |         <input class="mdc-switch__native-control"
 91 |                type="checkbox"
 92 |                disabled={disabled}
 93 |                onFocus={this.handleFocus}
 94 |                onBlur={this.handleBlur}
 95 |                onChange={this.handleChange}
 96 |                {...props}
 97 |         />
 98 |         <div className='mdc-switch__background'>
 99 |           <div className='mdc-switch__knob'/>
100 |         </div>
101 |       </div>
102 |     );
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/material-text-field/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Bernd Wessels (https://github.com/BerndWessels/)
  3 |  *
  4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
  5 |  *
  6 |  * This source code is licensed under the MIT license found in the
  7 |  * LICENSE.txt file in the root directory of this source tree.
  8 |  */
  9 | 
 10 | /**
 11 |  * Import dependencies.
 12 |  */
 13 | import {h, Component} from 'preact';
 14 | import classnames from 'classnames/dedupe';
 15 | 
 16 | /**
 17 |  * Import local dependencies.
 18 |  */
 19 | 
 20 | /**
 21 |  * Import styles.
 22 |  */
 23 | import '@material/textfield/mdc-textfield.scss';
 24 | 
 25 | /**
 26 |  * Create the component.
 27 |  */
 28 | export default class Checkbox extends Component {
 29 | 
 30 |   constructor(props) {
 31 |     super(props);
 32 |     this.state = {
 33 |       focused: false,
 34 |       valueInternal: this.props.value,
 35 |       validInternal: true
 36 |     };
 37 |   }
 38 | 
 39 |   componentWillReceiveProps(nextProps) {
 40 |     let {value} = this.props;
 41 |     if (nextProps.value !== value) {
 42 |       this.setState({valueInternal: nextProps.value});
 43 |     }
 44 |   }
 45 | 
 46 |   handleFocus = (e) => {
 47 |     this.setState({focused: true});
 48 |     this.props.onFocus && this.props.onFocus(e);
 49 |   };
 50 | 
 51 |   handleBlur = (e) => {
 52 |     console.log(e.target.validity); // TODO: find a way to match this with custom provided helptext.
 53 |     this.setState({focused: false});
 54 |     this.props.onBlur && this.props.onBlur(e);
 55 |   };
 56 | 
 57 |   handleChange = (e) => {
 58 |     this.setState({valueInternal: e.target.value, validInternal: e.target.checkValidity()});
 59 |     this.props.onChange && this.props.onChange(e);
 60 |   };
 61 | 
 62 |   render({
 63 |            id,
 64 |            type,
 65 |            value,
 66 |            label,
 67 |            placeholder,
 68 |            disabled,
 69 |            dense,
 70 |            required,
 71 |            pattern,
 72 |            helpText,
 73 |            helpTextPersistent,
 74 |            helpTextValidation,
 75 |            onFocus,
 76 |            onBlur,
 77 |            onChange,
 78 |            ...props
 79 |          }, {
 80 |            focused,
 81 |            valueInternal,
 82 |            validInternal
 83 |          }, context) {
 84 |     const classes = classnames('mdc-textfield mdc-textfield--upgraded', {
 85 |       'mdc-textfield--dense': dense,
 86 |       'mdc-textfield--disabled': disabled,
 87 |       'mdc-textfield--focused': focused,
 88 |       'mdc-textfield--invalid': !validInternal
 89 |     });
 90 |     const classesLabel = classnames('mdc-textfield__label', {
 91 |       'mdc-textfield__label--float-above': focused || (valueInternal && valueInternal.length)
 92 |     });
 93 |     const classesHelptext = classnames('mdc-textfield-helptext', {
 94 |       'mdc-textfield-helptext--persistent': helpTextPersistent,
 95 |       'mdc-textfield-helptext--validation-msg': helpTextValidation
 96 |     });
 97 |     const idInternal = id ? id : `${new Date().getTime()}.${Math.floor(Math.random() * 100)}`;
 98 |     return (
 99 |       <div>
100 |         <label class={classes}>
101 |           <input class="mdc-textfield__input"
102 |                  id={idInternal}
103 |                  type={type}
104 |                  value={valueInternal}
105 |                  placeholder={focused ? placeholder : false}
106 |                  disabled={disabled}
107 |                  required={required}
108 |                  pattern={pattern}
109 |                  aria-controls={`${idInternal}-validation-msg`}
110 |                  onFocus={this.handleFocus}
111 |                  onBlur={this.handleBlur}
112 |                  onChange={this.handleChange}
113 |                  {...props}
114 |           />
115 |           <span class={classesLabel}>{label}</span>
116 |         </label>
117 |         <p id={`${idInternal}-validation-msg`} class={classesHelptext}>{helpText}</p>
118 |       </div>
119 |     );
120 |   }
121 | }
122 | 


--------------------------------------------------------------------------------
/material-toolbar-row/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/toolbar/mdc-toolbar.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ToolbarRow extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-toolbar__row', className);
35 |     return (
36 |       <div class={classes} {...props}>{children}</div>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-toolbar-section/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/toolbar/mdc-toolbar.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ToolbarSection extends Component {
29 |   render({
30 |            'class': className,
31 |            start,
32 |            end,
33 |            children,
34 |            ...props
35 |          }, state, context) {
36 |     const classes = classnames('mdc-toolbar__section', {
37 |       'mdc-toolbar__section--align-start': start,
38 |       'mdc-toolbar__section--align-end': end
39 |     }, className);
40 |     return (
41 |       <section class={classes} {...props}>{children}</section>
42 |     );
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/material-toolbar-title/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/toolbar/mdc-toolbar.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class ToolbarTitle extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            ...props
33 |          }, state, context) {
34 |     const classes = classnames('mdc-toolbar__title', className);
35 |     return (
36 |       <span class={classes} {...props}>{children}</span>
37 |     );
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/material-toolbar/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Bernd Wessels (https://github.com/BerndWessels/)
 3 |  *
 4 |  * Copyright © 2016 Bernd Wessels. All rights reserved.
 5 |  *
 6 |  * This source code is licensed under the MIT license found in the
 7 |  * LICENSE.txt file in the root directory of this source tree.
 8 |  */
 9 | 
10 | /**
11 |  * Import dependencies.
12 |  */
13 | import {h, Component} from 'preact';
14 | import classnames from 'classnames/dedupe';
15 | 
16 | /**
17 |  * Import local dependencies.
18 |  */
19 | 
20 | /**
21 |  * Import styles.
22 |  */
23 | import '@material/toolbar/mdc-toolbar.scss';
24 | 
25 | /**
26 |  * Create the component.
27 |  */
28 | export default class Toolbar extends Component {
29 |   render({
30 |            'class': className,
31 |            children,
32 |            fixed,
33 |            ...props
34 |          }, state, context) {
35 |     const classes = classnames('mdc-toolbar', {
36 |       'mdc-toolbar--fixed': fixed
37 |     }, className);
38 |     return (
39 |       <header class={classes} {...props}>{children}</header>
40 |     );
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "preact-mdc",
 3 |   "version": "0.1.0",
 4 |   "description": "material design components for preact using material-components-web",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/BerndWessels/preact-mdc.git"
12 |   },
13 |   "keywords": [
14 |     "preact",
15 |     "mdc",
16 |     "material",
17 |     "design",
18 |     "components"
19 |   ],
20 |   "author": "Bernd Wessels",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/BerndWessels/preact-mdc/issues"
24 |   },
25 |   "homepage": "https://github.com/BerndWessels/preact-mdc#readme",
26 |   "peerDependencies": {
27 |     "classnames": "^2.0.0",
28 |     "material-components-web": "0.8.0",
29 |     "material-design-icons": "^3.0.0",
30 |     "preact": "^8.0.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------