plone / plone-react / 756

pending completion

Build # 756

Build Type

push

travis-ci

Committed by

sneridagh

Commit Message

<a href="https://github.com/plone/plone-react/commit/<a class=hub.com/plone/plone-react/commit/eb520f0c9a263b0b02dd5831d2c5ed97dcacf58d">eb520f0c9<a href="https://github.com/plone/plone-react/commit/eb520f0c9a263b0b02dd5831d2c5ed97dcacf58d">&quot;&gt;Revert &amp;quot;Fix double click on root&quot;

This reverts commit </a><a class="double-link" href="https://github.com/plone/plone-react/commit/<a class="double-link" href="https://github.com/plone/plone-react/commit/ab258d1b7faa0fee0f8fec2cbaed797f91f27ebc">ab258d1b7</a>">ab258d1b7</a><a href="https://github.com/plone/plone-react/commit/eb520f0c9a263b0b02dd5831d2c5ed97dcacf58d">.

Run Details

700 of 1437 branches covered (48.71%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

1121 of 1912 relevant lines covered (58.63%)

7.19 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

23.81

/src/components/manage/Tiles/Description/Edit.jsx

/**
 * Edit description tile.
 * @module components/manage/Tiles/Description/Edit
 */

import React, { Component } from 'react';
import { Map } from 'immutable';
import PropTypes from 'prop-types';
import { Button, Icon } from 'semantic-ui-react';
import { stateFromHTML } from 'draft-js-import-html';
import { Editor, DefaultDraftBlockRenderMap, EditorState } from 'draft-js';
import { defineMessages, injectIntl, intlShape } from 'react-intl';

const messages = defineMessages({
  description: {
    id: 'Description',
    defaultMessage: 'Description',
  },
});

const blockRenderMap = Map({
  unstyled: {
    element: 'p',
  },
});

const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);

@injectIntl
/**
 * Edit description tile class.
 * @class Edit
 * @extends Component
 */
export default class Edit extends Component {
  /**
   * Property types.
   * @property {Object} propTypes Property types.
   * @static
   */
  static propTypes = {
    properties: PropTypes.objectOf(PropTypes.any).isRequired,
    selected: PropTypes.bool.isRequired,
    tile: PropTypes.string.isRequired,
    intl: intlShape.isRequired,
    onChangeField: PropTypes.func.isRequired,
    onSelectTile: PropTypes.func.isRequired,
    onDeleteTile: PropTypes.func.isRequired,
  };

  /**
   * Constructor
   * @method constructor
   * @param {Object} props Component properties
   * @constructs WysiwygEditor
   */
  constructor(props) {
    super(props);

    if (!__SERVER__) {
      let editorState;
      if (props.properties && props.properties.description) {
        const contentState = stateFromHTML(props.properties.description);
        editorState = EditorState.createWithContent(contentState);
      } else {
        editorState = EditorState.createEmpty();
      }
      this.state = { editorState };
    }

    this.onChange = this.onChange.bind(this);
  }

  /**
   * Component will receive props
   * @method componentWillReceiveProps
   * @param {Object} nextProps Next properties
   * @returns {undefined}
   */
  componentWillReceiveProps(nextProps) {
    if (
      nextProps.properties.description &&
      this.props.properties.description !== nextProps.properties.description &&
      !this.props.selected
    ) {
      const contentState = stateFromHTML(nextProps.properties.description);
      this.setState({
        editorState: nextProps.properties.description
          ? EditorState.createWithContent(contentState)
          : EditorState.createEmpty(),
      });
    }
  }

  /**
   * Change handler
   * @method onChange
   * @param {object} editorState Editor state.
   * @returns {undefined}
   */
  onChange(editorState) {
    this.setState({ editorState });
    this.props.onChangeField(
      'description',
      editorState.getCurrentContent().getPlainText(),
    );
  }

  /**
   * Render method.
   * @method render
   * @returns {string} Markup for the component.
   */
  render() {
    if (__SERVER__) {
      return <div />;
    }
    return (
      <div
        onClick={() => this.props.onSelectTile(this.props.tile)}
        className={`tile description${this.props.selected ? ' selected' : ''}`}
      >
        {this.props.selected && (
          <div className="toolbar">
            <Button.Group>
              <Button
                icon
                basic
                onClick={() => this.props.onDeleteTile(this.props.tile)}
              >
                <Icon name="trash" />
              </Button>
            </Button.Group>
          </div>
        )}
        <Editor
          onChange={this.onChange}
          editorState={this.state.editorState}
          blockRenderMap={extendedBlockRenderMap}
          placeholder={this.props.intl.formatMessage(messages.description)}
          handleReturn={() => true}
          blockStyleFn={() => 'documentDescription'}
        />
      </div>
    );
  }
}

