Create proper animation for the group phase section
The appearance and disappearance of the group phase section will now be animated. The animation will have to be adjusted at some point, since currently the height is hardcoded. The reason for the library is, that react-bootstrap doesn't support animations anymore as of https://github.com/react-bootstrap/react-overlays/issues/146#issuecomment-282036734
This commit is contained in:
JP1998
Jonny
parent
d957ad417d
commit
b0949f28d5
|
|
@ -22,6 +22,7 @@
|
|||
"react-dom": "^16.6.1",
|
||||
"react-favicon": "^0.0.14",
|
||||
"react-notify-toast": "^0.5.0",
|
||||
"react-pose": "^4.0.8",
|
||||
"react-redux": "^5.1.1",
|
||||
"reactstrap": "^6.5.0",
|
||||
"redux": "^4.0.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Head from 'next/head';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import posed from 'react-pose';
|
||||
|
||||
import {
|
||||
Button,
|
||||
|
|
@ -88,6 +89,17 @@ function CreateTournamentCard() {
|
|||
);
|
||||
}
|
||||
|
||||
const GroupphaseFader = posed.div({
|
||||
visible: {
|
||||
opacity: 1,
|
||||
height: 150
|
||||
},
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
height: 0
|
||||
}
|
||||
});
|
||||
|
||||
class CreateTournamentForm extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -118,8 +130,7 @@ class CreateTournamentForm extends React.Component {
|
|||
<CustomInput type="checkbox" id="group-phase" label="Gruppenphase"
|
||||
checked={this.state.groupPhaseEnabled} onChange={this.handleGroupPhaseEnabledInput}/>
|
||||
</FormGroup>
|
||||
<Fade in={this.state.groupPhaseEnabled} tag="div" className="mt-3" baseClass="d-none"
|
||||
baseClassActive="d-block">
|
||||
<GroupphaseFader pose={this.state.groupPhaseEnabled? 'visible' : 'hidden'} className="groupphasefader">
|
||||
<FormGroup>
|
||||
<Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
|
||||
<Input type="number" name="teams-per-group" size="255"/>
|
||||
|
|
@ -129,7 +140,7 @@ class CreateTournamentForm extends React.Component {
|
|||
weiterkommen?</Label>
|
||||
<Input type="number" name="teams-group-to-playoff" size="255"/>
|
||||
</FormGroup>
|
||||
</Fade>
|
||||
</GroupphaseFader>
|
||||
</Form>
|
||||
<h3 className="custom-font mt-4">Teams</h3>
|
||||
<EditableStringList addButtonText="hinzufügen" placeholder="Keine Teams hinzugefügt!" entries={[]}
|
||||
|
|
|
|||
116
yarn.lock
116
yarn.lock
|
|
@ -715,6 +715,18 @@
|
|||
lodash "^4.17.11"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@emotion/is-prop-valid@^0.7.3":
|
||||
version "0.7.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
|
||||
integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==
|
||||
dependencies:
|
||||
"@emotion/memoize" "0.7.1"
|
||||
|
||||
"@emotion/memoize@0.7.1":
|
||||
version "0.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
|
||||
integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
|
||||
|
||||
"@mrmlnc/readdir-enhanced@^2.2.1":
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
|
||||
|
|
@ -728,6 +740,21 @@
|
|||
resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
|
||||
integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
|
||||
|
||||
"@popmotion/easing@^1.0.1":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@popmotion/easing/-/easing-1.0.2.tgz#17d925c45b4bf44189e5a38038d149df42d8c0b4"
|
||||
integrity sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw==
|
||||
|
||||
"@popmotion/popcorn@^0.3.6":
|
||||
version "0.3.6"
|
||||
resolved "https://registry.yarnpkg.com/@popmotion/popcorn/-/popcorn-0.3.6.tgz#eb4e3a04dd45c9516cc55b3350760ff47d7d55da"
|
||||
integrity sha512-B8Hdk4LOjCHTIiUd9KfD+9PgLR2iSe9T/X5G9IAl055KY2iAqodIEtTlO6EBpjP8tQWVfI3C4A/fEf0RqYqPPw==
|
||||
dependencies:
|
||||
"@popmotion/easing" "^1.0.1"
|
||||
framesync "^4.0.1"
|
||||
hey-listen "^1.0.5"
|
||||
style-value-types "^3.1.0"
|
||||
|
||||
"@samverschueren/stream-to-observable@^0.3.0":
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
|
||||
|
|
@ -740,6 +767,16 @@
|
|||
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
|
||||
integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
|
||||
|
||||
"@types/invariant@^2.2.29":
|
||||
version "2.2.29"
|
||||
resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.29.tgz#aa845204cd0a289f65d47e0de63a6a815e30cc66"
|
||||
integrity sha512-lRVw09gOvgviOfeUrKc/pmTiRZ7g7oDOU6OAutyuSHpm1/o2RaBQvRhgK8QEdu+FFuw/wnWb29A/iuxv9i8OpQ==
|
||||
|
||||
"@types/node@^10.0.5":
|
||||
version "10.14.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.14.4.tgz#1c586b991457cbb58fef51bc4e0cfcfa347714b5"
|
||||
integrity sha512-DT25xX/YgyPKiHFOpNuANIQIVvYEwCWXgK2jYYwqgaMrYE6+tq+DtmMwlD3drl6DJbUwtlIDnn0d7tIn/EbXBg==
|
||||
|
||||
"@webassemblyjs/ast@1.7.8":
|
||||
version "1.7.8"
|
||||
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.8.tgz#f31f480debeef957f01b623f27eabc695fa4fe8f"
|
||||
|
|
@ -3703,6 +3740,13 @@ fragment-cache@^0.2.1:
|
|||
dependencies:
|
||||
map-cache "^0.2.2"
|
||||
|
||||
framesync@^4.0.0, framesync@^4.0.1:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.0.2.tgz#b03b62852f12b0d80086b60834b089718f03cda5"
|
||||
integrity sha512-hQLD5NURHmzB4Symo6JJ5HDw2TWwhr6T3gw9aChNMsZvkxcD8U8Gcz/hllAOOMGE+HO3ScpRPahpXDQRgF19JQ==
|
||||
dependencies:
|
||||
hey-listen "^1.0.5"
|
||||
|
||||
fresh@0.5.2:
|
||||
version "0.5.2"
|
||||
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
|
||||
|
|
@ -4095,6 +4139,11 @@ hash.js@^1.0.0, hash.js@^1.0.3:
|
|||
inherits "^2.0.3"
|
||||
minimalistic-assert "^1.0.1"
|
||||
|
||||
hey-listen@^1.0.4, hey-listen@^1.0.5:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
|
||||
integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
|
||||
|
||||
hmac-drbg@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
|
||||
|
|
@ -6088,11 +6137,47 @@ pkg-dir@^3.0.0:
|
|||
dependencies:
|
||||
find-up "^3.0.0"
|
||||
|
||||
popmotion-pose@^3.4.0:
|
||||
version "3.4.7"
|
||||
resolved "https://registry.yarnpkg.com/popmotion-pose/-/popmotion-pose-3.4.7.tgz#faa55f5a61f249e7615f536529ed65989f2d031c"
|
||||
integrity sha512-mOn9fovrAiCRxANGnFyIGSYN9YArhJXbeK9Az5HBSoC3bUbhJ1heYguzboqg/jfrgEoPZ6UdUTgJsyivlYMsPg==
|
||||
dependencies:
|
||||
"@popmotion/easing" "^1.0.1"
|
||||
hey-listen "^1.0.5"
|
||||
popmotion "^8.6.2"
|
||||
pose-core "^2.1.0"
|
||||
style-value-types "^3.0.6"
|
||||
ts-essentials "^1.0.3"
|
||||
tslib "^1.9.1"
|
||||
|
||||
popmotion@^8.6.2:
|
||||
version "8.6.8"
|
||||
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-8.6.8.tgz#ccc1eaf1613f0611ba6b48d8171c25a518a1e917"
|
||||
integrity sha512-BRzdgEHLqicl18RH2+gev/gVAQsU6OJD2eXii+J8Jabvw//fTNdkKIi+o8YM1cFU2QH+bnAAr0PEC3eiXMPJ1w==
|
||||
dependencies:
|
||||
"@popmotion/easing" "^1.0.1"
|
||||
"@popmotion/popcorn" "^0.3.6"
|
||||
framesync "^4.0.0"
|
||||
hey-listen "^1.0.5"
|
||||
style-value-types "^3.1.0"
|
||||
stylefire "2.4.3"
|
||||
tslib "^1.9.1"
|
||||
|
||||
popper.js@^1.14.1:
|
||||
version "1.14.7"
|
||||
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
|
||||
integrity sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==
|
||||
|
||||
pose-core@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/pose-core/-/pose-core-2.1.0.tgz#653c85a9a06f924611b909b4a2180ce102bbb258"
|
||||
integrity sha512-36mVAnIgbM6jfyRug8EqqFbazHUAk9dxwVRpX61FlVw3amI/j7AFegtVU56N0Dht2aYDJIhgYPUYraT1CzjHDw==
|
||||
dependencies:
|
||||
"@types/invariant" "^2.2.29"
|
||||
"@types/node" "^10.0.5"
|
||||
hey-listen "^1.0.5"
|
||||
tslib "^1.9.1"
|
||||
|
||||
posix-character-classes@^0.1.0:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
|
||||
|
|
@ -6462,6 +6547,16 @@ react-popper@^0.10.4:
|
|||
popper.js "^1.14.1"
|
||||
prop-types "^15.6.1"
|
||||
|
||||
react-pose@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.yarnpkg.com/react-pose/-/react-pose-4.0.8.tgz#91bdfafde60e4096e7878a35dcc77715bed68f24"
|
||||
integrity sha512-WN/583nKJZkKmKg5ha+eErOGWF9GV6A5EngC7WHQX5b910X9rTlOlxzdKlUy/dDcsTRMZEtHV0Sy2gLPYsVQCQ==
|
||||
dependencies:
|
||||
"@emotion/is-prop-valid" "^0.7.3"
|
||||
hey-listen "^1.0.5"
|
||||
popmotion-pose "^3.4.0"
|
||||
tslib "^1.9.1"
|
||||
|
||||
react-redux@^5.1.1:
|
||||
version "5.1.1"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.1.tgz#88e368682c7fa80e34e055cd7ac56f5936b0f52f"
|
||||
|
|
@ -7456,6 +7551,11 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
|
|||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
||||
integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
|
||||
|
||||
style-value-types@^3.0.6, style-value-types@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.0.tgz#07e06090e7581adff4c7955d544c1029d0663795"
|
||||
integrity sha512-7eaMZ8RKWIQUKHPQK7qv3zLYmvZNb2pCmO4WguXdVFymd2Qj9xqSUoo7LQ8Wd8eiLuoSd+uqzsvcodyvD8nn6Q==
|
||||
|
||||
styled-jsx@3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.1.0.tgz#c295e4170298b5bb858f848c4b73e423a73a68f3"
|
||||
|
|
@ -7470,6 +7570,15 @@ styled-jsx@3.1.0:
|
|||
stylis "3.5.3"
|
||||
stylis-rule-sheet "0.0.10"
|
||||
|
||||
stylefire@2.4.3:
|
||||
version "2.4.3"
|
||||
resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-2.4.3.tgz#1b39847251000bda86ebf82fa2bb4be7dafe6bc4"
|
||||
integrity sha512-8rckFzuDlVWSyrkmnyTg8avadQavk2t6YkFKUUocsXoj/8NScOjb+/avbB4nrmoPtzD0kN7IyuhKq8jimIBTBQ==
|
||||
dependencies:
|
||||
framesync "^4.0.0"
|
||||
hey-listen "^1.0.4"
|
||||
style-value-types "^3.0.6"
|
||||
|
||||
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"
|
||||
|
|
@ -7676,7 +7785,12 @@ trim-right@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
|
||||
integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
|
||||
|
||||
tslib@^1.9.0:
|
||||
ts-essentials@^1.0.3:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-1.0.4.tgz#ce3b5dade5f5d97cf69889c11bf7d2da8555b15a"
|
||||
integrity sha512-q3N1xS4vZpRouhYHDPwO0bDW3EZ6SK9CrrDHxi/D6BPReSjpVgWIOpLS2o0gSBZm+7q/wyKp6RVM1AeeW7uyfQ==
|
||||
|
||||
tslib@^1.9.0, tslib@^1.9.1:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
|
||||
integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
|
||||
|
|
|
|||
Loading…
Reference in New Issue