/
index.jsx
130 lines (112 loc) · 3.03 KB
/
index.jsx
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/**
* External dependencies
*/
import ReactDom from 'react-dom';
import React, { PropTypes } from 'react';
import PureRenderMixin from 'react-pure-render/mixin';
import classNames from 'classnames';
import noop from 'lodash/noop';
/**
* Internal Dependencies
*/
import actions from 'lib/posts/actions';
import TrackInputChanges from 'components/track-input-changes';
import FormTextInput from 'components/forms/form-text-input';
import { recordStat, recordEvent } from 'lib/posts/stats';
export default React.createClass( {
displayName: 'PostEditorSlug',
mixins: [ PureRenderMixin ],
propTypes: {
path: PropTypes.string,
slug: PropTypes.string,
onEscEnter: PropTypes.func,
className: PropTypes.string,
isEditable: PropTypes.bool,
postType: PropTypes.string,
instanceName: PropTypes.string
},
getDefaultProps() {
return {
onEscEnter: noop,
isEditable: true
};
},
getInitialState() {
return {
isSlugFocused: false
};
},
onSlugChange( event ) {
// TODO: REDUX - remove flux actions when whole post-editor is reduxified
actions.edit( { slug: event.target.value } );
},
onSlugKeyDown( event ) {
if ( event.key === 'Enter' || event.key === 'Escape' ) {
this.setState( { isSlugFocused: false }, function() {
this.props.onEscEnter();
if ( this.props.isEditable ) {
ReactDom.findDOMNode( this.refs.slugField ).blur();
}
} );
}
},
onBlur() {
if ( this.state.isSlugFocused ) {
this.setState( { isSlugFocused: false } );
}
},
onFocus() {
this.setState( { isSlugFocused: true } );
},
focusSlug() {
if ( this.props.isEditable ) {
ReactDom.findDOMNode( this.refs.slugField ).focus();
}
},
recordChangeStats() {
switch ( this.props.instanceName ) {
case 'post-sidebar':
recordStat( 'slug-edited-post-sidebar' );
recordEvent( 'Slug Edited (Post Sidebar)' );
break;
case 'post-popover':
recordStat( 'slug-edited-post-popover' );
recordEvent( 'Slug Edited (Post Permalink Popover)' );
break;
case 'page-sidebar':
recordStat( 'slug-edited-page-sidebar' );
recordEvent( 'Slug Edited (Page Sidebar)' );
break;
case 'page-permalink':
recordStat( 'slug-edited-page-permalink' );
recordEvent( 'Slug Edited (Page Permalink)' );
break;
}
},
render() {
const wrapperClass = classNames( 'editor-slug', this.props.className, {
'is-focused': this.state.isSlugFocused
} );
return (
<div className={ wrapperClass } onClick={ this.focusSlug }>
{ this.props.children }
<span className="editor-slug__url-path" onClick={ this.focusSlug }>{ this.props.path }</span>
{ this.props.isEditable ?
<TrackInputChanges onNewValue={ this.recordChangeStats }>
<FormTextInput
ref="slugField"
value={ this.props.slug ? this.props.slug : '' }
onChange={ this.onSlugChange }
onKeyDown={ this.onSlugKeyDown }
onBlur={ this.onBlur }
onFocus={ this.onFocus }
aria-label={ this.translate( 'Enter slug' ) }
/>
</TrackInputChanges>
:
null
}
</div>
);
}
} );