Skip to content

Commit 22583ad

Browse files
committed
feat(Code): add as props & remove CodeProps type.
1 parent bacd805 commit 22583ad

File tree

5 files changed

+38
-47
lines changed

5 files changed

+38
-47
lines changed

core/README.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -291,14 +291,17 @@ declare type CodePreviewComponent = React.FC<React.PropsWithRef<CodePreviewProps
291291
`<CodeLayout.Preview>`
292292

293293
```typescript
294-
export interface PreviewProps extends React.HTMLAttributes<HTMLDivElement> {
295-
}
294+
export interface PreviewProps extends React.HTMLAttributes<HTMLDivElement> {}
295+
export declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
296296
```
297297

298298
`<CodeLayout.Code>`
299299

300300
```typescript
301-
export interface CodeProps extends React.HTMLAttributes<HTMLDivElement> { }
301+
export declare const Code: React.ForwardRefExoticComponent<Omit<{
302+
as?: React.ElementType<any> | undefined;
303+
} & Omit<any, "ref">, "ref"> & React.RefAttributes<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any>>>;
304+
302305
```
303306
304307
`<CodeLayout.Toolbar>`
@@ -329,6 +332,7 @@ export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
329332
/** Code to be copied */
330333
text?: string;
331334
}
335+
export declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
332336
```
333337
334338

core/src/Code.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React, { useContext } from 'react';
22
import { Context } from './store';
33
import { CODE_PREVIEW_PREFIX } from './CodePreview';
4+
import type { ElementType, ComponentPropsWithoutRef } from 'react';
45

5-
export interface CodeProps extends React.HTMLAttributes<HTMLDivElement> {}
6-
7-
export const Code = React.forwardRef<HTMLDivElement, CodeProps>((props, ref) => {
8-
const { className, children, ...htmlProps } = props;
9-
const cls = [`${CODE_PREVIEW_PREFIX}-code`, className].filter(Boolean).join(' ').trim();
10-
const store = useContext(Context);
11-
if (store.collapse) {
12-
return null;
13-
}
14-
return (
15-
<div {...htmlProps} className={cls} ref={ref}>
16-
{children}
17-
</div>
18-
);
19-
});
6+
export const Code = React.forwardRef(
7+
<T extends ElementType<any> = 'div'>(props: { as?: T } & ComponentPropsWithoutRef<T>, ref?: React.LegacyRef<T>) => {
8+
const { as, className, children, ...htmlProps } = props;
9+
const cls = [`${CODE_PREVIEW_PREFIX}-code`, className].filter(Boolean).join(' ').trim();
10+
const store = useContext(Context);
11+
if (store.collapse) {
12+
return null;
13+
}
14+
const Comp = as || 'div';
15+
return (
16+
<Comp {...htmlProps} className={cls} ref={(node) => {}}>
17+
{children}
18+
</Comp>
19+
);
20+
},
21+
);
2022

2123
Code.displayName = 'uiw.CodeLayoutCode';

core/tsconfig.json

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
11
{
2+
"extends": "../tsconfig",
3+
"include": ["src"],
24
"compilerOptions": {
3-
"sourceMap": false,
4-
"target": "esnext",
5-
"module": "esnext",
6-
"moduleResolution": "node",
7-
"allowJs": false,
8-
"declaration": true,
9-
"declarationMap": true,
10-
"strict": true,
11-
"noUnusedLocals": true,
12-
"experimentalDecorators": true,
13-
"resolveJsonModule": true,
14-
"esModuleInterop": true,
15-
"removeComments": false,
16-
"jsx": "react-jsx",
17-
"lib": ["esnext", "dom"],
18-
"types": ["jest", "node"]
19-
},
20-
"include": ["src"]
5+
"noEmit": false
6+
}
217
}

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"react-dom": "~18.2.0",
2222
"@types/react": "~18.0.21",
2323
"@types/react-dom": "~18.0.6",
24-
"tsbb": "^4.1.5",
24+
"tsbb": "^4.1.14",
2525
"husky": "~8.0.0",
2626
"lint-staged": "^13.1.2",
2727
"prettier": "^2.8.4",

tsconfig.json

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
{
22
"compilerOptions": {
33
"target": "esnext",
4-
"lib": ["dom", "dom.iterable", "esnext"],
5-
"allowJs": true,
64
"skipLibCheck": true,
7-
"esModuleInterop": true,
85
"allowSyntheticDefaultImports": true,
9-
"strict": true,
106
"forceConsistentCasingInFileNames": true,
117
"module": "esnext",
12-
"isolatedModules": true,
8+
"moduleResolution": "node",
9+
"allowJs": true,
1310
"declaration": true,
14-
"baseUrl": ".",
15-
"jsx": "react",
16-
"noFallthroughCasesInSwitch": true,
11+
"strict": true,
1712
"resolveJsonModule": true,
18-
"moduleResolution": "node",
19-
"noEmit": true
13+
"isolatedModules": true,
14+
"esModuleInterop": true,
15+
"jsx": "react-jsx",
16+
"noFallthroughCasesInSwitch": true,
17+
"lib": ["esnext", "dom"],
18+
"types": ["jest", "node"]
2019
}
2120
}

0 commit comments

Comments
 (0)