Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

fixed react forms (new bug discovered on new forms with default values not saved)

Browse Source
This commit is contained in:
Jonathan Labreuille
2016-05-18 16:06:31 +02:00
parent 0c8a8c6854
commit 046127eeba
17 changed files with 164 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/js/src/form/fields/date.jsx
View File

@@ -9,6 +9,13 @@ define([
render() {
const yearsRange = 100;
const years = [];
if (this.props.empty_value_label !== undefined) {
years.push((
<option value="" key={ 0 }>{ this.props.empty_value_label }</option>
));
}
const currentYear = Moment().year();
for (let i = currentYear; i >= currentYear - yearsRange; i--) {
years.push((
@@ -33,6 +40,13 @@ define([
class FormFieldDateMonth extends React.Component {
render() {
const months = [];
if (this.props.empty_value_label !== undefined) {
months.push((
<option value="" key={ 0 }>{ this.props.empty_value_label }</option>
));
}
for (let i = 1; i <= 12; i++) {
months.push((
<option
@@ -56,6 +70,13 @@ define([
class FormFieldDateDay extends React.Component {
render() {
const days = [];
if (this.props.empty_value_label !== undefined) {
days.push((
<option value="" key={ 0 }>{ this.props.empty_value_label }</option>
));
}
for (let i = 1; i <= 31; i++) {
days.push((
<option
@@ -81,9 +102,9 @@ define([
constructor(props) {
super(props);
this.state = {
year: Moment().year(),
month: 1,
day: 1
year: undefined,
month: undefined,
day: undefined
}
}
componentDidMount() {
@@ -112,7 +133,7 @@ define([
`${this.state.month}/${this.state.day}/${this.state.year}`,
'M/D/YYYY'
).valueOf();
if (!isNaN(newTimeStamp) && parseInt(newTimeStamp, 10) > 0) {
if (~~(newTimeStamp) > 0) {
// convert milliseconds to seconds
newTimeStamp /= 1000;
return this.props.onValueChange({
@@ -158,6 +179,7 @@ define([
key={ 'year' }
name={ this.props.field.name }
year={ this.state.year }
empty_value_label={ this.props.field.empty_year_label }
/>);
break;
@@ -169,6 +191,7 @@ define([
name={ this.props.field.name }
month={ this.state.month }
monthNames={ monthNames }
empty_value_label={ this.props.field.empty_month_label }
/>);
break;
@@ -179,6 +202,7 @@ define([
key={ 'day' }
name={ this.props.field.name }
day={ this.state.day }
empty_value_label={ this.props.field.empty_day_label }
/>);
break;
}

22
assets/js/src/form/fields/select.jsx
View File

@@ -10,12 +10,27 @@ function(
return false;
}
var values = (this.props.field.filterValues !== undefined)
? this.props.field.filterValues(this.props.item)
: this.props.field.values;
let values = this.props.field.values;
let filter = false;
let empty_option = false;
if (this.props.field.empty_value_label !== undefined) {
empty_option = (
<option value="">{ this.props.field.empty_value_label }</option>
);
}
if (this.props.field['filter'] !== undefined) {
filter = this.props.field.filter;
}
const options = Object.keys(values).map(
(value, index) => {
if (filter !== false && filter(this.props.item, value) === false) {
return;
}
return (
<option
key={ 'option-' + index }
@@ -34,6 +49,7 @@ function(
onChange={ this.props.onValueChange }
{...this.props.field.validation}
>
{empty_option}
{options}
</select>
);

8
assets/js/src/form/fields/text.jsx
View File

@@ -4,9 +4,9 @@ define([
function(
React
) {
var FormFieldText = React.createClass({
const FormFieldText = React.createClass({
render: function() {
var value = this.props.item[this.props.field.name];
let value = this.props.item[this.props.field.name];
if(value === undefined) {
value = this.props.field.defaultValue || '';
}
@@ -15,9 +15,9 @@ function(
<input
type="text"
disabled={
(this.props.field.disabled !== undefined)
(this.props.field['disabled'] !== undefined)
? this.props.field.disabled(this.props.item)
: ''
: false
}
className={ (this.props.field.size) ? '' : 'regular-text' }
size={

17
assets/js/src/form/form.jsx
View File

@@ -37,9 +37,13 @@ define(
return this.props.errors ? this.props.errors : this.state.errors;
},
componentDidMount: function() {
if(this.props.params.id !== undefined) {
if(this.isMounted()) {
if(this.isMounted()) {
if(this.props.params.id !== undefined) {
this.loadItem(this.props.params.id);
} else {
this.setState({
item: jQuery('.mailpoet_form').serializeObject()
});
}
}
},
@@ -167,12 +171,15 @@ define(
{ 'mailpoet_form_loading': this.state.loading || this.props.loading }
);
var beforeFormContent = false;
var afterFormContent = false;
if (this.props.beforeFormContent !== undefined) {
var beforeFormContent = this.props.beforeFormContent(this.getValues())
beforeFormContent = this.props.beforeFormContent(this.getValues());
}
if (this.props.afterFormContent !== undefined) {
var afterFormContent = this.props.afterFormContent(this.getValues())
afterFormContent = this.props.afterFormContent(this.getValues());
}
var fields = this.props.fields.map(function(field, i) {
@@ -200,7 +207,7 @@ define(
return (
<div>
{ beforeFormContent }
{ beforeFormContent }
<form
id={ this.props.id }
ref="form"

70
assets/js/src/subscribers/form.jsx
View File

@@ -3,13 +3,15 @@ define(
'react',
'react-router',
'mailpoet',
'form/form.jsx'
'form/form.jsx',
'react-string-replace'
],
function(
React,
Router,
MailPoet,
Form
Form,
ReactStringReplace
) {
var fields = [
{
@@ -17,7 +19,7 @@ define(
label: MailPoet.I18n.t('email'),
type: 'text',
disabled: function(subscriber) {
if (subscriber.wp_user_id !== null) return 'disabled';
return ~~(subscriber.wp_user_id > 0);
}
},
{
@@ -25,7 +27,7 @@ define(
label: MailPoet.I18n.t('firstname'),
type: 'text',
disabled: function(subscriber) {
if (subscriber.wp_user_id !== null) return 'disabled';
return ~~(subscriber.wp_user_id > 0);
}
},
{
@@ -33,7 +35,7 @@ define(
label: MailPoet.I18n.t('lastname'),
type: 'text',
disabled: function(subscriber) {
if (subscriber.wp_user_id !== null) return 'disabled';
return ~~(subscriber.wp_user_id > 0);
}
},
{
@@ -41,15 +43,15 @@ define(
label: MailPoet.I18n.t('status'),
type: 'select',
values: {
'unconfirmed': MailPoet.I18n.t('unconfirmed'),
'subscribed': MailPoet.I18n.t('subscribed'),
'unconfirmed': MailPoet.I18n.t('unconfirmed'),
'unsubscribed': MailPoet.I18n.t('unsubscribed')
},
filterValues: function(subscriber) {
if (subscriber.wp_user_id !== null) {
delete this.values.unconfirmed;
filter: function(subscriber, value) {
if (~~(subscriber.wp_user_id) > 0 && value === 'unconfirmed') {
return false;
}
return this.values;
return true;
}
},
{
@@ -115,6 +117,19 @@ define(
field.values = custom_field.params.values;
}
// add empty values' label for selects (date, select)
switch(custom_field.type) {
case 'date':
field.empty_year_label = MailPoet.I18n.t('year');
field.empty_month_label = MailPoet.I18n.t('month');
field.empty_day_label = MailPoet.I18n.t('day');
break;
case 'select':
field.empty_value_label = '-';
break;
}
fields.push(field);
});
@@ -128,17 +143,35 @@ define(
};
var beforeFormContent = function(subscriber) {
if (subscriber.wp_user_id !== null) {
var content =
'<p>' +
MailPoet.I18n.t('wordPressUserNotice')
.replace('[link]', '<a href="user-edit.php?user_id=' + subscriber.wp_user_id + '">')
.replace('[/link]', '</a>') +
'</p>';
return <div dangerouslySetInnerHTML={ {__html: content} } />
if (~~(subscriber.wp_user_id) > 0) {
return (
<p className="description">
{ ReactStringReplace(
MailPoet.I18n.t('WPUserEditNotice'),
/\[link\](.*?)\[\/link\]/g,
(match, i) => (
<a
key={ i }
href={`user-edit.php?user_id=${ subscriber.wp_user_id }`}
>{ match }</a>
)
)
}
</p>
);
}
};
var afterFormContent = function(subscriber) {
return (
<p className="description">
<strong>
{ MailPoet.I18n.t('tip') }
</strong> { MailPoet.I18n.t('customFieldsTip') }
</p>
);
}
var Link = Router.Link;
var SubscriberForm = React.createClass({
@@ -156,6 +189,7 @@ define(
params={ this.props.params }
messages={ messages }
beforeFormContent={ beforeFormContent }
afterFormContent={ afterFormContent }
/>
</div>
);

32
assets/js/src/subscribers/list.jsx
View File

@@ -213,16 +213,6 @@ const bulk_actions = [
);
}
},
/* {
name: 'confirmUnconfirmed',
label: MailPoet.I18n.t('confirmUnconfirmed'),
onSuccess: function(response) {
MailPoet.Notice.success(
MailPoet.I18n.t('multipleSubscribersConfirmed')
.replace('%$1d', ~~response)
);
}
},*/
{
name: 'sendConfirmationEmail',
label: MailPoet.I18n.t('resendConfirmationEmail'),
@@ -290,10 +280,15 @@ const SubscriberList = React.createClass({
}
let segments = false;
let subscribed_segments = [];
// WordPress Users
if (~~(subscriber.wp_user_id) > 0) {
subscribed_segments.push(MailPoet.I18n.t('WPUsersSegment'));
}
// Subscriptions
if (subscriber.subscriptions.length > 0) {
let subscribed_segments = [];
subscriber.subscriptions.map((subscription) => {
const segment = this.getSegmentFromId(subscription.segment_id);
if(segment === false) return;
@@ -301,15 +296,14 @@ const SubscriberList = React.createClass({
subscribed_segments.push(segment.name);
}
});
segments = (
<span>
<span className="mailpoet_segments_subscribed">
{ subscribed_segments.join(', ') }
</span>
</span>
);
}
segments = (
<span>
{ subscribed_segments.join(', ') }
</span>
);
let avatar = false;
if(subscriber.avatar_url) {
avatar = (