Skip to content

Commit 0bfd20e

Browse files
RohitRaj011RohitRaj011
committed
refactor: CodeEditor - code optimise
1 parent 1c70347 commit 0bfd20e

File tree

5 files changed

+31
-22
lines changed

5 files changed

+31
-22
lines changed

‎src/Common/CodeMirror/CodeEditor.components.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ReactComponent as Info } from '@Icons/ic-info-filled.svg'
2121
import { ReactComponent as ErrorIcon } from '@Icons/ic-error-exclamation.svg'
2222
import { ReactComponent as ICCompare } from '@Icons/ic-compare.svg'
2323
import { ClipboardButton } from '@Common/ClipboardButton'
24+
import { getComponentSpecificThemeClass } from '@Shared/Providers'
2425

2526
import { useCodeEditorContext } from './CodeEditor.context'
2627
import { CodeEditorHeaderProps, CodeEditorStatusBarProps } from './types'
@@ -44,13 +45,13 @@ const SplitPane = () => {
4445
}
4546

4647
export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEditorHeaderProps) => {
47-
const { state, hasCodeEditorContainer } = useCodeEditorContext()
48+
const { state, hasCodeEditorContainer, theme } = useCodeEditorContext()
4849

4950
return (
50-
<div className="flexbox w-100 dc__border-bottom ">
51+
<div className={`${getComponentSpecificThemeClass(theme)} flexbox w-100 border__primary--bottom`}>
5152
<div
5253
data-code-editor-header
53-
className={`${hasCodeEditorContainer ? 'dc__top-radius-4' : ''} code-editor__header flex-grow-1 bg__secondary ${className || ''} ${state.diffMode ? 'dc__grid-half vertical-divider' : ''}`}
54+
className={`${hasCodeEditorContainer ? 'dc__top-radius-4' : ''} code-editor__header flex-grow-1 bg__secondary ${className || 'px-16 pt-6 pb-5'} ${state.diffMode ? 'dc__grid-half vertical-divider' : ''}`}
5455
>
5556
{children}
5657
{!hideDefaultSplitHeader && state.lhsCode && <SplitPane />}

‎src/Common/CodeMirror/CodeEditor.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ const CodeEditor = <DiffView extends boolean = false>({
7373
onFocus,
7474
autoFocus,
7575
disableSearch = false,
76+
showDiffMinimap,
7677
}: CodeEditorProps<DiffView>) => {
7778
// HOOKS
7879
const { appTheme } = useTheme()
@@ -112,8 +113,8 @@ const CodeEditor = <DiffView extends boolean = false>({
112113

113114
// CONTEXT VALUE
114115
const contextValue = useMemo<CodeEditorContextProps>(
115-
() => ({ dispatch, state, height, hasCodeEditorContainer }),
116-
[state, hasCodeEditorContainer],
116+
() => ({ dispatch, state, height, hasCodeEditorContainer, theme: componentTheme }),
117+
[state, hasCodeEditorContainer, componentTheme],
117118
)
118119

119120
// USE-EFFECTS
@@ -263,6 +264,7 @@ const CodeEditor = <DiffView extends boolean = false>({
263264
modifiedViewExtensions={modifiedViewExtensions}
264265
extensions={extensions}
265266
diffMinimapExtensions={diffMinimapExtensions}
267+
showDiffMinimap={showDiffMinimap}
266268
/>
267269
</CodeEditorContext.Provider>
268270
)

‎src/Common/CodeMirror/CodeEditorRenderer.tsx

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export const CodeEditorRenderer = ({
4747
extensions,
4848
autoFocus,
4949
diffMinimapExtensions,
50+
showDiffMinimap = true,
5051
}: CodeEditorRendererProps) => {
5152
// STATES
5253
const [isFocused, setIsFocused] = useState(false)
@@ -128,7 +129,7 @@ export const CodeEditorRenderer = ({
128129
codeMirrorMergeRef.current.view.a.scrollDOM.removeEventListener('scroll', handleRHSScroll)
129130
}
130131
}
131-
}, [loading])
132+
}, [loading, state.diffMode])
132133

133134
const onCreateEditor = () => {
134135
updateGutterWith()
@@ -157,11 +158,11 @@ export const CodeEditorRenderer = ({
157158
}
158159

159160
return state.diffMode ? (
160-
<div className={`flexbox w-100 ${codeEditorParentClassName}`}>
161+
<div className={`flexbox w-100 ${componentSpecificThemeClass} ${codeEditorParentClassName}`}>
161162
<CodeMirrorMerge
162163
ref={codeMirrorMergeRef}
163164
theme={codeEditorTheme}
164-
className={`flex-grow-1 h-100 dc__overflow-hidden ${componentSpecificThemeClass} ${readOnly ? 'code-editor__read-only' : ''}`}
165+
className={`flex-grow-1 h-100 dc__overflow-hidden ${readOnly ? 'code-editor__read-only' : ''}`}
165166
gutter
166167
destroyRerender={false}
167168
{...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {})}
@@ -181,19 +182,24 @@ export const CodeEditorRenderer = ({
181182
extensions={modifiedViewExtensions}
182183
/>
183184
</CodeMirrorMerge>
184-
<DiffMinimap
185-
key={codeEditorDiffViewKey}
186-
theme={theme}
187-
codeEditorTheme={codeEditorTheme}
188-
view={codeMirrorMergeRef.current?.view}
189-
state={state}
190-
diffMinimapExtensions={diffMinimapExtensions}
191-
/>
185+
{showDiffMinimap && (
186+
<DiffMinimap
187+
key={codeEditorDiffViewKey}
188+
theme={theme}
189+
codeEditorTheme={codeEditorTheme}
190+
view={codeMirrorMergeRef.current?.view}
191+
state={state}
192+
diffMinimapExtensions={diffMinimapExtensions}
193+
/>
194+
)}
192195
</div>
193196
) : (
194-
<div ref={codeMirrorParentDivRef} className={`w-100 ${codeEditorParentClassName}`}>
197+
<div
198+
ref={codeMirrorParentDivRef}
199+
className={`w-100 ${componentSpecificThemeClass} ${codeEditorParentClassName}`}
200+
>
195201
{shebang && (
196-
<p className={`m-0 flexbox cn-9 code-editor__shebang ${componentSpecificThemeClass}`}>
202+
<p className="m-0 flexbox cn-9 code-editor__shebang">
197203
<span
198204
className="code-editor__shebang__gutter dc__align-self-stretch"
199205
style={{ flex: `0 0 ${gutterWidth}px` }}
@@ -204,7 +210,7 @@ export const CodeEditorRenderer = ({
204210
<CodeMirror
205211
ref={codeMirrorRef}
206212
theme={codeEditorTheme}
207-
className={`${componentSpecificThemeClass} ${codeEditorClassName}`}
213+
className={codeEditorClassName}
208214
basicSetup={false}
209215
value={state.code}
210216
placeholder={placeholder}

‎src/Common/CodeMirror/Extensions/diffMinimap.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,12 +146,10 @@ export const DiffMinimap = ({ view, state, diffMinimapExtensions, codeEditorThem
146146
onClick={handleMinimapClick}
147147
>
148148
<CodeMirrorMerge
149-
key={scalingFactor}
150149
ref={minimapEditorRef}
151150
theme={codeEditorTheme}
152151
className="code-editor__mini-map dc__overflow-hidden w-100"
153152
gutter={false}
154-
destroyRerender={false}
155153
>
156154
<CodeMirrorMerge.Original
157155
basicSetup={false}

‎src/Common/CodeMirror/types.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export type CodeEditorProps<DiffView extends boolean = false> = {
7878
disableSearch?: boolean
7979
diffView?: DiffView
8080
theme?: AppThemeType
81+
showDiffMinimap?: boolean
8182
} & CodeEditorPropsBasedOnDiffView<DiffView>
8283

8384
export interface GetCodeEditorHeightReturnType {
@@ -123,7 +124,7 @@ export interface CodeEditorState extends Pick<CodeEditorProps, 'noParsing'> {
123124
diffMode: CodeEditorProps<boolean>['diffView']
124125
}
125126

126-
export interface CodeEditorContextProps extends Pick<CodeEditorProps, 'readOnly' | 'height'> {
127+
export interface CodeEditorContextProps extends Pick<CodeEditorProps, 'readOnly' | 'height' | 'theme'> {
127128
state: CodeEditorState
128129
hasCodeEditorContainer: boolean
129130
dispatch: Dispatch<CodeEditorPayloadType>
@@ -152,6 +153,7 @@ export type CodeEditorRendererProps = Required<
152153
| 'onBlur'
153154
| 'onFocus'
154155
| 'autoFocus'
156+
| 'showDiffMinimap'
155157
>
156158
> &
157159
Required<Pick<CodeEditorDiffBaseProps, 'isOriginalModifiable'>> & {

0 commit comments

Comments
 (0)