-
Notifications
You must be signed in to change notification settings - Fork 360
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(VncConsole): More possibilities to customize component, like: ex…
…traction toolbar and console sc Added possibility to extract toolbar to any other component. Added scaling prop to VncConsole, and enhance `textConnecting` props to use node type as well. And fixed disconnecting.
- Loading branch information
Showing
4 changed files
with
149 additions
and
66 deletions.
There are no files selected for viewing
47 changes: 38 additions & 9 deletions
47
packages/patternfly-3/react-console/src/VncConsole/VncActions.js
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, onCtrlAltDel }) => ( | ||
| <Dropdown bsStyle="default" title={textSendShortcut} id="console-send-shortcut" onClick={noop}> | ||
| <MenuItem eventKey="1" onClick={onCtrlAltDel}> | ||
| {textCtrlAltDel} | ||
| </MenuItem> | ||
| </Dropdown> | ||
| ); | ||
| 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 | ||
| 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' | ||
| 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
84 changes: 53 additions & 31 deletions
84
packages/patternfly-3/react-console/src/VncConsole/__snapshots__/VncActions.test.js.snap
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,65 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`VncActions renders correctly component hierarchy 1`] = ` | ||
| <DropdownButton | ||
| bsStyle="default" | ||
| id="console-send-shortcut" | ||
| onClick={[Function]} | ||
| title="My Send Shortcut description" | ||
| > | ||
| <MenuItem | ||
| bsClass="dropdown" | ||
| <div> | ||
| <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} | ||
| divider={false} | ||
| eventKey="1" | ||
| header={false} | ||
| onClick={[MockFunction]} | ||
| > | ||
| foobar | ||
| </MenuItem> | ||
| </DropdownButton> | ||
| Disconnect | ||
| </Button> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`VncActions renders correctly html 1`] = `"<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>"`; | ||
| 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`] = ` | ||
| <DropdownButton | ||
| bsStyle="default" | ||
| id="console-send-shortcut" | ||
| onClick={[Function]} | ||
| title="Send Key" | ||
| > | ||
| <MenuItem | ||
| bsClass="dropdown" | ||
| disabled={false} | ||
| divider={false} | ||
| eventKey="1" | ||
| header={false} | ||
| <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} | ||
| > | ||
| Ctrl+Alt+Del | ||
| </MenuItem> | ||
| </DropdownButton> | ||
| Disconnect | ||
| </Button> | ||
| </div> | ||
| `; |
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