+
+
{collectionLabel}
+ {
+ newEntryUrl
+ ?
+ {`New ${collectionLabel}`}
+
+ : null
+ }
+
+ {
+ collectionDescription
+ ?
{collectionDescription}
+ : null
+ }
+
+ View as:
+
+
+
+
- {(isFetching === true || !entries) ?
- {['Loading Entries', 'Caching Entries', 'This might take several minutes']}
- :
-
- Results for “{searchTerm}”
-
- }
-
);
+ render () {
+ const { dispatch, collections, entries, publicFolder, page, isFetching } = this.props;
+ return (
+
+ );
}
}
-
function mapStateToProps(state, ownProps) {
+ const { searchTerm } = ownProps;
+ const collections = ownProps.collections.toIndexedSeq();
const isFetching = state.entries.getIn(['search', 'isFetching']);
const page = state.entries.getIn(['search', 'page']);
const entries = selectSearchedEntries(state);
- const collections = state.collections.toIndexedSeq();
const publicFolder = state.config.get('public_folder');
- const { searchTerm } = ownProps.match.params;
return { isFetching, page, collections, entries, publicFolder, searchTerm };
}
+const mapDispatchToProps = {
+ searchEntries: actionSearchEntries,
+ clearSearch: actionClearSearch,
+};
-export default connect(
- mapStateToProps,
- {
- searchEntries: actionSearchEntries,
- clearSearch: actionClearSearch,
- }
-)(SearchPage);
+export default connect(mapStateToProps, mapDispatchToProps)(EntriesSearch);
diff --git a/src/components/Collection/Entries/EntryCard.css b/src/components/Collection/Entries/EntryCard.css
new file mode 100644
index 000000000000..8dfc18766ce0
--- /dev/null
+++ b/src/components/Collection/Entries/EntryCard.css
@@ -0,0 +1,70 @@
+.nc-entryListing-gridCard {
+ @apply(--card);
+ flex: 0 0 335px;
+ height: 240px;
+ background-color: var(--colorForeground);
+ color: var(--colorText);
+ overflow: hidden;
+ margin-bottom: 16px;
+ margin-left: 12px;
+
+ &:hover {
+ background-color: var(--colorForeground);
+ color: var(--colorText);
+ }
+}
+
+.nc-entryListing-cardImage {
+ background-position: center center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ height: 150px;
+}
+
+.nc-entryListing-cardBody {
+ padding: 16px 22px;
+ height: 90px;
+ position: relative;
+
+ &:after {
+ content: '';
+ position: absolute;
+ display: block;
+ z-index: 1;
+ bottom: 0;
+ left: -20%;
+ height: 140%;
+ width: 140%;
+ box-shadow: inset 0 -15px 24px #fff;
+ }
+}
+
+.nc-entryListing-listCard {
+ @apply(--card);
+ width: var(--topCardWidth);
+ max-width: 100%;
+ padding: 16px 22px;
+ margin-left: 12px;
+ margin-bottom: 16px;
+
+ &:hover {
+ background-color: var(--colorForeground);
+ }
+}
+
+.nc-entryListing-listCard-title {
+ margin-bottom: 0;
+}
+
+.nc-entryListing-cardBody-full {
+ height: 100%;
+}
+
+.nc-entryListing-cardHeading {
+ margin: 0 0 2px;
+}
+
+.nc-entryListing-cardListLabel {
+ white-space: nowrap;
+ font-weight: bold;
+}
diff --git a/src/components/Collection/Entries/EntryCard.js b/src/components/Collection/Entries/EntryCard.js
new file mode 100644
index 000000000000..e9f3f9fcd030
--- /dev/null
+++ b/src/components/Collection/Entries/EntryCard.js
@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Link } from 'react-router-dom';
+import c from 'classnames';
+import history from 'Routing/history';
+import { resolvePath } from 'Lib/pathHelper';
+import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
+
+const EntryCard = ({
+ collection,
+ entry,
+ inferedFields,
+ publicFolder,
+ viewStyle = VIEW_STYLE_LIST,
+}) => {
+ const label = entry.get('label');
+ const title = label || entry.getIn(['data', inferedFields.titleField]);
+ const path = `/collections/${collection.get('name')}/entries/${entry.get('slug')}`;
+ let image = entry.getIn(['data', inferedFields.imageField]);
+ image = resolvePath(image, publicFolder);
+ if(image) {
+ image = encodeURI(image);
+ }
+
+ if (viewStyle === VIEW_STYLE_LIST) {
+ return (
+
+ {title}
+
+ );
+ }
+
+ if (viewStyle === VIEW_STYLE_GRID) {
+ return (
+
+
+
{title}
+
+ {
+ image
+ ?
+ : null
+ }
+
+ );
+ }
+}
+
+export default EntryCard;
diff --git a/src/components/Collection/Entries/EntryListing.css b/src/components/Collection/Entries/EntryListing.css
new file mode 100644
index 000000000000..4980857feadb
--- /dev/null
+++ b/src/components/Collection/Entries/EntryListing.css
@@ -0,0 +1,9 @@
+.nc-entryListing-cardsGrid {
+ display: flex;
+ flex-flow: row wrap;
+ margin-left: -12px;
+}
+
+.nc-entryListing-cardsList {
+ margin-left: -12px;
+}
diff --git a/src/components/Collection/Entries/EntryListing.js b/src/components/Collection/Entries/EntryListing.js
new file mode 100644
index 000000000000..dff560bbad07
--- /dev/null
+++ b/src/components/Collection/Entries/EntryListing.js
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Waypoint from 'react-waypoint';
+import { Map } from 'immutable';
+import { selectFields, selectInferedField } from 'Reducers/collections';
+import EntryCard from './EntryCard';
+
+export default class EntryListing extends React.Component {
+ static propTypes = {
+ publicFolder: PropTypes.string.isRequired,
+ collections: PropTypes.oneOfType([
+ ImmutablePropTypes.map,
+ ImmutablePropTypes.iterable,
+ ]).isRequired,
+ entries: ImmutablePropTypes.list,
+ onPaginate: PropTypes.func.isRequired,
+ page: PropTypes.number,
+ viewStyle: PropTypes.string,
+ };
+
+ handleLoadMore = () => {
+ this.props.onPaginate(this.props.page + 1);
+ };
+
+ inferFields = collection => {
+ const titleField = selectInferedField(collection, 'title');
+ const descriptionField = selectInferedField(collection, 'description');
+ const imageField = selectInferedField(collection, 'image');
+ const fields = selectFields(collection);
+ const inferedFields = [titleField, descriptionField, imageField];
+ const remainingFields = fields && fields.filter(f => inferedFields.indexOf(f.get('name')) === -1);
+ return { titleField, descriptionField, imageField, remainingFields };
+ };
+
+ renderCardsForSingleCollection = () => {
+ const { collections, entries, publicFolder, viewStyle } = this.props;
+ const inferedFields = this.inferFields(collections);
+ const entryCardProps = { collection: collections, inferedFields, publicFolder, viewStyle };
+ return entries.map((entry, idx) => );
+ };
+
+ renderCardsForMultipleCollections = () => {
+ const { collections, entries, publicFolder } = this.props;
+ return entries.map((entry, idx) => {
+ const collectionName = entry.get('collection');
+ const collection = collections.find(coll => coll.get('name') === collectionName);
+ const inferedFields = this.inferFields(collection);
+ const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx };
+ return ;
+ });
+ };
+
+ render() {
+ const { collections, entries, publicFolder } = this.props;
+
+ return (
+
+
+ {
+ Map.isMap(collections)
+ ? this.renderCardsForSingleCollection()
+ : this.renderCardsForMultipleCollections()
+ }
+
+
+
+
Collections
+
+
+ this.setState({ query: e.target.value })}
+ onKeyDown={e => e.key === 'Enter' && searchCollections(query)}
+ placeholder="Search all"
+ value={query}
+ />
+
+ {collections.toList().map(this.renderLink)}
+
-
-
- {
- errors && errors.map(error =>
- error.message &&
- typeof error.message === 'string' &&
- - {error.message}
- )
- }
-
-
onChange(fieldName, newValue, newMetadata)}
- onValidate={this.props.onValidate.bind(this, fieldName)}
- onOpenMediaLibrary={onOpenMediaLibrary}
- onAddAsset={onAddAsset}
- onRemoveAsset={onRemoveAsset}
- getAsset={getAsset}
- ref={this.processControlRef.bind(this, fieldName)}
- />
-
- {
- fields.map((field, i) => {
- if (isHidden(field)) {
- return null;
- }
- return
{this.controlFor(field)}
;
- })
- }
-
{ entry.get('error') }
;
+ } else if (entryDraft == null
+ || entryDraft.get('entry') === undefined
+ || (entry && entry.get('isFetching'))) {
+ return Loading entry...;
+ }
+
+ return (
+
+ );
+ }
+}
+
+function mapStateToProps(state, ownProps) {
+ const { collections, entryDraft, mediaLibrary, auth, config, entries } = state;
+ const slug = ownProps.match.params.slug;
+ const collection = collections.get(ownProps.match.params.name);
+ const collectionName = collection.get('name');
+ const newEntry = ownProps.newRecord === true;
+ const fields = selectFields(collection, slug);
+ const entry = newEntry ? null : selectEntry(state, collectionName, slug);
+ const boundGetAsset = getAsset.bind(null, state);
+ const mediaPaths = mediaLibrary.get('controlMedia');
+ const user = auth && auth.get('user');
+ const hasChanged = entryDraft.get('hasChanged');
+ const displayUrl = config.get('display_url');
+ const hasWorkflow = config.get('publish_mode') === EDITORIAL_WORKFLOW;
+ const isModification = entryDraft.getIn(['entry', 'isModification']);
+ const collectionEntriesLoaded = !!entries.getIn(['entities', collectionName])
+ const unpublishedEntry = selectUnpublishedEntry(state, collectionName, slug);
+ const currentStatus = unpublishedEntry && unpublishedEntry.getIn(['metaData', 'status']);
+ return {
+ collection,
+ collections,
+ newEntry,
+ entryDraft,
+ mediaPaths,
+ boundGetAsset,
+ fields,
+ slug,
+ entry,
+ user,
+ hasChanged,
+ displayUrl,
+ hasWorkflow,
+ isModification,
+ collectionEntriesLoaded,
+ currentStatus,
+ };
+}
+
+export default connect(
+ mapStateToProps,
+ {
+ changeDraftField,
+ changeDraftFieldValidation,
+ openMediaLibrary,
+ removeInsertedMedia,
+ addAsset,
+ loadEntry,
+ loadEntries,
+ createDraftFromEntry,
+ createEmptyDraft,
+ discardDraft,
+ persistEntry,
+ deleteEntry,
+ updateUnpublishedEntryStatus,
+ publishUnpublishedEntry,
+ deleteUnpublishedEntry,
+ logoutUser,
+ }
+)(withWorkflow(Editor));
diff --git a/src/components/Editor/EditorControlPane/EditorControl.css b/src/components/Editor/EditorControlPane/EditorControl.css
new file mode 100644
index 000000000000..432eb70b227e
--- /dev/null
+++ b/src/components/Editor/EditorControlPane/EditorControl.css
@@ -0,0 +1,7 @@
+.nc-controlPane-control {
+ margin-top: 16px;
+
+ &:first-child {
+ margin-top: 36px;
+ }
+}
diff --git a/src/components/Editor/EditorControlPane/EditorControl.js b/src/components/Editor/EditorControlPane/EditorControl.js
new file mode 100644
index 000000000000..4b8370b169b6
--- /dev/null
+++ b/src/components/Editor/EditorControlPane/EditorControl.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import { partial } from 'lodash';
+import c from 'classnames';
+import { resolveWidget } from 'Lib/registry';
+import Widget from './Widget';
+
+export default class EditorControl extends React.Component {
+ state = {
+ activeLabel: false,
+ };
+
+ render() {
+ const {
+ value,
+ field,
+ fieldsMetaData,
+ fieldsErrors,
+ mediaPaths,
+ getAsset,
+ onChange,
+ onOpenMediaLibrary,
+ onAddAsset,
+ onRemoveInsertedMedia,
+ onValidate,
+ processControlRef,
+ } = this.props;
+ const widgetName = field.get('widget');
+ const widget = resolveWidget(widgetName);
+ const fieldName = field.get('name');
+ const metadata = fieldsMetaData && fieldsMetaData.get(fieldName);
+ const errors = fieldsErrors && fieldsErrors.get(fieldName);
+ return (
+
+
+ {
+ errors && errors.map(error =>
+ error.message &&
+ typeof error.message === 'string' &&
+ - {error.message}
+ )
+ }
+
+
+
onChange(fieldName, newValue, newMetadata)}
+ onValidate={onValidate && partial(onValidate, fieldName)}
+ onOpenMediaLibrary={onOpenMediaLibrary}
+ onRemoveInsertedMedia={onRemoveInsertedMedia}
+ onAddAsset={onAddAsset}
+ getAsset={getAsset}
+ hasActiveStyle={this.state.styleActive}
+ setActiveStyle={() => this.setState({ styleActive: true })}
+ setInactiveStyle={() => this.setState({ styleActive: false })}
+ ref={processControlRef && partial(processControlRef, fieldName)}
+ editorControl={EditorControl}
+ />
+
+ {fields.map((field, i) => field.get('widget') === 'hidden' ? null :
+
+ )}
+
+ );
+ }
+}
+
+ControlPane.propTypes = {
+ collection: ImmutablePropTypes.map.isRequired,
+ entry: ImmutablePropTypes.map.isRequired,
+ fields: ImmutablePropTypes.list.isRequired,
+ fieldsMetaData: ImmutablePropTypes.map.isRequired,
+ fieldsErrors: ImmutablePropTypes.map.isRequired,
+ mediaPaths: ImmutablePropTypes.map.isRequired,
+ getAsset: PropTypes.func.isRequired,
+ onOpenMediaLibrary: PropTypes.func.isRequired,
+ onAddAsset: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ onValidate: PropTypes.func.isRequired,
+ onRemoveInsertedMedia: PropTypes.func.isRequired,
+};
diff --git a/src/components/Widgets/ControlHOC.js b/src/components/Editor/EditorControlPane/Widget.js
similarity index 70%
rename from src/components/Widgets/ControlHOC.js
rename to src/components/Editor/EditorControlPane/Widget.js
index 5016cb39e7ec..75c18bbb836d 100644
--- a/src/components/Widgets/ControlHOC.js
+++ b/src/components/Editor/EditorControlPane/Widget.js
@@ -1,15 +1,24 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ImmutablePropTypes from "react-immutable-proptypes";
-import ValidationErrorTypes from '../../constants/validationErrorTypes';
+import { Map } from 'immutable';
+import ValidationErrorTypes from 'Constants/validationErrorTypes';
const truthy = () => ({ error: false });
-class ControlHOC extends Component {
-
+export default class Widget extends Component {
static propTypes = {
controlComponent: PropTypes.func.isRequired,
field: ImmutablePropTypes.map.isRequired,
+ hasActiveStyle: PropTypes.bool,
+ setActiveStyle: PropTypes.func.isRequired,
+ setInactiveStyle: PropTypes.func.isRequired,
+ className: PropTypes.string.isRequired,
+ classNameWrapper: PropTypes.string.isRequired,
+ classNameWidget: PropTypes.string.isRequired,
+ classNameWidgetActive: PropTypes.string.isRequired,
+ classNameLabel: PropTypes.string.isRequired,
+ classNameLabelActive: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
PropTypes.node,
PropTypes.object,
@@ -22,7 +31,7 @@ class ControlHOC extends Component {
onValidate: PropTypes.func,
onOpenMediaLibrary: PropTypes.func.isRequired,
onAddAsset: PropTypes.func.isRequired,
- onRemoveAsset: PropTypes.func.isRequired,
+ onRemoveInsertedMedia: PropTypes.func.isRequired,
getAsset: PropTypes.func.isRequired,
};
@@ -33,7 +42,9 @@ class ControlHOC extends Component {
if (this.wrappedControlShouldComponentUpdate) {
return this.wrappedControlShouldComponentUpdate(nextProps);
}
- return this.props.value !== nextProps.value;
+ return this.props.value !== nextProps.value
+ || this.props.classNameWrapper !== nextProps.classNameWrapper
+ || this.props.hasActiveStyle !== nextProps.hasActiveStyle;
}
processInnerControlRef = ref => {
@@ -136,6 +147,21 @@ class ControlHOC extends Component {
return { error: false };
};
+ /**
+ * In case the `onChangeObject` function is frozen by a child widget implementation,
+ * e.g. when debounced, always get the latest object value instead of using
+ * `this.props.value` directly.
+ */
+ getObjectValue = () => this.props.value || Map();
+
+ /**
+ * Change handler for fields that are nested within another field.
+ */
+ onChangeObject = (fieldName, newValue, newMetadata) => {
+ const newObjectValue = this.getObjectValue().set(fieldName, newValue);
+ return this.props.onChange(newObjectValue, newMetadata);
+ };
+
render() {
const {
controlComponent,
@@ -146,8 +172,17 @@ class ControlHOC extends Component {
onChange,
onOpenMediaLibrary,
onAddAsset,
- onRemoveAsset,
- getAsset
+ onRemoveInsertedMedia,
+ getAsset,
+ classNameWrapper,
+ classNameWidget,
+ classNameWidgetActive,
+ classNameLabel,
+ classNameLabelActive,
+ setActiveStyle,
+ setInactiveStyle,
+ hasActiveStyle,
+ editorControl,
} = this.props;
return React.createElement(controlComponent, {
field,
@@ -155,14 +190,22 @@ class ControlHOC extends Component {
mediaPaths,
metadata,
onChange,
+ onChangeObject: this.onChangeObject,
onOpenMediaLibrary,
onAddAsset,
- onRemoveAsset,
+ onRemoveInsertedMedia,
getAsset,
forID: field.get('name'),
ref: this.processInnerControlRef,
+ classNameWrapper,
+ classNameWidget,
+ classNameWidgetActive,
+ classNameLabel,
+ classNameLabelActive,
+ setActiveStyle,
+ setInactiveStyle,
+ hasActiveStyle,
+ editorControl,
});
}
}
-
-export default ControlHOC;
diff --git a/src/components/Editor/EditorInterface.css b/src/components/Editor/EditorInterface.css
new file mode 100644
index 000000000000..c8a5d2a3c260
--- /dev/null
+++ b/src/components/Editor/EditorInterface.css
@@ -0,0 +1,78 @@
+/**
+ * React Split Pane
+ */
+.Resizer.vertical {
+ width: 21px;
+ cursor: col-resize;
+ position: relative;
+ transition: background-color var(--transition);
+
+ &:before {
+ content: '';
+ width: 1px;
+ height: 100%;
+ position: relative;
+ left: 10px;
+ background-color: var(--textFieldBorderColor);
+ display: block;
+ }
+
+ &:hover,
+ &:active {
+ background-color: var(--colorGrayLight);
+ }
+}
+
+/* Quick fix for preview pane not fully displaying in Safari */
+.SplitPane .Pane {
+ height: 100%;
+}
+
+.SplitPane,
+.nc-entryEditor-noPreviewEditorContainer {
+ @apply(--card);
+ border-radius: 0;
+ height: 100%;
+}
+
+.nc-entryEditor-containerOuter {
+ width: 100%;
+ min-width: 800px;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ padding-top: 66px;
+ background-color: var(--colorBackground);
+}
+
+.nc-entryEditor-container {
+ max-width: 1600px;
+ height: 100%;
+ margin: 0 auto;
+ position: relative;
+}
+
+.nc-entryEditor-controlPane,
+.nc-entryEditor-previewPane {
+ height: 100%;
+ overflow-y: auto;
+}
+
+.nc-entryEditor-controlPane {
+ padding: 0 16px 16px;
+ position: relative;
+ overflow-x: hidden;
+}
+
+.nc-entryEditor-viewControls {
+ position: absolute;
+ top: 10px;
+ right: -10px;
+ z-index: 299;
+}
+
+.nc-entryEditor-blocker > * {
+ pointer-events: none;
+}
diff --git a/src/components/Editor/EditorInterface.js b/src/components/Editor/EditorInterface.js
new file mode 100644
index 000000000000..7afe6572a3f7
--- /dev/null
+++ b/src/components/Editor/EditorInterface.js
@@ -0,0 +1,224 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import SplitPane from 'react-split-pane';
+import classnames from 'classnames';
+import { ScrollSync, ScrollSyncPane } from './EditorScrollSync';
+import { Icon } from 'UI'
+import EditorControlPane from './EditorControlPane/EditorControlPane';
+import EditorPreviewPane from './EditorPreviewPane/EditorPreviewPane';
+import EditorToolbar from './EditorToolbar';
+import EditorToggle from './EditorToggle';
+
+const PREVIEW_VISIBLE = 'cms.preview-visible';
+const SCROLL_SYNC_ENABLED = 'cms.scroll-sync-enabled';
+
+class EditorInterface extends Component {
+ state = {
+ showEventBlocker: false,
+ previewVisible: localStorage.getItem(PREVIEW_VISIBLE) !== "false",
+ scrollSyncEnabled: localStorage.getItem(SCROLL_SYNC_ENABLED) !== "false",
+ };
+
+ handleSplitPaneDragStart = () => {
+ this.setState({ showEventBlocker: true });
+ };
+
+ handleSplitPaneDragFinished = () => {
+ this.setState({ showEventBlocker: false });
+ };
+
+ handleOnPersist = (opts = {}) => {
+ const { createNew = false } = opts;
+ this.controlPaneRef.validate();
+ this.props.onPersist({ createNew });
+ };
+
+ handleOnPublish = (opts = {}) => {
+ const { createNew = false } = opts;
+ this.controlPaneRef.validate();
+ this.props.onPublish({ createNew });
+ };
+
+ handleTogglePreview = () => {
+ const newPreviewVisible = !this.state.previewVisible;
+ this.setState({ previewVisible: newPreviewVisible });
+ localStorage.setItem(PREVIEW_VISIBLE, newPreviewVisible);
+ };
+
+ handleToggleScrollSync = () => {
+ const newScrollSyncEnabled = !this.state.scrollSyncEnabled;
+ this.setState({ scrollSyncEnabled: newScrollSyncEnabled });
+ localStorage.setItem(SCROLL_SYNC_ENABLED, newScrollSyncEnabled);
+ };
+
+ render() {
+ const {
+ collection,
+ entry,
+ fields,
+ fieldsMetaData,
+ fieldsErrors,
+ mediaPaths,
+ getAsset,
+ onChange,
+ enableSave,
+ showDelete,
+ onDelete,
+ onDeleteUnpublishedChanges,
+ onChangeStatus,
+ onPublish,
+ onValidate,
+ onOpenMediaLibrary,
+ onAddAsset,
+ onRemoveInsertedMedia,
+ user,
+ hasChanged,
+ displayUrl,
+ hasWorkflow,
+ hasUnpublishedChanges,
+ isNewEntry,
+ isModification,
+ currentStatus,
+ onLogoutClick,
+ } = this.props;
+
+ const { previewVisible, scrollSyncEnabled, showEventBlocker } = this.state;
+
+ const collectionPreviewEnabled = collection.getIn(['editor', 'preview'], true);
+
+ const editor = (
+
+ this.controlPaneRef = c} // eslint-disable-line
+ />
+
+ );
+
+ const editorWithPreview = (
+
+
+
+ );
+
+ const editorWithoutPreview = (
+
+ {editor}
+
+ );
+
+ return (
+
+
this.handleOnPersist({ createNew: true })}
+ onDelete={onDelete}
+ onDeleteUnpublishedChanges={onDeleteUnpublishedChanges}
+ onChangeStatus={onChangeStatus}
+ showDelete={showDelete}
+ onPublish={onPublish}
+ onPublishAndNew={() => this.handleOnPublish({ createNew: true })}
+ enableSave={enableSave}
+ user={user}
+ hasChanged={hasChanged}
+ displayUrl={displayUrl}
+ collection={collection}
+ hasWorkflow={hasWorkflow}
+ hasUnpublishedChanges={hasUnpublishedChanges}
+ isNewEntry={isNewEntry}
+ isModification={isModification}
+ currentStatus={currentStatus}
+ onLogoutClick={onLogoutClick}
+ />
+
+
+
+
+
+ {
+ collectionPreviewEnabled && this.state.previewVisible
+ ? editorWithPreview
+ : editorWithoutPreview
+ }
+