Skip to content

Commit 14cdb9b

Browse files
Jarvis1010Jarvis1010
committed
Update types and documentation
1 parent 67943e2 commit 14cdb9b

File tree

7 files changed

+129
-161
lines changed

7 files changed

+129
-161
lines changed

‎README.md

+8-7
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,21 @@ const App = () => (
3333

3434
## Props
3535

36-
| name | type | default | description |
37-
| --------- | :------------: | :-----: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
38-
| element | string | "div" | Allows you to specify which element the component renders as |
39-
| innerHTML | bool | false | If this is set to true, it is expecting the html string to be passed as the only child. **Warning**: uses dangerouslySetInnerHTML so be sure you trust the source |
40-
| highlight | bool | false | If this is set to true, It will use highlight.js to add classes that correspond to highlight.js css theme. Checkout [documentation](https://highlightjs.org/) for highlight.js for more details |
41-
| svg | ReactComponent | null | Allows you to pass in any SVG based React Component as the button icon |
42-
| onCopy | function | no-op | Allows you to pass in a function to run when the copy button is clicked |
36+
| name | type | default | description |
37+
| --------- | :-------------------: | :-----: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
38+
| element | JSX intrinsic Element | "div" | Allows you to specify which element the component renders as |
39+
| innerHtml | bool | false | If this is set to true, it is expecting the html string to be passed as the only child. **Warning**: uses dangerouslySetInnerHTML so be sure you trust the source |
40+
| highlight | bool | false | If this is set to true, It will use highlight.js to add classes that correspond to highlight.js css theme. Checkout [documentation](https://highlightjs.org/) for highlight.js for more details |
41+
| svg | ReactComponent | null | Allows you to pass in any SVG based React Component as the button icon |
42+
| onCopy | function | no-op | Allows you to pass in a function to run when the copy button is clicked |
4343

4444
## Contributing
4545

4646
In lieu of a formal styleguide, please format your code using 'prettier' prior to commit.
4747

4848
## Release History
4949

50+
- 2.1.2 Bug fix for innerHtml, update types and documentation
5051
- 2.1.1 Bug fixes
5152
- 2.1.0 Changed to TypeScript
5253
- 2.0.5 Fixed issue that broke gatsby html build

‎dist/index.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import * as React from "react";
1+
import * as React from 'react';
22
export interface CodeBlockProps {
33
children: any;
4-
element: keyof JSX.IntrinsicElements | React.ComponentType<any>;
4+
element?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
55
useInnerHtml: boolean;
66
highlight: boolean;
77
onCopy: Function;

‎dist/index.js

+20-24
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Element = styled_components_1.default.div `
2929
}
3030
3131
& button {
32-
npmax-width: 150px;
32+
max-width: 150px;
3333
height: auto;
3434
border: none;
3535
display: none;
@@ -60,18 +60,18 @@ class CodeBlock extends React.Component {
6060
componentDidMount() {
6161
const { onCopy } = this.props;
6262
if (window && document) {
63-
window["copyToClipBoard"] = (node) => {
63+
window['copyToClipBoard'] = (node) => {
6464
node = node ? node : {};
65-
const text = node.parentNode && node.parentNode.querySelector("code").innerText;
66-
let textarea = document.createElement("textarea");
67-
textarea.id = "t";
68-
textarea.style.height = "0";
65+
const text = node.parentNode && node.parentNode.querySelector('code').innerText;
66+
let textarea = document.createElement('textarea');
67+
textarea.id = 't';
68+
textarea.style.height = '0';
6969
document.body.appendChild(textarea);
7070
textarea.value = text;
71-
let selector = document.querySelector("#t");
71+
let selector = document.querySelector('#t');
7272
selector.select();
7373
if (document.execCommand) {
74-
document.execCommand("copy");
74+
document.execCommand('copy');
7575
}
7676
document.body.removeChild(textarea);
7777
onCopy();
@@ -83,7 +83,7 @@ class CodeBlock extends React.Component {
8383
this.updateComponent();
8484
}
8585
componentWillUnmount() {
86-
window["copyToClipBoard"] = undefined;
86+
window['copyToClipBoard'] = undefined;
8787
}
8888
updateComponent() {
8989
this.codeToClipboard();
@@ -92,13 +92,13 @@ class CodeBlock extends React.Component {
9292
}
9393
}
9494
highlightCode() {
95-
const nodes = this.node.current.querySelectorAll("pre code");
95+
const nodes = this.node.current.querySelectorAll('pre code');
9696
Array.from(nodes).forEach(node => {
9797
hljs.highlightBlock(node);
9898
});
9999
}
100100
codeToClipboard() {
101-
const nodes = this.node.current.querySelectorAll("pre");
101+
const nodes = this.node.current.querySelectorAll('pre');
102102
Array.from(nodes).forEach(node => {
103103
const newNode = this.createNewNode(node);
104104
const parent = node.parentNode;
@@ -108,36 +108,32 @@ class CodeBlock extends React.Component {
108108
createNewNode(node) {
109109
const { svg: SVG } = this.props;
110110
const iconToRender = SVG ? server_1.renderToString(React.createElement(SVG, null)) : clipboardIcon_1.default;
111-
const button = document.createElement("button");
112-
const div = document.createElement("div");
113-
const span = document.createElement("span");
114-
div.className = "clipWrapper";
115-
span.innerText = "Copy";
111+
const button = document.createElement('button');
112+
const div = document.createElement('div');
113+
const span = document.createElement('span');
114+
div.className = 'clipWrapper';
115+
span.innerText = 'Copy';
116116
button.innerHTML = iconToRender;
117117
button.appendChild(span);
118-
button.setAttribute("onclick", `copyToClipBoard(this)`);
118+
button.setAttribute('onclick', `copyToClipBoard(this)`);
119119
div.appendChild(button);
120120
div.appendChild(node.cloneNode(true));
121121
return div;
122122
}
123123
render() {
124124
const _a = this.props, { children, element, useInnerHtml, onCopy, highlight } = _a, props = __rest(_a, ["children", "element", "useInnerHtml", "onCopy", "highlight"]);
125-
const el = styled_components_1.default.hasOwnProperty(element)
126-
? element
127-
: "div";
128125
if (useInnerHtml) {
129-
return (React.createElement(Element, Object.assign({ as: el, ref: this.node }, props, { dangerouslySetInnerHTML: { __html: children } })));
126+
return (React.createElement(Element, Object.assign({ as: element, ref: this.node }, props, { dangerouslySetInnerHTML: { __html: children } })));
130127
}
131128
else {
132-
return (React.createElement(Element, Object.assign({ as: el, ref: this.node }, props), children));
129+
return (React.createElement(Element, Object.assign({ as: element, ref: this.node }, props), children));
133130
}
134131
}
135132
}
136133
CodeBlock.defaultProps = {
137134
children: null,
138-
element: "div",
139135
useInnerHtml: false,
140136
highlight: false,
141-
onCopy: () => null
137+
onCopy: () => null,
142138
};
143139
exports.default = CodeBlock;

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-copy-code",
3-
"version": "2.1.1",
3+
"version": "2.1.2",
44
"description": "Tool to add a copy codeblock to clipboard",
55
"main": "dist/index.js",
66
"scripts": {

‎src/__snapshots__/index.test.tsx.snap

+20-34
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ exports[`Copy to code Renders component with JSX 1`] = `
2424
}
2525
2626
.c0 .clipWrapper button {
27-
npmax-width: 150px;
27+
max-width: 150px;
2828
height: auto;
2929
border: none;
3030
display: none;
@@ -51,16 +51,12 @@ exports[`Copy to code Renders component with JSX 1`] = `
5151
}
5252
5353
<CodeBlock
54-
element="div"
5554
highlight={false}
55+
innerHtml={false}
5656
onCopy={[Function]}
57-
useInnerHtml={false}
5857
>
59-
<styled.div
60-
as="div"
61-
>
58+
<styled.div>
6259
<StyledComponent
63-
as="div"
6460
forwardedComponent={
6561
Object {
6662
"$$typeof": Symbol(react.forward_ref),
@@ -85,7 +81,7 @@ exports[`Copy to code Renders component with JSX 1`] = `
8581
}
8682
8783
& button {
88-
npmax-width: 150px;
84+
max-width: 150px;
8985
height: auto;
9086
border: none;
9187
display: none;
@@ -145,7 +141,7 @@ exports[`Copy to code Renders component with JSX 1`] = `
145141
}
146142
147143
.c0 .clipWrapper button {
148-
npmax-width: 150px;
144+
max-width: 150px;
149145
height: auto;
150146
border: none;
151147
display: none;
@@ -318,7 +314,7 @@ exports[`Copy to code Renders component with highlight 1`] = `
318314
}
319315
320316
.c0 .clipWrapper button {
321-
npmax-width: 150px;
317+
max-width: 150px;
322318
height: auto;
323319
border: none;
324320
display: none;
@@ -345,16 +341,12 @@ exports[`Copy to code Renders component with highlight 1`] = `
345341
}
346342
347343
<CodeBlock
348-
element="div"
349344
highlight={true}
345+
innerHtml={false}
350346
onCopy={[Function]}
351-
useInnerHtml={false}
352347
>
353-
<styled.div
354-
as="div"
355-
>
348+
<styled.div>
356349
<StyledComponent
357-
as="div"
358350
forwardedComponent={
359351
Object {
360352
"$$typeof": Symbol(react.forward_ref),
@@ -379,7 +371,7 @@ exports[`Copy to code Renders component with highlight 1`] = `
379371
}
380372
381373
& button {
382-
npmax-width: 150px;
374+
max-width: 150px;
383375
height: auto;
384376
border: none;
385377
display: none;
@@ -439,7 +431,7 @@ exports[`Copy to code Renders component with highlight 1`] = `
439431
}
440432
441433
.c0 .clipWrapper button {
442-
npmax-width: 150px;
434+
max-width: 150px;
443435
height: auto;
444436
border: none;
445437
display: none;
@@ -631,7 +623,7 @@ const greeting = (greet = 'Hello') =&gt; (name = 'World') =&gt; {
631623
</CodeBlock>
632624
`;
633625

634-
exports[`Copy to code with useInnerHtml Renders component 1`] = `
626+
exports[`Copy to code with innerHtml Renders component 1`] = `
635627
.c0 .clipWrapper {
636628
display: -webkit-box;
637629
display: -webkit-flex;
@@ -655,7 +647,7 @@ exports[`Copy to code with useInnerHtml Renders component 1`] = `
655647
}
656648
657649
.c0 .clipWrapper button {
658-
npmax-width: 150px;
650+
max-width: 150px;
659651
height: auto;
660652
border: none;
661653
display: none;
@@ -682,13 +674,11 @@ exports[`Copy to code with useInnerHtml Renders component 1`] = `
682674
}
683675
684676
<CodeBlock
685-
element="div"
686677
highlight={false}
678+
innerHtml={true}
687679
onCopy={[Function]}
688-
useInnerHtml={true}
689680
>
690681
<styled.div
691-
as="div"
692682
dangerouslySetInnerHTML={
693683
Object {
694684
"__html": "<pre><code>
@@ -700,7 +690,6 @@ const greeting = (greet = 'Hello') => (name = 'World') => {
700690
}
701691
>
702692
<StyledComponent
703-
as="div"
704693
dangerouslySetInnerHTML={
705694
Object {
706695
"__html": "<pre><code>
@@ -734,7 +723,7 @@ const greeting = (greet = 'Hello') => (name = 'World') => {
734723
}
735724
736725
& button {
737-
npmax-width: 150px;
726+
max-width: 150px;
738727
height: auto;
739728
border: none;
740729
display: none;
@@ -794,7 +783,7 @@ const greeting = (greet = 'Hello') => (name = 'World') => {
794783
}
795784
796785
.c0 .clipWrapper button {
797-
npmax-width: 150px;
786+
max-width: 150px;
798787
height: auto;
799788
border: none;
800789
display: none;
@@ -934,7 +923,7 @@ const greeting = (greet = 'Hello') => (name = 'World') => {
934923
</CodeBlock>
935924
`;
936925

937-
exports[`Copy to code with useInnerHtml Renders component with highlight 1`] = `
926+
exports[`Copy to code with innerHtml Renders component with highlight 1`] = `
938927
.c0 .clipWrapper {
939928
display: -webkit-box;
940929
display: -webkit-flex;
@@ -958,7 +947,7 @@ exports[`Copy to code with useInnerHtml Renders component with highlight 1`] = `
958947
}
959948
960949
.c0 .clipWrapper button {
961-
npmax-width: 150px;
950+
max-width: 150px;
962951
height: auto;
963952
border: none;
964953
display: none;
@@ -985,13 +974,11 @@ exports[`Copy to code with useInnerHtml Renders component with highlight 1`] = `
985974
}
986975
987976
<CodeBlock
988-
element="div"
989977
highlight={true}
978+
innerHtml={true}
990979
onCopy={[Function]}
991-
useInnerHtml={true}
992980
>
993981
<styled.div
994-
as="div"
995982
dangerouslySetInnerHTML={
996983
Object {
997984
"__html": "<pre><code>
@@ -1003,7 +990,6 @@ const greeting = (greet = 'Hello') => (name = 'World') => {
1003990
}
1004991
>
1005992
<StyledComponent
1006-
as="div"
1007993
dangerouslySetInnerHTML={
1008994
Object {
1009995
"__html": "<pre><code>
@@ -1037,7 +1023,7 @@ const greeting = (greet = 'Hello') => (name = 'World') => {
10371023
}
10381024
10391025
& button {
1040-
npmax-width: 150px;
1026+
max-width: 150px;
10411027
height: auto;
10421028
border: none;
10431029
display: none;
@@ -1097,7 +1083,7 @@ const greeting = (greet = 'Hello') => (name = 'World') => {
10971083
}
10981084
10991085
.c0 .clipWrapper button {
1100-
npmax-width: 150px;
1086+
max-width: 150px;
11011087
height: auto;
11021088
border: none;
11031089
display: none;

0 commit comments

Comments
 (0)