How to use react-md - 10 common examples

let query = '';

    let mode = 'text';

    let dataActions = null;
    let queryActions = null;

    if (exportData && exportData.length > 0) {
      const options = exportData.map(item => item.id);
      const selectedValue = options[selectedIndex];
      actions = options.length > 1 ? [
        (
           SettingsActions.selectIndex(index)}
            tabIndex={-1}
            toolbar
          />
        )
      ] : <button style="{{" label="{selectedValue}" disabled="">;

      const selected: IExportData = exportData[selectedIndex];

      // data
      const data = selected.data;
      switch (typeof data) {
        case 'object':
          json = data ? JSON.stringify(data, null, 2) : 'null';</button>

src={avatarSrc}
    role="presentation"
    iconSized
    style={{
      alignSelf: 'center',
      marginLeft: 16,
      marginRight: 16,
      flexShrink: 0,
    }}
  />,
  ,
]

class NavigationLink extends PureComponent {
  // NOTE: Don't try using Stateless (function) component here. `ref` is
  // required by React-MD/AccessibleFakeButton, but Stateless components
  // don't have one by design:
  // https://github.com/facebook/react/issues/4936
  render() {
    const { href, as, children, ..._props } = this.props
    return (
      <div style="{{">
        
          </div>

render() {
    var { selectedValue, values } = this.state;
    values = values || [];

    // var buttons = values.map((value, idx) => {
    //   return <button label="{value}">
    // })

    return (
        
    );
  }
}</button>

import * as React from 'react';
import FontIcon from 'react-md/lib/FontIcons';
import injectTooltip from 'react-md/lib/Tooltips';

// Material icons shouldn't have any other children other than the child string and
// it gets converted into a span if the tooltip is added, so we add a container
// around the two.
const TooltipFontIcon = injectTooltip(({
  children, iconClassName, className, tooltip, forceIconFontSize, forceIconSize, style, iconStyle, ...props }) => (

  <div style="{style}">
    {tooltip}
    
      {children}
    
  </div>
));

TooltipFontIcon.propTypes = {

import React, { PropTypes } from 'react';
import classnames from 'classnames';
import FontIcon from 'react-md/lib/FontIcons';
import injectTooltip from 'react-md/lib/Tooltips';

// Material icons shouldn't have any other children other than the child string and
// it gets converted into a span if the tooltip is added, so we add a container
// around the two.
const TooltipFontIcon = injectTooltip(({ children, iconClassName, className, tooltip, ...props }) => (
  <div>
    {tooltip}
    {children}
  </div>
));

TooltipFontIcon.propTypes = {
  children: PropTypes.string.isRequired,
  className: PropTypes.string,
  iconClassName: PropTypes.string,
  tooltip: PropTypes.node,
};

export default TooltipFontIcon;

import React, { PropTypes } from 'react';
import classnames from 'classnames';
import FontIcon from 'react-md/lib/FontIcons';
import injectTooltip from 'react-md/lib/Tooltips';

// Material icons shouldn't have any other children other than the child string and
// it gets converted into a span if the tooltip is added, so we add a container
// around the two.
const TooltipFontIcon = injectTooltip(({ children, iconClassName, className, ...props }) => (
  <div>
    {children}
  </div>
));

TooltipFontIcon.propTypes = {
  children: PropTypes.string.isRequired,
  className: PropTypes.string,
  iconClassName: PropTypes.string,
};

export default TooltipFontIcon;

_handleFilterChange = (value) => {
    let filterType;
    switch (value) { // eslint-disable-line default-case
      case 'case':
        filterType = Autocomplete.caseInsensitiveFilter;
        break;
      case 'fuzzy':
        filterType = Autocomplete.fuzzyFilter;
        break;
      case 'fuse':
        filterType = this._fuseJSFilter;
        break;
    }

    this.setState({ filterType });
  };

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { Link } from 'react-router';

import { RadioGroup, Radio } from 'react-md/lib/SelectionControls';
import FontIcon from 'react-md/lib/FontIcons';
import NavigationDrawer from 'react-md/lib/NavigationDrawers';
const { FULL_HEIGHT, CLIPPED, FLOATING, PERSISTENT, PERSISTENT_MINI, TEMPORARY, TEMPORARY_MINI } = NavigationDrawer.DrawerType;

// amazing way to keep state between routes
let state = {
  isOpen: false,
  drawerType: FULL_HEIGHT,
};

const LOCATION = '/components/navigation-drawers';

export default class NavigationDrawerExamples extends Component {
  constructor(props) {
    super(props);

    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    this.state = state;
  }

_addToast() {
    const { text, action } = this.state;
    const toasts = this.state.toasts.slice();
    toasts.push({ text, action });

    const words = text.split(' ').length;
    const autohideTimeout = Math.max(
      Snackbar.defaultProps.autohideTimeout,
      (words / AVERAGE_WPS) * 1000
    );

    this.setState({ toasts, autohideTimeout });
  }

import React, { PureComponent, PropTypes } from 'react';
import { connect } from 'react-redux';
import SelectField from 'react-md/lib/SelectFields';
import { updateDrawerType } from 'actions/ui';

import Drawer from 'react-md/lib/Drawers';
import { isPermanent, isPersistent } from 'react-md/lib/Drawers/isType';
const types = Object.keys(Drawer.DrawerTypes).map(key => Drawer.DrawerTypes[key]);

@connect(({ ui: { drawer: { mobile, tablet } } }) => ({ mobile, tablet }), { updateDrawerType })
export default class ControlReactMDDrawer extends PureComponent {
  static propTypes = {
    mobile: PropTypes.bool.isRequired,
    tablet: PropTypes.bool.isRequired,
    updateDrawerType: PropTypes.func.isRequired,
    className: PropTypes.string,
    children: PropTypes.node,
  };

  componentWillUnmount() {
    this.props.updateDrawerType(undefined);
  }

  render() {