Redesign key of preview child

[ovidiuch]

Redesign preview key—still based on fixture contents (entire fixture is too big for a key)

• Clicking on already selected fixture should reset fixture contents

Inspiration:

  children: {
    preview: function() {
      var params = {
        component: this.constructor.getSelectedComponentClass(this.props),
        // Child should re-render whenever fixture changes
        key: this._getPreviewComponentKey()
      };

      return _.merge(params, _.omit(this.state.fixtureContents, 'state'));
    }
  },

  _getPreviewComponentKey: function() {
    return this.props.component + '-' +
           this.props.fixture + '-' +
           this.state.previewKeySuffix;
  },

  componentDidUpdate: function(prevProps, prevState) {
    var fixtureChanged = this.props.component !== prevProps.component ||
                         this.props.fixture !== prevProps.fixture;

    if (this.refs.preview && (
        // Avoid deep comparing the fixture contents when component and/or
        // fixture changed, because it's more expensive
        fixtureChanged ||
        this.state.previewKeySuffix != prevState.previewKeySuffix)) {
      this._injectPreviewChildState();
    }
  },

  onFixtureChange: function(event) {
    var userInput = event.target.value;
    var newState = {
      fixtureUserInput: userInput,
      // TODO: Document why
      previewKeySuffix: ++this.state.previewKeySuffix
    };
    // ...
    // // route link to changed=true
  }