yoga/website/src/components/DocsSidebar.js

/**
 * Copyright (c) 2014-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @flow
 * @format
 */

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import EditValue from '../components/Playground/EditValue';
import Link from 'gatsby-link';
import './DocsSidebar.css';
import type {LayoutRecordT} from './Playground/LayoutRecord';

const TAG_PATTERN = /<controls prop="([A-Za-z]+)"><\/controls>/gi;

type Props = {
  markdown: string,
  onChange: (property: string, value: any) => void,
  layout: LayoutRecordT,
};

export default class DocsSidebar extends Component<Props> {
  componentDidMount() {
    this.renderControls(this.props);
  }

  componentWillReceiveProps(nextProps: Props) {
    this.renderControls(nextProps);
  }

  renderControls = (props: Props) => {
    let match;
    while ((match = TAG_PATTERN.exec(props.markdown))) {
      const prop = match[1];
      const element = window.document.querySelector(
        `controls[prop="${match[1]}"]`,
      );

      if (element) {
        if (element.childNodes.length !== 0) {
          console.warn(
            `The element <controls type="${prop}"> is not empty. It's content will be replaced by the react-component mounted in this element.`,
          );
        }
        ReactDOM.render(
          <EditValue
            property={prop}
            value={props.layout[prop]}
            onChange={props.onChange}
          />,
          element,
        );
      }
    }
  };

  render() {
    return (
      <div className="DocsSidebar">
        <div
          className="markdown"
          dangerouslySetInnerHTML={{__html: this.props.markdown}}
        />
        <Link to="/docs" className="overview">
          BACK TO OVERVIEW
        </Link>
      </div>
    );
  }
}