From ed1641542b24d4456e1ce035b234ce14f2438382 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 8 Apr 2020 01:18:54 +0530 Subject: [PATCH 01/55] Added EuiTextDiff component --- package.json | 2 + src-docs/src/views/code/code_example.js | 54 ++++++++- src-docs/src/views/code/text_diff.js | 23 ++++ .../src/views/code/text_diff_no_deletions.js | 23 ++++ src/components/code/_code_block.tsx | 6 +- src/components/code/_index.scss | 1 + src/components/code/_text_diff.scss | 43 +++++++ src/components/code/index.ts | 1 + src/components/code/text-diff.d.ts | 1 + src/components/code/text_diff.tsx | 107 ++++++++++++++++++ src/components/index.js | 2 +- yarn.lock | 70 ++++++++++++ 12 files changed, 329 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/code/text_diff.js create mode 100644 src-docs/src/views/code/text_diff_no_deletions.js create mode 100644 src/components/code/_text_diff.scss create mode 100644 src/components/code/text-diff.d.ts create mode 100644 src/components/code/text_diff.tsx diff --git a/package.json b/package.json index 4587fc92d47..67a1c86f16e 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "classnames": "^2.2.5", "highlight.js": "^9.12.0", "html": "^1.0.0", + "html-react-parser": "^0.10.3", "keymirror": "^0.1.1", "lodash": "^4.17.11", "numeral": "^2.0.6", @@ -69,6 +70,7 @@ "react-virtualized": "^9.21.2", "resize-observer-polyfill": "^1.5.0", "tabbable": "^3.0.0", + "text-diff": "^1.0.1", "uuid": "^3.1.0" }, "devDependencies": { diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 7612c86fea8..89c73ec4723 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -4,7 +4,11 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiCodeBlockImpl } from '../../../../src/components'; +import { + EuiCode, + EuiCodeBlockImpl, + EuiTextDiff, +} from '../../../../src/components'; import Code from './code'; const codeSource = require('!!raw-loader!./code'); @@ -23,6 +27,14 @@ import CodeBlockPre from './code_block_pre'; const codeBlockPreSource = require('!!raw-loader!./code_block_pre'); const codeBlockPreHtml = renderToHtml(CodeBlockPre); +import TextDiff from './text_diff'; +const textDiffSource = require('!!raw-loader!./text_diff'); +const textDiffHtml = renderToHtml(TextDiff); + +import NoDeletion from './text_diff_no_deletions'; +const noDeletionSource = require('!!raw-loader!./text_diff_no_deletions'); +const noDeletionHtml = renderToHtml(NoDeletion); + export const CodeExample = { title: 'Code', sections: [ @@ -95,5 +107,45 @@ export const CodeExample = { props: { EuiCodeBlockImpl }, demo: , }, + { + title: 'Text Diff', + source: [ + { + type: GuideSectionTypes.JS, + code: textDiffSource, + }, + { + type: GuideSectionTypes.HTML, + code: textDiffHtml, + }, + ], + text: ( +

+ EuiTextDiff is for making text comparisions. +

+ ), + demo: , + props: { EuiTextDiff }, + }, + { + title: 'Text Diff without deletions', + source: [ + { + type: GuideSectionTypes.JS, + code: noDeletionSource, + }, + { + type: GuideSectionTypes.HTML, + code: noDeletionHtml, + }, + ], + text: ( +

+ showDeletion is used for hiding/showing deletions. +

+ ), + demo: , + props: { EuiTextDiff }, + }, ], }; diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js new file mode 100644 index 00000000000..55a123ad629 --- /dev/null +++ b/src-docs/src/views/code/text_diff.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import { EuiTextDiff } from '../../../../src/components'; + +export default () => { + const initialText = + 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; + const currentText = + 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; + + const onGetDataFormat = data => console.log(data); + + return ( + + ); +}; diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js new file mode 100644 index 00000000000..835f7a3c659 --- /dev/null +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import { EuiTextDiff } from '../../../../src/components'; + +export default () => { + const initialText = + 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; + const currentText = + 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; + + const onGetDataFormat = data => console.log(data); + + return ( + + ); +}; diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx index 14fc0016ccf..2fdeb38d48a 100644 --- a/src/components/code/_code_block.tsx +++ b/src/components/code/_code_block.tsx @@ -17,7 +17,7 @@ import { EuiInnerText } from '../inner_text'; import { keysOf } from '../common'; import { FontSize, PaddingSize } from './code'; -const fontSizeToClassNameMap = { +export const fontSizeToClassNameMap = { s: 'euiCodeBlock--fontSmall', m: 'euiCodeBlock--fontMedium', l: 'euiCodeBlock--fontLarge', @@ -25,7 +25,9 @@ const fontSizeToClassNameMap = { export const FONT_SIZES = keysOf(fontSizeToClassNameMap); -const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = { +export const paddingSizeToClassNameMap: { + [paddingSize in PaddingSize]: string +} = { none: '', s: 'euiCodeBlock--paddingSmall', m: 'euiCodeBlock--paddingMedium', diff --git a/src/components/code/_index.scss b/src/components/code/_index.scss index f984a214adf..318d03c2624 100644 --- a/src/components/code/_index.scss +++ b/src/components/code/_index.scss @@ -1 +1,2 @@ @import 'code_block'; +@import 'text_diff'; diff --git a/src/components/code/_text_diff.scss b/src/components/code/_text_diff.scss new file mode 100644 index 00000000000..f04e87110ea --- /dev/null +++ b/src/components/code/_text_diff.scss @@ -0,0 +1,43 @@ +.euiTextDiff { + display: block; + position: relative; + background: $euiCodeBlockBackgroundColor; + color: $euiCodeBlockColor; + box-sizing: border-box; + line-height: $euiLineHeight; + font-size: inherit; + font-family: inherit; + font-weight: $euiFontWeightRegular; + + del { + color: $euiColorDanger; + } + + ins { + color: $euiColorSecondary; + } +} + +.euiTextDiff--paddingMedium { + padding: $euiSize; +} + +.euiTextDiff--paddingLarge { + padding: $euiSizeL; +} + +.euiTextDiff--paddingSmall{ + padding: $euiSizeS; +} + +.euiTextDiff--fontSmall { + font-size: $euiFontSizeXS; +} + +.euiTextDiff--fontMedium { + font-size: $euiFontSizeS; +} + +.euiTextDiff--fontLarge { + font-size: $euiFontSize; +} \ No newline at end of file diff --git a/src/components/code/index.ts b/src/components/code/index.ts index fa0b2253380..51d4f78c589 100644 --- a/src/components/code/index.ts +++ b/src/components/code/index.ts @@ -1,3 +1,4 @@ export { EuiCode, EuiCodeProps } from './code'; export { EuiCodeBlock, EuiCodeBlockProps } from './code_block'; export { EuiCodeBlockImpl } from './_code_block'; +export { EuiTextDiff } from './text_diff'; diff --git a/src/components/code/text-diff.d.ts b/src/components/code/text-diff.d.ts new file mode 100644 index 00000000000..8fa77915bfa --- /dev/null +++ b/src/components/code/text-diff.d.ts @@ -0,0 +1 @@ +declare module 'text-diff'; diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx new file mode 100644 index 00000000000..2045ca5f4ed --- /dev/null +++ b/src/components/code/text_diff.tsx @@ -0,0 +1,107 @@ +import { CommonProps } from '../common'; + +import React, { FunctionComponent, HTMLAttributes } from 'react'; +import Diff from 'text-diff'; +import classNames from 'classnames'; +import parse from 'html-react-parser'; +import { FontSize, PaddingSize } from './code'; + +export const fontSizeToClassNameMap = { + s: 'euiTextDiff--fontSmall', + m: 'euiTextDiff--fontMedium', + l: 'euiTextDiff--fontLarge', +}; + +export const paddingSizeToClassNameMap: { + [paddingSize in PaddingSize]: string +} = { + none: '', + s: 'euiTextDiff--paddingSmall', + m: 'euiTextDiff--paddingMedium', + l: 'euiTextDiff--paddingLarge', +}; + +export interface EuiTextDiffSharedProps { + paddingSize?: PaddingSize; + + /** + * Sets the syntax highlighting for a specific language + * @see http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases + * for options + */ + language?: string; + overflowHeight?: number; + fontSize?: FontSize; + transparentBackground?: boolean; + isCopyable?: boolean; +} +interface DataFormat { + type: string; + content: any; +} + +interface Props extends EuiTextDiffSharedProps { + inline?: true; + fontSize: FontSize; + paddingSize: PaddingSize; + currentText: string; + initialText: string; + showDeletion?: boolean; + getDataFormat?: (data: DataFormat[]) => void; +} + +export type EuiTextDiffProps = CommonProps & + Props & + HTMLAttributes; + +export const EuiTextDiff: FunctionComponent = ({ + inline, + fontSize, + paddingSize, + initialText, + currentText, + showDeletion = true, + getDataFormat, + ...rest +}) => { + const diff = new Diff(); // options may be passed to constructor; see below + const textDiff = diff.main(initialText, currentText); // produces diff array + + const dataFormat = () => { + return [...textDiff] + .filter(el => el[0] !== 0) + .map(el => { + if (el[0] === -1) { + return { + type: 'delete', + content: el[1], + }; + } else { + return { + type: 'insert', + content: el[1], + }; + } + }); + }; + + const classes = classNames( + 'euiTextDiff', + fontSizeToClassNameMap[fontSize], + paddingSizeToClassNameMap[paddingSize] + ); + let htmlString = diff.prettyHtml(textDiff); + + if (!showDeletion) { + htmlString = htmlString.replace(/[A-z]*<\/del>/g, ''); + } + const rendereredHtml = parse(htmlString); + + if (getDataFormat) getDataFormat(dataFormat()); + + return ( +
+ {rendereredHtml} +
+ ); +}; diff --git a/src/components/index.js b/src/components/index.js index 9dcc3991767..a28c9fac8bc 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -33,7 +33,7 @@ export { EuiCallOut } from './call_out'; export { EuiCard, EuiCheckableCard } from './card'; -export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code'; +export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl, EuiTextDiff } from './code'; export { EuiCodeEditor } from './code_editor'; diff --git a/yarn.lock b/yarn.lock index ed6b6ecb6e2..743560a661e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1184,6 +1184,11 @@ dependencies: "@types/d3-path" "*" +"@types/domhandler@2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@types/domhandler/-/domhandler-2.4.1.tgz#7b3b347f7762180fbcb1ece1ce3dd0ebbb8c64cf" + integrity sha512-cfBw6q6tT5sa1gSPFSRKzF/xxYrrmeiut7E0TxNBObiLSBTuFEHibcfEe3waQPEDbqBsq+ql/TOniw65EyDFMA== + "@types/enzyme@^3.1.13": version "3.1.13" resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.13.tgz#4bbc5c81fa40c9fc7efee25c4a23cb37119a33ea" @@ -4694,6 +4699,11 @@ domelementtype@1, domelementtype@^1.3.0: resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2" integrity sha1-sXrtguirWeUt2cGbF1bg/BhyBMI= +domelementtype@^1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f" + integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w== + domelementtype@~1.1.1: version "1.1.3" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b" @@ -4713,6 +4723,13 @@ domhandler@2.1: dependencies: domelementtype "1" +domhandler@2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803" + integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA== + dependencies: + domelementtype "1" + domhandler@^2.3.0: version "2.4.1" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259" @@ -7011,6 +7028,15 @@ html-comment-regex@^1.1.0: resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e" integrity sha1-ZouTd26q5V696POtRkswekljYl4= +html-dom-parser@0.2.3: + version "0.2.3" + resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-0.2.3.tgz#bfee592fc01c12bac08dcfa5da2611f9559a1812" + integrity sha512-GdzE63/U0IQEvcpAz0cUdYx2zQx0Ai+HWvE9TXEgwP27+SymUzKa7iB4DhjYpf2IdNLfTTOBuMS5nxeWOosSMQ== + dependencies: + "@types/domhandler" "2.4.1" + domhandler "2.4.2" + htmlparser2 "3.10.1" + html-element-map@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.0.0.tgz#19a41940225153ecdfead74f8509154ff1cdc18b" @@ -7044,6 +7070,16 @@ html-minifier@^3.2.3: relateurl "0.2.x" uglify-js "3.3.x" +html-react-parser@^0.10.3: + version "0.10.3" + resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.10.3.tgz#d4a8eedc7f143b661d58e9ac4a77193751d3b1d2" + integrity sha512-9Q/r6lyp5R3dvtiNBt1PJ/9XIKvsP6GQ7ppJA/82e9qFZOJuMJFMHj+HYjRDfFrFvAhRxYsjA4yNmFEDffZW1g== + dependencies: + "@types/domhandler" "2.4.1" + html-dom-parser "0.2.3" + react-property "1.0.1" + style-to-object "0.3.0" + html-webpack-plugin@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b" @@ -7064,6 +7100,18 @@ html@^1.0.0: dependencies: concat-stream "^1.4.7" +htmlparser2@3.10.1: + version "3.10.1" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f" + integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ== + dependencies: + domelementtype "^1.3.1" + domhandler "^2.3.0" + domutils "^1.5.1" + entities "^1.1.1" + inherits "^2.0.1" + readable-stream "^3.1.1" + htmlparser2@^3.9.0, htmlparser2@^3.9.1: version "3.9.2" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338" @@ -7344,6 +7392,11 @@ ini@^1.3.4, ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== +inline-style-parser@0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" + integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== + inquirer@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.10.1.tgz#ea25e4ce69ca145e05c99e46dcfec05e4012594a" @@ -12204,6 +12257,11 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-property@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6" + integrity sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ== + react-reconciler@^0.22.1: version "0.22.2" resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.22.2.tgz#e8a10374fec8fee7c5cd0cf3cd05626f1b134d3e" @@ -14056,6 +14114,13 @@ style-loader@^0.19.0: loader-utils "^1.0.2" schema-utils "^0.3.0" +style-to-object@0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46" + integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA== + dependencies: + inline-style-parser "0.1.1" + stylehacks@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.0.tgz#64b323951c4a24e5fc7b2ec06c137bf32d155e8a" @@ -14375,6 +14440,11 @@ test-exclude@^5.0.0: read-pkg-up "^4.0.0" require-main-filename "^1.0.1" +text-diff@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/text-diff/-/text-diff-1.0.1.tgz#6c105905435e337857375c9d2f6ca63e453ff565" + integrity sha1-bBBZBUNeM3hXN1ydL2ymPkU/9WU= + text-table@^0.2.0, text-table@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" From 2a84497f2e194b8ea66f14f55a7ea75399a251bd Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 10 Apr 2020 21:40:54 +0530 Subject: [PATCH 02/55] fixed sass-linting --- src/components/code/_text_diff.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/code/_text_diff.scss b/src/components/code/_text_diff.scss index f04e87110ea..6411d2f170a 100644 --- a/src/components/code/_text_diff.scss +++ b/src/components/code/_text_diff.scss @@ -14,7 +14,7 @@ } ins { - color: $euiColorSecondary; + color: $euiColorSecondary; } } @@ -26,7 +26,7 @@ padding: $euiSizeL; } -.euiTextDiff--paddingSmall{ +.euiTextDiff--paddingSmall { padding: $euiSizeS; } From 7c553ddcec7f89259e8da76b4978d35fa9d94a59 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 1 May 2020 00:28:56 +0530 Subject: [PATCH 03/55] removed unwanted exports --- src/components/code/_code_block.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx index 2fdeb38d48a..14fc0016ccf 100644 --- a/src/components/code/_code_block.tsx +++ b/src/components/code/_code_block.tsx @@ -17,7 +17,7 @@ import { EuiInnerText } from '../inner_text'; import { keysOf } from '../common'; import { FontSize, PaddingSize } from './code'; -export const fontSizeToClassNameMap = { +const fontSizeToClassNameMap = { s: 'euiCodeBlock--fontSmall', m: 'euiCodeBlock--fontMedium', l: 'euiCodeBlock--fontLarge', @@ -25,9 +25,7 @@ export const fontSizeToClassNameMap = { export const FONT_SIZES = keysOf(fontSizeToClassNameMap); -export const paddingSizeToClassNameMap: { - [paddingSize in PaddingSize]: string -} = { +const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = { none: '', s: 'euiCodeBlock--paddingSmall', m: 'euiCodeBlock--paddingMedium', From 6c2a4b7eb6c605bd0b0b0be9e743f0eb91f25b4f Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 1 May 2020 00:47:37 +0530 Subject: [PATCH 04/55] improved Examples, exported all data from component --- src-docs/src/views/code/text_diff.js | 41 ++++++++++++++----- .../src/views/code/text_diff_no_deletions.js | 41 ++++++++++++++----- src/components/code/text_diff.tsx | 36 ++++++++-------- 3 files changed, 80 insertions(+), 38 deletions(-) diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js index 55a123ad629..9c2dfe9f072 100644 --- a/src-docs/src/views/code/text_diff.js +++ b/src-docs/src/views/code/text_diff.js @@ -1,23 +1,42 @@ -import React from 'react'; +import React, { useState } from 'react'; -import { EuiTextDiff } from '../../../../src/components'; +import { + EuiTextDiff, + EuiCode, + EuiSpacer, + EuiTextColor, +} from '../../../../src/components'; export default () => { + const [del, setDel] = useState(0); + const [ins, setIns] = useState(0); + const initialText = 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; const currentText = 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; - const onGetDataFormat = data => console.log(data); + const onGetDataFormat = data => { + setDel([...data].filter(el => el.type === 'delete').length); + setIns([...data].filter(el => el.type === 'insert').length); + }; return ( - + <> + + + + {ins} Insertions, + {del} + Deletions + + ); }; diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js index 835f7a3c659..3da31b979a7 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -1,23 +1,42 @@ -import React from 'react'; +import React, { useState } from 'react'; -import { EuiTextDiff } from '../../../../src/components'; +import { + EuiTextDiff, + EuiCode, + EuiSpacer, + EuiTextColor, +} from '../../../../src/components'; export default () => { + const [del, setDel] = useState(0); + const [ins, setIns] = useState(0); + const initialText = 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; const currentText = 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; - const onGetDataFormat = data => console.log(data); + const onGetDataFormat = data => { + setDel([...data].filter(el => el.type === 'delete').length); + setIns([...data].filter(el => el.type === 'insert').length); + }; return ( - + <> + + + + {ins} Insertions, + {del} + Deletions + + ); }; diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 2045ca5f4ed..4b43d33e96b 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -66,23 +66,27 @@ export const EuiTextDiff: FunctionComponent = ({ }) => { const diff = new Diff(); // options may be passed to constructor; see below const textDiff = diff.main(initialText, currentText); // produces diff array - + console.log('textDiff', textDiff); const dataFormat = () => { - return [...textDiff] - .filter(el => el[0] !== 0) - .map(el => { - if (el[0] === -1) { - return { - type: 'delete', - content: el[1], - }; - } else { - return { - type: 'insert', - content: el[1], - }; - } - }); + return [...textDiff].map(el => { + if (el[0] === 0) { + return { + type: 'no change', + content: el[1], + }; + } + if (el[0] === -1) { + return { + type: 'delete', + content: el[1], + }; + } else { + return { + type: 'insert', + content: el[1], + }; + } + }); }; const classes = classNames( From ad11dd472fd4e08e07c8aed5693d4aa334a17717 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 1 May 2020 01:33:43 +0530 Subject: [PATCH 05/55] used useMemo --- src-docs/src/views/code/code_example.js | 24 +++++++ src-docs/src/views/code/text_diff.js | 5 +- .../src/views/code/text_diff_no_deletions.js | 1 + src-docs/src/views/code/text_diff_timeout.js | 63 +++++++++++++++++++ src/components/code/text_diff.tsx | 42 +++++++++++-- 5 files changed, 127 insertions(+), 8 deletions(-) create mode 100644 src-docs/src/views/code/text_diff_timeout.js diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 89c73ec4723..83ab9559202 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -35,6 +35,10 @@ import NoDeletion from './text_diff_no_deletions'; const noDeletionSource = require('!!raw-loader!./text_diff_no_deletions'); const noDeletionHtml = renderToHtml(NoDeletion); +import TextDiffTimeOut from './text_diff_timeout'; +const TextDiffTimeOutSource = require('!!raw-loader!./text_diff_timeout'); +const TextDiffTimeOutHtml = renderToHtml(TextDiffTimeOut); + export const CodeExample = { title: 'Code', sections: [ @@ -147,5 +151,25 @@ export const CodeExample = { demo: , props: { EuiTextDiff }, }, + { + title: 'Text Diff with timeout', + source: [ + { + type: GuideSectionTypes.JS, + code: TextDiffTimeOutSource, + }, + { + type: GuideSectionTypes.HTML, + code: TextDiffTimeOutHtml, + }, + ], + text: ( +

+ timeout is used for setting timeout. +

+ ), + demo: , + props: { EuiTextDiff }, + }, ], }; diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js index 9c2dfe9f072..eee3eb0dc8a 100644 --- a/src-docs/src/views/code/text_diff.js +++ b/src-docs/src/views/code/text_diff.js @@ -30,11 +30,12 @@ export default () => { currentText={currentText} showDeletion={true} getDataFormat={onGetDataFormat} + disableTimeout={true} /> - {ins} Insertions, - {del} + {ins} Insertions, + {del} Deletions diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js index 3da31b979a7..5f572d289d8 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -29,6 +29,7 @@ export default () => { initialText={initialText} currentText={currentText} showDeletion={false} + disableTimeout={true} getDataFormat={onGetDataFormat} /> diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js new file mode 100644 index 00000000000..5bace136293 --- /dev/null +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -0,0 +1,63 @@ +import React, { useState } from 'react'; + +import { + EuiTextDiff, + EuiCode, + EuiSpacer, + EuiTextColor, + EuiRange, +} from '../../../../src/components'; +import { htmlIdGenerator } from '../../../../src/services'; + +export default () => { + const [del, setDel] = useState(0); + const [ins, setIns] = useState(0); + const [value, setValue] = useState(5); + const initialText = + 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; + + const currentText = + 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; + + const onGetDataFormat = data => { + setDel([...data].filter(el => el.type === 'delete').length); + setIns([...data].filter(el => el.type === 'insert').length); + }; + + const onTimeOut = text => { + console.log('text', text); + }; + + return ( + <> + + + + {ins} Insertions, + {del} + Deletions + + + setValue(e.target.value)} + showLabels + showValue + aria-label="An example of EuiRange with showValue prop" + /> + + ); +}; diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 4b43d33e96b..c9df891f31b 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -1,10 +1,15 @@ -import { CommonProps } from '../common'; - -import React, { FunctionComponent, HTMLAttributes } from 'react'; +import React, { + FunctionComponent, + HTMLAttributes, + useMemo, + useState, + useEffect, +} from 'react'; import Diff from 'text-diff'; import classNames from 'classnames'; import parse from 'html-react-parser'; import { FontSize, PaddingSize } from './code'; +import { CommonProps } from '../common'; export const fontSizeToClassNameMap = { s: 'euiTextDiff--fontSmall', @@ -34,6 +39,9 @@ export interface EuiTextDiffSharedProps { fontSize?: FontSize; transparentBackground?: boolean; isCopyable?: boolean; + timeout?: number; + disableTimeout?: boolean; + onTimeOut?: (text: string) => void; } interface DataFormat { type: string; @@ -62,11 +70,19 @@ export const EuiTextDiff: FunctionComponent = ({ currentText, showDeletion = true, getDataFormat, + disableTimeout = true, + onTimeOut, + timeout = 0.1, ...rest }) => { + const [initText, setInitialText] = useState(initialText); + const diff = new Diff(); // options may be passed to constructor; see below - const textDiff = diff.main(initialText, currentText); // produces diff array - console.log('textDiff', textDiff); + const textDiff = useMemo(() => { + return diff.main(initText, currentText); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [initText, currentText]); // produces diff array + const dataFormat = () => { return [...textDiff].map(el => { if (el[0] === 0) { @@ -101,7 +117,21 @@ export const EuiTextDiff: FunctionComponent = ({ } const rendereredHtml = parse(htmlString); - if (getDataFormat) getDataFormat(dataFormat()); + useEffect(() => { + if (!disableTimeout && onTimeOut) { + const timer = setTimeout(() => { + onTimeOut(currentText); + setInitialText(currentText); + }, +timeout * 1000); + + return () => { + clearTimeout(timer); + }; + } + + if (getDataFormat) getDataFormat(dataFormat()); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getDataFormat, textDiff]); return (
From 4be06fda1027b278c6b0099b3a6f9d0dfc5a9c77 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 6 May 2020 12:55:28 +0530 Subject: [PATCH 06/55] exported props,used for loop --- src/components/code/index.ts | 2 +- src/components/code/text_diff.tsx | 24 +++++++++++++++--------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/code/index.ts b/src/components/code/index.ts index 51d4f78c589..90c16c0576a 100644 --- a/src/components/code/index.ts +++ b/src/components/code/index.ts @@ -1,4 +1,4 @@ export { EuiCode, EuiCodeProps } from './code'; export { EuiCodeBlock, EuiCodeBlockProps } from './code_block'; export { EuiCodeBlockImpl } from './_code_block'; -export { EuiTextDiff } from './text_diff'; +export { EuiTextDiff, EuiTextDiffProps } from './text_diff'; diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index c9df891f31b..7af19c39f64 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -58,6 +58,11 @@ interface Props extends EuiTextDiffSharedProps { getDataFormat?: (data: DataFormat[]) => void; } +interface dataFormat { + content: string; + type: string; +} + export type EuiTextDiffProps = CommonProps & Props & HTMLAttributes; @@ -84,25 +89,26 @@ export const EuiTextDiff: FunctionComponent = ({ }, [initText, currentText]); // produces diff array const dataFormat = () => { - return [...textDiff].map(el => { + const result: dataFormat[] = []; + textDiff.forEach((el: any) => { if (el[0] === 0) { - return { + result.push({ type: 'no change', content: el[1], - }; - } - if (el[0] === -1) { - return { + }); + } else if (el[0] === -1) { + result.push({ type: 'delete', content: el[1], - }; + }); } else { - return { + result.push({ type: 'insert', content: el[1], - }; + }); } }); + return result; }; const classes = classNames( From c6cca3716cc537faa278e9cce1cdd53903c7ed0c Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 6 May 2020 13:58:29 +0530 Subject: [PATCH 07/55] allow user to pass components --- package.json | 1 - src-docs/src/views/code/text_diff.js | 1 - .../src/views/code/text_diff_no_deletions.js | 1 - src-docs/src/views/code/text_diff_timeout.js | 10 +--- src/components/code/text_diff.tsx | 48 +++++++++---------- 5 files changed, 24 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 67a1c86f16e..1955c150ffd 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,6 @@ "classnames": "^2.2.5", "highlight.js": "^9.12.0", "html": "^1.0.0", - "html-react-parser": "^0.10.3", "keymirror": "^0.1.1", "lodash": "^4.17.11", "numeral": "^2.0.6", diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js index eee3eb0dc8a..ce5e964ce92 100644 --- a/src-docs/src/views/code/text_diff.js +++ b/src-docs/src/views/code/text_diff.js @@ -28,7 +28,6 @@ export default () => { paddingSize="m" initialText={initialText} currentText={currentText} - showDeletion={true} getDataFormat={onGetDataFormat} disableTimeout={true} /> diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js index 5f572d289d8..ceda70106b2 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -28,7 +28,6 @@ export default () => { paddingSize="m" initialText={initialText} currentText={currentText} - showDeletion={false} disableTimeout={true} getDataFormat={onGetDataFormat} /> diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js index 5bace136293..cb94ddc3176 100644 --- a/src-docs/src/views/code/text_diff_timeout.js +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -17,17 +17,14 @@ export default () => { 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; const currentText = - 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; + 'One difference is that inerfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; const onGetDataFormat = data => { + console.log('data', data); setDel([...data].filter(el => el.type === 'delete').length); setIns([...data].filter(el => el.type === 'insert').length); }; - const onTimeOut = text => { - console.log('text', text); - }; - return ( <> { paddingSize="m" initialText={initialText} currentText={currentText} - showDeletion={false} getDataFormat={onGetDataFormat} timeout={value} - disableTimeout={false} - onTimeOut={onTimeOut} /> diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 7af19c39f64..81b4a791394 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -2,12 +2,11 @@ import React, { FunctionComponent, HTMLAttributes, useMemo, - useState, useEffect, + StatelessComponent, } from 'react'; import Diff from 'text-diff'; import classNames from 'classnames'; -import parse from 'html-react-parser'; import { FontSize, PaddingSize } from './code'; import { CommonProps } from '../common'; @@ -41,8 +40,8 @@ export interface EuiTextDiffSharedProps { isCopyable?: boolean; timeout?: number; disableTimeout?: boolean; - onTimeOut?: (text: string) => void; } + interface DataFormat { type: string; content: any; @@ -54,8 +53,10 @@ interface Props extends EuiTextDiffSharedProps { paddingSize: PaddingSize; currentText: string; initialText: string; - showDeletion?: boolean; getDataFormat?: (data: DataFormat[]) => void; + InsertComponent?: StatelessComponent; + DeletionComponent?: StatelessComponent; + NoChangeComponent?: StatelessComponent; } interface dataFormat { @@ -70,23 +71,25 @@ export type EuiTextDiffProps = CommonProps & export const EuiTextDiff: FunctionComponent = ({ inline, fontSize, + InsertComponent = 'ins', + DeletionComponent = 'del', + NoChangeComponent = 'span', paddingSize, initialText, currentText, - showDeletion = true, getDataFormat, - disableTimeout = true, - onTimeOut, + disableTimeout = false, timeout = 0.1, ...rest }) => { - const [initText, setInitialText] = useState(initialText); + const diff = useMemo(() => { + return new Diff({ timeout: disableTimeout ? 0 : timeout }); // options may be passed to constructor; see below + }, [timeout, disableTimeout]); - const diff = new Diff(); // options may be passed to constructor; see below const textDiff = useMemo(() => { - return diff.main(initText, currentText); + return diff.main(initialText, currentText); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [initText, currentText]); // produces diff array + }, [initialText, currentText]); // produces diff array const dataFormat = () => { const result: dataFormat[] = []; @@ -116,25 +119,18 @@ export const EuiTextDiff: FunctionComponent = ({ fontSizeToClassNameMap[fontSize], paddingSizeToClassNameMap[paddingSize] ); - let htmlString = diff.prettyHtml(textDiff); - if (!showDeletion) { - htmlString = htmlString.replace(/[A-z]*<\/del>/g, ''); + const rendereredHtml = []; + for (let i = 0; i < textDiff.length; i++) { + let Element: StatelessComponent; + const el = textDiff[i]; + if (el[0] === 0) Element = NoChangeComponent as StatelessComponent; + else if (el[0] === -1) Element = DeletionComponent as StatelessComponent; + else Element = InsertComponent as StatelessComponent; + rendereredHtml.push({el[1]}); } - const rendereredHtml = parse(htmlString); useEffect(() => { - if (!disableTimeout && onTimeOut) { - const timer = setTimeout(() => { - onTimeOut(currentText); - setInitialText(currentText); - }, +timeout * 1000); - - return () => { - clearTimeout(timer); - }; - } - if (getDataFormat) getDataFormat(dataFormat()); // eslint-disable-next-line react-hooks/exhaustive-deps }, [getDataFormat, textDiff]); From 295375d01ea2ac5246d21a07685a07a2f4ac3ace Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 6 May 2020 22:30:57 +0530 Subject: [PATCH 08/55] yarn.lock updated and deletion component used for example --- .../src/views/code/text_diff_no_deletions.js | 1 + yarn.lock | 65 ------------------- 2 files changed, 1 insertion(+), 65 deletions(-) diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js index ceda70106b2..ebf7a2db258 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -30,6 +30,7 @@ export default () => { currentText={currentText} disableTimeout={true} getDataFormat={onGetDataFormat} + DeletionComponent={() => null} /> diff --git a/yarn.lock b/yarn.lock index 743560a661e..44f71bffe9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1184,11 +1184,6 @@ dependencies: "@types/d3-path" "*" -"@types/domhandler@2.4.1": - version "2.4.1" - resolved "https://registry.yarnpkg.com/@types/domhandler/-/domhandler-2.4.1.tgz#7b3b347f7762180fbcb1ece1ce3dd0ebbb8c64cf" - integrity sha512-cfBw6q6tT5sa1gSPFSRKzF/xxYrrmeiut7E0TxNBObiLSBTuFEHibcfEe3waQPEDbqBsq+ql/TOniw65EyDFMA== - "@types/enzyme@^3.1.13": version "3.1.13" resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.13.tgz#4bbc5c81fa40c9fc7efee25c4a23cb37119a33ea" @@ -4699,11 +4694,6 @@ domelementtype@1, domelementtype@^1.3.0: resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2" integrity sha1-sXrtguirWeUt2cGbF1bg/BhyBMI= -domelementtype@^1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f" - integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w== - domelementtype@~1.1.1: version "1.1.3" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b" @@ -4723,13 +4713,6 @@ domhandler@2.1: dependencies: domelementtype "1" -domhandler@2.4.2: - version "2.4.2" - resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803" - integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA== - dependencies: - domelementtype "1" - domhandler@^2.3.0: version "2.4.1" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259" @@ -7028,15 +7011,6 @@ html-comment-regex@^1.1.0: resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e" integrity sha1-ZouTd26q5V696POtRkswekljYl4= -html-dom-parser@0.2.3: - version "0.2.3" - resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-0.2.3.tgz#bfee592fc01c12bac08dcfa5da2611f9559a1812" - integrity sha512-GdzE63/U0IQEvcpAz0cUdYx2zQx0Ai+HWvE9TXEgwP27+SymUzKa7iB4DhjYpf2IdNLfTTOBuMS5nxeWOosSMQ== - dependencies: - "@types/domhandler" "2.4.1" - domhandler "2.4.2" - htmlparser2 "3.10.1" - html-element-map@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.0.0.tgz#19a41940225153ecdfead74f8509154ff1cdc18b" @@ -7070,16 +7044,6 @@ html-minifier@^3.2.3: relateurl "0.2.x" uglify-js "3.3.x" -html-react-parser@^0.10.3: - version "0.10.3" - resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.10.3.tgz#d4a8eedc7f143b661d58e9ac4a77193751d3b1d2" - integrity sha512-9Q/r6lyp5R3dvtiNBt1PJ/9XIKvsP6GQ7ppJA/82e9qFZOJuMJFMHj+HYjRDfFrFvAhRxYsjA4yNmFEDffZW1g== - dependencies: - "@types/domhandler" "2.4.1" - html-dom-parser "0.2.3" - react-property "1.0.1" - style-to-object "0.3.0" - html-webpack-plugin@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b" @@ -7100,18 +7064,6 @@ html@^1.0.0: dependencies: concat-stream "^1.4.7" -htmlparser2@3.10.1: - version "3.10.1" - resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f" - integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ== - dependencies: - domelementtype "^1.3.1" - domhandler "^2.3.0" - domutils "^1.5.1" - entities "^1.1.1" - inherits "^2.0.1" - readable-stream "^3.1.1" - htmlparser2@^3.9.0, htmlparser2@^3.9.1: version "3.9.2" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338" @@ -7392,11 +7344,6 @@ ini@^1.3.4, ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== -inline-style-parser@0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" - integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== - inquirer@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.10.1.tgz#ea25e4ce69ca145e05c99e46dcfec05e4012594a" @@ -12257,11 +12204,6 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-property@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6" - integrity sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ== - react-reconciler@^0.22.1: version "0.22.2" resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.22.2.tgz#e8a10374fec8fee7c5cd0cf3cd05626f1b134d3e" @@ -14114,13 +14056,6 @@ style-loader@^0.19.0: loader-utils "^1.0.2" schema-utils "^0.3.0" -style-to-object@0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46" - integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA== - dependencies: - inline-style-parser "0.1.1" - stylehacks@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.0.tgz#64b323951c4a24e5fc7b2ec06c137bf32d155e8a" From 0de0e0bae917dbe16e08a0232d745a3b69c08018 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 6 May 2020 22:35:57 +0530 Subject: [PATCH 09/55] used id as key, useMemos combined --- src/components/code/text_diff.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 81b4a791394..d2ff98dfe4c 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -82,14 +82,11 @@ export const EuiTextDiff: FunctionComponent = ({ timeout = 0.1, ...rest }) => { - const diff = useMemo(() => { - return new Diff({ timeout: disableTimeout ? 0 : timeout }); // options may be passed to constructor; see below - }, [timeout, disableTimeout]); - const textDiff = useMemo(() => { + const diff = new Diff({ timeout: disableTimeout ? 0 : timeout }); // options may be passed to constructor return diff.main(initialText, currentText); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [initialText, currentText]); // produces diff array + }, [initialText, currentText, timeout, disableTimeout]); // produces diff array const dataFormat = () => { const result: dataFormat[] = []; @@ -127,7 +124,7 @@ export const EuiTextDiff: FunctionComponent = ({ if (el[0] === 0) Element = NoChangeComponent as StatelessComponent; else if (el[0] === -1) Element = DeletionComponent as StatelessComponent; else Element = InsertComponent as StatelessComponent; - rendereredHtml.push({el[1]}); + rendereredHtml.push({el[1]}); } useEffect(() => { From faa8259b29f4319de1ae61eb42ed6f7a5ce93320 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 6 May 2020 22:38:55 +0530 Subject: [PATCH 10/55] removed disableTimeout prop --- src-docs/src/views/code/text_diff.js | 1 - src-docs/src/views/code/text_diff_no_deletions.js | 1 - src/components/code/text_diff.tsx | 9 +++++---- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js index ce5e964ce92..d07e9f3208f 100644 --- a/src-docs/src/views/code/text_diff.js +++ b/src-docs/src/views/code/text_diff.js @@ -29,7 +29,6 @@ export default () => { initialText={initialText} currentText={currentText} getDataFormat={onGetDataFormat} - disableTimeout={true} /> diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js index ebf7a2db258..7e8064e5b90 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -28,7 +28,6 @@ export default () => { paddingSize="m" initialText={initialText} currentText={currentText} - disableTimeout={true} getDataFormat={onGetDataFormat} DeletionComponent={() => null} /> diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index d2ff98dfe4c..97af92069e8 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -38,8 +38,10 @@ export interface EuiTextDiffSharedProps { fontSize?: FontSize; transparentBackground?: boolean; isCopyable?: boolean; + /** + * passing a timeout of value '0' disables the timeout state + */ timeout?: number; - disableTimeout?: boolean; } interface DataFormat { @@ -78,15 +80,14 @@ export const EuiTextDiff: FunctionComponent = ({ initialText, currentText, getDataFormat, - disableTimeout = false, timeout = 0.1, ...rest }) => { const textDiff = useMemo(() => { - const diff = new Diff({ timeout: disableTimeout ? 0 : timeout }); // options may be passed to constructor + const diff = new Diff({ timeout }); // options may be passed to constructor return diff.main(initialText, currentText); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [initialText, currentText, timeout, disableTimeout]); // produces diff array + }, [initialText, currentText, timeout]); // produces diff array const dataFormat = () => { const result: dataFormat[] = []; From 2f798d8a130bec72a34ba881ddad3683001f3abc Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 6 May 2020 22:46:02 +0530 Subject: [PATCH 11/55] used useMemo for renderedHtml --- src/components/code/text_diff.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 97af92069e8..1c07afa55b8 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -118,15 +118,19 @@ export const EuiTextDiff: FunctionComponent = ({ paddingSizeToClassNameMap[paddingSize] ); - const rendereredHtml = []; - for (let i = 0; i < textDiff.length; i++) { - let Element: StatelessComponent; - const el = textDiff[i]; - if (el[0] === 0) Element = NoChangeComponent as StatelessComponent; - else if (el[0] === -1) Element = DeletionComponent as StatelessComponent; - else Element = InsertComponent as StatelessComponent; - rendereredHtml.push({el[1]}); - } + const rendereredHtml = useMemo(() => { + const html = []; + for (let i = 0; i < textDiff.length; i++) { + let Element: StatelessComponent; + const el = textDiff[i]; + if (el[0] === 0) Element = NoChangeComponent as StatelessComponent; + else if (el[0] === -1) Element = DeletionComponent as StatelessComponent; + else Element = InsertComponent as StatelessComponent; + html.push({el[1]}); + } + + return html; + }, [textDiff, DeletionComponent, InsertComponent, NoChangeComponent]); // produces diff array useEffect(() => { if (getDataFormat) getDataFormat(dataFormat()); From 5da5eb847f5398452949f3d9fd968ae4294ba691 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 7 May 2020 21:34:13 +0530 Subject: [PATCH 12/55] Changed slider steps to display result --- src-docs/src/views/code/text_diff.js | 1 + .../src/views/code/text_diff_no_deletions.js | 1 + src-docs/src/views/code/text_diff_timeout.js | 5 ++-- src/components/code/text_diff.tsx | 23 +++++++++++-------- 4 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js index d07e9f3208f..1844caf5abc 100644 --- a/src-docs/src/views/code/text_diff.js +++ b/src-docs/src/views/code/text_diff.js @@ -29,6 +29,7 @@ export default () => { initialText={initialText} currentText={currentText} getDataFormat={onGetDataFormat} + timeout={0} /> diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js index 7e8064e5b90..12b585dbfc3 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -30,6 +30,7 @@ export default () => { currentText={currentText} getDataFormat={onGetDataFormat} DeletionComponent={() => null} + timeout={0} /> diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js index cb94ddc3176..7a0e7db228a 100644 --- a/src-docs/src/views/code/text_diff_timeout.js +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -12,7 +12,7 @@ import { htmlIdGenerator } from '../../../../src/services'; export default () => { const [del, setDel] = useState(0); const [ins, setIns] = useState(0); - const [value, setValue] = useState(5); + const [value, setValue] = useState(0.00001); const initialText = 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; @@ -45,7 +45,8 @@ export default () => { setValue(e.target.value)} showLabels diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 1c07afa55b8..dfbc725c2e1 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -83,11 +83,12 @@ export const EuiTextDiff: FunctionComponent = ({ timeout = 0.1, ...rest }) => { + const diff = new Diff({ timeout }); // options may be passed to constructor + const textDiff = useMemo(() => { - const diff = new Diff({ timeout }); // options may be passed to constructor return diff.main(initialText, currentText); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [initialText, currentText, timeout]); // produces diff array + }, [initialText, currentText, diff]); // produces diff array const dataFormat = () => { const result: dataFormat[] = []; @@ -120,14 +121,16 @@ export const EuiTextDiff: FunctionComponent = ({ const rendereredHtml = useMemo(() => { const html = []; - for (let i = 0; i < textDiff.length; i++) { - let Element: StatelessComponent; - const el = textDiff[i]; - if (el[0] === 0) Element = NoChangeComponent as StatelessComponent; - else if (el[0] === -1) Element = DeletionComponent as StatelessComponent; - else Element = InsertComponent as StatelessComponent; - html.push({el[1]}); - } + if (textDiff) + for (let i = 0; i < textDiff.length; i++) { + let Element: StatelessComponent; + const el = textDiff[i]; + if (el[0] === 0) Element = NoChangeComponent as StatelessComponent; + else if (el[0] === -1) + Element = DeletionComponent as StatelessComponent; + else Element = InsertComponent as StatelessComponent; + html.push({el[1]}); + } return html; }, [textDiff, DeletionComponent, InsertComponent, NoChangeComponent]); // produces diff array From 5c4e9a71498f5de234c9d25e8ed95fc439b0507e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 7 May 2020 22:08:33 +0530 Subject: [PATCH 13/55] tranformed to hook --- src-docs/src/views/code/code_example.js | 8 +-- src-docs/src/views/code/text_diff.js | 22 ++++---- .../src/views/code/text_diff_no_deletions.js | 37 +++++++------ src-docs/src/views/code/text_diff_timeout.js | 37 +++++++------ src/components/code/index.ts | 2 +- src/components/code/text_diff.tsx | 52 ++----------------- src/components/index.js | 7 ++- 7 files changed, 67 insertions(+), 98 deletions(-) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 83ab9559202..1f2123972a0 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -7,7 +7,7 @@ import { GuideSectionTypes } from '../../components'; import { EuiCode, EuiCodeBlockImpl, - EuiTextDiff, + useEuiTextDiff, } from '../../../../src/components'; import Code from './code'; @@ -129,7 +129,7 @@ export const CodeExample = {

), demo: , - props: { EuiTextDiff }, + props: { useEuiTextDiff }, }, { title: 'Text Diff without deletions', @@ -149,7 +149,7 @@ export const CodeExample = {

), demo: , - props: { EuiTextDiff }, + props: { useEuiTextDiff }, }, { title: 'Text Diff with timeout', @@ -169,7 +169,7 @@ export const CodeExample = {

), demo: , - props: { EuiTextDiff }, + props: { useEuiTextDiff }, }, ], }; diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js index 1844caf5abc..2fc4f3bfdf6 100644 --- a/src-docs/src/views/code/text_diff.js +++ b/src-docs/src/views/code/text_diff.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { - EuiTextDiff, + useEuiTextDiff, EuiCode, EuiSpacer, EuiTextColor, @@ -16,21 +16,17 @@ export default () => { const currentText = 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; - const onGetDataFormat = data => { - setDel([...data].filter(el => el.type === 'delete').length); - setIns([...data].filter(el => el.type === 'insert').length); - }; + const [rendered, textDiffObject] = useEuiTextDiff({ + fontSize: 'm', + paddingSize: 'm', + initialText, + currentText, + timeout: 0, + }); return ( <> - + {rendered} {ins} Insertions, diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js index 12b585dbfc3..c65a3b9e65c 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -1,7 +1,7 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import { - EuiTextDiff, + useEuiTextDiff, EuiCode, EuiSpacer, EuiTextColor, @@ -16,22 +16,29 @@ export default () => { const currentText = 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; - const onGetDataFormat = data => { - setDel([...data].filter(el => el.type === 'delete').length); - setIns([...data].filter(el => el.type === 'insert').length); - }; + const [rendered, textDiffObject] = useEuiTextDiff({ + fontSize: 'm', + paddingSize: 'm', + initialText, + currentText, + DeletionComponent: () => null, + timeout: 0, + }); + + // useMemo(() => { + // textDiffObject.forEach(el => { + // if (el[0] === 1) { + // setIns(ins + 1); + // } else if (el[0] === -1) { + // setDel(del + 1); + // } + // }); + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, [textDiffObject]); return ( <> - null} - timeout={0} - /> + {rendered} {ins} Insertions, diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js index 7a0e7db228a..cf256899dc3 100644 --- a/src-docs/src/views/code/text_diff_timeout.js +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { - EuiTextDiff, + useEuiTextDiff, EuiCode, EuiSpacer, EuiTextColor, @@ -12,29 +12,32 @@ import { htmlIdGenerator } from '../../../../src/services'; export default () => { const [del, setDel] = useState(0); const [ins, setIns] = useState(0); - const [value, setValue] = useState(0.00001); + const [value, setValue] = useState(0.0001); const initialText = 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; const currentText = 'One difference is that inerfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; - const onGetDataFormat = data => { - console.log('data', data); - setDel([...data].filter(el => el.type === 'delete').length); - setIns([...data].filter(el => el.type === 'insert').length); - }; + const [rendered, textDiffObject] = useEuiTextDiff({ + fontSize: 'm', + paddingSize: 'm', + initialText, + currentText, + timeout: value, + }); + + // textDiffObject.forEach(el => { + // if (el[0] === 1) { + // setIns(ins + 1); + // } else if (el[0] === -1) { + // setDel(del + 1); + // } + // }); return ( <> - + {rendered} {ins} Insertions, @@ -45,8 +48,8 @@ export default () => { setValue(e.target.value)} showLabels diff --git a/src/components/code/index.ts b/src/components/code/index.ts index 90c16c0576a..88dac0d60fe 100644 --- a/src/components/code/index.ts +++ b/src/components/code/index.ts @@ -1,4 +1,4 @@ export { EuiCode, EuiCodeProps } from './code'; export { EuiCodeBlock, EuiCodeBlockProps } from './code_block'; export { EuiCodeBlockImpl } from './_code_block'; -export { EuiTextDiff, EuiTextDiffProps } from './text_diff'; +export { useEuiTextDiff, EuiTextDiffProps } from './text_diff'; diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index dfbc725c2e1..b09b2c4fda5 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -1,5 +1,4 @@ import React, { - FunctionComponent, HTMLAttributes, useMemo, useEffect, @@ -44,34 +43,21 @@ export interface EuiTextDiffSharedProps { timeout?: number; } -interface DataFormat { - type: string; - content: any; -} - interface Props extends EuiTextDiffSharedProps { - inline?: true; fontSize: FontSize; paddingSize: PaddingSize; currentText: string; initialText: string; - getDataFormat?: (data: DataFormat[]) => void; InsertComponent?: StatelessComponent; DeletionComponent?: StatelessComponent; NoChangeComponent?: StatelessComponent; } -interface dataFormat { - content: string; - type: string; -} - export type EuiTextDiffProps = CommonProps & Props & HTMLAttributes; -export const EuiTextDiff: FunctionComponent = ({ - inline, +export const useEuiTextDiff: Function = ({ fontSize, InsertComponent = 'ins', DeletionComponent = 'del', @@ -79,7 +65,6 @@ export const EuiTextDiff: FunctionComponent = ({ paddingSize, initialText, currentText, - getDataFormat, timeout = 0.1, ...rest }) => { @@ -90,29 +75,6 @@ export const EuiTextDiff: FunctionComponent = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [initialText, currentText, diff]); // produces diff array - const dataFormat = () => { - const result: dataFormat[] = []; - textDiff.forEach((el: any) => { - if (el[0] === 0) { - result.push({ - type: 'no change', - content: el[1], - }); - } else if (el[0] === -1) { - result.push({ - type: 'delete', - content: el[1], - }); - } else { - result.push({ - type: 'insert', - content: el[1], - }); - } - }); - return result; - }; - const classes = classNames( 'euiTextDiff', fontSizeToClassNameMap[fontSize], @@ -135,14 +97,10 @@ export const EuiTextDiff: FunctionComponent = ({ return html; }, [textDiff, DeletionComponent, InsertComponent, NoChangeComponent]); // produces diff array - useEffect(() => { - if (getDataFormat) getDataFormat(dataFormat()); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [getDataFormat, textDiff]); - - return ( + return [
{rendereredHtml} -
- ); +
, + textDiff, + ]; }; diff --git a/src/components/index.js b/src/components/index.js index a28c9fac8bc..3c416c48d32 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -33,7 +33,12 @@ export { EuiCallOut } from './call_out'; export { EuiCard, EuiCheckableCard } from './card'; -export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl, EuiTextDiff } from './code'; +export { + EuiCode, + EuiCodeBlock, + EuiCodeBlockImpl, + useEuiTextDiff, +} from './code'; export { EuiCodeEditor } from './code_editor'; From d8dca69341157ce21cb2fd5daf0fa70920cd7f24 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 8 May 2020 03:21:45 +0530 Subject: [PATCH 14/55] removed padding , fontSize controll from euiText --- src-docs/src/views/code/text_diff.js | 5 +- .../src/views/code/text_diff_no_deletions.js | 5 +- src-docs/src/views/code/text_diff_timeout.js | 5 +- src/components/code/_text_diff.scss | 33 ------------- src/components/code/text_diff.tsx | 47 ++++--------------- 5 files changed, 20 insertions(+), 75 deletions(-) diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js index 2fc4f3bfdf6..6c17577ff57 100644 --- a/src-docs/src/views/code/text_diff.js +++ b/src-docs/src/views/code/text_diff.js @@ -5,6 +5,7 @@ import { EuiCode, EuiSpacer, EuiTextColor, + EuiCodeBlock, } from '../../../../src/components'; export default () => { @@ -26,7 +27,9 @@ export default () => { return ( <> - {rendered} + + {rendered} + {ins} Insertions, diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_no_deletions.js index c65a3b9e65c..7a0e4397f13 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_no_deletions.js @@ -5,6 +5,7 @@ import { EuiCode, EuiSpacer, EuiTextColor, + EuiCodeBlock, } from '../../../../src/components'; export default () => { @@ -38,7 +39,9 @@ export default () => { return ( <> - {rendered} + + {rendered} + {ins} Insertions, diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js index cf256899dc3..f19f013b4ab 100644 --- a/src-docs/src/views/code/text_diff_timeout.js +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -6,6 +6,7 @@ import { EuiSpacer, EuiTextColor, EuiRange, + EuiCodeBlock, } from '../../../../src/components'; import { htmlIdGenerator } from '../../../../src/services'; @@ -37,7 +38,9 @@ export default () => { return ( <> - {rendered} + + {rendered} + {ins} Insertions, diff --git a/src/components/code/_text_diff.scss b/src/components/code/_text_diff.scss index 6411d2f170a..8f71aa6946a 100644 --- a/src/components/code/_text_diff.scss +++ b/src/components/code/_text_diff.scss @@ -1,13 +1,4 @@ .euiTextDiff { - display: block; - position: relative; - background: $euiCodeBlockBackgroundColor; - color: $euiCodeBlockColor; - box-sizing: border-box; - line-height: $euiLineHeight; - font-size: inherit; - font-family: inherit; - font-weight: $euiFontWeightRegular; del { color: $euiColorDanger; @@ -16,28 +7,4 @@ ins { color: $euiColorSecondary; } -} - -.euiTextDiff--paddingMedium { - padding: $euiSize; -} - -.euiTextDiff--paddingLarge { - padding: $euiSizeL; -} - -.euiTextDiff--paddingSmall { - padding: $euiSizeS; -} - -.euiTextDiff--fontSmall { - font-size: $euiFontSizeXS; -} - -.euiTextDiff--fontMedium { - font-size: $euiFontSizeS; -} - -.euiTextDiff--fontLarge { - font-size: $euiFontSize; } \ No newline at end of file diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index b09b2c4fda5..a0d3ed39548 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -1,32 +1,9 @@ -import React, { - HTMLAttributes, - useMemo, - useEffect, - StatelessComponent, -} from 'react'; +import React, { HTMLAttributes, useMemo, StatelessComponent } from 'react'; import Diff from 'text-diff'; import classNames from 'classnames'; -import { FontSize, PaddingSize } from './code'; import { CommonProps } from '../common'; -export const fontSizeToClassNameMap = { - s: 'euiTextDiff--fontSmall', - m: 'euiTextDiff--fontMedium', - l: 'euiTextDiff--fontLarge', -}; - -export const paddingSizeToClassNameMap: { - [paddingSize in PaddingSize]: string -} = { - none: '', - s: 'euiTextDiff--paddingSmall', - m: 'euiTextDiff--paddingMedium', - l: 'euiTextDiff--paddingLarge', -}; - export interface EuiTextDiffSharedProps { - paddingSize?: PaddingSize; - /** * Sets the syntax highlighting for a specific language * @see http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases @@ -34,7 +11,6 @@ export interface EuiTextDiffSharedProps { */ language?: string; overflowHeight?: number; - fontSize?: FontSize; transparentBackground?: boolean; isCopyable?: boolean; /** @@ -44,8 +20,6 @@ export interface EuiTextDiffSharedProps { } interface Props extends EuiTextDiffSharedProps { - fontSize: FontSize; - paddingSize: PaddingSize; currentText: string; initialText: string; InsertComponent?: StatelessComponent; @@ -58,13 +32,11 @@ export type EuiTextDiffProps = CommonProps & HTMLAttributes; export const useEuiTextDiff: Function = ({ - fontSize, InsertComponent = 'ins', DeletionComponent = 'del', NoChangeComponent = 'span', - paddingSize, - initialText, - currentText, + initialText = '', + currentText = '', timeout = 0.1, ...rest }) => { @@ -75,11 +47,7 @@ export const useEuiTextDiff: Function = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [initialText, currentText, diff]); // produces diff array - const classes = classNames( - 'euiTextDiff', - fontSizeToClassNameMap[fontSize], - paddingSizeToClassNameMap[paddingSize] - ); + const classes = classNames('euiTextDiff'); const rendereredHtml = useMemo(() => { const html = []; @@ -87,10 +55,11 @@ export const useEuiTextDiff: Function = ({ for (let i = 0; i < textDiff.length; i++) { let Element: StatelessComponent; const el = textDiff[i]; - if (el[0] === 0) Element = NoChangeComponent as StatelessComponent; + if (el[0] === 0) + Element = (NoChangeComponent as unknown) as StatelessComponent; else if (el[0] === -1) - Element = DeletionComponent as StatelessComponent; - else Element = InsertComponent as StatelessComponent; + Element = (DeletionComponent as unknown) as StatelessComponent; + else Element = (InsertComponent as unknown) as StatelessComponent; html.push({el[1]}); } From 5f44db0735aa2d1d554e87fbed6bdeff05eb555d Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Mon, 11 May 2020 20:32:47 +0530 Subject: [PATCH 15/55] removed unnecessay props --- src/components/code/text_diff.tsx | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index a0d3ed39548..8dac8a64e77 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -3,28 +3,16 @@ import Diff from 'text-diff'; import classNames from 'classnames'; import { CommonProps } from '../common'; -export interface EuiTextDiffSharedProps { - /** - * Sets the syntax highlighting for a specific language - * @see http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases - * for options - */ - language?: string; - overflowHeight?: number; - transparentBackground?: boolean; - isCopyable?: boolean; - /** - * passing a timeout of value '0' disables the timeout state - */ - timeout?: number; -} - -interface Props extends EuiTextDiffSharedProps { +interface Props { currentText: string; initialText: string; InsertComponent?: StatelessComponent; DeletionComponent?: StatelessComponent; NoChangeComponent?: StatelessComponent; + /** + * passing a timeout of value '0' disables the timeout state + */ + timeout?: number; } export type EuiTextDiffProps = CommonProps & From 792775b39b51d3c570f2621e55207f3e9cc1a16e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Mon, 11 May 2020 20:36:14 +0530 Subject: [PATCH 16/55] used EuiTextDiffProps and removed Funcion def --- src/components/code/text_diff.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 8dac8a64e77..6cfb6f457e2 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -19,15 +19,15 @@ export type EuiTextDiffProps = CommonProps & Props & HTMLAttributes; -export const useEuiTextDiff: Function = ({ - InsertComponent = 'ins', - DeletionComponent = 'del', - NoChangeComponent = 'span', +export const useEuiTextDiff = ({ + InsertComponent = ('ins' as unknown) as StatelessComponent<{}>, + DeletionComponent = ('del' as unknown) as StatelessComponent<{}>, + NoChangeComponent = ('span' as unknown) as StatelessComponent<{}>, initialText = '', currentText = '', timeout = 0.1, ...rest -}) => { +}: EuiTextDiffProps) => { const diff = new Diff({ timeout }); // options may be passed to constructor const textDiff = useMemo(() => { From 0760d2529cbe3c41b3b0205f68c033d621bc234f Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Mon, 11 May 2020 20:38:22 +0530 Subject: [PATCH 17/55] used ElementType --- src/components/code/text_diff.tsx | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 6cfb6f457e2..4ff04b140da 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, useMemo, StatelessComponent } from 'react'; +import React, { HTMLAttributes, useMemo, ElementType } from 'react'; import Diff from 'text-diff'; import classNames from 'classnames'; import { CommonProps } from '../common'; @@ -6,9 +6,9 @@ import { CommonProps } from '../common'; interface Props { currentText: string; initialText: string; - InsertComponent?: StatelessComponent; - DeletionComponent?: StatelessComponent; - NoChangeComponent?: StatelessComponent; + InsertComponent?: ElementType; + DeletionComponent?: ElementType; + NoChangeComponent?: ElementType; /** * passing a timeout of value '0' disables the timeout state */ @@ -20,9 +20,9 @@ export type EuiTextDiffProps = CommonProps & HTMLAttributes; export const useEuiTextDiff = ({ - InsertComponent = ('ins' as unknown) as StatelessComponent<{}>, - DeletionComponent = ('del' as unknown) as StatelessComponent<{}>, - NoChangeComponent = ('span' as unknown) as StatelessComponent<{}>, + InsertComponent = 'ins', + DeletionComponent = 'del', + NoChangeComponent = 'span', initialText = '', currentText = '', timeout = 0.1, @@ -41,13 +41,11 @@ export const useEuiTextDiff = ({ const html = []; if (textDiff) for (let i = 0; i < textDiff.length; i++) { - let Element: StatelessComponent; + let Element: ElementType; const el = textDiff[i]; - if (el[0] === 0) - Element = (NoChangeComponent as unknown) as StatelessComponent; - else if (el[0] === -1) - Element = (DeletionComponent as unknown) as StatelessComponent; - else Element = (InsertComponent as unknown) as StatelessComponent; + if (el[0] === 0) Element = NoChangeComponent; + else if (el[0] === -1) Element = DeletionComponent; + else Element = InsertComponent; html.push({el[1]}); } From 51a41d575ae8682a5e0ecf8a374e51798ca559ca Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Mon, 11 May 2020 20:42:56 +0530 Subject: [PATCH 18/55] Used diff inside useMemo --- src/components/code/text_diff.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 4ff04b140da..c5da6c89c34 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -28,12 +28,11 @@ export const useEuiTextDiff = ({ timeout = 0.1, ...rest }: EuiTextDiffProps) => { - const diff = new Diff({ timeout }); // options may be passed to constructor - const textDiff = useMemo(() => { + const diff = new Diff({ timeout }); // options may be passed to constructor + return diff.main(initialText, currentText); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [initialText, currentText, diff]); // produces diff array + }, [initialText, currentText, timeout]); // produces diff array const classes = classNames('euiTextDiff'); From cb7f3ef81f7b60502c31806431f300b94e6691a1 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Mon, 11 May 2020 21:22:43 +0530 Subject: [PATCH 19/55] populated text-diff module defination --- src/components/code/text-diff.d.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/code/text-diff.d.ts b/src/components/code/text-diff.d.ts index 8fa77915bfa..7d2f761a51e 100644 --- a/src/components/code/text-diff.d.ts +++ b/src/components/code/text-diff.d.ts @@ -1 +1,13 @@ -declare module 'text-diff'; +declare module 'text-diff' { + interface ConstructorProps { + timeout: number; + } + + type DiffElement = [-1 | 0 | 1, string]; + + class Diff { + constructor({ timeout }: ConstructorProps); + main: (initialText: string, currentText: string) => DiffElement[]; + } + export = Diff; +} From 4fce6e721ea9aa881f1da2d526ffac81cc62913c Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Tue, 12 May 2020 23:11:28 +0530 Subject: [PATCH 20/55] Update src-docs/src/views/code/code_example.js Co-authored-by: Chandler Prall --- src-docs/src/views/code/code_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 1f2123972a0..dfe3cd8ff7f 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -125,7 +125,7 @@ export const CodeExample = { ], text: (

- EuiTextDiff is for making text comparisions. + useEuiTextDiff generates a set of changes between two strings. The hook returns both React elements for displaying the diff and an object representing the identified changes.

), demo: , From c27cc01d7b7de8d29f0450af2890ed7fa5637331 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 12 May 2020 23:19:19 +0530 Subject: [PATCH 21/55] used _colors and eui_colors_dark.scss for text diff, changed slider props --- src-docs/src/views/code/code_example.js | 4 ++- src-docs/src/views/code/text_diff_timeout.js | 34 +++++++++----------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index dfe3cd8ff7f..19eeb710607 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -125,7 +125,9 @@ export const CodeExample = { ], text: (

- useEuiTextDiff generates a set of changes between two strings. The hook returns both React elements for displaying the diff and an object representing the identified changes. + useEuiTextDiff generates a set of changes between two + strings. The hook returns both React elements for displaying the diff + and an object representing the identified changes.

), demo: , diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js index f19f013b4ab..af8406a5e0d 100644 --- a/src-docs/src/views/code/text_diff_timeout.js +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -10,15 +10,13 @@ import { } from '../../../../src/components'; import { htmlIdGenerator } from '../../../../src/services'; +import initialText from '!!raw-loader!../../../../src/global_styling/variables/_colors.scss'; +import currentText from '!!raw-loader!../../../../src/themes/eui/eui_colors_dark.scss'; + export default () => { const [del, setDel] = useState(0); const [ins, setIns] = useState(0); - const [value, setValue] = useState(0.0001); - const initialText = - 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; - - const currentText = - 'One difference is that inerfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; + const [value, setValue] = useState(0.5); const [rendered, textDiffObject] = useEuiTextDiff({ fontSize: 'm', @@ -38,27 +36,27 @@ export default () => { return ( <> - - {rendered} - - - - {ins} Insertions, - {del} - Deletions - - setValue(e.target.value)} showLabels showValue aria-label="An example of EuiRange with showValue prop" /> + + + {rendered} + + + + {ins} Insertions, + {del} + Deletions + ); }; From 126f1f58d88dadfc01f3a484d108449eed534bfa Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 12 May 2020 23:20:43 +0530 Subject: [PATCH 22/55] valueAppend used --- src-docs/src/views/code/text_diff_timeout.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js index af8406a5e0d..31bf9258117 100644 --- a/src-docs/src/views/code/text_diff_timeout.js +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -42,6 +42,7 @@ export default () => { max={1} step={0.1} value={value} + valueAppend=" seconds" onChange={e => setValue(e.target.value)} showLabels showValue From 3896b5c7d3f097554f69728ccb4fdd471c4260d4 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 12 May 2020 23:27:15 +0530 Subject: [PATCH 23/55] more detailed timeout description --- src-docs/src/views/code/code_example.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 19eeb710607..a42998e31a0 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -167,7 +167,10 @@ export const CodeExample = { ], text: (

- timeout is used for setting timeout. + timeout is used to set how many seconds any + diff's exploration phase may take. The default value is 0.1, a + value of 0 disables the timeout and lets diff run until completion. + Higher the timeout , more detailed is the comparision

), demo: , From 4869248633bf5dcdf605ff85c6767684ca7cd3e3 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 12 May 2020 23:45:55 +0530 Subject: [PATCH 24/55] insertions/dels are recalculated, improved custom components desc --- src-docs/src/views/code/code_example.js | 20 ++++++++++------- src-docs/src/views/code/text_diff.js | 13 ++++++++++- ...ions.js => text_diff_custom_components.js} | 22 +++++++++---------- src-docs/src/views/code/text_diff_timeout.js | 20 ++++++++++------- 4 files changed, 47 insertions(+), 28 deletions(-) rename src-docs/src/views/code/{text_diff_no_deletions.js => text_diff_custom_components.js} (81%) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index a42998e31a0..97d28b7fcc0 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -31,9 +31,9 @@ import TextDiff from './text_diff'; const textDiffSource = require('!!raw-loader!./text_diff'); const textDiffHtml = renderToHtml(TextDiff); -import NoDeletion from './text_diff_no_deletions'; -const noDeletionSource = require('!!raw-loader!./text_diff_no_deletions'); -const noDeletionHtml = renderToHtml(NoDeletion); +import TextDiffCustomComponents from './text_diff_custom_components'; +const customComponentsSource = require('!!raw-loader!./text_diff_custom_components'); +const customComponentsHtml = renderToHtml(TextDiffCustomComponents); import TextDiffTimeOut from './text_diff_timeout'; const TextDiffTimeOutSource = require('!!raw-loader!./text_diff_timeout'); @@ -134,23 +134,27 @@ export const CodeExample = { props: { useEuiTextDiff }, }, { - title: 'Text Diff without deletions', + title: 'Text Diff with custom components', source: [ { type: GuideSectionTypes.JS, - code: noDeletionSource, + code: customComponentsSource, }, { type: GuideSectionTypes.HTML, - code: noDeletionHtml, + code: customComponentsHtml, }, ], text: (

- showDeletion is used for hiding/showing deletions. + Custom components such as{' '} + + InsertComponent, DeletionComponent, NoChangeComponent{' '} + + can be passed to the utiliy to render customized styles.

), - demo: , + demo: , props: { useEuiTextDiff }, }, { diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/code/text_diff.js index 6c17577ff57..e484b328355 100644 --- a/src-docs/src/views/code/text_diff.js +++ b/src-docs/src/views/code/text_diff.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useEuiTextDiff, @@ -25,6 +25,17 @@ export default () => { timeout: 0, }); + useEffect(() => { + textDiffObject.forEach(el => { + if (el[0] === 1) { + setIns(add => add + 1); + } else if (el[0] === -1) { + setDel(sub => sub + 1); + } + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return ( <> diff --git a/src-docs/src/views/code/text_diff_no_deletions.js b/src-docs/src/views/code/text_diff_custom_components.js similarity index 81% rename from src-docs/src/views/code/text_diff_no_deletions.js rename to src-docs/src/views/code/text_diff_custom_components.js index 7a0e4397f13..12101bca3f6 100644 --- a/src-docs/src/views/code/text_diff_no_deletions.js +++ b/src-docs/src/views/code/text_diff_custom_components.js @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useEffect } from 'react'; import { useEuiTextDiff, @@ -26,16 +26,16 @@ export default () => { timeout: 0, }); - // useMemo(() => { - // textDiffObject.forEach(el => { - // if (el[0] === 1) { - // setIns(ins + 1); - // } else if (el[0] === -1) { - // setDel(del + 1); - // } - // }); - // // eslint-disable-next-line react-hooks/exhaustive-deps - // }, [textDiffObject]); + useEffect(() => { + textDiffObject.forEach(el => { + if (el[0] === 1) { + setIns(add => add + 1); + } else if (el[0] === -1) { + setDel(sub => sub + 1); + } + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return ( <> diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js index 31bf9258117..f19a19cf30b 100644 --- a/src-docs/src/views/code/text_diff_timeout.js +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useEuiTextDiff, @@ -26,13 +26,17 @@ export default () => { timeout: value, }); - // textDiffObject.forEach(el => { - // if (el[0] === 1) { - // setIns(ins + 1); - // } else if (el[0] === -1) { - // setDel(del + 1); - // } - // }); + useEffect(() => { + console.log('textDiffObject', textDiffObject); + textDiffObject.forEach(el => { + if (el[0] === 1) { + setIns(add => add + 1); + } else if (el[0] === -1) { + setDel(sub => sub + 1); + } + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [value]); return ( <> From 251ac016eff71300d3815ad4d31fa6196dc3f292 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 12 May 2020 23:48:25 +0530 Subject: [PATCH 25/55] console.log removed --- src-docs/src/views/code/text_diff_timeout.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/code/text_diff_timeout.js index f19a19cf30b..8e06b956781 100644 --- a/src-docs/src/views/code/text_diff_timeout.js +++ b/src-docs/src/views/code/text_diff_timeout.js @@ -27,7 +27,6 @@ export default () => { }); useEffect(() => { - console.log('textDiffObject', textDiffObject); textDiffObject.forEach(el => { if (el[0] === 1) { setIns(add => add + 1); From cc812489606bed33b42cf5a454dc3c4853d25820 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 13 May 2020 00:01:57 +0530 Subject: [PATCH 26/55] created separate section for text diff --- src-docs/src/routes.js | 3 + src-docs/src/views/code/code_example.js | 87 +---------------- .../views/{code => text_diff}/text_diff.js | 0 .../text_diff_custom_components.js | 0 .../src/views/text_diff/text_diff_example.js | 94 +++++++++++++++++++ .../{code => text_diff}/text_diff_timeout.js | 0 6 files changed, 98 insertions(+), 86 deletions(-) rename src-docs/src/views/{code => text_diff}/text_diff.js (100%) rename src-docs/src/views/{code => text_diff}/text_diff_custom_components.js (100%) create mode 100644 src-docs/src/views/text_diff/text_diff_example.js rename src-docs/src/views/{code => text_diff}/text_diff_timeout.js (100%) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index e73038cd1ac..35a49fa9194 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -192,6 +192,8 @@ import { TableInMemoryExample } from './views/tables/tables_in_memory_example'; import { TabsExample } from './views/tabs/tabs_example'; +import { TextDiffExample } from './views/text_diff/text_diff_example'; + import { TextExample } from './views/text/text_example'; import { TitleExample } from './views/title/title_example'; @@ -374,6 +376,7 @@ const navigation = [ LoadingExample, ProgressExample, StatExample, + TextDiffExample, TextExample, TitleExample, ToastExample, diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 97d28b7fcc0..7612c86fea8 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -4,11 +4,7 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { - EuiCode, - EuiCodeBlockImpl, - useEuiTextDiff, -} from '../../../../src/components'; +import { EuiCode, EuiCodeBlockImpl } from '../../../../src/components'; import Code from './code'; const codeSource = require('!!raw-loader!./code'); @@ -27,18 +23,6 @@ import CodeBlockPre from './code_block_pre'; const codeBlockPreSource = require('!!raw-loader!./code_block_pre'); const codeBlockPreHtml = renderToHtml(CodeBlockPre); -import TextDiff from './text_diff'; -const textDiffSource = require('!!raw-loader!./text_diff'); -const textDiffHtml = renderToHtml(TextDiff); - -import TextDiffCustomComponents from './text_diff_custom_components'; -const customComponentsSource = require('!!raw-loader!./text_diff_custom_components'); -const customComponentsHtml = renderToHtml(TextDiffCustomComponents); - -import TextDiffTimeOut from './text_diff_timeout'; -const TextDiffTimeOutSource = require('!!raw-loader!./text_diff_timeout'); -const TextDiffTimeOutHtml = renderToHtml(TextDiffTimeOut); - export const CodeExample = { title: 'Code', sections: [ @@ -111,74 +95,5 @@ export const CodeExample = { props: { EuiCodeBlockImpl }, demo: , }, - { - title: 'Text Diff', - source: [ - { - type: GuideSectionTypes.JS, - code: textDiffSource, - }, - { - type: GuideSectionTypes.HTML, - code: textDiffHtml, - }, - ], - text: ( -

- useEuiTextDiff generates a set of changes between two - strings. The hook returns both React elements for displaying the diff - and an object representing the identified changes. -

- ), - demo: , - props: { useEuiTextDiff }, - }, - { - title: 'Text Diff with custom components', - source: [ - { - type: GuideSectionTypes.JS, - code: customComponentsSource, - }, - { - type: GuideSectionTypes.HTML, - code: customComponentsHtml, - }, - ], - text: ( -

- Custom components such as{' '} - - InsertComponent, DeletionComponent, NoChangeComponent{' '} - - can be passed to the utiliy to render customized styles. -

- ), - demo: , - props: { useEuiTextDiff }, - }, - { - title: 'Text Diff with timeout', - source: [ - { - type: GuideSectionTypes.JS, - code: TextDiffTimeOutSource, - }, - { - type: GuideSectionTypes.HTML, - code: TextDiffTimeOutHtml, - }, - ], - text: ( -

- timeout is used to set how many seconds any - diff's exploration phase may take. The default value is 0.1, a - value of 0 disables the timeout and lets diff run until completion. - Higher the timeout , more detailed is the comparision -

- ), - demo: , - props: { useEuiTextDiff }, - }, ], }; diff --git a/src-docs/src/views/code/text_diff.js b/src-docs/src/views/text_diff/text_diff.js similarity index 100% rename from src-docs/src/views/code/text_diff.js rename to src-docs/src/views/text_diff/text_diff.js diff --git a/src-docs/src/views/code/text_diff_custom_components.js b/src-docs/src/views/text_diff/text_diff_custom_components.js similarity index 100% rename from src-docs/src/views/code/text_diff_custom_components.js rename to src-docs/src/views/text_diff/text_diff_custom_components.js diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js new file mode 100644 index 00000000000..f9a90506b5e --- /dev/null +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -0,0 +1,94 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { GuideSectionTypes } from '../../components'; + +import { EuiCode, useEuiTextDiff } from '../../../../src/components'; + +import TextDiff from './text_diff'; +const textDiffSource = require('!!raw-loader!./text_diff'); +const textDiffHtml = renderToHtml(TextDiff); + +import TextDiffCustomComponents from './text_diff_custom_components'; +const customComponentsSource = require('!!raw-loader!./text_diff_custom_components'); +const customComponentsHtml = renderToHtml(TextDiffCustomComponents); + +import TextDiffTimeOut from './text_diff_timeout'; +const TextDiffTimeOutSource = require('!!raw-loader!./text_diff_timeout'); +const TextDiffTimeOutHtml = renderToHtml(TextDiffTimeOut); + +export const TextDiffExample = { + title: 'Text Diff', + sections: [ + { + title: 'Text Diff', + source: [ + { + type: GuideSectionTypes.JS, + code: textDiffSource, + }, + { + type: GuideSectionTypes.HTML, + code: textDiffHtml, + }, + ], + text: ( +

+ useEuiTextDiff generates a set of changes between two + strings. The hook returns both React elements for displaying the diff + and an object representing the identified changes. +

+ ), + demo: , + props: { useEuiTextDiff }, + }, + { + title: 'Text Diff with custom components', + source: [ + { + type: GuideSectionTypes.JS, + code: customComponentsSource, + }, + { + type: GuideSectionTypes.HTML, + code: customComponentsHtml, + }, + ], + text: ( +

+ Custom components such as{' '} + + InsertComponent, DeletionComponent, NoChangeComponent{' '} + + can be passed to the utiliy to render customized styles. +

+ ), + demo: , + props: { useEuiTextDiff }, + }, + { + title: 'Text Diff with timeout', + source: [ + { + type: GuideSectionTypes.JS, + code: TextDiffTimeOutSource, + }, + { + type: GuideSectionTypes.HTML, + code: TextDiffTimeOutHtml, + }, + ], + text: ( +

+ timeout is used to set how many seconds any + diff's exploration phase may take. The default value is 0.1, a + value of 0 disables the timeout and lets diff run until completion. + Higher the timeout , more detailed is the comparision +

+ ), + demo: , + props: { useEuiTextDiff }, + }, + ], +}; diff --git a/src-docs/src/views/code/text_diff_timeout.js b/src-docs/src/views/text_diff/text_diff_timeout.js similarity index 100% rename from src-docs/src/views/code/text_diff_timeout.js rename to src-docs/src/views/text_diff/text_diff_timeout.js From 8c7e8798140c0ac12a1b98369e26cfa9330eff48 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Fri, 15 May 2020 00:32:31 +0530 Subject: [PATCH 27/55] Update src-docs/src/views/text_diff/text_diff_example.js Co-authored-by: Chandler Prall --- src-docs/src/views/text_diff/text_diff_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index f9a90506b5e..0d55552cf40 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -61,7 +61,7 @@ export const TextDiffExample = { InsertComponent, DeletionComponent, NoChangeComponent{' '} - can be passed to the utiliy to render customized styles. + can be passed to the utility to render customized styles.

), demo: , From 17bc8342bb671c22c1a31e1e180f06d8b1a5d8b8 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 15 May 2020 00:50:17 +0530 Subject: [PATCH 28/55] setDel , setIns to zero on value change --- src-docs/src/views/text_diff/text_diff_timeout.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src-docs/src/views/text_diff/text_diff_timeout.js b/src-docs/src/views/text_diff/text_diff_timeout.js index 8e06b956781..c6ed9373caf 100644 --- a/src-docs/src/views/text_diff/text_diff_timeout.js +++ b/src-docs/src/views/text_diff/text_diff_timeout.js @@ -27,6 +27,9 @@ export default () => { }); useEffect(() => { + setIns(0); + setDel(0); + textDiffObject.forEach(el => { if (el[0] === 1) { setIns(add => add + 1); From 058309d0a6051fe10f099f3d43fd03cda35e4b02 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:19:25 +0530 Subject: [PATCH 29/55] Update src-docs/src/views/text_diff/text_diff_timeout.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_timeout.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src-docs/src/views/text_diff/text_diff_timeout.js b/src-docs/src/views/text_diff/text_diff_timeout.js index c6ed9373caf..82dfb6bfd41 100644 --- a/src-docs/src/views/text_diff/text_diff_timeout.js +++ b/src-docs/src/views/text_diff/text_diff_timeout.js @@ -19,8 +19,6 @@ export default () => { const [value, setValue] = useState(0.5); const [rendered, textDiffObject] = useEuiTextDiff({ - fontSize: 'm', - paddingSize: 'm', initialText, currentText, timeout: value, From cb2d2d25fb5796c3d6bfcb225fb72e741258f527 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:19:37 +0530 Subject: [PATCH 30/55] Update src-docs/src/views/text_diff/text_diff_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index 0d55552cf40..36d51d94eb5 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -81,10 +81,10 @@ export const TextDiffExample = { ], text: (

- timeout is used to set how many seconds any + The timeout prop is used to set how many seconds any diff's exploration phase may take. The default value is 0.1, a value of 0 disables the timeout and lets diff run until completion. - Higher the timeout , more detailed is the comparision + The higher the timeout, the more detailed the comparison.

), demo: , From b5b9ac3dc632b8b8c5b22a2f32c029c37424b2e0 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:19:50 +0530 Subject: [PATCH 31/55] Update src-docs/src/views/text_diff/text_diff_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index 36d51d94eb5..e31232e44b5 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -68,7 +68,7 @@ export const TextDiffExample = { props: { useEuiTextDiff }, }, { - title: 'Text Diff with timeout', + title: 'Adjusting the timeout delay', source: [ { type: GuideSectionTypes.JS, From fca53cbe8f739676cb7fc7a6e5ef69ef7756e03b Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:21:16 +0530 Subject: [PATCH 32/55] Update src-docs/src/views/text_diff/text_diff_custom_components.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_custom_components.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src-docs/src/views/text_diff/text_diff_custom_components.js b/src-docs/src/views/text_diff/text_diff_custom_components.js index 12101bca3f6..8b8bbfdabc0 100644 --- a/src-docs/src/views/text_diff/text_diff_custom_components.js +++ b/src-docs/src/views/text_diff/text_diff_custom_components.js @@ -18,8 +18,6 @@ export default () => { 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; const [rendered, textDiffObject] = useEuiTextDiff({ - fontSize: 'm', - paddingSize: 'm', initialText, currentText, DeletionComponent: () => null, From 1082578e077137701350f1bdb1254820baca2f01 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:21:30 +0530 Subject: [PATCH 33/55] Update src/components/code/text_diff.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/code/text_diff.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index c5da6c89c34..5bea4b6b4a5 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -10,7 +10,7 @@ interface Props { DeletionComponent?: ElementType; NoChangeComponent?: ElementType; /** - * passing a timeout of value '0' disables the timeout state + * Time in milliseconds. Passing a timeout of value '0' disables the timeout state */ timeout?: number; } From 0ca7ff3959ea82015600643cebfe10649ff20c2f Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:21:48 +0530 Subject: [PATCH 34/55] Update src-docs/src/views/text_diff/text_diff_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_example.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index e31232e44b5..1e8da85025f 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -22,7 +22,6 @@ export const TextDiffExample = { title: 'Text Diff', sections: [ { - title: 'Text Diff', source: [ { type: GuideSectionTypes.JS, From 85fc0ecdd53468a589a8c75b6a0b27076ee2c43f Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:22:11 +0530 Subject: [PATCH 35/55] Update src-docs/src/views/text_diff/text_diff_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_example.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index 1e8da85025f..d294b0a0ff6 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -34,10 +34,13 @@ export const TextDiffExample = { ], text: (

- useEuiTextDiff generates a set of changes between two - strings. The hook returns both React elements for displaying the diff + The hook, useEuiTextDiff, generates a set of changes between two + strings. It returns both React elements for displaying the diff and an object representing the identified changes.

+

+ const [rendered, textDiffObject] = useEuiTextDiff() +

), demo: , props: { useEuiTextDiff }, From fee4259a8b44f9b4c19f47aeecf4f8724cfed5db Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:22:46 +0530 Subject: [PATCH 36/55] Update src-docs/src/views/text_diff/text_diff_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_example.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index d294b0a0ff6..c4800832559 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -59,7 +59,9 @@ export const TextDiffExample = { ], text: (

- Custom components such as{' '} + By default, the hook will render deletions as {''} and + insertions as {''} elements. You can replace these rendered + html elements with the InsertComponent, DeletionComponent, NoChangeComponent{' '} From 231bdf7d6ed3c3922d5d6aa6ce4a88414f4616b8 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:23:02 +0530 Subject: [PATCH 37/55] Update src-docs/src/views/text_diff/text_diff_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index c4800832559..6365e9fe1a4 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -46,7 +46,7 @@ export const TextDiffExample = { props: { useEuiTextDiff }, }, { - title: 'Text Diff with custom components', + title: 'Custom rendered elements', source: [ { type: GuideSectionTypes.JS, From 799822224dbfc36af92f051c11024ac9157dcd71 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 01:24:44 +0530 Subject: [PATCH 38/55] Update src-docs/src/views/text_diff/text_diff_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/text_diff/text_diff_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index 6365e9fe1a4..16045c32ad5 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -65,7 +65,7 @@ export const TextDiffExample = { InsertComponent, DeletionComponent, NoChangeComponent{' '} - can be passed to the utility to render customized styles. + props.

), demo: , From 3220821bef6f4ea631ae2dad2c7b7bb0322647e5 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 21 May 2020 01:48:59 +0530 Subject: [PATCH 39/55] updated custom-components name, added clasName prop, updated text for examples, removed unnecessary info from examples,moved to utilities --- src-docs/src/routes.js | 3 +- src-docs/src/views/text_diff/text_diff.js | 12 +++--- .../text_diff/text_diff_custom_components.js | 40 +++++-------------- .../src/views/text_diff/text_diff_example.js | 32 +++++++++------ .../src/views/text_diff/text_diff_timeout.js | 8 ++-- src/components/code/text_diff.tsx | 35 ++++++++-------- 6 files changed, 58 insertions(+), 72 deletions(-) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 35a49fa9194..cda26ce7cd8 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -376,7 +376,7 @@ const navigation = [ LoadingExample, ProgressExample, StatExample, - TextDiffExample, + TextExample, TitleExample, ToastExample, @@ -435,6 +435,7 @@ const navigation = [ PrettyDurationExample, ResizeObserverExample, ResponsiveExample, + TextDiffExample, ToggleExample, WindowEventExample, ].map(example => createExample(example)), diff --git a/src-docs/src/views/text_diff/text_diff.js b/src-docs/src/views/text_diff/text_diff.js index e484b328355..a15cd121d5c 100644 --- a/src-docs/src/views/text_diff/text_diff.js +++ b/src-docs/src/views/text_diff/text_diff.js @@ -12,16 +12,16 @@ export default () => { const [del, setDel] = useState(0); const [ins, setIns] = useState(0); - const initialText = - 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; - const currentText = - 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; + const beforeText = + 'Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape- descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.'; + const afterText = + 'Orbiting those at a distance of roughly ninety-nine billion yards is not insignificant dwaf red green planet whose ape- ascended life forms are so amazingly primitive that they still think digital clocks are a pretty neat idea.'; const [rendered, textDiffObject] = useEuiTextDiff({ fontSize: 'm', paddingSize: 'm', - initialText, - currentText, + beforeText, + afterText, timeout: 0, }); diff --git a/src-docs/src/views/text_diff/text_diff_custom_components.js b/src-docs/src/views/text_diff/text_diff_custom_components.js index 8b8bbfdabc0..e5c5be790c0 100644 --- a/src-docs/src/views/text_diff/text_diff_custom_components.js +++ b/src-docs/src/views/text_diff/text_diff_custom_components.js @@ -1,51 +1,29 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { useEuiTextDiff, - EuiCode, EuiSpacer, - EuiTextColor, EuiCodeBlock, } from '../../../../src/components'; export default () => { - const [del, setDel] = useState(0); - const [ins, setIns] = useState(0); - - const initialText = - 'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy'; - const currentText = - 'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day'; - - const [rendered, textDiffObject] = useEuiTextDiff({ - initialText, - currentText, - DeletionComponent: () => null, + const beforeText = + 'Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape- descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.'; + const afterText = + 'Orbiting those at a distance of roughly ninety-nine billion yards is not insignificant dwaf red green planet whose ape- ascended life forms are so amazingly primitive that they still think digital clocks are a pretty neat idea.'; + const [rendered] = useEuiTextDiff({ + beforeText, + afterText, + deleteComponent: () => null, timeout: 0, }); - useEffect(() => { - textDiffObject.forEach(el => { - if (el[0] === 1) { - setIns(add => add + 1); - } else if (el[0] === -1) { - setDel(sub => sub + 1); - } - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - return ( <> {rendered} - - {ins} Insertions, - {del} - Deletions - ); }; diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index 16045c32ad5..ad43faf2a52 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -33,14 +33,19 @@ export const TextDiffExample = { }, ], text: ( -

- The hook, useEuiTextDiff, generates a set of changes between two - strings. It returns both React elements for displaying the diff - and an object representing the identified changes. -

-

- const [rendered, textDiffObject] = useEuiTextDiff() -

+ <> +

+ The hook, useEuiTextDiff, generates a set of + changes between two strings. It returns both React elements for + displaying the diff and an object representing the identified + changes. +

+

+ + const [rendered, textDiffObject] = useEuiTextDiff() + +

+ ), demo: , props: { useEuiTextDiff }, @@ -59,8 +64,9 @@ export const TextDiffExample = { ], text: (

- By default, the hook will render deletions as {''} and - insertions as {''} elements. You can replace these rendered + By default, the hook will render deletions as{' '} + {''} and insertions as{' '} + {''} elements. You can replace these rendered html elements with the InsertComponent, DeletionComponent, NoChangeComponent{' '} @@ -85,9 +91,9 @@ export const TextDiffExample = { ], text: (

- The timeout prop is used to set how many seconds any - diff's exploration phase may take. The default value is 0.1, a - value of 0 disables the timeout and lets diff run until completion. + The timeout prop is used to set how many seconds + any diff's exploration phase may take. The default value is 0.1, + a value of 0 disables the timeout and lets diff run until completion. The higher the timeout, the more detailed the comparison.

), diff --git a/src-docs/src/views/text_diff/text_diff_timeout.js b/src-docs/src/views/text_diff/text_diff_timeout.js index 82dfb6bfd41..9c7e624b5b2 100644 --- a/src-docs/src/views/text_diff/text_diff_timeout.js +++ b/src-docs/src/views/text_diff/text_diff_timeout.js @@ -10,8 +10,8 @@ import { } from '../../../../src/components'; import { htmlIdGenerator } from '../../../../src/services'; -import initialText from '!!raw-loader!../../../../src/global_styling/variables/_colors.scss'; -import currentText from '!!raw-loader!../../../../src/themes/eui/eui_colors_dark.scss'; +import beforeText from '!!raw-loader!../../../../src/global_styling/variables/_colors.scss'; +import afterText from '!!raw-loader!../../../../src/themes/eui/eui_colors_dark.scss'; export default () => { const [del, setDel] = useState(0); @@ -19,8 +19,8 @@ export default () => { const [value, setValue] = useState(0.5); const [rendered, textDiffObject] = useEuiTextDiff({ - initialText, - currentText, + beforeText, + afterText, timeout: value, }); diff --git a/src/components/code/text_diff.tsx b/src/components/code/text_diff.tsx index 5bea4b6b4a5..5f682769c82 100644 --- a/src/components/code/text_diff.tsx +++ b/src/components/code/text_diff.tsx @@ -4,11 +4,11 @@ import classNames from 'classnames'; import { CommonProps } from '../common'; interface Props { - currentText: string; - initialText: string; - InsertComponent?: ElementType; - DeletionComponent?: ElementType; - NoChangeComponent?: ElementType; + afterText: string; + beforeText: string; + insertComponent?: ElementType; + deleteComponent?: ElementType; + sameComponent?: ElementType; /** * Time in milliseconds. Passing a timeout of value '0' disables the timeout state */ @@ -20,21 +20,22 @@ export type EuiTextDiffProps = CommonProps & HTMLAttributes; export const useEuiTextDiff = ({ - InsertComponent = 'ins', - DeletionComponent = 'del', - NoChangeComponent = 'span', - initialText = '', - currentText = '', + className, + insertComponent = 'ins', + deleteComponent = 'del', + sameComponent = 'span', + beforeText = '', + afterText = '', timeout = 0.1, ...rest }: EuiTextDiffProps) => { const textDiff = useMemo(() => { const diff = new Diff({ timeout }); // options may be passed to constructor - return diff.main(initialText, currentText); - }, [initialText, currentText, timeout]); // produces diff array + return diff.main(beforeText, afterText); + }, [beforeText, afterText, timeout]); // produces diff array - const classes = classNames('euiTextDiff'); + const classes = classNames('euiTextDiff', className); const rendereredHtml = useMemo(() => { const html = []; @@ -42,14 +43,14 @@ export const useEuiTextDiff = ({ for (let i = 0; i < textDiff.length; i++) { let Element: ElementType; const el = textDiff[i]; - if (el[0] === 0) Element = NoChangeComponent; - else if (el[0] === -1) Element = DeletionComponent; - else Element = InsertComponent; + if (el[0] === 0) Element = sameComponent; + else if (el[0] === -1) Element = deleteComponent; + else Element = insertComponent; html.push({el[1]}); } return html; - }, [textDiff, DeletionComponent, InsertComponent, NoChangeComponent]); // produces diff array + }, [textDiff, deleteComponent, insertComponent, sameComponent]); // produces diff array return [
From a17b697871c1d49159c4aa1f080a952add1635b0 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 21 May 2020 01:57:55 +0530 Subject: [PATCH 40/55] moved to own folder --- src-docs/src/views/text_diff/text_diff_example.js | 2 -- src/components/code/_index.scss | 1 - src/components/code/index.ts | 1 - src/components/index.js | 9 +++------ src/components/index.scss | 1 + src/components/text_diff/_index.scss | 1 + src/components/{code => text_diff}/_text_diff.scss | 0 src/components/text_diff/index.ts | 1 + src/components/{code => text_diff}/text-diff.d.ts | 0 src/components/{code => text_diff}/text_diff.tsx | 0 10 files changed, 6 insertions(+), 10 deletions(-) create mode 100644 src/components/text_diff/_index.scss rename src/components/{code => text_diff}/_text_diff.scss (100%) create mode 100644 src/components/text_diff/index.ts rename src/components/{code => text_diff}/text-diff.d.ts (100%) rename src/components/{code => text_diff}/text_diff.tsx (100%) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index ad43faf2a52..8f6a4d7cf6d 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -75,7 +75,6 @@ export const TextDiffExample = {

), demo: , - props: { useEuiTextDiff }, }, { title: 'Adjusting the timeout delay', @@ -98,7 +97,6 @@ export const TextDiffExample = {

), demo: , - props: { useEuiTextDiff }, }, ], }; diff --git a/src/components/code/_index.scss b/src/components/code/_index.scss index 318d03c2624..f984a214adf 100644 --- a/src/components/code/_index.scss +++ b/src/components/code/_index.scss @@ -1,2 +1 @@ @import 'code_block'; -@import 'text_diff'; diff --git a/src/components/code/index.ts b/src/components/code/index.ts index 88dac0d60fe..fa0b2253380 100644 --- a/src/components/code/index.ts +++ b/src/components/code/index.ts @@ -1,4 +1,3 @@ export { EuiCode, EuiCodeProps } from './code'; export { EuiCodeBlock, EuiCodeBlockProps } from './code_block'; export { EuiCodeBlockImpl } from './_code_block'; -export { useEuiTextDiff, EuiTextDiffProps } from './text_diff'; diff --git a/src/components/index.js b/src/components/index.js index 3c416c48d32..95916b7fbe2 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -33,12 +33,7 @@ export { EuiCallOut } from './call_out'; export { EuiCard, EuiCheckableCard } from './card'; -export { - EuiCode, - EuiCodeBlock, - EuiCodeBlockImpl, - useEuiTextDiff, -} from './code'; +export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code'; export { EuiCodeEditor } from './code_editor'; @@ -300,6 +295,8 @@ export { EuiTab, EuiTabs, EuiTabbedContent } from './tabs'; export { EuiText, EuiTextColor, EuiTextAlign } from './text'; +export { useEuiTextDiff } from './text_diff'; + export { EuiTitle } from './title'; export { EuiGlobalToastList, EuiGlobalToastListItem, EuiToast } from './toast'; diff --git a/src/components/index.scss b/src/components/index.scss index dce5687119d..b899b104c83 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -60,6 +60,7 @@ @import 'suggest/index'; @import 'table/index'; @import 'tabs/index'; +@import 'text_diff/index'; @import 'title/index'; @import 'toast/index'; @import 'token/index'; diff --git a/src/components/text_diff/_index.scss b/src/components/text_diff/_index.scss new file mode 100644 index 00000000000..e4b6a8c0360 --- /dev/null +++ b/src/components/text_diff/_index.scss @@ -0,0 +1 @@ +@import 'text_diff'; diff --git a/src/components/code/_text_diff.scss b/src/components/text_diff/_text_diff.scss similarity index 100% rename from src/components/code/_text_diff.scss rename to src/components/text_diff/_text_diff.scss diff --git a/src/components/text_diff/index.ts b/src/components/text_diff/index.ts new file mode 100644 index 00000000000..cdd6f254cbe --- /dev/null +++ b/src/components/text_diff/index.ts @@ -0,0 +1 @@ +export { useEuiTextDiff, EuiTextDiffProps } from './text_diff'; diff --git a/src/components/code/text-diff.d.ts b/src/components/text_diff/text-diff.d.ts similarity index 100% rename from src/components/code/text-diff.d.ts rename to src/components/text_diff/text-diff.d.ts diff --git a/src/components/code/text_diff.tsx b/src/components/text_diff/text_diff.tsx similarity index 100% rename from src/components/code/text_diff.tsx rename to src/components/text_diff/text_diff.tsx From a5c343fa47619223e29547759188802a138cd1c6 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 21 May 2020 02:07:23 +0530 Subject: [PATCH 41/55] handled props directly --- src-docs/src/views/text_diff/props.tsx | 7 +++++++ src-docs/src/views/text_diff/text_diff_example.js | 6 +++--- 2 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 src-docs/src/views/text_diff/props.tsx diff --git a/src-docs/src/views/text_diff/props.tsx b/src-docs/src/views/text_diff/props.tsx new file mode 100644 index 00000000000..859d46b5a6f --- /dev/null +++ b/src-docs/src/views/text_diff/props.tsx @@ -0,0 +1,7 @@ +import React, { FunctionComponent } from 'react'; + +import { EuiTextDiffProps } from '../../../../src/components/text_diff'; + +export const useEuiTextDiffProp: FunctionComponent = () => { + return
; +}; diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index 8f6a4d7cf6d..8416cdb428a 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -4,8 +4,8 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, useEuiTextDiff } from '../../../../src/components'; - +import { EuiCode } from '../../../../src/components'; +import { useEuiTextDiffProp } from './props'; import TextDiff from './text_diff'; const textDiffSource = require('!!raw-loader!./text_diff'); const textDiffHtml = renderToHtml(TextDiff); @@ -48,7 +48,7 @@ export const TextDiffExample = { ), demo: , - props: { useEuiTextDiff }, + props: { useEuiTextDiffProp }, }, { title: 'Custom rendered elements', From bb69275d756ef19b23b8223df1748e33f14adb9e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 21 May 2020 02:49:12 +0530 Subject: [PATCH 42/55] over rides eslint --- .eslintrc.js | 142 +++++++++++++++++++++++++++------------------------ 1 file changed, 75 insertions(+), 67 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 37d73034101..401ce3c737b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,88 +1,96 @@ module.exports = { - parser: "@typescript-eslint/parser", + parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: { - jsx: true - } + jsx: true, + }, }, settings: { - "import/resolver": { - node: { - extensions: [".ts", ".tsx", ".js", ".json"] + 'import/resolver': { + node: { + extensions: ['.ts', '.tsx', '.js', '.json'], }, webpack: { - config: "./src-docs/webpack.config.js" - } + config: './src-docs/webpack.config.js', + }, }, react: { - version: "detect" - } + version: 'detect', + }, }, extends: [ - "@elastic/eslint-config-kibana", - "plugin:@typescript-eslint/recommended", + '@elastic/eslint-config-kibana', + 'plugin:@typescript-eslint/recommended', // Prettier options need to come last, in order to override other style // rules. - "prettier/react", - "prettier/standard", - "plugin:prettier/recommended" - ], - plugins: [ - "jsx-a11y", - "prettier", - "local", - "react-hooks" + 'prettier/react', + 'prettier/standard', + 'plugin:prettier/recommended', ], + plugins: ['jsx-a11y', 'prettier', 'local', 'react-hooks'], rules: { - "prefer-template": "error", - "local/i18n": "error", - "no-use-before-define": "off", - "quotes": ["warn", "single", "avoid-escape"], + 'prefer-template': 'error', + 'local/i18n': 'error', + 'no-use-before-define': 'off', + quotes: ['warn', 'single', 'avoid-escape'], - "jsx-a11y/accessible-emoji": "error", - "jsx-a11y/alt-text": "error", - "jsx-a11y/anchor-has-content": "error", - "jsx-a11y/aria-activedescendant-has-tabindex": "error", - "jsx-a11y/aria-props": "error", - "jsx-a11y/aria-proptypes": "error", - "jsx-a11y/aria-role": "error", - "jsx-a11y/aria-unsupported-elements": "error", - "jsx-a11y/heading-has-content": "error", - "jsx-a11y/html-has-lang": "error", - "jsx-a11y/iframe-has-title": "error", - "jsx-a11y/interactive-supports-focus": "error", - "jsx-a11y/media-has-caption": "error", - "jsx-a11y/mouse-events-have-key-events": "error", - "jsx-a11y/no-access-key": "error", - "jsx-a11y/no-distracting-elements": "error", - "jsx-a11y/no-interactive-element-to-noninteractive-role": "error", - "jsx-a11y/no-noninteractive-element-interactions": "error", - "jsx-a11y/no-noninteractive-element-to-interactive-role": "error", - "jsx-a11y/no-redundant-roles": "error", - "jsx-a11y/role-has-required-aria-props": "error", - "jsx-a11y/role-supports-aria-props": "error", - "jsx-a11y/scope": "error", - "jsx-a11y/tabindex-no-positive": "error", - "jsx-a11y/label-has-associated-control": "error", + 'jsx-a11y/accessible-emoji': 'error', + 'jsx-a11y/alt-text': 'error', + 'jsx-a11y/anchor-has-content': 'error', + 'jsx-a11y/aria-activedescendant-has-tabindex': 'error', + 'jsx-a11y/aria-props': 'error', + 'jsx-a11y/aria-proptypes': 'error', + 'jsx-a11y/aria-role': 'error', + 'jsx-a11y/aria-unsupported-elements': 'error', + 'jsx-a11y/heading-has-content': 'error', + 'jsx-a11y/html-has-lang': 'error', + 'jsx-a11y/iframe-has-title': 'error', + 'jsx-a11y/interactive-supports-focus': 'error', + 'jsx-a11y/media-has-caption': 'error', + 'jsx-a11y/mouse-events-have-key-events': 'error', + 'jsx-a11y/no-access-key': 'error', + 'jsx-a11y/no-distracting-elements': 'error', + 'jsx-a11y/no-interactive-element-to-noninteractive-role': 'error', + 'jsx-a11y/no-noninteractive-element-interactions': 'error', + 'jsx-a11y/no-noninteractive-element-to-interactive-role': 'error', + 'jsx-a11y/no-redundant-roles': 'error', + 'jsx-a11y/role-has-required-aria-props': 'error', + 'jsx-a11y/role-supports-aria-props': 'error', + 'jsx-a11y/scope': 'error', + 'jsx-a11y/tabindex-no-positive': 'error', + 'jsx-a11y/label-has-associated-control': 'error', - "react-hooks/rules-of-hooks": "error", - "react-hooks/exhaustive-deps": "warn", + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'warn', - "@typescript-eslint/array-type": ["error", "array-simple"], - "@typescript-eslint/camelcase": "off", - "@typescript-eslint/class-name-casing": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-member-accessibility": "off", - "@typescript-eslint/indent": "off", - "@typescript-eslint/no-empty-interface": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/no-parameter-properties": "off", - "@typescript-eslint/no-triple-slash-reference": "off", - "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "ignoreRestSiblings": true }], - "@typescript-eslint/no-use-before-define": "off", + '@typescript-eslint/array-type': ['error', 'array-simple'], + '@typescript-eslint/camelcase': 'off', + '@typescript-eslint/class-name-casing': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/explicit-member-accessibility': 'off', + '@typescript-eslint/indent': 'off', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-parameter-properties': 'off', + '@typescript-eslint/no-triple-slash-reference': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { argsIgnorePattern: '^_', ignoreRestSiblings: true }, + ], + '@typescript-eslint/no-use-before-define': 'off', }, env: { - jest: true - } + jest: true, + }, + overrides: [ + { + files: ['*.d.ts'], + rules: { + 'react/no-multi-comp': 'off', + 'react/prefer-es6-class': 'off', + 'react/prefer-stateless-function': 'off', + }, + }, + ], }; From b43effe219686c1f21b00430d70b082829358aff Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 21 May 2020 02:56:32 +0530 Subject: [PATCH 43/55] resolved conflicts --- .eslintrc.js | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 401ce3c737b..4beb260bd9e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,24 @@ +const APACHE_2_0_LICENSE_HEADER = ` +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +`; + module.exports = { parser: '@typescript-eslint/parser', parserOptions: { @@ -31,6 +52,14 @@ module.exports = { rules: { 'prefer-template': 'error', 'local/i18n': 'error', + 'local/href-with-rel': 'error', + 'local/forward-ref': 'error', + 'local/require-license-header': [ + 'warn', + { + license: APACHE_2_0_LICENSE_HEADER, + }, + ], 'no-use-before-define': 'off', quotes: ['warn', 'single', 'avoid-escape'], @@ -63,7 +92,9 @@ module.exports = { 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', - '@typescript-eslint/array-type': ['error', 'array-simple'], + '@typescript-eslint/array-type': ['error', { default: 'array-simple' }], + // Nice idea...but not today. + '@typescript-eslint/ban-ts-ignore': 'off', '@typescript-eslint/camelcase': 'off', '@typescript-eslint/class-name-casing': 'off', '@typescript-eslint/explicit-function-return-type': 'off', @@ -79,6 +110,10 @@ module.exports = { { argsIgnorePattern: '^_', ignoreRestSiblings: true }, ], '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-empty-function': 'off', + // It"s all very well saying that some types are trivially inferrable, + // but being explicit is still clearer. + '@typescript-eslint/no-inferrable-types': 'off', }, env: { jest: true, From a69e4c810379b89b31bcb2223292066466a76296 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Thu, 21 May 2020 03:00:12 +0530 Subject: [PATCH 44/55] Update .eslintrc.js --- .eslintrc.js | 54 ++++++++++++++++++++++++++-------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 7d385417bc2..4142fa78221 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -62,34 +62,34 @@ module.exports = { ], "no-use-before-define": "off", "quotes": ["warn", "single", "avoid-escape"], - 'jsx-a11y/accessible-emoji': 'error', - 'jsx-a11y/alt-text': 'error', - 'jsx-a11y/anchor-has-content': 'error', - 'jsx-a11y/aria-activedescendant-has-tabindex': 'error', - 'jsx-a11y/aria-props': 'error', - 'jsx-a11y/aria-proptypes': 'error', - 'jsx-a11y/aria-role': 'error', - 'jsx-a11y/aria-unsupported-elements': 'error', - 'jsx-a11y/heading-has-content': 'error', - 'jsx-a11y/html-has-lang': 'error', - 'jsx-a11y/iframe-has-title': 'error', - 'jsx-a11y/interactive-supports-focus': 'error', - 'jsx-a11y/media-has-caption': 'error', - 'jsx-a11y/mouse-events-have-key-events': 'error', - 'jsx-a11y/no-access-key': 'error', - 'jsx-a11y/no-distracting-elements': 'error', - 'jsx-a11y/no-interactive-element-to-noninteractive-role': 'error', - 'jsx-a11y/no-noninteractive-element-interactions': 'error', - 'jsx-a11y/no-noninteractive-element-to-interactive-role': 'error', - 'jsx-a11y/no-redundant-roles': 'error', - 'jsx-a11y/role-has-required-aria-props': 'error', - 'jsx-a11y/role-supports-aria-props': 'error', - 'jsx-a11y/scope': 'error', - 'jsx-a11y/tabindex-no-positive': 'error', - 'jsx-a11y/label-has-associated-control': 'error', + "jsx-a11y/accessible-emoji": "error", + "jsx-a11y/alt-text": "error", + "jsx-a11y/anchor-has-content": "error", + "jsx-a11y/aria-activedescendant-has-tabindex": "error", + "jsx-a11y/aria-props": "error", + "jsx-a11y/aria-proptypes": "error", + "jsx-a11y/aria-role": "error", + "jsx-a11y/aria-unsupported-elements": "error", + "jsx-a11y/heading-has-content": "error", + "jsx-a11y/html-has-lang": "error", + "jsx-a11y/iframe-has-title": "error", + "jsx-a11y/interactive-supports-focus": "error", + "jsx-a11y/media-has-caption": "error", + "jsx-a11y/mouse-events-have-key-events": "error", + "jsx-a11y/no-access-key": "error", + "jsx-a11y/no-distracting-elements": "error", + "jsx-a11y/no-interactive-element-to-noninteractive-role": "error", + "jsx-a11y/no-noninteractive-element-interactions": "error", + "jsx-a11y/no-noninteractive-element-to-interactive-role": "error", + "jsx-a11y/no-redundant-roles": "error", + "jsx-a11y/role-has-required-aria-props": "error", + "jsx-a11y/role-supports-aria-props": "error", + "jsx-a11y/scope": "error", + "jsx-a11y/tabindex-no-positive": "error", + "jsx-a11y/label-has-associated-control": "error", - 'react-hooks/rules-of-hooks': 'error', - 'react-hooks/exhaustive-deps': 'warn', + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", "@typescript-eslint/array-type": ["error", { "default": "array-simple" }], // Nice idea...but not today. From b135497f5b3551311b731b1476dfd2a8fb81cb35 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 21 May 2020 23:16:37 +0530 Subject: [PATCH 45/55] added licence --- src/components/text_diff/index.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/components/text_diff/index.ts b/src/components/text_diff/index.ts index cdd6f254cbe..4a733d52cc9 100644 --- a/src/components/text_diff/index.ts +++ b/src/components/text_diff/index.ts @@ -1 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + export { useEuiTextDiff, EuiTextDiffProps } from './text_diff'; From 833bb0aba93756473bf4a9de193ccb0435585c8a Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 22 May 2020 02:16:09 +0530 Subject: [PATCH 46/55] used license for all files --- src/components/text_diff/text-diff.d.ts | 19 +++++++++++++++++++ src/components/text_diff/text_diff.tsx | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/src/components/text_diff/text-diff.d.ts b/src/components/text_diff/text-diff.d.ts index 7d2f761a51e..1462884fd85 100644 --- a/src/components/text_diff/text-diff.d.ts +++ b/src/components/text_diff/text-diff.d.ts @@ -1,3 +1,22 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + declare module 'text-diff' { interface ConstructorProps { timeout: number; diff --git a/src/components/text_diff/text_diff.tsx b/src/components/text_diff/text_diff.tsx index 5f682769c82..64082ad7777 100644 --- a/src/components/text_diff/text_diff.tsx +++ b/src/components/text_diff/text_diff.tsx @@ -1,3 +1,22 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + import React, { HTMLAttributes, useMemo, ElementType } from 'react'; import Diff from 'text-diff'; import classNames from 'classnames'; From 1b15f0bc1a1f0b085298814e775a4a640a8c8341 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 22 May 2020 02:57:33 +0530 Subject: [PATCH 47/55] removed default wraper from --- src-docs/src/views/text_diff/text_diff.js | 2 -- src/components/text_diff/text_diff.tsx | 11 ++++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/text_diff/text_diff.js b/src-docs/src/views/text_diff/text_diff.js index a15cd121d5c..a96dcca9e09 100644 --- a/src-docs/src/views/text_diff/text_diff.js +++ b/src-docs/src/views/text_diff/text_diff.js @@ -18,8 +18,6 @@ export default () => { 'Orbiting those at a distance of roughly ninety-nine billion yards is not insignificant dwaf red green planet whose ape- ascended life forms are so amazingly primitive that they still think digital clocks are a pretty neat idea.'; const [rendered, textDiffObject] = useEuiTextDiff({ - fontSize: 'm', - paddingSize: 'm', beforeText, afterText, timeout: 0, diff --git a/src/components/text_diff/text_diff.tsx b/src/components/text_diff/text_diff.tsx index 64082ad7777..364cdf11f0c 100644 --- a/src/components/text_diff/text_diff.tsx +++ b/src/components/text_diff/text_diff.tsx @@ -42,7 +42,7 @@ export const useEuiTextDiff = ({ className, insertComponent = 'ins', deleteComponent = 'del', - sameComponent = 'span', + sameComponent, beforeText = '', afterText = '', timeout = 0.1, @@ -60,12 +60,13 @@ export const useEuiTextDiff = ({ const html = []; if (textDiff) for (let i = 0; i < textDiff.length; i++) { - let Element: ElementType; + let Element; const el = textDiff[i]; - if (el[0] === 0) Element = sameComponent; + if (el[0] === 1) Element = insertComponent; else if (el[0] === -1) Element = deleteComponent; - else Element = insertComponent; - html.push({el[1]}); + else if (sameComponent) Element = sameComponent; + if (Element) html.push({el[1]}); + else html.push(el[1]); } return html; From 85564c433dbd19d6729c6ce751968c607adf18b6 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 4 Jun 2020 02:13:16 +0530 Subject: [PATCH 48/55] removed timeout example --- .../src/views/text_diff/text_diff_example.js | 32 ++------- .../src/views/text_diff/text_diff_timeout.js | 67 ------------------- 2 files changed, 5 insertions(+), 94 deletions(-) delete mode 100644 src-docs/src/views/text_diff/text_diff_timeout.js diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index 8416cdb428a..22c3e93bf1b 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -14,10 +14,6 @@ import TextDiffCustomComponents from './text_diff_custom_components'; const customComponentsSource = require('!!raw-loader!./text_diff_custom_components'); const customComponentsHtml = renderToHtml(TextDiffCustomComponents); -import TextDiffTimeOut from './text_diff_timeout'; -const TextDiffTimeOutSource = require('!!raw-loader!./text_diff_timeout'); -const TextDiffTimeOutHtml = renderToHtml(TextDiffTimeOut); - export const TextDiffExample = { title: 'Text Diff', sections: [ @@ -38,7 +34,11 @@ export const TextDiffExample = { The hook, useEuiTextDiff, generates a set of changes between two strings. It returns both React elements for displaying the diff and an object representing the identified - changes. + changes.The timeout prop is used to set how many + seconds any diff's exploration phase may take. The default + value is 0.1, a value of 0 disables the timeout and lets diff run + until completion. The higher the timeout, the more detailed the + comparison.

@@ -76,27 +76,5 @@ export const TextDiffExample = { ), demo: , }, - { - title: 'Adjusting the timeout delay', - source: [ - { - type: GuideSectionTypes.JS, - code: TextDiffTimeOutSource, - }, - { - type: GuideSectionTypes.HTML, - code: TextDiffTimeOutHtml, - }, - ], - text: ( -

- The timeout prop is used to set how many seconds - any diff's exploration phase may take. The default value is 0.1, - a value of 0 disables the timeout and lets diff run until completion. - The higher the timeout, the more detailed the comparison. -

- ), - demo: , - }, ], }; diff --git a/src-docs/src/views/text_diff/text_diff_timeout.js b/src-docs/src/views/text_diff/text_diff_timeout.js deleted file mode 100644 index 9c7e624b5b2..00000000000 --- a/src-docs/src/views/text_diff/text_diff_timeout.js +++ /dev/null @@ -1,67 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import { - useEuiTextDiff, - EuiCode, - EuiSpacer, - EuiTextColor, - EuiRange, - EuiCodeBlock, -} from '../../../../src/components'; -import { htmlIdGenerator } from '../../../../src/services'; - -import beforeText from '!!raw-loader!../../../../src/global_styling/variables/_colors.scss'; -import afterText from '!!raw-loader!../../../../src/themes/eui/eui_colors_dark.scss'; - -export default () => { - const [del, setDel] = useState(0); - const [ins, setIns] = useState(0); - const [value, setValue] = useState(0.5); - - const [rendered, textDiffObject] = useEuiTextDiff({ - beforeText, - afterText, - timeout: value, - }); - - useEffect(() => { - setIns(0); - setDel(0); - - textDiffObject.forEach(el => { - if (el[0] === 1) { - setIns(add => add + 1); - } else if (el[0] === -1) { - setDel(sub => sub + 1); - } - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [value]); - - return ( - <> - setValue(e.target.value)} - showLabels - showValue - aria-label="An example of EuiRange with showValue prop" - /> - - - {rendered} - - - - {ins} Insertions, - {del} - Deletions - - - ); -}; From cbb4308f05f2c7f12602a61630f750c73a5df855 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Thu, 4 Jun 2020 18:28:12 -0400 Subject: [PATCH 49/55] Some design/docs additions (#11) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Adding prop comments - Fixing text contrast - Adding snippets - Added “NEW” badge --- .../html_id_generator_example.js | 2 +- .../overlay_mask/overlay_mask_example.js | 2 +- src-docs/src/views/text_diff/text_diff.js | 9 ++- .../text_diff/text_diff_custom_components.js | 19 ++----- .../src/views/text_diff/text_diff_example.js | 56 ++++++++++++++----- src/components/text_diff/_text_diff.scss | 7 +-- src/components/text_diff/text_diff.tsx | 20 ++++++- 7 files changed, 76 insertions(+), 39 deletions(-) diff --git a/src-docs/src/views/html_id_generator/html_id_generator_example.js b/src-docs/src/views/html_id_generator/html_id_generator_example.js index 07c652cd538..d882d9efde4 100644 --- a/src-docs/src/views/html_id_generator/html_id_generator_example.js +++ b/src-docs/src/views/html_id_generator/html_id_generator_example.js @@ -27,7 +27,7 @@ const PrefixSufixHtml = renderToHtml(PrefixSufix); const prefixSuffixSnippet = " htmlIdGenerator('prefix')('suffix')"; export const HtmlIdGeneratorExample = { - title: 'HTML ID Generator', + title: 'HTML ID generator', sections: [ { source: [ diff --git a/src-docs/src/views/overlay_mask/overlay_mask_example.js b/src-docs/src/views/overlay_mask/overlay_mask_example.js index dbf59e972f5..2ae6981fa79 100644 --- a/src-docs/src/views/overlay_mask/overlay_mask_example.js +++ b/src-docs/src/views/overlay_mask/overlay_mask_example.js @@ -16,7 +16,7 @@ const overlayMaskSnippet = ` `; export const OverlayMaskExample = { - title: 'Overlay Mask', + title: 'Overlay mask', sections: [ { source: [ diff --git a/src-docs/src/views/text_diff/text_diff.js b/src-docs/src/views/text_diff/text_diff.js index a96dcca9e09..297638dad2b 100644 --- a/src-docs/src/views/text_diff/text_diff.js +++ b/src-docs/src/views/text_diff/text_diff.js @@ -5,7 +5,7 @@ import { EuiCode, EuiSpacer, EuiTextColor, - EuiCodeBlock, + EuiText, } from '../../../../src/components'; export default () => { @@ -20,7 +20,6 @@ export default () => { const [rendered, textDiffObject] = useEuiTextDiff({ beforeText, afterText, - timeout: 0, }); useEffect(() => { @@ -36,9 +35,9 @@ export default () => { return ( <> - - {rendered} - + +

{rendered}

+ {ins} Insertions, diff --git a/src-docs/src/views/text_diff/text_diff_custom_components.js b/src-docs/src/views/text_diff/text_diff_custom_components.js index e5c5be790c0..7460c1e01d9 100644 --- a/src-docs/src/views/text_diff/text_diff_custom_components.js +++ b/src-docs/src/views/text_diff/text_diff_custom_components.js @@ -1,10 +1,6 @@ import React from 'react'; -import { - useEuiTextDiff, - EuiSpacer, - EuiCodeBlock, -} from '../../../../src/components'; +import { useEuiTextDiff, EuiCodeBlock } from '../../../../src/components'; export default () => { const beforeText = @@ -14,16 +10,13 @@ export default () => { const [rendered] = useEuiTextDiff({ beforeText, afterText, - deleteComponent: () => null, - timeout: 0, + insertComponent: 'strong', + deleteComponent: 's', }); return ( - <> - - {rendered} - - - + + {rendered} + ); }; diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index 22c3e93bf1b..ba4e8cffbf0 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router'; import { renderToHtml } from '../../services'; @@ -15,7 +16,8 @@ const customComponentsSource = require('!!raw-loader!./text_diff_custom_componen const customComponentsHtml = renderToHtml(TextDiffCustomComponents); export const TextDiffExample = { - title: 'Text Diff', + title: 'Text diff', + isNew: true, sections: [ { source: [ @@ -34,21 +36,26 @@ export const TextDiffExample = { The hook, useEuiTextDiff, generates a set of changes between two strings. It returns both React elements for displaying the diff and an object representing the identified - changes.The timeout prop is used to set how many + changes. The timeout prop is used to set how many seconds any diff's exploration phase may take. The default value is 0.1, a value of 0 disables the timeout and lets diff run until completion. The higher the timeout, the more detailed the comparison.

- - const [rendered, textDiffObject] = useEuiTextDiff() + + { + 'const [rendered, textDiffObject] = useEuiTextDiff({ beforeText, afterText })' + }

), demo: , props: { useEuiTextDiffProp }, + snippet: `const [rendered, textDiffObject] = useEuiTextDiff({ beforeText, afterText }) + +

{rendered}

`, }, { title: 'Custom rendered elements', @@ -63,18 +70,39 @@ export const TextDiffExample = { }, ], text: ( -

- By default, the hook will render deletions as{' '} - {''} and insertions as{' '} - {''} elements. You can replace these rendered - html elements with the - - InsertComponent, DeletionComponent, NoChangeComponent{' '} - - props. -

+ <> +

+ By default, the hook will wrap deletions with{' '} + {''} and insertions with{' '} + {''} elements. You can replace these + elements with the deleteComponent and{' '} + insertComponent + props respectively. +

+

+ Also, since rendered is simple html string, you + can wrap it in any contextual element like{' '} + + EuiText + {' '} + or{' '} + + EuiCodeBlock + + . +

+ ), demo: , + snippet: `const [rendered] = useEuiTextDiff({ + beforeText, + afterText, + insertComponent: 'strong', +}); + + + {rendered} +`, }, ], }; diff --git a/src/components/text_diff/_text_diff.scss b/src/components/text_diff/_text_diff.scss index 8f71aa6946a..6e38229934d 100644 --- a/src/components/text_diff/_text_diff.scss +++ b/src/components/text_diff/_text_diff.scss @@ -1,10 +1,9 @@ .euiTextDiff { - del { - color: $euiColorDanger; + color: $euiColorDangerText; } ins { - color: $euiColorSecondary; + color: $euiColorSuccessText; } -} \ No newline at end of file +} diff --git a/src/components/text_diff/text_diff.tsx b/src/components/text_diff/text_diff.tsx index 364cdf11f0c..d600a3d6767 100644 --- a/src/components/text_diff/text_diff.tsx +++ b/src/components/text_diff/text_diff.tsx @@ -23,10 +23,28 @@ import classNames from 'classnames'; import { CommonProps } from '../common'; interface Props { - afterText: string; + /** + * The starting string + */ beforeText: string; + /** + * The string used to compare against `beforeText` + */ + afterText: string; + /** + * HTML element to wrap insertion differences. + * Defaults to `ins` + */ insertComponent?: ElementType; + /** + * HTML element to wrap deletion differences. + * Defaults to `del` + */ deleteComponent?: ElementType; + /** + * HTML element to wrap text with no differences. + * Doesn't wrap with anything by default + */ sameComponent?: ElementType; /** * Time in milliseconds. Passing a timeout of value '0' disables the timeout state From c8ecd82b412b733ab564812816d4ba911d4256ab Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 5 Jun 2020 15:05:11 +0530 Subject: [PATCH 50/55] added test, CL, updated branch --- CHANGELOG.md | 2 +- .../src/views/text_diff/text_diff_example.js | 2 +- src/components/text_diff/text-diff.test.tsx | 59 +++++++++++++++++++ 3 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 src/components/text_diff/text-diff.test.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index b8cad06ba93..17c5f51a0b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `25.0.0`. +- Added `EuiTextDiff` component ([#3288](https://github.com/elastic/eui/pull/3288)) ## [`25.0.0`](https://github.com/elastic/eui/tree/v25.0.0) diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js index ba4e8cffbf0..a4e20e776ee 100644 --- a/src-docs/src/views/text_diff/text_diff_example.js +++ b/src-docs/src/views/text_diff/text_diff_example.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Link } from 'react-router'; +import { Link } from 'react-router-dom'; import { renderToHtml } from '../../services'; diff --git a/src/components/text_diff/text-diff.test.tsx b/src/components/text_diff/text-diff.test.tsx new file mode 100644 index 00000000000..45dc1f3a42b --- /dev/null +++ b/src/components/text_diff/text-diff.test.tsx @@ -0,0 +1,59 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { render } from 'enzyme'; + +import { useEuiTextDiff } from './text_diff'; +const beforeText = + 'Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape- descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.'; +const afterText = + 'Orbiting those at a distance of roughly ninety-nine billion yards is not insignificant dwaf red green planet whose ape- ascended life forms are so amazingly primitive that they still think digital clocks are a pretty neat idea.'; + +describe('useEuiTextDiff', () => { + test('is rendered', () => { + const [rendered] = useEuiTextDiff({ + beforeText, + afterText, + timeout: 0, + }); + const component = render(
{rendered}
); + + expect(component).toMatchSnapshot(); + }); + + describe('props', () => { + describe('custom components', () => { + test('is rendered', () => { + const [rendered] = useEuiTextDiff({ + beforeText, + afterText, + timeout: 0, + insertComponent: 'strong', + deleteComponent: 's', + sameComponent: 'p', + }); + + const component = render(
{rendered}
); + + expect(component).toMatchSnapshot(); + }); + }); + }); +}); From d9367f9dfc1409fa6991d48b85b6db10709b8241 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 5 Jun 2020 15:30:44 +0530 Subject: [PATCH 51/55] updated test --- src/components/text_diff/text-diff.test.tsx | 43 +++++++++++++-------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/src/components/text_diff/text-diff.test.tsx b/src/components/text_diff/text-diff.test.tsx index 45dc1f3a42b..3d833f4d499 100644 --- a/src/components/text_diff/text-diff.test.tsx +++ b/src/components/text_diff/text-diff.test.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; -import { render } from 'enzyme'; +import { mount } from 'enzyme'; import { useEuiTextDiff } from './text_diff'; const beforeText = @@ -28,12 +28,17 @@ const afterText = describe('useEuiTextDiff', () => { test('is rendered', () => { - const [rendered] = useEuiTextDiff({ - beforeText, - afterText, - timeout: 0, - }); - const component = render(
{rendered}
); + const component = mount( + <> + { + useEuiTextDiff({ + beforeText, + afterText, + timeout: 0, + })[0] + } + + ); expect(component).toMatchSnapshot(); }); @@ -41,16 +46,20 @@ describe('useEuiTextDiff', () => { describe('props', () => { describe('custom components', () => { test('is rendered', () => { - const [rendered] = useEuiTextDiff({ - beforeText, - afterText, - timeout: 0, - insertComponent: 'strong', - deleteComponent: 's', - sameComponent: 'p', - }); - - const component = render(
{rendered}
); + const component = mount( + <> + { + useEuiTextDiff({ + beforeText, + afterText, + timeout: 0, + insertComponent: 'strong', + deleteComponent: 's', + sameComponent: 'p', + })[0] + } + + ); expect(component).toMatchSnapshot(); }); From ae5f40804a64a8ebce1345e4d0094fd39f7a3c06 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 5 Jun 2020 21:43:03 +0530 Subject: [PATCH 52/55] fixed snaps --- src/components/text_diff/text-diff.test.tsx | 48 ++++++++++----------- 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/src/components/text_diff/text-diff.test.tsx b/src/components/text_diff/text-diff.test.tsx index 3d833f4d499..7c106d3a7f0 100644 --- a/src/components/text_diff/text-diff.test.tsx +++ b/src/components/text_diff/text-diff.test.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; -import { mount } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import { useEuiTextDiff } from './text_diff'; const beforeText = @@ -28,17 +28,15 @@ const afterText = describe('useEuiTextDiff', () => { test('is rendered', () => { - const component = mount( - <> - { - useEuiTextDiff({ - beforeText, - afterText, - timeout: 0, - })[0] - } - - ); + const Element = () => { + const renderedComponent = useEuiTextDiff({ + beforeText, + afterText, + timeout: 0, + })[0]; + return <>{renderedComponent}; + }; + const component = shallow(); expect(component).toMatchSnapshot(); }); @@ -46,20 +44,18 @@ describe('useEuiTextDiff', () => { describe('props', () => { describe('custom components', () => { test('is rendered', () => { - const component = mount( - <> - { - useEuiTextDiff({ - beforeText, - afterText, - timeout: 0, - insertComponent: 'strong', - deleteComponent: 's', - sameComponent: 'p', - })[0] - } - - ); + const Element = () => { + const renderedComponent = useEuiTextDiff({ + beforeText, + afterText, + timeout: 0, + insertComponent: 'strong', + deleteComponent: 's', + sameComponent: 'p', + })[0]; + return <>{renderedComponent}; + }; + const component = shallow(); expect(component).toMatchSnapshot(); }); From 04218eae13848783ecf6cd901e8833e7aa51c917 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 5 Jun 2020 21:43:16 +0530 Subject: [PATCH 53/55] snaps --- .../__snapshots__/text-diff.test.tsx.snap | 349 ++++++++++++++++++ 1 file changed, 349 insertions(+) create mode 100644 src/components/text_diff/__snapshots__/text-diff.test.tsx.snap diff --git a/src/components/text_diff/__snapshots__/text-diff.test.tsx.snap b/src/components/text_diff/__snapshots__/text-diff.test.tsx.snap new file mode 100644 index 00000000000..4993c4c70d7 --- /dev/null +++ b/src/components/text_diff/__snapshots__/text-diff.test.tsx.snap @@ -0,0 +1,349 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`useEuiTextDiff is rendered 1`] = ` + +
+ Orbiting th + + i + + + o + + s + + e + + at a distance of roughly ninety- + + two + + + nine + + + + m + + + b + + illion + + mile + + + yard + + s is + + a + + n + + ut + + + o + + t + + erly + + insignificant + + little + + + dwaf + + + + blu + + + r + + e + + d + + green planet whose ape- + + de + + + a + + scended life forms are so amazingly primitive that they still think digital + + wat + + + clo + + c + + he + + + k + + s are a pretty neat idea. +
+ +`; + +exports[`useEuiTextDiff props custom components is rendered 1`] = ` + +
+

+ Orbiting th +

+ + i + + + o + +

+ s +

+ + e + +

+ at a distance of roughly ninety- +

+ + two + + + nine + +

+ +

+ + m + + + b + +

+ illion +

+ + mile + + + yard + +

+ s is +

+ + a + +

+ n +

+ + ut + + + o + +

+ t +

+ + erly + +

+ insignificant +

+ + little + + + dwaf + +

+ +

+ + blu + + + r + +

+ e +

+ + d + +

+ green planet whose ape- +

+ + de + + + a + +

+ scended life forms are so amazingly primitive that they still think digital +

+ + wat + + + clo + +

+ c +

+ + he + + + k + +

+ s are a pretty neat idea. +

+
+ +`; From fdf02c82b8fbb678c88bb72459f049fe1eb63348 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 5 Jun 2020 21:43:58 +0530 Subject: [PATCH 54/55] linting fixed --- src/components/text_diff/text-diff.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/text_diff/text-diff.test.tsx b/src/components/text_diff/text-diff.test.tsx index 7c106d3a7f0..3f8b19e2c8d 100644 --- a/src/components/text_diff/text-diff.test.tsx +++ b/src/components/text_diff/text-diff.test.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; -import { mount, shallow } from 'enzyme'; +import { shallow } from 'enzyme'; import { useEuiTextDiff } from './text_diff'; const beforeText = From bbb5df691c36c8b1af06b67e35e11a67bb139968 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 5 Jun 2020 18:40:26 +0000 Subject: [PATCH 55/55] Update CHANGELOG.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 17c5f51a0b4..b033c6b344f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added `EuiTextDiff` component ([#3288](https://github.com/elastic/eui/pull/3288)) +- Added `useEuiTextDiff` react hook utility ([#3288](https://github.com/elastic/eui/pull/3288)) ## [`25.0.0`](https://github.com/elastic/eui/tree/v25.0.0)