Material UI Dialog Higher Order Component (HOC)

index.js

import React from "react";
import { render } from "react-dom";
import Button from "material-ui/Button";
import Dialog from "material-ui/Dialog";

/**
 * Accepts a function that maps owner props to a new collection of props that
 * are passed to the base component.
 *
 * mapProps() pairs well with functional utility libraries like lodash/fp.
 * For example, Recompose does not come with a omitProps() function, but you
 * can easily build one using lodash-fp's omit():
 *
 * const omitProps = keys => mapProps(props => omit(keys, props))
 *
 * Because of currying in lodash-fp, this is the same as
 *
 * const omitProps = compose(mapProps, omit)
 */
const mapProps = fn => Component => props => (
  React.createFactory(Component)(fn(props))
);

/**
 * Use to compose multiple higher-order components into a single higher-order
 * component. This works exactly like the function of the same name in Redux,
 * or lodash's flowRight().
 *
 *  compose(...functions: Array<Function>): Function
 */
const compose = (propFn, highOrderComponent) => x => {
  return propFn(highOrderComponent(x));
};

const DialogHOC = Component => (
  class extends React.Component {
    constructor(props) {
      super(props);

      this.state = props.initialModel || { open: false };
    }

    updateState = updateState => this.setState(updateState);

    render() {
      return React.createElement(Component, {
        ...this.props,
        ...this.state,
        ...{ updateState: this.updateState },
      });
    }
  }
);

const EnhanceDialog = compose(
  mapProps(({ ...props }) => ({ ...props })),
  DialogHOC,
);

const DialogButton = ({ open, updateState, children, customButton }) => (
  <div>
    <Dialog open={open} onRequestClose={() => updateState({ open: false })}>
      {children}
    </Dialog>
    {customButton
      ? <Button onClick={() => updateState({ open: !open })} {...customButton}>
        {customButton.text}
      </Button>
      : <Button
        color="accent"
        onClick={() => updateState({ open: !open })}
        raised
      >
        Open Dialog
      </Button>}
  </div>
);

const DialogWrapper = EnhanceDialog(DialogButton);

const App = () => (
  <div>
    <h3 style={{ textAlign: "center" }}>
      Dialog Example For Higher Order Components - Material UI - We work at
      NetFortris.com
    </h3>
    <div>
      <p>- Custom Button</p>
      <DialogWrapper
        customButton={{
          color: "primary",
          text: "Hi Code Tony",
          raised: true,
        }}
        initialModel={{ open: false }}
      >
        <h1 style={{ padding: 20 }}>
          <a href="http:codetony.com" target="_blank">
            Codetony.com
          </a>
        </h1>
      </DialogWrapper>

      <p>- Default Button</p>
      <DialogWrapper>
        <h1 style={{ padding: 20 }}>
          <a href="http:gautamwarrier.com" target="_blank">
            Gautam.com
          </a>
        </h1>
      </DialogWrapper>

      <p>- Optional Button</p>
      <DialogWrapper>
        <h1 style={{ padding: 20 }}>
          <a href="http:masayakawauchi.com" target="_blank">
            MasayaKawauchi.com
          </a>
        </h1>
      </DialogWrapper>
    </div>
  </div>
);

render(<App />, document.getElementById("root"));

// Read more: https://github.com/acdlite/recompose/blob/master/docs/API.md#mapprops