🎨 ajoute la possibilité de déplier les informations dans la vue mobile

- Utilise la dernière version de react avec les hooks
2019-01-17 19:20:30 +01:00 · 2019-01-17 19:20:30 +01:00 · e0b105a41e
parent 5330532d5d
commit e0b105a41e
6 changed files with 160 additions and 87 deletions
--- a/package.json
+++ b/package.json
@ -32,14 +32,13 @@
 		"raven-for-redux": "^1.3.1",
 		"raven-js": "^3.26.4",
 		"rc-progress": "^2.2.6",
-		"react": "^16.6.1",
+		"react": "^16.8.0-alpha.1",
 		"react-addons-css-transition-group": "^15.6.2",
 		"react-color": "^2.14.0",
-		"react-dom": "^16.6.1",
+		"react-dom": "^16.8.0-alpha.1",
 		"react-easy-emoji": "^1.2.0",
 		"react-helmet": "^5.2.0",
 		"react-highlight-words": "^0.11.0",
-		"react-hot-loader": "^4.3.11",
 		"react-i18next": "^8.3.0",
 		"react-redux": "^5.0.7",
 		"react-router": "^4.2.0",
@ -136,6 +135,7 @@
 		"prettier": "^1.15.3",
 		"ramda-fantasy": "^0.8.0",
 		"raw-loader": "^0.5.1",
+		"react-hot-loader": "^4.3.11",
 		"serve": "^10.0.2",
 		"serve-handler": "^5.0.5",
 		"sinon": "^4.5.0",
--- a/source/components/ComparativeTargets.js
+++ b/source/components/ComparativeTargets.js
@ -5,12 +5,13 @@ import {
 	defineDirectorStatus
 } from 'Actions/companyStatusActions'
 import RuleLink from 'Components/RuleLink'
+import PeriodSwitch from 'Components/PeriodSwitch';
 import withSitePaths from 'Components/utils/withSitePaths'
 import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { config } from 'react-spring'
