Skip to content

Commit ba339eb

Browse files
priyajeetpriyajeet
authored
New: Add option to re-label choose/cancel button and show recents (#44)
Minor CSS fixes
1 parent 5c4cd3a commit ba339eb

9 files changed

Lines changed: 72 additions & 38 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ render(
8686
| logoUrl | string | | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
8787
| sharedLink | string | | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
8888
| sharedLinkPassword | string | | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
89+
| defaultView | string | `files` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
8990

9091
### Keyboard Shortcuts
9192
*See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-keyboard-shortcuts).*
@@ -135,6 +136,9 @@ render(
135136
| logoUrl | string | | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
136137
| sharedLink | string | | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
137138
| sharedLinkPassword | string | | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
139+
| chooseButtonLabel | string | | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
140+
| cancelButtonLabel | string | | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
141+
| defaultView | string | `files` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
138142

139143
### Keyboard Shortcuts
140144
*See the [developer docs](https://developer.box.com/docs/box-content-picker#section-keyboard-shortcuts).*

‎src/components/ContentExplorer/ContentExplorer.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ import {
4040
TYPE_FILE,
4141
TYPE_WEBLINK,
4242
TYPE_FOLDER,
43-
CLIENT_NAME_CONTENT_EXPLORER
43+
CLIENT_NAME_CONTENT_EXPLORER,
44+
DEFAULT_VIEW_FILES,
45+
DEFAULT_VIEW_RECENTS
4446
} from '../../constants';
4547
import type {
4648
BoxItem,
@@ -50,7 +52,8 @@ import type {
5052
SortBy,
5153
Access,
5254
BoxItemPermission,
53-
Token
55+
Token,
56+
DefaultView
5457
} from '../../flowTypes';
5558
import '../fonts.scss';
5659
import '../base.scss';
@@ -85,6 +88,7 @@ type Props = {
8588
onSelect: Function,
8689
onUpload: Function,
8790
onNavigate: Function,
91+
defaultView: DefaultView,
8892
logoUrl?: string,
8993
sharedLink?: string,
9094
sharedLinkPassword?: string
@@ -131,7 +135,8 @@ type DefaultProps = {|
131135
onCreate: Function,
132136
onSelect: Function,
133137
onUpload: Function,
134-
onNavigate: Function
138+
onNavigate: Function,
139+
defaultView: DefaultView
135140
|};
136141

137142
class ContentExplorer extends Component<DefaultProps, Props, State> {
@@ -167,7 +172,8 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
167172
onCreate: noop,
168173
onSelect: noop,
169174
onUpload: noop,
170-
onNavigate: noop
175+
onNavigate: noop,
176+
defaultView: DEFAULT_VIEW_FILES
171177
};
172178

173179
/**
@@ -237,11 +243,16 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
237243
* @return {void}
238244
*/
239245
componentDidMount() {
240-
const { currentFolderId }: Props = this.props;
246+
const { defaultView, currentFolderId }: Props = this.props;
241247
this.rootElement = ((document.getElementById(this.id): any): HTMLElement);
242248
// $FlowFixMe: child will exist
243249
this.appElement = this.rootElement.firstElementChild;
244-
this.fetchFolder(currentFolderId);
250+
251+
if (defaultView === DEFAULT_VIEW_RECENTS) {
252+
this.showRecents(true);
253+
} else {
254+
this.fetchFolder(currentFolderId);
255+
}
245256
}
246257

247258
/**
@@ -541,7 +552,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
541552
* @param {Boolean|void} [forceFetch] To void cache
542553
* @return {void}
543554
*/
544-
recents = (forceFetch: boolean = false) => {
555+
showRecents = (forceFetch: boolean = false) => {
545556
const { rootFolderId }: Props = this.props;
546557
const { sortBy, sortDirection }: State = this.state;
547558

@@ -648,7 +659,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
648659
if (view === VIEW_FOLDER) {
649660
this.fetchFolder(id, false);
650661
} else if (view === VIEW_RECENTS) {
651-
this.recents();
662+
this.showRecents();
652663
} else if (view === VIEW_SEARCH) {
653664
this.search(searchQuery);
654665
} else {
@@ -835,7 +846,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
835846
if (view === VIEW_FOLDER) {
836847
this.fetchFolder(parentId, false);
837848
} else if (view === VIEW_RECENTS) {
838-
this.recents();
849+
this.showRecents();
839850
} else if (view === VIEW_SEARCH) {
840851
this.search(searchQuery);
841852
} else {
@@ -1100,7 +1111,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
11001111
break;
11011112
case 'r':
11021113
if (this.globalModifier) {
1103-
this.recents();
1114+
this.showRecents(true);
11041115
event.preventDefault();
11051116
}
11061117
break;

‎src/components/ContentPicker/ContentPicker.js‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ import {
3636
TYPE_FILE,
3737
TYPE_FOLDER,
3838
TYPE_WEBLINK,
39-
CLIENT_NAME_CONTENT_PICKER
39+
CLIENT_NAME_CONTENT_PICKER,
40+
DEFAULT_VIEW_FILES,
41+
DEFAULT_VIEW_RECENTS
4042
} from '../../constants';
4143
import type {
4244
BoxItem,
@@ -46,7 +48,8 @@ import type {
4648
SortBy,
4749
Access,
4850
BoxItemPermission,
49-
Token
51+
Token,
52+
DefaultView
5053
} from '../../flowTypes';
5154
import '../fonts.scss';
5255
import '../base.scss';
@@ -75,6 +78,9 @@ type Props = {
7578
isTouch: boolean,
7679
className: string,
7780
measureRef: Function,
81+
defaultView: DefaultView,
82+
chooseButtonLabel?: string,
83+
cancelButtonLabel?: string,
7884
logoUrl?: string,
7985
sharedLink?: string,
8086
sharedLinkPassword?: string
@@ -110,7 +116,8 @@ type DefaultProps = {|
110116
apiHost: string,
111117
uploadHost: string,
112118
clientName: string,
113-
className: string
119+
className: string,
120+
defaultView: DefaultView
114121
|};
115122

116123
const defaultType = `${TYPE_FILE},${TYPE_WEBLINK}`;
@@ -141,7 +148,8 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
141148
className: '',
142149
apiHost: DEFAULT_HOSTNAME_API,
143150
uploadHost: DEFAULT_HOSTNAME_UPLOAD,
144-
clientName: CLIENT_NAME_CONTENT_PICKER
151+
clientName: CLIENT_NAME_CONTENT_PICKER,
152+
defaultView: DEFAULT_VIEW_FILES
145153
};
146154

147155
/**
@@ -227,7 +235,13 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
227235
this.rootElement = ((document.getElementById(this.id): any): HTMLElement);
228236
// $FlowFixMe: child will exist
229237
this.appElement = this.rootElement.firstElementChild;
230-
this.fetchFolder();
238+
239+
const { defaultView }: Props = this.props;
240+
if (defaultView === DEFAULT_VIEW_RECENTS) {
241+
this.showRecents(true);
242+
} else {
243+
this.fetchFolder();
244+
}
231245
}
232246

233247
/**
@@ -924,7 +938,9 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
924938
uploadHost,
925939
isSmall,
926940
className,
927-
measureRef
941+
measureRef,
942+
chooseButtonLabel,
943+
cancelButtonLabel
928944
}: Props = this.props;
929945
const {
930946
view,
@@ -996,6 +1012,8 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
9961012
onChoose={this.choose}
9971013
onCancel={this.cancel}
9981014
getLocalizedMessage={getLocalizedMessage}
1015+
chooseButtonLabel={chooseButtonLabel}
1016+
cancelButtonLabel={cancelButtonLabel}
9991017
/>
10001018
</div>
10011019
{canUpload && !!this.appElement

‎src/components/ContentPicker/Footer.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ type Props = {
1414
hasHitSelectionLimit: boolean,
1515
getLocalizedMessage: Function,
1616
onChoose: Function,
17-
onCancel: Function
17+
onCancel: Function,
18+
chooseButtonLabel?: string,
19+
cancelButtonLabel?: string
1820
};
1921

2022
const Footer = ({
@@ -23,7 +25,9 @@ const Footer = ({
2325
hasHitSelectionLimit,
2426
onCancel,
2527
onChoose,
26-
getLocalizedMessage
28+
getLocalizedMessage,
29+
chooseButtonLabel,
30+
cancelButtonLabel
2731
}: Props) =>
2832
<div className='bcp-footer'>
2933
<div className='bcp-footer-left'>
@@ -41,10 +45,10 @@ const Footer = ({
4145
</div>
4246
<div className='bcp-footer-right'>
4347
<Button onClick={onCancel}>
44-
{getLocalizedMessage('buik.footer.button.cancel')}
48+
{cancelButtonLabel || getLocalizedMessage('buik.footer.button.cancel')}
4549
</Button>
4650
<PrimaryButton onClick={onChoose}>
47-
{getLocalizedMessage('buik.footer.button.choose')}
51+
{chooseButtonLabel || getLocalizedMessage('buik.footer.button.choose')}
4852
</PrimaryButton>
4953
</div>
5054
</div>;

‎src/components/Header/Header.scss‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,7 @@
1313
}
1414

1515
.buik-search {
16+
flex: 1;
1617
padding-left: 20px;
17-
18-
input[type="search"] {
19-
width: 300px;
20-
21-
.buik-is-small & {
22-
width: 205px;
23-
}
24-
}
2518
}
2619
}

‎src/components/base.scss‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -162,14 +162,6 @@
162162
outline: 0;
163163
}
164164

165-
/* stylelint-disable selector-no-vendor-prefix */
166-
&::-webkit-input-placeholder,
167-
&::-moz-placeholder,
168-
&::-ms-input-placeholder {
169-
color: $see-see;
170-
}
171-
/* stylelint-enable selector-no-vendor-prefix */
172-
173165
&:invalid {
174166
border: 1px solid $red;
175167
}
@@ -187,6 +179,10 @@
187179
&:hover {
188180
border-color: $efive;
189181
}
182+
183+
&::placeholder {
184+
color: $see-see;
185+
}
190186
}
191187
}
192188

‎src/constants.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,8 @@ export const DEFAULT_HOSTNAME_UPLOAD = 'https://upload.box.com';
8787
export const DEFAULT_CONTAINER = 'body';
8888
export const DEFAULT_ROOT = '0';
8989
export const DEFAULT_SEARCH_DEBOUNCE = 500;
90+
export const DEFAULT_VIEW_FILES: 'files' = 'files';
91+
export const DEFAULT_VIEW_RECENTS: 'recents' = 'recents';
9092
export const BOX_BLUE = '#0061d5';
9193
export const BOX_BLUE_LIGHT = '#dbe8f8';
9294
export const COLOR_RED = '#c82341';

‎src/flowTypes.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ import {
4242
FIELD_NAME,
4343
FIELD_MODIFIED_AT,
4444
FIELD_INTERACTED_AT,
45-
FIELD_SIZE
45+
FIELD_SIZE,
46+
DEFAULT_VIEW_RECENTS,
47+
DEFAULT_VIEW_FILES
4648
} from './constants';
4749

4850
export type Token = string | Function;
@@ -51,6 +53,7 @@ export type StringMap = { [string]: string };
5153
export type StringAnyMap = { [string]: any };
5254
export type ItemAPI = FolderAPI | FileAPI | WebLinkAPI;
5355
export type Access = typeof ACCESS_COLLAB | typeof ACCESS_COMPANY | typeof ACCESS_OPEN;
56+
export type DefaultView = typeof DEFAULT_VIEW_RECENTS | typeof DEFAULT_VIEW_FILES;
5457
export type View =
5558
| typeof VIEW_ERROR
5659
| typeof VIEW_SELECTED

‎test/pickers-no-react.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,8 @@ <h1>Folder Picker (max 3 items / token generator / cannot upload)</h1>
112112
autoFocus: true,
113113
sortBy: 'modified_at',
114114
sortDirection: 'DESC',
115+
chooseButtonLabel: 'add',
116+
cancelButtonLabel: 'X',
115117
logoUrl: 'https://d30y9cdsu7xlg0.cloudfront.net/png/12458-200.png'
116118
});
117119
window.fp = filePicker1;
@@ -133,7 +135,8 @@ <h1>Folder Picker (max 3 items / token generator / cannot upload)</h1>
133135
container: '.filePicker2',
134136
logoUrl: 'https://d30y9cdsu7xlg0.cloudfront.net/png/12458-200.png',
135137
extensions: ['pdf', 'doc', 'docx', 'ppt', 'pptx'],
136-
maxSelectable: 3
138+
maxSelectable: 3,
139+
defaultView: 'recents'
137140
});
138141

139142

0 commit comments

Comments
 (0)