restructure annotate components

scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx

@@ -0,0 +1,145 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC, Dispatch, useRef } from "react";
+import styled from "styled-components";
+import AuthorImage from "./AuthorImage";
+import DateShort from "../../DateShort";
+import { Action } from "./actions";
+import { AnnotatedLine } from "@scm-manager/ui-types";
+
+const LineElement = styled.div`
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  vertical-align: top;
+`;
+
+const Author = styled(LineElement)`
+  width: 8em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const When = styled(LineElement)`
+  display: inline-block;
+
+  width: 6.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  margin: 0 0.5em;
+`;
+
+const LineNumber = styled(LineElement)`
+  width: 3em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  border-left: 1px solid lightgrey;
+  border-right: 1px solid lightgrey;
+
+  text-align: right;
+
+  padding: 0 0.5em;
+`;
+
+const Line = styled.div`
+  margin: 0;
+  padding: 0;
+  height: 1.5em;
+  vertical-align: top;
+`;
+
+const Metadata = styled(LineElement)`
+  cursor: help;
+`;
+
+const EmptyMetadata = styled(LineElement)`
+  width: 16.7em;
+`;
+
+const dispatchDeferred = (dispatch: Dispatch<Action>, action: Action) => {
+  setTimeout(() => dispatch(action), 250);
+};
+
+type Props = {
+  annotation: AnnotatedLine;
+  showAnnotation: boolean;
+  nr: number;
+  dispatch: Dispatch<Action>;
+};
+
+const AnnotateLine: FC<Props> = ({ annotation, showAnnotation, dispatch, nr, children }) => {
+  const link = useRef<HTMLDivElement>(null);
+
+  const onMouseEnter = () => {
+    if (showAnnotation) {
+      dispatchDeferred(dispatch, {
+        annotation,
+        line: nr,
+        offset: link.current!.offsetTop,
+        type: "enter-line"
+      });
+    }
+  };
+
+  const OnMouseLeave = () => {
+    if (showAnnotation) {
+      dispatchDeferred(dispatch, {
+        line: nr,
+        type: "leave-line"
+      });
+    }
+  };
+
+  if (!showAnnotation) {
+    return (
+      <Line>
+        <EmptyMetadata />
+        <LineNumber>{nr}</LineNumber> <LineElement>{children}</LineElement>
+      </Line>
+    );
+  }
+
+  return (
+    <Line>
+      <Metadata className="has-text-info" onMouseOver={onMouseEnter} onMouseOut={OnMouseLeave} ref={link}>
+        <Author>
+          <AuthorImage person={annotation.author} />
+          {annotation.author.name}
+        </Author>{" "}
+        <When>
+          <DateShort value={annotation.when} />
+        </When>{" "}
+      </Metadata>
+      <LineNumber>{nr}</LineNumber> <LineElement>{children}</LineElement>
+    </Line>
+  );
+};
+
+export default AnnotateLine;