fix small code issues in RTE implementation

This commit is contained in:
Shawn Erquhart
2017-08-02 13:11:43 -04:00
parent 3d83325afc
commit 9c0b7262ef
11 changed files with 70 additions and 27 deletions

View File

@ -9,6 +9,10 @@ const style = {
fontFamily: 'Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif',
};
/**
* Use a stateful component so that child components can effectively utilize
* `shouldComponentUpdate`.
*/
export default class Preview extends React.Component {
render() {
const { collection, fields, widgetFor } = this.props;

View File

@ -1,9 +1,11 @@
import React, { PropTypes } from 'react';
import { ScrollSyncPane } from '../ScrollSync';
// We need to create a lightweight component here so that we can
// access the context within the Frame. This allows us to attach
// the ScrollSyncPane to the body.
/**
* We need to create a lightweight component here so that we can access the
* context within the Frame. This allows us to attach the ScrollSyncPane to the
* body.
*/
class PreviewContent extends React.Component {
render() {
const { previewComponent, previewProps } = this.props;

View File

@ -17,6 +17,9 @@ export default class PreviewPane extends React.Component {
const { fieldsMetaData, getAsset, entry } = props;
const widget = resolveWidget(field.get('widget'));
/**
* Use an HOC to provide conditional updates for all previews.
*/
return !widget.preview ? null : (
<PreviewHOC
previewComponent={widget.preview}

View File

@ -1,6 +1,5 @@
import React, { Component, PropTypes } from 'react';
import ImmutablePropTypes from "react-immutable-proptypes";
import isEqual from 'lodash/isEqual';
const truthy = () => ({ error: false });

View File

@ -19,7 +19,7 @@ import mdastDefinitions from 'mdast-util-definitions';
* Yields:
*
* ```
* ![alpha][http://example.com/example.jpg]
* ![alpha](http://example.com/example.jpg)
* ```
*
*/

View File

@ -1,10 +1,13 @@
import React from 'react';
class PreviewHOC extends React.Component {
/**
* Only re-render on value change, but always re-render objects and lists.
* Their child widgets will each also be wrapped with this component, and
* will only be updated on value change.
*/
shouldComponentUpdate(nextProps) {
// Only re-render on value change, but always re-render objects and lists.
// Their child widgets will each also be wrapped with this component, and
// will only be updated on value change.
const isWidgetContainer = ['object', 'list'].includes(nextProps.field.get('widget'));
return isWidgetContainer || this.props.value !== nextProps.value;
}