Switch from ReactJSS to styled-components in ui-webapp

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));

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);

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);