Skip to content

Commit 5d9ef26

Browse files
durrandurran
committed
INT-1160: Delete with confirmation - ugly style
1 parent 431df55 commit 5d9ef26

File tree

4 files changed

+227
-5
lines changed

4 files changed

+227
-5
lines changed

‎src/internal-packages/crud/lib/component/document.jsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const Actions = require('../actions');
1212
const EditableElement = require('./editable-element');
1313
const DocumentActions = require('./document-actions');
1414
const DocumentFooter = require('./document-footer');
15+
const RemoveDocumentFooter = require('./remove-document-footer');
1516
const Hotspot = require('./hotspot');
1617

1718
/**
@@ -41,7 +42,7 @@ class Document extends React.Component {
4142

4243
// Actions need to be scoped to the single document component and not
4344
// global singletons.
44-
this.actions = Reflux.createActions([ 'update', 'remove' ]);
45+
this.actions = Reflux.createActions([ 'update', 'remove', 'cancelRemove' ]);
4546

4647
// The update store needs to be scoped to a document and not a global
4748
// singleton.
@@ -207,7 +208,7 @@ class Document extends React.Component {
207208
doc.on(Element.Events.Removed, this.handleModify.bind(this));
208209
doc.on(HadronDocument.Events.Cancel, this.handleCancel.bind(this));
209210

210-
this.setState({ doc: doc, editing: true });
211+
this.setState({ doc: doc, editing: true, deleting: false });
211212
}
212213

213214
/**
@@ -228,7 +229,11 @@ class Document extends React.Component {
228229
* Handles document deletion.
229230
*/
230231
handleDelete() {
231-
this.actions.remove(this.doc);
232+
this.setState({ deleting: true });
233+
}
234+
235+
handleCancelDelete() {
236+
this.setState({ deleting: false });
232237
}
233238

