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

Use React.useContext instead of Context.Consumer

Browse Source
This commit is contained in:
Amine Ben hammou
2019-07-11 18:40:15 +01:00
committed by M. Shull
parent a327d7f80a
commit a49a6a6a65
1 changed files with 52 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
View File

@@ -8,69 +8,60 @@ function SelectImportMethod({
activeMethod, activeMethod,
onMethodChange, onMethodChange,
}) { }) {
const renderSelection = () => ( const { isNewUser } = React.useContext(ImportContext);
<form className="mailpoet_import_selection_form"> const badgeClasses = classNames(
<span className="mailpoet_import_heading">{MailPoet.I18n.t('methodSelectionHead')}</span> 'mailpoet_badge',
<label htmlFor="import-paste-method"> 'mailpoet_badge_video',
<input { mailpoet_badge_video_grey: !isNewUser }
type="radio"
name="select_method"
data-automation-id="import-paste-method"
id="import-paste-method"
checked={activeMethod === 'paste-method'}
onChange={() => onMethodChange('paste-method')}
/>
{MailPoet.I18n.t('methodPaste')}
</label>
<label htmlFor="import-csv-method">
<input
type="radio"
name="select_method"
data-automation-id="import-csv-method"
id="import-csv-method"
checked={activeMethod === 'file-method'}
onChange={() => onMethodChange('file-method')}
/>
{MailPoet.I18n.t('methodUpload')}
</label>
<label htmlFor="import-mailchimp-method">
<input
type="radio"
name="select_method"
data-automation-id="import-mailchimp-method"
id="import-mailchimp-method"
checked={activeMethod === 'mailchimp-method'}
onChange={() => onMethodChange('mailchimp-method')}
/>
{MailPoet.I18n.t('methodMailChimp')}
</label>
</form>
); );
return ( return (
<ImportContext.Consumer> <>
{({ isNewUser }) => { <form className="mailpoet_import_selection_form">
const badgeClasses = classNames( <span className="mailpoet_import_heading">{MailPoet.I18n.t('methodSelectionHead')}</span>
'mailpoet_badge', <label htmlFor="import-paste-method">
'mailpoet_badge_video', <input
{ mailpoet_badge_video_grey: !isNewUser } type="radio"
); name="select_method"
return ( data-automation-id="import-paste-method"
<> id="import-paste-method"
{renderSelection()} checked={activeMethod === 'paste-method'}
<a onChange={() => onMethodChange('paste-method')}
className={badgeClasses} />
href="https://kb.mailpoet.com/article/242-video-guide-importing-subscribers-using-a-csv-file" {MailPoet.I18n.t('methodPaste')}
target="_blank" </label>
rel="noopener noreferrer" <label htmlFor="import-csv-method">
> <input
<span className="dashicons dashicons-format-video" /> type="radio"
{MailPoet.I18n.t('seeVideo')} name="select_method"
</a> data-automation-id="import-csv-method"
</> id="import-csv-method"
); checked={activeMethod === 'file-method'}
}} onChange={() => onMethodChange('file-method')}
</ImportContext.Consumer> />
{MailPoet.I18n.t('methodUpload')}
</label>
<label htmlFor="import-mailchimp-method">
<input
type="radio"
name="select_method"
data-automation-id="import-mailchimp-method"
id="import-mailchimp-method"
checked={activeMethod === 'mailchimp-method'}
onChange={() => onMethodChange('mailchimp-method')}
/>
{MailPoet.I18n.t('methodMailChimp')}
</label>
</form>
<a
className={badgeClasses}
href="https://kb.mailpoet.com/article/242-video-guide-importing-subscribers-using-a-csv-file"
target="_blank"
rel="noopener noreferrer"
>
<span className="dashicons dashicons-format-video" />
{MailPoet.I18n.t('seeVideo')}
</a>
</>
); );
} }