Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clear selection when leaving select view #765

Merged
merged 1 commit into from
Aug 9, 2019
Merged

Clear selection when leaving select view #765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions app/components/ReferenceSelectHeader/ReferenceSelectHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,19 @@ export default class ReferenceSelectHeader extends React.Component {
instructionText: proptypes.string,

/**
* The schema of a reference field currently being edited.
* Callback called when the selection is cancelled.
*/
referenceField: proptypes.object,
onCancel: proptypes.func,

/**
* The CTA text to display on the "return to document" button.
* The schema of a reference field currently being edited.
*/
returnCtaText: proptypes.string,
referenceField: proptypes.object,

/**
* The URL of the "return to document" CTA button.
* The CTA text to display on the "return to document" button.
*/
returnCtaUrl: proptypes.string
returnCtaText: proptypes.string
}

static defaultProps = {
Expand All @@ -46,7 +46,7 @@ export default class ReferenceSelectHeader extends React.Component {
instructionText,
referenceField,
returnCtaText,
returnCtaUrl
onCancel
} = this.props

if (!referenceField) return null
Expand All @@ -60,7 +60,7 @@ export default class ReferenceSelectHeader extends React.Component {
<span> — {instructionText}</span>
</p>

<Button accent="destruct" href={returnCtaUrl} size="small">
<Button accent="destruct" onClick={onCancel} size="small">
{returnCtaText}
</Button>

Expand Down
111 changes: 64 additions & 47 deletions app/views/ReferenceSelectView/ReferenceSelectView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,38 +27,39 @@ class ReferenceSelectView extends React.Component {
constructor(props) {
super(props)

this.cancelSelection = this.cancelSelection.bind(this)
this.saveSelection = this.saveSelection.bind(this)
this.hasPropagatedInitialSelection = {}
}

handleDocumentSelect({referenceField: schema, selection}) {
cancelSelection() {
const {actions, selectionKey} = this.props

actions.setDocumentSelection({
key: selectionKey,
selection: []
})

this.goBackToDocument()
}

goBackToDocument() {
const {
actions,
history,
isNewDocument,
onBuildBaseUrl,
parentContentKey,
route
referenceFieldSchema
} = this.props
const {referenceField} = route.params

actions.updateLocalDocument({
contentKey: parentContentKey,
update: {
[referenceField]: selection && selection.length > 0 ? selection : null
},
error: {
[referenceField]: undefined
}
})

// It's fair to assume that the user got here because they were editing
// the value of the reference field in the edit view. As such, we must
// take them back to whatever section the reference field belongs to, if
// any.
const fieldSection =
schema.publish &&
schema.publish.section &&
slugify(schema.publish.section)
referenceFieldSchema.publish &&
referenceFieldSchema.publish.section &&
slugify(referenceFieldSchema.publish.section)

const redirectUrl = onBuildBaseUrl.call(this, {
createNew: isNewDocument,
referenceFieldSelect: null,
Expand All @@ -71,6 +72,34 @@ class ReferenceSelectView extends React.Component {
history.push(redirectUrl)
}

saveSelection() {
const {
actions,
parentContentKey,
route,
selection,
selectionKey
} = this.props
const {referenceField} = route.params

actions.updateLocalDocument({
contentKey: parentContentKey,
update: {
[referenceField]: selection && selection.length > 0 ? selection : null
},
error: {
[referenceField]: undefined
}
})

actions.setDocumentSelection({
key: selectionKey,
selection: []
})

this.goBackToDocument()
}

handleEmptyDocumentList({selection}) {
const {onBuildBaseUrl, route} = this.props
const {filter} = route.search
Expand Down Expand Up @@ -176,8 +205,9 @@ class ReferenceSelectView extends React.Component {
isSingleDocument,
onBuildBaseUrl,
parentContentKey,
referenceFieldSchema,
route,
selectionKey,
selection,
state
} = this.props
const {documentId, page, referenceField: referenceFieldName} = route.params
Expand All @@ -204,15 +234,12 @@ class ReferenceSelectView extends React.Component {
return null
}

// Getting the schema of the reference field.
const referenceField = collection.fields[referenceFieldName]

if (!referenceField) {
if (!referenceFieldSchema) {
return null
}

// Getting the component for the given reference field.
const fieldType = getFieldType(referenceField)
const fieldType = getFieldType(referenceFieldSchema)
const fieldComponent = fieldComponents[`Field${fieldType}`]

// If the field component does not declare a `onReferenceSelect` method, it
Expand All @@ -227,8 +254,9 @@ class ReferenceSelectView extends React.Component {
// If the `referenceField` parameter doesn't match a field of type
// `Reference`, we render nothing.
if (
!referenceField ||
(referenceField.type !== 'Media' && referenceField.type !== 'Reference')
!referenceFieldSchema ||
(referenceFieldSchema.type !== 'Media' &&
referenceFieldSchema.type !== 'Reference')
) {
return null
}
Expand Down Expand Up @@ -257,18 +285,7 @@ class ReferenceSelectView extends React.Component {
}

// Getting documents from store.
const data = state.documents[contentKey] || {}
const {metadata} = data

// Getting the IDs of the selected documents.
const selection = state.selection[selectionKey] || []

// Computing the URL that users will be taken to if they wish to cancel
// the reference selection.
const returnCtaUrl = onBuildBaseUrl.call(this, {
createNew: !documentId && !isSingleDocument,
referenceFieldSelect: null
})
const {metadata} = state.documents[contentKey] || {}

// Are we showing only selected documents?
const isFilteringSelection =
Expand Down Expand Up @@ -298,8 +315,8 @@ class ReferenceSelectView extends React.Component {
return (
<Page>
<ReferenceSelectHeader
referenceField={referenceField}
returnCtaUrl={returnCtaUrl}
onCancel={this.cancelSelection}
referenceField={referenceFieldSchema}
/>

<DocumentListController
Expand Down Expand Up @@ -350,13 +367,7 @@ class ReferenceSelectView extends React.Component {
selectedDocuments={selection}
showSelectedDocumentsUrl={showSelectedDocumentsUrl}
>
<Button
accent="save"
onClick={this.handleDocumentSelect.bind(this, {
referenceField,
selection
})}
>
<Button accent="save" onClick={this.saveSelection}>
Save selection
</Button>
</DocumentListToolbar>
Expand Down Expand Up @@ -458,6 +469,8 @@ function mapState(state, ownProps) {
return collection.slug === params.collection
})

const referenceFieldSchema = collection.fields[params.referenceField]

const isNewDocument = /\/new(\/|$)/.test(path) && !params.documentId
const isSingleDocument =
collection.settings &&
Expand All @@ -483,12 +496,16 @@ function mapState(state, ownProps) {
referenceField
})

const selection = state.selection[selectionKey] || []

return {
collection,
contentKey,
isNewDocument,
isSingleDocument,
parentContentKey,
referenceFieldSchema,
selection,
selectionKey,
state
}
Expand Down
Loading