Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 06:55:47 +01:00
Code Issues Packages Projects Releases Activity

use styled-components for scm-git-plugin instead of react-jss

Browse Source
This commit is contained in:
Sebastian Sdorra
2019-10-08 08:15:37 +02:00
parent 6e99182b4e
commit 03b10b8c5f
5 changed files with 113 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.js
View File

@@ -4,18 +4,17 @@ import { ButtonAddons, Button } from "@scm-manager/ui-components";
import type { Repository } from "@scm-manager/ui-types";
import CloneInformation from "./CloneInformation";
import type { Link } from "@scm-manager/ui-types";
import injectSheets from "react-jss";
import styled from "styled-components";
const styles = {
protocols: {
position: "relative"
},
switcher: {
position: "absolute",
top: 0,
right: 0
}
};
const Wrapper = styled.div`
position: relative;
`;
const Switcher = styled(ButtonAddons)`
position: absolute;
top: 0;
right: 0;
`;
type Props = {
repository: Repository,
@@ -76,7 +75,7 @@ class ProtocolInformation extends React.Component<Props, State> {
};
render() {
const { repository, classes } = this.props;
const { repository } = this.props;
const protocols = repository._links["protocol"];
if (!protocols || protocols.length === 0) {
@@ -94,15 +93,15 @@ class ProtocolInformation extends React.Component<Props, State> {
}
return (
<div className={classes.protocols}>
<ButtonAddons className={classes.switcher}>
<Wrapper>
<Switcher>
{protocols.map(this.renderProtocolButton)}
</ButtonAddons>
</Switcher>
{ cloneInformation }
</div>
</Wrapper>
);
}
}
export default injectSheets(styles)(ProtocolInformation);
export default ProtocolInformation;

2
scm-plugins/scm-git-plugin/webpack.config.js
View File

@@ -14,8 +14,8 @@ module.exports = {
externals: [
"react",
"react-dom",
// "react-jss",
"react-i18next",
"styled-components",
"@scm-manager/ui-types",
"@scm-manager/ui-extensions",
"@scm-manager/ui-components"

1
scm-ui/ui-webapp/package.json
View File

@@ -43,6 +43,7 @@
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"styled-components": "^4.4.0",
"whatwg-fetch": "^3.0.0"
},
"scripts": {

19
scm-ui/ui-webapp/src/containers/loadBundle.js
View File

@@ -4,8 +4,8 @@ import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactRouterDom from "react-router-dom";
import * as ReactRedux from "react-redux";
import {default as injectSheets } from "react-jss";
import * as ReactJSS from "react-jss";
import SytleComponentsDefault from "styled-components";
import * as SytleComponents from "styled-components";
import * as ReactI18Next from "react-i18next";
import * as ClassNames from "classnames";
import * as UIExtensions from "@scm-manager/ui-extensions";
@@ -30,14 +30,23 @@ SystemJS.config({
}
});
const expose = (name, cmp) => {
SystemJS.set(name, SystemJS.newModule(cmp));
const expose = (name, cmp, defaultCmp) => {
let mod = cmp;
if (defaultCmp) {
// SystemJS default export:
// https://github.com/systemjs/systemjs/issues/1749
mod = {
...cmp,
__useDefault: defaultCmp
};
}
SystemJS.set(name, SystemJS.newModule(mod));
};
expose("react", React);
expose("react-dom", ReactDOM);
expose("react-router-dom", ReactRouterDom);
expose("react-jss", {...ReactJSS, default: injectSheets});
expose("styled-components", SytleComponents, SytleComponentsDefault);
expose("react-redux", ReactRedux);
expose("react-i18next", ReactI18Next);
expose("classnames", ClassNames);

85
yarn.lock
View File

@@ -729,7 +729,7 @@
"@babel/parser" "^7.6.0"
"@babel/types" "^7.6.0"
"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5", "@babel/traverse@^7.6.2":
"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5", "@babel/traverse@^7.6.2":
version "7.6.2"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.2.tgz#b0e2bfd401d339ce0e6c05690206d1e11502ce2c"
integrity sha512-8fRE76xNwNttVEF2TwxJDGBLWthUkHWSldmfuBzVRmEDWOtu4XdINTgN7TDWzuLg4bbeIMLvfMFD9we5YcWkRQ==
@@ -770,6 +770,18 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
"@emotion/is-prop-valid@^0.8.1":
version "0.8.3"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz#cbe62ddbea08aa022cdf72da3971570a33190d29"
integrity sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig==
dependencies:
"@emotion/memoize" "0.7.3"
"@emotion/memoize@0.7.3":
version "0.7.3"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==
"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
version "0.6.6"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
@@ -795,6 +807,11 @@
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==
"@emotion/unitless@^0.7.0":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
"@emotion/utils@^0.8.2":
version "0.8.2"
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
@@ -1508,6 +1525,16 @@ babel-plugin-macros@^2.0.0:
cosmiconfig "^5.2.0"
resolve "^1.10.0"
"babel-plugin-styled-components@>= 1":
version "1.10.6"
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==
dependencies:
"@babel/helper-annotate-as-pure" "^7.0.0"
"@babel/helper-module-imports" "^7.0.0"
babel-plugin-syntax-jsx "^6.18.0"
lodash "^4.17.11"
babel-plugin-syntax-jsx@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -2039,6 +2066,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
camelize@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
caniuse-lite@^1.0.30000989:
version "1.0.30000998"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000998.tgz#7227a8046841e7d01e156ae7227a504d065f6744"
@@ -2553,6 +2585,11 @@ crypto-browserify@^3.11.0:
randombytes "^2.0.0"
randomfill "^1.0.3"
css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
css-loader@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.2.0.tgz#bb570d89c194f763627fcf1f80059c6832d009b2"
@@ -2581,6 +2618,15 @@ css-select@~1.2.0:
domutils "1.5.1"
nth-check "~1.0.1"
css-to-react-native@^2.2.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
dependencies:
camelize "^1.0.0"
css-color-keywords "^1.0.0"
postcss-value-parser "^3.3.0"
css-vendor@^0.3.8:
version "0.3.8"
resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa"
@@ -4919,6 +4965,11 @@ is-utf8@^0.2.0:
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
is-what@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.3.1.tgz#79502181f40226e2d8c09226999db90ef7c1bcbe"
integrity sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA==
is-whitespace-character@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz#b3ad9546d916d7d3ffa78204bca0c26b56257fac"
@@ -5995,6 +6046,13 @@ meow@^3.7.0:
redent "^1.0.0"
trim-newlines "^1.0.0"
merge-anything@^2.2.4:
version "2.4.1"
resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.1.tgz#e9bccaec1e49ec6cb5f77ca78c5770d1a35315e6"
integrity sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==
dependencies:
is-what "^3.3.1"
merge-descriptors@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -7233,7 +7291,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss-value-parser@^3.2.3:
postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
version "3.3.1"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -7333,7 +7391,7 @@ prop-types-exact@^1.2.0:
object.assign "^4.1.0"
reflect.ownkeys "^0.2.0"
prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8881,6 +8939,25 @@ style-loader@^1.0.0:
loader-utils "^1.2.3"
schema-utils "^2.0.1"
styled-components@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.0.tgz#4e381e2dab831d0e6ea431c2840a96323e84e21b"
integrity sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@babel/traverse" "^7.0.0"
"@emotion/is-prop-valid" "^0.8.1"
"@emotion/unitless" "^0.7.0"
babel-plugin-styled-components ">= 1"
css-to-react-native "^2.2.2"
memoize-one "^5.0.0"
merge-anything "^2.2.4"
prop-types "^15.5.4"
react-is "^16.6.0"
stylis "^3.5.0"
stylis-rule-sheet "^0.0.10"
supports-color "^5.5.0"
stylis-rule-sheet@^0.0.10:
version "0.0.10"
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
@@ -8910,7 +8987,7 @@ supports-color@^3.1.2:
dependencies:
has-flag "^1.0.0"
supports-color@^5.3.0, supports-color@^5.4.0:
supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==