Intégration du module de changement de période sur /règle

A la place des "période : flexible", un peu compliqué à comprendre.

source/components/rule/Header.css

@@ -51,3 +51,10 @@
 #rule pre {
 	padding: 1em 2em;
 }
+
+#ruleHeader #PeriodSwitch {
+	margin: 0.3em 1em;
+}
+#ruleHeader #PeriodSwitch img {
+	display: none;
+}

source/components/rule/Header.js

@@ -8,6 +8,7 @@ import { capitalise0 } from '../../utils'
 import Destinataire from './Destinataire'
 import './Header.css'
 import Namespace from './Namespace'
+import PeriodSwitch from 'Components/PeriodSwitch'
 
 let RuleHeader = withColours(
 	({
@@ -20,7 +21,8 @@ let RuleHeader = withColours(
 		name,
 		title,
 		icon,
-		colours
+		colours,
+		valuesToShow
 	}) => (
 		<section id="ruleHeader">
 			<header style={{ background: colours.colour }}>
@@ -45,19 +47,26 @@ let RuleHeader = withColours(
 							<Trans>{capitalise0(type)}</Trans>
 						</div>
 					)}
-					{flatRule['période'] && (
-						<div className="infobox__item">
-							<h4>{emoji('⏱️')} Période :</h4>
-							<div className="inlineMecanism">
-								<span
-									className="name"
-									data-term-definition="période"
-									style={{ background: '#8e44ad' }}>
-									{flatRule['période']}
-								</span>
+					{do {
+						let period = flatRule['période']
+						period && (
+							<div className="infobox__item">
+								<h4>Période :</h4>
+								{valuesToShow && period === 'flexible' ? (
+									<PeriodSwitch />
+								) : (
+									<div className="inlineMecanism">
+										<span
+											className="name"
+											data-term-definition="période"
+											style={{ background: '#8e44ad' }}>
+											{period}
+										</span>
+									</div>
+								)}
 							</div>
-						</div>
-					)}
+						)
+					}}
 					<Destinataire destinataire={path([type, 'destinataire'])(flatRule)} />
 				</div>
 			</div>

source/components/rule/Rule.js

@@ -87,7 +87,8 @@ export default compose(
 									flatRules,
 									name,
 									title,
-									icon
+									icon,
+									valuesToShow
 								}}
 							/>