@scm-manager/ui-components 3.6.1 → 3.7.0

package/src/forms/Select.tsx

@@ -95,7 +95,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
     if (!value && field.current?.value) {
       if (props.onChange) {
         if (isUsingRef<BaseProps, HTMLSelectElement, string>(props)) {
-          const event = new Event("change");
+          const event: Event = new CustomEvent("change", { bubbles: true, detail: { target: field } });
           field.current?.dispatchEvent(event);
         } else if (isLegacy(props)) {
           props.onChange(field.current?.value, name);

package/src/layout/Page.tsx

@@ -14,20 +14,19 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ReactNode } from "react";
+import React, { FC, ReactNode } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 import Loading from "./../Loading";
 import ErrorNotification from "./../ErrorNotification";
+import ErrorBoundary from "../ErrorBoundary";
 import Title from "./Title";
 import Subtitle from "./Subtitle";
 import PageActions from "./PageActions";
-import ErrorBoundary from "../ErrorBoundary";
 
 type Props = {
   title?: ReactNode;
-  // Use the documentTitle to set the document title (browser title) whenever you want to set one
-  // and use something different than a string for the title property.
+  // [DEPRECATED] Use useDocumentTitle hook inside the component instead.
   documentTitle?: string;
   afterTitle?: ReactNode;
   subtitle?: ReactNode;
@@ -44,43 +43,19 @@ const PageActionContainer = styled.div`
   }
 `;
 
-export default class Page extends React.Component<Props> {
-  componentDidUpdate() {
-    const textualTitle = this.getTextualTitle();
-    if (textualTitle && textualTitle !== document.title) {
-      document.title = textualTitle;
-    }
-  }
-
-  render() {
-    const { error } = this.props;
-    return (
-      <section className="section">
-        <div className="container">
-          {this.renderPageHeader()}
-          <ErrorBoundary>
-            <ErrorNotification error={error} />
-            {this.renderContent()}
-          </ErrorBoundary>
-        </div>
-      </section>
-    );
-  }
-
-  isPageAction(node: any) {
+const Page: FC<Props> = ({ title, afterTitle, subtitle, loading, error, showContentOnError, children }) => {
+  const isPageAction = (node: any) => {
     return (
       node.displayName === PageActions.displayName || (node.type && node.type.displayName === PageActions.displayName)
     );
-  }
-
-  renderPageHeader() {
-    const { error, afterTitle, title, subtitle, children } = this.props;
+  };
 
+  const renderPageHeader = () => {
     let pageActions = null;
     let pageActionsExists = false;
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child && !error) {
-        if (this.isPageAction(child)) {
+        if (isPageAction(child)) {
           pageActions = (
             <PageActionContainer
               className={classNames(
@@ -99,6 +74,7 @@ export default class Page extends React.Component<Props> {
         }
       }
     });
+
     const underline = pageActionsExists ? <hr className="header-with-actions" /> : null;
 
     if (title || subtitle) {
@@ -107,9 +83,7 @@ export default class Page extends React.Component<Props> {
           <div className="columns">
             <div className="column">
               <div className="is-flex is-flex-wrap-wrap is-align-items-center">
-                <Title className="mb-0 mr-2" title={this.getTextualTitle()}>
-                  {this.getTitleComponent()}
-                </Title>
+                <Title className="mb-0 mr-2">{title}</Title>
                 {afterTitle}
               </div>
               {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
@@ -121,11 +95,9 @@ export default class Page extends React.Component<Props> {
       );
     }
     return null;
-  }
-
-  renderContent() {
-    const { loading, children, showContentOnError, error } = this.props;
+  };
 
+  const renderContent = () => {
     if (error && !showContentOnError) {
       return null;
     }
@@ -134,33 +106,27 @@ export default class Page extends React.Component<Props> {
     }
 
     const content: ReactNode[] = [];
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child) {
-        if (!this.isPageAction(child)) {
+        if (!isPageAction(child)) {
           content.push(child);
         }
       }
     });
     return content;
-  }
-
-  getTextualTitle: () => string | undefined = () => {
-    const { title, documentTitle } = this.props;
-    if (documentTitle) {
-      return documentTitle;
-    } else if (typeof title === "string") {
-      return title;
-    } else {
-      return undefined;
-    }
   };
 
-  getTitleComponent = () => {
-    const { title } = this.props;
-    if (title && typeof title !== "string") {
-      return title;
-    } else {
-      return undefined;
-    }
-  };
-}
+  return (
+    <section className="section">
+      <div className="container">
+        {renderPageHeader()}
+        <ErrorBoundary>
+          <ErrorNotification error={error} />
+          {renderContent()}
+        </ErrorBoundary>
+      </div>
+    </section>
+  );
+};
+
+export default Page;

package/src/layout/Title.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useEffect } from "react";
+import React, { FC } from "react";
 import classNames from "classnames";
 
 type Props = {
@@ -28,17 +28,7 @@ type Props = {
  * @deprecated Please import the identical module from "@scm-manager/ui-core"
  */
 
-const Title: FC<Props> = ({ title, preventRefreshingPageTitle, customPageTitle, className, children }) => {
-  useEffect(() => {
-    if (!preventRefreshingPageTitle) {
-      if (customPageTitle) {
-        document.title = customPageTitle;
-      } else if (title) {
-        document.title = title;
-      }
-    }
-  }, [title, preventRefreshingPageTitle, customPageTitle]);
-
+const Title: FC<Props> = ({ title, className, children }) => {
   if (children) {
     return <h1 className={classNames("title", className)}>{children}</h1>;
   } else if (title) {

package/src/repos/DiffDropDown.tsx

@@ -65,7 +65,7 @@ const DiffDropDown: FC<DiffDropDownProps> = ({
   };
 
   return (
-    <div className={"dropdown" + (isOpen ? " is-active" : "")}>
+    <div className={"dropdown is-right " + (isOpen ? " is-active" : "")}>
       <div className="dropdown-trigger">
         <button onClick={handleOpen} className="button" aria-haspopup="true" aria-controls="dropdown-menu2">
           <span className="icon is-small">

package/src/repos/HunkExpandDivider.tsx

@@ -21,6 +21,9 @@ import styled from "styled-components";
 
 const HunkDivider = styled.div`
   background: #98d8f3;
+  @media screen and (max-width: 768px) {
+    padding-left: 0px !important;
+  } ;
 `;
 
 const HunkExpandDivider: FC = ({ children }) => {

package/src/repos/HunkExpandLink.tsx

@@ -16,7 +16,7 @@
 
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
-import classNames from "classnames";
+import { Icon } from "@scm-manager/ui-core";
 
 type Props = {
   icon: string;
@@ -37,9 +37,13 @@ const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
   };
 
   return (
-    <span className="is-clickable" onClick={onClickWithLoadingMarker}>
-      <i className={classNames("fa", icon)} /> {loading ? t("diff.expanding") : text}
-    </span>
+    <button
+      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
+      onClick={onClickWithLoadingMarker}
+    >
+      <Icon>{icon}</Icon>
+      {loading ? t("diff.expanding") : text}
+    </button>
   );
 };
 

package/src/repos/changesets/ContributorRow.tsx

@@ -25,7 +25,7 @@ const ContributorRow: FC<{ label: string }> = ({ label, children }) => {
   return (
     <tr key={label}>
       <SizedTd>{label}:</SizedTd>
-      <td className="is-ellipsis-overflow m-0">{children}</td>
+      <td className="is-word-break m-0">{children}</td>
     </tr>
   );
 };

package/src/repos/diff/HunkFooter.tsx

@@ -37,7 +37,7 @@ const HunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
       return (
         <HunkExpandDivider>
           <HunkExpandLink
-            icon={"fa-angle-double-down"}
+            icon={"angle-double-down"}
             onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
             text={t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
           />
@@ -47,12 +47,12 @@ const HunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
       return (
         <HunkExpandDivider>
           <HunkExpandLink
-            icon={"fa-angle-down"}
+            icon={"angle-down"}
             onClick={expandBottom(expandableHunk, 10)}
             text={t("diff.expandByLines", { count: 10 })}
           />{" "}
           <HunkExpandLink
-            icon={"fa-angle-double-down"}
+            icon={"angle-double-down"}
             onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
             text={t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
           />

package/src/repos/diff/HunkHeader.tsx

@@ -37,10 +37,9 @@ const HunkHeader: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
       return (
         <HunkExpandDivider>
           <HunkExpandLink
-            icon={"fa-angle-double-up"}
+            icon={"angle-double-up"}
             onClick={expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
-            text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })
-            }
+            text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
           />
         </HunkExpandDivider>
       );
@@ -48,12 +47,12 @@ const HunkHeader: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
       return (
         <HunkExpandDivider>
           <HunkExpandLink
-            icon={"fa-angle-up"}
+            icon={"angle-up"}
             onClick={expandHead(expandableHunk, 10)}
             text={t("diff.expandByLines", { count: 10 })}
           />{" "}
           <HunkExpandLink
-            icon={"fa-angle-double-up"}
+            icon={"angle-double-up"}
             onClick={expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
             text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
           />

package/src/repos/diff/LastHunkFooter.tsx

@@ -36,12 +36,12 @@ const LastHunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansion
     return (
       <HunkExpandDivider>
         <HunkExpandLink
-          icon={"fa-angle-down"}
+          icon={"angle-down"}
           onClick={expandBottom(expandableHunk, 10)}
           text={t("diff.expandLastBottomByLines", { count: 10 })}
         />{" "}
         <HunkExpandLink
-          icon={"fa-angle-double-down"}
+          icon={"angle-double-down"}
           onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
           text={t("diff.expandLastBottomComplete")}
         />