Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding test to timed text editor #193

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
Moving out dependencies of CusomEditor and the component itself outsi…
…de, and refactor
Eimi Okuno authored and Eimi Okuno committed Sep 17, 2019
commit b69747c3f5be87822952c9f41022a940b06ffa86
73 changes: 73 additions & 0 deletions packages/components/timed-text-editor/CustomEditor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// TODO: move CustomEditor in separate file
import React from 'react';
import PropTypes from 'prop-types';

import { Editor } from 'draft-js';

import WrapperBlock from './WrapperBlock';

class CustomEditor extends React.Component {

handleWordClick = (e) => {
this.props.onWordClick(e);
}

renderBlockWithTimecodes = () => {
return {
component: WrapperBlock,
editable: true,
props: {
showSpeakers: this.props.showSpeakers,
showTimecodes: this.props.showTimecodes,
timecodeOffset: this.props.timecodeOffset,
editorState: this.props.editorState,
setEditorNewContentState: this.props.setEditorNewContentState,
onWordClick: this.handleWordClick,
handleAnalyticsEvents: this.props.handleAnalyticsEvents
}
};
}

shouldComponentUpdate(nextProps) {
// https://stackoverflow.com/questions/39182657/best-performance-method-to-check-if-contentstate-changed-in-draftjs-or-just-edi
if (nextProps.editorState !== this.props.editorState) {
return true;
}

return false;
}

handleOnChange = (e) => {
this.props.onChange(e);
}

render() {
return (
<Editor
editorState={ this.props.editorState }
onChange={ this.handleOnChange }
stripPastedStyles
blockRendererFn={ this.renderBlockWithTimecodes }
handleKeyCommand={ this.props.handleKeyCommand }
keyBindingFn={ this.props.customKeyBindingFn }
spellCheck={ this.props.spellCheck }
/>
);
}
}

CustomEditor.propTypes = {
customKeyBindingFn: PropTypes.any,
editorState: PropTypes.any,
handleAnalyticsEvents: PropTypes.any,
handleKeyCommand: PropTypes.any,
onChange: PropTypes.any,
onWordClick: PropTypes.any,
setEditorNewContentState: PropTypes.any,
showSpeakers: PropTypes.any,
showTimecodes: PropTypes.any,
spellCheck: PropTypes.any,
timecodeOffset: PropTypes.any
};

export default CustomEditor;
57 changes: 2 additions & 55 deletions packages/components/timed-text-editor/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import CustomEditor from './CustomEditor';

import {
Editor,
EditorState,
CompositeDecorator,
convertFromRaw,
@@ -12,8 +12,6 @@ import {
} from 'draft-js';

import Word from './Word';
import WrapperBlock from './WrapperBlock';

// TODO: connect to local packages version
// import sttJsonAdapter from '../../Util/adapters/index.js';
import sttJsonAdapter from '../../stt-adapters';
@@ -605,55 +603,4 @@ TimedTextEditor.propTypes = {
fileName: PropTypes.string
};

export default TimedTextEditor;

// TODO: move CustomEditor in separate file
class CustomEditor extends React.Component {

handleWordClick = (e) => {
this.props.onWordClick(e);
}

renderBlockWithTimecodes = () => {
return {
component: WrapperBlock,
editable: true,
props: {
showSpeakers: this.props.showSpeakers,
showTimecodes: this.props.showTimecodes,
timecodeOffset: this.props.timecodeOffset,
editorState: this.props.editorState,
setEditorNewContentState: this.props.setEditorNewContentState,
onWordClick: this.handleWordClick,
handleAnalyticsEvents: this.props.handleAnalyticsEvents
}
};
}

shouldComponentUpdate(nextProps) {
// https://stackoverflow.com/questions/39182657/best-performance-method-to-check-if-contentstate-changed-in-draftjs-or-just-edi
if (nextProps.editorState !== this.props.editorState) {
return true;
}

return false;
}

handleOnChange = (e) => {
this.props.onChange(e);
}

render() {
return (
<Editor
editorState={ this.props.editorState }
onChange={ this.handleOnChange }
stripPastedStyles
blockRendererFn={ this.renderBlockWithTimecodes }
handleKeyCommand={ this.props.handleKeyCommand }
keyBindingFn={ this.props.customKeyBindingFn }
spellCheck={ this.props.spellCheck }
/>
);
}
}
export default TimedTextEditor;