Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 4x 4x 4x 4x 4x 4x 4x 4x 7x 7x 8x 8x 8x 8x 8x 8x 8x 4x 4x 4x | var React = require('react'); var ReactDOM = require('react-dom'); var Reflux = require('reflux'); var createClass = require('create-react-class'); var MarkdownEditorActions = require('../actions/MarkdownEditorActions'); var MarkdownEditorTabsInteractionStore = require('../stores/MarkdownEditorTabsInteractionStore'); var objectAssign = require('object-assign'); var MarkdownEditorTabs = createClass({ mixins: [Reflux.ListenerMixin], getInitialState: function() { return { activeTab: 0 }; }, componentWillMount: function() { this.listenTo(MarkdownEditorTabsInteractionStore, this.handleMDEditorTabsInteractionStoreUpdated); }, handleMDEditorTabsInteractionStoreUpdated: function(storeState) { if (storeState.activeTab != null) { this.setState({activeTab: storeState.activeTab}); } }, render: function() { var styleActiveTab = objectAssign({}, MarkdownEditorTabs.defaultProps.styles.styleActiveTab, this.props.styles.styleActiveTab); var styleMarkdownEditorTabs = objectAssign({}, MarkdownEditorTabs.defaultProps.styles.styleMarkdownEditorTabs, this.props.styles.styleMarkdownEditorTabs); var styleTab = objectAssign({}, MarkdownEditorTabs.defaultProps.styles.styleTab, this.props.styles.styleTab); var editorTabStyle; var previewTabStyle; Eif (this.state.activeTab === 0) { editorTabStyle = styleActiveTab; previewTabStyle = styleTab; } else if (this.state.activeTab === 1) { previewTabStyle = styleActiveTab; editorTabStyle = styleTab; } return ( <div style={styleMarkdownEditorTabs} className='md-editor-tabs'> <div style={editorTabStyle} className="md-editor-tabs-item" onClick={this.handleClick.bind(this, 'clickEditorTab')}> <span>Editor</span> </div> <div style={previewTabStyle} className="md-editor-tabs-item" onClick={this.handleClick.bind(this, 'clickPreviewTab')}> <span>Preview</span> </div> </div> ); }, handleClick: function(actionName) { MarkdownEditorActions[actionName](); } }); MarkdownEditorTabs.defaultProps = { styles : { styleMarkdownEditorTabs : { 'border': 'none', 'display': 'flex', 'justifyContent': 'flex-start' }, styleTab : { padding: '0px 20px', cursor: 'pointer', display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50px' }, styleActiveTab : { padding: '0px 20px', cursor: 'pointer', display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50px', borderLeft: '1px solid #ddd', borderRight: '1px solid #ddd', borderTop: '1px solid #ddd', backgroundColor: '#fff', borderRadius: '3px' } } } MarkdownEditorTabs.displayName = 'MarkdownEditorTabs'; module.exports = MarkdownEditorTabs; |