How to use react-dom-factories - 10 common examples

const [name, ...subs] = schema.component.split('.');

    // find the def in the provided map
    if (componentMap) {
      Component = componentMap[name];
      if (!Component) Component = componentMap[paramCase(name)];
      if (!Component) Component = componentMap[pascalCase(name)];

      for (let i = 0; i < subs.length; i++) {
        Component = Component[subs[i]];
      }
    }

    // if still nothing found it's a native DOM component or an error
    if (!Component) {
      if (DOM.hasOwnProperty(name)) {
        Component = schema.component;
      } else {
        console.warn(
          `Could not find an implementation for: ${schema.component}`
        );
        return () => (
          <div style="{{">
            <pre>Could not find an implementation for: {schema.component}</pre>
          </div>
        );
      }
    }

    // if there is a default prop (CommonJS) return that
    return Component.default || Component;
  }

private createFocusedImageRepresentation() {
    // This is the large featured image
    // Set container div height to largest of all images,
    // so that thumbnails don't move about on image transitions
    let focused = this.state.focusedPreviewRep.get().imgURL;
    let style = {
      height: this.largestPreviewRepHeight + 'px',
    };

    return D.div(
      {
        title: 'Click to view full-size image',
        className: 'object-representations__image--focused',
        style: style,
        onClick: this.showModal.bind(this),
        onLoad: this.handleImageChanges,
      },
      createElement(TransitionGroup,
        {
          key: 'image-focused-transition-group',
        },
        createElement(CSSTransition,
          {
            key: focused,
            classNames: 'cross-fade',
            timeout: {

renderLabel(label: string) {
    if (label === null || typeof label === "undefined") {
      return null;
    }

    const { item, depth, focused, expanded, onLabelClick } = this.props;
    return dom.span(
      {
        className: "object-label",
        onClick: onLabelClick
          ? event => {
              event.stopPropagation();

              // If the user selected text, bail out.
              if (Utils.selection.documentHasSelection()) {
                return;
              }

              onLabelClick(item, {
                depth,
                focused,
                expanded,
                setExpanded: this.props.setExpanded

function FunctionRep(props) {
  let {
    object: grip,
    onViewSourceInDebugger,
  } = props;

  let jumpToDefinitionButton;
  if (onViewSourceInDebugger &&
    grip.location &&
    grip.location.url &&
    !IGNORED_SOURCE_URLS.includes(grip.location.url)
  ) {
    jumpToDefinitionButton = dom.button({
      className: "jump-definition",
      draggable: false,
      title: "Jump to definition",
      onClick: e => {
        // Stop the event propagation so we don't trigger ObjectInspector expand/collapse.
        e.stopPropagation();
        onViewSourceInDebugger(grip.location);
      }
    });
  }

  return (
   span({
      "data-link-actor-id": grip.actor,
      className: "objectBox objectBox-function",
      // Set dir="ltr" to prevent function parentheses from

}

    if (onDOMNodeMouseOver) {
      Object.assign(baseConfig, {
        onMouseOver: _ => onDOMNodeMouseOver(object)
      });
    }

    if (onDOMNodeMouseOut) {
      Object.assign(baseConfig, {
        onMouseOut: onDOMNodeMouseOut
      });
    }

    if (onInspectIconClick) {
      inspectIcon = dom.button({
        className: "open-inspector",
        // TODO: Localize this with "openNodeInInspector" when Bug 1317038 lands
        title: inspectIconTitle || "Click to select the node in the inspector",
        onClick: e => {
          if (onDOMNodeClick) {
            e.stopPropagation();
          }

          onInspectIconClick(object, e);
        }
      });
    }
  }

  return span(baseConfig,
    ...elements,

renderLinkEditor(show: boolean, buttonRef: string, onConfirmUrl: Function) {
    return Overlay(
      {
        show: show,
        placement: 'bottom',
        container: document.body,
        target: () => this.refs[buttonRef],
      },
      Popover({id: 'popover'},
        D.div({className: 'input-group'},
          D.input({
            ref: 'url-input',
            className: 'form-control input-sm',
            type: 'text',
            value: this.state.urlValue,
            onChange: (e) => {
              const value = (e.target as any).value;
              this.setState({urlValue: value});
            },
            onKeyDown: (e: KeyboardEvent) => {
              if (e.which === 13 && this.state.urlValue !== '') { // enter
                onConfirmUrl();
              } else if (e.which === 27) { // esc
                this.hideLinkEditor();
              }
            },
          }),

renderExperimentalMessage(browserName) {
    const underConstructionMessage =
      "Debugging is experimental and certain features won't work (i.e, seeing variables, attaching breakpoints)"; // eslint-disable-line max-len

    return dom.div(
      { className: "under-construction" },
      dom.div(
        { className: "under-construction-message" },
        dom.p({}, underConstructionMessage),
        dom.img({ src: "/pad-assets/under_construction.png" }),
        dom.a(
          {
            className: "github-link",
            target: "_blank",
            href: docsUrls.github
          },
          "Help us make it happen"
        )
      )
    );
  }

'use strict';
var React = require('react');
var classSet = require('classnames');
var omit = require('just-omit');
var ReactDOM = require('react-dom-factories');

module.exports = r;

// Export the React.DOM html tags
for (var domTag in ReactDOM) {
  if (ReactDOM.hasOwnProperty(domTag)) {
    r[domTag] = createTagFn(domTag);
  }
}

function r(component, properties, children) {
  // A properties object is optional so shift arguments if missing
  if (!children && isChildren(properties)) {
    children = properties;
    properties = {};
  }

  properties = properties || {};

  if (properties.hasOwnProperty('isRendered') && !properties.isRendered) {
    // React skips the component rendering if render() returns null.
    return null;

renderExperimentalMessage(browserName) {
    const underConstructionMessage =
      "Debugging is experimental and certain features won't work (i.e, seeing variables, attaching breakpoints)"; // eslint-disable-line max-len

    return dom.div(
      { className: "under-construction" },
      dom.div(
        { className: "under-construction-message" },
        dom.p({}, underConstructionMessage),
        dom.img({ src: "/pad-assets/under_construction.png" }),
        dom.a(
          {
            className: "github-link",
            target: "_blank",
            href: docsUrls.github
          },
          "Help us make it happen"
        )
      )
    );
  }

appear: true,
                leave: true,
                timeout: {
                  appear: this.TRANSITION_TIME,
                  enter: this.TRANSITION_TIME,
                  exit: this.TRANSITION_TIME,
                }
              },
              D.span({
                className: 'object-representations-modal__nav fa fa-chevron-circle-right',
                onClick: this.nextModalImage.bind(this)
              })
            ),
          ] : []
        ),
        D.img({
          src: fullSizeImgURL,
          style: {
            width: this.state.focusedModalRep.isJust ? `${this.state.focusedModalRep.get().width}px` : '0px'
          }
        }),
      ) // end modal body
    ); // end modal
  }