1	/**
2	* Edit description tile.
3	* @module components/manage/Tiles/Description/Edit
4	*/
5
6	import React, { Component } from 'react';
7	import { Map } from 'immutable';
8	import PropTypes from 'prop-types';
9	import { Button, Icon } from 'semantic-ui-react';
10	import { stateFromHTML } from 'draft-js-import-html';
11	import { Editor, DefaultDraftBlockRenderMap, EditorState } from 'draft-js';
12	import { defineMessages, injectIntl, intlShape } from 'react-intl';
13
14	const messages = defineMessages({	38✔
15	description: {
16	id: 'Description',
17	defaultMessage: 'Description',
18	},
19	});
20
21	const blockRenderMap = Map({	38✔
22	unstyled: {
23	element: 'p',
24	},
25	});
26
27	const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);	38✔
28
29	@injectIntl
30	/**
31	* Edit description tile class.
32	* @class Edit
33	* @extends Component
34	*/
35	export default class Edit extends Component {
36	/**
37	* Property types.
38	* @property {Object} propTypes Property types.
39	* @static
40	*/
41	static propTypes = {
42	properties: PropTypes.objectOf(PropTypes.any).isRequired,
43	selected: PropTypes.bool.isRequired,
44	tile: PropTypes.string.isRequired,
45	intl: intlShape.isRequired,
46	onChangeField: PropTypes.func.isRequired,
47	onSelectTile: PropTypes.func.isRequired,
48	onDeleteTile: PropTypes.func.isRequired,
49	};
50
51	/**
52	* Constructor
53	* @method constructor
54	* @param {Object} props Component properties
55	* @constructs WysiwygEditor
56	*/
57	constructor(props) {
58	super(props);	1✔
59
60	if (!__SERVER__) {	1!
61	let editorState;
62	if (props.properties && props.properties.description) {	×
63	const contentState = stateFromHTML(props.properties.description);	×
64	editorState = EditorState.createWithContent(contentState);	×
65	} else {
66	editorState = EditorState.createEmpty();	×
67	}
68	this.state = { editorState };	×
69	}
70
71	this.onChange = this.onChange.bind(this);	1✔
72	}
73
74	/**
75	* Component will receive props
76	* @method componentWillReceiveProps
77	* @param {Object} nextProps Next properties
78	* @returns {undefined}
79	*/
80	componentWillReceiveProps(nextProps) {
81	if (	×
82	nextProps.properties.description &&	×
83	this.props.properties.description !== nextProps.properties.description &&
84	!this.props.selected
85	) {
86	const contentState = stateFromHTML(nextProps.properties.description);	×
87	this.setState({	×
88	editorState: nextProps.properties.description	×
89	? EditorState.createWithContent(contentState)
90	: EditorState.createEmpty(),
91	});
92	}
93	}
94
95	/**
96	* Change handler
97	* @method onChange
98	* @param {object} editorState Editor state.
99	* @returns {undefined}
100	*/
101	onChange(editorState) {
102	this.setState({ editorState });	×
103	this.props.onChangeField(	×
104	'description',
105	editorState.getCurrentContent().getPlainText(),
106	);
107	}
108
109	/**
110	* Render method.
111	* @method render
112	* @returns {string} Markup for the component.
113	*/
114	render() {
115	if (__SERVER__) {	1!
116	return <div />;	1✔
117	}
118	return (	×
119	<div
120	onClick={() => this.props.onSelectTile(this.props.tile)}	×
121	className={`tile description${this.props.selected ? ' selected' : ''}`}	×
122	>
123	{this.props.selected && (	×
124	<div className="toolbar">
125	<Button.Group>
126	<Button
127	icon
128	basic
129	onClick={() => this.props.onDeleteTile(this.props.tile)}	×
130	>
131	<Icon name="trash" />
132	</Button>
133	</Button.Group>
134	</div>
135	)}
136	<Editor
137	onChange={this.onChange}
138	editorState={this.state.editorState}
139	blockRenderMap={extendedBlockRenderMap}
140	placeholder={this.props.intl.formatMessage(messages.description)}
141	handleReturn={() => true}	×
142	blockStyleFn={() => 'documentDescription'}	×
143	/>
144	</div>
145	);
146	}
147	}

plone / plone-react / 756

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous