/
index.js
127 lines (112 loc) · 2.97 KB
/
index.js
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
/**
* External dependencies
*/
import { connect } from 'react-redux';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import { flowRight } from 'lodash';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { dateI18n, settings } from '@wordpress/date';
import { PanelRow, Popover, withAPIData } from '@wordpress/components';
/**
* Internal dependencies
*/
import './style.scss';
import PostScheduleClock from './clock';
import { getEditedPostAttribute } from '../../selectors';
import { editPost } from '../../actions';
export class PostSchedule extends Component {
constructor() {
super( ...arguments );
this.toggleDialog = this.toggleDialog.bind( this );
this.closeDialog = this.closeDialog.bind( this );
this.state = {
opened: false,
};
}
toggleDialog() {
this.setState( ( state ) => ( { opened: ! state.opened } ) );
}
closeDialog() {
this.setState( { opened: false } );
}
render() {
const { date, onUpdateDate, user } = this.props;
if ( ! user.data || ! user.data.capabilities.publish_posts ) {
return null;
}
const momentDate = date ? moment( date ) : moment();
const label = date
? dateI18n( settings.formats.datetime, date )
: __( 'Immediately' );
const handleChange = ( newDate ) => {
onUpdateDate( newDate.format( 'YYYY-MM-DDTHH:mm:ss' ) );
};
// To know if the current timezone is a 12 hour time with look for "a" in the time format
// We also make sure this a is not escaped by a "/"
const is12HourTime = /a(?!\\)/i.test(
settings.formats.time
.toLowerCase() // Test only the lower case a
.replace( /\\\\/g, '' ) // Replace "//" with empty strings
.split( '' ).reverse().join( '' ) // Reverse the string and test for "a" not followed by a slash
);
return (
<PanelRow className="editor-post-schedule">
<span>{ __( 'Publish' ) }</span>
<button
type="button"
className="editor-post-schedule__toggle button-link"
onClick={ this.toggleDialog }
aria-expanded={ this.state.opened }
>
{ label }
<Popover
position="bottom left"
isOpen={ this.state.opened }
onClose={ this.closeDialog }
className="editor-post-schedule__dialog"
>
<DatePicker
inline
selected={ momentDate }
onChange={ handleChange }
locale={ settings.l10n.locale }
/>
<PostScheduleClock
selected={ momentDate }
onChange={ handleChange }
is12Hour={ is12HourTime }
/>
</Popover>
</button>
</PanelRow>
);
}
}
const applyConnect = connect(
( state ) => {
return {
date: getEditedPostAttribute( state, 'date' ),
};
},
( dispatch ) => {
return {
onUpdateDate( date ) {
dispatch( editPost( { date } ) );
},
};
}
);
const applyWithAPIData = withAPIData( () => {
return {
user: '/wp/v2/users/me?context=edit',
};
} );
export default flowRight(
applyConnect,
applyWithAPIData
)( PostSchedule );