From f6daedc01c4582b8e139bc5c2bd466ecb5b26d64 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Thu, 14 Nov 2019 04:20:48 +0100 Subject: [PATCH] Ajoute un composant Toggle --- source/components/ui/ToggleSwitch.tsx | 73 +++++++++++++++++++ .../pages/Simulateurs/ArtisteAuteur.tsx | 4 +- 2 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 source/components/ui/ToggleSwitch.tsx diff --git a/source/components/ui/ToggleSwitch.tsx b/source/components/ui/ToggleSwitch.tsx new file mode 100644 index 000000000..c096afd94 --- /dev/null +++ b/source/components/ui/ToggleSwitch.tsx @@ -0,0 +1,73 @@ +import React from 'react' +import styled from 'styled-components' + +// From https://www.w3schools.com/howto/howto_css_switch.asp +export default function ToggleSwitch( + props: React.HTMLAttributes +) { + return ( + + + + + ) +} + +const Switch = styled.label` + /* The switch - the box around the slider */ + position: relative; + display: inline-block; + width: 60px; + height: 34px; + + /* Hide default HTML checkbox */ + input { + opacity: 0; + width: 0; + height: 0; + } + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: 0.4s; + } + + .slider:before { + position: absolute; + content: ''; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + transition: 0.4s; + } + + input:checked + .slider { + background-color: #7dbb81; + } + + input:focus + .slider { + box-shadow: 0 0 1px #7dbb81; + } + + input:checked + .slider:before { + transform: translateX(26px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: 34px; + } + + .slider.round:before { + border-radius: 50%; + } +` diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx index f7915a54d..723057efe 100644 --- a/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx +++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx @@ -16,6 +16,7 @@ import { import styled from 'styled-components' import { DottedName } from 'Types/rule' import Animate from 'Ui/animate' +import ToggleSwitch from 'Ui/ToggleSwitch' const situation = { période: 'année', @@ -145,8 +146,7 @@ function DeclarationControléeSwitch() {
- dispatch(