Showing preview only (548K chars total). Download the full file or copy to clipboard to get everything.
Repository: react-mdc/react-material-components-web
Branch: develop
Commit: 1627e3e1e0a0
Files: 383
Total size: 462.0 KB
Directory structure:
gitextract_41q20qop/
├── .gitignore
├── .npmignore
├── .travis.yml
├── README.md
├── docs/
│ ├── .gitignore
│ ├── config/
│ │ └── webpack/
│ │ ├── app.js
│ │ ├── constants.js
│ │ └── vendor.js
│ ├── index.html
│ ├── package.json
│ ├── postcss.config.js
│ ├── src/
│ │ ├── js/
│ │ │ ├── Container/
│ │ │ │ ├── MainToolbar.tsx
│ │ │ │ ├── index.tsx
│ │ │ │ └── styles.scss
│ │ │ ├── common/
│ │ │ │ └── types.ts
│ │ │ ├── compat.ts
│ │ │ ├── components/
│ │ │ │ ├── Code.tsx
│ │ │ │ ├── CodeMirror.tsx
│ │ │ │ ├── ComponentPage/
│ │ │ │ │ ├── Content.tsx
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── styles.scss
│ │ │ │ ├── DarkTheme.tsx
│ │ │ │ ├── FullSize.tsx
│ │ │ │ ├── Icon.tsx
│ │ │ │ ├── Name.tsx
│ │ │ │ ├── Page/
│ │ │ │ │ ├── Content.tsx
│ │ │ │ │ ├── Footer.tsx
│ │ │ │ │ ├── Responsive.tsx
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── styles.scss
│ │ │ │ ├── ShowCase/
│ │ │ │ │ ├── Item.tsx
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── styles.scss
│ │ │ │ ├── Table.tsx
│ │ │ │ └── styles.scss
│ │ │ ├── index.tsx
│ │ │ ├── pages/
│ │ │ │ ├── ButtonPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── CardPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── CheckboxPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── DialogPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── ElevationPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── FABPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── FormFieldPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── LayoutGridPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── NotFoundPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── RadioPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── RipplePage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── SwitchPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── TextfieldPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── TypographyPage/
│ │ │ │ │ └── index.tsx
│ │ │ │ └── WelcomePage/
│ │ │ │ ├── index.tsx
│ │ │ │ └── styles.scss
│ │ │ ├── routes.tsx
│ │ │ └── utils/
│ │ │ └── code.ts
│ │ └── style/
│ │ ├── index.scss
│ │ ├── layout.scss
│ │ ├── preload.scss
│ │ └── vars/
│ │ └── _theme.scss
│ ├── tsconfig.json
│ ├── tslint.json
│ ├── typings/
│ │ ├── cssmodule.d.ts
│ │ ├── images.d.ts
│ │ └── raw-loader.d.ts
│ └── vendor.js
├── lerna.json
├── package.json
├── packages/
│ ├── base/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── ClassNameMetaBase.tsx
│ │ │ ├── DefaultComponentBase.ts
│ │ │ ├── MetaBase.tsx
│ │ │ ├── NativeDOMAdapter.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── ClassNameMetaBase.spec.tsx
│ │ │ │ ├── DefaultComponentBase.spec.tsx
│ │ │ │ ├── MetaBase.spec.tsx
│ │ │ │ ├── NativeDOMAdapter.spec.tsx
│ │ │ │ └── util.spec.tsx
│ │ │ ├── event.ts
│ │ │ ├── index.tsx
│ │ │ ├── types.tsx
│ │ │ └── util.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── button/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Button.tsx
│ │ │ ├── __tests__/
│ │ │ │ └── Button.spec.tsx
│ │ │ ├── constants.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── card/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Action.tsx
│ │ │ ├── Actions.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── HorizontalBlock.tsx
│ │ │ ├── Media.tsx
│ │ │ ├── MediaItem.tsx
│ │ │ ├── Primary.tsx
│ │ │ ├── Subtitle.tsx
│ │ │ ├── SupportingText.tsx
│ │ │ ├── Title.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Action.spec.tsx
│ │ │ │ ├── Actions.spec.tsx
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ ├── HorizontalBlock.spec.tsx
│ │ │ │ ├── Media.spec.tsx
│ │ │ │ ├── MediaItem.spec.tsx
│ │ │ │ ├── Primary.spec.tsx
│ │ │ │ ├── Subtitle.spec.tsx
│ │ │ │ ├── SupportingText.spec.tsx
│ │ │ │ └── Title.spec.tsx
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── checkbox/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Background.tsx
│ │ │ ├── Checkmark.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── Default.tsx
│ │ │ ├── Mixedmark.tsx
│ │ │ ├── NativeControl.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Background.spec.tsx
│ │ │ │ ├── Checkmark.spec.tsx
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ ├── Default.spec.tsx
│ │ │ │ ├── Mixedmark.spec.tsx
│ │ │ │ ├── NativeControl.spec.tsx
│ │ │ │ └── adapter.spec.ts
│ │ │ ├── adapter.ts
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── dialog/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Backdrop.tsx
│ │ │ ├── Body.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── Footer/
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Button.spec.tsx
│ │ │ │ │ └── Container.spec.tsx
│ │ │ │ ├── constants.ts
│ │ │ │ └── index.ts
│ │ │ ├── Header/
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Title.tsx
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Container.spec.tsx
│ │ │ │ │ └── Title.spec.tsx
│ │ │ │ ├── constants.ts
│ │ │ │ └── index.ts
│ │ │ ├── Surface.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Backdrop.spec.tsx
│ │ │ │ ├── Body.spec.tsx
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ └── Surface.spec.tsx
│ │ │ ├── adapter.ts
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── drawer/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Permanent/
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Content.tsx
│ │ │ │ ├── ToolbarSpacer.tsx
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Container.spec.tsx
│ │ │ │ │ ├── Content.spec.tsx
│ │ │ │ │ └── ToolbarSpacer.spec.tsx
│ │ │ │ ├── constants.ts
│ │ │ │ └── index.ts
│ │ │ ├── Temporary/
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Content.tsx
│ │ │ │ ├── Drawer.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── HeaderContent.tsx
│ │ │ │ ├── ToolbarSpacer.tsx
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Container.spec.tsx
│ │ │ │ │ ├── Content.spec.tsx
│ │ │ │ │ ├── Drawer.spec.tsx
│ │ │ │ │ ├── Header.spec.tsx
│ │ │ │ │ ├── HeaderContent.spec.tsx
│ │ │ │ │ └── ToolbarSpacer.spec.tsx
│ │ │ │ ├── adapter.ts
│ │ │ │ ├── constants.ts
│ │ │ │ ├── drawerUtil.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── elevation/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Elevation.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Elevation.spec.tsx
│ │ │ │ └── utils.spec.ts
│ │ │ ├── constants.ts
│ │ │ ├── index.tsx
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── fab/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Container.tsx
│ │ │ ├── Icon.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ └── Icon.spec.tsx
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── form-field/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── FormField.tsx
│ │ │ ├── __tests__/
│ │ │ │ └── FormField.spec.tsx
│ │ │ ├── constants.ts
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── layout-grid/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Cell.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Cell.spec.tsx
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ └── utils.spec.ts
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── list/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Container.tsx
│ │ │ ├── Divider.tsx
│ │ │ ├── Group/
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── Subheader.tsx
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Container.spec.tsx
│ │ │ │ │ └── Subheader.spec.tsx
│ │ │ │ ├── constants.ts
│ │ │ │ └── index.ts
│ │ │ ├── Item/
│ │ │ │ ├── Container.tsx
│ │ │ │ ├── EndDetail.tsx
│ │ │ │ ├── StartDetail.tsx
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Container.spec.tsx
│ │ │ │ │ ├── EndDetail.spec.tsx
│ │ │ │ │ └── StartDetail.spec.tsx
│ │ │ │ ├── constants.ts
│ │ │ │ └── index.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ └── Divider.spec.tsx
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── radio/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Background.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── Default.tsx
│ │ │ ├── InnerCircle.tsx
│ │ │ ├── NativeControl.tsx
│ │ │ ├── OuterCircle.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Background.spec.tsx
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ ├── Default.spec.tsx
│ │ │ │ ├── InnerCircle.spec.tsx
│ │ │ │ ├── NativeControl.spec.tsx
│ │ │ │ ├── OuterCircle.spec.tsx
│ │ │ │ └── adapter.spec.ts
│ │ │ ├── adapter.ts
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── react-material-components-web/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── ripple/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Ripple.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Ripple.spec.tsx
│ │ │ │ └── utils.spec.ts
│ │ │ ├── adapter.ts
│ │ │ ├── constants.ts
│ │ │ ├── index.tsx
│ │ │ ├── rippleUtil.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── switch/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Background.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── Default.tsx
│ │ │ ├── Knob.tsx
│ │ │ ├── Label.tsx
│ │ │ ├── NativeControl.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Background.spec.tsx
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ ├── Default.spec.tsx
│ │ │ │ ├── Knob.tsx
│ │ │ │ ├── Label.spec.tsx
│ │ │ │ └── NativeControl.spec.tsx
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── textfield/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Container.tsx
│ │ │ ├── Default.tsx
│ │ │ ├── Input.tsx
│ │ │ ├── Label.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ ├── Default.spec.tsx
│ │ │ │ ├── Input.spec.tsx
│ │ │ │ ├── Label.spec.tsx
│ │ │ │ └── adapter.spec.ts
│ │ │ ├── adapter.ts
│ │ │ ├── constants.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── theme/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Theme.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Theme.spec.tsx
│ │ │ │ └── utils.spec.ts
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── toolbar/
│ │ ├── .npmignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── Container.tsx
│ │ │ ├── FixedToolbarAdjusted.tsx
│ │ │ ├── Icon.tsx
│ │ │ ├── Row.tsx
│ │ │ ├── Section.tsx
│ │ │ ├── Title.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── Container.spec.tsx
│ │ │ │ ├── FixedToolbarAdjusted.spec.tsx
│ │ │ │ ├── Icon.spec.tsx
│ │ │ │ ├── Row.spec.tsx
│ │ │ │ ├── Section.spec.tsx
│ │ │ │ ├── Title.spec.tsx
│ │ │ │ └── utils.spec.ts
│ │ │ ├── constants.tsx
│ │ │ ├── index.ts
│ │ │ ├── types.tsx
│ │ │ └── utils.tsx
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ └── typography/
│ ├── .npmignore
│ ├── package.json
│ ├── src/
│ │ ├── Container.tsx
│ │ ├── Text.tsx
│ │ ├── __tests__/
│ │ │ ├── Container.spec.tsx
│ │ │ ├── Text.spec.tsx
│ │ │ └── utils.spec.ts
│ │ ├── constants.tsx
│ │ ├── index.tsx
│ │ ├── shortcuts.tsx
│ │ ├── types.tsx
│ │ └── utils.tsx
│ ├── tsconfig.json
│ └── tslint.json
├── scripts/
│ ├── package.py
│ └── requirements.txt
├── tsconfig.base.json
├── tsconfig.json
├── tslint.base.json
└── tslint.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
### Project ###
# Docs
/docs/build/
# Don't use yarn for library project
yarn.lock
# Transpiled source directory
lib/
### VS Code ###
.vscode/
### WebStorm ###
.idea/
### Node ###
# Logs
logs
*.log
npm-debug.log*
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
### For Vim Users ###
# swap
[._]*.s[a-v][a-z]
[._]*.sw[a-p]
[._]s[a-v][a-z]
[._]sw[a-p]
# session
Session.vim
# temporary
.netrwhist
*~
# auto-generated tag files
tags
### Python ###
*.pyc
### Jest Generated Files ###
/packages/**/jest_0
================================================
FILE: .npmignore
================================================
.git/
node_modules/
src/
yarn.lock
**/__mocks__/**
**/__tests__/**
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- "7"
sudo: false
cache:
directories:
- "node_modules"
before_script:
- lerna bootstrap
- npm run clean
script:
- npm run build
- npm run test
================================================
FILE: README.md
================================================
React Material Components Web
=============================
[](https://opensource.org/licenses/MIT)
[](https://www.npmjs.com/package/react-material-components-web)
[](https://travis-ci.org/react-mdc/react-material-components-web)
React wrapper of [Material Components Web](
https://github.com/material-components/material-components-web)
Under Active Development
------------------------
The project is under active development.
Every updates can contain breaking changes before 0.2.0.
We **do not** recommend you to use this library for produciton applications at this time.
Documentation
-------------
You can find documentation with live demo at https://react-mdc.github.io/
Features
--------
* Typed strictly with [TypeScript](http://typescriptlang.org)
You can access typing support by also using TypeScript
* Stylesheet independent
Since *Material Components Web* can be customized with scss,
it does not depend on specific stylesheet.
You can load your own stylesheet or a default one.
* Each component packaged individually
Like *Material Components Web*, You can access all components individually,
under [@react-mdc npm scope](https://www.npmjs.com/%7Ereact-mdc).
Getting Start
-------------
Install the library
``` bash
$ npm install --save @react-mdc/typography
```
Import the stylesheet
``` html
<link type="text/css" href="/static/material-components-web.min.css" rel="stylesheet" />
```
Or load using webpack and scss-loader
`my-mdc.scss`
``` scss
// My main Sass file.
$mdc-theme-primary: #9c27b0;
$mdc-theme-accent: #76ff03;
$mdc-theme-background: #fff;
@import "material-components-web/material-components-web";
```
`app.js`
``` javascript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "./stylesheets/my-mdc.scss";
import Main from './main.js';
ReactDOM.render(<Main />, document.getElementById('root'));
```
And import *@react-mdc* then give it a shot.
`main.js`
``` typescript
import * as React from "react";
import Typography from "@react-mdc/typography";
export default class Main extends React.Component<{}, {}> {
render () {
return (
<Typography>
<Typography.Title>
This is an example
</Typography.Title>
<Typography.Body2>
Hello world!
</Typography.Body2>
</Typography>
);
}
}
```
Setup for Development
---------------------
Bootstrap
``` shell
$ lerna bootstrap
```
Build
``` shell
$ npm run build
```
Run Docs
--------
``` shell
$ cd docs
$ npm start
```
Watch for Changes and Build
---------------------------
``` shell
$ npm run watch
```
Run Test
--------
``` shell
$ npm test
```
to watch
``` shell
$ npm test:watch
```
================================================
FILE: docs/.gitignore
================================================
### Typescript ###
.awcache/
### Node ###
# Logs
logs
*.log
npm-debug.log*
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
### For Vim Users ###
# swap
[._]*.s[a-v][a-z]
[._]*.sw[a-p]
[._]s[a-v][a-z]
[._]sw[a-p]
# session
Session.vim
# temporary
.netrwhist
*~
# auto-generated tag files
tags
================================================
FILE: docs/config/webpack/app.js
================================================
const fs = require("fs");
const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const {
TsConfigPathsPlugin,
CheckerPlugin
} = require("awesome-typescript-loader");
const {
DOCS_ROOT,
BUILD_PATH,
SRC_ROOT,
PRODUCTION
} = require("./constants");
function loadManifest(name) {
const manifestName = name + "-manifest.json";
return JSON.parse(fs.readFileSync(path.resolve(BUILD_PATH, manifestName), "utf-8"));
}
/* Configure plugins */
const extractVendorStyle = new ExtractTextPlugin({
filename: "vendor.css"
});
const extractLocalStyle = new ExtractTextPlugin({
filename: "local.css"
});
const ENV_PLUGINS = PRODUCTION ? [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
] : [];
module.exports = {
context: DOCS_ROOT,
entry: {
app: [path.resolve(SRC_ROOT, "js", "index.tsx")]
},
plugins: [
extractVendorStyle,
extractLocalStyle,
new webpack.DllReferencePlugin({
context: DOCS_ROOT,
manifest: loadManifest("vendor")
}),
new TsConfigPathsPlugin(),
new CheckerPlugin()
].concat(ENV_PLUGINS),
output: {
path: BUILD_PATH,
publicPath: "/build/",
filename: "bundle.js"
},
resolve: {
alias: {
app: SRC_ROOT
},
extensions: ["*", ".js", ".ts", ".tsx"]
},
module: {
loaders: [
/* Typescript */
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
options: {
useCache: true,
}
},
{
test: /\.tsx?$/,
enforce: 'pre',
loader: 'tslint-loader',
options: {
emitErrors: true,
}
},
/* Styles */
{
// Don't compile external stylesheets
test: /\.css$/,
include: /node_modules/,
loader: extractVendorStyle.extract({
use: "css-loader",
// use style-loader in development
fallback: "style-loader"
})
},
/* SCSS */
{
test: /\.scss$/,
loader: extractLocalStyle.extract({
use: [{
loader: 'css-loader',
options: {
localIdentName: '[local]--[hash:base64:5]',
importLoaders: 1
}
},
'postcss-loader',
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(DOCS_ROOT, 'node_modules'),
path.resolve(DOCS_ROOT, 'src')
]
}
}
],
// use style-loader in development
fallback: 'style-loader'
})
},
/* Assets */
{
exclude: [
/\.html$/,
/\.(ts|tsx)$/,
/\.css$/,
/\.scss$/,
/\.json$/,
/\.svg$/,
/\.js$/
],
loader: "url-loader",
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]"
}
},
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.svg$/,
loader: "file-loader",
query: {
name: "static/media/[name].[hash:8].[ext]"
}
}
]
},
devtool: "source-map"
};
================================================
FILE: docs/config/webpack/constants.js
================================================
const path = require("path");
const PROJECT_ROOT = module.exports.PROJECT_ROOT = path.resolve(__dirname, "..", "..", "..");
const DOCS_ROOT = module.exports.DOCS_ROOT = path.resolve(PROJECT_ROOT, "docs");
const BUILD_PATH = module.exports.BUILD_PATH = path.resolve(DOCS_ROOT, "build");
const SRC_ROOT = module.exports.SRC_ROOT = path.resolve(DOCS_ROOT, "src");
const PRODUCTION = module.exports.PRODUCTION = process.env.NODE_ENV === "production";
================================================
FILE: docs/config/webpack/vendor.js
================================================
const path = require("path");
const webpack = require("webpack");
const {
DOCS_ROOT,
BUILD_PATH,
PRODUCTION
} = require("./constants");
const ENV_PLUGINS = PRODUCTION ? [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
] : [];
module.exports = {
context: DOCS_ROOT,
entry: {
vendor: [path.resolve(DOCS_ROOT, "vendor.js")]
},
plugins: [
new webpack.DllPlugin({
context: DOCS_ROOT,
path: path.resolve(BUILD_PATH, "[name]-manifest.json"),
name: "[name]_dll"
})
].concat(ENV_PLUGINS),
output: {
path: BUILD_PATH,
publicPath: "/build/",
filename: "[name].dll.js",
library: "[name]_dll"
},
devtool: "source-map"
};
================================================
FILE: docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React Material Components Web: React Components for Material Components Web</title>
<link type="text/css" href="build/vendor.css" rel="stylesheet" />
<link type="text/css" href="build/local.css" rel="stylesheet" />
</head>
<body>
<div id="root">
<div id="preload-react">
Loading...
</div>
</div>
<script type="text/javascript" src="build/vendor.dll.js"></script>
<script type="text/javascript" src="build/bundle.js"></script>
</body>
</html>
================================================
FILE: docs/package.json
================================================
{
"name": "Document",
"author": "Choi Geonu",
"license": "MIT",
"private": true,
"dependencies": {
"@react-mdc/base": "^0.1.12",
"@react-mdc/button": "^0.1.8",
"@react-mdc/card": "^0.1.9",
"@react-mdc/checkbox": "^0.1.12",
"@react-mdc/dialog": "^0.1.7",
"@react-mdc/drawer": "^0.1.13",
"@react-mdc/elevation": "^0.1.9",
"@react-mdc/fab": "^0.1.9",
"@react-mdc/form-field": "^0.1.8",
"@react-mdc/layout-grid": "^0.1.9",
"@react-mdc/list": "^0.1.9",
"@react-mdc/radio": "^0.1.12",
"@react-mdc/ripple": "^0.1.11",
"@react-mdc/switch": "^0.1.9",
"@react-mdc/textfield": "^0.1.11",
"@react-mdc/theme": "^0.1.8",
"@react-mdc/toolbar": "^0.1.11",
"@react-mdc/typography": "^0.1.8",
"@types/codemirror": "0.0.40",
"@types/react": "^15.0.18",
"@types/react-dom": "^0.14.23",
"classnames": "^2.2.5",
"codemirror": "^5.25.2",
"core-js": "^2.4.1",
"material-components-web": "^0.10.0",
"react": "^15.0.0",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
},
"devDependencies": {
"@types/enzyme": "^2.8.0",
"autoprefixer": "^7.0.1",
"awesome-typescript-loader": "^3.1.3",
"cross-env": "^4.0.0",
"css-loader": "^0.28.1",
"enzyme": "^2.8.2",
"extract-text-webpack-plugin": "2.1.0",
"file-loader": "^0.11.1",
"gh-pages": "^1.0.0",
"json-loader": "^0.5.4",
"node-sass": "^4.5.0",
"npm-run-all": "^4.0.2",
"postcss-loader": "^2.0.5",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.5",
"shelljs": "^0.7.7",
"shx": "^0.2.2",
"style-loader": "^0.17.0",
"tslint": "^5.2.0",
"tslint-loader": "^3.5.3",
"tslint-react": "^3.0.0",
"typescript": "^2.4.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"scripts": {
"clean": "shx rm -rf build/",
"precompile": "npm run clean",
"postinstall": "npm run compile:vendor",
"compile:vendor": "webpack --progress --config config/webpack/vendor.js",
"compile:app": "webpack --progress --config config/webpack/app.js",
"compile": "npm-run-all compile:vendor compile:app",
"start:webpack-dev-server": "webpack-dev-server --progress --config config/webpack/app.js",
"start": "npm-run-all compile:vendor start:webpack-dev-server",
"release:compile": "cross-env NODE_ENV=production npm run compile",
"release:gh-pages": "gh-pages -d . -m 'Update Docs' --remove node_modules --repo https://github.com/react-mdc/react-mdc.github.io.git --branch master --dotfiles true",
"release": "npm-run-all clean release:compile release:gh-pages"
},
"version": "0.1.7"
}
================================================
FILE: docs/postcss.config.js
================================================
module.exports = {
plugins: [
require('autoprefixer')({ /* ...options */ })
]
};
================================================
FILE: docs/src/js/Container/MainToolbar.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Toolbar from "@react-mdc/toolbar";
import DarkTheme from "app/js/components/DarkTheme";
import { MaterialIcon } from "app/js/components/Icon";
import * as styles from "./styles.scss";
export type Props = {
className?: string,
};
export default class MainToolbar extends React.Component<Props, {}> {
public props: Props;
public render() {
return (
<DarkTheme.Meta>
<Toolbar className={classNames(this.props.className, styles.toolbar)} fixed>
<Toolbar.Row>
<Toolbar.Section.Meta align="start">
<Link to="/" className={styles["toolbar-title"]}>
<MaterialIcon className={styles["toolbar-icon"]}>
layers
</MaterialIcon>
<Toolbar.Title className={styles["toolbar-title-text"]}>
React Material Components Web
</Toolbar.Title>
</Link>
</Toolbar.Section.Meta>
</Toolbar.Row>
</Toolbar>
</DarkTheme.Meta>
);
}
}
================================================
FILE: docs/src/js/Container/index.tsx
================================================
import * as React from "react";
import Toolbar from "@react-mdc/toolbar";
import Typography from "@react-mdc/typography";
import MainToolbar from "./MainToolbar";
import * as styles from "./styles.scss";
export default class Container extends React.Component<{ children?: React.ReactChild }, {}> {
public render() {
return (
<Typography className={styles["container"]}>
<MainToolbar />
<Toolbar.FixedToolbarAdjusted>
{this.props.children}
</Toolbar.FixedToolbarAdjusted>
</Typography>
);
}
}
================================================
FILE: docs/src/js/Container/styles.scss
================================================
@import "style/vars/theme";
:local {
.container {
flex: 1;
}
.toolbar {
/* Codemirror has z-index > 3 */
z-index: 4;
}
.toolbar-title {
text-decoration: none;
@include mdc-theme-dark {
@include mdc-theme-prop(color, text-primary-on-dark);
}
}
.toolbar-icon {
padding-right: 16px;
}
.toolbar-title-text {
font-family: Roboto Mono;
}
}
================================================
FILE: docs/src/js/common/types.ts
================================================
================================================
FILE: docs/src/js/compat.ts
================================================
/**
* Compatibility
*/
// ES2017 Polyfills
import "core-js/es7/index.js";
================================================
FILE: docs/src/js/components/Code.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import { default as CodeMirror, Props as CodeMirrorProps } from "./CodeMirror";
import * as styles from "./styles.scss";
type Props = CodeMirrorProps & {
className?: string,
options?: any,
mode?: string,
lineNumbers?: boolean,
readOnly?: boolean,
};
function ifNull<T>(nullable: T | null | undefined, then: T): T {
if (nullable == null) {
return then;
} else {
return nullable;
}
}
export default function Code(p: Props) {
let {
className,
options,
mode,
lineNumbers,
readOnly,
...props,
} = p;
className = classNames(styles.code, className);
const mergedOptions: {
[key: string]: any,
} = {};
mergedOptions.mode = ifNull<string>(mode, "jsx");
mergedOptions.lineNumbers = ifNull<boolean>(lineNumbers, false);
mergedOptions.readOnly = ifNull<boolean>(readOnly, true);
options = {
...mergedOptions,
...options,
};
return (
<div className={className}>
<CodeMirror options={options} {...props} />
</div>
);
}
================================================
FILE: docs/src/js/components/CodeMirror.tsx
================================================
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as classNames from "classnames";
import * as CodeMirror from "codemirror";
import * as _ from "lodash";
function normalizeLineEndings(str: string | null | undefined) {
if (str == null) {
return str;
}
return str.replace(/\r\n|\r/g, "\n");
}
type CodemirrorType = typeof CodeMirror;
export type Props = {
value: string,
className?: string,
codeMirrorInstance?: CodemirrorType,
defaultValue?: string,
onFocusChange?: (focused: boolean) => void,
onChange?: (value: string, change: CodeMirror.EditorChangeLinkedList) => void,
onScroll?: (instance: CodeMirror.Editor) => void,
options?: object,
path?: string,
preserveScrollPosition?: boolean,
};
type State = {
focused: false,
};
export default class ReactCodemirror extends React.Component<Props, State> {
public static defaultProps = {
preserveScrollPosition: false,
};
public state: State = {
focused: false,
};
private codeMirror: CodeMirror.EditorFromTextArea | null = null;
public componentWillMount() {
this.componentWillReceiveProps = _.debounce(this.componentWillReceiveProps, 0);
}
public componentWillUnmount() {
// is there a lighter-weight way to remove the cm instance?
if (this.codeMirror) {
this.codeMirror.toTextArea();
}
}
public componentWillReceiveProps(nextProps: Props) {
if (this.codeMirror &&
nextProps.value !== undefined &&
normalizeLineEndings(this.codeMirror.getValue()) !== normalizeLineEndings(nextProps.value)) {
if (this.props.preserveScrollPosition) {
const prevScrollPosition = this.codeMirror.getScrollInfo();
this.codeMirror.setValue(nextProps.value);
this.codeMirror.scrollTo(prevScrollPosition.left, prevScrollPosition.top);
} else {
this.codeMirror.setValue(nextProps.value);
}
}
if (this.codeMirror != null && typeof nextProps.options === "object") {
for (const optionName in nextProps.options) {
if (nextProps.options.hasOwnProperty(optionName)) {
this.codeMirror.setOption(optionName, nextProps.options[optionName]);
}
}
}
}
public render() {
const editorClassName = classNames(
"ReactCodeMirror",
this.state.focused ? "ReactCodeMirror--focused" : null,
this.props.className,
);
return (
<div className={editorClassName}>
<textarea ref={this.handleTextAreaRef}
name={this.props.path}
defaultValue={this.props.value}
autoComplete="off" />
</div>
);
}
public focus() {
if (this.codeMirror) {
this.codeMirror.focus();
}
}
public getCodeMirror() {
return this.codeMirror;
}
private getCodeMirrorInstance(): CodemirrorType {
return this.props.codeMirrorInstance || CodeMirror;
}
private handleTextAreaRef = (textArea: React.ReactInstance | null) => {
if (textArea == null) {
return textArea;
}
const textareaNode = ReactDOM.findDOMNode(textArea) as HTMLTextAreaElement;
if (textareaNode.tagName.toLowerCase() !== "textarea") {
throw new Error("Editor should be a textarea");
}
const codeMirrorInstance = this.getCodeMirrorInstance();
this.codeMirror = codeMirrorInstance.fromTextArea(textareaNode, this.props.options);
this.codeMirror.on("change", this.codemirrorValueChanged);
this.codeMirror.on("focus", this.focusChanged.bind(this, true));
this.codeMirror.on("blur", this.focusChanged.bind(this, false));
this.codeMirror.on("scroll", this.scrollChanged);
this.codeMirror.setValue(this.props.defaultValue || this.props.value || "");
}
private focusChanged = (focused) => {
this.setState({
focused,
});
if (this.props.onFocusChange) {
this.props.onFocusChange(focused);
}
}
private scrollChanged = (cm) => {
if (this.props.onScroll) {
this.props.onScroll(cm.getScrollInfo());
}
}
private codemirrorValueChanged = (doc: CodeMirror.Editor, change: CodeMirror.EditorChangeLinkedList) => {
if (this.props.onChange && change.origin !== "setValue") {
this.props.onChange(doc.getValue(), change);
}
}
}
================================================
FILE: docs/src/js/components/ComponentPage/Content.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import * as styles from "./styles.scss";
export default class Content extends React.Component<React.HTMLProps<HTMLDivElement>, {}> {
public render() {
let {
className,
...props,
} = this.props;
className = classNames(styles["component-content"], className);
return (
<div className={className} {...props} />
);
}
}
================================================
FILE: docs/src/js/components/ComponentPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Drawer from "@react-mdc/drawer";
import Typography from "@react-mdc/typography";
import Page from "app/js/components/Page";
import Content from "./Content";
import * as styles from "./styles.scss";
function NavItem(props) {
return (
<li className={styles["component-list-item"]}>
<Typography.Text.Meta textStyle="subheading2" adjustMargin>
<Link
activeClassName={styles["component-list-item--active"]}
{...props} />
</Typography.Text.Meta>
</li>
);
}
export default class ComponentPage extends React.Component<React.HTMLProps<HTMLDivElement>, {}> {
public static Content = Content;
public render() {
const {
ref: _ref,
children,
...props,
} = this.props;
return (
<Page {...props}>
<Page.Responsive>
<Page.Content className={styles["component-page"]}>
<Drawer.Permanent className={styles["component-drawer"]}>
<Drawer.Permanent.Content>
<ul className={styles["component-list"]}>
<NavItem to="/button">
Button
</NavItem>
<NavItem to="/card">
Card
</NavItem>
<NavItem to="/checkbox">
Checkbox
</NavItem>
<NavItem to="/dialog">
Dialog
</NavItem>
<NavItem to="/elevation">
Elevation
</NavItem>
<NavItem to="/fab">
FAB
</NavItem>
<NavItem to="/form-field">
Form Field
</NavItem>
<NavItem to="/layout-grid">
Layout Grid
</NavItem>
<NavItem to="/radio">
Radio
</NavItem>
<NavItem to="/ripple">
Ripple
</NavItem>
<NavItem to="/switch">
Switch
</NavItem>
<NavItem to="/textfield">
Textfield
</NavItem>
<NavItem to="/typography">
Typography
</NavItem>
</ul>
</Drawer.Permanent.Content>
</Drawer.Permanent>
{children}
</Page.Content>
</Page.Responsive>
<Page.Footer />
</Page>
);
}
}
================================================
FILE: docs/src/js/components/ComponentPage/styles.scss
================================================
@import "style/vars/theme";
:local {
.component-page {
width: 100%;
display: flex;
flex-direction: row;
}
.component-content {
flex: 1;
display: flex;
flex-direction: column;
}
.component-drawer {
border-right: none;
}
.component-showcase {
width: 100%;
padding: $app-showcase-padding;
background: $app-showcase-background;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.component-list {
list-style: none;
padding: 0;
}
.component-list-item {
width: 100%;
display: block;
margin-top: 8px;
margin-bottom: 8px;
color: lighten(black, 50);
a {
cursor: pointer;
text-decoration: none;
color: inherit;
padding-top: 4px;
padding-bottom: 4px;
}
&:hover {
a {
border-bottom: solid 1px;
border-bottom-color: $mdc-theme-primary;
}
}
}
a.component-list-item--active {
color: black;
border-bottom: solid 1px;
border-bottom-color: $mdc-theme-primary;
}
}
================================================
FILE: docs/src/js/components/DarkTheme.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import Theme from "@react-mdc/theme";
import {
ChildProps as ThemeChildProps,
MetaProps,
} from "@react-mdc/theme/lib/Theme";
import * as styles from "./styles.scss";
class Meta extends Theme.Meta {
public static defaultProps = {
textColor: "primary",
onColor: "dark",
color: "dark",
};
protected renderClassName(childProps: ThemeChildProps) {
return classNames(styles["app--theme-dark"], super.renderClassName(childProps));
}
}
export default class DarkTheme extends Theme {
public static Meta = Meta;
protected getMetaComponent() {
return Meta;
}
}
================================================
FILE: docs/src/js/components/FullSize.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import * as styles from "./styles.scss";
function Center(props: React.HTMLProps<HTMLDivElement>) {
return (
<div {...props} className={classNames(props.className, styles.fullsize, styles.center)} />
);
}
export default class FullSize extends React.Component<React.HTMLProps<HTMLDivElement>, {}> {
public static Center = Center;
public render() {
return (
<div {...this.props} className={classNames(this.props.className, styles.fullsize)} />
);
}
}
================================================
FILE: docs/src/js/components/Icon.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import * as styles from "./styles.scss";
export function Pen(props) {
return (
<MaterialIcon {...props}>edit</MaterialIcon>
);
}
export function MaterialIcon(props) {
let {
wrap,
className,
...other,
} = props;
wrap = wrap || "i";
className = classNames(
className,
styles.icon,
);
return React.createElement(wrap, {
className,
...other,
});
}
================================================
FILE: docs/src/js/components/Name.tsx
================================================
import * as React from "react";
import Code from "./Code";
export default function Name(props: React.HTMLProps<HTMLElement>) {
const {
children,
...p,
} = props;
const value = React.Children.toArray(children).map((x) => x.toString()).join("");
return (
<Code value={`<${value} />`} />
);
}
================================================
FILE: docs/src/js/components/Page/Content.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import * as styles from "./styles.scss";
export default class Content extends React.Component<React.HTMLProps<HTMLDivElement>, {}> {
public render() {
let {
className,
...props,
} = this.props;
className = classNames(styles["content"], className);
return (
<div className={className} {...props} />
);
}
}
================================================
FILE: docs/src/js/components/Page/Footer.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import { Link } from "react-router";
import Theme from "@react-mdc/theme";
import Typography from "@react-mdc/typography";
import Responsive from "./Responsive";
import * as styles from "./styles.scss";
export default class Footer extends React.Component<React.HTMLProps<HTMLDivElement>, {}> {
public render() {
let {
className,
children,
...props,
} = this.props;
className = classNames(styles["footer"], className);
return (
<div className={className} {...props}>
<Responsive className={styles["footer-content"]}>
React Material Components Web
<div>
<span className={styles["badge"]}>
<a href="https://github.com/react-mdc/react-material-components-web"
target="_blank">
<img src={
"https://img.shields.io/github/stars/" +
"react-mdc/react-material-components-web.svg?style=social&label=Star"
}
alt="Github Stars" />
</a>
</span>
<span className={styles["badge"]}>
<a href="https://opensource.org/licenses/MIT"
target="_blank">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg"
alt="MIT License" />
</a>
</span>
<span className={styles["badge"]}>
<a href="https://www.npmjs.com/package/react-material-components-web"
target="_blank">
<img src="https://badge.fury.io/js/react-material-components-web.svg"
alt="NPM Repository" />
</a>
</span>
</div>
{children}
<div className={styles["footer-made-with"]}>
<Theme.Meta textColor="primary" onColor="light">
<Typography.Text.Meta textStyle="caption">
<Link to="/">
Made with React Material Components Web
</Link>
</Typography.Text.Meta>
</Theme.Meta>
</div>
</Responsive>
</div>
);
}
}
================================================
FILE: docs/src/js/components/Page/Responsive.tsx
================================================
import * as React from "react";
import {
ClassNameMetaBase,
DefaultComponentBase,
} from "@react-mdc/base";
import * as classNames from "classnames";
import * as styles from "./styles.scss";
type ChildProps = {
className?: string,
};
type MetaProps = {
};
class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
protected renderClassName(childProps: ChildProps) {
return classNames(styles["responsive"], super.renderClassName(childProps));
}
}
export default class Responsive extends DefaultComponentBase<React.HTMLProps<HTMLDivElement>, MetaProps, {}> {
public static Meta = Meta;
protected getMetaPropNames() {
return [];
}
protected getMetaComponent() {
return Meta;
}
protected getChildComponent() {
return "div";
}
}
================================================
FILE: docs/src/js/components/Page/index.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import * as styles from "./styles.scss";
import Content from "./Content";
import Footer from "./Footer";
import Responsive from "./Responsive";
export default class Page extends React.Component<React.HTMLProps<HTMLDivElement>, {}> {
public static Content = Content;
public static Footer = Footer;
public static Responsive = Responsive;
public render() {
let {
className,
...props,
} = this.props;
className = classNames(styles["page"], className);
return (
<div className={className} {...props} />
);
}
}
================================================
FILE: docs/src/js/components/Page/styles.scss
================================================
:local {
.page {
flex: 1;
display: flex;
flex-direction: column;
}
.responsive {
max-width: 1312px;
padding-left: 16px;
padding-right: 16px;
@media (max-width: 1312px) and (min-width: 721px) {
max-width: 1400px;
padding-left: 60px;
padding-right: 60px;
}
@media (min-width: 1312px) {
margin-left: auto;
margin-right: auto;
width: 100%;
}
}
.content {
margin-top: 80px;
}
.footer {
margin-top: 144px;
background: #fafafa;
}
.footer-content {
overflow: hidden;
height: 192px;
padding-top: 32px;
padding-bottom: 32px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footer-made-with {
text-align: right;
a {
text-decoration: none;
}
}
.badge {
margin-right: 4px;
}
}
================================================
FILE: docs/src/js/components/ShowCase/Item.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import * as styles from "./styles.scss";
export default class Item extends React.Component<React.HTMLProps<HTMLSpanElement>, {}> {
public render() {
let {
className,
...props,
} = this.props;
className = classNames(styles["showcase-item"], className);
return (
<span className={className} {...props} />
);
}
}
================================================
FILE: docs/src/js/components/ShowCase/index.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import Item from "./Item";
import * as styles from "./styles.scss";
export default class ShowCase extends React.Component<React.HTMLProps<HTMLDivElement> & { large?: boolean }, {}> {
public static Item = Item;
public render() {
let {
className,
large,
children,
...props,
} = this.props;
className = classNames(styles["showcase"], className, {
[styles["showcase--large"]]: large,
});
return (
<div className={className} {...props}>
{children}
</div>
);
}
}
================================================
FILE: docs/src/js/components/ShowCase/styles.scss
================================================
@import "style/vars/theme";
:local {
.showcase {
padding: $app-showcase-padding;
background: $app-showcase-background;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.showcase--large {
height: 360px;
}
.showcase-item {
margin: 24px;
}
}
================================================
FILE: docs/src/js/components/Table.tsx
================================================
import * as React from "react";
import * as classNames from "classnames";
import * as styles from "./styles.scss";
export default function Table(props: React.HTMLAttributes<HTMLTableElement>) {
const {
className,
...p,
} = props;
return (
<table className={classNames(styles.table, className)} {...p} />
);
}
================================================
FILE: docs/src/js/components/styles.scss
================================================
/* Material Icons */
@import "style/vars/theme";
@import "@material/theme/mdc-theme";
$app-table-border-color: #CCC;
:local {
.app--theme-dark {
background: $app-theme-dark-background;
@include mdc-theme-dark {
@include mdc-theme-prop(color, text-primary-on-dark);
}
}
.icon {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; // Preferred icon size
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr; // Support for all WebKit browsers.
-webkit-font-smoothing: antialiased; // Support for Safari and Chrome.
text-rendering: optimizeLegibility; // Support for Firefox.
-moz-osx-font-smoothing: grayscale; // Support for IE.
font-feature-settings: 'liga';
}
.fullsize {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.center {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
flex-direction: column;
}
.code {
flex: 1;
background: $app-showcase-background;
margin-top: 14px;
margin-bottom: 14px;
:global {
.CodeMirror-gutter-wrapper {
font-family: Roboto Mono, monospace;
}
.CodeMirror-code {
line-height: 1.6em;
}
.CodeMirror {
background: transparent;
margin: $app-showcase-padding;
pre {
font-family: Roboto Mono, monospace;
}
font-size: 0.8em;
height: auto;
}
}
}
.page-container {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
padding-bottom: 24px;
}
.demo {
margin-top: 24px;
margin-bottom: 24px;
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #eeeeee;
padding: 0;
}
}
.demo-content {
padding: 16px;
}
.demo-title {
padding: 8px;
padding-bottom: 0;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 0.8em;
text-align: left;
margin-top: 24px;
margin-bottom: 24px;
thead tr {
&:last-child {
border: 0;
border-bottom: 1px;
border-style: solid;
border-color: $app-table-border-color;
}
}
tbody tr {
border: 0;
border-bottom: 1px;
border-style: solid;
border-color: $app-table-border-color;
&:last-child {
border-bottom: 0;
}
&:hover {
background: #EEEEEE;
}
}
td,
th {
padding: 8px;
}
}
}
================================================
FILE: docs/src/js/index.tsx
================================================
import "./compat";
import "app/style/index.scss";
import * as React from "react";
import * as ReactDOM from "react-dom";
import MainRouter from "./routes";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/jsx/jsx";
import "codemirror/mode/shell/shell";
const element = document.getElementById("root");
ReactDOM.render(<MainRouter />, element, () => { });
================================================
FILE: docs/src/js/pages/ButtonPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Button from "@react-mdc/button";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import DarkTheme from "app/js/components/DarkTheme";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function ButtonPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Button
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<Button>Flat</Button>
</ShowCase.Item>
<ShowCase.Item>
<DarkTheme.Meta>
<Button raised>Raised</Button>
</DarkTheme.Meta>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Button component is a React wrapper of mdc-button component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/button`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Flat
</Typography.Title>
<Code value={`<Button>Flat button</Button>`} />
<ShowCase>
<ShowCase.Item>
<Button>Flat button</Button>
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Colored
</Typography.Title>
<Code value={`<Button accent>Colored button</Button>`} />
<ShowCase>
<ShowCase.Item>
<Button accent>Colored button</Button>
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Raised
</Typography.Title>
<Code value={`<Button raised>Raised button</Button>`} />
<ShowCase>
<ShowCase.Item>
<Button raised>Raised button</Button>
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Disabled
</Typography.Title>
<Code value={`<Button raised disabled>Disabled button</Button>`} />
<ShowCase>
<ShowCase.Item>
<Button raised disabled>Disabled button</Button>
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Button</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Button</Name>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>dense</code></td>
<td><code>boolean</code></td>
<td />
<td>Render dense button.</td>
</tr>
<tr>
<td><code>raise</code></td>
<td><code>boolean</code></td>
<td />
<td>Render raised button.</td>
</tr>
<tr>
<td><code>compact</code></td>
<td><code>boolean</code></td>
<td />
<td>Render compact button.</td>
</tr>
<tr>
<td><code>primary</code></td>
<td><code>boolean</code></td>
<td />
<td>Render button with primary color.</td>
</tr>
<tr>
<td><code>accent</code></td>
<td><code>boolean</code></td>
<td />
<td>Render button with accent color.</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/CardPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Card from "@react-mdc/card";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
import * as Image1x1 from "app/images/1-1.jpg";
import * as Image16x9 from "app/images/16-9.jpg";
export default function CardPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Card
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<Card>
<Card.HorizontalBlock>
<Card.Primary>
<Card.Title>
Title goes here
</Card.Title>
<Card.Subtitle>
Subtitle here
</Card.Subtitle>
</Card.Primary>
<Card.MediaItem src={Image1x1} />
</Card.HorizontalBlock>
<Card.Actions>
<Card.Action>
ACTION 1
</Card.Action>
<Card.Action>
ACTION 2
</Card.Action>
</Card.Actions>
</Card>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Button component is a React wrapper of mdc-card component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/card`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple Card
</Typography.Title>
<Code value={`
<Card>
<Card.Media
style={{
backgroundImage: \`url($\{Image16x9\})\`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
height: 167,
}} />
<Card.SupportingText>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor.
</Card.SupportingText>
</Card>
`} />
<ShowCase>
<ShowCase.Item style={{ maxWidth: 350 }}>
<Card>
<Card.Media
style={{
backgroundImage: `url(${Image16x9})`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
height: 167,
}} />
<Card.SupportingText>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor.
</Card.SupportingText>
</Card>
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Media Card
</Typography.Title>
<Code value={`
<Card>
<Card.HorizontalBlock>
<Card.Primary>
<Card.Title>
Title goes here
</Card.Title>
<Card.Subtitle>
Subtitle here
</Card.Subtitle>
</Card.Primary>
<Card.MediaItem src={Image1x1} />
</Card.HorizontalBlock>
<Card.Actions>
<Card.Action>
ACTION 1
</Card.Action>
<Card.Action>
ACTION 2
</Card.Action>
</Card.Actions>
</Card>
`} />
<ShowCase>
<ShowCase.Item style={{ maxWidth: 350 }}>
<Card>
<Card.HorizontalBlock>
<Card.Primary>
<Card.Title>
Title goes here
</Card.Title>
<Card.Subtitle>
Subtitle here
</Card.Subtitle>
</Card.Primary>
<Card.MediaItem src={Image1x1} />
</Card.HorizontalBlock>
<Card.Actions>
<Card.Action>
ACTION 1
</Card.Action>
<Card.Action>
ACTION 2
</Card.Action>
</Card.Actions>
</Card>
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Card</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of card components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>dark</code></td>
<td><code>boolean</code></td>
<td />
<td>Render dark card.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Actions</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.Actions</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
A container of action components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>vertical</code></td>
<td><code>boolean</code></td>
<td />
<td>Render vertical actions section.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Action</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.Action</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Card action button
</Typography.Body2>
<Typography.Title>Horizontal Block</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.HorizontalBlock</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Horizontal block component.
</Typography.Body2>
<Typography.Title>Media</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.Media</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Media section component.
</Typography.Body2>
<Typography.Title>Media Item</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.MediaItem</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Media item component.
</Typography.Body2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>size</code></td>
<td><code>1.5 | 2 | 3</code></td>
<td />
<td>Size of media item.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Primary</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.Primary</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Primary section component.
</Typography.Body2>
<Typography.Title>Subtitle</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.Subtitle</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Subtitle of card.
</Typography.Body2>
<Typography.Title>Supporting Text</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.SupportingText</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Supporting text section.
</Typography.Body2>
<Typography.Title>Title</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Card.Title</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Title of card.
</Typography.Body2>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/CheckboxPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Checkbox from "@react-mdc/checkbox";
import FormField from "@react-mdc/form-field";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function CheckboxPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Checkbox
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<FormField>
<Checkbox.Default inputId="showcase-checkbox" />
<label htmlFor="showcase-checkbox">
Check Me
</label>
</FormField>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Checkbox component is a React wrapper of mdc-checkbox component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/checkbox`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple Checkbox
</Typography.Title>
<Code value={`<Checkbox.Default />`} />
<ShowCase>
<ShowCase.Item>
<Checkbox.Default />
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Cutomizable Checkbox
</Typography.Title>
<Code value={`
<Checkbox>
<Checkbox.NativeControl onChange={ (x) => alert("Changed: " + x) } />
<Checkbox.Background>
<Checkbox.Checkmark />
<Checkbox.Mixedmark />
</Checkbox.Background>
</Checkbox>
`} />
<ShowCase>
<ShowCase.Item>
{/* tslint:disable:jsx-no-lambda */}
<Checkbox>
<Checkbox.NativeControl onChange={(x) => alert("Changed: " + x.target.value)} />
<Checkbox.Background>
<Checkbox.Checkmark />
<Checkbox.Mixedmark />
</Checkbox.Background>
</Checkbox>
{/* tslint:enable:jsx-no-lambda */}
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Checkbox</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Checkbox</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of checkbox components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>checked</code></td>
<td><code>boolean</code></td>
<td />
<td>Render checked checkbox.</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td><code>boolean</code></td>
<td />
<td>Render disabled checkbox.</td>
</tr>
<tr>
<td><code>indeterminate</code></td>
<td><code>boolean</code></td>
<td />
<td>Render indeterminate state checkbox.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Background</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Checkbox.Background</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Background component of checkbox.
</Typography.Body2>
<Typography.Title>Checkmark</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Checkbox.Checkmark</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Checkmark component of checkbox. It's a just SVG component.
So it doesn't have a meta component.
</Typography.Body2>
<Typography.Title>Mixedmark</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Checkbox.Mixedmark</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Mixedmark component of checkbox.
</Typography.Body2>
<Typography.Title>NativeControl</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Checkbox.NativeControl</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Native control (actual input component) component of checkbox.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>onChange</code></td>
<td><code>(event) => void</code></td>
<td />
<td>Handler for change event.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Default</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Checkbox.Default</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Default composition of checkbox component
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>inputId</code></td>
<td><code>string</code></td>
<td />
<td>ID property for native control</td>
</tr>
<tr>
<td><code>name</code></td>
<td><code>string</code></td>
<td />
<td>Name property for native control.</td>
</tr>
<tr>
<td><code>value</code></td>
<td><code>any</code></td>
<td />
<td>Value property for native control.</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td><code>(event) => void</code></td>
<td />
<td>Handler for change event.</td>
</tr>
<tr>
<td><code>checked</code></td>
<td><code>boolean</code></td>
<td />
<td>Render checked checkbox.</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td><code>boolean</code></td>
<td />
<td>Render disabled checkbox.</td>
</tr>
<tr>
<td><code>indeterminate</code></td>
<td><code>boolean</code></td>
<td />
<td>Render indeterminate state checkbox.</td>
</tr>
<tr>
<td><code>defaultChecked</code></td>
<td><code>boolean</code></td>
<td />
<td>Default checked state of checkbox.</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/DialogPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Button from "@react-mdc/button";
import Dialog from "@react-mdc/dialog";
import FormField from "@react-mdc/form-field";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
class SimpleDialog extends React.Component<{}, {}> {
public state = {
open: false,
};
public render() {
return (
<div>
<Button raised onClick={this.handleOpen}>
Open Dialog
</Button>
<Dialog open={this.state.open}
onOpen={this.handleOpen}
onClose={this.handleClose}>
<Dialog.Surface>
<Dialog.Header>
<Dialog.Header.Title>
Dialog Title
</Dialog.Header.Title>
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est
laborum.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Footer.Button type="cancel">
Decline
</Dialog.Footer.Button>
<Dialog.Footer.Button type="accept">
Accept
</Dialog.Footer.Button>
</Dialog.Footer>
</Dialog.Surface>
<Dialog.Backdrop />
</Dialog>
</div>
);
}
private handleOpen = () => this.setState({ open: true });
private handleClose = () => this.setState({ open: false });
}
export default function DialogPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Dialog
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<SimpleDialog />
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Dialog component is a React wrapper of mdc-dialog component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/dialog`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple Dialog
</Typography.Title>
<Code value={`
class SimpleDialog extends React.Component<{}, {}> {
public state = {
open: false,
};
public render() {
return (
<div>
<Button raised onClick={this.handleOpen}>
Open Dialog
</Button>
<Dialog open={this.state.open}
onOpen={this.handleOpen}
onClose={this.handleClose}>
<Dialog.Surface>
<Dialog.Header>
<Dialog.Header.Title>
Dialog Title
</Dialog.Header.Title>
</Dialog.Header>
<Dialog.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est
laborum.
</Dialog.Body>
<Dialog.Footer>
<Dialog.Footer.Button type="cancel">
Decline
</Dialog.Footer.Button>
<Dialog.Footer.Button type="accept">
Accept
</Dialog.Footer.Button>
</Dialog.Footer>
</Dialog.Surface>
<Dialog.Backdrop />
</Dialog>
</div>
);
}
private handleOpen = () => this.setState({ open: true });
private handleClose = () => this.setState({ open: false });
}
`} />
<ShowCase>
<ShowCase.Item>
<SimpleDialog />
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Dialog</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Dialog</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of dialog components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>dark</code></td>
<td><code>boolean</code></td>
<td />
<td>Render dark dialog.</td>
</tr>
<tr>
<td><code>open</code></td>
<td><code>boolean</code></td>
<td />
<td>Render open dialog.</td>
</tr>
<tr>
<td><code>onAccept</code></td>
<td><code>(meta) => void</code></td>
<td />
<td>Handler for accept event.</td>
</tr>
<tr>
<td><code>onOpen</code></td>
<td><code>(meta) => void</code></td>
<td />
<td>Handler for open event.</td>
</tr>
<tr>
<td><code>onCancel</code></td>
<td><code>(meta) => void</code></td>
<td />
<td>Handler for cancel event.</td>
</tr>
<tr>
<td><code>onClose</code></td>
<td><code>(meta) => void</code></td>
<td />
<td>Handler for close event.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Backdrop</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Dialog.Backdrop</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Dialog backdrop component.
</Typography.Body2>
<Typography.Title>Body</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Dialog.Body</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Dialog body section.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>scrollable</code></td>
<td><code>boolean</code></td>
<td />
<td>Render scrollable long dialog body.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Surface</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Dialog.Surface</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Dialog surface component.
</Typography.Body2>
<Typography.Title>Footer</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Dialog.Footer</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Dialog footer section.
</Typography.Body2>
<Typography.Title>Footer Button</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Dialog.Footer.Button</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Dialog footer button component.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>type</code></td>
<td><code>"accept" | "cancel"</code></td>
<td>✔</td>
<td>Type of footer button.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Header</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Dialog.Header</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Dialog header section.
</Typography.Body2>
<Typography.Title>Header Title</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Dialog.Header.Title</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Dialog header title component.
</Typography.Body2>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/ElevationPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Elevation from "@react-mdc/elevation";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function ElevationPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Elevation
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<Elevation zSpace={4} style={{ padding: 32 }}>
Elevation
</Elevation>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Elevation component is a React wrapper of mdc-elevation component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/elevation`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Elevation
</Typography.Title>
<Code value={`<Elevation zSpace={10} style={{ padding: 32 }}>Z-Space: 10</Elevation>`} />
<ShowCase>
<ShowCase.Item>
<Elevation zSpace={10} style={{ padding: 32 }}>Z-Space: 10</Elevation>
</ShowCase.Item>
</ShowCase>
<Typography.Title>Elevation</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Elevation</Name>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>zSpace</code></td>
<td><code>number (0 ~ 24)</code></td>
<td>✔</td>
<td>z-space of elevation component</td>
</tr>
<tr>
<td><code>transition</code></td>
<td><code>boolean</code></td>
<td />
<td>Render elevation with transition animation.</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/FABPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import FAB from "@react-mdc/fab";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import { MaterialIcon } from "app/js/components/Icon";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function CheckboxPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
FAB
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<FAB>
<FAB.Icon>
<MaterialIcon>edit</MaterialIcon>
</FAB.Icon>
</FAB>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
FAB component is a React wrapper of mdc-fab (Float Action Button) component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/fab`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple FAB
</Typography.Title>
<Code value={`
<FAB>
<FAB.Icon>
<MaterialIcon>add</MaterialIcon>
</FAB.Icon>
</FAB>
`} />
<ShowCase>
<ShowCase.Item>
<FAB>
<FAB.Icon>
<MaterialIcon>add</MaterialIcon>
</FAB.Icon>
</FAB>
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>FAB</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>FAB</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of FAB components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mini</code></td>
<td><code>boolean</code></td>
<td />
<td>Render mini FAB.</td>
</tr>
<tr>
<td><code>plain</code></td>
<td><code>boolean</code></td>
<td />
<td>Render plain FAB.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Icon</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>FAB.Icon</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
FAB icon component.
</Typography.Body2>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/FormFieldPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Checkbox from "@react-mdc/checkbox";
import FormField from "@react-mdc/form-field";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function FormFieldPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Form Field
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<FormField>
<Checkbox.Default inputId="showcase-checkbox" />
<label htmlFor="showcase-checkbox">
FormField Demo
</label>
</FormField>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
FormField component is a React wrapper of mdc-form-field component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/form-field`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
FormField
</Typography.Title>
<Code value={`
<FormField>
<input type="checkbox" id="form-field-usage-checkbox" />
<label htmlFor="form-field-usage-checkbox">
FormField Demo
</label>
</FormField>
`} />
<ShowCase>
<ShowCase.Item>
<FormField>
<input type="checkbox" id="form-field-usage-checkbox" />
<label htmlFor="form-field-usage-checkbox">
FormField Demo
</label>
</FormField>
</ShowCase.Item>
</ShowCase>
<Typography.Title>FormField</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>FormField</Name>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>alignEnd</code></td>
<td><code>boolean</code></td>
<td />
<td>Align contents to end.</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/LayoutGridPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import LayoutGrid from "@react-mdc/layout-grid";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import { MaterialIcon } from "app/js/components/Icon";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function LayoutGridPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Layout Grid
</Typography.Display1>
<ShowCase large>
<ShowCase.Item style={{ width: "100%", maxWidth: 500 }}>
<LayoutGrid style={{ background: "#9c9c9c" }}>
<LayoutGrid.Cell span={6}
style={{
background: "#3d3d3d",
color: "white",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: 32,
}} />
<LayoutGrid.Cell span={6}
style={{
background: "#3d3d3d",
color: "white",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: 32,
}} />
</LayoutGrid>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
LayoutGrid component is a React wrapper of mdc-layout-grid component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/layout-grid`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple Grid
</Typography.Title>
<Code value={`
<LayoutGrid style={{ background: "#9c9c9c" }}>
<LayoutGrid.Cell span={4}
style={{
background: "#3d3d3d",
color: "white",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: 32,
}} />
<LayoutGrid.Cell span={8}
style={{
background: "#3d3d3d",
color: "white",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: 32,
}} />
</LayoutGrid>
`} />
<ShowCase>
<ShowCase.Item style={{ width: "100%", maxWidth: 500 }}>
<LayoutGrid style={{ background: "#9c9c9c" }}>
<LayoutGrid.Cell span={4}
style={{
background: "#3d3d3d",
color: "white",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: 32,
}} />
<LayoutGrid.Cell span={8}
style={{
background: "#3d3d3d",
color: "white",
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: 32,
}} />
</LayoutGrid>
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Layout Grid</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>LayoutGrid</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of layout grid components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>margin</code></td>
<td><code>number | string</code></td>
<td />
<td>Margin of grid.</td>
</tr>
<tr>
<td><code>gutter</code></td>
<td><code>number | string</code></td>
<td />
<td>Gutter of grid.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Cell</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>LayoutGrid.Cell</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Cell component
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>span</code></td>
<td><code>number (1 ~ 12)</code></td>
<td />
<td>Spanning size of cell.</td>
</tr>
<tr>
<td><code>span</code></td>
<td><code>number (1 ~ 12)</code></td>
<td />
<td>Spanning size of cell.</td>
</tr>
<tr>
<td><code>spanDesktop</code></td>
<td><code>number (1 ~ 12)</code></td>
<td />
<td>Spanning size of cell on desktop.</td>
</tr>
<tr>
<td><code>spanTablet</code></td>
<td><code>number (1 ~ 12)</code></td>
<td />
<td>Spanning size of cell on tablet.</td>
</tr>
<tr>
<td><code>spanPhone</code></td>
<td><code>number (1 ~ 12)</code></td>
<td />
<td>Spanning size of cell on phone.</td>
</tr>
<tr>
<td><code>order</code></td>
<td><code>number (1 ~ 12)</code></td>
<td />
<td>Order of cell.</td>
</tr>
<tr>
<td><code>align</code></td>
<td><code>"top" | "middle" | "bottom"</code></td>
<td />
<td>Alignment of cell.</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/NotFoundPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import Button from "@react-mdc/button";
import Card from "@react-mdc/card";
import FullSize from "app/js/components/FullSize";
export default class NotFound extends React.Component<{}, {}> {
public render() {
return (
<FullSize.Center>
<Card>
<Card.Primary
style={{
borderBottom: 1,
}}>
<Card.Title large>
Sorry, but nothing in here
</Card.Title>
<Card.Subtitle>
Please check your URL and try again.
</Card.Subtitle>
</Card.Primary>
<Card.Actions>
<Card.Action.Meta>
<Button.Meta compact>
<Link to="/">
Go to main
</Link>
</Button.Meta>
</Card.Action.Meta>
</Card.Actions>
</Card>
</FullSize.Center>
);
}
}
================================================
FILE: docs/src/js/pages/RadioPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import FormField from "@react-mdc/form-field";
import Radio from "@react-mdc/radio";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function RadioPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Radio
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<FormField>
<Radio.Default name="be" inputId="showcase-radio-to-be" defaultChecked />
<label htmlFor="showcase-radio-to-be">
To Be
</label>
<Radio.Default name="be" inputId="showcase-radio-not-to-be" />
<label htmlFor="showcase-radio-not-to-be">
Not To Be
</label>
</FormField>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Radio component is a React wrapper of mdc-radio component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/radio`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple Radio
</Typography.Title>
<Code value={`
<Radio.Default name="usage-1" defaultChecked />
<Radio.Default name="usage-1" />
`} />
<ShowCase>
<ShowCase.Item>
<Radio.Default name="usage-1" defaultChecked />
<Radio.Default name="usage-1" />
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Cutomizable Radio
</Typography.Title>
<Code value={`
<Radio>
<Radio.NativeControl
name="usage-2"
onChange={(e) => alert(e.target.value)}
defaultChecked
value="left" />
<Radio.Background>
<Radio.OuterCircle />
<Radio.InnerCircle />
</Radio.Background>
</Radio>
<Radio>
<Radio.NativeControl
name="usage-2"
value="right" />
<Radio.Background>
<Radio.OuterCircle />
<Radio.InnerCircle />
</Radio.Background>
</Radio>
`} />
<ShowCase>
<ShowCase.Item>
{/* tslint:disable:jsx-no-lambda */}
<Radio>
<Radio.NativeControl
name="usage-2"
onChange={(e) => alert(e.target.value)}
defaultChecked
value="left" />
<Radio.Background>
<Radio.OuterCircle />
<Radio.InnerCircle />
</Radio.Background>
</Radio>
<Radio>
<Radio.NativeControl
name="usage-2"
value="right" />
<Radio.Background>
<Radio.OuterCircle />
<Radio.InnerCircle />
</Radio.Background>
</Radio>
{/* tslint:enable:jsx-no-lambda */}
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Radio</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Radio</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of radio components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>checked</code></td>
<td><code>boolean</code></td>
<td />
<td>Render checked radio.</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td><code>boolean</code></td>
<td />
<td>Render disabled radio.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Background</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Radio.Background</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Background component of radio.
</Typography.Body2>
<Typography.Title>InnerCircle</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Radio.InnerCircle</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
InnerCircle component of radio.
</Typography.Body2>
<Typography.Title>NativeControl</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Radio.NativeControl</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Native control (actual input component) component of radio.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>onChange</code></td>
<td><code>(event) => void</code></td>
<td />
<td>Handler for change event.</td>
</tr>
</tbody>
</Table>
<Typography.Title>OuterCircle</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Radio.OuterCircle</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
OuterCircle component of radio.
</Typography.Body2>
<Typography.Title>Default</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Radio.Default</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Simpe, common composition of radio component
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>inputId</code></td>
<td><code>string</code></td>
<td />
<td>ID property for native control</td>
</tr>
<tr>
<td><code>name</code></td>
<td><code>string</code></td>
<td />
<td>Name property for native control.</td>
</tr>
<tr>
<td><code>value</code></td>
<td><code>any</code></td>
<td />
<td>Value property for native control.</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td><code>(event) => void</code></td>
<td />
<td>Handler for change event.</td>
</tr>
<tr>
<td><code>checked</code></td>
<td><code>boolean</code></td>
<td />
<td>Render checked radio.</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td><code>boolean</code></td>
<td />
<td>Render disabled radio.</td>
</tr>
<tr>
<td><code>defaultChecked</code></td>
<td><code>boolean</code></td>
<td />
<td>Default checked state of radio.</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/RipplePage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Button from "@react-mdc/button";
import Elevation from "@react-mdc/elevation";
import Ripple from "@react-mdc/ripple";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function RipplePage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Ripple
</Typography.Display1>
<ShowCase large>
<ShowCase.Item style={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}>
<Ripple.Meta>
<Elevation zSpace={4}
style={{
maxWidth: 500,
height: 300,
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}>
RIPPLE
</Elevation>
</Ripple.Meta>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Ripple component is a React wrapper of mdc-ripple component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/ripple`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple Ripple
</Typography.Title>
<Code value={`
<Ripple
color="primary"
style={{
background: "white",
maxWidth: 500,
height: 300,
textAlign: "center",
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}>
Click Me!
</Ripple>
`} />
<ShowCase>
<ShowCase.Item style={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}>
<Ripple
color="primary"
style={{
background: "white",
maxWidth: 500,
height: 300,
textAlign: "center",
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}>
Click Me!
</Ripple>
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Ripple Button
</Typography.Title>
<Code value={`
<Ripple.Meta color="accent">
<Button>Press Me</Button>
</Ripple.Meta>
`} />
<ShowCase>
<ShowCase.Item>
<Ripple.Meta color="accent">
<Button>Press Me</Button>
</Ripple.Meta>
</ShowCase.Item>
</ShowCase>
<Typography.Title>Ripple</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Ripple</Name>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>unbounded</code></td>
<td><code>boolean</code></td>
<td />
<td>Unbounded ripple?</td>
</tr>
<tr>
<td><code>color</code></td>
<td><code>"primary" | "accent</code></td>
<td />
<td>Color of interaction.</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/SwitchPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import FormField from "@react-mdc/form-field";
import Switch from "@react-mdc/switch";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function SwitchPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Switch
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<FormField>
<Switch.Default inputId="showcase-switch" defaultChecked />
<Switch.Label htmlFor="showcase-switch">
Switch
</Switch.Label>
</FormField>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Switch component is a React wrapper of mdc-switch component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/switch`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple Switch
</Typography.Title>
<Code value={`<Switch.Default />`} />
<ShowCase>
<ShowCase.Item>
<Switch.Default />
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Cutomizable Switch
</Typography.Title>
<Code value={`
<Switch>
<Switch.NativeControl onChange={(e) => alert("On: " + e.target.value)} />
<Switch.Background>
<Switch.Knob />
</Switch.Background>
</Switch>
`} />
<ShowCase>
<ShowCase.Item>
{/* tslint:disable:jsx-no-lambda */}
<Switch>
<Switch.NativeControl onChange={(e) => alert("On: " + e.currentTarget.value)} />
<Switch.Background>
<Switch.Knob />
</Switch.Background>
</Switch>
{/* tslint:enable:jsx-no-lambda */}
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Switch</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Switch</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of switch components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>checked</code></td>
<td><code>boolean</code></td>
<td />
<td>Render checked switch.</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td><code>boolean</code></td>
<td />
<td>Render disabled switch.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Background</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Switch.Background</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Background component of switch.
</Typography.Body2>
<Typography.Title>Knob</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Switch.Knob</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Knob component of switch.
</Typography.Body2>
<Typography.Title>Label</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Switch.Label</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Switch label component
</Typography.Body2>
<Typography.Title>NativeControl</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Switch.NativeControl</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Native control (actual input component) component of switch.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>onChange</code></td>
<td><code>(event) => void</code></td>
<td />
<td>Handler for change event.</td>
</tr>
</tbody>
</Table>
<Typography.Title>Default</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Switch.Default</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Simpe, common composition of switch component
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>inputId</code></td>
<td><code>string</code></td>
<td />
<td>ID property for native control</td>
</tr>
<tr>
<td><code>name</code></td>
<td><code>string</code></td>
<td />
<td>Name property for native control.</td>
</tr>
<tr>
<td><code>value</code></td>
<td><code>any</code></td>
<td />
<td>Value property for native control.</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td><code>(event) => void</code></td>
<td />
<td>Handler for change event.</td>
</tr>
<tr>
<td><code>checked</code></td>
<td><code>boolean</code></td>
<td />
<td>Render checked switch.</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td><code>boolean</code></td>
<td />
<td>Render disabled switch.</td>
</tr>
<tr>
<td><code>defaultChecked</code></td>
<td><code>boolean</code></td>
<td />
<td>Default checked state of switch.</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/TextfieldPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Textfield from "@react-mdc/textfield";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function TextfieldPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Textfield
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<Textfield.Default placeholder="Type Here..." />
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Textfield component is a React wrapper of mdc-textfield component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/textfield`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Simple Textfield
</Typography.Title>
<Code value={`<Textfield.Default />`} />
<ShowCase>
<ShowCase.Item>
<Textfield.Default />
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Labeled
</Typography.Title>
<Code value={`
<Textfield>
<Textfield.Input id="usage-1" autoComplete="email" />
<Textfield.Label htmlFor="usage-1">
Email Address
</Textfield.Label>
</Textfield>
`} />
<ShowCase>
<ShowCase.Item>
<Textfield>
<Textfield.Input id="usage-1" autoComplete="email" />
<Textfield.Label htmlFor="usage-1">
Email Address
</Textfield.Label>
</Textfield>
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Multiline
</Typography.Title>
<Code value={`
<Textfield multiline>
<Textfield.Input.Meta>
<textarea
id="usage-2"
style={{ width: "100%" }}
rows={8}
cols={40} />
</Textfield.Input.Meta>
<Textfield.Label htmlFor="usage-2">
Comment
</Textfield.Label>
</Textfield>
`} />
<ShowCase>
<ShowCase.Item>
<Textfield multiline>
<Textfield.Input.Meta>
<textarea
id="usage-2"
style={{ width: "100%" }}
rows={8}
cols={40} />
</Textfield.Input.Meta>
<Textfield.Label htmlFor="usage-2">
Comment
</Textfield.Label>
</Textfield>
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Full Width
</Typography.Title>
<Code value={`
<ShowCase.Item style={{ width: "100%" }}>
<Textfield.Default fullwidth placeholder="Full Width" />
</ShowCase.Item>
`} />
<ShowCase>
<ShowCase.Item style={{ width: "100%" }}>
<Textfield.Default fullwidth placeholder="Full Width" />
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Textfield</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Textfield</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of textfield components.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>disabled</code></td>
<td><code>boolean</code></td>
<td />
<td>Disabled state.</td>
</tr>
<tr>
<td><code>multiline</code></td>
<td><code>boolean</code></td>
<td />
<td>Enable multiline</td>
</tr>
<tr>
<td><code>fullwidth</code></td>
<td><code>boolean</code></td>
<td />
<td>Render full width textfield</td>
</tr>
</tbody>
</Table>
<Typography.Title>Input</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Textfield.Input</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Input component of textfield.
</Typography.Body2>
<Typography.Title>Label</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Text.field.Label</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Textfield label
</Typography.Body2>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/TypographyPage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import ComponentPage from "app/js/components/ComponentPage";
import { MaterialIcon } from "app/js/components/Icon";
import Name from "app/js/components/Name";
import ShowCase from "app/js/components/ShowCase";
import Table from "app/js/components/Table";
export default function CheckboxPage() {
return (
<ComponentPage>
<ComponentPage.Content>
<Typography.Display1 adjustMargin>
Typography
</Typography.Display1>
<ShowCase large>
<ShowCase.Item>
<Typography>
<Typography.Display4>
Aa 가
</Typography.Display4>
</Typography>
</ShowCase.Item>
</ShowCase>
<Typography.Body2>
Typography component is a React wrapper of mdc-typography component.
</Typography.Body2>
<Typography.Headline>
Installation
</Typography.Headline>
<Code value={`$ npm install --save @react-mdc/typography`} mode="shell" />
<Typography.Headline>
Usage
</Typography.Headline>
<Typography.Title>
Title
</Typography.Title>
<Code value={`
<Typography>
<Typography.Title>
This is a Title
</Typography.Title>
</Typography>
`} />
<ShowCase>
<ShowCase.Item>
<Typography>
<Typography.Title>
This is a Title
</Typography.Title>
</Typography>
</ShowCase.Item>
</ShowCase>
<Typography.Title>
Meta
</Typography.Title>
<Code value={`
<Typography>
<Typography.Text.Meta textStyle="caption">
<p>
This is a caption paragraph.
</p>
</Typography.Text.Meta>
</Typography>
`} />
<ShowCase>
<ShowCase.Item>
<Typography>
<Typography.Text.Meta textStyle="caption">
<p>
This is a caption paragraph.
</p>
</Typography.Text.Meta>
</Typography>
</ShowCase.Item>
</ShowCase>
<Typography.Headline>Components</Typography.Headline>
<Typography.Title>Typography</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Typography</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Top-level container of typography components.
Every typography texts should be included in this component.
</Typography.Body2>
<Typography.Title>Text</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Typography.Text</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
Text component of typography.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>textStyle</code></td>
<td>String value of list at below</td>
<td>✔</td>
<td>Style of text component.</td>
</tr>
<tr>
<td><code>adjustMargin</code></td>
<td><code>boolean</code></td>
<td />
<td>
Enable adjustment of component's margin.
</td>
</tr>
</tbody>
</Table>
<Typography.Subheading2>Text Styles</Typography.Subheading2>
<Typography.Text.Meta textStyle="body2">
<ul>
<li><code>display4</code></li>
<li><code>display3</code></li>
<li><code>display2</code></li>
<li><code>display1</code></li>
<li><code>headline</code></li>
<li><code>title</code></li>
<li><code>subheading2</code></li>
<li><code>subheading1</code></li>
<li><code>body2</code></li>
<li><code>body1</code></li>
<li><code>caption</code></li>
</ul>
</Typography.Text.Meta>
<Typography.Title>Shortcuts</Typography.Title>
<Typography.Subheading2>Name</Typography.Subheading2>
<Name>Typography.Display4</Name>
<Name>Typography.Display3</Name>
<Name>Typography.Display2</Name>
<Name>Typography.Display1</Name>
<Name>Typography.Headline</Name>
<Name>Typography.Title</Name>
<Name>Typography.Subheading2</Name>
<Name>Typography.Subheading1</Name>
<Name>Typography.Body2</Name>
<Name>Typography.Body1</Name>
<Name>Typography.Caption</Name>
<Typography.Subheading2>Description</Typography.Subheading2>
<Typography.Body2>
There are coresponding shortcut components for each text styles.
Shorcuts don't have meta components. Use <code>Text.Meta</code>
instead if you want a meta component.
</Typography.Body2>
<Typography.Subheading2>Properties</Typography.Subheading2>
<Table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>adjustMargin</code></td>
<td><code>boolean</code></td>
<td />
<td>
Enable adjustment of component's margin.
</td>
</tr>
</tbody>
</Table>
</ComponentPage.Content>
</ComponentPage>
);
}
================================================
FILE: docs/src/js/pages/WelcomePage/index.tsx
================================================
import * as React from "react";
import { Link } from "react-router";
import * as classNames from "classnames";
import Button from "@react-mdc/button";
import LayoutGrid from "@react-mdc/layout-grid";
import Ripple from "@react-mdc/ripple";
import Theme from "@react-mdc/theme";
import Typography from "@react-mdc/typography";
import Code from "app/js/components/Code";
import DarkTheme from "app/js/components/DarkTheme";
import Page from "app/js/components/Page";
import * as styles from "./styles.scss";
function Welcome() {
return (
<DarkTheme className={styles["welcome"]}>
<Page.Responsive.Meta>
<LayoutGrid>
<LayoutGrid.Cell span={6}>
<Typography.Display1>
React Material Components for the Web
</Typography.Display1>
<Typography.Headline>
React wrapper of Google's Material Components for the Web
</Typography.Headline>
<Theme.Meta textColor="primary" onColor="dark">
<Link to="/button" className={styles["welcome-link"]}>
Components
</Link>
</Theme.Meta>
<Theme.Meta textColor="primary" onColor="dark">
<a href="https://github.com/react-mdc/react-material-components-web"
target="_blank"
className={styles["welcome-link"]}>
Source Code
</a>
</Theme.Meta>
</LayoutGrid.Cell>
<LayoutGrid.Cell span={6} />{/* Placeholder */}
</LayoutGrid>
</Page.Responsive.Meta>
</DarkTheme>
);
}
function GettingStarted() {
return (
<Page.Responsive.Meta>
<Page.Content>
<Typography.Headline>
Getting Started
</Typography.Headline>
<Typography.Body2>
Get up and running with React Material Components web
</Typography.Body2>
<Typography.Title adjustMargin>
Installation
</Typography.Title>
<Typography.Body2>
You can install the whole react-material-components-web components by following
</Typography.Body2>
<Code value="$ npm install --save react-material-components-web" mode="shell" />
<Typography.Body2>
To install each components individually
</Typography.Body2>
<Code value="$ npm install --save @react-mdc/button" mode="shell" />
<Typography.Title adjustMargin>
Load Stylesheet
</Typography.Title>
<Typography.Body2>
Since Material Components for Web provides customization by stylesheet,
You have to load the stylesheet manually.
</Typography.Body2>
<Code value={`import "material-components-web/material-components-web.scss";`} />
<Typography.Title adjustMargin>
Using Components
</Typography.Title>
<Typography.Body2>
Now you can use components.
</Typography.Body2>
<Code value={`
import Button from "@react-mdc/button";
function Example() {
return (
<Button raised primary>
Hello
</Button>
)
}
`} />
</Page.Content>
</Page.Responsive.Meta>
);
}
export default function WelcomePage() {
return (
<Page className={styles["flex"]}>
<Welcome />
<GettingStarted />
<Page.Footer />
</Page>
);
}
================================================
FILE: docs/src/js/pages/WelcomePage/styles.scss
================================================
@import "style/vars/theme";
:local {
.flex {
flex: 1;
}
.welcome {
padding-bottom: 60px;
}
.welcome-link {
text-decoration: none;
border-bottom: solid 1px $mdc-theme-primary;
padding: 0.2em;
margin: 0.2em;
}
}
================================================
FILE: docs/src/js/routes.tsx
================================================
import * as React from "react";
import { hashHistory, Route, Router } from "react-router";
import ComponentPage from "app/js/components/ComponentPage";
import Container from "./Container";
import ButtonPage from "./pages/ButtonPage";
import CardPage from "./pages/CardPage";
import CheckboxPage from "./pages/CheckboxPage";
import DialogPage from "./pages/DialogPage";
import ElevationPage from "./pages/ElevationPage";
import FABPage from "./pages/FABPage";
import FormFieldPage from "./pages/FormFieldPage";
import LayoutGridPage from "./pages/LayoutGridPage";
import RadioPage from "./pages/RadioPage";
import RipplePage from "./pages/RipplePage";
import SwitchPage from "./pages/SwitchPage";
import TextfieldPage from "./pages/TextfieldPage";
import TypographyPage from "./pages/TypographyPage";
import NotFoundPage from "./pages/NotFoundPage";
import WelcomePage from "./pages/WelcomePage";
function MainContainer(props) {
let {
children,
...p,
} = props;
children = children || <WelcomePage />;
return <Container children={children} {...p} />;
}
function scrollToTop() {
window.scrollTo(0, 0);
}
export default function MainRouter() {
return (
<Router onUpdate={scrollToTop} history={hashHistory}>
<Route path="/" component={MainContainer}>
<Route path="button" component={ButtonPage} />
<Route path="card" component={CardPage} />
<Route path="checkbox" component={CheckboxPage} />
<Route path="dialog" component={DialogPage} />
<Route path="elevation" component={ElevationPage} />
<Route path="fab" component={FABPage} />
<Route path="form-field" component={FormFieldPage} />
<Route path="layout-grid" component={LayoutGridPage} />
<Route path="radio" component={RadioPage} />
<Route path="ripple" component={RipplePage} />
<Route path="switch" component={SwitchPage} />
<Route path="textfield" component={TextfieldPage} />
<Route path="typography" component={TypographyPage} />
</Route>
<Route path="*" component={NotFoundPage} />
</Router>
);
}
================================================
FILE: docs/src/js/utils/code.ts
================================================
export const CODE_STRIP_START = "/* strip-start */";
export const CODE_STRIP_END = "/* strip-end */";
/**
* Strip ignored text from example code.
*/
export function stripIgnored(code: string): string {
if (!code.includes(CODE_STRIP_START)) {
return code;
}
const components = code.split(CODE_STRIP_START);
const left = components[0];
const right = components.slice(1).join(CODE_STRIP_START);
return stripIgnored(
left +
right
.split(CODE_STRIP_END)
.slice(1)
.join(CODE_STRIP_END));
}
================================================
FILE: docs/src/style/index.scss
================================================
/* Project Style Entry Point */
/* Global Setup */
@import "./preload";
@import "./layout";
@import "./vars/theme";
@import "material-components-web/material-components-web";
================================================
FILE: docs/src/style/layout.scss
================================================
/* Google web fonts */
:global {
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, sans-serif;
}
#root {
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
box-sizing: border-box;
}
code,
pre {
font-family: Roboto Mono, monospace;
}
code {
color: #444444;
}
}
================================================
FILE: docs/src/style/preload.scss
================================================
/* Styles for before react */
:global {
#preload-react {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-family: "Roboto", "Helvetica", Sans-serif;
font-size: 1.5em;
color: #333333;
display: flex;
/* flex-direction: column;*/
align-items: center;
justify-content: center;
}
}
================================================
FILE: docs/src/style/vars/_theme.scss
================================================
$mdc-theme-primary: #64DD17;
$mdc-theme-accent: #64DD17;
$mdc-theme-background: #fff;
$app-theme-dark-background: #212121;
$app-showcase-background: rgba(0, 0, 0, 0.05);
$app-showcase-padding: 24px;
@import "@material/theme/mdc-theme";
================================================
FILE: docs/tsconfig.json
================================================
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": ".",
"outDir": "./build/",
"strictNullChecks": true,
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"paths": {
"app/*": [
"src/*"
]
},
"lib": [
"dom",
"es2017"
]
},
"include": [
"./src/**/*",
"./typings/**/*.ts"
]
}
================================================
FILE: docs/tslint.json
================================================
{
"extends": [
"tslint:recommended",
"tslint-react"
],
"rules": {
// Common
"object-literal-sort-keys": false,
"interface-over-type-literal": false,
"prefer-const": [true, {
"destructuring": "all"
}],
"no-empty": false,
"variable-name": [
true,
"ban-keywords",
"check-format",
"allow-leading-underscore"
],
"max-classes-per-file": [
false
],
"no-string-literal": false,
// React
"jsx-no-lambda": true,
"jsx-alignment": false,
"jsx-boolean-value": false,
"jsx-no-multiline-js": false
}
}
================================================
FILE: docs/typings/cssmodule.d.ts
================================================
interface CssModule {
[className: string]: string
}
declare module "*.scss" {
const styles: CssModule
export = styles;
}
declare module "*.css" {
const styles: CssModule
export = styles;
}
================================================
FILE: docs/typings/images.d.ts
================================================
declare module "*.jpg" {
const url: string
export = url;
}
declare module "*.png" {
const url: string
export = url;
}
declare module "*.jpeg" {
const url: string
export = url;
}
================================================
FILE: docs/typings/raw-loader.d.ts
================================================
declare module "raw-loader!*" {
const content: string
export = content;
}
================================================
FILE: docs/vendor.js
================================================
require("react");
require("react-dom");
require("codemirror");
require("fbjs");
================================================
FILE: lerna.json
================================================
{
"lerna": "2.0.0-beta.38",
"packages": [
"packages/*",
"docs"
],
"commands": {
"publish": {
"ignore": [
"docs/*",
"*.md",
"src/"
]
}
},
"version": "independent"
}
================================================
FILE: package.json
================================================
{
"name": "react-material-components-web-root",
"author": "Choi Geonu",
"license": "MIT",
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/react-mdc/react-material-components-web.git"
},
"devDependencies": {
"commander": "^2.9.0",
"cross-env": "^4.0.0",
"del": "^2.2.2",
"fs-extra": "^3.0.1",
"jest": "^20.0.4",
"jest-cli": "^20.0.4",
"lerna": "2.0.0-rc.4",
"lodash": "^4.17.4",
"npm-run-all": "^4.0.1",
"ts-jest": "^20.0.3",
"tslint": "^5.2.0",
"tslint-react": "^3.0.0",
"typescript": "^2.4.1"
},
"scripts": {
"clean": "lerna run clean --no-sort --concurrency=10",
"build": "lerna run build --stream --concurrency=5",
"lint": "lerna run lint --no-sort --concurrency=5",
"watch": "lerna run watch --stream --no-sort --concurrency=50",
"test": "lerna run test",
"test:watch": "jest --watchAll"
},
"jest": {
"testRegex": "packages/[^/]+/lib/.*(/__tests__/.*|\\.(test|spec))\\.(js)$",
"moduleFileExtensions": [
"js"
]
}
}
================================================
FILE: packages/base/.npmignore
================================================
.git/
node_modules/
src/
yarn.lock
**/__mocks__/**
**/__tests__/**
================================================
FILE: packages/base/package.json
================================================
{
"name": "@react-mdc/base",
"description": "Core library of @react-mdc components",
"version": "0.1.12",
"license": "MIT",
"main": "lib/index",
"typings": "lib/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/react-mdc/react-material-components-web.git"
},
"dependencies": {
"@types/classnames": "0.0.32",
"@types/react": "^15.0.18",
"@types/react-dom": "^15.5.0",
"classnames": "^2.2.5",
"immutable": "^3.8.1",
"lodash.foreach": "^4.5.0",
"react": "^15.4.2",
"react-dom": "^15.5.4",
"remove": "^0.1.5"
},
"devDependencies": {
"@types/enzyme": "^2.8.0",
"@types/jest": "^19.2.3",
"@types/jsdom": "^2.0.30",
"enzyme": "^2.8.2",
"jest": "^20.0.1",
"jsdom": "^10.1.0",
"npm-run-all": "^4.0.2",
"react-test-renderer": "^15.5.4",
"shelljs": "^0.7.7",
"shx": "^0.2.2",
"ts-jest": "^20.0.3",
"tslint": "^5.2.0",
"tslint-react": "^3.0.0",
"typescript": "^2.4.1"
},
"scripts": {
"build": "npm-run-all build:ts lint",
"watch": "tsc --watch",
"prepublish": "npm run build",
"clean": "shx rm -rf lib/",
"lint": "tslint 'src/**/*.ts?(x)'",
"build:ts": "tsc",
"test": "jest"
},
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "src/.*(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
]
}
}
================================================
FILE: packages/base/src/ClassNameMetaBase.tsx
================================================
/**
* Meta factory component.
*/
import * as React from "react";
import * as classNames from "classnames";
import {
default as MetaBase,
NativeDOMProps,
} from "./MetaBase";
export type ClassNameChildProps = {
className?: string,
};
export type ClassNameProps = {
className?: string,
};
export default abstract class ClassNameMetaBase
<ChildProps extends ClassNameChildProps, Props extends ClassNameProps, State>
extends MetaBase<ChildProps, Props, State> {
protected renderProps(childProps: ChildProps): ChildProps {
return {
...childProps as any,
className: this.renderClassName(childProps),
};
}
protected renderNativeDOMProps(childProps: ChildProps) {
return {};
}
protected renderClassName(childProps: ChildProps): string {
return classNames(
this.renderBaseClassName(childProps),
...this.renderClassValues(childProps),
this.props.className,
childProps.className,
);
}
protected renderBaseClassName(childProps: ChildProps): string | null {
return null;
}
protected renderClassValues(childProps: ChildProps): ClassValue[] {
return [];
}
}
================================================
FILE: packages/base/src/DefaultComponentBase.ts
================================================
/**
* Default component for meta component.
*/
import * as React from "react";
export default abstract class DefaultComponentBase<ChildProps, MetaProps, State>
extends React.Component<ChildProps & MetaProps, State> {
public render() {
const metaProps: Partial<MetaProps> = {};
const childProps: Partial<ChildProps> = {};
const metaKeys = this.getMetaPropNames();
const meta = this.getMetaComponent();
const defaultComponent = this.getChildComponent();
for (const key in this.props) {
if (!this.props.hasOwnProperty(key)) {
continue;
}
if (metaKeys.indexOf(key as any) !== -1) {
metaProps[key] = this.props[key];
} else {
childProps[key] = this.props[key];
}
}
return React.createElement(
meta,
metaProps as MetaProps,
React.createElement(defaultComponent as any, childProps as ChildProps));
}
protected abstract getMetaPropNames(): string[];
protected abstract getMetaComponent(): React.ComponentClass<MetaProps>;
protected abstract getChildComponent(): string | React.ComponentClass<ChildProps> | React.SFC<ChildProps>;
}
================================================
FILE: packages/base/src/MetaBase.tsx
================================================
/**
* Base class of meta component.
*/
import * as React from "react";
import {
Attributes,
CSSVariables,
default as NativeDOMAdapter,
EventListeners,
} from "./NativeDOMAdapter";
export type Props<ChildProps> = {
children: React.ReactElement<ChildProps>,
};
export type NativeDOMProps = {
cssVariables?: CSSVariables,
eventListeners?: EventListeners,
attributes?: Attributes,
};
export default abstract class BaseMeta<ChildProps, MetaProps, State>
extends React.Component<MetaProps & Props<ChildProps>, State> {
public render() {
const {
children,
} = this.props;
const props = this.renderProps(children.props);
const nativeDOMProps = this.renderNativeDOMProps(children.props);
return (
<NativeDOMAdapter {...nativeDOMProps}>
{React.cloneElement(children, props)}
</NativeDOMAdapter>
);
}
protected abstract renderProps(childProps: ChildProps): ChildProps;
protected abstract renderNativeDOMProps(childProps: ChildProps): NativeDOMProps;
}
================================================
FILE: packages/base/src/NativeDOMAdapter.tsx
================================================
import {
OrderedSet,
} from "immutable";
import * as forEach from "lodash.foreach";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { EVENT_MAP } from "./event";
export type EventListeners = {
[eventType: string]: EventListener[],
};
export type CSSVariables = {
[name: string]: string,
};
export type Attributes = {
[name: string]: string,
};
export type Props = {
cssVariables?: CSSVariables,
eventListeners?: EventListeners,
attributes?: Attributes,
children: React.ReactElement<any>,
};
type InternalProps = {
cssVariables: CSSVariables,
eventListeners: EventListeners,
attributes: Attributes,
children: React.ReactElement<any>,
};
/**
* High order components that adds native DOM properties
* that can't be controlled by React.
*/
export default class NativeDOMAdapter extends React.Component<Props, {}> {
public static defaultProps = {
cssVariables: {},
eventListeners: {},
attributes: {},
};
public props: Props;
// Last known DOM node
private lastDOMNode: HTMLElement | null;
public render() {
const child = this.props.children;
const reactConvertibles = this.filterReactEventConvertibles(this.props.eventListeners || {});
const merged = this.mergeEvents(reactConvertibles, child.props);
return React.cloneElement(child, {
ref: this.handleRef,
...merged,
});
}
public componentDidUpdate(origPrevProps: Props) {
const props = this.internalProps(this.props);
const prevProps = this.internalProps(origPrevProps);
this.updateNode(this.lastDOMNode, this.lastDOMNode, prevProps, props);
}
private internalProps(props: Props): InternalProps {
return {
cssVariables: (props.cssVariables as CSSVariables),
eventListeners: (props.eventListeners as EventListeners),
attributes: (props.attributes as Attributes),
children: props.children,
};
}
private mergeEvents(eventListeners: EventListeners, props: any) {
const merged = { ...props };
forEach(eventListeners, (listeners: EventListener[], eventType: string) => {
const eventProp = EVENT_MAP[eventType];
if (eventProp == null) {
return;
}
let givenEvent;
if (eventProp in merged) {
givenEvent = merged[eventProp];
} else {
givenEvent = () => { };
}
const listener = (event: React.SyntheticEvent<any>) => {
const nativeEvent = event.nativeEvent;
const proxiedEvent: any = {};
for (const key in nativeEvent) {
if (key.slice(0, 1) !== "_") {
proxiedEvent[key] = nativeEvent[key];
}
}
proxiedEvent.stopPropagation = () => {
event.stopPropagation();
nativeEvent.stopPropagation();
};
givenEvent(event);
if (event.defaultPrevented) {
return;
}
listeners.every((nativeListener) => {
nativeListener(proxiedEvent);
return !nativeEvent.defaultPrevented;
});
};
merged[eventProp] = listener;
});
return merged;
}
// Manage CSS variables
private removeCssVariables(dom: HTMLElement, toRemove: CSSVariables) {
forEach(toRemove, (value: any, key: string) => {
if (dom.style.getPropertyValue(key) === value) {
dom.style.removeProperty(key);
}
});
}
private addCssVariables(dom: HTMLElement, toAdd: CSSVariables) {
forEach(toAdd, (value: any, key: string) => {
if (dom.style.getPropertyValue(key) !== value) {
dom.style.setProperty(key, value);
}
});
}
private updateCssVariables(dom: HTMLElement, prev: CSSVariables, next: CSSVariables) {
const toRemove: CSSVariables = {};
const toAdd: CSSVariables = {};
forEach(prev, (value: any, key: string) => {
if (next[key] !== value) {
toRemove[key] = value;
}
});
forEach(next, (value: any, key: string) => {
if (prev[key] !== value) {
toAdd[key] = value;
}
});
this.removeCssVariables(dom, toRemove);
this.addCssVariables(dom, toAdd);
}
// Manage event listeners
private filterReactEventConvertibles(eventListeners: EventListeners): EventListeners {
const nativeListeners: EventListeners = {};
forEach(eventListeners, (listeners, eventType) => {
if (eventType in EVENT_MAP) {
nativeListeners[eventType] = listeners;
}
});
return nativeListeners;
}
private filterNativeEvents(eventListeners: EventListeners): EventListeners {
const nativeListeners: EventListeners = {};
forEach(eventListeners, (listeners, eventType) => {
if (!(eventType in EVENT_MAP)) {
nativeListeners[eventType] = listeners;
}
});
return nativeListeners;
}
private removeEventListeners(dom: HTMLElement, toRemove: EventListeners) {
forEach(this.filterNativeEvents(toRemove), (listeners: EventListener[], event: string) => {
listeners.forEach((listener) => {
dom.removeEventListener(event, listener);
});
});
}
private addEventListeners(dom: HTMLElement, toAdd: EventListeners) {
forEach(this.filterNativeEvents(toAdd), (listeners: EventListener[], event: string) => {
listeners.forEach((listener) => {
dom.addEventListener(event, listener);
});
});
}
private updateEventListeners(dom: HTMLElement, prev: EventListeners, next: EventListeners) {
const prevKeys = Object.keys(prev);
const nextKeys = Object.keys(next);
const allKeys: string[] = OrderedSet
.of(...nextKeys.concat(prevKeys))
.toJS();
// Find listeners to add / remove with order preservation
type Diff = {
event: string,
toAdd: EventListener[],
toRemove: EventListener[],
};
const diff: Diff[] = allKeys.map((event: string) => {
const prevListeners: EventListener[] = prev[event] || [];
const nextListeners: EventListener[] = next[event] || [];
let diffStart;
for (diffStart = 0; diffStart < Math.min(prevListeners.length, nextListeners.length); diffStart++) {
if (prevListeners[diffStart] !== nextListeners[diffStart]) {
break;
}
}
return {
event,
toRemove: prevListeners.slice(diffStart),
toAdd: nextListeners.slice(diffStart),
};
});
const toAdd: EventListeners = diff.reduce((listeners, item) => ({
...listeners,
[item.event]: item.toAdd,
}), {} as EventListeners);
const toRemove: EventListeners = diff.reduce((listeners, item) => ({
...listeners,
[item.event]: item.toRemove,
}), {} as EventListeners);
this.removeEventListeners(dom, toRemove);
this.addEventListeners(dom, toAdd);
}
// Manage attributes
private removeAttributes(dom: HTMLElement, toRemove: Attributes) {
forEach(toRemove, (value: any, key: string) => {
if (dom.getAttribute(key) === value) {
dom.removeAttribute(key);
}
});
}
private addAttributes(dom: HTMLElement, toAdd: Attributes) {
forEach(toAdd, (value: any, key: string) => {
if (dom.getAttribute(key) !== value) {
dom.setAttribute(key, value);
}
});
}
private updateAttributes(dom: HTMLElement, prev: Attributes, next: Attributes) {
const toRemove: Attributes = {};
const toAdd: Attributes = {};
forEach(prev, (value: string, key: string) => {
if (next[key] !== value) {
toRemove[key] = value;
}
});
forEach(next, (value: string, key: string) => {
if (prev[key] !== value) {
toAdd[key] = value;
}
});
this.removeAttributes(dom, toRemove);
this.addAttributes(dom, toAdd);
}
private updateNode(
prevNode: HTMLElement | null, nextNode: HTMLElement | null,
prevProps: InternalProps, props: InternalProps) {
if (prevNode === nextNode) {
if (nextNode != null) {
// Update
this.updateCssVariables(nextNode, prevProps.cssVariables, props.cssVariables);
this.updateEventListeners(nextNode, prevProps.eventListeners, props.eventListeners);
this.updateAttributes(nextNode, prevProps.attributes, props.attributes);
}
} else {
if (prevNode != null) {
// Remove from previous DOM node
this.removeCssVariables(prevNode, props.cssVariables);
this.removeEventListeners(prevNode, props.eventListeners);
this.removeAttributes(prevNode, props.attributes);
}
if (nextNode != null) {
// Add to new DOM node
this.addCssVariables(nextNode, props.cssVariables);
this.addEventListeners(nextNode, props.eventListeners);
this.addAttributes(nextNode, props.attributes);
}
}
}
private handleRef = (ref: React.ReactInstance | null) => {
const props = this.internalProps(this.props);
const prevNode = this.lastDOMNode;
let nextNode: HTMLElement | null = null;
if (ref != null) {
nextNode = ReactDOM.findDOMNode<HTMLElement>(ref);
}
this.updateNode(prevNode, nextNode, props, props);
this.lastDOMNode = nextNode;
}
}
================================================
FILE: packages/base/src/__tests__/ClassNameMetaBase.spec.tsx
================================================
import "jest";
import * as React from "react";
import * as enzyme from "enzyme";
import ClassNameMetaBase from "../ClassNameMetaBase";
import NativeDOMAdapter from "../NativeDOMAdapter";
describe("ClassNameMetaBase", () => {
it("Should render base classname", () => {
class MetaImpl extends ClassNameMetaBase<{}, {}, {}> {
protected renderBaseClassName() {
return "foo";
}
}
const wrapper = enzyme.shallow(
<MetaImpl>
<a />
</MetaImpl>,
);
expect(wrapper.find("a").hasClass("foo")).toBeTruthy();
});
it("Should render class values", () => {
class MetaImpl extends ClassNameMetaBase<{}, {}, {}> {
protected renderClassValues() {
return [{
foo: true,
bar: false,
baz: undefined,
}, "qux"];
}
}
const wrapper = enzyme.shallow(
<MetaImpl>
<a />
</MetaImpl>,
);
expect(wrapper.find("a").hasClass("foo")).toBeTruthy();
expect(wrapper.find("a").hasClass("bar")).toBeFalsy();
expect(wrapper.find("a").hasClass("baz")).toBeFalsy();
expect(wrapper.find("a").hasClass("qux")).toBeTruthy();
});
it("Should preserve meta's className", () => {
class MetaImpl extends ClassNameMetaBase<{}, { className: string }, {}> {
protected renderBaseClassName() {
return "foo";
}
}
const wrapper = enzyme.shallow(
<MetaImpl className="meta">
<a />
</MetaImpl>,
);
expect(wrapper.find("a").hasClass("meta")).toBeTruthy();
expect(wrapper.find("a").hasClass("foo")).toBeTruthy();
});
it("Should preserve child's className", () => {
class MetaImpl extends ClassNameMetaBase<{ className: string }, { className: string }, {}> {
protected renderBaseClassName() {
return "foo";
}
}
const wrapper = enzyme.shallow(
<MetaImpl className="meta">
<a className="child" />
</MetaImpl>,
);
expect(wrapper.find("a").hasClass("meta")).toBeTruthy();
expect(wrapper.find("a").hasClass("foo")).toBeTruthy();
expect(wrapper.find("a").hasClass("child")).toBeTruthy();
});
});
================================================
FILE: packages/base/src/__tests__/DefaultComponentBase.spec.tsx
================================================
import "jest";
import * as React from "react";
import * as enzyme from "enzyme";
import ClassNameMetaBase from "../ClassNameMetaBase";
import DefaultComponentBase from "../DefaultComponentBase";
describe("DefaultComponentBase", () => {
it("Should render default component with meta", () => {
class MetaImpl extends ClassNameMetaBase<{}, { bar?: boolean, className?: string }, {}> {
protected renderBaseClassName() {
return "foo";
}
protected renderClassValues() {
return [{
bar: this.props.bar,
}];
}
}
class Default extends DefaultComponentBase<{}, { bar?: boolean }, {}> {
protected getMetaPropNames() {
return ["bar"];
}
protected getMetaComponent() {
return MetaImpl;
}
protected getChildComponent() {
return "div";
}
}
const wrapper = enzyme.mount(<Default bar={true} />);
expect(wrapper.find("div").exists()).toBeTruthy();
expect(wrapper.find("div").hasClass("foo")).toBeTruthy();
expect(wrapper.find("div").hasClass("bar")).toBeTruthy();
});
});
================================================
FILE: packages/base/src/__tests__/MetaBase.spec.tsx
================================================
import "jest";
import * as React from "react";
import * as enzyme from "enzyme";
import MetaBase from "../MetaBase";
import NativeDOMAdapter from "../NativeDOMAdapter";
describe("MetaBase", () => {
it("Should update child's props", () => {
class MetaImpl extends MetaBase<{ href?: string }, { link: string }, {}> {
protected renderProps(childProps: { href: string }) {
return {
href: this.props.link,
};
}
protected renderNativeDOMProps(childProps: { href: string }) {
return {};
}
}
const wrapper = enzyme.shallow(
<MetaImpl link="https://www.google.com">
<a />
</MetaImpl>,
);
expect(wrapper.equals(
<NativeDOMAdapter>
<a href="https://www.google.com" />
</NativeDOMAdapter>,
)).toBeTruthy();
});
it("Should update NativeDOMAdapter's props", () => {
class MetaImpl extends MetaBase<{ href?: string }, { link: string, name: string }, {}> {
protected renderProps(childProps: { href: string }) {
return {
href: this.props.link,
};
}
protected renderNativeDOMProps(childProps: { href: string }) {
return {
attributes: {
"data-sitename": this.props.name,
},
};
}
}
const wrapper = enzyme.shallow(
<MetaImpl link="https://www.google.com" name="Google">
<a />
</MetaImpl>,
);
expect(wrapper.equals(
<NativeDOMAdapter attributes={{ "data-sitename": "Google" }}>
<a href="https://www.google.com" />
</NativeDOMAdapter>,
)).toBeTruthy();
});
it("should overwrite child's props if conflicted", () => {
class MetaImpl extends MetaBase<{ href?: string }, { link: string }, {}> {
protected renderProps(childProps: { href: string }) {
return {
href: this.props.link,
};
}
protected renderNativeDOMProps(childProps: { href: string }) {
return {};
}
}
const wrapper = enzyme.shallow(
<MetaImpl link="https://www.google.com">
<a href="http://www.naver.com" />
</MetaImpl>,
);
expect(wrapper.equals(
<NativeDOMAdapter>
<a href="https://www.google.com" />
</NativeDOMAdapter>,
)).toBeTruthy();
});
});
================================================
FILE: packages/base/src/__tests__/NativeDOMAdapter.spec.tsx
================================================
import "jest";
import * as React from "react";
import * as enzyme from "enzyme";
import NativeDOMAdapter from "../NativeDOMAdapter";
describe("NativeDOMAdapter", () => {
it("Should render native DOM given as child", () => {
const wrapper = enzyme.mount(
<NativeDOMAdapter>
<a />
</NativeDOMAdapter>,
);
const node = wrapper.getDOMNode();
expect(node.tagName.toLowerCase()).toBe("a");
});
it("Should set attributes to DOM", () => {
const wrapper = enzyme.mount(
<NativeDOMAdapter attributes={{ "data-link": "http://www.daum.net" }}>
<a />
</NativeDOMAdapter>,
);
const node = wrapper.getDOMNode();
expect(node.getAttribute("data-link")).toBe("http://www.daum.net");
});
it("Should unset removed attributes to DOM", () => {
const rootNode = document.createElement("div");
const wrapper = enzyme.mount(
<NativeDOMAdapter attributes={{
"data-link": "http://www.daum.net",
"data-sitename": "Daum",
}}>
<a />
</NativeDOMAdapter>,
{ attachTo: rootNode },
);
const node = wrapper.getDOMNode();
expect(node.getAttribute("data-link")).toBe("http://www.daum.net");
expect(node.getAttribute("data-sitename")).toBe("Daum");
// Update
wrapper.setProps({
attributes: {
"data-sitename": "Daum",
},
});
expect(node.hasAttribute("data-link")).toBeFalsy();
expect(node.getAttribute("data-sitename")).toBe("Daum");
});
/*
Many DOM emulators does not support arbitrary CSS property.
So we use known css properties for testing instead of
CSS variables like `--react-mdc-foo`
*/
it("should render css variable into styles", () => {
// Many DOM emulators does not support arbitrary CSS property.
// So we use known css properties for testing instead of
// CSS variables like `--react-mdc-foo`
const wrapper = enzyme.mount(
<NativeDOMAdapter cssVariables={{
display: "123",
}}>
<div />
</NativeDOMAdapter>,
);
const node = wrapper.getDOMNode() as HTMLDivElement;
expect(node.style.getPropertyValue("display")).toBe("123");
});
it("should unset removed css variable from styles", () => {
const wrapper = enzyme.mount(
<NativeDOMAdapter cssVariables={{
display: "123",
padding: "0px",
}}>
<div />
</NativeDOMAdapter>,
);
const node = wrapper.getDOMNode() as HTMLDivElement;
expect(node.style.getPropertyValue("display")).toBe("123");
expect(node.style.getPropertyValue("padding")).toBe("0px");
// Update
wrapper.setProps({
cssVariables: {
padding: "0px",
},
});
expect(node.style.getPropertyValue("padding")).toBe("0px");
expect(node.style.getPropertyValue("display")).toBe("");
});
it("should add native event listeners by order", (done) => {
let firstCalled = false;
const first = () => {
firstCalled = true;
};
const second = () => {
if (!firstCalled) {
fail("First listener not called!");
} else {
done();
}
};
const wrapper = enzyme.mount(
<NativeDOMAdapter eventListeners={{
foo: [first, second],
}}>
<div />
</NativeDOMAdapter>,
);
const node = wrapper.getDOMNode() as HTMLDivElement;
const event = new MouseEvent("foo");
node.dispatchEvent(event);
});
it("should remove removed native event listeners from node", (done) => {
let firstCalled = false;
let secondCalled = false;
const first = () => {
if (firstCalled) {
fail("First should not be called twice!");
}
firstCalled = true;
};
const second = () => {
if (!firstCalled) {
fail("First listener not called!");
}
if (secondCalled) {
done();
}
secondCalled = true;
};
const wrapper = enzyme.mount(
<NativeDOMAdapter eventListeners={{
foo: [first, second],
}}>
<div />
</NativeDOMAdapter>,
);
const node = wrapper.getDOMNode() as HTMLDivElement;
node.dispatchEvent(new MouseEvent("foo"));
wrapper.setProps({
eventListeners: {
foo: [second],
},
});
node.dispatchEvent(new MouseEvent("foo"));
});
it("should add known react event listeners by order using props", (done) => {
let firstCalled = false;
const first = () => {
firstCalled = true;
};
const second = () => {
if (!firstCalled) {
fail("First listener not called!");
} else {
done();
}
};
const wrapper = enzyme.mount(
<NativeDOMAdapter eventListeners={{
click: [first, second],
}}>
<div />
</NativeDOMAdapter>,
);
wrapper.simulate("click");
});
it("should remove removed known react event listeners from props", (done) => {
let firstCalled = false;
let secondCalled = false;
const first = () => {
if (firstCalled) {
fail("First should not be called twice!");
}
firstCalled = true;
};
const second = () => {
if (!firstCalled) {
fail("First listener not called!");
}
if (secondCalled) {
done();
}
secondCalled = true;
};
const wrapper = enzyme.mount(
<NativeDOMAdapter eventListeners={{
click: [first, second],
}}>
<div />
</NativeDOMAdapter>,
);
wrapper.simulate("click");
wrapper.setProps({
eventListeners: {
click: [second],
},
});
wrapper.simulate("click");
});
});
================================================
FILE: packages/base/src/__tests__/util.spec.tsx
================================================
import "jest";
import * as React from "react";
import * as enzyme from "enzyme";
import * as util from "../util";
describe("includes()", () => {
it("should check existence of item in array", () => {
const array = [2, 4, 6, 8];
expect(util.includes(array, 2)).toBe(true);
expect(util.includes(array, 3)).toBe(false);
expect(util.includes(array, 2, (left, right) => {
return left % 2 === right % 2;
})).toBe(true);
expect(util.includes(array, 3, (left, right) => {
return left % 2 === right % 2;
})).toBe(false);
});
});
describe("eventHandlerDecorator()", () => {
it("should call wrapper after original handler", (done) => {
let called = false;
function wrapper() {
if (called) {
done();
} else {
fail("Original handler was not called!");
}
}
function handler() {
called = true;
}
const wrapped = util.eventHandlerDecorator(wrapper)(handler);
const button = enzyme.mount(
<button onClick={wrapped} />,
);
if (button == null) {
fail("Button was not rendered!");
return;
}
button.simulate("click");
});
it("should not call wrapper when default is prevented", (done) => {
function wrapper() {
fail("It should not be called!");
}
function handler(e: React.SyntheticEvent<any>) {
e.preventDefault();
}
const wrapped = util.eventHandlerDecorator(wrapper)(handler);
function proxy(e: React.SyntheticEvent<any>) {
// We should call `done()` after handler ends.
// So we proxy the event.
wrapped(e);
done();
}
const button = enzyme.mount(
<button onClick={proxy} />,
);
if (button == null) {
fail("Button was not rendered!");
return;
}
button.simulate("click");
});
it("should call wrapper even if original handler is a kind of null", (done) => {
function wrapper() {
done();
}
const wrapped = util.eventHandlerDecorator(wrapper)(null);
const button = enzyme.mount(
<button onClick={wrapped} />,
);
if (button == null) {
fail("Button was not rendered!");
return;
}
button.simulate("click");
});
});
================================================
FILE: packages/base/src/event.ts
================================================
export const EVENT_MAP = {
abort: "onAbort",
blur: "onBlur",
canplay: "onCanPlay",
canplaythrough: "onCanPlayThrough",
change: "onChange",
click: "onClick",
contextmenu: "onContextMenu",
copy: "onCopy",
cut: "onCut",
dblclick: "onDoubleClick",
drag: "onDrag",
dragend: "onDragEnd",
dragenter: "onDragEnter",
dragleave: "onDragLeave",
dragover: "onDragOver",
dragstart: "onDragStart",
drop: "onDrop",
durationchange: "onDurationChange",
emptied: "onEmptied",
ended: "onEnded",
error: "onError",
focus: "onFocus",
input: "onInput",
keydown: "onKeyDown",
keypress: "onKeyPress",
keyup: "onKeyUp",
load: "onLoad",
loadeddata: "onLoadedData",
loadedmetadata: "onLoadedMetadata",
loadstart: "onLoadStart",
mousedown: "onMouseDown",
mouseenter: "onMouseEnter",
mouseleave: "onMouseLeave",
mousemove: "onMouseMove",
mouseout: "onMouseOut",
mouseover: "onMouseOver",
mouseup: "onMouseUp",
mousewheel: "onWheel",
paste: "onPaste",
pause: "onPause",
play: "onPlay",
playing: "onPlaying",
progress: "onProgress",
ratechange: "onRateChange",
reset: "onReset",
scroll: "onScroll",
seekend: "onSeeked",
seeking: "onSeeking",
select: "onSelect",
stalled: "onStalled",
submit: "onSubmit",
suspend: "onSuspend",
timeupdate: "onTimeUpdate",
touchcancel: "onTouchCancel",
touchend: "onTouchEnd",
touchmove: "onTouchMove",
touchstart: "onTouchStart",
volumechange: "onVolumeChange",
waiting: "onWaiting",
wheel: "onWheel",
};
/* Not specified
"activate"
"beforeactivate"
"beforecopy"
"beforecut"
"beforedeactivate"
"beforepaste"
"cuechange"
"deactivate"
"invalid"
"selectstart"
"ariarequest"
"command"
"gotpointeCapturer"
"lostpointeCapturer"
"webkitfullscreenchange"
"webkitfullscreenerror"
*/
================================================
FILE: packages/base/src/index.tsx
================================================
import ClassNameMetaBase from "./ClassNameMetaBase";
import DefaultComponentBase from "./DefaultComponentBase";
import MetaBase from "./MetaBase";
import NativeDOMAdapter from "./NativeDOMAdapter";
export {
ClassNameMetaBase,
DefaultComponentBase,
MetaBase,
NativeDOMAdapter,
};
export default {
ClassNameMetaBase,
DefaultComponentBase,
MetaBase,
NativeDOMAdapter,
};
================================================
FILE: packages/base/src/types.tsx
================================================
import * as React from "react";
export type Config = {};
export type ReactComponent<P> = React.ComponentClass<P> | React.StatelessComponent<P>;
export type Wrappable<P> = ReactComponent<P> | React.ReactElement<P>;
================================================
FILE: packages/base/src/util.ts
================================================
/**
* Common utilities
*/
import * as React from "react";
/**
* Decorate event handler function with default handler.
* Default handler will not be called when decorated handler prevents default.
*
* Example:
*
* let {onClick} = this.props;
* onClick = eventHandlerDecorator(this.handleClick)(onClick);
*
* @param handler a default event handler.
*
* @return event handler decorator with default functionally.
* decorated function can be null
*/
export function eventHandlerDecorator<T>(defaultHandler: React.ReactEventHandler<T>):
(target: React.ReactEventHandler<T> | null) => React.ReactEventHandler<T> {
return (handler: React.ReactEventHandler<T> | null)
: React.ReactEventHandler<T> => (evt: React.SyntheticEvent<T>) => {
if (handler != null) {
handler(evt);
}
if (!evt.isDefaultPrevented()) {
defaultHandler(evt);
}
};
}
/**
* Array inclusion tester
*/
export function includes<T>(array: T[], item: T, predicate: (left, right) => boolean = (x, y) => x === y): boolean {
// tslint:disable:prefer-for-of
for (let i = 0; i < array.length; i++) {
const itemAtIndex = array[i];
if (predicate(item, itemAtIndex)) {
return true;
}
}
return false;
}
================================================
FILE: packages/base/tsconfig.json
================================================
{
"compileOnSave": true,
"compilerOptions": {
"outDir": "./lib/",
"declaration": true,
"strictNullChecks": true,
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"moduleResolution": "node",
"noEmitOnError": true
},
"include": [
"./src/**/*"
]
}
================================================
FILE: packages/base/tslint.json
================================================
{
"extends": [
"tslint:recommended",
"tslint-react"
],
"rules": {
// Common
"object-literal-sort-keys": false,
"interface-over-type-literal": false,
"prefer-const": [true, {"destructuring": "all"}],
"no-empty": false,
"variable-name": [
gitextract_41q20qop/ ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── docs/ │ ├── .gitignore │ ├── config/ │ │ └── webpack/ │ │ ├── app.js │ │ ├── constants.js │ │ └── vendor.js │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── js/ │ │ │ ├── Container/ │ │ │ │ ├── MainToolbar.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── styles.scss │ │ │ ├── common/ │ │ │ │ └── types.ts │ │ │ ├── compat.ts │ │ │ ├── components/ │ │ │ │ ├── Code.tsx │ │ │ │ ├── CodeMirror.tsx │ │ │ │ ├── ComponentPage/ │ │ │ │ │ ├── Content.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.scss │ │ │ │ ├── DarkTheme.tsx │ │ │ │ ├── FullSize.tsx │ │ │ │ ├── Icon.tsx │ │ │ │ ├── Name.tsx │ │ │ │ ├── Page/ │ │ │ │ │ ├── Content.tsx │ │ │ │ │ ├── Footer.tsx │ │ │ │ │ ├── Responsive.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.scss │ │ │ │ ├── ShowCase/ │ │ │ │ │ ├── Item.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.scss │ │ │ │ ├── Table.tsx │ │ │ │ └── styles.scss │ │ │ ├── index.tsx │ │ │ ├── pages/ │ │ │ │ ├── ButtonPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── CardPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── CheckboxPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── DialogPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── ElevationPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── FABPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── FormFieldPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── LayoutGridPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── NotFoundPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── RadioPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── RipplePage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── SwitchPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── TextfieldPage/ │ │ │ │ │ └── index.tsx │ │ │ │ ├── TypographyPage/ │ │ │ │ │ └── index.tsx │ │ │ │ └── WelcomePage/ │ │ │ │ ├── index.tsx │ │ │ │ └── styles.scss │ │ │ ├── routes.tsx │ │ │ └── utils/ │ │ │ └── code.ts │ │ └── style/ │ │ ├── index.scss │ │ ├── layout.scss │ │ ├── preload.scss │ │ └── vars/ │ │ └── _theme.scss │ ├── tsconfig.json │ ├── tslint.json │ ├── typings/ │ │ ├── cssmodule.d.ts │ │ ├── images.d.ts │ │ └── raw-loader.d.ts │ └── vendor.js ├── lerna.json ├── package.json ├── packages/ │ ├── base/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── ClassNameMetaBase.tsx │ │ │ ├── DefaultComponentBase.ts │ │ │ ├── MetaBase.tsx │ │ │ ├── NativeDOMAdapter.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── ClassNameMetaBase.spec.tsx │ │ │ │ ├── DefaultComponentBase.spec.tsx │ │ │ │ ├── MetaBase.spec.tsx │ │ │ │ ├── NativeDOMAdapter.spec.tsx │ │ │ │ └── util.spec.tsx │ │ │ ├── event.ts │ │ │ ├── index.tsx │ │ │ ├── types.tsx │ │ │ └── util.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── button/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Button.tsx │ │ │ ├── __tests__/ │ │ │ │ └── Button.spec.tsx │ │ │ ├── constants.tsx │ │ │ └── index.tsx │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── card/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Action.tsx │ │ │ ├── Actions.tsx │ │ │ ├── Container.tsx │ │ │ ├── HorizontalBlock.tsx │ │ │ ├── Media.tsx │ │ │ ├── MediaItem.tsx │ │ │ ├── Primary.tsx │ │ │ ├── Subtitle.tsx │ │ │ ├── SupportingText.tsx │ │ │ ├── Title.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Action.spec.tsx │ │ │ │ ├── Actions.spec.tsx │ │ │ │ ├── Container.spec.tsx │ │ │ │ ├── HorizontalBlock.spec.tsx │ │ │ │ ├── Media.spec.tsx │ │ │ │ ├── MediaItem.spec.tsx │ │ │ │ ├── Primary.spec.tsx │ │ │ │ ├── Subtitle.spec.tsx │ │ │ │ ├── SupportingText.spec.tsx │ │ │ │ └── Title.spec.tsx │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── checkbox/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Background.tsx │ │ │ ├── Checkmark.tsx │ │ │ ├── Container.tsx │ │ │ ├── Default.tsx │ │ │ ├── Mixedmark.tsx │ │ │ ├── NativeControl.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Background.spec.tsx │ │ │ │ ├── Checkmark.spec.tsx │ │ │ │ ├── Container.spec.tsx │ │ │ │ ├── Default.spec.tsx │ │ │ │ ├── Mixedmark.spec.tsx │ │ │ │ ├── NativeControl.spec.tsx │ │ │ │ └── adapter.spec.ts │ │ │ ├── adapter.ts │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── dialog/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Backdrop.tsx │ │ │ ├── Body.tsx │ │ │ ├── Container.tsx │ │ │ ├── Footer/ │ │ │ │ ├── Button.tsx │ │ │ │ ├── Container.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Button.spec.tsx │ │ │ │ │ └── Container.spec.tsx │ │ │ │ ├── constants.ts │ │ │ │ └── index.ts │ │ │ ├── Header/ │ │ │ │ ├── Container.tsx │ │ │ │ ├── Title.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Container.spec.tsx │ │ │ │ │ └── Title.spec.tsx │ │ │ │ ├── constants.ts │ │ │ │ └── index.ts │ │ │ ├── Surface.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Backdrop.spec.tsx │ │ │ │ ├── Body.spec.tsx │ │ │ │ ├── Container.spec.tsx │ │ │ │ └── Surface.spec.tsx │ │ │ ├── adapter.ts │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── drawer/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Permanent/ │ │ │ │ ├── Container.tsx │ │ │ │ ├── Content.tsx │ │ │ │ ├── ToolbarSpacer.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Container.spec.tsx │ │ │ │ │ ├── Content.spec.tsx │ │ │ │ │ └── ToolbarSpacer.spec.tsx │ │ │ │ ├── constants.ts │ │ │ │ └── index.ts │ │ │ ├── Temporary/ │ │ │ │ ├── Container.tsx │ │ │ │ ├── Content.tsx │ │ │ │ ├── Drawer.tsx │ │ │ │ ├── Header.tsx │ │ │ │ ├── HeaderContent.tsx │ │ │ │ ├── ToolbarSpacer.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Container.spec.tsx │ │ │ │ │ ├── Content.spec.tsx │ │ │ │ │ ├── Drawer.spec.tsx │ │ │ │ │ ├── Header.spec.tsx │ │ │ │ │ ├── HeaderContent.spec.tsx │ │ │ │ │ └── ToolbarSpacer.spec.tsx │ │ │ │ ├── adapter.ts │ │ │ │ ├── constants.ts │ │ │ │ ├── drawerUtil.ts │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── elevation/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Elevation.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Elevation.spec.tsx │ │ │ │ └── utils.spec.ts │ │ │ ├── constants.ts │ │ │ ├── index.tsx │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── fab/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Container.tsx │ │ │ ├── Icon.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Container.spec.tsx │ │ │ │ └── Icon.spec.tsx │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── form-field/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── FormField.tsx │ │ │ ├── __tests__/ │ │ │ │ └── FormField.spec.tsx │ │ │ ├── constants.ts │ │ │ └── index.tsx │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── layout-grid/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Cell.tsx │ │ │ ├── Container.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Cell.spec.tsx │ │ │ │ ├── Container.spec.tsx │ │ │ │ └── utils.spec.ts │ │ │ ├── constants.ts │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── list/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Container.tsx │ │ │ ├── Divider.tsx │ │ │ ├── Group/ │ │ │ │ ├── Container.tsx │ │ │ │ ├── Subheader.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Container.spec.tsx │ │ │ │ │ └── Subheader.spec.tsx │ │ │ │ ├── constants.ts │ │ │ │ └── index.ts │ │ │ ├── Item/ │ │ │ │ ├── Container.tsx │ │ │ │ ├── EndDetail.tsx │ │ │ │ ├── StartDetail.tsx │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── Container.spec.tsx │ │ │ │ │ ├── EndDetail.spec.tsx │ │ │ │ │ └── StartDetail.spec.tsx │ │ │ │ ├── constants.ts │ │ │ │ └── index.ts │ │ │ ├── __tests__/ │ │ │ │ ├── Container.spec.tsx │ │ │ │ └── Divider.spec.tsx │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── radio/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Background.tsx │ │ │ ├── Container.tsx │ │ │ ├── Default.tsx │ │ │ ├── InnerCircle.tsx │ │ │ ├── NativeControl.tsx │ │ │ ├── OuterCircle.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Background.spec.tsx │ │ │ │ ├── Container.spec.tsx │ │ │ │ ├── Default.spec.tsx │ │ │ │ ├── InnerCircle.spec.tsx │ │ │ │ ├── NativeControl.spec.tsx │ │ │ │ ├── OuterCircle.spec.tsx │ │ │ │ └── adapter.spec.ts │ │ │ ├── adapter.ts │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── react-material-components-web/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── ripple/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Ripple.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Ripple.spec.tsx │ │ │ │ └── utils.spec.ts │ │ │ ├── adapter.ts │ │ │ ├── constants.ts │ │ │ ├── index.tsx │ │ │ ├── rippleUtil.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── switch/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Background.tsx │ │ │ ├── Container.tsx │ │ │ ├── Default.tsx │ │ │ ├── Knob.tsx │ │ │ ├── Label.tsx │ │ │ ├── NativeControl.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Background.spec.tsx │ │ │ │ ├── Container.spec.tsx │ │ │ │ ├── Default.spec.tsx │ │ │ │ ├── Knob.tsx │ │ │ │ ├── Label.spec.tsx │ │ │ │ └── NativeControl.spec.tsx │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── textfield/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Container.tsx │ │ │ ├── Default.tsx │ │ │ ├── Input.tsx │ │ │ ├── Label.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Container.spec.tsx │ │ │ │ ├── Default.spec.tsx │ │ │ │ ├── Input.spec.tsx │ │ │ │ ├── Label.spec.tsx │ │ │ │ └── adapter.spec.ts │ │ │ ├── adapter.ts │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── theme/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Theme.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Theme.spec.tsx │ │ │ │ └── utils.spec.ts │ │ │ ├── constants.ts │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── toolbar/ │ │ ├── .npmignore │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Container.tsx │ │ │ ├── FixedToolbarAdjusted.tsx │ │ │ ├── Icon.tsx │ │ │ ├── Row.tsx │ │ │ ├── Section.tsx │ │ │ ├── Title.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── Container.spec.tsx │ │ │ │ ├── FixedToolbarAdjusted.spec.tsx │ │ │ │ ├── Icon.spec.tsx │ │ │ │ ├── Row.spec.tsx │ │ │ │ ├── Section.spec.tsx │ │ │ │ ├── Title.spec.tsx │ │ │ │ └── utils.spec.ts │ │ │ ├── constants.tsx │ │ │ ├── index.ts │ │ │ ├── types.tsx │ │ │ └── utils.tsx │ │ ├── tsconfig.json │ │ └── tslint.json │ └── typography/ │ ├── .npmignore │ ├── package.json │ ├── src/ │ │ ├── Container.tsx │ │ ├── Text.tsx │ │ ├── __tests__/ │ │ │ ├── Container.spec.tsx │ │ │ ├── Text.spec.tsx │ │ │ └── utils.spec.ts │ │ ├── constants.tsx │ │ ├── index.tsx │ │ ├── shortcuts.tsx │ │ ├── types.tsx │ │ └── utils.tsx │ ├── tsconfig.json │ └── tslint.json ├── scripts/ │ ├── package.py │ └── requirements.txt ├── tsconfig.base.json ├── tsconfig.json ├── tslint.base.json └── tslint.json
SYMBOL INDEX (1331 symbols across 183 files)
FILE: docs/config/webpack/app.js
function loadManifest (line 18) | function loadManifest(name) {
constant ENV_PLUGINS (line 31) | const ENV_PLUGINS = PRODUCTION ? [
FILE: docs/config/webpack/constants.js
constant PROJECT_ROOT (line 3) | const PROJECT_ROOT = module.exports.PROJECT_ROOT = path.resolve(__dirnam...
constant DOCS_ROOT (line 4) | const DOCS_ROOT = module.exports.DOCS_ROOT = path.resolve(PROJECT_ROOT, ...
constant BUILD_PATH (line 5) | const BUILD_PATH = module.exports.BUILD_PATH = path.resolve(DOCS_ROOT, "...
constant SRC_ROOT (line 6) | const SRC_ROOT = module.exports.SRC_ROOT = path.resolve(DOCS_ROOT, "src");
constant PRODUCTION (line 8) | const PRODUCTION = module.exports.PRODUCTION = process.env.NODE_ENV === ...
FILE: docs/config/webpack/vendor.js
constant ENV_PLUGINS (line 10) | const ENV_PLUGINS = PRODUCTION ? [
FILE: docs/src/js/Container/MainToolbar.tsx
type Props (line 13) | type Props = {
class MainToolbar (line 17) | class MainToolbar extends React.Component<Props, {}> {
method render (line 20) | public render() {
FILE: docs/src/js/Container/index.tsx
class Container (line 10) | class Container extends React.Component<{ children?: React.ReactChild },...
method render (line 11) | public render() {
FILE: docs/src/js/components/Code.tsx
type Props (line 8) | type Props = CodeMirrorProps & {
function ifNull (line 16) | function ifNull<T>(nullable: T | null | undefined, then: T): T {
function Code (line 24) | function Code(p: Props) {
FILE: docs/src/js/components/CodeMirror.tsx
function normalizeLineEndings (line 8) | function normalizeLineEndings(str: string | null | undefined) {
type CodemirrorType (line 15) | type CodemirrorType = typeof CodeMirror;
type Props (line 17) | type Props = {
type State (line 31) | type State = {
class ReactCodemirror (line 35) | class ReactCodemirror extends React.Component<Props, State> {
method componentWillMount (line 46) | public componentWillMount() {
method componentWillUnmount (line 50) | public componentWillUnmount() {
method componentWillReceiveProps (line 57) | public componentWillReceiveProps(nextProps: Props) {
method render (line 77) | public render() {
method focus (line 93) | public focus() {
method getCodeMirror (line 99) | public getCodeMirror() {
method getCodeMirrorInstance (line 103) | private getCodeMirrorInstance(): CodemirrorType {
FILE: docs/src/js/components/ComponentPage/Content.tsx
class Content (line 7) | class Content extends React.Component<React.HTMLProps<HTMLDivElement>, {...
method render (line 8) | public render() {
FILE: docs/src/js/components/ComponentPage/index.tsx
function NavItem (line 15) | function NavItem(props) {
class ComponentPage (line 27) | class ComponentPage extends React.Component<React.HTMLProps<HTMLDivEleme...
method render (line 30) | public render() {
FILE: docs/src/js/components/DarkTheme.tsx
class Meta (line 13) | class Meta extends Theme.Meta {
method renderClassName (line 20) | protected renderClassName(childProps: ThemeChildProps) {
class DarkTheme (line 25) | class DarkTheme extends Theme {
method getMetaComponent (line 28) | protected getMetaComponent() {
FILE: docs/src/js/components/FullSize.tsx
function Center (line 7) | function Center(props: React.HTMLProps<HTMLDivElement>) {
class FullSize (line 13) | class FullSize extends React.Component<React.HTMLProps<HTMLDivElement>, ...
method render (line 16) | public render() {
FILE: docs/src/js/components/Icon.tsx
function Pen (line 7) | function Pen(props) {
function MaterialIcon (line 13) | function MaterialIcon(props) {
FILE: docs/src/js/components/Name.tsx
function Name (line 5) | function Name(props: React.HTMLProps<HTMLElement>) {
FILE: docs/src/js/components/Page/Content.tsx
class Content (line 7) | class Content extends React.Component<React.HTMLProps<HTMLDivElement>, {...
method render (line 8) | public render() {
FILE: docs/src/js/components/Page/Footer.tsx
class Footer (line 13) | class Footer extends React.Component<React.HTMLProps<HTMLDivElement>, {}> {
method render (line 14) | public render() {
FILE: docs/src/js/components/Page/Responsive.tsx
type ChildProps (line 12) | type ChildProps = {
type MetaProps (line 16) | type MetaProps = {
class Meta (line 19) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderClassName (line 20) | protected renderClassName(childProps: ChildProps) {
class Responsive (line 25) | class Responsive extends DefaultComponentBase<React.HTMLProps<HTMLDivEle...
method getMetaPropNames (line 28) | protected getMetaPropNames() {
method getMetaComponent (line 32) | protected getMetaComponent() {
method getChildComponent (line 36) | protected getChildComponent() {
FILE: docs/src/js/components/Page/index.tsx
class Page (line 11) | class Page extends React.Component<React.HTMLProps<HTMLDivElement>, {}> {
method render (line 16) | public render() {
FILE: docs/src/js/components/ShowCase/Item.tsx
class Item (line 7) | class Item extends React.Component<React.HTMLProps<HTMLSpanElement>, {}> {
method render (line 8) | public render() {
FILE: docs/src/js/components/ShowCase/index.tsx
class ShowCase (line 9) | class ShowCase extends React.Component<React.HTMLProps<HTMLDivElement> &...
method render (line 12) | public render() {
FILE: docs/src/js/components/Table.tsx
function Table (line 7) | function Table(props: React.HTMLAttributes<HTMLTableElement>) {
FILE: docs/src/js/pages/ButtonPage/index.tsx
function ButtonPage (line 16) | function ButtonPage() {
FILE: docs/src/js/pages/CardPage/index.tsx
function CardPage (line 18) | function CardPage() {
FILE: docs/src/js/pages/CheckboxPage/index.tsx
function CheckboxPage (line 16) | function CheckboxPage() {
FILE: docs/src/js/pages/DialogPage/index.tsx
class SimpleDialog (line 17) | class SimpleDialog extends React.Component<{}, {}> {
method render (line 22) | public render() {
function DialogPage (line 67) | function DialogPage() {
FILE: docs/src/js/pages/ElevationPage/index.tsx
function ElevationPage (line 15) | function ElevationPage() {
FILE: docs/src/js/pages/FABPage/index.tsx
function CheckboxPage (line 16) | function CheckboxPage() {
FILE: docs/src/js/pages/FormFieldPage/index.tsx
function FormFieldPage (line 16) | function FormFieldPage() {
FILE: docs/src/js/pages/LayoutGridPage/index.tsx
function LayoutGridPage (line 16) | function LayoutGridPage() {
FILE: docs/src/js/pages/NotFoundPage/index.tsx
class NotFound (line 9) | class NotFound extends React.Component<{}, {}> {
method render (line 10) | public render() {
FILE: docs/src/js/pages/RadioPage/index.tsx
function RadioPage (line 16) | function RadioPage() {
FILE: docs/src/js/pages/RipplePage/index.tsx
function RipplePage (line 17) | function RipplePage() {
FILE: docs/src/js/pages/SwitchPage/index.tsx
function SwitchPage (line 16) | function SwitchPage() {
FILE: docs/src/js/pages/TextfieldPage/index.tsx
function TextfieldPage (line 15) | function TextfieldPage() {
FILE: docs/src/js/pages/TypographyPage/index.tsx
function CheckboxPage (line 15) | function CheckboxPage() {
FILE: docs/src/js/pages/WelcomePage/index.tsx
function Welcome (line 17) | function Welcome() {
function GettingStarted (line 49) | function GettingStarted() {
function WelcomePage (line 104) | function WelcomePage() {
FILE: docs/src/js/routes.tsx
function MainContainer (line 25) | function MainContainer(props) {
function scrollToTop (line 34) | function scrollToTop() {
function MainRouter (line 38) | function MainRouter() {
FILE: docs/src/js/utils/code.ts
constant CODE_STRIP_START (line 1) | const CODE_STRIP_START = "/* strip-start */";
constant CODE_STRIP_END (line 2) | const CODE_STRIP_END = "/* strip-end */";
function stripIgnored (line 7) | function stripIgnored(code: string): string {
FILE: docs/typings/cssmodule.d.ts
type CssModule (line 1) | interface CssModule {
FILE: packages/base/src/ClassNameMetaBase.tsx
type ClassNameChildProps (line 13) | type ClassNameChildProps = {
type ClassNameProps (line 17) | type ClassNameProps = {
method renderProps (line 24) | protected renderProps(childProps: ChildProps): ChildProps {
method renderNativeDOMProps (line 31) | protected renderNativeDOMProps(childProps: ChildProps) {
method renderClassName (line 35) | protected renderClassName(childProps: ChildProps): string {
method renderBaseClassName (line 44) | protected renderBaseClassName(childProps: ChildProps): string | null {
method renderClassValues (line 48) | protected renderClassValues(childProps: ChildProps): ClassValue[] {
FILE: packages/base/src/DefaultComponentBase.ts
method render (line 9) | public render() {
FILE: packages/base/src/MetaBase.tsx
type Props (line 13) | type Props<ChildProps> = {
type NativeDOMProps (line 17) | type NativeDOMProps = {
method render (line 25) | public render() {
FILE: packages/base/src/NativeDOMAdapter.tsx
type EventListeners (line 10) | type EventListeners = {
type CSSVariables (line 14) | type CSSVariables = {
type Attributes (line 18) | type Attributes = {
type Props (line 22) | type Props = {
type InternalProps (line 29) | type InternalProps = {
class NativeDOMAdapter (line 40) | class NativeDOMAdapter extends React.Component<Props, {}> {
method render (line 52) | public render() {
method componentDidUpdate (line 62) | public componentDidUpdate(origPrevProps: Props) {
method internalProps (line 68) | private internalProps(props: Props): InternalProps {
method mergeEvents (line 77) | private mergeEvents(eventListeners: EventListeners, props: any) {
method removeCssVariables (line 117) | private removeCssVariables(dom: HTMLElement, toRemove: CSSVariables) {
method addCssVariables (line 125) | private addCssVariables(dom: HTMLElement, toAdd: CSSVariables) {
method updateCssVariables (line 133) | private updateCssVariables(dom: HTMLElement, prev: CSSVariables, next:...
method filterReactEventConvertibles (line 151) | private filterReactEventConvertibles(eventListeners: EventListeners): ...
method filterNativeEvents (line 161) | private filterNativeEvents(eventListeners: EventListeners): EventListe...
method removeEventListeners (line 171) | private removeEventListeners(dom: HTMLElement, toRemove: EventListener...
method addEventListeners (line 179) | private addEventListeners(dom: HTMLElement, toAdd: EventListeners) {
method updateEventListeners (line 187) | private updateEventListeners(dom: HTMLElement, prev: EventListeners, n...
method removeAttributes (line 229) | private removeAttributes(dom: HTMLElement, toRemove: Attributes) {
method addAttributes (line 237) | private addAttributes(dom: HTMLElement, toAdd: Attributes) {
method updateAttributes (line 245) | private updateAttributes(dom: HTMLElement, prev: Attributes, next: Att...
method updateNode (line 262) | private updateNode(
FILE: packages/base/src/__tests__/ClassNameMetaBase.spec.tsx
class MetaImpl (line 12) | class MetaImpl extends ClassNameMetaBase<{}, {}, {}> {
method renderBaseClassName (line 13) | protected renderBaseClassName() {
method renderClassValues (line 29) | protected renderClassValues() {
method renderBaseClassName (line 52) | protected renderBaseClassName() {
method renderBaseClassName (line 69) | protected renderBaseClassName() {
class MetaImpl (line 28) | class MetaImpl extends ClassNameMetaBase<{}, {}, {}> {
method renderBaseClassName (line 13) | protected renderBaseClassName() {
method renderClassValues (line 29) | protected renderClassValues() {
method renderBaseClassName (line 52) | protected renderBaseClassName() {
method renderBaseClassName (line 69) | protected renderBaseClassName() {
class MetaImpl (line 51) | class MetaImpl extends ClassNameMetaBase<{}, { className: string }, {}> {
method renderBaseClassName (line 13) | protected renderBaseClassName() {
method renderClassValues (line 29) | protected renderClassValues() {
method renderBaseClassName (line 52) | protected renderBaseClassName() {
method renderBaseClassName (line 69) | protected renderBaseClassName() {
class MetaImpl (line 68) | class MetaImpl extends ClassNameMetaBase<{ className: string }, { classN...
method renderBaseClassName (line 13) | protected renderBaseClassName() {
method renderClassValues (line 29) | protected renderClassValues() {
method renderBaseClassName (line 52) | protected renderBaseClassName() {
method renderBaseClassName (line 69) | protected renderBaseClassName() {
FILE: packages/base/src/__tests__/DefaultComponentBase.spec.tsx
class MetaImpl (line 12) | class MetaImpl extends ClassNameMetaBase<{}, { bar?: boolean, className?...
method renderBaseClassName (line 13) | protected renderBaseClassName() {
method renderClassValues (line 17) | protected renderClassValues() {
class Default (line 23) | class Default extends DefaultComponentBase<{}, { bar?: boolean }, {}> {
method getMetaPropNames (line 24) | protected getMetaPropNames() {
method getMetaComponent (line 27) | protected getMetaComponent() {
method getChildComponent (line 30) | protected getChildComponent() {
FILE: packages/base/src/__tests__/MetaBase.spec.tsx
class MetaImpl (line 12) | class MetaImpl extends MetaBase<{ href?: string }, { link: string }, {}> {
method renderProps (line 13) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 19) | protected renderNativeDOMProps(childProps: { href: string }) {
method renderProps (line 39) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 45) | protected renderNativeDOMProps(childProps: { href: string }) {
method renderProps (line 69) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 75) | protected renderNativeDOMProps(childProps: { href: string }) {
class MetaImpl (line 38) | class MetaImpl extends MetaBase<{ href?: string }, { link: string, name:...
method renderProps (line 13) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 19) | protected renderNativeDOMProps(childProps: { href: string }) {
method renderProps (line 39) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 45) | protected renderNativeDOMProps(childProps: { href: string }) {
method renderProps (line 69) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 75) | protected renderNativeDOMProps(childProps: { href: string }) {
class MetaImpl (line 68) | class MetaImpl extends MetaBase<{ href?: string }, { link: string }, {}> {
method renderProps (line 13) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 19) | protected renderNativeDOMProps(childProps: { href: string }) {
method renderProps (line 39) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 45) | protected renderNativeDOMProps(childProps: { href: string }) {
method renderProps (line 69) | protected renderProps(childProps: { href: string }) {
method renderNativeDOMProps (line 75) | protected renderNativeDOMProps(childProps: { href: string }) {
FILE: packages/base/src/__tests__/util.spec.tsx
function wrapper (line 28) | function wrapper() {
function handler (line 36) | function handler() {
function wrapper (line 54) | function wrapper() {
function handler (line 58) | function handler(e: React.SyntheticEvent<any>) {
function proxy (line 64) | function proxy(e: React.SyntheticEvent<any>) {
function wrapper (line 84) | function wrapper() {
FILE: packages/base/src/event.ts
constant EVENT_MAP (line 1) | const EVENT_MAP = {
FILE: packages/base/src/types.tsx
type Config (line 3) | type Config = {};
type ReactComponent (line 5) | type ReactComponent<P> = React.ComponentClass<P> | React.StatelessCompon...
type Wrappable (line 7) | type Wrappable<P> = ReactComponent<P> | React.ReactElement<P>;
FILE: packages/base/src/util.ts
function eventHandlerDecorator (line 20) | function eventHandlerDecorator<T>(defaultHandler: React.ReactEventHandle...
function includes (line 36) | function includes<T>(array: T[], item: T, predicate: (left, right) => bo...
FILE: packages/button/src/Button.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 23) | type MetaProps = {
type ChildProps (line 32) | type ChildProps = {
class Meta (line 36) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 37) | protected renderBaseClassName() {
method renderClassValues (line 41) | protected renderClassValues(_childProps: ChildProps) {
class Button (line 52) | class Button extends DefaultComponentBase<React.HTMLProps<HTMLButtonElem...
method getMetaComponent (line 55) | protected getMetaComponent() {
method getMetaPropNames (line 59) | protected getMetaPropNames() {
method getChildComponent (line 69) | protected getChildComponent() {
FILE: packages/button/src/constants.tsx
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-button";
FILE: packages/card/src/Action.tsx
constant CLASS_NAME (line 16) | const CLASS_NAME = `${BASE_CLASS_NAME}__action`;
type MetaProps (line 18) | type MetaProps = {
type ChildProps (line 22) | type ChildProps = {
class Meta (line 26) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 27) | protected renderBaseClassName() {
function CompactButton (line 33) | function CompactButton(props: React.HTMLProps<HTMLButtonElement> & Butto...
class Action (line 40) | class Action
method getMetaComponent (line 44) | protected getMetaComponent() {
method getMetaPropNames (line 48) | protected getMetaPropNames() {
method getChildComponent (line 54) | protected getChildComponent(): React.SFC<React.HTMLProps<HTMLButtonEle...
FILE: packages/card/src/Actions.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__actions`;
type MetaProps (line 18) | type MetaProps = {
type ChildProps (line 23) | type ChildProps = {
class Meta (line 27) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 28) | protected renderBaseClassName() {
method renderClassValues (line 32) | protected renderClassValues() {
class Actions (line 39) | class Actions extends DefaultComponentBase<React.HTMLProps<HTMLElement>,...
method getMetaComponent (line 42) | protected getMetaComponent() {
method getMetaPropNames (line 46) | protected getMetaPropNames() {
method getChildComponent (line 53) | protected getChildComponent() {
FILE: packages/card/src/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 18) | type MetaProps = {
type ChildProps (line 23) | type ChildProps = {
class Meta (line 30) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 31) | protected renderBaseClassName() {
method renderClassValues (line 35) | protected renderClassValues() {
class Container (line 42) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 45) | protected getMetaComponent() {
method getMetaPropNames (line 49) | protected getMetaPropNames() {
method getChildComponent (line 56) | protected getChildComponent() {
FILE: packages/card/src/HorizontalBlock.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__horizontal-block`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
type Props (line 31) | type Props = React.HTMLProps<HTMLDivElement> & MetaProps;
class HorizontalBlock (line 33) | class HorizontalBlock extends DefaultComponentBase<React.HTMLProps<HTMLD...
method getMetaComponent (line 36) | protected getMetaComponent() {
method getMetaPropNames (line 40) | protected getMetaPropNames() {
method getChildComponent (line 46) | protected getChildComponent() {
FILE: packages/card/src/Media.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__media`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
class Media (line 31) | class Media extends DefaultComponentBase<React.HTMLProps<HTMLElement>, M...
method getMetaComponent (line 34) | protected getMetaComponent() {
method getMetaPropNames (line 38) | protected getMetaPropNames() {
method getChildComponent (line 44) | protected getChildComponent() {
FILE: packages/card/src/MediaItem.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__media-item`;
type Size (line 14) | type Size = 1.5 | 2 | 3;
function classNameForSize (line 16) | function classNameForSize(size: Size): string {
type MetaProps (line 29) | type MetaProps = {
type ChildProps (line 34) | type ChildProps = {
class Meta (line 41) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 42) | protected renderBaseClassName() {
method renderClassValues (line 46) | protected renderClassValues() {
class MediaItem (line 53) | class MediaItem extends DefaultComponentBase<React.HTMLProps<HTMLImageEl...
method getMetaComponent (line 56) | protected getMetaComponent() {
method getMetaPropNames (line 60) | protected getMetaPropNames() {
method getChildComponent (line 67) | protected getChildComponent() {
FILE: packages/card/src/Primary.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__primary`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
class Primary (line 31) | class Primary extends DefaultComponentBase<React.HTMLProps<HTMLElement>,...
method getMetaComponent (line 34) | protected getMetaComponent() {
method getMetaPropNames (line 38) | protected getMetaPropNames() {
method getChildComponent (line 44) | protected getChildComponent() {
FILE: packages/card/src/Subtitle.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__subtitle`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
class Subtitle (line 31) | class Subtitle extends DefaultComponentBase<React.HTMLProps<HTMLHeadingE...
method getMetaComponent (line 34) | protected getMetaComponent() {
method getMetaPropNames (line 38) | protected getMetaPropNames() {
method getChildComponent (line 44) | protected getChildComponent() {
FILE: packages/card/src/SupportingText.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__supporting-text`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
class SupportingText (line 31) | class SupportingText extends DefaultComponentBase<React.HTMLProps<HTMLEl...
method getMetaComponent (line 34) | protected getMetaComponent() {
method getMetaPropNames (line 38) | protected getMetaPropNames() {
method getChildComponent (line 44) | protected getChildComponent() {
FILE: packages/card/src/Title.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__title`;
type MetaProps (line 18) | type MetaProps = {
type ChildProps (line 23) | type ChildProps = {
class Meta (line 30) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 35) | protected renderBaseClassName() {
method renderClassValues (line 39) | protected renderClassValues() {
class Title (line 46) | class Title extends DefaultComponentBase<React.HTMLProps<HTMLHeadingElem...
method getMetaComponent (line 49) | protected getMetaComponent() {
method getMetaPropNames (line 53) | protected getMetaPropNames() {
method getChildComponent (line 60) | protected getChildComponent() {
FILE: packages/card/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-card";
FILE: packages/card/src/index.ts
class Card (line 12) | class Card extends Container {
FILE: packages/checkbox/src/Background.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__background`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Background (line 28) | class Background extends DefaultComponentBase<React.HTMLProps<HTMLDivEle...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/checkbox/src/Checkmark.tsx
constant CLASS_NAME (line 7) | const CLASS_NAME = `${BASE_CLASS_NAME}__checkmark`;
constant PATH_CLASS_NAME (line 8) | const PATH_CLASS_NAME = `${CLASS_NAME}__path`;
class Checkmark (line 13) | class Checkmark extends React.Component<{}, {}> {
method render (line 14) | public render() {
FILE: packages/checkbox/src/Container.tsx
constant CLASS_NAME (line 24) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 26) | type MetaProps = {
type ChildProps (line 33) | type ChildProps = {
type State (line 37) | type State = {
type ChildContext (line 42) | type ChildContext = {
class Meta (line 49) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method constructor (line 62) | constructor(props) {
method getChildContext (line 68) | public getChildContext(): ChildContext {
method componentDidMount (line 75) | public componentDidMount() {
method componentWillUnmount (line 87) | public componentWillUnmount() {
method componentWillReceiveProps (line 93) | public componentWillReceiveProps(props: MetaProps) {
method renderNativeDOMProps (line 97) | protected renderNativeDOMProps() {
method renderBaseClassName (line 103) | protected renderBaseClassName() {
method renderClassValues (line 107) | protected renderClassValues() {
method syncFoundation (line 113) | private syncFoundation(props: MetaProps) {
class ContainerAdapterImpl (line 136) | class ContainerAdapterImpl extends ContainerAdapter {
method constructor (line 139) | constructor(element: Meta) {
method addClass (line 143) | public addClass(className: string) {
method removeClass (line 148) | public removeClass(className: string) {
method registerAnimationEndHandler (line 153) | public registerAnimationEndHandler(handler: EventListener) {
method deregisterAnimationEndHandler (line 162) | public deregisterAnimationEndHandler(handler: EventListener) {
method forceLayout (line 170) | public forceLayout() {
method isAttachedToDOM (line 173) | public isAttachedToDOM(): boolean {
method isChecked (line 177) | public isChecked(): boolean | null {
class Container (line 182) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 185) | protected getMetaComponent() {
method getMetaPropNames (line 189) | protected getMetaPropNames() {
method getChildComponent (line 198) | protected getChildComponent() {
FILE: packages/checkbox/src/Default.tsx
type Props (line 9) | type Props = {
class Default (line 23) | class Default extends React.Component<Props, {}> {
method render (line 24) | public render() {
FILE: packages/checkbox/src/Mixedmark.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__mixedmark`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Mixedmark (line 28) | class Mixedmark extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/checkbox/src/NativeControl.tsx
constant CLASS_NAME (line 21) | const CLASS_NAME = `${BASE_CLASS_NAME}__native-control`;
type MetaProps (line 23) | type MetaProps = {
type ChildProps (line 28) | type ChildProps = {
type State (line 33) | type State = {
type Context (line 37) | type Context = {
class Meta (line 44) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method componentDidMount (line 57) | public componentDidMount() {
method componentWillUnmount (line 61) | public componentWillUnmount() {
method renderNativeDOMProps (line 65) | protected renderNativeDOMProps() {
method renderBaseClassName (line 71) | protected renderBaseClassName() {
method renderProps (line 75) | protected renderProps(childProps: ChildProps) {
class NativeControlAdapterImpl (line 92) | class NativeControlAdapterImpl extends NativeControlAdapter {
method constructor (line 95) | constructor(element: Meta) {
method registerChangeHandler (line 100) | public registerChangeHandler(handler: EventListener) {
method deregisterChangeHandler (line 109) | public deregisterChangeHandler(handler: EventListener) {
method getNativeControl (line 118) | public getNativeControl(): Element | null {
method setDefaultOnChangeHandler (line 121) | public setDefaultOnChangeHandler(handler: React.ChangeEventHandler<any...
function CheckboxInput (line 127) | function CheckboxInput(props: React.HTMLProps<HTMLInputElement>) {
type Props (line 133) | type Props = React.HTMLProps<HTMLButtonElement> & MetaProps;
class NativeControl (line 135) | class NativeControl extends DefaultComponentBase<React.HTMLProps<HTMLInp...
method getMetaComponent (line 138) | protected getMetaComponent() {
method getMetaPropNames (line 142) | protected getMetaPropNames() {
method getChildComponent (line 149) | protected getChildComponent(): React.SFC<React.HTMLProps<HTMLInputElem...
FILE: packages/checkbox/src/adapter.ts
class ContainerAdapter (line 9) | class ContainerAdapter {
method addClass (line 10) | public addClass(_className: string) {
method removeClass (line 12) | public removeClass(_className: string) {
method registerAnimationEndHandler (line 14) | public registerAnimationEndHandler(_handler: EventListener) {
method deregisterAnimationEndHandler (line 16) | public deregisterAnimationEndHandler(_handler: EventListener) {
method forceLayout (line 18) | public forceLayout() {
method isAttachedToDOM (line 20) | public isAttachedToDOM(): boolean {
method isChecked (line 23) | public isChecked(): boolean | null {
class NativeControlAdapter (line 32) | class NativeControlAdapter {
method registerChangeHandler (line 33) | public registerChangeHandler(_handler: EventListener) {
method deregisterChangeHandler (line 35) | public deregisterChangeHandler(_handler: EventListener) {
method getNativeControl (line 37) | public getNativeControl(): Element| null {
method setDefaultOnChangeHandler (line 40) | public setDefaultOnChangeHandler(_onChange: React.ChangeEventHandler<a...
class FoundationAdapter (line 47) | class FoundationAdapter {
method constructor (line 52) | constructor() {
method setContainerAdapter (line 58) | public setContainerAdapter(containerAdapter: ContainerAdapter) {
method setNativeControlAdapter (line 61) | public setNativeControlAdapter(nativeControlAdapter: NativeControlAdap...
method addClass (line 65) | public addClass(className: string) {
method removeClass (line 68) | public removeClass(className: string) {
method registerAnimationEndHandler (line 71) | public registerAnimationEndHandler(handler: EventListener) {
method deregisterAnimationEndHandler (line 74) | public deregisterAnimationEndHandler(handler: EventListener) {
method registerChangeHandler (line 77) | public registerChangeHandler(handler: EventListener) {
method deregisterChangeHandler (line 80) | public deregisterChangeHandler(handler: EventListener) {
method getNativeControl (line 83) | public getNativeControl(): Element | null {
method forceLayout (line 86) | public forceLayout() {
method isAttachedToDOM (line 89) | public isAttachedToDOM(): boolean {
method setDefaultOnChangeHandler (line 92) | public setDefaultOnChangeHandler(onChange: React.ChangeEventHandler<an...
method isChecked (line 95) | public isChecked(): boolean | null {
method toObject (line 102) | public toObject(): {} {
FILE: packages/checkbox/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-checkbox";
FILE: packages/checkbox/src/index.ts
class Checkbox (line 8) | class Checkbox extends Container {
FILE: packages/dialog/src/Backdrop.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__backdrop`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
class Backdrop (line 31) | class Backdrop extends DefaultComponentBase<React.HTMLProps<HTMLDivEleme...
method getMetaComponent (line 34) | protected getMetaComponent() {
method getMetaPropNames (line 38) | protected getMetaPropNames() {
method getChildComponent (line 44) | protected getChildComponent() {
FILE: packages/dialog/src/Body.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__body`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 19) | type ChildProps = {
class Meta (line 30) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 31) | protected renderBaseClassName() {
method renderClassValues (line 35) | protected renderClassValues() {
class Body (line 42) | class Body extends DefaultComponentBase<React.HTMLProps<HTMLElement>, Me...
method getMetaComponent (line 45) | protected getMetaComponent() {
method getMetaPropNames (line 49) | protected getMetaPropNames() {
method getChildComponent (line 56) | protected getChildComponent() {
FILE: packages/dialog/src/Container.tsx
constant CLASS_NAME (line 31) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 37) | type MetaProps = {
type ChildProps (line 47) | type ChildProps = {
type State (line 51) | type State = {
type ChildContext (line 58) | type ChildContext = {
class Meta (line 65) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method constructor (line 82) | constructor(props) {
method getChildContext (line 88) | public getChildContext(): ChildContext {
method componentWillReceiveProps (line 95) | public componentWillReceiveProps(props: MetaProps) {
method componentDidMount (line 106) | public componentDidMount() {
method componentWillUnmount (line 111) | public componentWillUnmount() {
method accept (line 118) | public accept(notifyChange: boolean = false) {
method cancel (line 122) | public cancel(notifyChange: boolean = false) {
method getClassName (line 126) | public getClassName(props: MetaProps, state: State): string {
method renderNativeDOMProps (line 136) | protected renderNativeDOMProps() {
method renderClassValues (line 143) | protected renderClassValues() {
class ContainerAdapterImpl (line 148) | class ContainerAdapterImpl extends ContainerAdapter {
method constructor (line 151) | constructor(element: Meta) {
method hasClass (line 156) | public hasClass(className: string): boolean {
method addClass (line 162) | public addClass(className: string) {
method removeClass (line 178) | public removeClass(className: string) {
method setAttr (line 194) | public setAttr(attr: string, val: string) {
method registerInteractionHandler (line 199) | public registerInteractionHandler(evt: string, handler: EventListener) {
method deregisterInteractionHandler (line 208) | public deregisterInteractionHandler(evt: string, handler: EventListene...
method notifyAccept (line 217) | public notifyAccept() {
method notifyCancel (line 222) | public notifyCancel() {
class Container (line 229) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLElement...
method getMetaComponent (line 232) | protected getMetaComponent() {
method getMetaPropNames (line 236) | protected getMetaPropNames() {
method getChildComponent (line 248) | protected getChildComponent() {
FILE: packages/dialog/src/Footer/Button.tsx
constant CLASS_NAME (line 13) | const CLASS_NAME = `${BASE_CLASS_NAME}__button`;
type MetaProps (line 15) | type MetaProps = {
type ChildProps (line 20) | type ChildProps = {
class Meta (line 32) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 33) | protected renderBaseClassName() {
method renderClassValues (line 37) | protected renderClassValues() {
class Button (line 45) | class Button
method getMetaComponent (line 49) | protected getMetaComponent() {
method getMetaPropNames (line 53) | protected getMetaPropNames() {
method getChildComponent (line 60) | protected getChildComponent() {
FILE: packages/dialog/src/Footer/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
type Props (line 31) | type Props = React.HTMLProps<HTMLElement> & MetaProps;
class Container (line 33) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLElement...
method getMetaComponent (line 36) | protected getMetaComponent() {
method getMetaPropNames (line 40) | protected getMetaPropNames() {
method getChildComponent (line 46) | protected getChildComponent() {
FILE: packages/dialog/src/Footer/constants.ts
constant BASE_CLASS_NAME (line 3) | const BASE_CLASS_NAME = `${PARENT_BASE_CLASS_NAME}__footer`;
FILE: packages/dialog/src/Footer/index.ts
class Footer (line 4) | class Footer extends Container {
FILE: packages/dialog/src/Header/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
class Container (line 31) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLElement...
method getMetaComponent (line 34) | protected getMetaComponent() {
method getMetaPropNames (line 38) | protected getMetaPropNames() {
method getChildComponent (line 44) | protected getChildComponent() {
FILE: packages/dialog/src/Header/Title.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__title`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
class Title (line 31) | class Title extends DefaultComponentBase<React.HTMLProps<HTMLHeadingElem...
method getMetaComponent (line 34) | protected getMetaComponent() {
method getMetaPropNames (line 38) | protected getMetaPropNames() {
method getChildComponent (line 44) | protected getChildComponent() {
FILE: packages/dialog/src/Header/constants.ts
constant BASE_CLASS_NAME (line 3) | const BASE_CLASS_NAME = `${PARENT_BASE_CLASS_NAME}__header`;
FILE: packages/dialog/src/Header/index.ts
class Header (line 4) | class Header extends Container {
FILE: packages/dialog/src/Surface.tsx
constant CLASS_NAME (line 28) | const CLASS_NAME = `${BASE_CLASS_NAME}__surface`;
type MetaProps (line 30) | type MetaProps = {
type ChildProps (line 34) | type ChildProps = {
type State (line 38) | type State = {
type Context (line 43) | type Context = {
class Meta (line 50) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method componentDidMount (line 62) | public componentDidMount() {
method componentWillUnmount (line 66) | public componentWillUnmount() {
method renderNativeDOMProps (line 70) | protected renderNativeDOMProps() {
method renderBaseClassName (line 76) | protected renderBaseClassName() {
class SurfaceAdapterImpl (line 81) | class SurfaceAdapterImpl extends SurfaceAdapter {
method constructor (line 84) | constructor(element: Meta) {
method registerSurfaceInteractionHandler (line 88) | public registerSurfaceInteractionHandler(evt: string, handler: EventLi...
method deregisterSurfaceInteractionHandler (line 97) | public deregisterSurfaceInteractionHandler(evt: string, handler: Event...
method numFocusableTargets (line 106) | public numFocusableTargets(): number {
method setDialogFocusFirstTarget (line 109) | public setDialogFocusFirstTarget() {
method setInitialFocus (line 112) | public setInitialFocus() {
method getFocusableElements (line 114) | public getFocusableElements(): Element[] {
method getDOMNode (line 117) | public getDOMNode(): Element {
class Surface (line 122) | class Surface extends DefaultComponentBase<React.HTMLProps<HTMLDivElemen...
method getMetaComponent (line 125) | protected getMetaComponent() {
method getMetaPropNames (line 129) | protected getMetaPropNames() {
method getChildComponent (line 135) | protected getChildComponent() {
FILE: packages/dialog/src/adapter.ts
class ContainerAdapter (line 12) | class ContainerAdapter {
method hasClass (line 13) | public hasClass(_className: string): boolean {
method addClass (line 16) | public addClass(_className: string) {
method removeClass (line 18) | public removeClass(_className: string) {
method setAttr (line 20) | public setAttr(_attr: string, _val: string) {
method registerInteractionHandler (line 22) | public registerInteractionHandler(_evt: string, _handler: EventListene...
method deregisterInteractionHandler (line 24) | public deregisterInteractionHandler(_evt: string, _handler: EventListe...
method notifyAccept (line 26) | public notifyAccept() {
method notifyCancel (line 28) | public notifyCancel() {
class SurfaceAdapter (line 32) | class SurfaceAdapter {
method registerSurfaceInteractionHandler (line 33) | public registerSurfaceInteractionHandler(_evt: string, _handler: Event...
method deregisterSurfaceInteractionHandler (line 35) | public deregisterSurfaceInteractionHandler(_evt: string, _handler: Eve...
method numFocusableTargets (line 37) | public numFocusableTargets(): number {
method setDialogFocusFirstTarget (line 40) | public setDialogFocusFirstTarget() {
method setInitialFocus (line 42) | public setInitialFocus() {
method getFocusableElements (line 44) | public getFocusableElements(): Element[] {
class FoundationAdapter (line 52) | class FoundationAdapter {
method constructor (line 56) | constructor() {
method setContainerAdapter (line 61) | public setContainerAdapter(containerAdapter: ContainerAdapter) {
method setSurfaceAdapter (line 65) | public setSurfaceAdapter(surfaceAdapter: SurfaceAdapter) {
method hasClass (line 70) | public hasClass(className: string): boolean {
method addClass (line 73) | public addClass(className: string) {
method removeClass (line 76) | public removeClass(className: string) {
method setAttr (line 79) | public setAttr(attr: string, val: string) {
method registerInteractionHandler (line 82) | public registerInteractionHandler(evt: string, handler: EventListener) {
method deregisterInteractionHandler (line 85) | public deregisterInteractionHandler(evt: string, handler: EventListene...
method notifyAccept (line 88) | public notifyAccept() {
method notifyCancel (line 91) | public notifyCancel() {
method registerSurfaceInteractionHandler (line 95) | public registerSurfaceInteractionHandler(evt: string, handler: EventLi...
method deregisterSurfaceInteractionHandler (line 98) | public deregisterSurfaceInteractionHandler(evt: string, handler: Event...
method numFocusableTargets (line 101) | public numFocusableTargets(): number {
method setDialogFocusFirstTarget (line 104) | public setDialogFocusFirstTarget() {
method setInitialFocus (line 107) | public setInitialFocus() {
method getFocusableElements (line 110) | public getFocusableElements(): Element[] {
method eventTargetHasClass (line 115) | public eventTargetHasClass(target: EventTarget & Element, className: s...
method registerDocumentKeydownHandler (line 118) | public registerDocumentKeydownHandler(handler: EventListener) {
method deregisterDocumentKeydownHandler (line 121) | public deregisterDocumentKeydownHandler(handler: EventListener) {
method registerFocusTrappingHandler (line 124) | public registerFocusTrappingHandler(handler: EventListener) {
method deregisterFocusTrappingHandler (line 127) | public deregisterFocusTrappingHandler(handler: EventListener) {
method getFocusedTarget (line 130) | public getFocusedTarget(): Element {
method setFocusedTarget (line 133) | public setFocusedTarget(target: EventTarget & HTMLElement) {
method makeElementUntabbable (line 136) | public makeElementUntabbable(el: Element) {
method saveElementTabState (line 139) | public saveElementTabState(el: Element) {
method restoreElementTabState (line 142) | public restoreElementTabState(el: Element) {
method addBodyClass (line 145) | public addBodyClass(className: string) {
method removeBodyClass (line 148) | public removeBodyClass(className: string) {
method setBodyAttr (line 151) | public setBodyAttr(attr: string, val: string) {
method rmBodyAttr (line 154) | public rmBodyAttr(attr: string) {
method toObject (line 161) | public toObject(): {} {
FILE: packages/dialog/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-dialog";
FILE: packages/dialog/src/index.ts
class Dialog (line 8) | class Dialog extends Container {
FILE: packages/drawer/src/Permanent/Container.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 12) | type MetaProps = {
type ChildProps (line 16) | type ChildProps = {
class Meta (line 20) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 21) | protected renderBaseClassName() {
class Container (line 26) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLElement...
method getMetaComponent (line 29) | protected getMetaComponent() {
method getMetaPropNames (line 33) | protected getMetaPropNames() {
method getChildComponent (line 39) | protected getChildComponent() {
FILE: packages/drawer/src/Permanent/Content.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = `${BASE_CLASS_NAME}__content`;
type MetaProps (line 12) | type MetaProps = {
type ChildProps (line 16) | type ChildProps = {
class Meta (line 20) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 21) | protected renderBaseClassName() {
class Content (line 26) | class Content extends DefaultComponentBase<React.HTMLProps<HTMLDivElemen...
method getMetaComponent (line 29) | protected getMetaComponent() {
method getMetaPropNames (line 33) | protected getMetaPropNames() {
method getChildComponent (line 39) | protected getChildComponent() {
FILE: packages/drawer/src/Permanent/ToolbarSpacer.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = `${BASE_CLASS_NAME}__toolbar-spacer`;
type MetaProps (line 12) | type MetaProps = {
type ChildProps (line 16) | type ChildProps = {
class Meta (line 20) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 21) | protected renderBaseClassName() {
class ToolbarSpacer (line 26) | class ToolbarSpacer extends DefaultComponentBase<React.HTMLProps<HTMLDiv...
method getMetaComponent (line 29) | protected getMetaComponent() {
method getMetaPropNames (line 33) | protected getMetaPropNames() {
method getChildComponent (line 39) | protected getChildComponent() {
FILE: packages/drawer/src/Permanent/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-permanent-drawer";
constant SELECTED_CLASS_NAME (line 2) | const SELECTED_CLASS_NAME = `${BASE_CLASS_NAME}--selected`;
FILE: packages/drawer/src/Permanent/index.ts
class Permanent (line 5) | class Permanent extends Container {
FILE: packages/drawer/src/Temporary/Container.tsx
constant CLASS_NAME (line 23) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 25) | type MetaProps = {
type ChildProps (line 34) | type ChildProps = {
type State (line 38) | type State = {
type ChildContext (line 45) | type ChildContext = {
class Meta (line 58) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method constructor (line 79) | constructor(props) {
method getChildContext (line 85) | public getChildContext(): ChildContext {
method componentWillReceiveProps (line 92) | public componentWillReceiveProps(props: MetaProps) {
method componentDidMount (line 103) | public componentDidMount() {
method componentWillUnmount (line 108) | public componentWillUnmount() {
method getClassName (line 113) | public getClassName(_props: MetaProps, state: State): string {
method renderNativeDOMProps (line 120) | protected renderNativeDOMProps() {
method renderBaseClassName (line 127) | protected renderBaseClassName() {
method renderClassValues (line 131) | protected renderClassValues() {
class ContainerAdapterImpl (line 136) | class ContainerAdapterImpl extends ContainerAdapter {
method constructor (line 139) | constructor(element: Meta) {
method addClass (line 143) | public addClass(className: string) {
method removeClass (line 159) | public removeClass(className: string) {
method hasClass (line 175) | public hasClass(className: string): boolean {
method registerInteractionHandler (line 180) | public registerInteractionHandler(evt: string, handler: EventListener) {
method deregisterInteractionHandler (line 189) | public deregisterInteractionHandler(evt: string, handler: EventListene...
method registerTransitionEndHandler (line 198) | public registerTransitionEndHandler(handler: EventListener) {
method deregisterTransitionEndHandler (line 202) | public deregisterTransitionEndHandler(handler: EventListener) {
method registerDocumentKeydownHandler (line 206) | public registerDocumentKeydownHandler(handler: EventListener) {
method deregisterDocumentKeydownHandler (line 209) | public deregisterDocumentKeydownHandler(handler: EventListener) {
method updateCssVariable (line 212) | public updateCssVariable(value: string) {
method saveElementTabState (line 217) | public saveElementTabState(el: Element) {
method restoreElementTabState (line 220) | public restoreElementTabState(el: Element) {
method makeElementUntabbable (line 223) | public makeElementUntabbable(el: Element) {
method isRtl (line 226) | public isRtl(): boolean {
class Container (line 231) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLElement...
method getMetaComponent (line 234) | protected getMetaComponent() {
method getMetaPropNames (line 238) | protected getMetaPropNames() {
method getChildComponent (line 249) | protected getChildComponent() {
FILE: packages/drawer/src/Temporary/Content.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__content`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Content (line 28) | class Content extends DefaultComponentBase<React.HTMLProps<HTMLDivElemen...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/drawer/src/Temporary/Drawer.tsx
constant CLASS_NAME (line 21) | const CLASS_NAME = `${BASE_CLASS_NAME}__drawer`;
type MetaProps (line 29) | type MetaProps = {
type ChildProps (line 33) | type ChildProps = {
type State (line 37) | type State = {
type Context (line 42) | type Context = {
class Meta (line 46) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method componentDidMount (line 58) | public componentDidMount() {
method componentWillUnmount (line 62) | public componentWillUnmount() {
method renderNativeDOMProps (line 66) | protected renderNativeDOMProps() {
method renderBaseClassName (line 73) | protected renderBaseClassName() {
class DrawerAdapterImpl (line 78) | class DrawerAdapterImpl extends DrawerAdapter {
method constructor (line 81) | constructor(element: Meta) {
method registerDrawerInteractionHandler (line 86) | public registerDrawerInteractionHandler(evt: string, handler: EventLis...
method deregisterDrawerInteractionHandler (line 96) | public deregisterDrawerInteractionHandler(evt: string, handler: EventL...
method hasNecessaryDom (line 105) | public hasNecessaryDom(): boolean {
method getDrawerWidth (line 108) | public getDrawerWidth(): number {
method setTranslateX (line 111) | public setTranslateX(value: number) {
method isDrawer (line 124) | public isDrawer(el: Element): boolean {
method getFocusableElements (line 127) | public getFocusableElements(): NodeListOf<Element> {
method getDOMNode (line 130) | public getDOMNode(): Element {
class Drawer (line 135) | class Drawer extends DefaultComponentBase<React.HTMLProps<HTMLElement>, ...
method getMetaComponent (line 138) | protected getMetaComponent() {
method getMetaPropNames (line 142) | protected getMetaPropNames() {
method getChildComponent (line 148) | protected getChildComponent() {
FILE: packages/drawer/src/Temporary/Header.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__header`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Header (line 28) | class Header extends DefaultComponentBase<React.HTMLProps<HTMLElement>, ...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/drawer/src/Temporary/HeaderContent.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__header-content`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class HeaderContent (line 28) | class HeaderContent extends DefaultComponentBase<React.HTMLProps<HTMLDiv...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/drawer/src/Temporary/ToolbarSpacer.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__toolbar-spacer`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class ToolbarSpacer (line 28) | class ToolbarSpacer extends DefaultComponentBase<React.HTMLProps<HTMLDiv...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/drawer/src/Temporary/adapter.ts
function createEmptyNodeList (line 5) | function createEmptyNodeList(): NodeListOf<Element> {
class ContainerAdapter (line 17) | class ContainerAdapter {
method addClass (line 18) | public addClass(_className: string) {
method removeClass (line 20) | public removeClass(_className: string) {
method hasClass (line 22) | public hasClass(_className: string): boolean {
method registerInteractionHandler (line 25) | public registerInteractionHandler(_evt: string, _handler: EventListene...
method deregisterInteractionHandler (line 27) | public deregisterInteractionHandler(_evt: string, _handler: EventListe...
method registerTransitionEndHandler (line 29) | public registerTransitionEndHandler(_handler: EventListener) {
method deregisterTransitionEndHandler (line 31) | public deregisterTransitionEndHandler(_handler: EventListener) {
method registerDocumentKeydownHandler (line 33) | public registerDocumentKeydownHandler(_handler: EventListener) {
method deregisterDocumentKeydownHandler (line 35) | public deregisterDocumentKeydownHandler(_handler: EventListener) {
method updateCssVariable (line 37) | public updateCssVariable(_value: string) {
method saveElementTabState (line 39) | public saveElementTabState(_el: Element) {
method restoreElementTabState (line 41) | public restoreElementTabState(_el: Element) {
method makeElementUntabbable (line 43) | public makeElementUntabbable(_el: Element) {
method isRtl (line 45) | public isRtl(): boolean {
class DrawerAdapter (line 54) | class DrawerAdapter {
method registerDrawerInteractionHandler (line 55) | public registerDrawerInteractionHandler(_evt: string, _handler: EventL...
method deregisterDrawerInteractionHandler (line 57) | public deregisterDrawerInteractionHandler(_evt: string, _handler: Even...
method getDrawerWidth (line 59) | public getDrawerWidth(): number {
method setTranslateX (line 62) | public setTranslateX(_value: number) {
method isDrawer (line 64) | public isDrawer(_el: Element): boolean {
method getFocusableElements (line 67) | public getFocusableElements(): NodeListOf<Element> {
method hasNecessaryDom (line 70) | public hasNecessaryDom(): boolean {
class FoundationAdapter (line 78) | class FoundationAdapter {
method constructor (line 82) | constructor() {
method setContainerAdapter (line 86) | public setContainerAdapter(containerAdapter: ContainerAdapter) {
method setDrawerAdapter (line 89) | public setDrawerAdapter(drawerAdapter: DrawerAdapter) {
method addClass (line 92) | public addClass(className: string) {
method removeClass (line 95) | public removeClass(className: string) {
method hasClass (line 98) | public hasClass(className: string): boolean {
method registerInteractionHandler (line 101) | public registerInteractionHandler(evt: string, handler: EventListener) {
method deregisterInteractionHandler (line 104) | public deregisterInteractionHandler(evt: string, handler: EventListene...
method registerTransitionEndHandler (line 107) | public registerTransitionEndHandler(handler: EventListener) {
method deregisterTransitionEndHandler (line 110) | public deregisterTransitionEndHandler(handler: EventListener) {
method registerDocumentKeydownHandler (line 113) | public registerDocumentKeydownHandler(handler: EventListener) {
method deregisterDocumentKeydownHandler (line 116) | public deregisterDocumentKeydownHandler(handler: EventListener) {
method updateCssVariable (line 119) | public updateCssVariable(value: string) {
method saveElementTabState (line 122) | public saveElementTabState(el: Element) {
method restoreElementTabState (line 125) | public restoreElementTabState(el: Element) {
method makeElementUntabbable (line 128) | public makeElementUntabbable(el: Element) {
method isRtl (line 131) | public isRtl(): boolean {
method registerDrawerInteractionHandler (line 134) | public registerDrawerInteractionHandler(evt: string, handler: EventLis...
method deregisterDrawerInteractionHandler (line 137) | public deregisterDrawerInteractionHandler(evt: string, handler: EventL...
method getDrawerWidth (line 140) | public getDrawerWidth(): number {
method setTranslateX (line 143) | public setTranslateX(value: number) {
method isDrawer (line 146) | public isDrawer(el: Element): boolean {
method getFocusableElements (line 149) | public getFocusableElements(): NodeListOf<Element> {
method hasNecessaryDom (line 152) | public hasNecessaryDom(): boolean {
method toObject (line 160) | public toObject(): {} {
FILE: packages/drawer/src/Temporary/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-temporary-drawer";
constant SELECTED_CLASS_NAME (line 2) | const SELECTED_CLASS_NAME = `${BASE_CLASS_NAME}--selected`;
FILE: packages/drawer/src/Temporary/drawerUtil.ts
constant TAB_DATA (line 18) | const TAB_DATA = "data-mdc-tabindex";
constant TAB_DATA_HANDLED (line 19) | const TAB_DATA_HANDLED = "data-mdc-tabindex-handled";
function remapEvent (line 25) | function remapEvent(eventName, globalObj = window) {
function getTransformPropertyName (line 43) | function getTransformPropertyName(globalObj = window, forceRefresh = fal...
function supportsCssCustomProperties (line 54) | function supportsCssCustomProperties(globalObj: any = window) {
function applyPassive (line 62) | function applyPassive(globalObj: any = window, forceRefresh = false) {
function saveElementTabState (line 78) | function saveElementTabState(el) {
function restoreElementTabState (line 86) | function restoreElementTabState(el) {
FILE: packages/drawer/src/Temporary/index.ts
class Temporary (line 8) | class Temporary extends Container {
FILE: packages/elevation/src/Elevation.tsx
type MetaProps (line 16) | type MetaProps = {
type ChildProps (line 22) | type ChildProps = {
class Meta (line 30) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 31) | protected renderBaseClassName(_c) {
method renderClassValues (line 35) | protected renderClassValues(_c: ChildProps) {
class Elevation (line 42) | class Elevation extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 45) | protected getMetaComponent() {
method getMetaPropNames (line 49) | protected getMetaPropNames() {
method getChildComponent (line 57) | protected getChildComponent() {
FILE: packages/elevation/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-elevation";
FILE: packages/elevation/src/types.ts
type ZSpace (line 1) | type ZSpace =
FILE: packages/elevation/src/utils.ts
function classNameForZSpace (line 4) | function classNameForZSpace(zSpace: ZSpace): string {
FILE: packages/fab/src/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 19) | type MetaProps = {
type ChildProps (line 25) | type ChildProps = {
class Meta (line 32) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 33) | protected renderBaseClassName() {
method renderClassValues (line 37) | protected renderClassValues() {
class Container (line 45) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLButtonE...
method getMetaComponent (line 48) | protected getMetaComponent() {
method getMetaPropNames (line 52) | protected getMetaPropNames() {
method getChildComponent (line 60) | protected getChildComponent() {
FILE: packages/fab/src/Icon.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__icon`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
class Icon (line 31) | class Icon extends DefaultComponentBase<React.HTMLProps<HTMLSpanElement>...
method getMetaComponent (line 34) | protected getMetaComponent() {
method getMetaPropNames (line 38) | protected getMetaPropNames() {
method getChildComponent (line 44) | protected getChildComponent() {
FILE: packages/fab/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-fab";
FILE: packages/fab/src/index.ts
class FAB (line 4) | class FAB extends Container {
FILE: packages/form-field/src/FormField.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 16) | type MetaProps = {
type ChildProps (line 21) | type ChildProps = {
class Meta (line 28) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 29) | protected renderBaseClassName() {
method renderClassValues (line 33) | protected renderClassValues() {
class FormField (line 40) | class FormField extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 43) | protected getMetaComponent() {
method getMetaPropNames (line 47) | protected getMetaPropNames() {
method getChildComponent (line 54) | protected getChildComponent() {
FILE: packages/form-field/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-form-field";
FILE: packages/layout-grid/src/Cell.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = CELL_BASE_CLASS_NAME;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 24) | type ChildProps = {
class Meta (line 31) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 32) | protected renderBaseClassName() {
method renderClassValues (line 36) | protected renderClassValues() {
class Cell (line 69) | class Cell extends DefaultComponentBase<React.HTMLProps<HTMLDivElement>,...
method getMetaComponent (line 72) | protected getMetaComponent() {
method getMetaPropNames (line 75) | protected getMetaPropNames() {
method getChildComponent (line 86) | protected getChildComponent() {
FILE: packages/layout-grid/src/Container.tsx
constant CLASS_NAME (line 16) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 18) | type MetaProps = {
type ChildProps (line 24) | type ChildProps = {
class Meta (line 31) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderNativeDOMProps (line 32) | protected renderNativeDOMProps() {
method renderBaseClassName (line 43) | protected renderBaseClassName() {
class Container (line 48) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 51) | protected getMetaComponent() {
method getMetaPropNames (line 54) | protected getMetaPropNames() {
method getChildComponent (line 61) | protected getChildComponent() {
FILE: packages/layout-grid/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-layout-grid";
constant CELL_BASE_CLASS_NAME (line 2) | const CELL_BASE_CLASS_NAME = `${BASE_CLASS_NAME}__cell`;
constant MARGIN_CSS_VARIABLE (line 4) | const MARGIN_CSS_VARIABLE = "--mdc-layout-grid-margin";
constant GUTTER_CSS_VARIABLE (line 5) | const GUTTER_CSS_VARIABLE = "--mdc-layout-grid-gutter";
FILE: packages/layout-grid/src/index.ts
class LayoutGrid (line 4) | class LayoutGrid extends Container {
FILE: packages/layout-grid/src/types.ts
type GridNumber (line 1) | type GridNumber =
type Screen (line 6) | type Screen =
type Alignment (line 11) | type Alignment =
type Margin (line 16) | type Margin = number | string;
type Gutter (line 18) | type Gutter = number | string;
FILE: packages/layout-grid/src/utils.ts
function classNameForCellSpan (line 4) | function classNameForCellSpan(span: GridNumber, screen: Screen | null = ...
function classNameForCellOrder (line 13) | function classNameForCellOrder(order: GridNumber): string {
function classNameForCellAlignment (line 17) | function classNameForCellAlignment(alignment: Alignment): string {
function normalizeMarginAndGutter (line 21) | function normalizeMarginAndGutter(value: Margin | Gutter): string {
FILE: packages/list/src/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 20) | type MetaProps = {
type ChildProps (line 27) | type ChildProps = {
class Meta (line 34) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 35) | protected renderBaseClassName() {
method renderClassValues (line 39) | protected renderClassValues() {
class Container (line 48) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLUListEl...
method getMetaComponent (line 51) | protected getMetaComponent() {
method getMetaPropNames (line 55) | protected getMetaPropNames() {
method getChildComponent (line 64) | protected getChildComponent() {
FILE: packages/list/src/Divider.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}-divider`;
type MetaProps (line 18) | type MetaProps = {
type ChildProps (line 23) | type ChildProps = {
class Meta (line 29) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 30) | protected renderBaseClassName() {
method renderClassValues (line 34) | protected renderClassValues() {
function SeparatorLi (line 42) | function SeparatorLi(props: React.HTMLProps<HTMLLIElement>) {
class Divider (line 46) | class Divider extends DefaultComponentBase<React.HTMLProps<HTMLLIElement...
method getMetaComponent (line 49) | protected getMetaComponent() {
method getMetaPropNames (line 53) | protected getMetaPropNames() {
method getChildComponent (line 60) | protected getChildComponent(): React.SFC<React.HTMLProps<HTMLLIElement...
FILE: packages/list/src/Group/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Container (line 28) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/list/src/Group/Subheader.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__subheader`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Subheader (line 28) | class Subheader extends DefaultComponentBase<React.HTMLProps<HTMLHeading...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/list/src/Group/constants.ts
constant BASE_CLASS_NAME (line 3) | const BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}-group`;
FILE: packages/list/src/Group/index.ts
class Group (line 4) | class Group extends Container {
FILE: packages/list/src/Item/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Container (line 28) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLLIEleme...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/list/src/Item/EndDetail.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__end-detail`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class EndDetail (line 28) | class EndDetail extends DefaultComponentBase<React.HTMLProps<HTMLSpanEle...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/list/src/Item/StartDetail.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__start-detail`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class StartDetail (line 28) | class StartDetail extends DefaultComponentBase<React.HTMLProps<HTMLSpanE...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/list/src/Item/constants.ts
constant BASE_CLASS_NAME (line 3) | const BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}-item`;
FILE: packages/list/src/Item/index.ts
class Item (line 5) | class Item extends Container {
FILE: packages/list/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-list";
FILE: packages/list/src/index.ts
class List (line 6) | class List extends Container {
FILE: packages/radio/src/Background.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__background`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 26) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 27) | protected renderBaseClassName() {
class Background (line 32) | class Background extends DefaultComponentBase<React.HTMLProps<HTMLDivEle...
method getMetaComponent (line 35) | protected getMetaComponent() {
method getMetaPropNames (line 39) | protected getMetaPropNames() {
method getChildComponent (line 45) | protected getChildComponent() {
FILE: packages/radio/src/Container.tsx
constant CLASS_NAME (line 18) | const CLASS_NAME = BASE_CLASS_NAME;
type ChildProps (line 20) | type ChildProps = {
type MetaProps (line 24) | type MetaProps = {
type State (line 30) | type State = {
type ChildContext (line 34) | type ChildContext = {
class Meta (line 41) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method constructor (line 53) | constructor(props) {
method getChildContext (line 59) | public getChildContext(): ChildContext {
method componentDidMount (line 66) | public componentDidMount() {
method componentWillUnmount (line 78) | public componentWillUnmount() {
method componentWillReceiveProps (line 84) | public componentWillReceiveProps(props) {
method renderBaseClassName (line 88) | protected renderBaseClassName() {
method renderClassValues (line 92) | protected renderClassValues() {
method syncFoundation (line 96) | private syncFoundation(props: MetaProps) {
class ContainerAdapterImpl (line 116) | class ContainerAdapterImpl extends ContainerAdapter {
method constructor (line 119) | constructor(element: Meta) {
method addClass (line 123) | public addClass(className: string) {
method removeClass (line 128) | public removeClass(className: string) {
method isChecked (line 133) | public isChecked(): boolean | null {
class Container (line 138) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 141) | protected getMetaComponent() {
method getMetaPropNames (line 145) | protected getMetaPropNames() {
method getChildComponent (line 153) | protected getChildComponent() {
FILE: packages/radio/src/Default.tsx
type Props (line 9) | type Props = {
class Default (line 22) | class Default extends React.Component<Props, {}> {
method render (line 23) | public render() {
FILE: packages/radio/src/InnerCircle.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__inner-circle`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class InnerCircle (line 28) | class InnerCircle extends DefaultComponentBase<React.HTMLProps<HTMLDivEl...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/radio/src/NativeControl.tsx
constant CLASS_NAME (line 15) | const CLASS_NAME = `${BASE_CLASS_NAME}__native-control`;
type ChangeEventHandler (line 23) | type ChangeEventHandler = React.FormEventHandler<ChildProps>;
type MetaProps (line 25) | type MetaProps = {
type ChildProps (line 30) | type ChildProps = {
type Context (line 36) | type Context = {
class Meta (line 43) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method componentDidMount (line 51) | public componentDidMount() {
method componentWillUnmount (line 55) | public componentWillUnmount() {
method renderBaseClassName (line 59) | protected renderBaseClassName() {
method renderProps (line 63) | protected renderProps(childProps: ChildProps) {
class NativeControlAdapterImpl (line 79) | class NativeControlAdapterImpl extends NativeControlAdapter<ChildProps> {
method constructor (line 82) | constructor(element: Meta) {
method getNativeControl (line 86) | public getNativeControl(): Element | null {
method setDefaultOnChangeHandler (line 89) | public setDefaultOnChangeHandler(onChange: React.ChangeEventHandler<Ch...
function RadioInput (line 95) | function RadioInput(props: React.HTMLProps<HTMLInputElement>) {
class NativeControl (line 101) | class NativeControl extends DefaultComponentBase<React.HTMLProps<HTMLInp...
method getMetaComponent (line 104) | protected getMetaComponent() {
method getMetaPropNames (line 108) | protected getMetaPropNames() {
method getChildComponent (line 115) | protected getChildComponent(): React.SFC<React.HTMLProps<HTMLInputElem...
FILE: packages/radio/src/OuterCircle.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__outer-circle`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class OuterCircle (line 28) | class OuterCircle extends DefaultComponentBase<React.HTMLProps<HTMLDivEl...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/radio/src/adapter.ts
class ContainerAdapter (line 9) | class ContainerAdapter {
method addClass (line 10) | public addClass(_className: string) {
method removeClass (line 12) | public removeClass(_className: string) {
method isChecked (line 14) | public isChecked(): boolean | null {
class NativeControlAdapter (line 23) | class NativeControlAdapter<ChildProps> {
method getNativeControl (line 24) | public getNativeControl(): Element | null {
method setDefaultOnChangeHandler (line 27) | public setDefaultOnChangeHandler(_onChange: React.ChangeEventHandler<C...
class FoundationAdapter (line 34) | class FoundationAdapter<ChildProps> {
method constructor (line 39) | constructor() {
method setContainerAdapter (line 45) | public setContainerAdapter(containerAdapter: ContainerAdapter) {
method setNativeControlAdapter (line 48) | public setNativeControlAdapter(nativeControlAdapter: NativeControlAdap...
method addClass (line 52) | public addClass(className: string) {
method removeClass (line 55) | public removeClass(className: string) {
method getNativeControl (line 58) | public getNativeControl(): Element | null {
method setDefaultOnChangeHandler (line 62) | public setDefaultOnChangeHandler(onChange: React.ChangeEventHandler<Ch...
method isChecked (line 65) | public isChecked(): boolean | null {
method toObject (line 72) | public toObject(): {} {
FILE: packages/radio/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-radio";
FILE: packages/radio/src/index.ts
class Radio (line 8) | class Radio extends Container {
FILE: packages/ripple/src/Ripple.tsx
constant MATCHES (line 28) | const MATCHES = getMatchesProperty(HTMLElement.prototype);
constant CLASS_NAME (line 30) | const CLASS_NAME = SURFACE_BASE_CLASS_NAME;
type MetaProps (line 32) | type MetaProps = {
type ChildProps (line 38) | type ChildProps = {
type State (line 42) | type State = {
class Meta (line 51) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method constructor (line 65) | constructor(props) {
method activate (line 72) | public activate() {
method deactivate (line 76) | public deactivate() {
method getDOMNode (line 80) | public getDOMNode(): Element {
method componentDidMount (line 85) | public componentDidMount() {
method componentWillUnmount (line 90) | public componentWillUnmount() {
method renderNativeDOMProps (line 94) | protected renderNativeDOMProps() {
method renderBaseClassName (line 101) | protected renderBaseClassName() {
method renderClassValues (line 105) | protected renderClassValues() {
class RippleAdapterImpl (line 117) | class RippleAdapterImpl extends RippleAdapter {
method constructor (line 120) | constructor(element: Meta) {
method browserSupportsCssVars (line 124) | public browserSupportsCssVars(): boolean {
method isUnbounded (line 127) | public isUnbounded(): boolean {
method isSurfaceActive (line 130) | public isSurfaceActive(): boolean {
method addClass (line 133) | public addClass(className: string) {
method removeClass (line 138) | public removeClass(className: string) {
method registerInteractionHandler (line 143) | public registerInteractionHandler(evtType: string, handler: EventListe...
method deregisterInteractionHandler (line 152) | public deregisterInteractionHandler(evtType: string, handler: EventLis...
method registerResizeHandler (line 161) | public registerResizeHandler(handler: EventListener) {
method deregisterResizeHandler (line 164) | public deregisterResizeHandler(handler: EventListener) {
method updateCssVariable (line 167) | public updateCssVariable(varName: string, value: string | null) {
method computeBoundingRect (line 178) | public computeBoundingRect(): ClientRect | null {
method getWindowPageOffset (line 181) | public getWindowPageOffset(): { x: number, y: number } {
class Ripple (line 186) | class Ripple extends DefaultComponentBase<React.HTMLProps<HTMLDivElement...
method getMetaComponent (line 189) | protected getMetaComponent() {
method getMetaPropNames (line 193) | protected getMetaPropNames() {
method getChildComponent (line 201) | protected getChildComponent() {
FILE: packages/ripple/src/adapter.ts
class RippleAdapter (line 9) | class RippleAdapter {
method browserSupportsCssVars (line 10) | public browserSupportsCssVars(): boolean {
method isUnbounded (line 13) | public isUnbounded(): boolean {
method isSurfaceActive (line 16) | public isSurfaceActive(): boolean {
method addClass (line 19) | public addClass(_className: string) {
method removeClass (line 21) | public removeClass(_className: string) {
method registerInteractionHandler (line 23) | public registerInteractionHandler(_evtType: string, _handler: EventLis...
method deregisterInteractionHandler (line 25) | public deregisterInteractionHandler(_evtType: string, _handler: EventL...
method registerResizeHandler (line 27) | public registerResizeHandler(_handler: EventListener) {
method deregisterResizeHandler (line 29) | public deregisterResizeHandler(_handler: EventListener) {
method updateCssVariable (line 31) | public updateCssVariable(_varName: string, _value: string | null) {
method computeBoundingRect (line 33) | public computeBoundingRect(): ClientRect | null {
method getWindowPageOffset (line 36) | public getWindowPageOffset(): { x: number, y: number } {
class FoundationAdapter (line 44) | class FoundationAdapter {
method constructor (line 47) | constructor() {
method setRippleAdapter (line 50) | public setRippleAdapter(rippleAdapter: RippleAdapter) {
method browserSupportsCssVars (line 53) | public browserSupportsCssVars(): boolean {
method isUnbounded (line 56) | public isUnbounded(): boolean {
method isSurfaceActive (line 59) | public isSurfaceActive(): boolean {
method addClass (line 62) | public addClass(className: string) {
method removeClass (line 65) | public removeClass(className: string) {
method registerInteractionHandler (line 68) | public registerInteractionHandler(evtType: string, handler: EventListe...
method deregisterInteractionHandler (line 71) | public deregisterInteractionHandler(evtType: string, handler: EventLis...
method registerResizeHandler (line 74) | public registerResizeHandler(handler: EventListener) {
method deregisterResizeHandler (line 77) | public deregisterResizeHandler(handler: EventListener) {
method updateCssVariable (line 80) | public updateCssVariable(varName: string, value: string | null) {
method computeBoundingRect (line 83) | public computeBoundingRect(): ClientRect | null {
method getWindowPageOffset (line 86) | public getWindowPageOffset(): { x: number, y: number } {
method toObject (line 93) | public toObject() {
FILE: packages/ripple/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-ripple";
constant SURFACE_BASE_CLASS_NAME (line 2) | const SURFACE_BASE_CLASS_NAME = `${BASE_CLASS_NAME}-surface`;
FILE: packages/ripple/src/rippleUtil.ts
function supportsCssVariables (line 19) | function supportsCssVariables(windowObj: any): boolean {
function getMatchesProperty (line 35) | function getMatchesProperty(htmlElementPrototype: any): string {
FILE: packages/ripple/src/types.ts
type Color (line 1) | type Color = "primary" | "accent";
FILE: packages/ripple/src/utils.ts
function classNameForColor (line 4) | function classNameForColor(color: Color): string {
FILE: packages/switch/src/Background.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__background`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Background (line 28) | class Background extends DefaultComponentBase<React.HTMLProps<HTMLDivEle...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/switch/src/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 19) | type MetaProps = {
type ChildProps (line 24) | type ChildProps = {
class Meta (line 31) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 32) | protected renderBaseClassName() {
method renderClassValues (line 36) | protected renderClassValues() {
class Container (line 43) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 46) | protected getMetaComponent() {
method getMetaPropNames (line 50) | protected getMetaPropNames() {
method getChildComponent (line 57) | protected getChildComponent() {
FILE: packages/switch/src/Default.tsx
type Props (line 8) | type Props = {
class Default (line 21) | class Default extends React.Component<Props, {}> {
method render (line 24) | public render() {
FILE: packages/switch/src/Knob.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__knob`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Knob (line 28) | class Knob extends DefaultComponentBase<React.HTMLProps<HTMLDivElement>,...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/switch/src/Label.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}-label`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 22) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 23) | protected renderBaseClassName() {
class Label (line 28) | class Label extends DefaultComponentBase<React.HTMLProps<HTMLLabelElemen...
method getMetaComponent (line 31) | protected getMetaComponent() {
method getMetaPropNames (line 35) | protected getMetaPropNames() {
method getChildComponent (line 41) | protected getChildComponent() {
FILE: packages/switch/src/NativeControl.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = `${BASE_CLASS_NAME}__native-control`;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 18) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
function CheckboxInput (line 32) | function CheckboxInput(props: React.HTMLProps<HTMLInputElement>) {
type Props (line 38) | type Props = React.HTMLProps<HTMLInputElement> & MetaProps;
class NativeControl (line 40) | class NativeControl extends DefaultComponentBase<React.HTMLProps<HTMLInp...
method getMetaComponent (line 43) | protected getMetaComponent() {
method getMetaPropNames (line 47) | protected getMetaPropNames() {
method getChildComponent (line 53) | protected getChildComponent(): React.SFC<React.HTMLProps<HTMLInputElem...
FILE: packages/switch/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-switch";
FILE: packages/switch/src/index.ts
class Switch (line 8) | class Switch extends Container {
FILE: packages/textfield/src/Container.tsx
constant CLASS_NAME (line 18) | const CLASS_NAME = BASE_CLASS_NAME;
type ChildProps (line 26) | type ChildProps = {
type MetaProps (line 30) | type MetaProps = {
type State (line 37) | type State = {
type ChildContext (line 41) | type ChildContext = {
class Meta (line 48) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method constructor (line 60) | constructor(props) {
method componentDidMount (line 67) | public componentDidMount() {
method componentWillUnmount (line 72) | public componentWillUnmount() {
method getChildContext (line 77) | public getChildContext(): ChildContext {
method renderBaseClassName (line 83) | protected renderBaseClassName() {
method renderClassValues (line 87) | protected renderClassValues() {
class ContainerAdapterImpl (line 95) | class ContainerAdapterImpl extends ContainerAdapter {
method constructor (line 98) | constructor(element: Meta) {
method addClass (line 102) | public addClass(className: string) {
method removeClass (line 107) | public removeClass(className: string) {
class Container (line 114) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 117) | protected getMetaComponent() {
method getMetaPropNames (line 121) | protected getMetaPropNames() {
method getChildComponent (line 129) | protected getChildComponent() {
FILE: packages/textfield/src/Default.tsx
type ContainerProps (line 18) | type ContainerProps = any;
type InputProps (line 19) | type InputProps = any;
type TextFieldInternalProps (line 21) | type TextFieldInternalProps = {
class TextFieldInternal (line 29) | class TextFieldInternal extends React.Component<TextFieldInternalProps, ...
method render (line 30) | public render() {
type Props (line 44) | type Props = ContainerProps & {
class Default (line 56) | class Default extends React.Component<Props, {}> {
method render (line 57) | public render() {
FILE: packages/textfield/src/Input.tsx
constant CLASS_NAME (line 19) | const CLASS_NAME = `${BASE_CLASS_NAME}__input`;
type ChildProps (line 21) | type ChildProps = {
type MetaProps (line 25) | type MetaProps = {
type State (line 29) | type State = {
type Context (line 33) | type Context = {
class Meta (line 40) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method componentDidMount (line 51) | public componentDidMount() {
method componentWillUnmount (line 55) | public componentWillUnmount() {
method renderNativeDOMProps (line 59) | protected renderNativeDOMProps() {
method renderBaseClassName (line 65) | protected renderBaseClassName() {
class InputAdapterImpl (line 70) | class InputAdapterImpl extends InputAdapter {
method constructor (line 73) | constructor(element: Meta) {
method registerInputFocusHandler (line 78) | public registerInputFocusHandler(handler: EventListener) {
method deregisterInputFocusHandler (line 81) | public deregisterInputFocusHandler(handler: EventListener) {
method registerInputBlurHandler (line 84) | public registerInputBlurHandler(handler: EventListener) {
method deregisterInputBlurHandler (line 87) | public deregisterInputBlurHandler(handler: EventListener) {
method registerInputInputHandler (line 90) | public registerInputInputHandler(handler: EventListener) {
method deregisterInputInputHandler (line 93) | public deregisterInputInputHandler(handler: EventListener) {
method registerInputKeydownHandler (line 96) | public registerInputKeydownHandler(handler: EventListener) {
method deregisterInputKeydownHandler (line 99) | public deregisterInputKeydownHandler(handler: EventListener) {
method getNativeInput (line 102) | public getNativeInput(): { value: string, disabled: boolean, checkVali...
method registerInputHandler (line 106) | private registerInputHandler(evt: string, handler: EventListener) {
method deregisterInputHandler (line 116) | private deregisterInputHandler(evt: string, handler: EventListener) {
function TextInput (line 128) | function TextInput(props: React.HTMLProps<HTMLInputElement>) {
class Input (line 134) | class Input extends DefaultComponentBase<React.HTMLProps<HTMLInputElemen...
method getMetaComponent (line 137) | protected getMetaComponent() {
method getMetaPropNames (line 141) | protected getMetaPropNames() {
method getChildComponent (line 147) | protected getChildComponent(): React.SFC<React.HTMLProps<HTMLInputElem...
FILE: packages/textfield/src/Label.tsx
constant CLASS_NAME (line 17) | const CLASS_NAME = `${BASE_CLASS_NAME}__label`;
type MetaProps (line 19) | type MetaProps = {};
type ChildProps (line 21) | type ChildProps = {
type State (line 25) | type State = {
type Context (line 29) | type Context = {
class Meta (line 36) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, State> {
method componentDidMount (line 47) | public componentDidMount() {
method componentWillUnmount (line 51) | public componentWillUnmount() {
method renderBaseClassName (line 54) | protected renderBaseClassName() {
method renderClassValues (line 58) | protected renderClassValues() {
class LabelAdapterImpl (line 63) | class LabelAdapterImpl extends LabelAdapter {
method constructor (line 66) | constructor(element: Meta) {
method addClassToLabel (line 71) | public addClassToLabel(className: string) {
method removeClassFromLabel (line 76) | public removeClassFromLabel(className: string) {
class Label (line 83) | class Label extends DefaultComponentBase<React.HTMLProps<HTMLLabelElemen...
method getMetaComponent (line 86) | protected getMetaComponent() {
method getMetaPropNames (line 90) | protected getMetaPropNames() {
method getChildComponent (line 96) | protected getChildComponent() {
FILE: packages/textfield/src/adapter.ts
class ContainerAdapter (line 9) | class ContainerAdapter {
method addClass (line 10) | public addClass(_className: string) { }
method removeClass (line 11) | public removeClass(_className: string) { }
class InputAdapter (line 18) | class InputAdapter {
method registerInputFocusHandler (line 19) | public registerInputFocusHandler(_handler: EventListener) { }
method deregisterInputFocusHandler (line 20) | public deregisterInputFocusHandler(_handler: EventListener) { }
method registerInputBlurHandler (line 21) | public registerInputBlurHandler(_handler: EventListener) { }
method deregisterInputBlurHandler (line 22) | public deregisterInputBlurHandler(_handler: EventListener) { }
method registerInputInputHandler (line 23) | public registerInputInputHandler(_handler: EventListener) { }
method deregisterInputInputHandler (line 24) | public deregisterInputInputHandler(_handler: EventListener) { }
method registerInputKeydownHandler (line 25) | public registerInputKeydownHandler(_handler: EventListener) { }
method deregisterInputKeydownHandler (line 26) | public deregisterInputKeydownHandler(_handler: EventListener) { }
method getNativeInput (line 27) | public getNativeInput(): { value: string, disabled: boolean, checkVali...
class LabelAdapter (line 36) | class LabelAdapter {
method addClassToLabel (line 37) | public addClassToLabel(_className: string) { }
method removeClassFromLabel (line 38) | public removeClassFromLabel(_className: string) { }
class HelptextAdapter (line 45) | class HelptextAdapter {
method addClassToHelptext (line 46) | public addClassToHelptext(_className: string) { }
method removeClassFromHelptext (line 47) | public removeClassFromHelptext(_className: string) { }
method helptextHasClass (line 48) | public helptextHasClass(_className: string): boolean {
method setHelptextAttr (line 51) | public setHelptextAttr(_name: string, _value: string) { }
method removeHelptextAttr (line 52) | public removeHelptextAttr(_name: string) { }
class FoundationAdapter (line 58) | class FoundationAdapter {
method constructor (line 64) | constructor() {
method setContainerAdapter (line 70) | public setContainerAdapter(containerAdapter: ContainerAdapter) {
method setInputAdapter (line 73) | public setInputAdapter(inputAdapter: InputAdapter) {
method setLabelAdapter (line 76) | public setLabelAdapter(labelAdapter: LabelAdapter) {
method setHelptextAdapter (line 79) | public setHelptextAdapter(helptextAdapter: HelptextAdapter) {
method addClass (line 84) | public addClass(className: string) {
method removeClass (line 87) | public removeClass(className: string) {
method addClassToLabel (line 91) | public addClassToLabel(className: string) {
method removeClassFromLabel (line 94) | public removeClassFromLabel(className: string) {
method addClassToHelptext (line 98) | public addClassToHelptext(className: string) {
method removeClassFromHelptext (line 101) | public removeClassFromHelptext(className: string) {
method helptextHasClass (line 104) | public helptextHasClass(className: string): boolean {
method setHelptextAttr (line 107) | public setHelptextAttr(name: string, value: string) {
method removeHelptextAttr (line 110) | public removeHelptextAttr(name: string) {
method registerInputFocusHandler (line 115) | public registerInputFocusHandler(handler: EventListener) {
method deregisterInputFocusHandler (line 118) | public deregisterInputFocusHandler(handler: EventListener) {
method registerInputBlurHandler (line 121) | public registerInputBlurHandler(handler: EventListener) {
method deregisterInputBlurHandler (line 124) | public deregisterInputBlurHandler(handler: EventListener) {
method registerInputInputHandler (line 127) | public registerInputInputHandler(handler: EventListener) {
method deregisterInputInputHandler (line 130) | public deregisterInputInputHandler(handler: EventListener) {
method registerInputKeydownHandler (line 133) | public registerInputKeydownHandler(handler: EventListener) {
method deregisterInputKeydownHandler (line 136) | public deregisterInputKeydownHandler(handler: EventListener) {
method getNativeInput (line 139) | public getNativeInput(): { value: string, disabled: boolean, checkVali...
method toObject (line 146) | public toObject(): {} {
FILE: packages/textfield/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-textfield";
FILE: packages/textfield/src/index.ts
class Textfield (line 6) | class Textfield extends Container {
FILE: packages/theme/src/Theme.tsx
type ChildProps (line 11) | type ChildProps = {
type MetaProps (line 15) | type MetaProps = {
class Meta (line 23) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 24) | protected renderBaseClassName() {
method renderClassValues (line 28) | protected renderClassValues() {
class Theme (line 51) | class Theme extends DefaultComponentBase<React.HTMLProps<HTMLDivElement>...
method getMetaComponent (line 54) | protected getMetaComponent() {
method getMetaPropNames (line 58) | protected getMetaPropNames() {
method getChildComponent (line 68) | protected getChildComponent() {
FILE: packages/theme/src/constants.ts
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-theme";
FILE: packages/theme/src/types.ts
type Color (line 2) | type Color =
type BackgroundColor (line 9) | type BackgroundColor =
type TextColor (line 15) | type TextColor =
type OnColor (line 23) | type OnColor =
FILE: packages/theme/src/utils.ts
function classNameForTextColor (line 9) | function classNameForTextColor(textColor: TextColor, onColor: OnColor): ...
function classNameForColor (line 13) | function classNameForColor(color: Color): string {
function classNameForBackground (line 17) | function classNameForBackground(backgroundColor: BackgroundColor): string {
FILE: packages/toolbar/src/Container.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 18) | type MetaProps = {
type ChildProps (line 23) | type ChildProps = {
class Meta (line 30) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 31) | protected renderBaseClassName() {
method renderClassValues (line 35) | protected renderClassValues() {
class Container (line 42) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLElement...
method getMetaComponent (line 45) | protected getMetaComponent() {
method getMetaPropNames (line 49) | protected getMetaPropNames() {
method getChildComponent (line 56) | protected getChildComponent() {
FILE: packages/toolbar/src/FixedToolbarAdjusted.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = `${BASE_CLASS_NAME}-fixed-adjust`;
type MetaProps (line 12) | type MetaProps = {
type ChildProps (line 16) | type ChildProps = {
class Meta (line 23) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 24) | protected renderBaseClassName() {
class FixedToolbarAdjusted (line 29) | class FixedToolbarAdjusted extends DefaultComponentBase<React.HTMLProps<...
method getMetaComponent (line 32) | protected getMetaComponent() {
method getMetaPropNames (line 36) | protected getMetaPropNames() {
method getChildComponent (line 42) | protected getChildComponent() {
FILE: packages/toolbar/src/Icon.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = `${BASE_CLASS_NAME}__icon`;
type MetaProps (line 16) | type MetaProps = {
type ChildProps (line 21) | type ChildProps = {
class Meta (line 25) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 26) | protected renderBaseClassName() {
method renderClassValues (line 30) | protected renderClassValues() {
class Icon (line 37) | class Icon extends DefaultComponentBase<React.HTMLProps<HTMLDivElement>,...
method getMetaComponent (line 40) | protected getMetaComponent() {
method getMetaPropNames (line 44) | protected getMetaPropNames() {
method getChildComponent (line 50) | protected getChildComponent() {
FILE: packages/toolbar/src/Row.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = `${BASE_CLASS_NAME}__row`;
type MetaProps (line 12) | type MetaProps = {
type ChildProps (line 16) | type ChildProps = {
class Meta (line 20) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 21) | protected renderBaseClassName() {
class Row (line 26) | class Row extends DefaultComponentBase<React.HTMLProps<HTMLDivElement>, ...
method getMetaComponent (line 29) | protected getMetaComponent() {
method getMetaPropNames (line 33) | protected getMetaPropNames() {
method getChildComponent (line 39) | protected getChildComponent() {
FILE: packages/toolbar/src/Section.tsx
constant CLASS_NAME (line 12) | const CLASS_NAME = SECTION_BASE_CLASS_NAME;
type MetaProps (line 14) | type MetaProps = {
type ChildProps (line 19) | type ChildProps = {
class Meta (line 26) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 27) | protected renderBaseClassName() {
method renderClassValues (line 31) | protected renderClassValues() {
class Section (line 43) | class Section extends DefaultComponentBase<React.HTMLProps<HTMLElement>,...
method getMetaComponent (line 46) | protected getMetaComponent() {
method getMetaPropNames (line 50) | protected getMetaPropNames() {
method getChildComponent (line 57) | protected getChildComponent() {
FILE: packages/toolbar/src/Title.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = `${BASE_CLASS_NAME}__title`;
type MetaProps (line 12) | type MetaProps = {
type ChildProps (line 16) | type ChildProps = {
class Meta (line 20) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 21) | protected renderBaseClassName() {
class Title (line 26) | class Title extends DefaultComponentBase<React.HTMLProps<HTMLSpanElement...
method getMetaComponent (line 29) | protected getMetaComponent() {
method getMetaPropNames (line 33) | protected getMetaPropNames() {
method getChildComponent (line 39) | protected getChildComponent() {
FILE: packages/toolbar/src/constants.tsx
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-toolbar";
constant SECTION_BASE_CLASS_NAME (line 2) | const SECTION_BASE_CLASS_NAME = `${BASE_CLASS_NAME}__section`;
FILE: packages/toolbar/src/index.ts
class Toolbar (line 8) | class Toolbar extends Container {
FILE: packages/toolbar/src/types.tsx
type Alignment (line 1) | type Alignment =
FILE: packages/toolbar/src/utils.tsx
function classNameForSectionAlignment (line 4) | function classNameForSectionAlignment(alignment: Alignment): string {
FILE: packages/typography/src/Container.tsx
constant CLASS_NAME (line 10) | const CLASS_NAME = BASE_CLASS_NAME;
type MetaProps (line 12) | type MetaProps = {
type ChildProps (line 16) | type ChildProps = {
class Meta (line 20) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 21) | protected renderBaseClassName() {
class Container (line 26) | class Container extends DefaultComponentBase<React.HTMLProps<HTMLDivElem...
method getMetaComponent (line 29) | protected getMetaComponent() {
method getMetaPropNames (line 33) | protected getMetaPropNames() {
method getChildComponent (line 39) | protected getChildComponent() {
FILE: packages/typography/src/Text.tsx
type BaseMetaProps (line 16) | type BaseMetaProps = {
type MetaProps (line 20) | type MetaProps = BaseMetaProps & {
type ChildProps (line 24) | type ChildProps = {
class Meta (line 31) | class Meta extends ClassNameMetaBase<ChildProps, MetaProps, {}> {
method renderBaseClassName (line 36) | protected renderBaseClassName() {
method renderClassValues (line 40) | protected renderClassValues() {
class Text (line 47) | class Text extends DefaultComponentBase<React.HTMLProps<HTMLElement>, Me...
method defaultComponent (line 50) | public static defaultComponent(style: TextStyle): string {
method getMetaComponent (line 76) | protected getMetaComponent() {
method getMetaPropNames (line 80) | protected getMetaPropNames() {
method getChildComponent (line 87) | protected getChildComponent() {
FILE: packages/typography/src/constants.tsx
constant BASE_CLASS_NAME (line 1) | const BASE_CLASS_NAME = "mdc-typography";
FILE: packages/typography/src/index.tsx
class Typography (line 17) | class Typography extends Container {
FILE: packages/typography/src/shortcuts.tsx
type Props (line 11) | type Props = React.HTMLProps<HTMLElement> & ChildProps & BaseMetaProps;
type TextProps (line 13) | type TextProps = React.HTMLProps<HTMLElement> & MetaProps;
function withTextStyle (line 15) | function withTextStyle(props: Props, textStyle: TextStyle): TextProps {
function createShorcutComponent (line 22) | function createShorcutComponent(textStyle: TextStyle): React.StatelessCo...
FILE: packages/typography/src/types.tsx
type TextStyle (line 1) | type TextStyle =
FILE: packages/typography/src/utils.tsx
function classNameForTextStyle (line 4) | function classNameForTextStyle(style: TextStyle): string {
FILE: scripts/package.py
function pecho (line 21) | def pecho(message=None, *args, **kwargs):
function set_value (line 26) | def set_value(package: collections.Mapping, keypath: str, value: JSONVal...
function remove_value (line 37) | def remove_value(package: collections.Mapping, keypath: str):
function get_package_json (line 53) | def get_package_json(packagedir: str):
function load_pacakge_json (line 57) | def load_pacakge_json(filename: str):
function dump_pacakge_json (line 63) | def dump_pacakge_json(package, filename):
function collect_package_dirs (line 70) | def collect_package_dirs(path: str = '.'):
function coerce_value (line 82) | def coerce_value(value: str) -> JSONLeafValue:
function cli (line 101) | def cli():
function set (line 108) | def set(keypath: str, value: str):
function remove (line 121) | def remove(keypath: str):
function main (line 132) | def main():
Condensed preview — 383 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (525K chars).
[
{
"path": ".gitignore",
"chars": 761,
"preview": "### Project ###\n# Docs\n/docs/build/\n# Don't use yarn for library project\nyarn.lock\n# Transpiled source directory\nlib/\n\n#"
},
{
"path": ".npmignore",
"chars": 67,
"preview": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n"
},
{
"path": ".travis.yml",
"chars": 191,
"preview": "language: node_js\n\nnode_js:\n - \"7\"\n\nsudo: false\n\ncache:\n directories:\n - \"node_modules\"\n\nbefore_script:\n - lerna b"
},
{
"path": "README.md",
"chars": 3060,
"preview": "React Material Components Web\n=============================\n\n[![License: MIT](https://img.shields.io/github/license/mash"
},
{
"path": "docs/.gitignore",
"chars": 549,
"preview": "### Typescript ###\n.awcache/\n\n### Node ###\n# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Compiled binary addons (http://nodejs.org"
},
{
"path": "docs/config/webpack/app.js",
"chars": 4368,
"preview": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst webpack = require(\"webpack\");\n\nconst ExtractTextPlugin = r"
},
{
"path": "docs/config/webpack/constants.js",
"chars": 449,
"preview": "const path = require(\"path\");\n\nconst PROJECT_ROOT = module.exports.PROJECT_ROOT = path.resolve(__dirname, \"..\", \"..\", \"."
},
{
"path": "docs/config/webpack/vendor.js",
"chars": 836,
"preview": "const path = require(\"path\");\nconst webpack = require(\"webpack\");\n\nconst {\n DOCS_ROOT,\n BUILD_PATH,\n PRODUCTION\n} = r"
},
{
"path": "docs/index.html",
"chars": 574,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>React Material Components Web: React C"
},
{
"path": "docs/package.json",
"chars": 2674,
"preview": "{\n \"name\": \"Document\",\n \"author\": \"Choi Geonu\",\n \"license\": \"MIT\",\n \"private\": true,\n \"dependencies\": {\n \"@react"
},
{
"path": "docs/postcss.config.js",
"chars": 89,
"preview": "module.exports = {\n plugins: [\n require('autoprefixer')({ /* ...options */ })\n ]\n};\n"
},
{
"path": "docs/src/js/Container/MainToolbar.tsx",
"chars": 1359,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/Container/index.tsx",
"chars": 612,
"preview": "import * as React from \"react\";\n\nimport Toolbar from \"@react-mdc/toolbar\";\nimport Typography from \"@react-mdc/typography"
},
{
"path": "docs/src/js/Container/styles.scss",
"chars": 451,
"preview": "@import \"style/vars/theme\";\n\n:local {\n .container {\n flex: 1;\n }\n .toolbar {\n /* Codemirror has z"
},
{
"path": "docs/src/js/common/types.ts",
"chars": 0,
"preview": ""
},
{
"path": "docs/src/js/compat.ts",
"chars": 77,
"preview": "/**\n * Compatibility\n */\n\n// ES2017 Polyfills\nimport \"core-js/es7/index.js\";\n"
},
{
"path": "docs/src/js/components/Code.tsx",
"chars": 1181,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\nimport { default as CodeMirror, Props as Code"
},
{
"path": "docs/src/js/components/CodeMirror.tsx",
"chars": 4692,
"preview": "import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nimport * as classNames from \"classnames\";\nimpo"
},
{
"path": "docs/src/js/components/ComponentPage/Content.tsx",
"chars": 477,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport * as styles from \"./styles.scss\";\n\nex"
},
{
"path": "docs/src/js/components/ComponentPage/index.tsx",
"chars": 3644,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/components/ComponentPage/styles.scss",
"chars": 1282,
"preview": "@import \"style/vars/theme\";\n\n:local {\n .component-page {\n width: 100%;\n display: flex;\n flex-dir"
},
{
"path": "docs/src/js/components/DarkTheme.tsx",
"chars": 708,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport Theme from \"@react-mdc/theme\";\nimport"
},
{
"path": "docs/src/js/components/FullSize.tsx",
"chars": 583,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport * as styles from \"./styles.scss\";\n\nfu"
},
{
"path": "docs/src/js/components/Icon.tsx",
"chars": 522,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport * as styles from \"./styles.scss\";\n\nex"
},
{
"path": "docs/src/js/components/Name.tsx",
"chars": 336,
"preview": "import * as React from \"react\";\n\nimport Code from \"./Code\";\n\nexport default function Name(props: React.HTMLProps<HTMLEle"
},
{
"path": "docs/src/js/components/Page/Content.tsx",
"chars": 467,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport * as styles from \"./styles.scss\";\n\nex"
},
{
"path": "docs/src/js/components/Page/Footer.tsx",
"chars": 2814,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\nimport { Link } from \"react-router\";\n\nimport "
},
{
"path": "docs/src/js/components/Page/Responsive.tsx",
"chars": 822,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "docs/src/js/components/Page/index.tsx",
"chars": 681,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport * as styles from \"./styles.scss\";\n\nim"
},
{
"path": "docs/src/js/components/Page/styles.scss",
"chars": 1039,
"preview": ":local {\n .page {\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n .responsive {\n "
},
{
"path": "docs/src/js/components/ShowCase/Item.tsx",
"chars": 472,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport * as styles from \"./styles.scss\";\n\nex"
},
{
"path": "docs/src/js/components/ShowCase/index.tsx",
"chars": 697,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport Item from \"./Item\";\n\nimport * as styl"
},
{
"path": "docs/src/js/components/ShowCase/styles.scss",
"chars": 363,
"preview": "@import \"style/vars/theme\";\n\n:local {\n .showcase {\n padding: $app-showcase-padding;\n background: $app-s"
},
{
"path": "docs/src/js/components/Table.tsx",
"chars": 352,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport * as styles from \"./styles.scss\";\n\nex"
},
{
"path": "docs/src/js/components/styles.scss",
"chars": 3172,
"preview": "/* Material Icons */\n\n@import \"style/vars/theme\";\n@import \"@material/theme/mdc-theme\";\n\n$app-table-border-color: #CCC;\n\n"
},
{
"path": "docs/src/js/index.tsx",
"chars": 376,
"preview": "import \"./compat\";\n\nimport \"app/style/index.scss\";\n\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom"
},
{
"path": "docs/src/js/pages/ButtonPage/index.tsx",
"chars": 5185,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/CardPage/index.tsx",
"chars": 11548,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/CheckboxPage/index.tsx",
"chars": 10323,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/DialogPage/index.tsx",
"chars": 12729,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/ElevationPage/index.tsx",
"chars": 3176,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/FABPage/index.tsx",
"chars": 3958,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/FormFieldPage/index.tsx",
"chars": 3377,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/LayoutGridPage/index.tsx",
"chars": 8711,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/NotFoundPage/index.tsx",
"chars": 1271,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport Button from \"@react-mdc/button\";\nimport Car"
},
{
"path": "docs/src/js/pages/RadioPage/index.tsx",
"chars": 10813,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/RipplePage/index.tsx",
"chars": 5425,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/SwitchPage/index.tsx",
"chars": 9485,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/TextfieldPage/index.tsx",
"chars": 6633,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/TypographyPage/index.tsx",
"chars": 7513,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/WelcomePage/index.tsx",
"chars": 4025,
"preview": "import * as React from \"react\";\nimport { Link } from \"react-router\";\n\nimport * as classNames from \"classnames\";\n\nimport "
},
{
"path": "docs/src/js/pages/WelcomePage/styles.scss",
"chars": 284,
"preview": "@import \"style/vars/theme\";\n\n:local {\n .flex {\n flex: 1;\n }\n\n .welcome {\n padding-bottom: 60px;\n "
},
{
"path": "docs/src/js/routes.tsx",
"chars": 2265,
"preview": "import * as React from \"react\";\n\nimport { hashHistory, Route, Router } from \"react-router\";\n\nimport ComponentPage from \""
},
{
"path": "docs/src/js/utils/code.ts",
"chars": 572,
"preview": "export const CODE_STRIP_START = \"/* strip-start */\";\nexport const CODE_STRIP_END = \"/* strip-end */\";\n\n/**\n * Strip igno"
},
{
"path": "docs/src/style/index.scss",
"chars": 176,
"preview": "/* Project Style Entry Point */\n\n/* Global Setup */\n@import \"./preload\";\n@import \"./layout\";\n@import \"./vars/theme\";\n@im"
},
{
"path": "docs/src/style/layout.scss",
"chars": 623,
"preview": "/* Google web fonts */\n:global {\n @import url(https://fonts.googleapis.com/css?family=Roboto);\n @import url(https:"
},
{
"path": "docs/src/style/preload.scss",
"chars": 392,
"preview": "/* Styles for before react */\n:global {\n #preload-react {\n position: fixed;\n left: 0;\n right: 0;"
},
{
"path": "docs/src/style/vars/_theme.scss",
"chars": 239,
"preview": "$mdc-theme-primary: #64DD17;\n$mdc-theme-accent: #64DD17;\n$mdc-theme-background: #fff;\n\n$app-theme-dark-background: #2121"
},
{
"path": "docs/tsconfig.json",
"chars": 589,
"preview": "{\n \"compileOnSave\": true,\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"outDir\": \"./build/\",\n \"str"
},
{
"path": "docs/tslint.json",
"chars": 719,
"preview": "{\n \"extends\": [\n \"tslint:recommended\",\n \"tslint-react\"\n ],\n \"rules\": {\n // Common\n "
},
{
"path": "docs/typings/cssmodule.d.ts",
"chars": 211,
"preview": "interface CssModule {\n [className: string]: string\n}\n\ndeclare module \"*.scss\" {\n const styles: CssModule\n expor"
},
{
"path": "docs/typings/images.d.ts",
"chars": 204,
"preview": "declare module \"*.jpg\" {\n const url: string\n export = url;\n}\n\ndeclare module \"*.png\" {\n const url: string\n e"
},
{
"path": "docs/typings/raw-loader.d.ts",
"chars": 82,
"preview": "declare module \"raw-loader!*\" {\n const content: string\n export = content;\n}\n"
},
{
"path": "docs/vendor.js",
"chars": 80,
"preview": "require(\"react\");\nrequire(\"react-dom\");\nrequire(\"codemirror\");\nrequire(\"fbjs\");\n"
},
{
"path": "lerna.json",
"chars": 228,
"preview": "{\n \"lerna\": \"2.0.0-beta.38\",\n \"packages\": [\n \"packages/*\",\n \"docs\"\n ],\n \"commands\": {\n \"publish\": {\n \""
},
{
"path": "package.json",
"chars": 1071,
"preview": "{\n \"name\": \"react-material-components-web-root\",\n \"author\": \"Choi Geonu\",\n \"license\": \"MIT\",\n \"private\": true,\n \"re"
},
{
"path": "packages/base/.npmignore",
"chars": 67,
"preview": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n"
},
{
"path": "packages/base/package.json",
"chars": 1499,
"preview": "{\n \"name\": \"@react-mdc/base\",\n \"description\": \"Core library of @react-mdc components\",\n \"version\": \"0.1.12\",\n \"licen"
},
{
"path": "packages/base/src/ClassNameMetaBase.tsx",
"chars": 1246,
"preview": "/**\n * Meta factory component.\n */\nimport * as React from \"react\";\n\nimport * as classNames from \"classnames\";\n\nimport {\n"
},
{
"path": "packages/base/src/DefaultComponentBase.ts",
"chars": 1263,
"preview": "/**\n * Default component for meta component.\n */\nimport * as React from \"react\";\n\nexport default abstract class DefaultC"
},
{
"path": "packages/base/src/MetaBase.tsx",
"chars": 1103,
"preview": "/**\n * Base class of meta component.\n */\nimport * as React from \"react\";\n\nimport {\n Attributes,\n CSSVariables,\n "
},
{
"path": "packages/base/src/NativeDOMAdapter.tsx",
"chars": 10361,
"preview": "import {\n OrderedSet,\n} from \"immutable\";\nimport * as forEach from \"lodash.foreach\";\nimport * as React from \"react\";\n"
},
{
"path": "packages/base/src/__tests__/ClassNameMetaBase.spec.tsx",
"chars": 2478,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport ClassNameMetaBase from \"../Cl"
},
{
"path": "packages/base/src/__tests__/DefaultComponentBase.spec.tsx",
"chars": 1268,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport ClassNameMetaBase from \"../Cl"
},
{
"path": "packages/base/src/__tests__/MetaBase.spec.tsx",
"chars": 2735,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport MetaBase from \"../MetaBase\";\n"
},
{
"path": "packages/base/src/__tests__/NativeDOMAdapter.spec.tsx",
"chars": 6633,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport NativeDOMAdapter from \"../Nat"
},
{
"path": "packages/base/src/__tests__/util.spec.tsx",
"chars": 2544,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport * as util from \"../util\";\n\nde"
},
{
"path": "packages/base/src/event.ts",
"chars": 1947,
"preview": "export const EVENT_MAP = {\n abort: \"onAbort\",\n blur: \"onBlur\",\n canplay: \"onCanPlay\",\n canplaythrough: \"onCa"
},
{
"path": "packages/base/src/index.tsx",
"chars": 402,
"preview": "import ClassNameMetaBase from \"./ClassNameMetaBase\";\nimport DefaultComponentBase from \"./DefaultComponentBase\";\nimport M"
},
{
"path": "packages/base/src/types.tsx",
"chars": 217,
"preview": "import * as React from \"react\";\n\nexport type Config = {};\n\nexport type ReactComponent<P> = React.ComponentClass<P> | Rea"
},
{
"path": "packages/base/src/util.ts",
"chars": 1340,
"preview": "/**\n * Common utilities\n */\nimport * as React from \"react\";\n\n/**\n * Decorate event handler function with default handler"
},
{
"path": "packages/base/tsconfig.json",
"chars": 371,
"preview": "{\n \"compileOnSave\": true,\n \"compilerOptions\": {\n \"outDir\": \"./lib/\",\n \"declaration\": true,\n \""
},
{
"path": "packages/base/tslint.json",
"chars": 661,
"preview": "{\n \"extends\": [\n \"tslint:recommended\",\n \"tslint-react\"\n ],\n \"rules\": {\n // Common\n "
},
{
"path": "packages/button/.npmignore",
"chars": 67,
"preview": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n"
},
{
"path": "packages/button/package.json",
"chars": 1391,
"preview": "{\n \"name\": \"@react-mdc/button\",\n \"description\": \"React wrapper of @material/button\",\n \"version\": \"0.1.8\",\n \"license\""
},
{
"path": "packages/button/src/Button.tsx",
"chars": 1686,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/button/src/__tests__/Button.spec.tsx",
"chars": 1987,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Button from \"../Button\";\n\ndes"
},
{
"path": "packages/button/src/constants.tsx",
"chars": 45,
"preview": "export const BASE_CLASS_NAME = \"mdc-button\";\n"
},
{
"path": "packages/button/src/index.tsx",
"chars": 36,
"preview": "export { default } from \"./Button\";\n"
},
{
"path": "packages/button/tsconfig.json",
"chars": 371,
"preview": "{\n \"compileOnSave\": true,\n \"compilerOptions\": {\n \"outDir\": \"./lib/\",\n \"declaration\": true,\n \""
},
{
"path": "packages/button/tslint.json",
"chars": 661,
"preview": "{\n \"extends\": [\n \"tslint:recommended\",\n \"tslint-react\"\n ],\n \"rules\": {\n // Common\n "
},
{
"path": "packages/card/.npmignore",
"chars": 67,
"preview": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n"
},
{
"path": "packages/card/package.json",
"chars": 1420,
"preview": "{\n \"name\": \"@react-mdc/card\",\n \"description\": \"React wrapper of @material/card\",\n \"version\": \"0.1.9\",\n \"license\": \"M"
},
{
"path": "packages/card/src/Action.tsx",
"chars": 1280,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\nimp"
},
{
"path": "packages/card/src/Actions.tsx",
"chars": 1116,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/Container.tsx",
"chars": 1107,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/HorizontalBlock.tsx",
"chars": 978,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/Media.tsx",
"chars": 881,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/MediaItem.tsx",
"chars": 1442,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/Primary.tsx",
"chars": 887,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/Subtitle.tsx",
"chars": 900,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/SupportingText.tsx",
"chars": 910,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/Title.tsx",
"chars": 1204,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/card/src/__tests__/Action.spec.tsx",
"chars": 517,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Action from \"../Action\";\n\ndes"
},
{
"path": "packages/card/src/__tests__/Actions.spec.tsx",
"chars": 1000,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Actions from \"../Actions\";\n\nd"
},
{
"path": "packages/card/src/__tests__/Container.spec.tsx",
"chars": 952,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Container from \"../Container\""
},
{
"path": "packages/card/src/__tests__/HorizontalBlock.spec.tsx",
"chars": 576,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport HorizontalBlock from \"../Hori"
},
{
"path": "packages/card/src/__tests__/Media.spec.tsx",
"chars": 512,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Media from \"../Media\";\n\ndescr"
},
{
"path": "packages/card/src/__tests__/MediaItem.spec.tsx",
"chars": 1576,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport MediaItem from \"../MediaItem\""
},
{
"path": "packages/card/src/__tests__/Primary.spec.tsx",
"chars": 526,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Primary from \"../Primary\";\n\nd"
},
{
"path": "packages/card/src/__tests__/Subtitle.spec.tsx",
"chars": 523,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Subtitle from \"../Subtitle\";\n"
},
{
"path": "packages/card/src/__tests__/SupportingText.spec.tsx",
"chars": 577,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport SupportingText from \"../Suppo"
},
{
"path": "packages/card/src/__tests__/Title.spec.tsx",
"chars": 955,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Title from \"../Title\";\n\ndescr"
},
{
"path": "packages/card/src/constants.ts",
"chars": 43,
"preview": "export const BASE_CLASS_NAME = \"mdc-card\";\n"
},
{
"path": "packages/card/src/index.ts",
"chars": 768,
"preview": "import Action from \"./Action\";\nimport Actions from \"./Actions\";\nimport Container from \"./Container\";\nimport HorizontalBl"
},
{
"path": "packages/card/tsconfig.json",
"chars": 371,
"preview": "{\n \"compileOnSave\": true,\n \"compilerOptions\": {\n \"outDir\": \"./lib/\",\n \"declaration\": true,\n \""
},
{
"path": "packages/card/tslint.json",
"chars": 661,
"preview": "{\n \"extends\": [\n \"tslint:recommended\",\n \"tslint-react\"\n ],\n \"rules\": {\n // Common\n "
},
{
"path": "packages/checkbox/.npmignore",
"chars": 67,
"preview": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n"
},
{
"path": "packages/checkbox/package.json",
"chars": 1526,
"preview": "{\n \"name\": \"@react-mdc/checkbox\",\n \"description\": \"React wrapper of @material/checkbox\",\n \"version\": \"0.1.12\",\n \"lic"
},
{
"path": "packages/checkbox/src/Background.tsx",
"chars": 855,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/checkbox/src/Checkmark.tsx",
"chars": 757,
"preview": "import * as React from \"react\";\n\nimport {\n BASE_CLASS_NAME,\n} from \"./constants\";\n\nexport const CLASS_NAME = `${BASE_"
},
{
"path": "packages/checkbox/src/Container.tsx",
"chars": 5737,
"preview": "import * as React from \"react\";\n\nimport { getCorrectEventName } from \"@material/animation/dist/mdc.animation\";\nimport { "
},
{
"path": "packages/checkbox/src/Default.tsx",
"chars": 1521,
"preview": "import * as React from \"react\";\n\nimport Background from \"./Background\";\nimport Checkmark from \"./Checkmark\";\nimport Cont"
},
{
"path": "packages/checkbox/src/Mixedmark.tsx",
"chars": 853,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/checkbox/src/NativeControl.tsx",
"chars": 4009,
"preview": "import * as PropTypes from \"prop-types\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nimport "
},
{
"path": "packages/checkbox/src/__tests__/Background.spec.tsx",
"chars": 547,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Background from \"../Backgroun"
},
{
"path": "packages/checkbox/src/__tests__/Checkmark.spec.tsx",
"chars": 325,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Checkmark from \"../Checkmark\""
},
{
"path": "packages/checkbox/src/__tests__/Container.spec.tsx",
"chars": 608,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Container from \"../Container\""
},
{
"path": "packages/checkbox/src/__tests__/Default.spec.tsx",
"chars": 793,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Background from \"../Backgroun"
},
{
"path": "packages/checkbox/src/__tests__/Mixedmark.spec.tsx",
"chars": 540,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Mixedmark from \"../Mixedmark\""
},
{
"path": "packages/checkbox/src/__tests__/NativeControl.spec.tsx",
"chars": 1183,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\nimport * as PropTypes from \"prop-type"
},
{
"path": "packages/checkbox/src/__tests__/adapter.spec.ts",
"chars": 397,
"preview": "import \"jest\";\n\nimport {\n ContainerAdapter,\n FoundationAdapter,\n NativeControlAdapter,\n} from \"../adapter\";\n\nde"
},
{
"path": "packages/checkbox/src/adapter.ts",
"chars": 3312,
"preview": "/**\n * Foundation adapters.\n */\n\n/**\n * Container adapter interface\n * Default implementations are noop and returns mean"
},
{
"path": "packages/checkbox/src/constants.ts",
"chars": 47,
"preview": "export const BASE_CLASS_NAME = \"mdc-checkbox\";\n"
},
{
"path": "packages/checkbox/src/index.ts",
"chars": 533,
"preview": "import Background from \"./Background\";\nimport Checkmark from \"./Checkmark\";\nimport Container from \"./Container\";\nimport "
},
{
"path": "packages/checkbox/tsconfig.json",
"chars": 371,
"preview": "{\n \"compileOnSave\": true,\n \"compilerOptions\": {\n \"outDir\": \"./lib/\",\n \"declaration\": true,\n \""
},
{
"path": "packages/checkbox/tslint.json",
"chars": 661,
"preview": "{\n \"extends\": [\n \"tslint:recommended\",\n \"tslint-react\"\n ],\n \"rules\": {\n // Common\n "
},
{
"path": "packages/dialog/.npmignore",
"chars": 67,
"preview": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n"
},
{
"path": "packages/dialog/package.json",
"chars": 1554,
"preview": "{\n \"name\": \"@react-mdc/dialog\",\n \"description\": \"React wrapper of @material/dialog\",\n \"version\": \"0.1.7\",\n \"license\""
},
{
"path": "packages/dialog/src/Backdrop.tsx",
"chars": 879,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/dialog/src/Body.tsx",
"chars": 1156,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/dialog/src/Container.tsx",
"chars": 6772,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\nimport * as PropTypes from \"prop-types\";\n\nimp"
},
{
"path": "packages/dialog/src/Footer/Button.tsx",
"chars": 1398,
"preview": "import {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nimport MDCButton from \"@react-mdc/b"
},
{
"path": "packages/dialog/src/Footer/Container.tsx",
"chars": 926,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/dialog/src/Footer/__tests__/Button.spec.tsx",
"chars": 1257,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Button from \"../Button\";\n\ndes"
},
{
"path": "packages/dialog/src/Footer/__tests__/Container.spec.tsx",
"chars": 536,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Container from \"../Container\""
},
{
"path": "packages/dialog/src/Footer/constants.ts",
"chars": 143,
"preview": "import { BASE_CLASS_NAME as PARENT_BASE_CLASS_NAME } from \"../constants\";\n\nexport const BASE_CLASS_NAME = `${PARENT_BASE"
},
{
"path": "packages/dialog/src/Footer/index.ts",
"chars": 154,
"preview": "import Button from \"./Button\";\nimport Container from \"./Container\";\n\nexport default class Footer extends Container {\n "
},
{
"path": "packages/dialog/src/Header/Container.tsx",
"chars": 863,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/dialog/src/Header/Title.tsx",
"chars": 880,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/dialog/src/Header/__tests__/Container.spec.tsx",
"chars": 536,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Container from \"../Container\""
},
{
"path": "packages/dialog/src/Header/__tests__/Title.spec.tsx",
"chars": 550,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Title from \"../Title\";\n\ndescr"
},
{
"path": "packages/dialog/src/Header/constants.ts",
"chars": 143,
"preview": "import { BASE_CLASS_NAME as PARENT_BASE_CLASS_NAME } from \"../constants\";\n\nexport const BASE_CLASS_NAME = `${PARENT_BASE"
},
{
"path": "packages/dialog/src/Header/index.ts",
"chars": 150,
"preview": "import Container from \"./Container\";\nimport Title from \"./Title\";\n\nexport default class Header extends Container {\n p"
},
{
"path": "packages/dialog/src/Surface.tsx",
"chars": 3468,
"preview": "import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nimport {\n Map,\n OrderedSet,\n Set,\n} fro"
},
{
"path": "packages/dialog/src/__tests__/Backdrop.spec.tsx",
"chars": 529,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Backdrop from \"../Backdrop\";\n"
},
{
"path": "packages/dialog/src/__tests__/Body.spec.tsx",
"chars": 979,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Body from \"../Body\";\n\ndescrib"
},
{
"path": "packages/dialog/src/__tests__/Container.spec.tsx",
"chars": 1058,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Container from \"../Container\""
},
{
"path": "packages/dialog/src/__tests__/Surface.spec.tsx",
"chars": 1131,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\nimport * as PropTypes from \"prop-type"
},
{
"path": "packages/dialog/src/adapter.ts",
"chars": 5285,
"preview": "/**\n * Foundation adapters.\n */\n\nimport {\n util as dialogUtil,\n} from \"@material/dialog/dist/mdc.dialog\";\n\n/**\n * Con"
},
{
"path": "packages/dialog/src/constants.ts",
"chars": 45,
"preview": "export const BASE_CLASS_NAME = \"mdc-dialog\";\n"
},
{
"path": "packages/dialog/src/index.ts",
"chars": 422,
"preview": "import Backdrop from \"./Backdrop\";\nimport Body from \"./Body\";\nimport Container from \"./Container\";\nimport Footer from \"."
},
{
"path": "packages/dialog/tsconfig.json",
"chars": 371,
"preview": "{\n \"compileOnSave\": true,\n \"compilerOptions\": {\n \"outDir\": \"./lib/\",\n \"declaration\": true,\n \""
},
{
"path": "packages/dialog/tslint.json",
"chars": 661,
"preview": "{\n \"extends\": [\n \"tslint:recommended\",\n \"tslint-react\"\n ],\n \"rules\": {\n // Common\n "
},
{
"path": "packages/drawer/.npmignore",
"chars": 67,
"preview": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n"
},
{
"path": "packages/drawer/package.json",
"chars": 1519,
"preview": "{\n \"name\": \"@react-mdc/drawer\",\n \"description\": \"React wrapper of @material/drawer\",\n \"version\": \"0.1.13\",\n \"license"
},
{
"path": "packages/drawer/src/Permanent/Container.tsx",
"chars": 829,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/drawer/src/Permanent/Content.tsx",
"chars": 844,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/drawer/src/Permanent/ToolbarSpacer.tsx",
"chars": 857,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/drawer/src/Permanent/__tests__/Container.spec.tsx",
"chars": 534,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Container from \"../Container\""
},
{
"path": "packages/drawer/src/Permanent/__tests__/Content.spec.tsx",
"chars": 542,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Content from \"../Content\";\n\nd"
},
{
"path": "packages/drawer/src/Permanent/__tests__/ToolbarSpacer.spec.tsx",
"chars": 586,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport ToolbarSpacer from \"../Toolba"
},
{
"path": "packages/drawer/src/Permanent/constants.ts",
"chars": 122,
"preview": "export const BASE_CLASS_NAME = \"mdc-permanent-drawer\";\nexport const SELECTED_CLASS_NAME = `${BASE_CLASS_NAME}--selected`"
},
{
"path": "packages/drawer/src/Permanent/index.ts",
"chars": 255,
"preview": "import Container from \"./Container\";\nimport Content from \"./Content\";\nimport ToolbarSpacer from \"./ToolbarSpacer\";\n\nexpo"
},
{
"path": "packages/drawer/src/Temporary/Container.tsx",
"chars": 7359,
"preview": "import * as React from \"react\";\n\nimport * as classNames from \"classnames\";\nimport * as PropTypes from \"prop-types\";\n\nimp"
},
{
"path": "packages/drawer/src/Temporary/Content.tsx",
"chars": 849,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/drawer/src/Temporary/Drawer.tsx",
"chars": 4144,
"preview": "import * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nimport { MDCTemporaryDrawerFoundation } from \"@m"
},
{
"path": "packages/drawer/src/Temporary/Header.tsx",
"chars": 847,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/drawer/src/Temporary/HeaderContent.tsx",
"chars": 862,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/drawer/src/Temporary/ToolbarSpacer.tsx",
"chars": 862,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/drawer/src/Temporary/__tests__/Container.spec.tsx",
"chars": 904,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Container from \"../Container\""
},
{
"path": "packages/drawer/src/Temporary/__tests__/Content.spec.tsx",
"chars": 542,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Content from \"../Content\";\n\nd"
},
{
"path": "packages/drawer/src/Temporary/__tests__/Drawer.spec.tsx",
"chars": 1148,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport * as PropTypes from \"prop-typ"
},
{
"path": "packages/drawer/src/Temporary/__tests__/Header.spec.tsx",
"chars": 541,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Header from \"../Header\";\n\ndes"
},
{
"path": "packages/drawer/src/Temporary/__tests__/HeaderContent.spec.tsx",
"chars": 586,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport HeaderContent from \"../Header"
},
{
"path": "packages/drawer/src/Temporary/__tests__/ToolbarSpacer.spec.tsx",
"chars": 586,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport ToolbarSpacer from \"../Toolba"
},
{
"path": "packages/drawer/src/Temporary/adapter.ts",
"chars": 5522,
"preview": "/**\n * Foundation adapters.\n */\n\nfunction createEmptyNodeList(): NodeListOf<Element> {\n const item: (index: number) ="
},
{
"path": "packages/drawer/src/Temporary/constants.ts",
"chars": 122,
"preview": "export const BASE_CLASS_NAME = \"mdc-temporary-drawer\";\nexport const SELECTED_CLASS_NAME = `${BASE_CLASS_NAME}--selected`"
},
{
"path": "packages/drawer/src/Temporary/drawerUtil.ts",
"chars": 3260,
"preview": "/* eslint-disable */\n/**\n * Copyright 2016 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Ver"
},
{
"path": "packages/drawer/src/Temporary/index.ts",
"chars": 481,
"preview": "import Container from \"./Container\";\nimport Content from \"./Content\";\nimport Drawer from \"./Drawer\";\nimport Header from "
},
{
"path": "packages/drawer/src/index.ts",
"chars": 168,
"preview": "import Permanent from \"./Permanent\";\nimport Temporary from \"./Temporary\";\n\nexport {\n Permanent,\n Temporary,\n};\n\nex"
},
{
"path": "packages/drawer/tsconfig.json",
"chars": 371,
"preview": "{\n \"compileOnSave\": true,\n \"compilerOptions\": {\n \"outDir\": \"./lib/\",\n \"declaration\": true,\n \""
},
{
"path": "packages/drawer/tslint.json",
"chars": 661,
"preview": "{\n \"extends\": [\n \"tslint:recommended\",\n \"tslint-react\"\n ],\n \"rules\": {\n // Common\n "
},
{
"path": "packages/elevation/.npmignore",
"chars": 67,
"preview": ".git/\nnode_modules/\nsrc/\nyarn.lock\n**/__mocks__/**\n**/__tests__/**\n"
},
{
"path": "packages/elevation/package.json",
"chars": 1400,
"preview": "{\n \"name\": \"@react-mdc/elevation\",\n \"description\": \"React wrapper of @material/elevation\",\n \"version\": \"0.1.9\",\n \"li"
},
{
"path": "packages/elevation/src/Elevation.tsx",
"chars": 1267,
"preview": "import * as React from \"react\";\n\nimport {\n ClassNameMetaBase,\n DefaultComponentBase,\n} from \"@react-mdc/base\";\n\nim"
},
{
"path": "packages/elevation/src/__tests__/Elevation.spec.tsx",
"chars": 1127,
"preview": "import \"jest\";\n\nimport * as React from \"react\";\n\nimport * as enzyme from \"enzyme\";\n\nimport Elevation from \"../Elevation\""
},
{
"path": "packages/elevation/src/__tests__/utils.spec.ts",
"chars": 344,
"preview": "import \"jest\";\n\nimport { ZSpace } from \"../types\";\nimport * as utils from \"../utils\";\n\ndescribe(\"classNameForZSpace\", ()"
},
{
"path": "packages/elevation/src/constants.ts",
"chars": 48,
"preview": "export const BASE_CLASS_NAME = \"mdc-elevation\";\n"
},
{
"path": "packages/elevation/src/index.tsx",
"chars": 39,
"preview": "export { default } from \"./Elevation\";\n"
}
]
// ... and 183 more files (download for full content)
About this extraction
This page contains the full source code of the react-mdc/react-material-components-web GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 383 files (462.0 KB), approximately 115.3k tokens, and a symbol index with 1331 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.