Skip to content

Instantly share code, notes, and snippets.

@EmperorEarth
Forked from slorber/layout.jsx
Created February 17, 2016 23:51
Show Gist options
  • Save EmperorEarth/93bc9845df5afbd09b04 to your computer and use it in GitHub Desktop.
Save EmperorEarth/93bc9845df5afbd09b04 to your computer and use it in GitHub Desktop.
/** @jsx React.DOM */
'use strict';
var React = require("react/addons");
var _ = require("lodash");
var $ = require("jquery");
var AtomReact = require("atom-react");
var classNames = require('classnames');
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
// To differentiate between component initiating upload events.
var COMPONENT_FIELD = require("common/componentIdentity");
var CURRENT_COMPONENT_FIELD = COMPONENT_FIELD.LAYOUT;
var AppEvents = require("appEvents");
var Spinner = require("spinner/spinner");
var Menu = require("widgets/menu/menu");
var Breadcrumb = require("widgets/breadcrumb/breadcrumb");
var MainNavigation = require("widgets/navigation/main/mainNavigation");
var Stamples = require("stamples/stamples");
var UserSetting = require("widgets/userSetting/userSetting");
var UserSettingOverlay = UserSetting.UserSettingOverlay;
var ContactBar = require("widgets/contactBar/contactBar");
var UserSummary = require("widgets/userSummary/userSummary");
var RelationshipManager = require("widgets/relationshipManager/relationshipManager");
var RelationshipManagerOverlay = RelationshipManager.RelationshipManagerOverlay;
var ProfilePictureUpload = require("widgets/profilePictureUpload/profilePictureUpload");
var ErrorOverlay = require("widgets/errorOverlay/errorOverlay");
var ShowUsersPopUp = require("widgets/showUsersPopUp/showUsersPopUp");
var FileUploadSettingsPopUp = require("widgets/fileUploadSettingsPopUp/fileUploadSettingsPopUp");
var OfflineOverlay = require("widgets/offlineOverlay/offlineOverlay");
var UserDeletionGoodbyeOverlay = require("widgets/userDeletionGoodbyeOverlay/userDeletionGoodbyeOverlay");
var UserSessionExpired = require("widgets/userSessionExpired/userSessionExpired");
var Notification = require("widgets/notification/notification");
var CommunityCreation = require("widgets/communityCreation/communityCreation");
var CommunityDeletion = require("widgets/communityDeletion/communityDeletion");
var LeavingCommunity = require("widgets/leavingCommunity/leavingCommunity");
var CategoryCreation = require("widgets/categoryCreation/categoryCreation");
var CategoryEdition = require("widgets/categoryEdition/categoryEdition");
var CategoryMove = require("widgets/categoryMove/categoryMove");
var StampleMove = require("widgets/stampleMove/stampleMove");
var CategoryDeletion = require("widgets/categoryDeletion/categoryDeletion");
var Clipper = require("widgets/clipper/clipper");
var InviteByEmail = require("widgets/inviteByEmail/inviteByEmail");
var MaximisedStample = require("widgets/maximisedStample/maximisedStample");
var TimePickerPopUp = require("widgets/timePickerPopUp/timePickerPopUp");
var NewEventsBar = require("widgets/newEventsBar/newEventsBar");
var CategorySelection = require("widgets/categorySelection/categorySelection");
var FeedbackFromBootstrap = require("widgets/feedbackFromBootstrap/feedbackFromBootstrap");
var SharingManagementLibrary = require("widgets/sharingManagementLibrary/sharingManagementLibrary");
var SharingManagementCommunity = require("widgets/sharingManagementCommunity/sharingManagementCommunity");
var SharingManagementCommunityLibrary = require("widgets/sharingManagementCommunityLibrary/sharingManagementCommunityLibrary");
var ImagePanorama = require("widgets/imagePanorama/imagePanorama");
var CloseIcon = require("img/icons/close");
var WithDropCancelled = require("common/withDropCancelled");
var UploadProgress = require("widgets/uploadProgress/uploadProgress");
var FileUploadRepository = require("repositories/fileUploadRepository");
var UPLOAD_STATUS = require("common/uploadStatus").UPLOAD_STATUS;
var SelectedViewType = require("models/selectedViewType");
var OnboardingWelcome = require("widgets/onboardingWelcome/onboardingWelcome");
var OnboardingSteps = require("widgets/onboardingSteps/onboardingSteps");
var OnboardingClipperStepOverlay = require("widgets/onboardingSteps/onboardingClipperStepOverlay");
var OnboardingEndOverlay = require("widgets/onboardingSteps/onboardingEndOverlay");
var OnboardingStepsProgression = require("widgets/onboardingSteps/onboardingStepsProgression");
var OnboardingMobile = require("widgets/onboarding/mobile/onboardingMobile");
var Suggestions = require("widgets/suggestions/suggestions");
var NavigationUtils = require("widgets/navigation/common/navigationUtils");
var HigherOrderComponents = require("layout/higherOrderComponents");
var NewButton = require("widgets/newButton/newButton");
var LayoutSection = AtomReact.createPureClass("LayoutSection",{
propTypes: {
appStateCursor: AtomReact.PropTypes.isCursor
},
listenToEvents: function(event) {
switch (event.name) {
case AppEvents.Names.STAMPLE_SEARCH_TRIGGERED:
this.scrollToTop();
break;
case AppEvents.Names.SPACE_SELECTED:
if ( event.data.navigationName === NavigationUtils.MAIN_NAVIGATION ) {
this.scrollToTop();
}
break;
case AppEvents.Names.VIEW_TYPE_SELECTED:
this.scrollToTop();
break;
}
},
isIosApp: function () {
if (window.device) {
return parseFloat(window.device.version) >= 7;
}
else return false
},
scrollToTop: function () {
if ( this.isMounted() ) {
$(React.findDOMNode(this)).scrollTop(0);
} else {
console.warn("layout is not mounted so we can't scroll to top");
}
},
interaction: function() {
return this.props.appStateCursor.follow("interaction");
},
isNavigationDisplayed: function () {
var displayed = this.interaction().follow("navigationDisplayed").getOrElse(false);
// We force the display of navigation when we are at an onboarding step related to the naivgation
return displayed
|| this.isCurrentOnboardingGroup(OnboardingSteps.GROUP_NAMES.NAVIGATE)
|| this.isCurrentOnboardingGroup(OnboardingSteps.GROUP_NAMES.CREATE_SPACE);
},
isContactsPinned: function () {
return this.interaction().follow("contactsPinned").getOrElse(false);
},
isNotificationDisplayed: function(){
return this.props.appStateCursor.follow("notification", "opened").getOrElse(false);
},
isTimePickerDisplayed:function () {
return this.props.appStateCursor.follow("timePickerPopUpStore","opened").getOrElse(false);
},
isSearchMode: function() {
return this.props.appStateCursor.follow("timeline","searchText").exists();
},
getCurrentOnboardingStep: function() {
var finishedStepsCursor = this.props.appStateCursor.follow("onboardingSteps","finishedSteps");
if ( finishedStepsCursor.exists() ) {
return OnboardingSteps.getCurrentStep(finishedStepsCursor.get());
}
},
getCurrentOnboardingGroup: function() {
var finishedStepsCursor = this.props.appStateCursor.follow("onboardingSteps","finishedSteps");
if ( finishedStepsCursor.exists() ) {
return OnboardingSteps.getCurrentStepGroup(finishedStepsCursor.get());
}
},
isOnboardingStep: function (stepName) {
var step = this.getCurrentOnboardingStep();
return !!(step && step === stepName);
},
isCurrentOnboardingGroup: function(groupName) {
var group = this.getCurrentOnboardingGroup();
return ( group && group === groupName );
},
maybeRenderNavigation: function() {
var interactionStoreCursor = this.props.appStateCursor.follow("interaction");
var navigationPinned = interactionStoreCursor.follow("navigationPinned").getOrElse(false);
var navigationDisplayed = this.isNavigationDisplayed();
if (navigationDisplayed) {
return (
<NavigationSection
dropzoneCursor={this.props.appStateCursor.follow("filesDropZone")}
appStateCursor={this.props.appStateCursor}
currentOnboardingStep={this.getCurrentOnboardingStep()}
navigationPinned={navigationPinned}
isIosApp={this.isIosApp()}
/>
);
}
},
renderContacts: function() {
var contactsPinned = this.isContactsPinned();
if (contactsPinned) {
return (
<ContactBar
dropzoneCursor={this.props.appStateCursor.follow("filesDropZone")}
contactCursor={this.props.appStateCursor.follow("contactBar")}
userSummaryCursor={this.props.appStateCursor.follow("userSummary")}
isIosApp={this.isIosApp()}
/>
);
}
},
maybeRenderNotification: function() {
if(this.isNotificationDisplayed()){
return <NotificationSection
appStateCursor={this.props.appStateCursor}
isIosApp={this.isIosApp()}
/>;
}
},
maybeRenderOnboardingWelcome: function() {
var displayed = this.props.appStateCursor.follow("onboardingSteps","onboardingWelcomeDisplayed").getOrElse(false);
if ( displayed ) {
return <OnboardingWelcome />;
}
},
maybeRenderTimePickerPopUp: function () {
if(this.isTimePickerDisplayed()) {
return (<TimePickerPopUp
timePickerPopUpStoreCursor={this.props.appStateCursor.follow("timePickerPopUpStore")}
isIosApp={this.isIosApp()}
/>);
}
},
maybeRenderCommunityCreation: function() {
if ( this.props.appStateCursor.follow("communityCreation", "opened").getOrElse(false) ) {
return <CommunityCreation communityCreationStore={this.props.appStateCursor.follow("communityCreation")}/>;
}
},
maybeRenderCategoryCreation: function() {
if ( this.props.appStateCursor.follow("categoryCreation", "opened").getOrElse(false) ) {
return <CategoryCreation
categoryCreationStore={this.props.appStateCursor.follow("categoryCreation")}
currentOnboardingStep={this.getCurrentOnboardingStep()}
/>;
}
},
maybeRenderCommunityDeletion: function() {
if ( this.props.appStateCursor.follow( "communityDeletion", "opened").getOrElse(false) ) {
return <CommunityDeletion
communityDeletionStore={this.props.appStateCursor.follow( "communityDeletion")}
/>;
}
},
maybeRenderLeavingCommunity: function() {
if ( this.props.appStateCursor.follow( "leavingCommunity", "opened").getOrElse(false) ) {
return <LeavingCommunity
leavingCommunityStore={this.props.appStateCursor.follow("leavingCommunity")}
/>;
}
},
maybeRenderCategoryEdition: function() {
if ( this.props.appStateCursor.follow( "categoryEdition", "opened").getOrElse(false) ) {
return <CategoryEdition
categoryEditionStore={this.props.appStateCursor.follow( "categoryEdition")}
/>;
}
},
maybeRenderCategoryMove: function() {
if ( this.props.appStateCursor.follow( "categoryMove", "opened").getOrElse(false) ) {
return <CategoryMove categoryMoveStore={this.props.appStateCursor.follow( "categoryMove")} />;
}
},
maybeRenderStampleMove: function() {
if ( this.props.appStateCursor.follow( "stampleMove", "opened").getOrElse(false) ) {
return <StampleMove stampleMoveStore={this.props.appStateCursor.follow( "stampleMove")} />;
}
},
maybeRenderSelectionCategory: function() {
var isOpened = this.props.appStateCursor.follow( "categorySelection", "opened").getOrElse(false);
var targetComponent = this.props.appStateCursor.follow( "categorySelection", "targetComponent").getOrElse("");
if ( isOpened && (targetComponent === "STAMPLE_FORM") ) {
return <CategorySelection categorySelectionStore={this.props.appStateCursor.follow("categorySelection")} />;
}
},
maybeRenderCategoryDeletion: function() {
if ( this.props.appStateCursor.follow( "categoryDeletion", "opened").getOrElse(false) ) {
return <CategoryDeletion
categoryDeletionStore={this.props.appStateCursor.follow( "categoryDeletion")}
/>;
}
},
maybeRenderUserSetting: function() {
if (this.props.appStateCursor.follow( "userSetting", "opened").getOrElse(false)) {
return <UserSettingOverlay
userSettingStoreCursor={this.props.appStateCursor.follow( "userSetting")}
/>
}
},
maybeRenderRelationshipManager: function () {
if (this.props.appStateCursor.follow( "relationshipManager", "opened").getOrElse(false)) {
return <RelationshipManagerOverlay
relationshipManagerStoreCursor={this.props.appStateCursor.follow( "relationshipManager")}
/>
}
},
maybeRenderInviteByEmail: function () {
if (this.props.appStateCursor.follow("inviteByEmail", "opened").getOrElse(false)) {
return <InviteByEmail
inviteByEmailStoreCursor={this.props.appStateCursor.follow("inviteByEmail")}
/>
}
},
maybeRenderSharingManagementLibrary: function() {
var storeCursor = this.props.appStateCursor.follow("sharingManagementLibrary");
if (storeCursor.follow("opened").getOrElse(false)) {
return (
<SharingManagementLibrary
sharingManagement={storeCursor}
/>);
}
},
maybeRenderSharingManagementCommunity: function() {
var storeCursor = this.props.appStateCursor.follow("sharingManagementCommunity");
if (storeCursor.follow("opened").getOrElse(false)) {
return (
<SharingManagementCommunity
sharingManagementCommunity={storeCursor}
/>);
}
},
maybeRenderSharingManagementCommunityLibrary: function() {
var storeCursor = this.props.appStateCursor.follow("sharingManagementCommunityLibrary");
if (storeCursor.follow("opened").getOrElse(false)) {
return (
<SharingManagementCommunityLibrary
sharingManagementCommunityLibrary={storeCursor}
/>);
}
},
maybeRenderImagePanorama: function () {
if (this.props.appStateCursor.follow("imagePanorama", "opened").getOrElse(false)) {
return (
<ImagePanorama
imagePanoramaCursor={this.props.appStateCursor.follow("imagePanorama")}
/>);
}
},
maybeRenderMaximisedStample: function () {
var storeCursor = this.props.appStateCursor.follow("maximisedStample");
var isOpened = storeCursor.follow("opened").getOrElse(false);
if (isOpened) {
return <MaximisedStample
maximisedStampleStoreCursor={storeCursor}
isIosApp={this.isIosApp()}
/>;
}
},
maybeRenderExpiredSession: function() {
var cursor = this.props.appStateCursor.follow("userSessionExpired");
if ( cursor.follow("expired").getOrElse(false) ) {
return <UserSessionExpired userSessionExpiredStore={cursor}/>
}
},
maybeRenderOnboardingClipperHelpOverlay: function() {
if ( this.isCurrentOnboardingGroup(OnboardingSteps.GROUP_NAMES.USE_CLIPPER) ) {
return <OnboardingClipperStepOverlay onboardingStoreCursor={this.props.appStateCursor.follow("onboardingSteps")}/>
}
},
renderNewButton: function() {
return <NewButton
newbuttonCursor={this.props.appStateCursor.follow("newButton")}
currentOnboardingStep={this.getCurrentOnboardingStep()}
/>
},
renderOnboardingEnd: function() {
return <OnboardingEndSection onboardingSteps={this.props.appStateCursor.follow("onboardingSteps")}/>;
},
renderOnboardingStepsProgression: function() {
return <OnboardingProgressSection onboardingSteps={this.props.appStateCursor.follow("onboardingSteps")}/>;
},
maybeRenderOfflineOverlay: function() {
var isConnectionDown = this.props.appStateCursor.follow("offlineOverlay","connectionDown").get();
if ( isConnectionDown ) {
return <OfflineOverlay offlineOverlayStore={this.props.appStateCursor.follow("offlineOverlay")}/>;
}
},
maybeRenderErrorOverlay: function() {
var isOpen = this.props.appStateCursor.follow("errorOverlay","open").getOrElse(false);
if ( isOpen ) {
return <ErrorOverlay errorOverlayStore={this.props.appStateCursor.follow("errorOverlay")}/>;
}
},
maybeRenderUserPopUpOverlay: function () {
var isOpen = this.props.appStateCursor.follow("showUsersPopUpStore", "opened").getOrElse(false);
if (isOpen) {
return <ShowUsersPopUp showUsersPopUpStore={this.props.appStateCursor.follow("showUsersPopUpStore")}/>;
}
},
maybeRenderFileUploadSettingsPopUpOverlay: function () {
var isOpen = this.props.appStateCursor.follow("fileUploadSettingsPopUp", "opened").getOrElse(false);
if (isOpen) {
return <FileUploadSettingsPopUp fileUploadSettingsCursor={this.props.appStateCursor.follow("fileUploadSettingsPopUp")}/>;
}
},
maybeRenderProfilePictureUploadOverlay: function() {
var isOpen = this.props.appStateCursor.follow("profilePictureUpload","open").getOrElse(false);
if ( isOpen ) {
return <ProfilePictureUpload profilePictureUploadStore={this.props.appStateCursor.follow("profilePictureUpload")}/>;
}
},
maybeRenderUserDeletionGoodbyeOverlay: function() {
var isOpen = this.props.appStateCursor.follow("userDeletionGoodbyeOverlay","open").getOrElse(false);
if ( isOpen ) {
return <UserDeletionGoodbyeOverlay userDeletionGoodbyeOverlayStore={this.props.appStateCursor.follow("userDeletionGoodbyeOverlay")}/>;
}
},
maybeRenderFeedbackFromBootstrapData: function() {
var cursor = this.props.appStateCursor.follow("feedbackFromBootstrap");
var feedbackToDisplay = cursor.follow("feedback").getOrElse(false);
if ( feedbackToDisplay ) {
return <FeedbackFromBootstrap cursor={cursor}/>;
}
},
maybeRenderClipperSection: function() {
var cursor = this.props.appStateCursor.follow("clipper");
if ( cursor.follow("open").get() ) {
return <Clipper clipperStore={cursor} categorySelectionStore={this.props.appStateCursor.follow("categorySelection")}/>;
}
},
mayBeRenderClipperProgress: function() {
var cursor = this.props.appStateCursor.follow("clipper");
if (cursor.follow("reduced").getOrElse(false)) {
return <ClipperProgressSection clipperProgressStore={cursor}/>;
}
},
// /!\ order matters in some cases! TODO remove this order need
maybeRenderOverlayContent: function() {
var content = (
this.maybeRenderClipperSection() ||
this.maybeRenderOnboardingWelcome() ||
this.maybeRenderErrorOverlay() ||
this.maybeRenderUserDeletionGoodbyeOverlay() ||
this.maybeRenderOnboardingClipperHelpOverlay() ||
this.maybeRenderExpiredSession() ||
this.maybeRenderCommunityCreation() ||
this.maybeRenderCommunityDeletion() ||
this.maybeRenderLeavingCommunity() ||
this.maybeRenderCategoryCreation() ||
this.maybeRenderCategoryEdition() ||
this.maybeRenderCategoryMove() ||
this.maybeRenderStampleMove() ||
this.maybeRenderSelectionCategory() ||
this.maybeRenderCategoryDeletion() ||
this.maybeRenderProfilePictureUploadOverlay() ||
this.maybeRenderUserSetting() ||
this.maybeRenderRelationshipManager() ||
this.maybeRenderInviteByEmail() ||
this.maybeRenderImagePanorama() ||
this.maybeRenderUserPopUpOverlay() ||
this.maybeRenderFileUploadSettingsPopUpOverlay() ||
this.maybeRenderFeedbackFromBootstrapData() ||
this.maybeRenderSharingManagementLibrary() ||
this.maybeRenderSharingManagementCommunity() ||
this.maybeRenderSharingManagementCommunityLibrary()
);
// console.debug("content",content);
return content;
},
renderUploadProgress: function() {
return <UploadProgressSection uploadProgressStore={this.props.appStateCursor.follow("uploadProgress")}/>;
},
renderStamplesSection: function() {
return (
<StamplesSection
dropzoneCursor={this.props.appStateCursor.follow("filesDropZone")}
appStateCursor={this.props.appStateCursor}
isIosApp={this.isIosApp()}
currentOnboardingStep={this.getCurrentOnboardingStep()}/>
);
},
renderMenuSection: function() {
return (
<MenuSection
dropzoneCursor={this.props.appStateCursor.follow("filesDropZone")}
isIosApp={this.isIosApp()}
appStateCursor={this.props.appStateCursor}/>
);
},
renderBreadcrumb: function() {
return <Breadcrumb
breadcrumbStore={this.props.appStateCursor.follow("breadcrumb")}
isIosApp={this.isIosApp()}
/>;
},
maybeRenderNewEventsBar: function() {
var timelineStore = this.props.appStateCursor.follow("timeline");
var totalNewStampleEvents = timelineStore.follow("newStamplesEvents","total").getOrElse(0);
var thereAreNewEventsToDisplay = (totalNewStampleEvents > 0);
if ( thereAreNewEventsToDisplay && !this.isSearchMode() ) {
return <NewEventsBar eventNumber={totalNewStampleEvents}/>
}
},
maybeRenderOnboardingMobile: function() {
var open = this.props.appStateCursor.follow("onboardingMobile","opened").get();
if ( open ) {
return <OnboardingMobile/>;
}
},
render: function() {
return (
<section id="layout">
{this.renderBreadcrumb()}
{this.renderMenuSection()}
<ReactCSSTransitionGroup transitionName="navigation-sliding">
{this.maybeRenderNavigation()}
</ReactCSSTransitionGroup>
{this.renderContacts()}
{this.renderNewButton()}
<ReactCSSTransitionGroup transitionName="notification-sliding">
{this.maybeRenderNotification()}
</ReactCSSTransitionGroup>
{this.renderOnboardingStepsProgression()}
{this.renderOnboardingEnd()}
{this.maybeRenderOnboardingMobile()}
{this.renderStamplesSection()}
{this.maybeRenderOverlayContent()}
<ReactCSSTransitionGroup transitionName="opened-stample-sliding">
{this.maybeRenderMaximisedStample()}
</ReactCSSTransitionGroup>
{this.maybeRenderTimePickerPopUp()}
<Suggestions suggestionsStore={this.props.appStateCursor.follow("suggestions")}/>
{this.renderUploadProgress()}
{this.mayBeRenderClipperProgress()}
{this.maybeRenderOfflineOverlay()}
{this.maybeRenderNewEventsBar()}
</section>
);
}
});
var MenuSection = AtomReact.createPureClass("MenuSection",{
propTypes: {
appStateCursor: AtomReact.PropTypes.isCursor,
isIosApp: React.PropTypes.boolean
},
stampleEnvironment: function () {
return this.props.appStateCursor.follow("menu","stampleEnvironment").get();
},
isMobileMenuDisplayed: function () {
return this.props.appStateCursor.follow("menu","menuMobileDisplayed").get();
},
render: function() {
var classes = {
"mobile-menu-displayed": this.isMobileMenuDisplayed(),
"is-ios-app": this.props.isIosApp
};
classes[this.stampleEnvironment().toLowerCase()] = true;
return (
<section id="menu" className={classNames(classes)}>
<Menu
interactionStoreCursor={this.props.appStateCursor.follow("interaction")}
onboardingStore={this.props.appStateCursor.follow("onboardingSteps")}
notificationStore={this.props.appStateCursor.follow("notification")}
menuStore={this.props.appStateCursor.follow("menu")}
searchBarStore={this.props.appStateCursor.follow("searchBar")}
/>
</section>
);
}
});
var NavigationSection = AtomReact.createPureClass("NavigationSection",{
propTypes: {
appStateCursor: AtomReact.PropTypes.isCursor,
currentOnboardingStep: React.PropTypes.string,
navigationPinned: React.PropTypes.bool,
isIosApp: React.PropTypes.bool
},
isOnboardingOpened: function(){
return this.props.appStateCursor.follow("onboardingSteps","onboardingStepsGuideShow").getOrElse(false);
},
onNavigationHovered: function () {
this.publish(AppEvents.navigationHovered());
},
onNavigationLeaved: function () {
this.publish(AppEvents.navigationLeaved());
},
render: function() {
var onBoardingOpened = this.isOnboardingOpened();
var navigationPinned = this.props.navigationPinned;
var className = classNames({
"onboarding-opened": onBoardingOpened,
"navigation-pinned": navigationPinned,
"is-ios-app": this.props.isIosApp
});
return (
<section id="navigation" className={className}
onMouseEnter={this.onNavigationHovered}
onMouseLeave={this.onNavigationLeaved}>
<MainNavigation
navigationStore={this.props.appStateCursor.follow("mainNavigation")}
currentOnboardingStep={this.props.currentOnboardingStep}
/>
</section>
);
}
});
var NotificationSection = AtomReact.createPureClass("NotificationSection",{
propTypes: {
appStateCursor: AtomReact.PropTypes.isCursor,
isIosApp: React.PropTypes.bool
},
render: function() {
var notificationStoreCursor = this.props.appStateCursor.follow("notification");
var className = classNames({
"is-ios-app": this.props.isIosApp
});
return (
<section id="notification" className={className}>
<Notification notificationStoreCursor={notificationStoreCursor}/>
</section>
)
}
});
var StamplesSection = AtomReact.createPureClass("StamplesSection",{
propTypes: {
appStateCursor: AtomReact.PropTypes.isCursor,
currentOnboardingStep: React.PropTypes.string,
isIosApp: React.PropTypes.boolean
},
isNavigationPinned: function() {
return this.props.appStateCursor.follow("interaction", "navigationPinned").getOrElse(false);
},
areNotificationsOpened: function() {
return this.props.appStateCursor.follow("notification", "opened").getOrElse(false);
},
isContactsPinned: function() {
return this.props.appStateCursor.follow("interaction", "contactsPinned").getOrElse(false);
},
isOnboardingStepsTutorialOpenerDisplayed: function() {
var tutorialSeen = this.props.appStateCursor.follow("onboardingSteps","stepsTutorialSeen").get();
var tutorialDisplayed = this.props.appStateCursor.follow("onboardingSteps","onboardingStepsGuideShow").get();
return !tutorialSeen && !tutorialDisplayed;
},
render: function() {
var navigationPinned = this.isNavigationPinned();
var areNotificationsOpened = this.areNotificationsOpened();
var contactsPinned = this.isContactsPinned();
var classes = {
"with-sidebars": navigationPinned && contactsPinned && areNotificationsOpened,
"with-navigation": navigationPinned,
"with-navigation-only": navigationPinned && !contactsPinned && !areNotificationsOpened,
"with-contacts-only": !navigationPinned && contactsPinned && !areNotificationsOpened,
"with-notification-only": !navigationPinned && !contactsPinned && areNotificationsOpened,
"without-contacts": navigationPinned && !contactsPinned && areNotificationsOpened,
"without-navigation": !navigationPinned && contactsPinned && areNotificationsOpened,
"without-notification": navigationPinned && contactsPinned && !areNotificationsOpened,
"without-sidebars": !navigationPinned && !contactsPinned && !areNotificationsOpened,
"is-ios-app": this.props.isIosApp
};
var selectedSpaceType = this.props.appStateCursor.follow("timeline","selectedSpace","type").get();
var selectedViewType = this.props.appStateCursor.follow("timeline","selectedViewType").get();
classes["selected-space-type-"+selectedSpaceType.toLowerCase()] = true;
classes["selected-view-type-"+selectedViewType.toLowerCase()] = true;
return (
<section id="stamples" className={classNames(classes)}>
<Stamples
timelineStoreCursor={this.props.appStateCursor.follow("timeline")}
spaceOverviewStoreCursor={this.props.appStateCursor.follow("spaceOverview")}
openedStamplesStoreCursor={this.props.appStateCursor.follow("openedStamples")}
userProfileStoreCursor={this.props.appStateCursor.follow("userProfile")}
currentOnboardingStep={this.props.currentOnboardingStep}
showOnboardingStepsTutorialOpener={this.isOnboardingStepsTutorialOpenerDisplayed()}
/>
</section>
);
}
});
module.exports = LayoutSection;
var UploadProgressSection = AtomReact.createPureClass("UploadProgressSection", {
propTypes: {
uploadProgressStore: AtomReact.PropTypes.isCursor
},
abortUploadProcess: function(fileId) {
FileUploadRepository.abortUpload(fileId);
},
uploadProgressCursor: function() {
return this.props.uploadProgressStore;
},
shouldRender: function() {
var isOpened = this.props.uploadProgressStore.follow("opened").getOrElse(false);
var filesToUpload = _.compact(_.values(cursor.getOrEmptyObject()));
if ( isOpened || filesToUpload.length > 0 ) {
var ind = _.findIndex(filesToUpload, function(file) {
return file.status != UPLOAD_STATUS.INIT;
});
return isOpened || (ind != -1);
}
},
render: function() {
var isOpened = this.props.uploadProgressStore.follow("opened").getOrElse(false);
if ( !isOpened ) {
return false;
}
return (
<section id="upload-progress-layout">
<UploadProgress
uploadProgressCursor={this.uploadProgressCursor()}
onClickOnCloseIcon={this.abortUploadProcess}
/>
</section>
);
}
});
var ClipperProgressSection = AtomReact.createPureClass("ClipperProgressSection", {
propTypes: {
clipperProgressStore: AtomReact.PropTypes.isCursor
},
cursor: function() {
return this.props.clipperProgressStore;
},
stampleCursor: function() {
return this.cursor().follow("stample");
},
stample: function() {
return this.stampleCursor().get();
},
stampleId: function() {
return this.stampleCursor().asyncSuccess().follow("id").get();
},
render: function() {
if (this.stample().isLoading()) {
return (
<section id="clipper-progress-layout">
<div className="saving-msg saving"> saving...</div>
<Spinner/>
</section>
);
}
else if (this.stample().isError()) {
return (
<section id="clipper-progress-layout">
<div className="saving-msg error"> error!</div>
</section>
);
}
else {
return (
<section id="clipper-progress-layout">
<div className="saving-msg saved"> saved!</div>
</section>
);
}
}
});
var OnboardingProgressSection = AtomReact.createPureClass("OnboardingProgressSection",{
propTypes: {
onboardingSteps: AtomReact.PropTypes.isCursor
},
isOnboardingEnd: function() {
var finishedStepsCursor = this.props.onboardingSteps.follow("finishedSteps");
return finishedStepsCursor.exists() && OnboardingSteps.isAllGroupsFinished(finishedStepsCursor.get());
},
render: function() {
var show = !this.isOnboardingEnd() && this.props.onboardingSteps.follow("onboardingStepsGuideShow").get();
if ( show ) {
return (
<section id="onboarding-steps-progression">
<OnboardingStepsProgression onboardingStoreCursor={this.props.onboardingSteps}/>
</section>);
}
else {
return false;
}
}
});
var OnboardingEndSection = AtomReact.createPureClass("OnboardingEndSection",{
propTypes: {
onboardingSteps: AtomReact.PropTypes.isCursor
},
isOnboardingEnd: function() {
var finishedStepsCursor = this.props.onboardingSteps.follow("finishedSteps");
return finishedStepsCursor.exists() && OnboardingSteps.isAllGroupsFinished(finishedStepsCursor.get());
},
render: function() {
if ( this.isOnboardingEnd() ) {
return <OnboardingEndOverlay onboardingStore={this.props.onboardingSteps}/>;
}
else {
return false;
}
}
});
// Apply higher order component to all the components that should be drop zones
StamplesSection = HigherOrderComponents.DropZone(StamplesSection);
// Apply higher order component to all the components that should be overlayed
OnboardingWelcome = HigherOrderComponents.Overlayed(OnboardingWelcome);
ErrorOverlay = HigherOrderComponents.Overlayed(ErrorOverlay);
UserDeletionGoodbyeOverlay = HigherOrderComponents.Overlayed(UserDeletionGoodbyeOverlay);
OnboardingEndOverlay = HigherOrderComponents.Overlayed(OnboardingEndOverlay);
OnboardingClipperStepOverlay = HigherOrderComponents.Overlayed(OnboardingClipperStepOverlay);
UserSessionExpired = HigherOrderComponents.Overlayed(UserSessionExpired);
CommunityCreation = HigherOrderComponents.Overlayed(CommunityCreation);
CommunityDeletion = HigherOrderComponents.Overlayed(CommunityDeletion);
LeavingCommunity = HigherOrderComponents.Overlayed(LeavingCommunity);
CategoryCreation = HigherOrderComponents.Overlayed(CategoryCreation);
CategoryEdition = HigherOrderComponents.Overlayed(CategoryEdition);
CategoryMove = HigherOrderComponents.Overlayed(CategoryMove);
StampleMove = HigherOrderComponents.Overlayed(StampleMove);
CategorySelection = HigherOrderComponents.Overlayed(CategorySelection);
CategoryDeletion = HigherOrderComponents.Overlayed(CategoryDeletion);
ProfilePictureUpload = HigherOrderComponents.Overlayed(ProfilePictureUpload);
InviteByEmail = HigherOrderComponents.Overlayed(InviteByEmail);
FeedbackFromBootstrap = HigherOrderComponents.Overlayed(FeedbackFromBootstrap);
UserSettingOverlay = HigherOrderComponents.Overlayed(UserSettingOverlay);
RelationshipManagerOverlay = HigherOrderComponents.Overlayed(RelationshipManagerOverlay);
ShowUsersPopUp = HigherOrderComponents.Overlayed(ShowUsersPopUp);
FileUploadSettingsPopUp = HigherOrderComponents.Overlayed(FileUploadSettingsPopUp);
NotificationSection = HigherOrderComponents.Overlayed(NotificationSection);
SharingManagementLibrary = HigherOrderComponents.Overlayed(SharingManagementLibrary);
SharingManagementCommunity = HigherOrderComponents.Overlayed(SharingManagementCommunity);
SharingManagementCommunityLibrary = HigherOrderComponents.Overlayed(SharingManagementCommunityLibrary);
Clipper = HigherOrderComponents.Overlayed(Clipper);
ImagePanorama = HigherOrderComponents.Overlayed(ImagePanorama);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment