Switch from ReactJSS to styled-components in ui-webapp

2025-11-10 15:35:49 +01:00 · 2019-10-09 16:17:02 +02:00
parent 01ef497d07
commit 004b6e5340
23 changed files with 544 additions and 675 deletions
--- a/scm-ui/ui-webapp/src/repos/sources/components/FileTree.js
+++ b/scm-ui/ui-webapp/src/repos/sources/components/FileTree.js
@@ -1,9 +1,11 @@
 //@flow
 import React from "react";
-import { translate } from "react-i18next";
+import { compose } from "redux";
 import { connect } from "react-redux";
-import injectSheet from "react-jss";
-import FileTreeLeaf from "./FileTreeLeaf";
+import { withRouter } from "react-router-dom";
+import { translate } from "react-i18next";
+import styled from "styled-components";
+import { binder } from "@scm-manager/ui-extensions";
 import type { Repository, File } from "@scm-manager/ui-types";
 import {
  ErrorNotification,
@@ -15,15 +17,7 @@ import {
  isFetchSourcesPending,
  getSources
 } from "../modules/sources";
-import { withRouter } from "react-router-dom";
-import { compose } from "redux";
-import { binder } from "@scm-manager/ui-extensions";
-
-const styles = {
-  iconColumn: {
-    width: "16px"
-  }
-};
+import FileTreeLeaf from "./FileTreeLeaf";

 type Props = {
  loading: boolean,
@@ -33,12 +27,16 @@ type Props = {
  revision: string,
  path: string,
  baseUrl: string,
+
  // context props
-  classes: any,
  t: string => string,
  match: any
 };

+const FixedWidthTh = styled.th`
+  width: 16px;
+`;
+
 export function findParent(path: string) {
  if (path.endsWith("/")) {
    path = path.substring(0, path.length - 1);
@@ -70,7 +68,7 @@ class FileTree extends React.Component<Props> {
  }

  renderSourcesTable() {
-    const { tree, revision, path, baseUrl, classes, t } = this.props;
+    const { tree, revision, path, baseUrl, t } = this.props;

    const files = [];

@@ -114,7 +112,7 @@ class FileTree extends React.Component<Props> {
        <table className="table table-hover table-sm is-fullwidth">
          <thead>
            <tr>
-              <th className={classes.iconColumn} />
+              <FixedWidthTh />
              <th>{t("sources.file-tree.name")}</th>
              <th className="is-hidden-mobile">
                {t("sources.file-tree.length")}
@@ -165,4 +163,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 export default compose(
  withRouter,
  connect(mapStateToProps)
-)(injectSheet(styles)(translate("repos")(FileTree)));
+)(translate("repos")(FileTree));
--- a/scm-ui/ui-webapp/src/repos/sources/components/FileTreeLeaf.js
+++ b/scm-ui/ui-webapp/src/repos/sources/components/FileTreeLeaf.js
@@ -1,30 +1,22 @@
 //@flow
 import * as React from "react";
-import injectSheet from "react-jss";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import styled from "styled-components";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+import type { File } from "@scm-manager/ui-types";
 import { DateFromNow, FileSize } from "@scm-manager/ui-components";
 import FileIcon from "./FileIcon";
-import { Link } from "react-router-dom";
-import type { File } from "@scm-manager/ui-types";
-import classNames from "classnames";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
-
-const styles = {
-  iconColumn: {
-    width: "16px"
-  },
-  wordBreakMinWidth: {
-    minWidth: "10em"
-  }
-};

 type Props = {
  file: File,
-  baseUrl: string,
-
-  // context props
-  classes: any
+  baseUrl: string
 };

+const MinWidthTd = styled.td`
+  min-width: 10em;
+`;
+
 export function createLink(base: string, file: File) {
  let link = base;
  if (file.path) {
@@ -40,7 +32,7 @@ export function createLink(base: string, file: File) {
  return link;
 }

-class FileTreeLeaf extends React.Component<Props> {
+export default class FileTreeLeaf extends React.Component<Props> {
  createLink = (file: File) => {
    return createLink(this.props.baseUrl, file);
  };
@@ -68,29 +60,23 @@ class FileTreeLeaf extends React.Component<Props> {
  };

  render() {
-    const { file, classes } = this.props;
+    const { file } = this.props;

    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;

    return (
      <tr>
-        <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
-        <td className={classNames(classes.wordBreakMinWidth, "is-word-break")}>
+        <td>{this.createFileIcon(file)}</td>
+        <MinWidthTd className="is-word-break">
          {this.createFileName(file)}
-        </td>
+        </MinWidthTd>
        <td className="is-hidden-mobile">{fileSize}</td>
        <td className="is-hidden-mobile">
          <DateFromNow date={file.lastModified} />
        </td>
-        <td
-          className={classNames(
-            classes.wordBreakMinWidth,
-            "is-word-break",
-            "is-hidden-mobile"
-          )}
-        >
+        <MinWidthTd className={classNames("is-word-break", "is-hidden-mobile")}>
          {file.description}
-        </td>
+        </MinWidthTd>
        {binder.hasExtension("repos.sources.tree.row.right") && (
          <td className="is-hidden-mobile">
            {!file.directory && (
@@ -106,5 +92,3 @@ class FileTreeLeaf extends React.Component<Props> {
    );
  }
 }
-
-export default injectSheet(styles)(FileTreeLeaf);
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.js
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.js
@@ -4,12 +4,13 @@ import { translate } from "react-i18next";
 import { ButtonAddons, Button } from "@scm-manager/ui-components";

 type Props = {
+  className?: string,
  t: string => string,
  historyIsSelected: boolean,
  showHistory: boolean => void
 };

-class FileButtonGroup extends React.Component<Props> {
+class FileButtonAddons extends React.Component<Props> {
  showHistory = () => {
    this.props.showHistory(true);
  };
@@ -23,10 +24,10 @@ class FileButtonGroup extends React.Component<Props> {
  };

  render() {
-    const { t, historyIsSelected } = this.props;
+    const { className, t, historyIsSelected } = this.props;

    return (
-      <ButtonAddons>
+      <ButtonAddons className={className}>
        <div title={t("sources.content.sourcesButton")}>
          <Button
            action={this.showSources}
@@ -54,4 +55,4 @@ class FileButtonGroup extends React.Component<Props> {
  }
 }

-export default translate("repos")(FileButtonGroup);
+export default translate("repos")(FileButtonAddons);
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.js
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.js
@@ -1,21 +1,21 @@
 // @flow
 import React from "react";
+import { connect } from "react-redux";
 import { translate } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import type { File, Repository } from "@scm-manager/ui-types";
 import {
  DateFromNow,
-  ButtonGroup,
  FileSize,
-  ErrorNotification
+  ErrorNotification,
+  Icon
 } from "@scm-manager/ui-components";
-import injectSheet from "react-jss";
-import classNames from "classnames";
-import FileButtonGroup from "../components/content/FileButtonGroup";
+import { getSources } from "../modules/sources";
+import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
-import { getSources } from "../modules/sources";
-import { connect } from "react-redux";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";

 type Props = {
  loading: boolean,
@@ -23,7 +23,8 @@ type Props = {
  repository: Repository,
  revision: string,
  path: string,
-  classes: any,
+
+  // context props
  t: string => string
 };

@@ -33,21 +34,25 @@ type State = {
  errorFromExtension?: Error
 };

-const styles = {
-  pointer: {
-    cursor: "pointer"
-  },
-  marginInHeader: {
-    marginRight: "0.5em"
-  },
-  isVerticalCenter: {
-    display: "flex",
-    alignItems: "center"
-  },
-  hasBackground: {
-    backgroundColor: "#FBFBFB"
-  }
-};
+const VCenteredChild = styled.article`
+  align-items: center;
+`;
+
+const RightMarginIcon = styled(Icon)`
+  margin-right: 0.5em;
+`;
+
+const RightMarginFileButtonAddons = styled(FileButtonAddons)`
+  margin-right: 0.5em;
+`;
+
+const LighterGreyBackgroundPanelBlock = styled.div`
+  background-color: #fbfbfb;
+`;
+
+const LighterGreyBackgroundTable = styled.table`
+  background-color: #fbfbfb;
+`;

 class Content extends React.Component<Props, State> {
  constructor(props: Props) {
@@ -77,12 +82,12 @@ class Content extends React.Component<Props, State> {
  };

  showHeader() {
-    const { file, revision, classes } = this.props;
+    const { file, revision } = this.props;
    const { showHistory, collapsed } = this.state;
-    const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
+    const icon = collapsed ? "angle-right" : "angle-down";

    const selector = file._links.history ? (
-      <FileButtonGroup
+      <RightMarginFileButtonAddons
        file={file}
        historyIsSelected={showHistory}
        showHistory={(changeShowHistory: boolean) =>
@@ -92,20 +97,14 @@ class Content extends React.Component<Props, State> {
    ) : null;

    return (
-      <span className={classes.pointer}>
-        <article className={classNames("media", classes.isVerticalCenter)}>
+      <span className="has-cursor-pointer">
+        <VCenteredChild className={classNames("media", "is-flex")}>
          <div className="media-content" onClick={this.toggleCollapse}>
-            <i
-              className={classNames(
-                "fa is-medium",
-                icon,
-                classes.marginInHeader
-              )}
-            />
+            <RightMarginIcon name={icon} color="inherit" />
            <span className="is-word-break">{file.name}</span>
          </div>
          <div className="buttons is-grouped">
-            <div className={classes.marginInHeader}>{selector}</div>
+            {selector}
            <ExtensionPoint
              name="repos.sources.content.actionbar"
              props={{
@@ -116,14 +115,14 @@ class Content extends React.Component<Props, State> {
              renderAll={true}
            />
          </div>
-        </article>
+        </VCenteredChild>
      </span>
    );
  }

  showMoreInformation() {
    const collapsed = this.state.collapsed;
-    const { classes, file, revision, t, repository } = this.props;
+    const { file, revision, t, repository } = this.props;
    const date = <DateFromNow date={file.lastModified} />;
    const description = file.description ? (
      <p>
@@ -140,8 +139,8 @@ class Content extends React.Component<Props, State> {
    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
    if (!collapsed) {
      return (
-        <div className={classNames("panel-block", classes.hasBackground)}>
-          <table className={classNames("table", classes.hasBackground)}>
+        <LighterGreyBackgroundPanelBlock className="panel-block">
+          <LighterGreyBackgroundTable className="table">
            <tbody>
              <tr>
                <td>{t("sources.content.path")}</td>
@@ -169,8 +168,8 @@ class Content extends React.Component<Props, State> {
                props={{ file, repository, revision }}
              />
            </tbody>
-          </table>
-        </div>
+          </LighterGreyBackgroundTable>
+        </LighterGreyBackgroundPanelBlock>
      );
    }
    return null;
@@ -217,6 +216,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
  };
 };

-export default injectSheet(styles)(
-  connect(mapStateToProps)(translate("repos")(Content))
-);
+export default connect(mapStateToProps)(translate("repos")(Content));
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Sources.js
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Sources.js
@@ -116,7 +116,6 @@ class Sources extends React.Component<Props, State> {
    const {
      repository,
      baseUrl,
-      branches,
      loading,
      error,
      revision,
@@ -124,8 +123,6 @@ class Sources extends React.Component<Props, State> {
      currentFileIsDirectory
    } = this.props;

-    const { selectedBranch } = this.state;
-
    if (error) {
      return <ErrorNotification error={error} />;
    }
@@ -138,17 +135,7 @@ class Sources extends React.Component<Props, State> {
      return (
        <div className="panel">
          {this.renderBranchSelector()}
-          <Breadcrumb
-            revision={encodeURIComponent(revision)}
-            path={path}
-            baseUrl={baseUrl}
-            branch={selectedBranch}
-            defaultBranch={
-              branches && branches.filter(b => b.defaultBranch === true)[0]
-            }
-            branches={branches && branches}
-            repository={repository}
-          />
+          {this.renderBreadcrumb()}
          <FileTree
            repository={repository}
            revision={revision}
@@ -183,6 +170,28 @@ class Sources extends React.Component<Props, State> {
    }
    return null;
  };
+
+  renderBreadcrumb = () => {
+    const { revision, path, baseUrl, branches, repository } = this.props;
+    const { selectedBranch } = this.state;
+
+    if (revision) {
+      return (
+        <Breadcrumb
+          revision={encodeURIComponent(revision)}
+          path={path}
+          baseUrl={baseUrl}
+          branch={selectedBranch}
+          defaultBranch={
+            branches && branches.filter(b => b.defaultBranch === true)[0]
+          }
+          branches={branches && branches}
+          repository={repository}
+        />
+      );
+    }
+    return null;
+  };
 }

 const mapStateToProps = (state, ownProps) => {