-
Notifications
You must be signed in to change notification settings - Fork 349
/
CodeEditorControl.tsx
122 lines (111 loc) · 3.6 KB
/
CodeEditorControl.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import * as React from 'react';
import { Button, ButtonProps, PopoverPosition, Tooltip } from '@patternfly/react-core';
import { CodeEditorContext } from './CodeEditorUtils';
/** Allows customizing the code editor controls by passing this sub-component into the
* code editor's customControl property.
*/
export interface CodeEditorControlProps extends Omit<ButtonProps, 'onClick'> {
/** Accessible label for the code editor control */
'aria-label'?: string;
/** Additional classes added to the code editor control. */
className?: string;
/** @deprecated Delay in ms before the tooltip appears. */
entryDelay?: number;
/** @deprecated Delay in ms before the tooltip disappears. */
exitDelay?: number;
/** Icon rendered inside the code editor control. */
icon: React.ReactNode;
/** @deprecated Maximum width of the tooltip (default 150px). */
maxWidth?: string;
/** @deprecated Copy button popover position. */
position?:
| PopoverPosition
| 'auto'
| 'top'
| 'bottom'
| 'left'
| 'right'
| 'top-start'
| 'top-end'
| 'bottom-start'
| 'bottom-end'
| 'left-start'
| 'left-end'
| 'right-start'
| 'right-end';
/** @deprecated Text to display in the tooltip*/
toolTipText?: React.ReactNode;
/** Event handler for the click of the button */
onClick: (code: string, event?: any) => void;
/** Flag indicating that the button is visible above the code editor. */
isVisible?: boolean;
/** Additional tooltip props forwarded to the Tooltip component */
tooltipProps?: any;
}
export const CodeEditorControl: React.FunctionComponent<CodeEditorControlProps> = ({
icon,
className,
'aria-label': ariaLabel,
toolTipText,
exitDelay,
entryDelay,
maxWidth,
position,
onClick = () => {},
isVisible = true,
tooltipProps = {},
...props
}: CodeEditorControlProps) => {
const context = React.useContext(CodeEditorContext);
if (entryDelay !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'CodeEditorControl: entryDelay prop has been deprecated. ' +
'Pass the entryDelay via the tooltipProps prop instead.'
);
}
if (exitDelay !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'CodeEditorControl: exitDelay prop has been deprecated. ' +
'Pass the exitDelay via the tooltipProps prop instead.'
);
}
if (maxWidth !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'CodeEditorControl: maxWidth prop has been deprecated. ' + 'Pass the maxWidth via the tooltipProps prop instead.'
);
}
if (position !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'CodeEditorControl: position prop has been deprecated. ' + 'Pass the position via the tooltipProps prop instead.'
);
}
if (toolTipText !== undefined) {
// eslint-disable-next-line no-console
console.warn(
'CodeEditorControl: toolTipText prop has been deprecated. ' +
'Pass the toolTipText by setting the content field in tooltipProps prop instead.'
);
}
const onCustomClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
onClick(context.code, event);
};
return isVisible ? (
<Tooltip
exitDelay={exitDelay}
entryDelay={entryDelay}
maxWidth={maxWidth}
position={position}
content={<div>{toolTipText}</div>}
{...tooltipProps}
>
<Button className={className} onClick={onCustomClick} variant="control" aria-label={ariaLabel} {...props}>
{icon}
</Button>
</Tooltip>
) : null;
};
CodeEditorControl.displayName = 'CodeEditorControl';