box-ui-elements-test
Version:
Box UI Elements
316 lines (293 loc) • 13.7 kB
Markdown
### Description
This is the simplified sharing modal, interally referred to as the Unified Share Modal
(a combination of the previous invite collaborators modal and the shared link modal).
### Examples
#### Click each button to see different modal states and behaviors
```js
const Button = require('box-ui-elements/es/components/button').default;
// Base Example. Extend for different initial loads, or to demonstrate different interactions
class USMExample extends React.Component {
constructor() {
super();
this.setInitialState();
this.contacts = [
{ id: 0, collabID: 0, name: 'Jackie', email: 'j@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Owner', userID: '0', profileURL: 'https://foo.bar' },
{ id: 1, collabID: 1, name: 'Jeff', email: 'jt@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Viewer', userID: '1', },
{ id: 2, collabID: 2, name: 'David', email: 'dt@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '2', },
{ id: 3, collabID: 3, name: 'Yang', email: 'yz@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '3', },
{ id: 4, collabID: 4, name: 'Yong', email: 'ysu@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '4', },
{ id: 5, collabID: 5, name: 'Will', email: 'wy@example.com', type: 'pending', hasCustomAvatar: false, translatedRole: 'Editor', userID: '5', },
{ id: 6, collabID: 6, name: 'Dave', email: 'd@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '6', },
{ id: 7, collabID: 7, name: 'Ke', email: 'k@external.com', isExternalUser: true, type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '7', },
{ id: 8, collabID: 8, name: 'Wenbo', email: 'w@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '8', },
{ id: 11, collabID: 11, name: 'Supersupersupersuperreallyreallyreallylongfirstname incrediblyspectacularlylonglastname', email: 'Supersupersupersuperreallyreallyreallyincrediblyspectacularlylongemail@example.com', type: 'user', hasCustomAvatar: false, translatedRole: 'Editor', userID: '11', },
{ /* example group contact */
id: 14,
collabID: 14,
type: 'group',
name: 'my group',
hasCustomAvatar: false,
translatedRole: 'Viewer',
userID: null,
},
];
this.closeModal = this.closeModal.bind(this);
this.fakeRequest = this.fakeRequest.bind(this);
this.getInitialData = this.getInitialData.bind(this);
}
setInitialState() {
return this.state = {
isOpen: false,
item: {
bannerPolicy: {
body: 'test',
},
classification: 'internal',
grantedPermissions: {
itemShare: true
},
hideCollaborators: false,
id: 12345,
name: 'My Example Folder',
type: 'folder',
typedID: 'd_12345'
},
collaboratorsList: {
collaborators: [],
},
selectorOptions: [],
sharedLink: this.setDefaultSharedLinkState(),
submitting: false
};
}
setDefaultSharedLinkState() {
return this.defaultSharedLinkState = {
accessLevel: '',
allowedAccessLevels: {},
canChangeAccessLevel: true,
enterpriseName: '',
expirationTimestamp: null,
isDownloadSettingAvailable: true,
isNewSharedLink: false,
permissionLevel: '',
url: '',
};
}
closeModal() {
this.setState({
isOpen: false,
sharedLink: this.setDefaultSharedLinkState(),
collaboratorsList: {
collaborators: [],
},
});
}
getInitialData() {
const initialPromise = this.fakeRequest();
const fetchCollaborators = new Promise(resolved => {
setTimeout(() => {
const collaborators = this.contacts.slice();
const collaboratorsList = {
collaborators: this.contacts.map(contact => {
// convert the existing contact entries to compatible collaborator entries
const isExternalCollab = contact.isExternalUser;
delete contact.isExternalUser;
contact.isExternalCollab = isExternalCollab;
if (isExternalCollab) {
contact.expiration = {
executeAt: "November 27, 2022",
}
}
return contact;
}),
};
this.setState({collaboratorsList});
resolved();
}, 1000);
})
return Promise.all([initialPromise, fetchCollaborators]);
}
fakeRequest() {
// submitting is used to disable input fields, and not to show the loading indicator
this.setState({ submitting: true });
return new Promise(resolve => {
setTimeout(() => {
console.log('Request succeeded!');
this.setState({ submitting: false });
resolve();
}, 500)
});
}
render() {
return (
<div>
{ this.state.isOpen &&
<UnifiedShareModal
canInvite={ true }
changeSharedLinkAccessLevel={
newLevel => this.fakeRequest().then(() => {
this.setState({
sharedLink: {
...this.state.sharedLink,
accessLevel: newLevel,
}
})
})
}
changeSharedLinkPermissionLevel={
newLevel => this.fakeRequest().then(() => {
this.setState({
sharedLink: {
...this.state.sharedLink,
permissionLevel: newLevel,
}
})
})
}
collaboratorsList={this.state.collaboratorsList}
collaborationRestrictionWarning="Collaboration invitations can only be sent to people within Box Corporate"
currentUserID="0"
createSharedLinkOnLoad={ this.props.shouldCreateSharedLinkOnLoad }
focusSharedLinkOnLoad={ this.props.shouldFocusSharedLinkOnLoad }
getCollaboratorContacts={ () => {
return Promise.resolve(this.contacts);
} }
getSharedLinkContacts={ () => {
return Promise.resolve(this.contacts);
} }
getInitialData={this.getInitialData}
inviteePermissions={
[
{value: 'Co-owner', text: 'Co-owner'},
{value: 'Editor', text: 'Editor'},
{value: 'Viewer Uploader', text: 'Viewer Uploader'},
{value: 'Previewer Uploader', text: 'Previewer Uploader'},
{value: 'Viewer', text: 'Viewer'},
{value: 'Previewer', text: 'Previewer'},
{value: 'Uploader', text: 'Uploader'},
]
}
isOpen={ this.state.isOpen }
isToggleEnabled={ true }
item={ this.state.item }
onAddLink={
() => this.fakeRequest().then(() => {
this.setState({
sharedLink: {
accessLevel: 'peopleInYourCompany',
allowedAccessLevels: {
peopleWithTheLink: true,
peopleInYourCompany: true,
peopleInThisItem: true,
},
canChangeAccessLevel: true,
enterpriseName: 'Box',
expirationTimestamp: 1509173940,
isDownloadSettingAvailable: true,
isNewSharedLink: true,
permissionLevel: 'canViewDownload',
url: 'https://box.com/s/abcdefg',
}
});
})
}
onRemoveLink={
() => this.fakeRequest().then(() => {
this.setState({
sharedLink: this.defaultSharedLinkState
});
this.closeModal();
})
}
onRequestClose={ this.closeModal }
onSettingsClick={ () => alert('hi!') }
sendInvites={
() => this.fakeRequest().then(() => {
this.closeModal();
})
}
sendInvitesError={''}
sendSharedLink={ ({ emails, emailMessage }) => this.fakeRequest().then(() => {
this.closeModal();
console.log(`Sent invite to ${emails} with message "${emailMessage}"`);
})}
sendSharedLinkError={''}
sharedLink={ this.state.sharedLink }
showCalloutForUser={true}
showUpgradeOptions
submitting={ this.state.submitting }
suggestedCollaborators={{
'2': { id: 2, userScore: '.1', name: 'David', email: 'dt@example.com', },
'5': { id: 5, userScore: '0.2', name: 'Will', email: 'wy@example.com', },
'1': { id: 1, userScore: '0.5', name: 'Jeff', email: 'jt@example.com', },
'3': { id: 3, userScore: '2', name: 'Yang', email: 'yz@example.com', }
}}
trackingProps={ {
inviteCollabsEmailTracking: {},
sharedLinkEmailTracking: {},
sharedLinkTracking: {},
inviteCollabTracking: {},
modalTracking: {},
collaboratorListTracking: {},
} }
/> }
<Button
onClick={ () =>
this.setState({
isOpen: true,
}) }
>
{this.props.buttonText}
</Button>
</div>
)
}
}
class USMSharedLinkExample extends USMExample {
getInitialData() {
const resolveSharedLink = new Promise(resolved => {
setTimeout(() => {
this.setState({
sharedLink: {
accessLevel: 'peopleInYourCompany',
allowedAccessLevels: {
peopleWithTheLink: true,
peopleInYourCompany: true,
peopleInThisItem: true,
},
canChangeAccessLevel: true,
enterpriseName: 'Box',
expirationTimestamp: 1509173940,
isDownloadSettingAvailable: true,
permissionLevel: 'canViewDownload',
url: 'https://box.com/s/abcdefg',
}
});
resolved();
}, 400);
});
return Promise.all([this.fakeRequest, resolveSharedLink]);
}
}
<div>
<div>
This shows the Unified share modal in its initial state, with some collaborators.
<USMExample buttonText="Open USM Modal" />
</div>
<hr/>
<div>
This shows the Unified share modal when it has a shared link to fetch, but should not auto-focus this link.
<USMSharedLinkExample buttonText="Open USM Modal" shouldFocusSharedLinkOnLoad={false}/>
</div>
<hr/>
<div>
This shows the Unified share modal when it has a shared link to fetch, and should auto-focus.
<USMSharedLinkExample buttonText="Open USM Modal" shouldFocusSharedLinkOnLoad/>
</div>
<hr/>
<div>
This shows the Unified share modal when it needs to generate a shared link, and should auto-focus.
<USMExample buttonText="Open USM Modal" shouldFocusSharedLinkOnLoad shouldCreateSharedLinkOnLoad />
</div>
</div>
```