feat: add support for renderExtraFooter (#55)

* feat: add support for `renderExtraFooter` * test: add tests
simonguo · Apr 17, 2024 · 886d862 · 886d862
1 parent 18a3c85
commit 886d862
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -94,16 +94,19 @@ The source code is written in markdown, refer to [example.md](https://raw.github
 
 ### `<CodeView>`
 
-| Name           | Type                              | Default value           | Description                                                               |
-| -------------- | --------------------------------- | ----------------------- | ------------------------------------------------------------------------- |
-| afterCompile   | (code: string) => string          |                         | Executed after compiling the code                                         |
-| beforeCompile  | (code: string) => string          |                         | Executed before compiling the code                                        |
-| children       | any                               |                         | The code to be rendered is executed. Usually imported via markdown-loader |
-| dependencies   | object                            |                         | Dependent objects required by the executed code                           |
-| editable       | boolean                           | false                   | Renders a code editor that can modify the source code                     |
-| editor         | object                            |                         | Editor properties                                                         |
-| onChange       | (code?: string) => void           |                         | Callback triggered after code change                                      |
-| renderToolbar  | (buttons: ReactNode) => ReactNode |                         | Customize the rendering toolbar                                           |
-| sourceCode     | string                            |                         | The code to be rendered is executed                                       |
-| theme          | 'light' , 'dark'                  | 'light'                 | Code editor theme, applied to CodeMirror                                  |
-| compileOptions | object                            | defaultTransformOptions | https://github.com/alangpierce/sucrase#transforms                         |
+| Name              | Type                              | Default value           | Description                                                               |
+| ----------------- | --------------------------------- | ----------------------- | ------------------------------------------------------------------------- |
+| afterCompile      | (code: string) => string          |                         | Executed after compiling the code                                         |
+| beforeCompile     | (code: string) => string          |                         | Executed before compiling the code                                        |
+| children          | any                               |                         | The code to be rendered is executed. Usually imported via markdown-loader |
+| compileOptions    | object                            | defaultTransformOptions | https://github.com/alangpierce/sucrase#transforms                         |
+| dependencies      | object                            |                         | Dependent objects required by the executed code                           |
+| editable          | boolean                           | false                   | Renders a code editor that can modify the source code                     |
+| editor            | object                            |                         | Editor properties                                                         |
+| onChange          | (code?: string) => void           |                         | Callback triggered after code change                                      |
+| onCloseEditor     | () => void                        |                         | Callback triggered when the editor is closed                              |
+| onOpenEditor      | () => void                        |                         | Callback triggered when the editor is opened                              |
+| renderExtraFooter | () => ReactNode                   |                         | Customize the rendering footer                                            |
+| renderToolbar     | (buttons: ReactNode) => ReactNode |                         | Customize the rendering toolbar                                           |
+| sourceCode        | string                            |                         | The code to be rendered is executed                                       |
+| theme             | 'light' , 'dark'                  | 'light'                 | Code editor theme, applied to CodeMirror                                  |
diff --git a/__tests__/Renderer-test.js b/__tests__/Renderer-test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import Renderer from '../src/Renderer';
 
 it('refault is rendering', () => {
@@ -12,3 +12,24 @@ it('should render a test div', () => {
 
   expect(container.querySelector('.rcv-render')).toContainHTML('<div>test</div>');
 });
+
+it('should render a test div with footer', () => {
+  render(<Renderer renderExtraFooter={() => <div>footer</div>} />);
+
+  expect(screen.getByText('footer')).toBeInTheDocument();
+});
+
+it('should call onOpenEditor and onCloseEditor callback', () => {
+  const onOpenEditor = jest.fn();
+  const onCloseEditor = jest.fn();
+
+  render(<Renderer onOpenEditor={onOpenEditor} onCloseEditor={onCloseEditor} />);
+
+  fireEvent.click(screen.getByRole('switch', { name: 'Show the full source' }));
+
+  expect(onOpenEditor).toHaveBeenCalled();
+
+  fireEvent.click(screen.getByRole('switch', { name: 'Show the full source' }));
+
+  expect(onCloseEditor).toHaveBeenCalled();
+});
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -21,6 +21,15 @@ const App = () => {
         afterCompile={(code: string) => {
           return code.replace(/import\ [\*\w\,\{\}\ ]+\ from\ ?[\."'@/\w-]+;/gi, '');
         }}
+        onOpenEditor={() => {
+          console.log('open editor');
+        }}
+        onCloseEditor={() => {
+          console.log('close editor');
+        }}
+        renderExtraFooter={() => {
+          return <div>Footer</div>;
+        }}
       >
         {example}
       </CodeView>

diff --git a/src/CodeView.tsx b/src/CodeView.tsx
@@ -25,6 +25,9 @@ const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref<HTMLDivE
     onChange,
     beforeCompile,
     afterCompile,
+    onOpenEditor,
+    onCloseEditor,
+    renderExtraFooter,
     ...rest
   } = props;
 
@@ -41,13 +44,16 @@ const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref<HTMLDivE
               code={fragment.content}
               editable={editable}
               theme={theme}
+              editor={editor}
               dependencies={dependencies}
               transformOptions={transformOptions}
               renderToolbar={renderToolbar}
+              afterCompile={afterCompile}
               onChange={onChange}
+              onOpenEditor={onOpenEditor}
+              onCloseEditor={onCloseEditor}
               beforeCompile={beforeCompile}
-              afterCompile={afterCompile}
-              editor={editor}
+              renderExtraFooter={renderExtraFooter}
             />
           );
         } else if (fragment.type === 'html') {

diff --git a/src/Renderer.tsx b/src/Renderer.tsx
@@ -49,6 +49,18 @@ export interface RendererProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   /** Customize the rendering toolbar */
   renderToolbar?: (buttons: React.ReactNode) => React.ReactNode;
 
+  /** Customize the rendering footer */
+  renderExtraFooter?: () => React.ReactNode;
+
+  /**
+   * Callback triggered when the editor is opened
+   */
+  onOpenEditor?: () => void;
+  /**
+   * Callback triggered when the editor is closed
+   */
+  onCloseEditor?: () => void;
+
   /** Callback triggered after code change */
   onChange?: (code?: string) => void;
 
@@ -71,6 +83,9 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
     code,
     copyCodeButtonAs,
     renderToolbar,
+    renderExtraFooter,
+    onOpenEditor,
+    onCloseEditor,
     onChange,
     beforeCompile,
     afterCompile,
@@ -91,7 +106,13 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
 
   const handleExpandEditor = useCallback(() => {
     setEditable(!editable);
-  }, [editable]);
+
+    if (editable) {
+      onCloseEditor?.();
+    } else if (!editable) {
+      onOpenEditor?.();
+    }
+  }, [editable, onCloseEditor, onOpenEditor]);
 
   const handleError = useCallback(error => {
     setErrorMessage(error.message);
@@ -183,6 +204,7 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
           code={code}
         />
       )}
+      {renderExtraFooter?.()}
     </div>
   );
 });