import React, { Component } from 'react' import './SelectedVariable.css' import TagMap from './TagMap' import R from 'ramda' export default class SelectedVariable extends Component { render() { let { variable: { name, first: { description }, tags, calculable }, selectedTags } = this.props, tagsList = R.pluck('tags', calculable), commonTags = R.tail(tagsList).reduce( (result, next) => R.intersection(result, R.toPairs(next)), R.toPairs(R.head(tagsList)) ), itemsWithUniqueTags = R.map(item => [item, R.fromPairs(R.difference(R.toPairs(item.tags), commonTags))], calculable) return ( <section id="selected-variable"> <h1>{name}</h1> <p>{description}</p> <TagMap data={commonTags} /> {/* <ul> {Object.keys(tags) .filter(name => !selectedTags.find(([n]) => name == n)) .map(name => <li key={name}> {name + ': ' + tags[name]} </li> )} </ul> */} <Items itemsWithUniqueTags={itemsWithUniqueTags}/> </section>) } } class Items extends Component { render() { let {itemsWithUniqueTags} = this.props return ( <ul id="calculable-items"> {itemsWithUniqueTags.map(([item, tags], i) => <Item key={i} item={item} tags={tags}/> )} </ul> ) } } let Item = ({item: {linear, marginalRateTaxScale}, tags}) => <li className="item"> <div className="left"> <TagMap data={tags} /> </div> <div className="right"> { linear && <Linear data={linear}/> || marginalRateTaxScale && <TaxScale data={marginalRateTaxScale}/> } </div> </li> let Linear = ({data: { base, limit, historique }}) => <div className="calc"> <h3>Calcul linéaire</h3> <div className="linear"> <div className="base"> <div className="label">base</div> <div className="value">{base}</div> </div> <span className="operator"> ✕ </span> <div className="rate"> <div className="label">Taux</div> <div className="value">{ historique[(Object.keys(historique).sort()[0])] }</div> </div> { limit != null && <div className="limit"> <span className="label">dans la limite de : </span> <span className="value"> {limit}</span> </div> } </div> </div> let TaxScale = ({data}) => <div className="calc tax-scale"> <h3>Règle de calcul: barème</h3> {JSON.stringify(data)} </div>