feat(VncConsole): More possibilities to customize component #1402
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,59 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import PropTypes from 'prop-types'; | ||
| import { MenuItem, Button, helpers } from 'patternfly-react'; | ||
|
|
||
| const { Dropdown } = Button; | ||
| const { noop } = helpers; | ||
|
|
||
| const VncActions = ({ | ||
| textSendShortcut, | ||
| textCtrlAltDel, | ||
| textDisconnect, | ||
| onCtrlAltDel, | ||
| onDisconnect, | ||
| insertToolbarTo | ||
| }) => { | ||
| const toolbar = ( | ||
| <div> | ||
| <Dropdown bsStyle="default" title={textSendShortcut} id="console-send-shortcut" onClick={noop}> | ||
| <MenuItem eventKey="1" onClick={onCtrlAltDel}> | ||
| {textCtrlAltDel} | ||
| </MenuItem> | ||
| </Dropdown> | ||
| <Button bsStyle="default" onClick={onDisconnect}> | ||
| {textDisconnect} | ||
| </Button> | ||
| </div> | ||
| ); | ||
|
|
||
| if (!insertToolbarTo) { | ||
| return toolbar; | ||
| } | ||
| return ( | ||
| document.getElementById(insertToolbarTo) && ReactDOM.createPortal(toolbar, document.getElementById(insertToolbarTo)) | ||
| ); | ||
| }; | ||
|
|
||
| VncActions.propTypes = { | ||
| onDisconnect: PropTypes.func.isRequired, | ||
| onCtrlAltDel: PropTypes.func, | ||
|
|
||
| textCtrlAltDel: PropTypes.string, | ||
| textSendShortcut: PropTypes.string, | ||
| textDisconnect: PropTypes.string, | ||
|
|
||
| insertToolbarTo: PropTypes.string // id of element where VncAction should be inserted | ||
| }; | ||
|
|
||
| VncActions.defaultProps = { | ||
| onCtrlAltDel: noop, | ||
|
|
||
| textCtrlAltDel: 'Ctrl+Alt+Del', | ||
| textSendShortcut: 'Send Key', | ||
| textDisconnect: 'Disconnect', | ||
|
|
||
| insertToolbarTo: '' | ||
| }; | ||
|
|
||
| export default VncActions; | ||
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,67 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`VncActions renders correctly component hierarchy 1`] = ` | ||
| <div> | ||
|
There was a problem hiding this comment. No, |
||
| <DropdownButton | ||
| bsStyle="default" | ||
| id="console-send-shortcut" | ||
| onClick={[Function]} | ||
| title="My Send Shortcut description" | ||
| > | ||
| <MenuItem | ||
| bsClass="dropdown" | ||
| disabled={false} | ||
| divider={false} | ||
| eventKey="1" | ||
| header={false} | ||
| onClick={[MockFunction]} | ||
| > | ||
| foobar | ||
| </MenuItem> | ||
| </DropdownButton> | ||
| <Button | ||
| active={false} | ||
| block={false} | ||
| bsClass="btn" | ||
| bsStyle="default" | ||
| disabled={false} | ||
| onClick={[MockFunction]} | ||
| > | ||
| Disconnect | ||
| </Button> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`VncActions renders correctly html 1`] = `"<div><div class=\\"dropdown btn-group btn-group-default\\"><button id=\\"console-send-shortcut\\" role=\\"button\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" type=\\"button\\" class=\\"dropdown-toggle btn btn-default\\">My Send Shortcut description <span class=\\"caret\\"></span></button><ul role=\\"menu\\" class=\\"dropdown-menu\\" aria-labelledby=\\"console-send-shortcut\\"><li role=\\"presentation\\" class=\\"\\"><a role=\\"menuitem\\" tabindex=\\"-1\\" href=\\"#\\">foobar</a></li></ul></div><button type=\\"button\\" class=\\"btn btn-default\\">Disconnect</button></div>"`; | ||
|
|
||
| exports[`placeholder render test 1`] = ` | ||
| <div> | ||
| <DropdownButton | ||
| bsStyle="default" | ||
| id="console-send-shortcut" | ||
| onClick={[Function]} | ||
| title="Send Key" | ||
| > | ||
| <MenuItem | ||
| bsClass="dropdown" | ||
| disabled={false} | ||
| divider={false} | ||
| eventKey="1" | ||
| header={false} | ||
| onClick={[Function]} | ||
| > | ||
| Ctrl+Alt+Del | ||
| </MenuItem> | ||
| </DropdownButton> | ||
| <Button | ||
| active={false} | ||
| block={false} | ||
| bsClass="btn" | ||
| bsStyle="default" | ||
| disabled={false} | ||
| onClick={[MockFunction]} | ||
| > | ||
| Disconnect | ||
| </Button> | ||
| </div> | ||
| `; | ||
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
does this need to be a portal? We don't typically use portals for elements that will render in the typical DOM/page content area (they are more often used for appending modals/popovers/etc.).
I'm not currently using this downstream, so I can't say for sure, but you may be able to just expose it as a simple stateless component... we always break the JSX down into smaller reusable components if possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, this component is depend on VncConsole component and for correct work should only be used inside of VncConsole. So from my point of view portals are the best solution.