Skip to content

Commit 2cf139c

Browse files
priyajeetpriyajeet
authored
Update: Minor css fixes and code cleanup (#49)
1 parent 7f53796 commit 2cf139c

8 files changed

Lines changed: 97 additions & 38 deletions

File tree

‎src/components/Breadcrumbs/Breadcrumb.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '../variables';
22

33
.buik-breadcrumb {
4+
align-items: center;
45
display: flex;
56
min-width: 20px;
67

‎src/components/Breadcrumbs/Breadcrumbs.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
@import '../variables';
22

33
.buik-breadcrumbs {
4+
align-items: center;
45
display: flex;
56
min-width: 0;
67
padding-right: 20px;
78
}
89

910
.buik-breadcrumb-more {
11+
align-items: center;
1012
display: flex;
1113
min-width: 35px;
1214
}

‎src/components/ContentExplorer/ContentExplorer.js‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@ import {
4242
TYPE_FOLDER,
4343
CLIENT_NAME_CONTENT_EXPLORER,
4444
DEFAULT_VIEW_FILES,
45-
DEFAULT_VIEW_RECENTS
45+
DEFAULT_VIEW_RECENTS,
46+
ERROR_CODE_ITEM_NAME_INVALID,
47+
ERROR_CODE_ITEM_NAME_TOO_LONG,
48+
ERROR_CODE_ITEM_NAME_IN_USE
4649
} from '../../constants';
4750
import type {
4851
BoxItem,
@@ -238,6 +241,17 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
238241
this.api.destroy(true);
239242
}
240243

244+
/**
245+
* Cleanup
246+
*
247+
* @private
248+
* @inheritdoc
249+
* @return {void}
250+
*/
251+
componentWillUnmount() {
252+
this.clearCache();
253+
}
254+
241255
/**
242256
* Fetches the root folder on load
243257
*
@@ -258,6 +272,21 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
258272
}
259273
}
260274

275+
/**
276+
* react-modal expects the Modals app element
277+
* to be set so that it can add proper aria tags.
278+
* We need to keep setting it, since there might be
279+
* multiple widgets on the same page with their own
280+
* app elements.
281+
*
282+
* @private
283+
* @param {Object} collection item collection object
284+
* @return {void}
285+
*/
286+
setModalAppElement() {
287+
Modal.setAppElement(this.appElement);
288+
}
289+
261290
/**
262291
* Fetches the current folder if different
263292
* from what was already fetched before.
@@ -406,21 +435,6 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
406435
);
407436
};
408437

409-
/**
410-
* react-modal expects the Modals app element
411-
* to be set so that it can add proper aria tags.
412-
* We need to keep setting it, since there might be
413-
* multiple widgets on the same page with their own
414-
* app elements.
415-
*
416-
* @private
417-
* @param {Object} collection item collection object
418-
* @return {void}
419-
*/
420-
setModalAppElement() {
421-
Modal.setAppElement(this.appElement);
422-
}
423-
424438
/**
425439
* Action performed when clicking on an item
426440
*
@@ -901,7 +915,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
901915

902916
const name = `${nameWithoutExt}${extension}`;
903917
if (!nameWithoutExt.trim()) {
904-
this.setState({ errorCode: 'item_name_invalid', isLoading: false });
918+
this.setState({ errorCode: ERROR_CODE_ITEM_NAME_INVALID, isLoading: false });
905919
return;
906920
}
907921

@@ -965,12 +979,12 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
965979
}
966980

967981
if (!name) {
968-
this.setState({ errorCode: 'item_name_invalid', isLoading: false });
982+
this.setState({ errorCode: ERROR_CODE_ITEM_NAME_INVALID, isLoading: false });
969983
return;
970984
}
971985

972986
if (name.length > 255) {
973-
this.setState({ errorCode: 'item_name_too_long', isLoading: false });
987+
this.setState({ errorCode: ERROR_CODE_ITEM_NAME_TOO_LONG, isLoading: false });
974988
return;
975989
}
976990

@@ -985,7 +999,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
985999
},
9861000
({ response: { status } }) => {
9871001
this.setState({
988-
errorCode: status === 409 ? 'item_name_in_use' : 'item_name_invalid',
1002+
errorCode: status === 409 ? ERROR_CODE_ITEM_NAME_IN_USE : ERROR_CODE_ITEM_NAME_INVALID,
9891003
isLoading: false
9901004
});
9911005
}

‎src/components/ContentExplorer/RenameDialog.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ import React from 'react';
88
import Modal from 'react-modal';
99
import type { BoxItem } from '../../flowTypes';
1010
import { Button, PrimaryButton } from '../Button';
11-
import { CLASS_MODAL_CONTENT, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../constants';
11+
import {
12+
CLASS_MODAL_CONTENT,
13+
CLASS_MODAL_OVERLAY,
14+
CLASS_MODAL,
15+
ERROR_CODE_ITEM_NAME_TOO_LONG,
16+
ERROR_CODE_ITEM_NAME_IN_USE
17+
} from '../../constants';
1218

1319
type Props = {
1420
isOpen: boolean,
@@ -77,10 +83,10 @@ const RenameDialog = ({
7783
};
7884

7985
switch (errorCode) {
80-
case 'item_name_in_use':
86+
case ERROR_CODE_ITEM_NAME_IN_USE:
8187
error = getLocalizedMessage('buik.modal.rename.dialog.error.inuse');
8288
break;
83-
case 'item_name_too_long':
89+
case ERROR_CODE_ITEM_NAME_TOO_LONG:
8490
error = getLocalizedMessage('buik.modal.rename.dialog.error.toolong');
8591
break;
8692
default:

‎src/components/ContentPicker/ContentPicker.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,10 @@ import {
3838
TYPE_WEBLINK,
3939
CLIENT_NAME_CONTENT_PICKER,
4040
DEFAULT_VIEW_FILES,
41-
DEFAULT_VIEW_RECENTS
41+
DEFAULT_VIEW_RECENTS,
42+
ERROR_CODE_ITEM_NAME_INVALID,
43+
ERROR_CODE_ITEM_NAME_TOO_LONG,
44+
ERROR_CODE_ITEM_NAME_IN_USE
4245
} from '../../constants';
4346
import type {
4447
BoxItem,
@@ -227,6 +230,17 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
227230
Modal.setAppElement(this.appElement);
228231
}
229232

233+
/**
234+
* Cleanup
235+
*
236+
* @private
237+
* @inheritdoc
238+
* @return {void}
239+
*/
240+
componentWillUnmount() {
241+
this.clearCache();
242+
}
243+
230244
/**
231245
* Fetches the root folder on load
232246
*
@@ -651,12 +665,12 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
651665
}
652666

653667
if (!name) {
654-
this.setState({ errorCode: 'item_name_invalid', isLoading: false });
668+
this.setState({ errorCode: ERROR_CODE_ITEM_NAME_INVALID, isLoading: false });
655669
return;
656670
}
657671

658672
if (name.length > 255) {
659-
this.setState({ errorCode: 'item_name_too_long', isLoading: false });
673+
this.setState({ errorCode: ERROR_CODE_ITEM_NAME_TOO_LONG, isLoading: false });
660674
return;
661675
}
662676

@@ -667,9 +681,9 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
667681
() => {
668682
this.fetchFolder(id);
669683
},
670-
({ response: status }) => {
684+
({ response: { status } }) => {
671685
this.setState({
672-
errorCode: status === 409 ? 'item_name_in_use' : 'item_name_invalid',
686+
errorCode: status === 409 ? ERROR_CODE_ITEM_NAME_IN_USE : ERROR_CODE_ITEM_NAME_INVALID,
673687
isLoading: false
674688
});
675689
}

‎src/components/ContentTree/ContentTree.js‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -120,17 +120,15 @@ class ContentTree extends Component<DefaultProps, Props, State> {
120120
}
121121

122122
/**
123-
* Calls the passed on onClick funcsion
123+
* Cleanup
124124
*
125125
* @private
126-
* @param {Object} item - clicked item
126+
* @inheritdoc
127127
* @return {void}
128128
*/
129-
onItemClick = (item: BoxItem): void => {
130-
const { onClick }: Props = this.props;
131-
delete item.selected;
132-
onClick(item);
133-
};
129+
componentWillUnmount() {
130+
this.clearCache();
131+
}
134132

135133
/**
136134
* Fetches the root folder on load
@@ -143,6 +141,19 @@ class ContentTree extends Component<DefaultProps, Props, State> {
143141
this.fetchFolder();
144142
}
145143

144+
/**
145+
* Calls the passed on onClick funcsion
146+
*
147+
* @private
148+
* @param {Object} item - clicked item
149+
* @return {void}
150+
*/
151+
onItemClick = (item: BoxItem): void => {
152+
const { onClick }: Props = this.props;
153+
delete item.selected;
154+
onClick(item);
155+
};
156+
146157
/**
147158
* Resets the percentLoaded in the collection
148159
* so that the loading bar starts showing

‎src/components/CreateFolderDialog/CreateFolderDialog.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
import React from 'react';
88
import Modal from 'react-modal';
99
import { Button, PrimaryButton } from '../Button';
10-
import { CLASS_MODAL_CONTENT, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../constants';
10+
import {
11+
CLASS_MODAL_CONTENT,
12+
CLASS_MODAL_OVERLAY,
13+
CLASS_MODAL,
14+
ERROR_CODE_ITEM_NAME_TOO_LONG,
15+
ERROR_CODE_ITEM_NAME_IN_USE
16+
} from '../../constants';
1117

1218
type Props = {
1319
isOpen: boolean,
@@ -66,10 +72,10 @@ const CreateFolderDialog = ({
6672
};
6773

6874
switch (errorCode) {
69-
case 'item_name_in_use':
75+
case ERROR_CODE_ITEM_NAME_IN_USE:
7076
error = getLocalizedMessage('buik.modal.create.dialog.error.inuse');
7177
break;
72-
case 'item_name_too_long':
78+
case ERROR_CODE_ITEM_NAME_TOO_LONG:
7379
error = getLocalizedMessage('buik.modal.create.dialog.error.toolong');
7480
break;
7581
default:

‎src/constants.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,8 @@ export const FIELDS_TO_FETCH = [
132132
FIELD_HAS_COLLABORATIONS,
133133
FIELD_IS_EXTERNALLY_OWNED
134134
].join(',');
135+
136+
/* ------------------ Error Codes ---------------------- */
137+
export const ERROR_CODE_ITEM_NAME_INVALID = 'item_name_invalid';
138+
export const ERROR_CODE_ITEM_NAME_TOO_LONG = 'item_name_too_long';
139+
export const ERROR_CODE_ITEM_NAME_IN_USE = 'item_name_in_use';

0 commit comments

Comments
 (0)