-
Notifications
You must be signed in to change notification settings - Fork 87
/
RedactorRow.jsx
59 lines (51 loc) · 2.51 KB
/
RedactorRow.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from "react";
import dayjs from "dayjs";
import { Link } from "react-router-dom"
import { Utilities } from "../../utilities/utilities";
class RedactorRow extends React.Component {
state = {
redactorEnabled: false,
};
handleEnableRedactor = () => {
this.setState({ redactorEnabled: !this.state.redactorEnabled }, () => {
this.props.handleSetRedactEnabled(this.props.redactor, this.state.redactorEnabled);
});
}
componentDidMount() {
if (this.props.redactor) {
this.setState({ redactorEnabled: this.props.redactor.enabled ? true : false });
}
}
handleDeleteClick = redactor => {
this.props.toggleConfirmDeleteModal(redactor);
}
render() {
const { redactor } = this.props;
return (
<div className="flex flex-auto ActiveDownstreamVersionRow--wrapper" key={redactor?.slug}>
<div className="flex-column flex1">
<div className="flex flex1 alignItems--center u-marginBottom--small">
<span className={`status-indicator u-marginBottom--10 ${this.state.redactorEnabled ? "enabled" : "disabled"}`} />
<p className="u-fontSize--large u-lineHeight--normal u-fontWeight--bold u-color--tuna u-marginRight--10">{redactor?.name}</p>
<span className="u-fontSize--small u-color--dustyGray u-fontWeight--medium u-lineHeight--normal u-marginTop--5"> Last updated on {dayjs(redactor?.updatedAt).format("MM/DD/YY @ hh:mm a")} </span>
</div>
<p className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-color--nevada u-marginLeft--10"> {redactor?.description} </p>
</div>
<div className="flex alignItems--center">
<Link to={`/app/${this.props.appSlug}/troubleshoot/redactors/${redactor?.slug}`} className="u-fontSize--normal u-fontWeight--medium u-color--royalBlue u-textDecoration--underlineOnHover u-marginRight--20">Edit</Link>
<span className="u-fontSize--normal u-fontWeight--medium u-color--chestnut u-textDecoration--underlineOnHover u-marginRight--20" onClick={() => this.handleDeleteClick(redactor)}>Delete</span>
<div className={`Checkbox--switch ${this.state.redactorEnabled ? "is-checked" : "is-notChecked"}`}>
<input
type="checkbox"
className="Checkbox-toggle"
name="isRedactorEnabled"
checked={this.state.redactorEnabled}
onChange={(e) => { this.handleEnableRedactor(e) }}
/>
</div>
</div>
</div>
)
}
}
export default RedactorRow;