fix(compass-crud): show "expand all / collapse all" button on readonly documents COMPASS-4635 #6265
+118
−9
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kraenhansen
changed the title
kraenhansen
commented
Sep 19, 2024
| @@ -44,6 +44,13 @@ const actionsGroupSignalPopover = css({ | |||
| display: 'block !important', | |||
| }); | |||
|
|
|||
| const expandButton = css({ | |||
| '& > div:has(svg)': { | |||
kraenhansen
commented
Sep 19, 2024
Comment on lines
+52
to
+99
| /** | ||
| * Subscribe to the update store on mount. | ||
| */ | ||
| componentDidMount() { | ||
| this.subscribeToDocumentEvents(this.props.doc); | ||
| } | ||
|
|
||
| /** | ||
| * Refreshing the list updates the doc in the props so we should update the | ||
| * document on the instance. | ||
| */ | ||
| componentDidUpdate(prevProps: ReadonlyDocumentProps) { | ||
| if (prevProps.doc !== this.props.doc) { | ||
| this.unsubscribeFromDocumentEvents(prevProps.doc); | ||
| this.subscribeToDocumentEvents(this.props.doc); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Unsubscribe from the update store on unmount. | ||
| */ | ||
| componentWillUnmount() { | ||
| this.unsubscribeFromDocumentEvents(this.props.doc); | ||
| } | ||
|
|
||
| /** | ||
| * Subscribe to the document events. | ||
| */ | ||
| subscribeToDocumentEvents(doc: Document) { | ||
| doc.on(DocumentEvents.Expanded, this.handleExpanded); | ||
| doc.on(DocumentEvents.Collapsed, this.handleCollapsed); | ||
| } | ||
|
|
||
| /** | ||
| * Unsubscribe from the document events. | ||
| */ | ||
| unsubscribeFromDocumentEvents(doc: Document) { | ||
| doc.on(DocumentEvents.Expanded, this.handleExpanded); | ||
| doc.on(DocumentEvents.Collapsed, this.handleCollapsed); | ||
| } | ||
|
|
||
| handleExpanded = () => { | ||
| this.setState({ expanded: true }); | ||
| }; | ||
|
|
||
| handleCollapsed = () => { | ||
| this.setState({ expanded: false }); | ||
| }; |
There was a problem hiding this comment.
This is mostly copied from the EditableDocument to react to relevant events on the doc.
kraenhansen
commented
Sep 19, 2024
| @@ -94,7 +178,6 @@ class ReadonlyDocument extends React.Component<ReadonlyDocumentProps> { | |||
| static propTypes = { | |||
| copyToClipboard: PropTypes.func, | |||
| doc: PropTypes.object.isRequired, | |||
| expandAll: PropTypes.bool, | |||
There was a problem hiding this comment.
This was extraenuous. Most likely a leftover from some prop that got removed.
kraenhansen
commented
Sep 19, 2024
| @@ -399,13 +399,15 @@ export const HadronElement: React.FunctionComponent<{ | |||
| value: HadronElementType; | |||
| editable: boolean; | |||
| editingEnabled: boolean; | |||
| extraPaddingLeft?: number; | |||
There was a problem hiding this comment.
The Element in the Document now takes some extraPaddingLeft.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
To follow the design specification outlined in EXPO-2098.
Checklist
ReadonlyDocument(as per design bullet 4).Expand / collapse in the "read only" mode
Screen.Recording.2024-09-19.at.22.54.37.mov
Motivation and Context
Open Questions
Dependents
Types of changes