mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-23 20:07:40 +02:00
84 lines
2.4 KiB
React
84 lines
2.4 KiB
React
|
import React from 'react';
|
||
|
import PropTypes from 'prop-types';
|
||
|
import { Button, CardText, Textfield } from 'react-mdl';
|
||
|
|
||
|
import { UPDATE_FEATURE } from '../../../permissions';
|
||
|
|
||
|
export default class UpdateDescriptionComponent extends React.Component {
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.state = { editMode: false };
|
||
|
}
|
||
|
|
||
|
static propTypes = {
|
||
|
isFeatureView: PropTypes.bool.isRequired,
|
||
|
update: PropTypes.func,
|
||
|
featureToggle: PropTypes.object,
|
||
|
hasPermission: PropTypes.func.isRequired,
|
||
|
};
|
||
|
|
||
|
onEditMode = (description, evt) => {
|
||
|
evt.preventDefault();
|
||
|
this.setState({ editMode: true, description });
|
||
|
};
|
||
|
|
||
|
updateValue = evt => {
|
||
|
evt.preventDefault();
|
||
|
this.setState({ description: evt.target.value });
|
||
|
};
|
||
|
|
||
|
onSave = evt => {
|
||
|
evt.preventDefault();
|
||
|
this.props.update(this.state.description);
|
||
|
this.setState({ editMode: false, description: undefined });
|
||
|
};
|
||
|
|
||
|
onCancel = evt => {
|
||
|
evt.preventDefault();
|
||
|
this.setState({ editMode: false, description: undefined });
|
||
|
};
|
||
|
|
||
|
renderRead({ description, isFeatureView, hasPermission }) {
|
||
|
return (
|
||
|
<CardText>
|
||
|
{description}
|
||
|
{isFeatureView && hasPermission(UPDATE_FEATURE) ? (
|
||
|
<a href="#edit" onClick={this.onEditMode.bind(this, description)}>
|
||
|
edit
|
||
|
</a>
|
||
|
) : null}
|
||
|
</CardText>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
renderEdit() {
|
||
|
const { description } = this.state;
|
||
|
return (
|
||
|
<CardText>
|
||
|
<Textfield
|
||
|
floatingLabel
|
||
|
style={{ width: '100%' }}
|
||
|
label="Description"
|
||
|
required
|
||
|
value={description}
|
||
|
onChange={this.updateValue}
|
||
|
/>
|
||
|
<div>
|
||
|
<Button type="submit" raised accent onClick={this.onSave}>
|
||
|
Save
|
||
|
</Button>
|
||
|
|
||
|
<Button type="cancel" raised onClick={this.onCancel}>
|
||
|
Cancel
|
||
|
</Button>
|
||
|
</div>
|
||
|
</CardText>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
const { editMode } = this.state;
|
||
|
return editMode ? this.renderEdit(this.props) : this.renderRead(this.props);
|
||
|
}
|
||
|
}
|