-import { branchAnalyseSelector } from 'Selectors/analyseSelectors'
+import { branchAnalyseSelector, noUserInputSelector } from 'Selectors/analyseSelectors'
 import {
 	règleAvecMontantSelector,
 	règleAvecValeurSelector
@ -23,10 +24,10 @@ import SchemeCard from './ui/SchemeCard'
 const connectRègles = (situationBranchName: string) =>
 	connect(
 		state => ({
-			revenuDisponible: règleAvecMontantSelector(state, {
+			revenuDisponible: !noUserInputSelector(state) && règleAvecMontantSelector(state, {
 				situationBranchName
 			})('revenu disponible'),
-			prélèvements: règleAvecValeurSelector(state, {
+			prélèvements: !noUserInputSelector(state) && règleAvecValeurSelector(state, {
 				situationBranchName
 			})('ratio de prélèvements'),
 		}),
@ -56,12 +57,12 @@ const ComparativeTargets = connect(state => {
 				justifyContent: 'center',
 				alignItems: 'stretch'
 			}}>
-			{!plafondMicroEntrepriseDépassé && <MicroEntreprise branchIndex={0}/>}
+			<MicroEntreprise branchIndex={0} plafondDépassé={plafondMicroEntrepriseDépassé && plafondMicroEntrepriseDépassé.message}/>
 			<AssimiléSalarié branchIndex={2} />
 			<Indépendant branchIndex={1} />
-			{plafondMicroEntrepriseDépassé && <MicroEntreprise branchIndex={0} plafondDépassé={plafondMicroEntrepriseDépassé.message}/>}

 		</div>
+			<PeriodSwitch/>
 	</Animate.fromBottom>
 ))

--- a/source/components/ui/SchemeCard.css
+++ b/source/components/ui/SchemeCard.css
@ -6,6 +6,7 @@
 }

 .scheme-card__inside {
+	height: 100%;
 	display: flex;
 	flex: 1;
 	align-items: center;
@ -49,7 +50,9 @@
 	flex: 1;
 	align-self: stretch;
 }
-
+.scheme-card__cta {
+	text-align: center;
+}
 .scheme-card__amount {
 	display: flex;
 	flex-direction: column;
@ -60,32 +63,54 @@
 	width: fit-content;
 	margin: 1rem auto;
 }
-
+.scheme-card__amount p {
+	margin-top: 0.6rem;
+	margin-bottom: 0rem;
+}
@media (max-width: 800px) {
-	.scheme-card__content {
-		display: none;
+	.scheme-card__title::before {
+		content: '▶';
+		font-size: 1rem;
+		margin-right: 0.6rem;
+		transition: transform 0.3s;
+	}
+	.scheme-card__title--unfold::before {
+		transform: rotate(90deg);
+	}
+
+	.scheme-card__title {
+		position: relative;
+		display: flex;
+		align-items: center;
+		font-weight: 500;
+		order: -1;
 	}
 	.scheme-card__icon {
-		/* display: none; */
-		order: 1;
-		margin-left: 0.6rem;
+		margin-left: 0.3rem;
+		flex: 1;
+		text-align: right;
+		font-size: 1.6rem;
 	}
 	.scheme-card__subtitle {
-		order: -1;
 		margin: 0;
 		font-size: 1.2rem;
-		/* max-width: 50%; */
 	}
 	.scheme-card__container {
 		margin: 0;
 	}
-	.scheme-card__container + .scheme-card__container--top-text {
+	.scheme-card__container--featured {
+		order: -1;
+	}
+	.scheme-card__container--disabled {
+		order: 1;
 		margin-top: 2rem;
 	}
 	.scheme-card__header {
 		display: flex;
-		order: -2;
+		flex-wrap: wrap;
 		align-items: center;
+		cursor: pointer;
+		justify-content: flex-start;
 		font-size: 1rem;
 	}
 	.scheme-card__header + div {
@ -104,8 +129,15 @@
 	}
 	.scheme-card__amount + p {
 		margin: 0;
+		text-align: center;
 	}
-	.scheme-card__cta {
+	.scheme-card__cta:not(.scheme-card__cta--visible) {
+		display: none;
+	}
+	.scheme-card__content {
+		margin-top: 1rem;
+	}
+	.scheme-card__content:not(.scheme-card__content--visible) {
 		display: none;
 	}
 }
--- a/source/components/ui/SchemeCard.js
+++ b/source/components/ui/SchemeCard.js
@ -1,7 +1,8 @@
 /* @flow */
 import classnames from 'classnames'
-import React from 'react'
+import React, { useState } from 'react'
 import emoji from 'react-easy-emoji'
+import Animate from 'Ui/animate'
 import AnimatedTargetValue from './AnimatedTargetValue'
 import './SchemeCard.css'
 import type { Node } from 'react'
@ -23,7 +24,7 @@ type Props = {
 	featured?: Node,
 	icon: string
 }
-const SchemeCard = ({
+function SchemeCard({
 	title,
 	subtitle,
 	amount,
@ -35,56 +36,78 @@ const SchemeCard = ({
 	onAmountClick,
 	featured,
 	features
-}: Props) => (
-	<div
-		className={classnames('scheme-card__container', {
-			'ui__ card coloured': featured,
-			'ui__ card disabled': disabled,
-			'scheme-card__container--top-text': featured || disabled
-		})}>
+}: Props) {
+	const [descriptionVisibility, setDescriptionVisibility] = useState(false)
+	const toggleDescriptionVisibility = () =>
+		setDescriptionVisibility(!descriptionVisibility)
+	return (
 		<div
-			className={`scheme-card__top-text scheme-card__top-text--${
-				featured ? 'featured' : disabled ? 'disabled' : 'hidden'
-			}`}
-			style={{ visibility: featured || disabled ? 'visible' : 'hidden' }}>
-			{featured || disabled || 'nop'}
-		</div>
-		<div
-			className={classnames('scheme-card__inside', {
-				'ui__ card': !featured && !disabled
+			className={classnames('scheme-card__container', {
+				'ui__ card disabled scheme-card__container--disabled': disabled,
+				'ui__ card coloured scheme-card__container--featured': featured
 			})}>
-			<header className="scheme-card__header">
-				<span className="scheme-card__icon">{emoji(icon)} </span>
-				<h3 className="scheme-card__title">{title}</h3>
-			</header>
-			{amount && (
-				<div onClick={onAmountClick}>
-					<div className="ui__ card plain scheme-card__amount">
-						{amountDesc}
-						<p className="ui__ lead">
-							<AnimatedTargetValue value={amount} />
-						</p>
-					</div>
-					<p className="ui__ notice" style={{ marginTop: '-0.6rem' }}>
-						{amountNotice}
-					</p>
-				</div>
-			)}
-			<h4 className="scheme-card__subtitle">{subtitle}</h4>
-			<ul className="scheme-card__content">
-				{features.map((feature, index) => (
-					<li key={index}>{feature}</li>
-				))}
-			</ul>
-			<p className="scheme-card__cta">
-				<button
-					onClick={onSchemeChoice}
-					className={'ui__ button ' + (disabled ? 'simple' : ' plain')}>
-					Choisir ce régime
-				</button>
-			</p>
+			<div
+				className={`scheme-card__top-text scheme-card__top-text--${
+					featured ? 'featured' : disabled ? 'disabled' : 'hidden'
+				}`}
+				style={{ visibility: featured || disabled ? 'visible' : 'hidden' }}>
+				{featured || disabled || 'nop'}
+			</div>
+			<div
+				className={classnames('scheme-card__inside', {
+					'ui__ card': !featured && !disabled
+				})}>
+				<header
+					className="scheme-card__header"
+					onClick={toggleDescriptionVisibility}>
+					<span className="scheme-card__icon">{emoji(icon)} </span>
+					<h3
+						className={
+							'scheme-card__title ' +
+							(descriptionVisibility ? 'scheme-card__title--unfold' : '')
+						}>
+						{title}
+					</h3>
+					<h4 className="scheme-card__subtitle">{subtitle}</h4>
+				</header>
+				{amount && (
+					<Animate.fromBottom>
+						<div onClick={onAmountClick}>
+							<div className="ui__ card plain scheme-card__amount">
+								{amountDesc}
+								<p className="ui__ lead">
+									<AnimatedTargetValue value={amount} />
+								</p>
+							</div>
+							<p className="ui__ notice" style={{ marginTop: '-0.6rem' }}>
+								{amountNotice}
+							</p>
+						</div>
+					</Animate.fromBottom>
+				)}
+				<ul
+					className={
+						'scheme-card__content ' +
+						(descriptionVisibility ? 'scheme-card__content--visible' : '')
+					}>
+					{features.map((feature, index) => (
+						<li key={index}>{feature}</li>
+					))}
+				</ul>
+				<p
+					className={
+						'scheme-card__cta ' +
+						(descriptionVisibility ? 'scheme-card__cta--visible' : '')
+					}>
+					<button
+						onClick={onSchemeChoice}
+						className={'ui__ button ' + (disabled ? 'simple' : ' plain')}>
+						Choisir ce régime
+					</button>
+				</p>
+			</div>
 		</div>
-	</div>
-)
+	)
+}

 export default SchemeCard
--- a/source/components/ui/animate.js
+++ b/source/components/ui/animate.js
@ -13,6 +13,7 @@ import type { Node } from 'react'
 type Props = {
 	children: Node,
 	config?: SpringConfig,
+	style?: Object,
 	delay?: number
 }

@ -20,6 +21,7 @@ type Props = {
 export const fromBottom = ({
 	children,
 	config = configPresets.stiff,
+	style: inheritedStyle = {},
 	delay = 0
 }: Props) => (
 	<Trail
@ -36,7 +38,8 @@ export const fromBottom = ({
 				key={i}
 				style={{
 					transform: y.interpolate(y => `translate3d(0, ${y}px,0)`),
-					...style
+					...style,
+					...inheritedStyle
 				}}>
 				{item}
 			</animated.div>
--- a/yarn.lock
+++ b/yarn.lock
@ -5183,6 +5183,11 @@ lodash.memoize@^4.1.2:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"

+lodash.merge@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
+  integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==
+
 lodash.once@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
@ -6907,15 +6912,15 @@ react-color@^2.14.0:
    reactcss "^1.2.0"
    tinycolor2 "^1.4.1"

-react-dom@^16.6.1:
-  version "16.6.3"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
-  integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
+react-dom@^16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.0-alpha.1.tgz#dab73b8354ba2e498e3127d18e29d4546cea889e"
+  integrity sha512-tZCUM8BpnwUHJmLnUWP9c3vVZxnCqYotj7s4tx7umojG6BKv745KIBtuPTzt0EI0q50GMLEpmT/CPQ8iA61TwQ==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.2"
-    scheduler "^0.11.2"
+    scheduler "^0.13.0-alpha.1"

 react-easy-emoji@^1.2.0:
  version "1.2.0"
@ -6941,15 +6946,19 @@ react-highlight-words@^0.11.0:
    prop-types "^15.5.8"

 react-hot-loader@^4.3.11:
-  version "4.3.12"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.3.12.tgz#0d56688884e7330c63a00a17217866280616b07a"
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.6.3.tgz#d9c8923c45b35fd51538ba4297081a00be6bccb1"
+  integrity sha512-FUvRO8dwbeLnc3mgLn8ARuSh8NnLBYJyiRjFn+grY/5GupSyPqv0U7ixgwXro77hwDplhm8z9wU7FlJ8kZqiAQ==
  dependencies:
    fast-levenshtein "^2.0.6"
    global "^4.3.0"
    hoist-non-react-statics "^2.5.0"
+    loader-utils "^1.1.0"
+    lodash.merge "^4.6.1"
    prop-types "^15.6.1"
    react-lifecycles-compat "^3.0.4"
    shallowequal "^1.0.2"
+    source-map "^0.7.3"

 react-i18next@^8.3.0:
  version "8.3.8"
@ -7107,15 +7116,15 @@ react-virtualized@^9.20.0:
    prop-types "^15.6.0"
    react-lifecycles-compat "^3.0.4"

-react@^16.6.1:
-  version "16.6.3"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
-  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
+react@^16.8.0-alpha.1:
+  version "16.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.1.tgz#c2b32689f3b466d3ce85a634dd9035f789d2cd97"
+  integrity sha512-vLwwnhM2dXrCsiQmcSxF2UdZVV5xsiXjK5Yetmy8dVqngJhQ3aw3YJhZN/YmyonxwdimH40wVqFQfsl4gSu2RA==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.2"
-    scheduler "^0.11.2"
+    scheduler "^0.13.0-alpha.1"

 reactcss@^1.2.0:
  version "1.2.3"
@ -7620,10 +7629,10 @@ scheduler@^0.10.0:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

-scheduler@^0.11.2:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b"
-  integrity sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==
+scheduler@^0.13.0-alpha.1:
+  version "0.13.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556"
+  integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
@ -7881,6 +7890,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"

+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 space-separated-tokens@^1.0.0:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz#e95ab9d19ae841e200808cd96bc7bd0adbbb3412"