234239
/**
@@ -291,7 +296,7 @@ class Document extends React.Component {
291296
* @returns {Component} The actions component.
292297
*/
293298
renderActions() {
294-
if (!this.state.editing) {
299+
if (!this.state.editing && !this.state.deleting) {
295300
return (
296301
<DocumentActions
297302
edit={this.handleEdit.bind(this)}
@@ -309,7 +314,19 @@ class Document extends React.Component {
309314
renderFooter() {
310315
if (this.state.editing) {
311316
return (
312-
<DocumentFooter doc={this.state.doc} updateStore={this.updateStore} actions={this.actions} />
317+
<DocumentFooter
318+
doc={this.state.doc}
319+
updateStore={this.updateStore}
320+
actions={this.actions} />
321+
);
322+
} else if (this.state.deleting) {
323+
console.log(this.state);
324+
return (
325+
<RemoveDocumentFooter
326+
doc={this.state.doc}
327+
removeStore={this.removeStore}
328+
actions={this.actions}
329+
cancelHandler={this.handleCancelDelete.bind(this)} />
313330
);
314331
}
315332
}
@@ -319,6 +336,9 @@ class Document extends React.Component {
319336
if (this.state.editing) {
320337
style = style.concat(' editing');
321338
}
339+
if (this.state.deleting) {
340+
style = style.concat(' deleting');
341+
}
322342
return style;
323343
}
324344
}

‎src/internal-packages/crud/lib/component/remove-button.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
'use strict';
2+
3+
const React = require('react');
4+
5+
/**
6+
* Component for the update button.
7+
*/
8+
class RemoveButton extends React.Component {
9+
10+
/**
11+
* The component constructor.
12+
*
13+
* @param {Object} props - The properties.
14+
*/
15+
constructor(props) {
16+
super(props);
17+
}
18+
19+
/**
20+
* Render the button.
21+
*
22+
* @returns {Component} The button component.
23+
*/
24+
render() {
25+
return (
26+
<button
27+
className='btn btn-default btn-xs error'
28+
type='button'
29+
onClick={this.props.handler}>
30+
Delete
31+
</button>
32+
);
33+
}
34+
}
35+
36+
RemoveButton.displayName = 'RemoveButton';
37+
38+
module.exports = RemoveButton;

‎src/internal-packages/crud/lib/component/remove-document-footer.jsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
'use strict';
2+
3+
const React = require('react');
4+
const CancelEditButton = require('./cancel-edit-button');
5+
const RemoveButton = require('./remove-button');
6+
7+
/**
8+
* The progress mode.
9+
*/
10+
const PROGRESS = 'Progress';
11+
12+
/**
13+
* The success mode.
14+
*/
15+
const SUCCESS = 'Success';
16+
17+
/**
18+
* The error mode.
19+
*/
20+
const ERROR = 'Error';
21+
22+
/**
23+
* The editing mode.
24+
*/
25+
const DELETING = 'Deleting';
26+
27+
/**
28+
* Map of modes to styles.
29+
*/
30+
const MODES = {
31+
'Progress': 'in-progress',
32+
'Success': 'success',
33+
'Error': 'error',
34+
'Deleting': 'error'
35+
}
36+
37+
/**
38+
* The empty message.
39+
*/
40+
const EMPTY = '';
41+
42+
/**
43+
* The modified message.
44+
*/
45+
const MODIFIED = 'Document Flagged For Deletion.';
46+
47+
/**
48+
* The updating message.
49+
*/
50+
const UPDATING = 'Deleting Document.';
51+
52+
/**
53+
* The updated message.
54+
*/
55+
const UPDATED = 'Document Deleted.';
56+
57+
/**
58+
* Component for a the remove document footer.
59+
*/
60+
class RemoveDocumentFooter extends React.Component {
61+
62+
/**
63+
* The component constructor.
64+
*
65+
* @param {Object} props - The properties.
66+
*/
67+
constructor(props) {
68+
super(props);
69+
this.doc = props.doc;
70+
this.actions = props.actions;
71+
this.removeStore = props.removeStore;
72+
this.state = { mode: DELETING, message: MODIFIED };
73+
}
74+
75+
/**
76+
* Subscribe to the remove store on mount.
77+
*/
78+
componentDidMount() {
79+
this.unsubscribeRemove = this.removeStore.listen(this.handleStoreRemove.bind(this));
80+
}
81+
82+
/**
83+
* Unsubscribe from the remove store on unmount.
84+
*/
85+
componentWillUnmount() {
86+
this.unsubscribeRemove();
87+
}
88+
89+
/**
90+
* Handle an error with the document update.
91+
*
92+
* @param {Error} error - The error.
93+
*/
94+
handleError(error) {
95+
this.setState({ mode: ERROR, message: error.message });
96+
}
97+
98+
/**
99+
* Handle the user clicking the update button.
100+
*/
101+
handleRemove() {
102+
this.setState({ mode: PROGRESS, message: UPDATING });
103+
this.actions.remove(this.doc);
104+
}
105+
106+
/**
107+
* Handle a successful document update.
108+
*/
109+
handleSuccess() {
110+
this.setState({ mode: SUCCESS, message: UPDATED });
111+
}
112+
113+
/**
114+
* Handles a trigger from the store.
115+
*
116+
* @param {Boolean} success - If the delete succeeded.
117+
* @param {Error, Document} object - The error or document.
118+
*/
119+
handleStoreRemove(success, object) {
120+
if (success) {
121+
this.handleSuccess();
122+
} else {
123+
this.handleError(object);
124+
}
125+
}
126+
127+
/**
128+
* Render the footer.
129+
*
130+
* @returns {Component} The footer component.
131+
*/
132+
render() {
133+
return (
134+
<div className={this.style()}>
135+
<div className='edit-message' title={this.state.message}>
136+
{this.state.message}
137+
</div>
138+
<div className='document-footer-actions'>
139+
<CancelEditButton handler={this.props.cancelHandler} />
140+
<RemoveButton handler={this.handleRemove.bind(this)} />
141+
</div>
142+
</div>
143+
);
144+
}
145+
146+
/**
147+
* Get the style of the footer based on the current mode.
148+
*
149+
* @returns {String} The style.
150+
*/
151+
style() {
152+
return `document-footer ${MODES[this.state.mode]}`;
153+
}
154+
}
155+
156+
RemoveDocumentFooter.displayName = 'RemoveDocumentFooter';
157+
158+
module.exports = RemoveDocumentFooter;

‎src/internal-packages/crud/styles/crud.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ li.document-list-item.editing {
22
box-shadow: 2px 5px 8px gainsboro;
33
}
44

5+
li.document-list-item.deleting {
6+
box-shadow: 2px 5px 8px salmon;
7+
border: 1px solid salmon;
8+
padding-top: 5px;
9+
}
10+
511
.column.main {
612
.sampling-message {
713
}

0 commit comments

Comments
 (0)