|
|
@@ -19,21 +19,72 @@ |
|
|
|
*/ |
|
|
|
// @flow |
|
|
|
import React from 'react'; |
|
|
|
import PropTypes from 'prop-types'; |
|
|
|
import Modal from 'react-modal'; |
|
|
|
import { getSettingValue, isEmptyValue, getDefaultValue } from '../utils'; |
|
|
|
import { translate } from '../../../helpers/l10n'; |
|
|
|
|
|
|
|
/*:: |
|
|
|
type Props = { |
|
|
|
isDefault: boolean, |
|
|
|
onReset: () => void, |
|
|
|
setting: Object |
|
|
|
}; |
|
|
|
*/ |
|
|
|
/*:: |
|
|
|
type State = { reseting: boolean }; |
|
|
|
*/ |
|
|
|
|
|
|
|
export default class DefinitionDefaults extends React.PureComponent { |
|
|
|
static propTypes = { |
|
|
|
setting: PropTypes.object.isRequired, |
|
|
|
isDefault: PropTypes.bool.isRequired, |
|
|
|
onReset: PropTypes.func.isRequired |
|
|
|
/*:: props: Props; */ |
|
|
|
state /*: State*/ = { reseting: false }; |
|
|
|
|
|
|
|
handleClose = () => { |
|
|
|
this.setState({ reseting: false }); |
|
|
|
}; |
|
|
|
|
|
|
|
handleReset(e /*: Object */) { |
|
|
|
handleReset = (e /*: Event & {target: HTMLElement} */) => { |
|
|
|
e.preventDefault(); |
|
|
|
e.target.blur(); |
|
|
|
this.setState({ reseting: true }); |
|
|
|
}; |
|
|
|
|
|
|
|
handleSubmit = (event /*: Event */) => { |
|
|
|
event.preventDefault(); |
|
|
|
this.props.onReset(); |
|
|
|
this.handleClose(); |
|
|
|
}; |
|
|
|
|
|
|
|
renderModal() { |
|
|
|
const header = translate('settings.reset_confirm.title'); |
|
|
|
return ( |
|
|
|
<Modal |
|
|
|
isOpen={true} |
|
|
|
contentLabel={header} |
|
|
|
className="modal" |
|
|
|
overlayClassName="modal-overlay" |
|
|
|
onRequestClose={this.handleClose}> |
|
|
|
<header className="modal-head"> |
|
|
|
<h2> |
|
|
|
{header} |
|
|
|
</h2> |
|
|
|
</header> |
|
|
|
<form onSubmit={this.handleSubmit}> |
|
|
|
<div className="modal-body"> |
|
|
|
<p> |
|
|
|
{translate('settings.reset_confirm.description')} |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<footer className="modal-foot"> |
|
|
|
<button className="button-red"> |
|
|
|
{translate('reset_verb')} |
|
|
|
</button> |
|
|
|
<button type="reset" className="button-link" onClick={this.handleClose}> |
|
|
|
{translate('cancel')} |
|
|
|
</button> |
|
|
|
</footer> |
|
|
|
</form> |
|
|
|
</Modal> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
render() { |
|
|
@@ -51,7 +102,7 @@ export default class DefinitionDefaults extends React.PureComponent { |
|
|
|
|
|
|
|
{isExplicitlySet && |
|
|
|
<div className="spacer-top nowrap"> |
|
|
|
<button onClick={e => this.handleReset(e)}> |
|
|
|
<button onClick={this.handleReset}> |
|
|
|
{translate('reset_verb')} |
|
|
|
</button> |
|
|
|
<span className="spacer-left note"> |
|
|
@@ -60,6 +111,7 @@ export default class DefinitionDefaults extends React.PureComponent { |
|
|
|
{getDefaultValue(setting)} |
|
|
|
</span> |
|
|
|
</div>} |
|
|
|
{this.state.reseting && this.renderModal()} |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |