Browse Source

Extract actions out of react-refractor

Use actions externally.
pull/1/head
TheoryOfNekomata 1 year ago
parent
commit
d70f44991f
2 changed files with 19 additions and 31 deletions
  1. +2
    -20
      packages/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx
  2. +17
    -11
      packages/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx

+ 2
- 20
packages/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx View File

@@ -1,7 +1,6 @@
import * as React from 'react';
import RefractorCore from 'react-refractor/all';
import styles from './style.module.css';
import {getFormValues} from '@theoryofnekomata/formxtra';
import {Marker} from 'react-refractor';

type PrismDerivedElement = HTMLDivElement;
@@ -30,20 +29,6 @@ export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({
markers = [],
...etcProps
}, forwardedRef) => {
const handleAction: React.FormEventHandler<HTMLFormElement> = React.useCallback((e) => {
e.preventDefault();
const { currentTarget, nativeEvent } = e;
const { submitter } = nativeEvent as unknown as { submitter: HTMLButtonElement };
const { action } = getFormValues(currentTarget, { submitter });
switch (action) {
case 'copyContents':
console.log('copy contents');
break;
default:
break;
}
}, []);

const code = codeRaw.trim();

return (
@@ -58,11 +43,8 @@ export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({
<div className={styles['language']}>
{language}
</div>
<form
onSubmit={handleAction}
>
{actions}
</form>
{actions}

</div>
)}
<div


+ 17
- 11
packages/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx View File

@@ -1,8 +1,23 @@
import {Refractor} from '@modal-soft/react-refractor';
import {NextPage} from 'next';
import * as React from 'react';
import {getFormValues} from '@theoryofnekomata/formxtra';

const BlogPostPage: NextPage = () => {
const handleAction: React.FormEventHandler<HTMLFormElement> = React.useCallback((e) => {
e.preventDefault();
const { currentTarget, nativeEvent } = e;
const { submitter } = nativeEvent as unknown as { submitter: HTMLButtonElement };
const { action } = getFormValues(currentTarget, { submitter });
switch (action) {
case 'copyContents':
console.log('copy contents');
break;
default:
break;
}
}, []);

return (
<>
<div className="container mx-auto px-4">
@@ -13,7 +28,7 @@ const BlogPostPage: NextPage = () => {
Use <code>@modal-soft/react-refractor</code> as follows on your page:
</p>
</div>
<div className="bg-shade/20 overflow-auto pt-4 pb-8">
<div className="bg-shade/20 overflow-auto pt-4 pb-8 text-sm">
<div className="container mx-auto px-4">
<Refractor
lineNumbers
@@ -21,16 +36,7 @@ const BlogPostPage: NextPage = () => {
language="tsx"
scroll
actions={
<>
<button
type="submit"
name="action"
value="copyContents"
className="h-12 uppercase text-primary font-semi-expanded font-bold"
>
Copy
</button>
</>
<></>
}
code={`import {Refractor} from '@modal-soft/react-refractor';
import {NextPage} from 'next';


Loading…
Cancel
Save