|
| 1 | +import { |
| 2 | + EuiButton, |
| 3 | + EuiButtonIcon, |
| 4 | + EuiFlexGroup, |
| 5 | + EuiToolTip, |
| 6 | + useEuiMemoizedStyles, |
| 7 | + UseEuiTheme, |
| 8 | + darken, |
| 9 | +} from '@elastic/eui'; |
| 10 | +import { css } from '@emotion/react'; |
| 11 | +import { CodeSandboxIcon } from '../../codesandbox_icon'; |
| 12 | + |
| 13 | +export interface DemoActionsBarProps { |
| 14 | + isSourceOpen: boolean; |
| 15 | + setSourceOpen(isOpen: boolean): void; |
| 16 | + onClickReloadExample(): void; |
| 17 | + onClickCopyToClipboard(): void; |
| 18 | + onClickOpenInCodeSandbox(): void; |
| 19 | +} |
| 20 | + |
| 21 | +const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => { |
| 22 | + return { |
| 23 | + actionsBar: css` |
| 24 | + padding: var(--eui-size-s); |
| 25 | + background: ${darken(euiTheme.euiTheme.colors.body, 0.05)}; |
| 26 | + border-top: 1px solid var(--docs-demo-border-color); |
| 27 | +
|
| 28 | + &:last-child { |
| 29 | + // border radius should be 1px smaller to work nicely |
| 30 | + // with the wrapper border width of 1px |
| 31 | + border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px) calc(var(--docs-demo-border-radius) - 1px); |
| 32 | + } |
| 33 | + `, |
| 34 | + button: css` |
| 35 | + background: var(--eui-background-color-primary-opaque); |
| 36 | + border: 1px solid var(--eui-border-color-primary); |
| 37 | + margin-right: auto; |
| 38 | + `, |
| 39 | + }; |
| 40 | +} |
| 41 | + |
| 42 | +export const DemoActionsBar = ({ |
| 43 | + isSourceOpen, |
| 44 | + setSourceOpen, |
| 45 | + onClickOpenInCodeSandbox, |
| 46 | + onClickReloadExample, |
| 47 | + onClickCopyToClipboard |
| 48 | +}: DemoActionsBarProps) => { |
| 49 | + const styles = useEuiMemoizedStyles(getDemoActionsBarStyles); |
| 50 | + |
| 51 | + return ( |
| 52 | + <EuiFlexGroup alignItems="center" css={styles.actionsBar} gutterSize="s"> |
| 53 | + <EuiButton |
| 54 | + css={styles.button} |
| 55 | + onClick={() => setSourceOpen(!isSourceOpen)} |
| 56 | + size="s" |
| 57 | + minWidth={false} |
| 58 | + > |
| 59 | + {isSourceOpen ? 'Hide source' : 'Show source'} |
| 60 | + </EuiButton> |
| 61 | + <EuiToolTip content="Open in CodeSandbox"> |
| 62 | + <EuiButtonIcon |
| 63 | + size="s" |
| 64 | + iconType={CodeSandboxIcon} |
| 65 | + color="text" |
| 66 | + aria-label="Open in CodeSandbox" |
| 67 | + onClick={onClickOpenInCodeSandbox} |
| 68 | + /> |
| 69 | + </EuiToolTip> |
| 70 | + <EuiToolTip content="Copy to clipboard"> |
| 71 | + <EuiButtonIcon |
| 72 | + size="s" |
| 73 | + iconType="copyClipboard" |
| 74 | + color="text" |
| 75 | + onClick={onClickCopyToClipboard} |
| 76 | + aria-label="Copy code to clipboard" |
| 77 | + /> |
| 78 | + </EuiToolTip> |
| 79 | + <EuiToolTip content="Reload example"> |
| 80 | + <EuiButtonIcon |
| 81 | + size="s" |
| 82 | + iconType="refresh" |
| 83 | + color="text" |
| 84 | + onClick={onClickReloadExample} |
| 85 | + aria-label="Reload example" |
| 86 | + /> |
| 87 | + </EuiToolTip> |
| 88 | + </EuiFlexGroup> |
| 89 | + ); |
| 90 | +}; |
0 commit comments