Skip to content

Commit

Permalink
Switch to modifier classes
Browse files Browse the repository at this point in the history
  • Loading branch information
rebeccaalpert committed Sep 18, 2024
1 parent 1572e85 commit 4b7c712
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -149,14 +149,16 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
emptyStateTitle?: React.ReactNode;
/** Editor header main content title. */
headerMainContent?: string;
/** Height of code editor. Defaults to 100%. 'sizeToFit' will automatically change the height
/** Height of code editor. 'sizeToFit' will automatically change the height
* to the height of the content.
*/
height?: string | 'sizeToFit';
/** Flag to add copy button to code editor actions. */
isCopyEnabled?: boolean;
/** Flag indicating the editor is styled using monaco's dark theme. */
isDarkTheme?: boolean;
/** Flag that enables component to consume the available height of its container */
isFullHeight?: boolean;
/** Flag indicating the editor has a plain header. */
isHeaderPlain?: boolean;
/** Flag to add download button to code editor actions. */
Expand Down Expand Up @@ -520,6 +522,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
},
...optionsProp
};
const isFullHeight = this.props.height === '100%' ? true : this.props.isFullHeight;

return (
<Dropzone multiple={false} onDropAccepted={this.onDropAccepted} onDropRejected={this.onDropRejected}>
Expand Down Expand Up @@ -641,14 +644,13 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {

const editor = (
<div
className={css(styles.codeEditorCode)}
style={{ height: '100%' }}
className={css(styles.codeEditorCode, isFullHeight && styles.modifiers.fullHeight)}

Check failure on line 647 in packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

View workflow job for this annotation

GitHub Actions / Build, test & deploy

Property 'fullHeight' does not exist on type '{ readOnly: "pf-m-read-only"; plain: "pf-m-plain"; dragHover: "pf-m-drag-hover"; }'.

Check failure on line 647 in packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

View workflow job for this annotation

GitHub Actions / Build

Property 'fullHeight' does not exist on type '{ readOnly: "pf-m-read-only"; plain: "pf-m-plain"; dragHover: "pf-m-drag-hover"; }'.
ref={this.wrapperRef}
tabIndex={0}
dir="ltr"
>
<Editor
height={height}
height={height === '100%' ? undefined : height}
width={width}
language={language}
value={value}
Expand All @@ -664,8 +666,12 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {

return (
<div
className={css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, className)}
style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
className={css(
styles.codeEditor,
isReadOnly && styles.modifiers.readOnly,
isFullHeight && styles.modifiers.fullHeight,

Check failure on line 672 in packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

View workflow job for this annotation

GitHub Actions / Build, test & deploy

Property 'fullHeight' does not exist on type '{ readOnly: "pf-m-read-only"; plain: "pf-m-plain"; dragHover: "pf-m-drag-hover"; }'.

Check failure on line 672 in packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

View workflow job for this annotation

GitHub Actions / Build

Property 'fullHeight' does not exist on type '{ readOnly: "pf-m-read-only"; plain: "pf-m-plain"; dragHover: "pf-m-drag-hover"; }'.
className
)}
ref={this.ref}
>
{isUploadEnabled || providedEmptyState ? (
Expand All @@ -677,8 +683,11 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
>
{editorHeader}
<div
className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}
style={{ flexGrow: 1 }}
className={css(
styles.codeEditorMain,
isDragActive && styles.modifiers.dragHover,
isFullHeight && styles.modifiers.fullHeight

Check failure on line 689 in packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

View workflow job for this annotation

GitHub Actions / Build, test & deploy

Property 'fullHeight' does not exist on type '{ readOnly: "pf-m-read-only"; plain: "pf-m-plain"; dragHover: "pf-m-drag-hover"; }'.

Check failure on line 689 in packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

View workflow job for this annotation

GitHub Actions / Build

Property 'fullHeight' does not exist on type '{ readOnly: "pf-m-read-only"; plain: "pf-m-plain"; dragHover: "pf-m-drag-hover"; }'.
)}
>
<div className={css(styles.codeEditorUpload)}>
<input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
Expand All @@ -690,7 +699,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
<>
{editorHeader}
{showEditor && (
<div className={css(styles.codeEditorMain)} style={{ flexGrow: 1 }}>
<div className={css(styles.codeEditorMain, isFullHeight && styles.modifiers.fullHeight)}>

Check failure on line 702 in packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

View workflow job for this annotation

GitHub Actions / Build, test & deploy

Property 'fullHeight' does not exist on type '{ readOnly: "pf-m-read-only"; plain: "pf-m-plain"; dragHover: "pf-m-drag-hover"; }'.

Check failure on line 702 in packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

View workflow job for this annotation

GitHub Actions / Build

Property 'fullHeight' does not exist on type '{ readOnly: "pf-m-read-only"; plain: "pf-m-plain"; dragHover: "pf-m-drag-hover"; }'.
{editor}
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const CodeEditorFullHeight: React.FunctionComponent = () => {
onChange={onChange}
language={Language.javascript}
onEditorDidMount={onEditorDidMount}
isFullHeight
/>
</ModalBody>
<ModalFooter>
Expand Down

0 comments on commit 4b7c712

Please sign in to comment.