betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Saisie d'un salaire possible au clavier

pull/278/head
Mael 2018-07-05 15:33:49 +00:00
parent e52c25773b
commit ee284c8341
5 changed files with 67 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
source/components/AnimatedTargetValue.css Normal file
View File

@ -0,0 +1,17 @@
.Rule-value {
transition: background 0.8s;
font-size: 105%;
}
.Rule-value .figure {
font-weight: bold;
}
/* Animation of summary figures changes : flash ! */
.flash-enter {
background: rgba(255, 255, 255, 1);
}
.flash-leave {
/* Completely hide the button while it's being animated and before it's removed from the DOM. */
display: none;
}

34
source/components/AnimatedTargetValue.js Normal file
View File

@ -0,0 +1,34 @@
import React, { Component } from 'react'
import withLanguage from './withLanguage'
import './AnimatedTargetValue.css'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
@withLanguage
class AnimatedTargetValue extends Component {
render() {
let { value, language } = this.props
let formattedValue =
value == null
? ''
: Intl.NumberFormat(language, {
style: 'currency',
currency: 'EUR',
maximumFractionDigits: 0,
minimumFractionDigits: 0
}).format(value)
return (
<ReactCSSTransitionGroup
transitionName="flash"
transitionEnterTimeout={100}
transitionLeaveTimeout={100}>
<span key={value} className="Rule-value">
{' '}
<span>{formattedValue}</span>
</span>
</ReactCSSTransitionGroup>
)
}
}
export default AnimatedTargetValue

35
source/components/TargetSelection.js
View File

@ -16,7 +16,7 @@ import {
import BlueButton from './BlueButton'
import CurrencyInput from './CurrencyInput/CurrencyInput'
import ProgressCircle from './ProgressCircle/ProgressCircle'
import { RuleValue } from './rule/RuleValueVignette'
import AnimatedTargetValue from './AnimatedTargetValue'
import './TargetSelection.css'
import withLanguage from './withLanguage'
import Controls from './Controls'
@ -236,15 +236,7 @@ let TargetInputOrValue = withLanguage(
)
class TargetValue extends Component {
render() {
let {
targets,
target,
setFormValue,
activeInput,
setActiveInput,
noUserInput,
blockingInputControls
} = this.props
let { targets, target, noUserInput, blockingInputControls } = this.props
let targetWithValue =
targets && targets.find(propEq('dottedName', target.dottedName)),
@ -257,16 +249,21 @@ class TargetValue extends Component {
attractClick:
target.question && (noUserInput || blockingInputControls)
})}
onClick={() => {
if (!target.question) return
if (value != null)
setFormValue(target.dottedName, Math.floor(value) + '')
if (activeInput) setFormValue(activeInput, '')
setActiveInput(target.dottedName)
}}>
<RuleValue value={value} />
tabIndex="0"
onClick={this.showField(value)}
onFocus={this.showField(value)}>
<AnimatedTargetValue value={value} />
</span>
)
}
showField(value) {
let { target, setFormValue, activeInput, setActiveInput } = this.props
return () => {
if (!target.question) return
if (value != null) setFormValue(target.dottedName, Math.floor(value) + '')
if (activeInput) setFormValue(activeInput, '')
setActiveInput(target.dottedName)
}
}
}

39
source/components/rule/RuleValueVignette.css
View File

@ -1,39 +0,0 @@
.RuleValueVignette .rule-box {
display: flex;
justify-content: space-between;
}
.rule-box:hover {
background: rgba(255, 255, 255, 0.16);
}
.RuleValueVignette .rule-box > span {
display: inline-block;
}
.RuleValueVignette .rule-name {
font-weight: 600;
font-size: 105%;
}
.Rule-value {
transition: background 0.8s;
font-size: 105%;
}
.Rule-value .unsatisfied {
font-style: italic;
font-size: 85%;
}
.Rule-value .irrelevant {
font-style: normal;
}
.Rule-value .figure {
font-weight: bold;
}
/* Animation of summary figures changes : flash ! */
.flash-enter {
background: rgba(255, 255, 255, 1);
}
.flash-leave {
/* Completely hide the button while it's being animated and before it's removed from the DOM. */
display: none;
}

53
source/components/rule/RuleValueVignette.js
View File

@ -1,53 +0,0 @@
import React, { Component } from 'react'
import withLanguage from '../withLanguage'
import { Link } from 'react-router-dom'
import { encodeRuleName } from 'Engine/rules'
import './RuleValueVignette.css'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
let RuleValueVignette = ({ name, title, nodeValue: ruleValue }) => (
<span key={name} className="RuleValueVignette">
<Link to={'/règle/' + encodeRuleName(name)}>
<div className="rule-box">
<span className="rule-name">{title}</span>
<RuleValue ruleValue={ruleValue} />
</div>
</Link>
</span>
)
@withLanguage
export class RuleValue extends Component {
render() {
let { value, language } = this.props
let unsatisfied = value == null,
irrelevant = value == 0
let [className, text] = irrelevant
? ['irrelevant', '0']
: unsatisfied
? ['unsatisfied', '']
: [
'figure',
Intl.NumberFormat(language, {
style: 'currency',
currency: 'EUR',
maximumFractionDigits: 0,
minimumFractionDigits: 0
}).format(value)
]
return (
<ReactCSSTransitionGroup
transitionName="flash"
transitionEnterTimeout={100}
transitionLeaveTimeout={100}>
<span key={text} className="Rule-value">
{' '}
<span className={className}>{text}</span>
</span>
</ReactCSSTransitionGroup>
)
}
}
export default RuleValueVignette