2018-05-07 17:41:22 +09:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2018-05-10 17:17:44 +09:00
|
|
|
import { Components, registerComponent, Locales } from 'meteor/vulcan:core';
|
2018-05-07 17:41:22 +09:00
|
|
|
|
|
|
|
class FormIntl extends PureComponent {
|
2018-05-21 09:42:08 +09:00
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
If translations already exist, try to make sure they're loaded and stored in the same order.
|
|
|
|
If not, use order of Locales array.
|
|
|
|
|
|
|
|
*/
|
|
|
|
getLocalePath = (locale, defaultIndex) => {
|
|
|
|
const translations = this.props.value;
|
|
|
|
const index = translations && !!translations.length ? translations.findIndex(t => t.locale === locale) : defaultIndex;
|
|
|
|
return `${this.props.path}_intl.${index}`;
|
|
|
|
}
|
|
|
|
|
2018-05-07 17:41:22 +09:00
|
|
|
render() {
|
2018-05-21 09:42:08 +09:00
|
|
|
|
2018-05-09 10:38:21 +09:00
|
|
|
// do not pass FormIntl's own value, inputProperties, and intlInput props down
|
|
|
|
const properties = _.omit(this.props, 'value', 'inputProperties', 'intlInput');
|
2018-05-07 17:41:22 +09:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="form-intl">
|
2018-05-21 09:42:08 +09:00
|
|
|
{Locales.map((locale, i) => (
|
2018-05-10 17:17:44 +09:00
|
|
|
<div className={`form-intl-${locale.id}`} key={locale.id}>
|
2018-05-21 09:42:08 +09:00
|
|
|
<Components.FormComponent {...properties} label={`${this.props.label} (${locale.id})`} path={this.getLocalePath(locale.id, i)} locale={locale.id} />
|
2018-05-07 17:41:22 +09:00
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
registerComponent('FormIntl', FormIntl);
|