From 70c68c5d500f8cb00a8d7864e716f4099b83ad86 Mon Sep 17 00:00:00 2001 From: Nick Lucas Date: Mon, 11 Oct 2021 21:48:20 +0100 Subject: [PATCH] Migrate Diff to tsx --- .../components/diff/{Diff.js => Diff.tsx} | 33 ++-- .../app/renderer/components/diff/DiffPanel.js | 6 +- .../app/renderer/components/diff/Hunk.js | 153 ------------------ .../primitives/list/{Label.js => Label.tsx} | 8 +- .../lib/primitives/list/{Row.js => Row.tsx} | 6 +- .../primitives/list/{index.js => index.tsx} | 0 packages/giterm/package.json | 3 +- yarn.lock | 53 +++++- 8 files changed, 71 insertions(+), 191 deletions(-) rename packages/giterm/app/renderer/components/diff/{Diff.js => Diff.tsx} (72%) delete mode 100644 packages/giterm/app/renderer/components/diff/Hunk.js rename packages/giterm/app/renderer/lib/primitives/list/{Label.js => Label.tsx} (61%) rename packages/giterm/app/renderer/lib/primitives/list/{Row.js => Row.tsx} (84%) rename packages/giterm/app/renderer/lib/primitives/list/{index.js => index.tsx} (100%) diff --git a/packages/giterm/app/renderer/components/diff/Diff.js b/packages/giterm/app/renderer/components/diff/Diff.tsx similarity index 72% rename from packages/giterm/app/renderer/components/diff/Diff.js rename to packages/giterm/app/renderer/components/diff/Diff.tsx index 5a8471fd..64ee2d98 100644 --- a/packages/giterm/app/renderer/components/diff/Diff.js +++ b/packages/giterm/app/renderer/components/diff/Diff.tsx @@ -2,15 +2,22 @@ import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import { Hunk } from './Hunk' import { List } from 'app/lib/primitives' +import { DiffEditor } from "app/lib/monaco" +import type { editor } from "monaco-editor" + export function Diff({ filePatch }) { const isRenamed = filePatch.oldName !== filePatch.newName && !!filePatch.oldName && !!filePatch.newName + const options: editor.IDiffEditorOptions = { + renderSideBySide: false, + renderOverviewRuler: false + } + return ( @@ -28,16 +35,8 @@ export function Diff({ filePatch }) { )} - - - {filePatch.blocks.length === 0 && ( - Nothing to display! - )} - - {filePatch.blocks.map((hunk, i) => ( - - ))} - + + ) } @@ -71,15 +70,3 @@ const PatchName = styled.div` const PatchNameSeparator = styled.div` padding: 0 0.5rem; ` - -const HunksContainer = styled.div` - display: flex; - flex-direction: column; - flex: 0 0 auto; - - margin-top: 1rem; -` - -const MessageText = styled.div` - text-align: center; -` diff --git a/packages/giterm/app/renderer/components/diff/DiffPanel.js b/packages/giterm/app/renderer/components/diff/DiffPanel.js index ac6b2ebd..7c941a1e 100644 --- a/packages/giterm/app/renderer/components/diff/DiffPanel.js +++ b/packages/giterm/app/renderer/components/diff/DiffPanel.js @@ -9,8 +9,6 @@ import { Files } from './Files' import { Diff } from './Diff' import { useDiffData } from './useDiffData' -import { DiffEditor } from "app/lib/monaco"; - export function DiffPanel() { const { loading, filePath, setFilePath, filePatch, diff } = useDiffData() @@ -28,9 +26,7 @@ export function DiffPanel() { - {/* */} - - + ) } diff --git a/packages/giterm/app/renderer/components/diff/Hunk.js b/packages/giterm/app/renderer/components/diff/Hunk.js deleted file mode 100644 index 4969d973..00000000 --- a/packages/giterm/app/renderer/components/diff/Hunk.js +++ /dev/null @@ -1,153 +0,0 @@ -import React from 'react' -import styled, { css } from 'styled-components' - -import { colours } from 'app/lib/theme' - -export const Hunk = ({ hunk, index }) => { - const { newStartLine, oldStartLine, linesLeft, linesRight } = hunk - - const rowMinNo = Math.min(oldStartLine, newStartLine) - const rowMaxNo = Math.max( - oldStartLine + linesLeft.length, - newStartLine + linesRight.length, - ) - const rowCount = rowMaxNo - rowMinNo + 1 - - const hunkHeaderRow = 1 - const hunkStartRow = 2 - const hunkEndRow = rowCount + hunkStartRow - - function getColour(line) { - const { newNumber, oldNumber } = line - - if (newNumber >= 0 && oldNumber >= 0) { - return { - leftColour: colours.BACKGROUND.FOCUS, - rightColour: colours.BACKGROUND.FOCUS, - } - } - if (newNumber >= 0) { - return { - leftColour: 'transparent', - rightColour: colours.BACKGROUND.POSITIVE, - } - } - if (oldNumber >= 0) { - return { - leftColour: colours.BACKGROUND.NEGATIVE, - rightColour: 'transparent', - } - } - } - - return ( - - - Hunk {index + 1} - - - {/* Left Content */} - - {linesLeft.map((line, lineI) => { - const row = lineI + 1 - const { content, oldNumber } = line - const { leftColour } = getColour(line) - - return ( - - - {oldNumber} - - - - {content} - - - ) - })} - - - {/* Right Content */} - - {linesRight.map((line, lineI) => { - const row = lineI + 1 - const { content, newNumber } = line - const { rightColour } = getColour(line) - - return ( - - - {newNumber} - - - - {content} - - - ) - })} - - - ) -} - -const HunkCellGrid = styled.div.attrs((props) => ({ - style: { - gridRow: props.row, - }, -}))` - display: grid; - - grid-auto-columns: 1fr 1fr; - - margin-top: 1rem; - :first-child { - margin-top: 0; - } -` - -const HunkContentColumn = styled.div.attrs((props) => ({ - style: { - gridRow: props.row, - }, -}))` - display: grid; - grid-auto-columns: min-content 1fr; - grid-auto-rows: 1.5rem; - - grid-column: ${({ col }) => col}; - - overflow: scroll; - - border-top: solid gray 1px; - border-bottom: solid gray 1px; - ${({ divider }) => - divider && - css` - border-right: solid gray 1px; - `} -` - -const Cell = styled.div.attrs((props) => ({ - style: { - gridRow: props.row, - }, -}))` - grid-column: ${({ col }) => col}; - - background-color: ${({ colour = 'transparent' }) => colour}; - - padding: 0.25rem; - - white-space: pre; -` - -const LineNumberCell = styled(Cell)` - grid-column: 1; -` -const ContentCell = styled(Cell)` - grid-column: 2; -` diff --git a/packages/giterm/app/renderer/lib/primitives/list/Label.js b/packages/giterm/app/renderer/lib/primitives/list/Label.tsx similarity index 61% rename from packages/giterm/app/renderer/lib/primitives/list/Label.js rename to packages/giterm/app/renderer/lib/primitives/list/Label.tsx index 88326617..96ee9f2f 100644 --- a/packages/giterm/app/renderer/lib/primitives/list/Label.js +++ b/packages/giterm/app/renderer/lib/primitives/list/Label.tsx @@ -1,6 +1,12 @@ import styled from 'styled-components' -export const Label = styled.div` +export interface LabelProps { + colour?: string + trimStart?: boolean + textAlign?: 'left' | 'right' | 'center' | 'justify' | 'match-parent' +} + +export const Label = styled.div` flex: 1; color: ${({ colour }) => colour || 'inherit'}; diff --git a/packages/giterm/app/renderer/lib/primitives/list/Row.js b/packages/giterm/app/renderer/lib/primitives/list/Row.tsx similarity index 84% rename from packages/giterm/app/renderer/lib/primitives/list/Row.js rename to packages/giterm/app/renderer/lib/primitives/list/Row.tsx index bc87b5c6..70cd5e3f 100644 --- a/packages/giterm/app/renderer/lib/primitives/list/Row.js +++ b/packages/giterm/app/renderer/lib/primitives/list/Row.tsx @@ -1,7 +1,11 @@ import styled from 'styled-components' import { colours } from 'app/lib/theme' -export const Row = styled.div` +export interface RowProps { + active?: boolean +} + +export const Row = styled.div` display: flex; flex-direction: row; align-items: center; diff --git a/packages/giterm/app/renderer/lib/primitives/list/index.js b/packages/giterm/app/renderer/lib/primitives/list/index.tsx similarity index 100% rename from packages/giterm/app/renderer/lib/primitives/list/index.js rename to packages/giterm/app/renderer/lib/primitives/list/index.tsx diff --git a/packages/giterm/package.json b/packages/giterm/package.json index 175405ad..1c66f988 100644 --- a/packages/giterm/package.json +++ b/packages/giterm/package.json @@ -64,7 +64,7 @@ "redux-actions": "^2.2.1", "redux-localstorage": "^0.4.1", "redux-saga": "^1.1.3", - "styled-components": "^4.4.1", + "styled-components": "^5.3.1", "tslib": "^2.3.1", "xterm": "^4.8.1", "xterm-addon-fit": "^0.4.0", @@ -83,6 +83,7 @@ "@types/react-dom": "^16.9.14", "@types/react-router": "5.1.2", "@types/react-router-redux": "^4.0.53", + "@types/styled-components": "^5.1.15", "babel-plugin-module-resolver": "^4.0.0", "browser-sync": "^2.23.6", "electron": "8.5.5", diff --git a/yarn.lock b/yarn.lock index 065bf1b7..c7e4d3fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1339,7 +1339,7 @@ "@babel/parser" "^7.15.4" "@babel/types" "^7.15.4" -"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.5", "@babel/traverse@^7.12.5", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.3", "@babel/traverse@^7.5.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.9.0": +"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.5", "@babel/traverse@^7.12.5", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.5.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.9.0": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d" integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA== @@ -1420,7 +1420,7 @@ dir-compare "^2.4.0" fs-extra "^9.0.1" -"@emotion/is-prop-valid@^0.8.1": +"@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -1432,7 +1432,12 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== -"@emotion/unitless@^0.7.0": +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.0", "@emotion/unitless@^0.7.4": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -3068,7 +3073,7 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.5.tgz#be614208f1a10a20c414b4d3762d1f2b65b53ae4" integrity sha512-TqWYI0mlqS5qhH8MHgJJs0RcgvvZLxkn0bi2qK07liZqP7M9rl1kpJ6TCAUo5Cp4vP5DObIqHcky0MWyyQojVQ== -"@types/hoist-non-react-statics@^3.3.0": +"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -3330,6 +3335,15 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== +"@types/styled-components@^5.1.15": + version "5.1.15" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.15.tgz#30855b40aa80b3b4e4c0e43a4af366e7c246d148" + integrity sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/tmp@^0.0.33": version "0.0.33" resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d" @@ -4732,7 +4746,7 @@ babel-plugin-remove-graphql-queries@^2.16.1: resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz#bacfcd87eabdfffe025072c11602a9586cd0285a" integrity sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw== -"babel-plugin-styled-components@>= 1": +"babel-plugin-styled-components@>= 1", "babel-plugin-styled-components@>= 1.12.0": version "1.13.2" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d" integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA== @@ -6752,6 +6766,15 @@ css-to-react-native@^2.2.2: css-color-keywords "^1.0.0" postcss-value-parser "^3.3.0" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22" @@ -10803,7 +10826,7 @@ hogan.js@3.0.2: mkdirp "0.3.0" nopt "1.0.10" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -19835,7 +19858,7 @@ style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-components@^4.3.2, styled-components@^4.4.1: +styled-components@^4.3.2: version "4.4.1" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2" integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g== @@ -19854,6 +19877,22 @@ styled-components@^4.3.2, styled-components@^4.4.1: stylis-rule-sheet "^0.0.10" supports-color "^5.5.0" +styled-components@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.1.tgz#8a86dcd31bff7049c2ed408bae36fa23f03f071a" + integrity sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.8" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"